Skip to content

Commit fcc4f73

Browse files
dchyundchyun
committed
[UI] Convert HDS color palette tokens to semantic tokens (HDS-5530)
1 parent 4c041e9 commit fcc4f73

35 files changed

+103
-103
lines changed

‎ui/app/styles/components/autocomplete-input.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
.autocomplete-input-option {
1818
padding: 12px;
1919
&:hover {
20-
background-color: var(--token-color-palette-neutral-50);
20+
background-color: var(--token-color-surface-faint);
2121
cursor: pointer;
2222
}
2323
}

‎ui/app/styles/components/box-label.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,6 @@ label.box-label {
6969
color: var(--token-color-palette-neutral-400);
7070

7171
.is-selected & {
72-
color: var(--token-color-palette-neutral-600);
72+
color: var(--token-color-foreground-primary);
7373
}
7474
}

‎ui/app/styles/components/control-group.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
0 0 1px var(--token-color-palette-neutral-500);
1616
}
1717
.control-group-success.is-editor {
18-
background: var(--token-color-palette-neutral-50);
18+
background: var(--token-color-surface-faint);
1919
}
2020

2121
.control-group a {
@@ -24,16 +24,16 @@
2424
.control-group-header {
2525
box-shadow: 0 0 1px currentColor;
2626
padding: size_variables.$spacing-10 size_variables.$spacing-14;
27-
background: var(--token-color-palette-neutral-50);
28-
color: var(--token-color-palette-neutral-500);
27+
background: var(--token-color-surface-faint);
28+
color: var(--token-color-foreground-faint);
2929
position: relative;
3030
strong {
3131
color: currentColor;
3232
}
3333
}
3434

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

‎ui/app/styles/components/doc-link.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
*/
77

88
.doc-link {
9-
color: var(--token-color-palette-blue-200);
9+
color: var(--token-color-foreground-action);
1010
font-weight: font_variables.$font-weight-semibold;
1111
&:hover {
1212
text-decoration: underline !important;

‎ui/app/styles/components/form-section.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,6 @@
1919
background-color: black;
2020

2121
pre {
22-
color: var(--token-color-palette-neutral-50);
22+
color: var(--token-color-surface-faint);
2323
}
2424
}

‎ui/app/styles/components/icon.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
}
2020

2121
.icon-blue {
22-
color: var(--token-color-palette-blue-200);
22+
color: var(--token-color-foreground-action);
2323
}
2424

2525
.hds-icon {

‎ui/app/styles/components/info-table-row.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@
5858
}
5959

6060
.icon-true {
61-
color: var(--token-color-palette-green-200);
61+
color: var(--token-color-foreground-success);
6262
}
6363

6464
.icon-false {

‎ui/app/styles/components/masked-input.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ pre.masked-font {
8080
&:focus,
8181
&:hover,
8282
&:focus:not(:active) {
83-
color: var(--token-color-palette-blue-200);
83+
color: var(--token-color-foreground-action);
8484
border: 0;
8585
box-shadow: none;
8686
}

‎ui/app/styles/components/popup-menu.scss‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757
// so they match other dropdown elements until we replace popup-menu with Hds::Dropdown
5858
.hds-confirm-action-critical {
5959
&:hover {
60-
background-color: var(--token-color-palette-neutral-50);
60+
background-color: var(--token-color-surface-faint);
6161
}
6262
div,
6363
span {
@@ -72,21 +72,21 @@
7272
.ember-power-select-option[aria-current='true'],
7373
a {
7474
background-color: hsl(0, 0%, 100%);
75-
color: var(--token-color-palette-neutral-600);
75+
color: var(--token-color-foreground-primary);
7676

7777
&:hover {
78-
background-color: var(--token-color-palette-neutral-50);
79-
color: var(--token-color-palette-neutral-600);
78+
background-color: var(--token-color-surface-faint);
79+
color: var(--token-color-foreground-primary);
8080
}
8181

8282
&.active,
8383
&.is-active {
8484
background-color: transparent;
85-
color: var(--token-color-palette-blue-200);
85+
color: var(--token-color-foreground-action);
8686
}
8787

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

9191
&:hover {
9292
background-color: var(--token-color-palette-red-200);
@@ -109,7 +109,7 @@
109109
}
110110

111111
.menu-label {
112-
color: var(--token-color-palette-neutral-500);
112+
color: var(--token-color-foreground-faint);
113113
font-size: size_variables.$size-9;
114114
font-weight: font_variables.$font-weight-normal;
115115
letter-spacing: 0;

‎ui/app/styles/components/radio-card.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -96,14 +96,14 @@
9696
.radio-card-radio-row {
9797
display: flex;
9898
justify-content: center;
99-
background: var(--token-color-palette-neutral-50);
99+
background: var(--token-color-surface-faint);
100100
padding: size_variables.$spacing-8;
101101
}
102102

103103
.is-selected {
104104
&.radio-card {
105105
border-color: var(--token-color-palette-blue-200);
106-
background: var(--token-color-palette-neutral-50);
106+
background: var(--token-color-surface-faint);
107107
box-shadow: box-shadow_variables.$box-shadow-middle;
108108
}
109109
.radio-card-icon {

0 commit comments

Comments
 (0)