Skip to content

[Project Solar / Phase 1 / Components] Tag carbonization #3685

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dchyun wants to merge 6 commits into
base: project-solar/phase-1-main-feature-branch
Choose a base branch
from
Open

[Project Solar / Phase 1 / Components] Tag carbonization #3685

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a2b22c8
HDS-6107 Tag Carbonization showcase page
dchyun Mar 9, 2026
bd826f8
Feat: Tag carbonization tokens and styles
dchyun Mar 9, 2026
dd82ba9
Fix: Set link color on dismiss button icon
dchyun Mar 9, 2026
87ba79b
Fix: Tag icon color tokens added
dchyun Mar 18, 2026
e9d1ecf
Chore: Reorganize carbonization page
dchyun Mar 18, 2026
d7c6f15
Feat: Add max width and letter spacing tokens
dchyun Mar 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
82 changes: 62 additions & 20 deletions packages/components/src/styles/components/tag.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,26 +8,30 @@
//

@use "../mixins/focus-ring" as *;

// we set a higher value than the line-height (~13px) to accommodate cases where the text wraps
$hds-tag-border-radius: 50px;
@use "../mixins/carbonization" as *;

.hds-tag {
display: inline-flex;
align-items: stretch;
width: fit-content;
max-width: 100%;
vertical-align: middle;
background-color: var(--token-color-surface-interactive);
background-color: var(--token-tag-surface-color-default);
border: 1px solid var(--token-color-border-strong);
border-radius: $hds-tag-border-radius;
border-radius: var(--token-tag-border-radius);

@include hds-apply-only-if-carbon() {
&:not(.hds-tag--color-primary, .hds-tag--color-secondary) {
border: none;
}
}
}

.hds-tag__dismiss {
flex: 0 0 auto;
margin: 0; // reset default button margin
padding: 6px 4px 6px 8px;
background-color: var(--token-color-surface-interactive);
background-color: var(--token-tag-surface-color-default);
border: none; // reset default button border
border-radius: inherit;
border-top-right-radius: 0;
Expand All @@ -37,26 +41,37 @@ $hds-tag-border-radius: 50px;
.hds-tag__dismiss-icon {
width: 12px;
height: 12px;
color: var(--token-tag-icon-color);
}

.hds-tag__dismiss-icon,
.hds-tag__dismiss,
.hds-tag__text {
color: var(--token-color-foreground-primary);
color: var(--token-tag-foreground-color-default);
Copy link
Contributor

@jorytindall jorytindall Mar 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is causing the icon in the dismiss button to match the text, which is not how the primary variant appears now. So the x in the dismiss button is matching the color of the text.

Before
Image

After
Image

Copy link
Contributor

@KristinLBradley KristinLBradley Mar 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like this style was there before (now gone in this PR) that was controlling the svg icon color:

.hds-tag__dismiss-icon, .hds-tag__text {
    color: var(--token-color-foreground-primary);
}

Copy link
Contributor Author

@dchyun dchyun Mar 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This has been fixed now. I added in some icon color tokens like there are in Figma. I had to separate the link primary and secondary colors for the icon from the plain text color. So I have three new variables

  • tag.icon.color
  • tag.link.icon.color.primary
  • tag.link.icon.color.secondary

}

.hds-tag__text,
.hds-tag__link {
flex: 1 0 0;
max-width: 166px; // account for excess horizontal padding of text in non-dismissible variant
padding: 3px 10px 5px 10px;
background-color: var(--token-color-surface-interactive);
max-width: var(--token-tag-max-width); // account for excess horizontal padding of text in non-dismissible variant
padding: var(--token-tag-padding-top) var(--token-tag-padding-right) var(--token-tag-padding-bottom)
var(--token-tag-padding-left);
background-color: var(--token-tag-surface-color-default);
border-radius: inherit;
}

.hds-tag__link {
@include hds-apply-only-if-carbon() {
text-decoration: none;
}
}

.hds-tag__text-container {
display: -webkit-box;
overflow: hidden;
line-height: 1rem; // 16px - override `body-100`
font-weight: var(--token-typography-font-weight-regular);
font-size: var(--token-tag-typography-font-size);
line-height: var(--token-tag-typography-line-height);
letter-spacing: var(--token-tag-typography-letter-spacing);
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
Expand All @@ -65,8 +80,8 @@ $hds-tag-border-radius: 50px;

.hds-tag__dismiss ~ .hds-tag__text,
.hds-tag__dismiss ~ .hds-tag__link {
max-width: 160px;
padding: 3px 8px 5px 6px;
max-width: calc(var(--token-tag-max-width) - 6px);
padding: var(--token-tag-padding-top) 8px var(--token-tag-padding-bottom) 6px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
Expand All @@ -79,12 +94,12 @@ $hds-tag-border-radius: 50px;

&:hover,
&.mock-hover {
background-color: var(--token-color-surface-interactive-hover);
background-color: var(--token-tag-surface-color-hover);
}

&:active,
&.mock-active {
background-color: var(--token-color-surface-interactive-active);
background-color: var(--token-tag-surface-color-active);
}

&:focus,
Expand Down Expand Up @@ -112,23 +127,50 @@ $hds-tag-border-radius: 50px;
// COLORS (FOR LINK)

.hds-tag--color-primary {
border: 1px solid var(--token-tag-link-border-color-primary);

.hds-tag__link,
&:has(.hds-tag__link) .hds-tag__dismiss {
background-color: var(--token-tag-link-surface-color-primary-default);

&:hover,
&.mock-hover {
background-color: var(--token-tag-link-surface-color-primary-hover);
}

&:active,
&.mock-active {
background-color: var(--token-tag-link-surface-color-primary-hover);
}
}

.hds-tag__link {
color: var(--token-color-foreground-action);
color: var(--token-tag-link-foreground-color-primary-default);

&:hover,
&.mock-hover {
color: var(--token-color-foreground-action-hover);
color: var(--token-tag-link-foreground-color-primary-hover);
}

&:active,
&.mock-active {
color: var(--token-color-foreground-action-active);
color: var(--token-tag-link-foreground-color-primary-active);
}
}

.hds-tag__dismiss-icon {
color: var(--token-tag-link-icon-color-primary);
}
}

.hds-tag--color-secondary {
border: 1px solid var(--token-tag-link-border-color-secondary);

.hds-tag__link {
color: var(--token-color-foreground-strong);
color: var(--token-tag-link-foreground-color-secondary-default);
}

.hds-tag__dismiss-icon {
color: var(--token-tag-link-icon-color-secondary);
}
}
24 changes: 24 additions & 0 deletions packages/tokens/dist/devdot/css/tokens.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -475,6 +475,30 @@
--token-tabs-indicator-transition-function: cubic-bezier(0.5, 1, 0.89, 1);
--token-tabs-indicator-transition-duration: 0.6s;
--token-tabs-divider-height: 1px;
--token-tag-max-width: 166px;
--token-tag-padding-top: 3px;
--token-tag-padding-bottom: 5px;
--token-tag-padding-right: 10px;
--token-tag-padding-left: 10px;
--token-tag-border-radius: 50px;
--token-tag-surface-color-default: #ffffff;
--token-tag-surface-color-hover: #f1f2f3;
--token-tag-surface-color-active: #dedfe3;
--token-tag-foreground-color-default: #3b3d45;
--token-tag-typography-font-size: 0.8125rem;
--token-tag-typography-letter-spacing: 0px;
--token-tag-typography-line-height: 1.2308;
--token-tag-icon-color: #3b3d45;
--token-tag-link-border-color-primary: #3b3d4566;
--token-tag-link-border-color-secondary: #3b3d4566;
--token-tag-link-surface-color-primary-default: #ffffff;
--token-tag-link-surface-color-primary-hover: #f1f2f3;
--token-tag-link-foreground-color-primary-default: #1060ff;
--token-tag-link-foreground-color-primary-hover: #0c56e9;
--token-tag-link-foreground-color-primary-active: #0046d1;
--token-tag-link-foreground-color-secondary-default: #0c0c0e;
--token-tag-link-icon-color-primary: #3b3d45;
--token-tag-link-icon-color-secondary: #3b3d45;
--token-tooltip-max-width: 280px;
--token-tooltip-padding-horizontal: 12px;
--token-tooltip-padding-vertical: 8px;
Expand Down
Loading
Loading