Design Token updates #85
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
…ngs in the Unify theme only. Updating the values of letter-spacing tokens of eyebrow text in the Mastercard theme only.
…encing token “{color.background.surface.default-mode-light}” & dark instead of “color.background.input.default-mode-light” & dark.
This is to update this across all 3 themes.
…l.background(light & dark)) as well as the themes. This has now been updated for both light and dark mode.
Figma unify mastercard 2 0
Was referencing the incorrect alias token.
It was referencing {color.brand.primary-mode-light} when it should be referencing {color.brand.primary-mode-dark}. This has now been updated to {color.brand.primary-mode-dark}
…l tokens that previously used "default" to define the size. We are now changing this to use the term "medium" instead.
Changelog
component.button.default.padding-x → component.button.medium.padding-x
component.button.default.padding-y → component.button.medium.padding-y
component.button.default.gap → component.button.medium.gap
component.button.default.border-radius → component.button.medium.border-radius
component.button.default.font-weight → component.button.medium.font-weight
component.button.default.line-height → component.button.medium.line-height
component.button.default.font-size → component.button.medium.font-size
component.button.default.letter-spacing → component.button.medium.letter-spacing
component.badge.default.padding-x → component.badge.medium.padding-x
component.badge.default.font-weight → component.badge.medium.font-weight
component.badge.default.line-height → component.badge.medium.line-height
component.badge.default.font-size → component.badge.medium.font-size
component.badge.default.letter-spacing → component.badge.medium.letter-spacing
component.breadcrumb.default.line-height → component.breadcrumb.medium.line-height
component.breadcrumb.default.font-size → component.breadcrumb.medium.font-size
component.form-control.default.padding-x → component.form-control.medium.padding-x
component.form-control.default.padding-y → component.form-control.medium.padding-y
link.default.hover → link.medium.hover
link.default.default → link.medium.medium
component.link.default.font-weight → component.link.medium.font-weight
component.link.default.line-height → component.link.medium.line-height
component.link.default.font-size → component.link.medium.font-size
component.list-item.default.padding-x → component.list-item.medium.padding-x
component.list-item.default.padding-y → component.list-item.medium.padding-y
component.list-item.default.gap → component.list-item.medium.gap
component.list-item.contained.default.padding-x → component.list-item.contained.medium.padding-x
component.list-item.contained.default.padding-y → component.list-item.contained.medium.padding-y
component.list-item.contained.default.gap → component.list-item.contained.medium.gap
component.tag.default.font-weight → component.tag.medium.font-weight
component.tag.default.font-size → component.tag.medium.font-size
component.tag.default.line-height → component.tag.medium.line-height
Additionally, we are updating our form-control border colors in each theme to ensure they now pass WCAG color contrast ratios.
{MA Theme}
color.border.strong-mode-light is now referencing color.gray.1000 instead of color.gray.600
{Unify Theme}
color.border.input-mode-light is now referencing color.neutral.500 instead of color.border.default-mode-light
{PartnerBank Theme}
color.border.input-mode-light is now referencing color.neutral.600 instead of color.border.default-mode-light
… arrays somehow in the Figma Plugin. Manually iupdating them individually again. These values also match the Design Token secifications: https://www.designtokens.org/tr/2025.10/format/#example-transition-composite-token-examples
Bug fix for a single token: Token: color.text.selection-bg-mode-dark
…rding to WCAG SC 1.4.11 (Non-text Contrast AA), "any visual information provided that is necessary for a user to identify that a control is present and how to operate it must have a minimum 3:1 contrast ratio with the adjacent colors".
Token changelog (for all 3 themes)
component.toggle.background.off-mode-light
Old reference: {color.background.feedback.neutral.hover-mode-light}
New reference: {color.border.input-mode-light}
component.toggle.background.off-mode-dark
Old reference: {color.background.feedback.neutral.hover-mode-dark}
New reference: {color.border.input-mode-dark}
…ect tokens
Light Mode
{color.background.brand.secondary.hover} was incorrectly referencing {color.background.brand.primary.active-mode-light}
{color.background.brand.secondary.hover} Is now referencing {color.background.brand.secondary.active-mode-light}
{color.background.brand.secondary.active} was incorrectly referencing {color.background.brand.primary.active-mode-light}
{color.background.brand.secondary.active} Is now referencing {color.background.brand.secondary.active-mode-light}
Dark Mode
{color.background.brand.secondary.hover} was incorrectly referencing {color.background.brand.primary.active-mode-dark}
{color.background.brand.secondary.hover} Is now referencing {color.background.brand.secondary.active-mode-dark}
{color.background.brand.secondary.active} was incorrectly referencing {color.background.brand.primary.active-mode-dark}
{color.background.brand.secondary.active} Is now referencing {color.background.brand.secondary.active-mode-dark}
…he old link color tokens seemed to be following a different naming convention to the latest component-level naming conventions. Updating to ensure they are consistent with the rest of the component-level tokens. color.link.default ➡️ component.link.default.text-color color.link.active ➡️ component.link.active.text-color color.link.hover ➡️ component.link.hover.text-color color.link.visited ➡️ component.link.visited.text-color color.link.neutral.default ➡️ component.link.neutral.default.text-color color.link.neutral.active ➡️ component.link.neutral.active.text-color color.link.neutral.hover ➡️ component.link.neutral.hover.text-color color.link.neutral.visited ➡️ component.link.neutral.visited.text-color
…sure they are consistent with the rest of the component-level tokens. Updating to ensure they are consistent with the rest of the component-level tokens. component.date-picker.day.background-hover ➡️ component.date-picker.day.hover.background component.date-picker.day.background-selected ➡️ component.date-picker.day.selected.background component.date-picker.day.background-selected-hover ➡️ component.date-picker.day.selected-hover.background component.date-picker.day.background-in-range ➡️ component.date-picker.day.in-range.background
…nd a fallback to JetBrains Mono.
Changing the color of the toggle background in its OFF position.
…}. It was previously, incorrectly referencing {component.link.hover.text-mode-dark}, this has now been fixed to reference {component.link.hover.text-color-mode-dark}
…s Mono. Setting the Teritiary font family in the Mastercard theme to just "Menlo"
fixing reference error for the token {component.link.hover.text-color…
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.
🧨 Breaking Changes
Sizing updates
Link component updates
Changing our semantic link color tokens to component-level tokens.
The old link color tokens were inconsistent with the latest naming convention.
Date-picker updates
Aligning the date-picker token names with the rest of the component-level token structure.
✅ Non-Breaking Changes
Interactive brand colors
Light Mode
Dark Mode
♿ WCAG AA Contrast Compliance
Toggle background colors
Adjusting toggle OFF-state background color to meet WCAG SC 1.4.11 (Non-text Contrast AA).
Form-control border colors
Mastercard theme
Unify theme