Merge Barra Changes#105
Open
miguel-hub wants to merge 11 commits into
Open
Conversation
Updating the value of the token: component.modal.top-bar.padding-right
In the mastercar theme, this was incorrectly set to 3rem {size-space.12-x} instead of 1.5rem {size-space.6-x}
Updating the value of the token: color.background.backdrop-mode-light
Specifically, updating the opacity value in the Mastercard theme from 70% opacity to 40% so that it is the same as the Unify theme.
+-----------------------------------------------------+-------------------+-------------------+
| Token name | Old value | New value |
+-----------------------------------------------------+-------------------+-------------------+
| component.link.hover.text-color-mode-light | {color.gray.1600} | {color.gray.1300} |
+-----------------------------------------------------+-------------------+-------------------+
| component.link.active.text-color-mode-light | {color.gray.1400} | {color.gray.1200} |
+-----------------------------------------------------+-------------------+-------------------+
| component.link.hover.text-color-mode-dark | {color.gray.200} | {color.gray.300} |
+-----------------------------------------------------+-------------------+-------------------+
| component.link.active.text-color-mode-dark | {color.gray.400} | {color.gray.500} |
+-----------------------------------------------------+-------------------+-------------------+
| component.link.neutral.hover.text-color-mode-light | {color.gray.1600} | {color.gray.1300} |
+-----------------------------------------------------+-------------------+-------------------+
| component.link.neutral.active.text-color-mode-light | {color.gray.1400} | {color.gray.1200} |
+-----------------------------------------------------+-------------------+-------------------+
| component.link.neutral.hover.text-color-mode-dark | {color.gray.200} | {color.gray.300} |
+-----------------------------------------------------+-------------------+-------------------+
| component.link.neutral.active.text-color-mode-dark | {color.gray.400} | {color.gray.500} |
+-----------------------------------------------------+-------------------+-------------------+
…"contained" variants:
| Token | Reference *new* | Raw *new* |
+------------------------------------------------+-----------------+-----------+
| component.tabs.contained.background-mode-light | {gray.300} | {#F3F0EE} |
+------------------------------------------------+-----------------+-----------+
| component.tabs.contained.background-mode-dark | {gray.1500} | {#2A2A28} |
+------------------------------------------------+-----------------+-----------+
| component.tabs.contained.background | | |
Figma unify mastercard 2 0
component.tabs.contained.background-mode-dark It was referencing a Mastercard primitive color instead of a Unify primitive color
Pushing a fix for a token conflict in the Unify theme for the token:
…the Design QA of the first batch of web components.
making the token value of color.border.disabled to use the same value as color.background.disabled for the Mastercard theme in both modes.
Update the border radius of the checkbox to 4px in the Mastercard theme (currently set to 2px, this doesn’t really fit with the look and feel of the rest of our components)
Update the border radius of the Modal to 20px in the Mastercard theme (currently set to 10px, this doesn’t really fit with the look and feel of the rest of our components such as Card and Menu)
The feedback from Andy is that our Modal overlay offers too little contrast between the actual modal and the application visuals underneath. I tested in design and I agree. Therefore we need to update 2 tokens:
{color.background.backdrop-mode-dark} to color.black at 60% opacity in Dark mode for the Mastercard theme. While this improves it, the modal could still use a border in order to ensure its can be distinguished form the background
component.modal.border-color should reference color.border.default in both modes for the Mastercard theme.
The following Design Token changes need to be made, these arose from …
ah3nry
approved these changes
Mar 30, 2026
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
4 participants
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.
The following Design Token changes need to be made, these arose from the Design QA of the first batch of web components.
making the token value of color.border.disabled to use the same value as color.background.disabled for the Mastercard theme in both modes.
Update the border radius of the checkbox to 4px in the Mastercard theme (currently set to 2px, this doesn’t really fit with the look and feel of the rest of our components)
Update the border radius of the Modal to 20px in the Mastercard theme (currently set to 10px, this doesn’t really fit with the look and feel of the rest of our components such as Card and Menu)
The feedback from Andy is that our Modal overlay offers too little contrast between the actual modal and the application visuals underneath. I tested in design and I agree. Therefore we need to update 2 tokens:
{color.background.backdrop-mode-dark} to color.black at 60% opacity in Dark mode for the Mastercard theme. While this improves it, the modal could still use a border in order to ensure its can be distinguished form the background (see below change)
component.modal.border-color should reference color.border.default in both modes for the Mastercard theme.
Closes #
{{short description}}
Changelog
New
Changed
Removed
Testing / Reviewing
{{ Add descriptions, steps or a checklist for how reviewers can verify this PR works or not }}