Repository navigation
Move design tokens to Tokens Studio and document contributor workflow - #285
Merged
Merged
Conversation
coldlink
added
feature
Dependency Compatibility Matrix
|
coldlink
force-pushed
the
mm/tokens-studio
branch
6 times, most recently
from
October 19, 2026 13:48
2251355 to
7c2f7e7
Compare
coldlink
force-pushed
the
mm/tokens-studio
branch
2 times, most recently
from
October 19, 2026 14:33
3e6f72f to
b4f5d0d
Compare
coldlink
changed the title
coldlink
force-pushed
the
mm/tokens-studio
branch
from
October 19, 2026 14:39
b4f5d0d to
b276f39
Compare
coldlink
marked this pull request as ready for review
October 19, 2026 14:39
Contributor
There was a problem hiding this comment.
🟡 Changes recommended
One critical breakpoint-selection regression and six moderate theme-override regressions remain unresolved.
7 open issues
What changed in this PR
Migrates shared design tokens to Tokens Studio while retaining local component tokens and documenting contributor ownership and workflows.
Changes:
- Updates token generation and regenerates CSS and TypeScript outputs.
- Replaces legacy token sources and Figma workflow documentation.
- Updates component scaffolding guidance and Storybook token ordering.
| File | Description |
|---|---|
src/util/storybook/sort.ts |
Adds numeric token sorting. |
src/templates/design-tokens/templateComponent.json |
Uses semantic text colour. |
src/styleD/tokens/component/userFeedbackSummary.json |
Removes migrated local source. |
src/styleD/tokens/component/typography.json |
Removes migrated local source. |
src/styleD/tokens/component/topBarItem.json |
Removes migrated local source. |
src/styleD/tokens/component/topBar.json |
Removes migrated local source. |
src/styleD/tokens/component/tooltip.json |
Removes migrated local source. |
src/styleD/tokens/component/textListInput.json |
Removes migrated local source. |
src/styleD/tokens/component/textInput.json |
Removes migrated local source. |
src/styleD/tokens/component/textArea.json |
Removes migrated local source. |
src/styleD/tokens/component/templateComponent.json |
Adds local scaffold tokens. |
src/styleD/tokens/component/tagPicker.json |
Updates token representation. |
src/styleD/tokens/component/searchInput.json |
Removes migrated local source. |
src/styleD/tokens/component/pickerIframeModel.json |
Adds reformatted local iframe tokens. |
src/styleD/tokens/component/pickerIframeModal.json |
Removes previous iframe token source. |
src/styleD/tokens/component/link.json |
Removes migrated local source. |
src/styleD/tokens/component/layout.json |
Removes migrated local source. |
src/styleD/tokens/component/intendedAudienceSignifier.json |
Updates token types and dimensions. |
src/styleD/tokens/component/inlineMessage.json |
Removes migrated local source. |
src/styleD/tokens/component/icon.json |
Removes migrated local source. |
src/styleD/tokens/component/htmlPreviewLoader.json |
Updates dimension representation. |
src/styleD/tokens/component/grid.json |
Removes migrated local source. |
src/styleD/tokens/component/form.json |
Removes migrated local source. |
src/styleD/tokens/component/favicon.json |
Removes migrated local source. |
src/styleD/tokens/component/buttonGroup.json |
Removes migrated local source. |
src/styleD/tokens/component/autocomplete.json |
Removes migrated local source. |
src/styleD/tokens/component/alertBanner.json |
Removes migrated local source. |
src/styleD/stories/semantic/TypographyPresets.tsx |
Sorts presets by family and size. |
src/styleD/stories/semantic/Spacing.tsx |
Sorts spacing numerically. |
src/styleD/stories/semantic/Sizing.tsx |
Sorts sizing numerically. |
src/styleD/stories/base/Spacing.tsx |
Sorts spacing numerically. |
src/styleD/stories/base/Sizing.tsx |
Sorts sizing numerically. |
src/styleD/stories/base/Colors.stories.tsx |
Excludes the transparent palette entry. |
src/styleD/config.js |
Adds TypeScript dimension transformation. |
src/styleD/build/typescript/semantic/spacing.ts |
Reorders generated tokens. |
src/styleD/build/typescript/semantic/sizing.ts |
Reorders generated tokens. |
src/styleD/build/typescript/semantic/shadow.ts |
Normalizes zero-length units. |
src/styleD/build/typescript/semantic/radius.ts |
Reorders generated tokens. |
src/styleD/build/typescript/semantic/grid.ts |
Reorders generated tokens. |
src/styleD/build/typescript/semantic/breakpoints.ts |
Reorders breakpoint exports. Critical, 3 votes (line 6): getActiveBreakpoint now selects the final sm entry at larger widths. Sort by numeric minimum before selecting. |
src/styleD/build/typescript/component/userMenu.ts |
Reorders generated tokens. |
src/styleD/build/typescript/component/userFeedbackSummary.ts |
Reorders generated tokens. |
src/styleD/build/typescript/component/tooltip.ts |
Reorders generated tokens. |
src/styleD/build/typescript/component/toggleSwitch.ts |
Reorders generated tokens. |
src/styleD/build/typescript/component/toast.ts |
Updates ordering and shadow serialization. |
src/styleD/build/typescript/component/tile.ts |
Reorders generated tokens. |
src/styleD/build/typescript/component/textListInput.ts |
Reorders generated tokens. |
src/styleD/build/typescript/component/textInput.ts |
Updates ordering and padding types. Moderate, 3 votes (line 34): Numeric vertical padding rejects CSS-length theme overrides and renders nonzero overrides without units. Preserve dimension strings and regenerate. |
src/styleD/build/typescript/component/textArea.ts |
Reorders generated tokens. |
src/styleD/build/typescript/component/templateComponent.ts |
Updates scaffold colours. |
src/styleD/build/typescript/component/tagTable.ts |
Reorders generated tokens. |
src/styleD/build/typescript/component/tagPicker.ts |
Reorders generated tokens. |
src/styleD/build/typescript/component/tabs.ts |
Updates ordering and padding types. Moderate, 3 votes (line 33): Numeric vertical padding rejects CSS-length theme overrides and renders nonzero overrides without units. Preserve dimension strings and regenerate. |
src/styleD/build/typescript/component/table.ts |
Reorders generated tokens. |
src/styleD/build/typescript/component/sidebarStepperNavigation.ts |
Reorders generated tokens. |
src/styleD/build/typescript/component/select.ts |
Updates ordering and offset type. Moderate, 3 votes (line 55): Numeric outlineOffset rejects CSS-length theme overrides and produces invalid unitless nonzero CSS. Preserve a unit-bearing dimension and regenerate. |
src/styleD/build/typescript/component/searchInput.ts |
Updates ordering and padding types. Moderate, 3 votes (line 35): Numeric vertical padding rejects CSS-length theme overrides and renders nonzero overrides without units. Preserve dimension strings and regenerate. |
src/styleD/build/typescript/component/radioGroup.ts |
Updates ordering and scale type. |
src/styleD/build/typescript/component/pickerIframeModal.ts |
Normalizes zero-length units. |
src/styleD/build/typescript/component/pagination.ts |
Updates ordering and zero-value types. Moderate, 3 votes (line 49): Numeric item.paddingY rejects CSS-length theme overrides and produces invalid unitless nonzero padding. Preserve a dimension string and regenerate. |
src/styleD/build/typescript/component/modal.ts |
Reorders generated tokens. |
src/styleD/build/typescript/component/link.ts |
Reorders generated tokens. |
src/styleD/build/typescript/component/layout.ts |
Reorders generated tokens. |
src/styleD/build/typescript/component/intendedAudienceSignifier.ts |
Updates ordering and line-height type. |
src/styleD/build/typescript/component/inlineMessage.ts |
Reorders generated tokens. |
src/styleD/build/typescript/component/icon.ts |
Reorders generated tokens. |
src/styleD/build/typescript/component/htmlPreviewLoader.ts |
Reorders generated tokens. |
src/styleD/build/typescript/component/grid.ts |
Reorders generated tokens. |
src/styleD/build/typescript/component/form.ts |
Reorders generated tokens. |
src/styleD/build/typescript/component/favicon.ts |
Reorders generated tokens. |
src/styleD/build/typescript/component/byline.ts |
Reorders generated tokens. |
src/styleD/build/typescript/component/buttonGroup.ts |
Reorders generated tokens. |
src/styleD/build/typescript/component/autocomplete.ts |
Reorders generated tokens. |
src/styleD/build/typescript/component/alertBanner.ts |
Updates ordering and numeric types. Moderate, 3 votes (line 38): Numeric vertical padding rejects CSS-length theme overrides and renders nonzero overrides without units. Preserve unit-bearing dimensions and regenerate. |
src/styleD/build/typescript/base/typography.ts |
Reorders generated tokens. |
src/styleD/build/typescript/base/spacing.ts |
Reorders generated tokens. |
src/styleD/build/typescript/base/sizing.ts |
Reorders generated tokens. |
src/styleD/build/typescript/base/radius.ts |
Reorders generated tokens. |
src/styleD/build/css/semantic/spacing.css |
Reorders generated properties. |
src/styleD/build/css/semantic/sizing.css |
Reorders generated properties. |
src/styleD/build/css/semantic/shadow.css |
Normalizes zero-length units. |
src/styleD/build/css/semantic/radius.css |
Reorders generated properties. |
src/styleD/build/css/semantic/grid.css |
Reorders generated properties. |
src/styleD/build/css/semantic/breakpoints.css |
Reorders generated properties. |
src/styleD/build/css/component/userMenu.css |
Reorders generated properties. |
src/styleD/build/css/component/userFeedbackSummary.css |
Reorders generated properties. |
src/styleD/build/css/component/tooltip.css |
Reorders generated properties. |
src/styleD/build/css/component/toggleSwitch.css |
Reorders generated properties. |
src/styleD/build/css/component/toast.css |
Updates ordering and shadow serialization. |
src/styleD/build/css/component/textListInput.css |
Reorders generated properties. |
src/styleD/build/css/component/textInput.css |
Reorders generated properties. |
src/styleD/build/css/component/textArea.css |
Reorders generated properties. |
src/styleD/build/css/component/templateComponent.css |
Updates scaffold colours. |
src/styleD/build/css/component/tagTable.css |
Reorders generated properties. |
src/styleD/build/css/component/tagPicker.css |
Reorders generated properties. |
src/styleD/build/css/component/tabs.css |
Reorders generated properties. |
src/styleD/build/css/component/table.css |
Reorders generated properties. |
src/styleD/build/css/component/sidebarStepperNavigation.css |
Reorders generated properties. |
src/styleD/build/css/component/select.css |
Updates ordering and shadow serialization. |
src/styleD/build/css/component/searchInput.css |
Reorders generated properties. |
src/styleD/build/css/component/pickerIframeModal.css |
Normalizes zero-length units. |
src/styleD/build/css/component/pagination.css |
Reorders generated properties. |
src/styleD/build/css/component/modal.css |
Reorders generated properties. |
src/styleD/build/css/component/link.css |
Reorders generated properties. |
src/styleD/build/css/component/layout.css |
Reorders generated properties. |
src/styleD/build/css/component/intendedAudienceSignifier.css |
Reorders generated properties. |
src/styleD/build/css/component/inlineMessage.css |
Reorders generated properties. |
src/styleD/build/css/component/icon.css |
Reorders generated properties. |
src/styleD/build/css/component/htmlPreviewLoader.css |
Reorders generated properties. |
src/styleD/build/css/component/grid.css |
Reorders generated properties. |
src/styleD/build/css/component/form.css |
Reorders generated properties. |
src/styleD/build/css/component/favicon.css |
Reorders generated properties. |
src/styleD/build/css/component/byline.css |
Reorders generated properties. |
src/styleD/build/css/component/buttonGroup.css |
Reorders generated properties. |
src/styleD/build/css/component/autocomplete.css |
Reorders generated properties. |
src/styleD/build/css/component/alertBanner.css |
Reorders generated properties. |
src/styleD/build/css/base/spacing.css |
Reorders generated properties. |
src/styleD/build/css/base/sizing.css |
Reorders generated properties. |
src/styleD/build/css/base/radius.css |
Reorders generated properties. |
scripts/figma/README.md |
Removes obsolete fetching instructions. |
scripts/create-component.ts |
Updates the token ownership checklist. |
README.md |
Documents the Tokens Studio workflow. |
package.json |
Cleans token outputs before generation. |
docs/storybook/StyleDictionary.mdx |
Removes the superseded guide. |
docs/storybook/DesignTokens.mdx |
Adds token usage, ownership, and workflow guidance. |
CONTRIBUTING.md |
Documents contributor token responsibilities. |
.studio.json |
Configures Tokens Studio exports. |
.agents/skills/create-component/SKILL.md |
Aligns component-creation guidance. |
Review effort: Balanced
coldlink
force-pushed
the
mm/tokens-studio
branch
2 times, most recently
from
October 19, 2026 15:01
d7bc29e to
810b80e
Compare
Contributor
There was a problem hiding this comment.
🔵 Needs a closer look
Public theme compatibility remains unresolved, and the broad migration still needs visual review and real-consumer canary validation.
1 open issue
7 resolved since last review
Review effort: Balanced
coldlink
force-pushed
the
mm/tokens-studio
branch
from
October 19, 2026 15:08
810b80e to
9cea4b8
Compare
coldlink
force-pushed
the
mm/tokens-studio
branch
from
October 19, 2026 15:19
9cea4b8 to
aaaa0ef
Compare
|
🐥 |
github-actions
Bot
removed
the
🐥 Canaries
jamesmockett
approved these changes
Oct 20, 2026
jamesmockett
left a comment
jamesmockett
left a comment
Contributor
There was a problem hiding this comment.
I've skipped over most of the changes in /src (as it's mainly automated tokens updates and build artefacts), but the remaining changes and documentation updates look good ✨
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
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.
What does this change?
Makes Tokens Studio the source of truth for the shared base, semantic, and verified component tokens used by Style Dictionary. The token build now reads the consolidated Tokens Studio exports, and the generated CSS and TypeScript outputs are updated to match.
The old Figma variable token fetching scripts are removed.
Explains that some component DTCG tokens remain local (e.g. for non-design system shareable components, and unverified design system components).
Renames the Style Dictionary guide to Design Tokens and documents token ownership and the current workflow. It clarifies which token changes need to go through the design systems team, which component tokens contributors can maintain locally, and how to build and review generated outputs. The component creation guidance is updated to follow the same workflow.
How has this change been tested?
pnpm run build-styledto generate token outputs.How can we measure success?
Have we considered potential risks?