feat(kv-tokens)!: migrate to Style Dictionary v4 pipeline#807
feat(kv-tokens)!: migrate to Style Dictionary v4 pipeline#807
Conversation
BREAKING CHANGE: The legacy tw-exported-vars.scss artifact is no longer generated. Consume SCSS tokens via the new `@kiva/kv-tokens/scss` subpath (served from dist/scss/tokens.scss). SCSS variable names now follow Style Dictionary's kebab-case convention (e.g. $color-brand-default instead of $colors-brand-default). Design tokens are now generated by Style Dictionary from tokens/core/*.json + tokens/semantic/themes/*.json; the hand-authored primitives.js has been removed.
dyersituations
left a comment
There was a problem hiding this comment.
Lots of changes, but nothing seems obviously wrong. Will the apps need to change imports when the packages are updated?
Yes we will need to make updates to the app. Noted in the Next Steps section of the Description. |
Nice! I didn't see that originally in the description. Sounds good. |
… ensure token build
|
A note on status here. I've fixed a couple of DX issues and added an addition tokens export. I've been testing this in the next branch and verified locally in CPS with UI pending. |
Summary
This update installs StyleDictionary laying the groundwork for future import of Figma based design tokens AND providing us a versatile tool to create various exports from our design tokens/variables such as automated creation of incoming skill reference files.
primitives.jswith W3C DTCG JSON undertokens/core/(primitives) andtokens/semantic/themes/(themes).dist/js/tokens.js,dist/css/tokens.css, anddist/scss/tokens.scssfrom those JSON sources via custom formats/transforms inbuild/.exportsmap so consumers can reach tokens at@kiva/kv-tokens,@kiva/kv-tokens/tokens,@kiva/kv-tokens/tailwind,@kiva/kv-tokens/css, and@kiva/kv-tokens/scss.kivaColors.js,kivaTypography.js,tailwind.config.js,build.js,kivaHeadingUnderline.js, andindex.jsnow consume the generated tokens module. Default export shape is byte-identical to the oldprimitives.js(parity-verified before deletion).Breaking changes
dist/kvui/tw-exported-vars.scssis no longer generated. Consume SCSS via@kiva/kv-tokens/scssinstead.$color-brand-defaultinstead of$colors-brand-default).primitives.jshas been removed. The default export of@kiva/kv-tokensstill resolves to the same nested shape, so existing JS/Vue imports continue to work unchanged.The
feat!:+BREAKING CHANGE:footer on commiteec0d687will trigger Lerna to bump@kiva/kv-tokensto v4.0.0 on release.Test plan
npm run buildsucceeds across the monoreponpm run lintcleannpm run test— 810 tests passing, 0 failuresrgb(var(--text-primary)))tokens/semantic/themes/default.jsontext.primary→ magenta, rebuilt, verified color flashed in Storybook, reverted@kiva/kv-tokens,@kiva/kv-tokens/tokens,@kiva/kv-tokens/tailwindNext Steps
IMPORTANT!!! Merging this will create a major version bump of kv-tokens which will require a "migration" update for kv-components, cms-page-server and ui when the new version is installed.