feat(#3095): Tabs component design tokens for v2 styling #97
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
twjeffery
force-pushed
the
v2-tabs-component
branch
from
d13e9da to
c8690af
Compare
bdfranck
requested changes
Oct 10, 2025
| "type": "sizing", | ||
| "description": "Width of the active/hover indicator line (desktop bottom bar, mobile left bar)" | ||
| }, | ||
| "tab-border-radius-desktop": { |
There was a problem hiding this comment.
It could be helpful to rename these to tab-indicator-border-radius- for clarity.
| "value": "{borderRadius.s} {borderRadius.s} 0px 0px", | ||
| "type": "other" | ||
| }, | ||
| "tab-border-radius-mobile": { |
There was a problem hiding this comment.
Is -mobile the same as -small-screen? If so, we should make them all the same to be consistent.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 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.
Summary
Adds V2 design tokens for the Tabs component, introducing new tokens for
state-based colors, responsive indicators, and refined typography while
updating spacing for improved visual hierarchy.
Changes
Updated Component Tokens
Tabs Component (18 tokens total: 8 new, 10 updated)
New Color Tokens
tab-color-text-hover- Text color on hover state(
color.text.default)tab-color-text-not-selected- Inactive tab text color(
color.greyscale.600)tab-color-bg-hover-small-screen- Mobile hover background(
color.greyscale.50)tab-indicator-color-active- Active tab indicator color(
color.interactive.default)tab-indicator-color-hover- Hover tab indicator color(
color.greyscale.300)New Indicator & Layout Tokens
tab-indicator-width- 3px indicator height/width (borderWidth.xl)tab-border-radius-desktop- Rounded top corners for desktop indicator(
6px 6px 0px 0px)tab-border-radius-mobile- Rounded right corners for mobile indicator(
0px 6px 6px 0px)tabs-padding-bottom-mobile- Mobile container bottom padding(
space.m)Updated Color Tokens
tab-color-text-selected- Active tab text remains blue(
color.interactive.default)tab-color-bg-selected-small-screen- Updated tocolor.info.light(was
color.info.background)Updated Typography Tokens (Changed from references to composite
tokens)
tab-typography- Medium weight, 16px/22px, -0.5px letter spacing (forinactive tabs)
tab-typography-selected- Semibold weight, 16px/22px, -0.5px letterspacing (for active tabs)
Updated Spacing Tokens
tab-padding- Desktop padding updated to8px 4px 9px 4px(accommodates 3px indicator + visual spacing)
tab-padding-mobile- Mobile padding updated to4px 12px 4px 15px(accommodates left indicator)
tabs-gap- Gap between tabs reduced fromspace.xl(32px) tospace.m(16px)Updated Border Tokens
tab-border-focus- Focus border width increased toborderWidth.xl(4px, was
borderWidth.lat 3px)tabs-bottom-border- Container border color lightened togreyscale.150(wasgreyscale.200)Related