Handle json sizing tokens and style dictionary transforms and output#2536
Draft
itsmedavep wants to merge 4 commits intomainfrom
Draft
Handle json sizing tokens and style dictionary transforms and output#2536itsmedavep wants to merge 4 commits intomainfrom
itsmedavep wants to merge 4 commits intomainfrom
Conversation
Now sizing.json is exported from Figma Since Figma export only has $type: number from w3c spec we have to do some SD transformation to handle things properly. We mingle css custom props and scss vars in our sizing-variables.scss file with and without units. To decouple that we need to treat it as two dimensions. unitIntent and emitIntent. In Figma split variables into groups within the sizing variable collection of: sass/unitless sass/dimension-px sass/dimension-em css/unitless css/dimension-px We will use those buckets in the resulting JSON to have SD generate the appropriate thing. Meaning we can build separate SD outputs per the above buckets dimension-px uses size/px (built in SD transform) dimension-em uses size/em (custom SD transform) unitless uses no transform Then generate separate scss and css files from those groups in the JSON. Then aggregate them via their own wrapper so consumers can still import easily. Keeping all formula/aliases (eg font size adjust) in one hand rolled shim. Basically our existing sizing-vars.scss where we import the separated scss and css files. We need to forward ./sizing-tokens because there are other consumers of sizing-vars.scss in the legacy components. That gets us to Figma sizing JSON tokens transformed into scss and css files and then combined in sizing-vars.scss. 1 Figma export, 1 JSON token file. Slight changes to sizing vars/custom properties organization.
Moved to format then dimension naming convention structure in Figma export JSON We now have this we key off in the JSON: no group -> emits .css no group and group format in same JSON -> emits css for no group and then corresponding format If it is format/dimension then we append the appropriate unit to the given format
Moved the refactored SD utilities to style-dictionary/plugins to match project structure. Updated paths in SD config to import from new location. Updated sizing.json to pick up --select-border-width-error: 2px and regened tokens.
itsmedavep
force-pushed
the
dave_sd_handle_JSON_sizing_tokens
branch
from
8134aa1 to
1f907f0
Compare
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
This allow for us to export w3c design token group spec JSON from Figma.
The Figma limitation that necessitates the need for this is Figma variables when exported to JSON only have $type: number. Our scss uses lots of variables with units.
Added top leve intent detection per token file
File type creation now comes from source basename
sass -> filename.sass
css -> filement.css
mixed intent + non intent (in exported JSON) -> non intent creates filename.default.css to avoid overwrites
Made number rounding to the 4th decimal place universal because Figma variables have float noise so rounding removes that in the file output values
Introduced taxonomy in JSON (and Figma) of:
Top level intent based
-- sass
|_ Tokens intended for scss vars
|_ creates filename.scss
-- css
|_ Tokens intended for css custom props
|_ creates filename.css
-- unitless
|_ Routed through default css
|_ creates filename.css if no top level intent exists (preserves default behavior)
|_ creates filename.default.css when mixed top level intent and no intent exists
Within the intents second level taxonomy controls units:
Refactored SD config to break it into seperation of concerns and make it more maintainable.
Additions
Removals
Changes
Testing
Screenshots
Notes
Todos
Checklist
Testing checklist
Browsers
Accessibility
Other