feat: Add new base size and shape tokens #60
Merged
Conversation
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
Adding new size base tokens, deprecating base font-size, line-height, type-scale, and level tokens in favor of size. System font-size, line-height tokens will alias to base size tokens. Type compound tokens will alias to system font-size, line-height tokens. These bundle system tokens into a style. Shape tokens updated to use t-shirt sizing and to alias base size tokens. Depth tokens blur updated to alias to base size tokens. Y offset of ambient shadow updated to be calculated off of the base shadow.
Font size and line height now alias base size tokens. Compound tokens alias semantic tokens instead of deprecated font-size and line-height tokens
Visual Comparisonsys/breakpoint.json
sys/opacity.json
sys/shape.json
sys/type.json
|
What should this file be named? type.json is in sys font.json? typography.json?
RayRedGoose
reviewed
Oct 7, 2025
tokens/base/size.json
Outdated
Comment on lines
3
to
9
| "unit": { | ||
| "value": "0.25rem", | ||
| "type": "dimension", | ||
| "description": "The base unit used for the typographic grid system.\n", | ||
| "deprecated": true, | ||
| "deprecatedComment": "Use {base.baseline} instead for consistent sizing calculations" | ||
| }, |
There was a problem hiding this comment.
Deprecated tokens should be listed in different json in deprecated folder
There was a problem hiding this comment.
ah okay, one sec
There was a problem hiding this comment.
should be done
Removed deprecated level configuration from shadow.json.
Removed deprecated base unit definition from size.json.
Removed deprecated font sizes and line heights from typography.json. Moved to deprecated folder
RayRedGoose
reviewed
Oct 7, 2025
RayRedGoose
reviewed
Oct 8, 2025
RayRedGoose
reviewed
Oct 8, 2025
…tokens-studio into taka-size-updates
|
@takashimokobe shape still has |
tokens/sys/type.json
Outdated
| "fontWeight": "{font-weight.medium}", | ||
| "lineHeight": "{line-height.subtext.small}", | ||
| "fontSize": "{font-size.subtext.medium}", | ||
| "letterSpacing": "{letter-spacing.subtext.medium}" |
There was a problem hiding this comment.
should this be md or medium
There was a problem hiding this comment.
yes, I'll update this
In favor of short hand "sm", "lg"
In favor of t-shirt shorthand
Fix JSON formatting by adding a newline at the end of the file.
tokens/deprecated/sys/type.json
Outdated
| } | ||
| } | ||
| }, | ||
| }, |
mannycarrera4
approved these changes
Oct 29, 2025
RayRedGoose
reviewed
Oct 30, 2025
RayRedGoose
reviewed
Oct 30, 2025
RayRedGoose
reviewed
Oct 30, 2025
tokens/sys/shape.json
Outdated
| "half": { | ||
| "value": "{base.unit} * 0.5", | ||
| "xs": { | ||
| "value": "{size.100}", |
There was a problem hiding this comment.
in decision log it said 4px, so {size.50}, what is the correct value?
There was a problem hiding this comment.
It should be size.50
RayRedGoose
reviewed
Oct 30, 2025
Comment on lines
+135
to
+150
| "value": "{letter-spacing.50}", | ||
| "type": "number" | ||
| }, | ||
| "md": { | ||
| "value": "{letter-spacing.100}", | ||
| "type": "number" | ||
| }, | ||
| "lg": { | ||
| "value": "{letter-spacing.150}", | ||
| "type": "number" | ||
| } | ||
| }, | ||
| "body": { | ||
| "sm": { | ||
| "value": "{letter-spacing.200}", | ||
| "type": "number" |
There was a problem hiding this comment.
Should it use size token too?
There was a problem hiding this comment.
i think letter spacing uses size token?
There was a problem hiding this comment.
no, letter-spacing spacing is a decimal value (for our use case) - 0.4 through 0.16
Was mapped to incorrect value
Co-authored-by: Raisa Primerova <[email protected]>
| "value": 0.24, | ||
| "type": "number" | ||
| }, | ||
| "200": { |
There was a problem hiding this comment.
ah i see, this doesn't use size?
There was a problem hiding this comment.
no, letter-spacing is a decimal or percentage
we could use math but feel unnecessary
RayRedGoose
approved these changes
Oct 30, 2025
Comment on lines
+135
to
+150
| "value": "{letter-spacing.50}", | ||
| "type": "number" | ||
| }, | ||
| "md": { | ||
| "value": "{letter-spacing.100}", | ||
| "type": "number" | ||
| }, | ||
| "lg": { | ||
| "value": "{letter-spacing.150}", | ||
| "type": "number" | ||
| } | ||
| }, | ||
| "body": { | ||
| "sm": { | ||
| "value": "{letter-spacing.200}", | ||
| "type": "number" |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Base size tokens
This pr adds new base
sizetokens that represent dimensions in the 8pt grid. Naming is based off a scale number (0, 25, 100) and the baseline unit of 8pt.size.[scaleNumber]=scaleNumber/100*8This provides a scalable foundation for any dimension related system tokens to alias, including:
System token updates
blurupdated to reference basesizetokens.sizetokenssizetokenssizetokensDeprecated