[H-5723] Stub a Figma-to-Panda POC #95
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| node_modules | ||
| dist | ||
| *.log | ||
| .DS_Store | ||
|
|
||
| ## Panda | ||
| styled-system | ||
| styled-system-studio | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| declare module '*.css' { | ||
| const css: string; | ||
| export default css; | ||
| } | ||
|
|
||
| declare module '*.module.css' { | ||
| const classes: { readonly [key: string]: string }; | ||
| export default classes; | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| import 'react'; | ||
|
|
||
| declare module 'react' { | ||
| interface CSSProperties { | ||
| [key: `--${string}`]: string | number | undefined; | ||
| } | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| import '@total-typescript/ts-reset'; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -0,0 +1,9 @@ | ||||||
| # ds-figma-to-panda | ||||||
|
|
||||||
| This is a POC for a getting from a Figma variables export, to a Panda CSS theme configuration object, which can be directly used in the panda config of the design-system. | ||||||
|
|
||||||
| ## TODOs | ||||||
|
|
||||||
| - [ ] establish coordinatedthe variables nomenclature in Figma | ||||||
|
Member
There was a problem hiding this comment. Possibly this? Wasn't sure what the
Suggested change
|
||||||
| - [ ] write a transformation script backed by Zod schema verification, that takes Figma variables output JSON and produces a well-formed PandaCSS theme token configuration object | ||||||
| - [ ] create various demo "stories" in Ladle to demonstrate visual matching of the token and variant structures, against the Figma originals (swatches, surfaces, spacings, button and input variants, etc.) | ||||||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>React Components Starter</title> | ||
| </head> | ||
| <body> | ||
| <div id="app"></div> | ||
| <script type="module" src="/src/index.tsx"></script> | ||
| </body> | ||
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| import React from 'react'; | ||
| import { MyButton } from '../../src'; | ||
| import { css } from '../../styled-system/css'; | ||
|
|
||
| const divCss = css({ color: 'red', fontSize: '20px', _osDark: { color: 'blue' } }); | ||
|
|
||
| export function App() { | ||
| return ( | ||
| <> | ||
| <div className={divCss}>Hello</div> | ||
| <MyButton type="primary" /> | ||
| </> | ||
| ); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| import React, { StrictMode } from 'react'; | ||
| import { createRoot } from 'react-dom/client'; | ||
| import { App } from './App.tsx'; | ||
| import './style.css'; | ||
|
|
||
| createRoot(document.querySelector('#app')!).render( | ||
| <StrictMode> | ||
| <App /> | ||
| </StrictMode> | ||
| ); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| :root { | ||
| font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; | ||
| line-height: 1.5; | ||
| font-weight: 400; | ||
|
|
||
| color-scheme: light dark; | ||
| color: rgba(255, 255, 255, 0.87); | ||
| background-color: #242424; | ||
|
|
||
| font-synthesis: none; | ||
| text-rendering: optimizeLegibility; | ||
| -webkit-font-smoothing: antialiased; | ||
| -moz-osx-font-smoothing: grayscale; | ||
| } | ||
|
|
||
| a { | ||
| font-weight: 500; | ||
| color: #646cff; | ||
| text-decoration: inherit; | ||
| } | ||
| a:hover { | ||
| color: #535bf2; | ||
| } | ||
|
|
||
| body { | ||
| margin: 0; | ||
| display: flex; | ||
| place-items: center; | ||
| min-width: 320px; | ||
| min-height: 100vh; | ||
| } | ||
|
|
||
| h1 { | ||
| font-size: 3.2em; | ||
| line-height: 1.1; | ||
| } | ||
|
|
||
| button { | ||
| border-radius: 8px; | ||
| border: 1px solid transparent; | ||
| padding: 0.6em 1.2em; | ||
| font-size: 1em; | ||
| font-weight: 500; | ||
| font-family: inherit; | ||
| background-color: #1a1a1a; | ||
| cursor: pointer; | ||
| transition: border-color 0.25s; | ||
| } | ||
| button:hover { | ||
| border-color: #646cff; | ||
| } | ||
| button:focus, | ||
| button:focus-visible { | ||
| outline: 4px auto -webkit-focus-ring-color; | ||
| } | ||
|
|
||
| .card { | ||
| padding: 2em; | ||
| } | ||
|
|
||
| #app { | ||
| max-width: 1280px; | ||
| margin: 0 auto; | ||
| padding: 2rem; | ||
| text-align: center; | ||
| } | ||
|
|
||
| @media (prefers-color-scheme: light) { | ||
| :root { | ||
| color: #213547; | ||
| background-color: #ffffff; | ||
| } | ||
| a:hover { | ||
| color: #747bff; | ||
| } | ||
| button { | ||
| background-color: #f9f9f9; | ||
| } | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| import react from '@vitejs/plugin-react' | ||
| import { defineConfig } from 'vite' | ||
|
|
||
| export default defineConfig({ | ||
| root: './dev', | ||
| plugins: [react()], | ||
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| { | ||
| "name": "react-components-starter", | ||
| "version": "0.0.0", | ||
| "description": "A starter for creating a React component library.", | ||
| "type": "module", | ||
| "license": "MIT", | ||
| "homepage": "https://github.com/author/library#readme", | ||
| "bugs": { | ||
| "url": "https://github.com/author/library/issues" | ||
| }, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git+https://github.com/author/library.git" | ||
| }, | ||
| "author": "Author Name <[email protected]>", | ||
| "files": [ | ||
| "dist" | ||
| ], | ||
| "main": "./dist/index.js", | ||
| "module": "./dist/index.js", | ||
| "types": "./dist/index.d.ts", | ||
| "exports": { | ||
| ".": "./dist/index.js", | ||
| "./package.json": "./package.json" | ||
| }, | ||
| "publishConfig": { | ||
| "access": "public" | ||
| }, | ||
| "scripts": { | ||
| "prepare": "panda codegen", | ||
| "build": "tsdown", | ||
| "watch": "tsdown --watch", | ||
| "dev": "vite --config dev/vite.config.ts", | ||
| "test": "vitest", | ||
| "typecheck": "tsc --noEmit", | ||
| "release": "bumpp && pnpm publish", | ||
| "prepublishOnly": "pnpm run build" | ||
| }, | ||
| "peerDependencies": { | ||
| "react": "^19.2.0", | ||
| "react-dom": "^19.2.0" | ||
| }, | ||
| "devDependencies": { | ||
| "@pandacss/dev": "^1.5.1", | ||
| "@testing-library/jest-dom": "^6.9.1", | ||
| "@testing-library/react": "^16.3.0", | ||
| "@tsconfig/strictest": "^2.0.8", | ||
| "@types/node": "^24.10.1", | ||
| "@types/react": "^19.2.5", | ||
| "@types/react-dom": "^19.2.3", | ||
| "@vitejs/plugin-react": "^5.1.1", | ||
| "bumpp": "^10.3.1", | ||
| "happy-dom": "^20.0.10", | ||
| "tsdown": "^0.16.4", | ||
| "typescript": "^5.9.3", | ||
| "vite": "npm:rolldown-vite@^7.2.5", | ||
| "vitest": "^4.0.9" | ||
| }, | ||
| "dependencies": { | ||
| "@total-typescript/ts-reset": "^0.6.1" | ||
| } | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| import { defineConfig } from '@pandacss/dev'; | ||
|
|
||
| export default defineConfig({ | ||
| // Whether to use css reset | ||
| preflight: true, | ||
|
|
||
| include: [ | ||
| // Where to look for your css declarations | ||
| './src/**/*.{js,jsx,ts,tsx}', | ||
| './dev/**/*.{js,jsx,ts,tsx}', | ||
| './tests/**/*.{js,jsx,ts,tsx}', | ||
| ], | ||
|
|
||
| // Files to exclude | ||
| exclude: [], | ||
|
|
||
| // Useful for theme customization | ||
| theme: { | ||
| extend: {}, | ||
| }, | ||
|
|
||
| // The output directory for your css system | ||
| outdir: 'styled-system', | ||
| }); |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This doesn't matter in the
labsdir, but for awareness in the mainhashmonorepo we try to avoid having nested ignore files, and define everything in the root.gitignorewhich we then selectively sync with our otherignorefiles (also in the root) which handle linting exceptions, etc. This helps us keep things manageable in the monorepo structure.In this case these 3 of these 4 appear in the root
.gitignorealready, with the exception of the*.logcommand (which the existing root.config/**/*.logexclusion could simple be expanded to account for).Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We can aim for that, but I would say the upside of nested ignore files is that you keep the file closer to the relevant patterns it is ignoring, which makes it easier to understand what is being ignored where and why, and allows the patterns to be more targeted (e.g. absolute paths relative to the nested file)—plus you avoid potentially unclear (or eventually orphaned) patterns in the root file.
FTR there are currently 7 nested
.gitignorefiles inhashother than the root oneThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
No disagreement on those points; IIRC this was a conscious architectural decision for least a couple of reasons, although likely more I'm forgetting:
Stray
.gitignores may well have slipped in to the primary public monorepo, but I wanted to flag this as an explicit goal since I am aware it exists, and know you would otherwise not have context on it (yet).