Skip to content

[HDS-5541] UI: Align color and border-radius styles to HDS tokens #31583

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
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

[HDS-5541] UI: Align color and border-radius styles to HDS tokens #31583

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
59bd712
[UI] Convert hard-coded border-radius styles to HDS tokens (HDS-5061)
dchyun Oct 9, 2025
4c041e9
[UI] Convert hard coded colors to HDS tokens (HDS-5530)
dchyun Oct 9, 2025
fcc4f73
[UI] Convert HDS color palette tokens to semantic tokens (HDS-5530)
dchyun Oct 9, 2025
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
4 changes: 2 additions & 2 deletions ui/app/styles/components/autocomplete-input.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
background: hsl(0, 0%, 100%) !important;
border: 1px solid var(--token-color-palette-neutral-300);
box-sizing: border-box;
border-radius: 3px;
border-radius: var(--token-border-radius-x-small);
width: 99%;
padding: 4px 0;
margin-left: 0.5%;
Expand All @@ -17,7 +17,7 @@
.autocomplete-input-option {
padding: 12px;
&:hover {
background-color: var(--token-color-palette-neutral-50);
background-color: var(--token-color-surface-faint);
cursor: pointer;
}
}
4 changes: 2 additions & 2 deletions ui/app/styles/components/box-label.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ label.box-label {
@extend .is-centered;

border-color: var(--token-color-palette-neutral-300);
border-radius: 3px;
border-radius: var(--token-border-radius-x-small);
box-shadow: box-shadow_variables.$box-link-shadow;
text-decoration: none;
transition: box-shadow size_variables.$speed;
Expand Down Expand Up @@ -69,6 +69,6 @@ label.box-label {
color: var(--token-color-palette-neutral-400);

.is-selected & {
color: var(--token-color-palette-neutral-600);
color: var(--token-color-foreground-primary);
}
}
2 changes: 1 addition & 1 deletion ui/app/styles/components/calendar-widget.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ $dark-gray: #535f73;
grid-template-columns: 1fr;
grid-template-rows: 0.7fr 3fr;
box-shadow: box-shadow_variables.$box-shadow, box-shadow_variables.$box-shadow-middle;
background-color: white;
background-color: var(--token-color-surface-primary);
border-radius: size_variables.$radius;
}

Expand Down
8 changes: 4 additions & 4 deletions ui/app/styles/components/control-group.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
0 0 1px var(--token-color-palette-neutral-500);
}
.control-group-success.is-editor {
background: var(--token-color-palette-neutral-50);
background: var(--token-color-surface-faint);
}

.control-group a {
Expand All @@ -24,16 +24,16 @@
.control-group-header {
box-shadow: 0 0 1px currentColor;
padding: size_variables.$spacing-10 size_variables.$spacing-14;
background: var(--token-color-palette-neutral-50);
color: var(--token-color-palette-neutral-500);
background: var(--token-color-surface-faint);
color: var(--token-color-foreground-faint);
position: relative;
strong {
color: currentColor;
}
}

.control-group-header.is-success {
color: var(--token-color-palette-green-300);
color: var(--token-color-foreground-success-on-surface);
background: var(--token-color-palette-green-50);
}

Expand Down
2 changes: 1 addition & 1 deletion ui/app/styles/components/doc-link.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
*/

.doc-link {
color: var(--token-color-palette-blue-200);
color: var(--token-color-foreground-action);
font-weight: font_variables.$font-weight-semibold;
&:hover {
text-decoration: underline !important;
Expand Down
2 changes: 1 addition & 1 deletion ui/app/styles/components/form-section.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,6 @@
background-color: black;

pre {
color: var(--token-color-palette-neutral-50);
color: var(--token-color-surface-faint);
}
}
2 changes: 1 addition & 1 deletion ui/app/styles/components/icon.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
}

.icon-blue {
color: var(--token-color-palette-blue-200);
color: var(--token-color-foreground-action);
}

.hds-icon {
Expand Down
2 changes: 1 addition & 1 deletion ui/app/styles/components/info-table-row.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@
}

.icon-true {
color: var(--token-color-palette-green-200);
color: var(--token-color-foreground-success);
}

.icon-false {
Expand Down
2 changes: 1 addition & 1 deletion ui/app/styles/components/masked-input.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ pre.masked-font {
&:focus,
&:hover,
&:focus:not(:active) {
color: var(--token-color-palette-blue-200);
color: var(--token-color-foreground-action);
border: 0;
box-shadow: none;
}
Expand Down
14 changes: 7 additions & 7 deletions ui/app/styles/components/popup-menu.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@
// so they match other dropdown elements until we replace popup-menu with Hds::Dropdown
.hds-confirm-action-critical {
&:hover {
background-color: var(--token-color-palette-neutral-50);
background-color: var(--token-color-surface-faint);
}
div,
span {
Expand All @@ -72,21 +72,21 @@
.ember-power-select-option[aria-current='true'],
a {
background-color: hsl(0, 0%, 100%);
color: var(--token-color-palette-neutral-600);
color: var(--token-color-foreground-primary);

&:hover {
background-color: var(--token-color-palette-neutral-50);
color: var(--token-color-palette-neutral-600);
background-color: var(--token-color-surface-faint);
color: var(--token-color-foreground-primary);
}

&.active,
&.is-active {
background-color: transparent;
color: var(--token-color-palette-blue-200);
color: var(--token-color-foreground-action);
}

&.is-destroy {
color: var(--token-color-palette-red-200);
color: var(--token-color-foreground-critical);

&:hover {
background-color: var(--token-color-palette-red-200);
Expand All @@ -109,7 +109,7 @@
}

.menu-label {
color: var(--token-color-palette-neutral-500);
color: var(--token-color-foreground-faint);
font-size: size_variables.$size-9;
font-weight: font_variables.$font-weight-normal;
letter-spacing: 0;
Expand Down
4 changes: 2 additions & 2 deletions ui/app/styles/components/radio-card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,14 +96,14 @@
.radio-card-radio-row {
display: flex;
justify-content: center;
background: var(--token-color-palette-neutral-50);
background: var(--token-color-surface-faint);
padding: size_variables.$spacing-8;
}

.is-selected {
&.radio-card {
border-color: var(--token-color-palette-blue-200);
background: var(--token-color-palette-neutral-50);
background: var(--token-color-surface-faint);
box-shadow: box-shadow_variables.$box-shadow-middle;
}
.radio-card-icon {
Expand Down
2 changes: 1 addition & 1 deletion ui/app/styles/components/raft-join.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
padding-bottom: size_variables.$spacing-12;
}
.raft-join-unseal {
color: var(--token-color-palette-amber-200);
color: var(--token-color-foreground-warning);
font-size: size_variables.$size-6;
display: inline-block;
}
4 changes: 2 additions & 2 deletions ui/app/styles/components/regex-validator.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,11 @@
.regex-group {
font-family: font_variables.$family-monospace;
font-size: size_variables.$size-8;
color: var(--token-color-palette-neutral-500);
color: var(--token-color-foreground-faint);
}
.regex-group-position {
background-color: var(--token-color-palette-neutral-200);
border-radius: 3px;
border-radius: var(--token-border-radius-x-small);
padding-top: 5px;
padding-bottom: 4px;
margin-right: 4px;
Expand Down
2 changes: 1 addition & 1 deletion ui/app/styles/components/replication-dashboard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
}

.toolbar-link {
color: var(--token-color-palette-blue-200);
color: var(--token-color-foreground-action);
}
}

Expand Down
6 changes: 3 additions & 3 deletions ui/app/styles/components/search-select.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,8 +81,8 @@
}

.ember-power-select-option[aria-current='true'] {
background-color: var(--token-color-palette-neutral-50);
color: var(--token-color-palette-neutral-600);
background-color: var(--token-color-surface-faint);
color: var(--token-color-foreground-primary);
}

.ember-power-select-option--no-matches-message {
Expand Down Expand Up @@ -116,7 +116,7 @@

&:hover,
&:focus {
color: var(--token-color-palette-blue-200);
color: var(--token-color-foreground-action);
}
}
}
Expand Down
12 changes: 6 additions & 6 deletions ui/app/styles/components/stat-text.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
.stat-text {
font-size: size_variables.$size-8;
font-weight: font_variables.$font-weight-normal;
color: var(--token-color-palette-neutral-500);
color: var(--token-color-foreground-faint);
line-height: inherit;
}
.stat-value {
Expand All @@ -42,7 +42,7 @@
.stat-text {
font-size: size_variables.$size-8;
font-weight: font_variables.$font-weight-normal;
color: var(--token-color-palette-neutral-500);
color: var(--token-color-foreground-faint);
line-height: inherit;
}
.stat-value {
Expand All @@ -61,7 +61,7 @@
.stat-text {
font-size: size_variables.$size-8;
font-weight: font_variables.$font-weight-normal;
color: var(--token-color-palette-neutral-500);
color: var(--token-color-foreground-faint);
line-height: inherit;
}
.stat-value {
Expand All @@ -80,7 +80,7 @@
.stat-text {
font-size: size_variables.$size-8;
font-weight: font_variables.$font-weight-normal;
color: var(--token-color-palette-neutral-500);
color: var(--token-color-foreground-faint);
line-height: inherit;
}
.stat-value {
Expand All @@ -100,13 +100,13 @@
.stat-text {
font-size: size_variables.$size-8;
font-weight: font_variables.$font-weight-normal;
color: var(--token-color-palette-neutral-500);
color: var(--token-color-foreground-faint);
line-height: inherit;
}
.stat-value {
font-size: size_variables.$size-8;
font-weight: font_variables.$font-weight-normal;
color: var(--token-color-palette-neutral-600);
color: var(--token-color-foreground-primary);
line-height: inherit;
}
}
Expand Down
12 changes: 6 additions & 6 deletions ui/app/styles/components/tabs-component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,19 +34,19 @@
}
&.active {
border-color: var(--token-color-palette-blue-200);
color: var(--token-color-palette-blue-200);
color: var(--token-color-foreground-action);
}
}
li {
// solves for tools -> sub-tabs like "Unwrap data" -> "Data"
&.is-active {
border-bottom: 2px solid var(--token-color-palette-blue-200);
color: var(--token-color-palette-blue-200);
color: var(--token-color-foreground-action);
}
// solves for tabs on auth mounts & secrets engines
> a {
&.active {
color: var(--token-color-palette-blue-200);
color: var(--token-color-foreground-action);
background-color: transparent;
border-bottom: 2px solid var(--token-color-palette-blue-200);
}
Expand All @@ -61,7 +61,7 @@
&.active a,
&.is-active a {
border-color: var(--token-color-palette-blue-200);
color: var(--token-color-palette-blue-200);
color: var(--token-color-foreground-action);
}
}
// important for auth tabs in active state, otherwise the border-bottom will not show.
Expand All @@ -85,8 +85,8 @@
}

&:hover {
background-color: var(--token-color-palette-neutral-50);
color: var(--token-color-palette-neutral-600);
background-color: var(--token-color-surface-faint);
color: var(--token-color-foreground-primary);
}
}

Expand Down
12 changes: 6 additions & 6 deletions ui/app/styles/components/toolbar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
}

.toolbar {
background-color: var(--token-color-palette-neutral-50);
background-color: var(--token-color-surface-faint);
border: 1px solid var(--token-color-palette-neutral-100);
border-bottom-color: var(--token-color-palette-neutral-300);
border-top-color: var(--token-color-palette-neutral-300);
Expand Down Expand Up @@ -62,7 +62,7 @@
}

&::-webkit-scrollbar-thumb {
background: var(--token-color-palette-neutral-300);
background: var(--token-color-surface-strong);
border-radius: size_variables.$spacing-4;
}
}
Expand Down Expand Up @@ -102,9 +102,9 @@
transition: background-color size_variables.$speed;

&:hover:not(.disabled) {
background-color: var(--token-color-palette-neutral-100);
background-color: var(--token-color-surface-strong);
border: 0;
color: var(--token-color-palette-blue-200);
color: var(--token-color-foreground-action);
}

&:active {
Expand Down Expand Up @@ -133,8 +133,8 @@ a.disabled.toolbar-link {
background-color: hsl(0, 0%, 100%);
cursor: not-allowed;
&:hover {
background-color: var(--token-color-palette-neutral-100);
color: var(--token-color-palette-blue-200);
background-color: var(--token-color-surface-strong);
color: var(--token-color-foreground-action);
}
}

Expand Down
4 changes: 2 additions & 2 deletions ui/app/styles/components/transform-edit.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@
*/

.copy-text {
background: var(--token-color-palette-neutral-50);
background: var(--token-color-surface-faint);

& > code {
color: var(--token-color-palette-neutral-600);
color: var(--token-color-foreground-primary);
padding: 14px;
}
}
Expand Down
2 changes: 1 addition & 1 deletion ui/app/styles/core/box.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
background-color: hsl(0, 0%, 100%);
border-radius: 0;
box-shadow: 0 0 0 1px rgba(var(--token-color-palette-neutral-500), 0.3);
color: var(--token-color-palette-neutral-600);
color: var(--token-color-foreground-primary);
display: block;
padding: size_variables.$spacing-18;

Expand Down
Loading
Loading