- Run
npm install
to install dependencies. - Run
node colors.build.js
to generate style files. The source tokens are located in/tokens
and the output files are in/build
. - Run
npm run dev
to start nextjs. - Run
npm run theme
to generate new typings based on the theme. This works with both VS Code and Webstorm.- This capability is only available in Chakra V2, not V1
- Troubleshoot: If the theme typings don't show up immediately, try restarting your TypeScript server (Cmd + Shift + P > "TypeScript: Restart TS server" if you're using VSCode).
- Troubleshoot: There is a maximum scan depth of 3 on tokens. types will not get generated for tokens nested too deeply. (have to flatten names or remove outer structure)
- Run
node icons.build.js
to generate JSX files based on icon SVGs. The source icons are in/assets
and the output files are in/build/icons
. - Run
npm run dev
to start nextjs.
There are 3 icons in /assets
: CheckboxEnabled, CheckboxIndeterminate, CheckboxSelected
We need to be careful about how the icons get exported from Figma. Every icon needs to consist of a <path>
, with no fill rule applied.
- CheckboxEnabled has
<rect>
, so the corresponding CheckboxEnabledIcon.jsx is invalid. - CheckboxIndeterminate and CheckboxSelected have
<path>
, but were exported with fill-rule="evenodd". As a result, the fill rule had to be applied to the component otherwise the icon is not displayed correctly.
More: https://levimcg.com/blog/more-control-over-figma-svg-exports/