Skip to content

Commit 58e3035

Browse files
tw15eganjnm2377kodiakhq[bot]
authored
feat(tokens): new token update pt. 1 (#8269)
* feat: add new tokens to tokens.js * style(ContentSwitcher): update to new tokens * style(ContextMenu): update to new tokens * style(CopyButton): update to new tokens * style(DataTable): update data-table-action to new tokens * style(DataTable): update data-table-core to new tokens * style(DataTable): update data-table-expandable to new tokens * style(DataTable): update data-table-sort to new tokens * style(DatePicker): update date-picker to use new tokens * style(Dropdown): update dropdown to use new tokens * style(Dropdown): dropdown items should use layer not field * style(ContextMenu): update danger tokens * feat(DataTable): update DataTable tokens * style(DataTable): use new LayerAccent token Co-authored-by: Josefina Mancilla <josefinanoemi4@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
1 parent efc6bf6 commit 58e3035

File tree

14 files changed

+219
-244
lines changed

14 files changed

+219
-244
lines changed

‎packages/components/src/components/content-switcher/_content-switcher.scss‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -42,20 +42,20 @@
4242
margin: 0;
4343
padding: $carbon--spacing-03 $carbon--spacing-05;
4444
overflow: hidden;
45-
color: $text-02;
45+
color: $text-secondary;
4646
white-space: nowrap;
4747
text-align: left;
4848
text-decoration: none;
4949
background-color: transparent;
5050
border: none;
51-
border-top: rem(1px) solid $ui-05;
52-
border-bottom: rem(1px) solid $ui-05;
51+
border-top: rem(1px) solid $border-inverse;
52+
border-bottom: rem(1px) solid $border-inverse;
5353
transition: all $duration--fast-01 motion(standard, productive);
5454

5555
&:focus {
5656
z-index: 3;
5757
border-color: $focus;
58-
box-shadow: inset 0 0 0 2px $focus, inset 0 0 0 3px $ui-01;
58+
box-shadow: inset 0 0 0 2px $focus, inset 0 0 0 3px $focus-inset;
5959

6060
// Firefox HCM Fix
6161
@media screen and (prefers-contrast) {
@@ -64,21 +64,21 @@
6464
}
6565

6666
&:hover {
67-
color: $text-01;
67+
color: $text-primary;
6868
cursor: pointer;
6969
}
7070

7171
&:hover,
7272
&:active {
7373
z-index: 3;
74-
color: $text-01;
75-
background-color: $hover-ui;
74+
color: $text-primary;
75+
background-color: $layer-hover;
7676
}
7777

7878
&:disabled {
79-
color: $disabled-02;
79+
color: $text-disabled;
8080
background-color: transparent;
81-
border-color: $disabled-02;
81+
border-color: $border-disabled;
8282

8383
&:hover {
8484
cursor: not-allowed;
@@ -87,18 +87,18 @@
8787

8888
&:disabled:first-child,
8989
&:disabled:last-child {
90-
border-color: $disabled-02;
90+
border-color: $border-disabled;
9191
}
9292
}
9393

9494
.#{$prefix}--content-switcher-btn:first-child {
95-
border-left: rem(1px) solid $ui-05;
95+
border-left: rem(1px) solid $border-inverse;
9696
border-top-left-radius: rem(4px);
9797
border-bottom-left-radius: rem(4px);
9898
}
9999

100100
.#{$prefix}--content-switcher-btn:last-child {
101-
border-right: rem(1px) solid $ui-05;
101+
border-right: rem(1px) solid $border-inverse;
102102
border-top-right-radius: rem(4px);
103103
border-bottom-right-radius: rem(4px);
104104
}
@@ -116,7 +116,7 @@
116116
display: block;
117117
width: rem(1px);
118118
height: rem(16px);
119-
background-color: $content-switcher-divider;
119+
background-color: $border-subtle;
120120
content: '';
121121
}
122122

@@ -139,7 +139,7 @@
139139
.#{$prefix}--content-switcher-btn:disabled::before,
140140
.#{$prefix}--content-switcher-btn:disabled:hover
141141
+ .#{$prefix}--content-switcher-btn:disabled::before {
142-
background-color: $disabled-02;
142+
background-color: $border-disabled;
143143
}
144144

145145
.#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected:disabled
@@ -151,7 +151,7 @@
151151

152152
.#{$prefix}--content-switcher__icon {
153153
transition: fill $duration--fast-01 motion(standard, productive);
154-
fill: $text-02;
154+
fill: $icon-secondary;
155155
}
156156

157157
.#{$prefix}--content-switcher__icon + span {
@@ -167,23 +167,23 @@
167167

168168
.#{$prefix}--content-switcher-btn:hover .#{$prefix}--content-switcher__icon,
169169
.#{$prefix}--content-switcher-btn:focus .#{$prefix}--content-switcher__icon {
170-
fill: $text-01;
170+
fill: $icon-primary;
171171
}
172172

173173
.#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected {
174174
z-index: 3;
175-
color: $inverse-01;
176-
background-color: $ui-05;
175+
color: $text-inverse;
176+
background-color: $layer-selected-inverse;
177177

178178
&:disabled {
179-
color: $disabled-02;
180-
background-color: $disabled-03;
179+
color: $text-disabled;
180+
background-color: $layer-selected-disabled;
181181
}
182182
}
183183

184184
.#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected
185185
.#{$prefix}--content-switcher__icon {
186-
fill: $inverse-01;
186+
fill: $icon-inverse;
187187
}
188188
}
189189

‎packages/components/src/components/context-menu/_context-menu.scss‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
min-width: 13rem;
2222
max-width: 18rem;
2323
padding: $spacing-02 0;
24-
background-color: $ui-01;
24+
background-color: $layer;
2525
visibility: hidden;
2626
}
2727

@@ -40,8 +40,8 @@
4040
.#{$prefix}--context-menu-option {
4141
position: relative;
4242
height: $spacing-07;
43-
color: $text-01;
44-
background-color: $ui-01;
43+
color: $text-primary;
44+
background-color: $layer;
4545
cursor: pointer;
4646
transition: background-color $duration--fast-01 motion(standard, productive);
4747

@@ -52,13 +52,13 @@
5252

5353
.#{$prefix}--context-menu-option--active,
5454
.#{$prefix}--context-menu-option:hover {
55-
background-color: $hover-ui;
55+
background-color: $layer-hover;
5656
}
5757

5858
.#{$prefix}--context-menu-option--danger:hover,
5959
.#{$prefix}--context-menu-option--danger:focus {
60-
color: $text-04;
61-
background-color: $danger-01;
60+
color: $text-on-color;
61+
background-color: $button-danger-primary;
6262
}
6363

6464
.#{$prefix}--context-menu-option > .#{$prefix}--context-menu {
@@ -74,8 +74,8 @@
7474
}
7575

7676
.#{$prefix}--context-menu-option__content--disabled {
77-
color: $disabled-02;
78-
background-color: $ui-01;
77+
color: $text-disabled;
78+
background-color: $layer;
7979
cursor: not-allowed;
8080
}
8181

@@ -113,7 +113,7 @@
113113
width: 100%;
114114
height: 1px;
115115
margin: $spacing-02 0;
116-
background-color: $ui-03;
116+
background-color: $border-subtle;
117117
}
118118
}
119119

‎packages/components/src/components/copy-button/_copy-button.scss‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -30,18 +30,14 @@
3030
left: 50%;
3131
display: none;
3232

33-
&:focus {
34-
border: 2px solid $support-01;
35-
}
36-
3733
&::before {
3834
@include box-shadow;
3935
@include type-style('body-short-01');
4036

4137
top: 1.1rem;
4238
z-index: 2;
4339
padding: $spacing-02;
44-
color: $inverse-01;
40+
color: $text-inverse;
4541
font-weight: 400;
4642
white-space: nowrap;
4743
border-radius: 4px;
@@ -56,8 +52,8 @@
5652
z-index: 1;
5753
width: 0.6rem;
5854
height: 0.6rem;
59-
border-right: 1px solid $inverse-02;
60-
border-bottom: 1px solid $inverse-02;
55+
border-right: 1px solid $background-inverse;
56+
border-bottom: 1px solid $background-inverse;
6157
transform: rotate(-135deg);
6258
content: '';
6359
}
@@ -66,7 +62,7 @@
6662
&::after {
6763
position: absolute;
6864
display: block;
69-
background: $inverse-02;
65+
background: $background-inverse;
7066
}
7167

7268
&--displayed {
@@ -86,16 +82,16 @@
8682
width: $carbon--spacing-08;
8783
height: $carbon--spacing-08;
8884
padding: 0;
89-
background-color: $ui-01;
85+
background-color: $layer;
9086
border: none;
9187
cursor: pointer;
9288

9389
&:hover {
94-
background-color: $hover-ui;
90+
background-color: $layer-hover;
9591
}
9692

9793
&:active {
98-
background-color: $active-ui;
94+
background-color: $layer-active;
9995
}
10096

10197
&::before {

0 commit comments

Comments
 (0)