Skip to content

Commit c68b7b3

Browse files
100stacks100stacks
authored
Merge pull request #866 from badejayayesubabu/SURF-2201
refactor(checkbox): implement design tokens spec
2 parents b6b0f42 + b553bae commit c68b7b3

File tree

3 files changed

+102
-86
lines changed

3 files changed

+102
-86
lines changed

‎src/scss/components/checkbox/_index.scss‎

Lines changed: 35 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
// ========== BASE ELEMENTS ==========
44
hx-checkbox {
55
display: inline-block;
6-
height: 1rem;
7-
width: 1rem;
6+
height: $rax-spacing-400; //design token values are incorrect
7+
width: $rax-spacing-400; //design token values are incorrect
88
}
99

1010
// ========== LAYOUT ==========
@@ -27,9 +27,10 @@ hx-checkbox-control {
2727

2828
> label {
2929
// Checkbox v2.0 specs
30-
font-size: 1rem;
31-
color: $gray-950;
32-
font-weight: 400; // normal
30+
font-size: $rax-component-checkbox-label-default-font-size;
31+
color: $rax-component-label-default-color;
32+
color: var(--hxCheckbox-label-color, $rax-component-label-default-color);
33+
font-weight: $rax-component-checkbox-label-default-font-weight; // normal
3334

3435
// grid child
3536
-ms-grid-column: 2;
@@ -80,12 +81,12 @@ hx-checkbox-control {
8081

8182
// ========== PRISTINE ==========
8283
hx-checkbox {
83-
background-color: $gray-0;
84-
background-color: var(--hxCheckbox-bgcolor, $gray-0);
85-
border-color: $gray-500;
86-
border-color: var(--hxCheckbox-border, $gray-500);
87-
border-style: solid;
88-
border-width: 1px;
84+
background-color: $rax-component-checkbox-default-background-color;
85+
background-color: var(--hxCheckbox-bgcolor, $rax-component-checkbox-default-background-color);
86+
border-color: $rax-component-checkbox-default-border-color;
87+
border-color: var(--hxCheckbox-border-color, $rax-component-checkbox-default-border-color);
88+
border-style: solid; //there is no token for solid
89+
border-width: $rax-component-checkbox-base-border-width;
8990
}
9091

9192
hx-checkbox-control {
@@ -128,16 +129,16 @@ hx-checkbox-control {
128129

129130
&:checked,
130131
&:indeterminate {
131-
color: $blue-700;
132-
color: var(--hxCheckbox-indeterminate-color, $blue-700);
132+
color: $rax-component-checkbox-checked-background-color; //in token bg color is used
133+
color: var(--hxCheckbox-indeterminate-color, $rax-component-checkbox-checked-background-color);
133134

134135
~ label > hx-checkbox {
135-
background-color: $blue-700;
136-
background-color: var(--hxCheckbox-indeterminate-label-bgcolor, $blue-700);
137-
border-color: $blue-700;
138-
border-color: var(--hxCheckbox-indeterminate-label-bordercolor, $blue-700);
139-
color: $gray-0;
140-
color: var(--hxCheckbox-indeterminate-label-color, $gray-0);
136+
background-color: $rax-component-checkbox-checked-background-color;
137+
background-color: var(--hxCheckbox-indeter-label-bgcolor, $rax-component-checkbox-checked-background-color);
138+
border-color: $rax-component-checkbox-checked-border-color;
139+
border-color: var(--hxCheckbox-indeterminate-label-bordercolor, $rax-component-checkbox-checked-border-color);
140+
color: $rax-color-gray-0; //there is no token for color
141+
color: var(--hxCheckbox-indeterminate-label-color, $rax-color-gray-0);
141142
}
142143
}
143144

@@ -177,14 +178,14 @@ hx-checkbox-control.hxInvalid > input[type="checkbox"]:enabled {
177178
// v2.0 specs
178179
&:checked,
179180
&:indeterminate {
180-
color: $red-status-500;
181-
color: var(--hxCheckbox-invalid-checked-color, $red-status-500);
181+
color: $rax-color-status-critical-500;
182+
color: var(--hxCheckbox-invalid-checked-color, $rax-color-status-critical-500);
182183

183184
~ label > hx-checkbox {
184-
background-color: $red-status-100;
185-
background-color: var(--hxCheckbox-invalid-checked-bgcolor, $red-status-100);
186-
border-color: $red-status-500;
187-
border-color: var(--hxCheckbox-invalid-checked-label-bordercolor, $red-status-500);
185+
background-color: $rax-color-status-critical-100;
186+
background-color: var(--hxCheckbox-invalid-checked-bgcolor, $rax-color-status-critical-100);
187+
border-color: $rax-component-checkbox-invalid-border-color;
188+
border-color: var(--hxCheckbox-invalid-checked-label-bordercolor, $rax-component-checkbox-invalid-border-color);
188189
}
189190
}
190191
}
@@ -206,8 +207,8 @@ hx-checkbox-control > input[type="checkbox"]:disabled {
206207
}
207208

208209
~ label {
209-
color: $gray-600;
210-
color: var(--hxCheckbox-disabled-label-color, $gray-600);
210+
color: $rax-component-checkbox-label-disabled-color;
211+
color: var(--hxCheckbox-disabled-label-color, $rax-component-checkbox-label-disabled-color);
211212

212213
> hx-checkbox {
213214
@include hxCheckboxFacade(disabled);
@@ -224,12 +225,12 @@ hx-checkbox-control > input[type="checkbox"]:disabled {
224225
hx-checkbox-control > input[type="checkbox"]:indeterminate:disabled,
225226
hx-checkbox-control > input[type="checkbox"]:checked:disabled {
226227
~ label > hx-checkbox {
227-
background-color: $gray-500;
228-
background-color: var(--hxCheckbox-disabled-checked-label-bgcolor, $gray-500);
229-
border-color: $gray-500;
230-
border-color: var(--hxCheckbox-disabled-checked-label-bordercolor, $gray-500);
231-
color: $gray-0;
232-
color: var(--hxCheckbox-disabled-checked-label-color, $gray-0);
228+
background-color: $rax-component-checkbox-disabled-background-color;
229+
background-color: var(--hxCheckbox-disabled-label-bgcolor, $rax-component-checkbox-disabled-background-color);
230+
border-color: $rax-component-checkbox-disabled-border-color;
231+
border-color: var(--hxCheckbox-disabled-checked-label-bordercolor, $rax-component-checkbox-disabled-border-color);
232+
color: $rax-color-gray-0; //there is no token for color
233+
color: var(--hxCheckbox-disabled-checked-label-color, $rax-color-gray-0);
233234
}
234235
}
235236

@@ -243,7 +244,7 @@ hx-checkbox-control > input[type="checkbox"]:checked:disabled {
243244
}
244245

245246
> p {
246-
margin-left: 1.5rem;
247+
margin-left: $rax-spacing-600;
247248
}
248249

249250
> input[type="checkbox"] {

‎src/scss/components/checkbox/mixins/_hxCheckboxControl.scss‎

Lines changed: 42 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -8,30 +8,33 @@
88
box-shadow: $focus-glow;
99

1010
&::-ms-check {
11-
border-color: $blue-700;
12-
border-color: var(--hxCheckbox-focus-bordercolor, $blue-700);
11+
border-color: $rax-component-checkbox-focus-border-color;
12+
border-color: var(--hxCheckbox-focus-bordercolor, $rax-component-checkbox-focus-border-color);
1313
}
1414
}
1515
@else if $pseudo-state == hover {
16-
color: $blue-700;
17-
color: var(--hxCheckbox-hover-color, $blue-700);
16+
color: $rax-color-primary-700;
17+
color: var(--hxCheckbox-hover-color, $rax-color-primary-700);
1818

1919
&::-ms-check {
20-
background-color: $gray-0;
21-
border-color: $blue-700;
22-
color: $blue-700;
20+
background-color: $rax-component-checkbox-hover-background-color;
21+
background-color: var(--hxCheckbox-pristine-hover-ie-bgcolor, $rax-component-checkbox-hover-background-color);
22+
border-color: $rax-component-checkbox-hover-border-color;
23+
border-color: var(--hxCheckbox-pristine-hover-ie-border-color, $rax-component-checkbox-hover-border-color);
24+
color: $rax-component-checkbox-hover-border-color; //in token border color is used
25+
color: var(--hxCheckbox-pristine-checkbox-hover-ie-color, $rax-component-checkbox-hover-border-color);
2326
}
2427
}
2528
@else {
26-
color: $gray-500;
27-
color: var(--hxCheckbox-color, $gray-500);
29+
color: $rax-component-checkbox-default-border-color; //in token border color is used
30+
color: var(--hxCheckbox-color, $rax-component-checkbox-default-border-color);
2831

2932
&::-ms-check {
30-
background-color: $gray-0;
31-
background-color: var(--hxCheckbox-bgcolor, $gray-0);
33+
background-color: $rax-component-checkbox-default-background-color;
34+
background-color: var(--hxCheckbox-bgcolor, $rax-component-checkbox-default-background-color);
3235
border-color: currentColor;
33-
border-style: solid;
34-
border-width: 1px;
36+
border-style: solid; //there is no token for solid
37+
border-width: $rax-component-checkbox-base-border-width;
3538
color: inherit;
3639
}
3740
}
@@ -43,8 +46,8 @@
4346
box-shadow: $focus-glow-invalid;
4447

4548
&::-ms-check {
46-
border-color: $red-status-500;
47-
border-color: var(--hxCheckbox-invalid-bordercolor, $red-status-500);
49+
border-color: $rax-component-checkbox-invalid-border-color;
50+
border-color: var(--hxCheckbox-invalid-bordercolor, $rax-component-checkbox-invalid-border-color);
4851
}
4952
}
5053
@else if $pseudo-state == hover {
@@ -53,14 +56,17 @@
5356
}
5457
}
5558
@else {
56-
color: $red-status-500;
57-
color: var(--hxCheckbox-invalid-color, $red-status-500);
58-
background-color: $red-status-100;
59+
color: $rax-component-checkbox-invalid-border-color; //in token border color is used
60+
color: var(--hxCheckbox-invalid-color, $rax-component-checkbox-invalid-border-color);
61+
background-color: $rax-color-status-critical-100;
62+
background-color: var(--hxCheckbox-invalid-bgcolor, $rax-color-status-critical-100);
5963

6064
&::-ms-check {
61-
border-width: 1px;
62-
border-color: $red-status-500 !important;
63-
color: $red-status-500 !important;
65+
border-width: $rax-component-checkbox-base-border-width;
66+
border-color: $rax-component-checkbox-invalid-border-color !important;
67+
border-color: var(--hxCheckbox-invalid-ie-border-color, $rax-component-checkbox-invalid-border-color) !important;
68+
color: $rax-component-checkbox-invalid-border-color !important;
69+
color: var(--hxCheckbox-invalid-ie-color, $rax-component-checkbox-invalid-border-color) !important;
6470
}
6571
}
6672
}
@@ -69,26 +75,32 @@
6975
@mixin __checkboxControl--disabled($pseudo-state: null) {
7076
@if $pseudo-state == focus {
7177
&::-ms-check {
72-
border-color: $gray-500;
73-
border-color: var(--hxCheckbox-disabled-bordercolor, $gray-500);
78+
border-color: $rax-component-checkbox-disabled-border-color;
79+
border-color: var(--hxCheckbox-disabled-bordercolor, $rax-component-checkbox-disabled-border-color);
7480
box-shadow: $focus-glow-disabled;
7581
}
7682
}
7783
@else if $pseudo-state == hover {
7884
&::-ms-check {
79-
background-color: $gray-0;
80-
border-color: $gray-500;
81-
color: $gray-500;
85+
background-color: $rax-color-gray-0; //there is no token for bg color
86+
background-color: var(--hxCheckbox-disabled-hover-bgcolor, $rax-color-gray-0);
87+
border-color: $rax-component-checkbox-disabled-border-color;
88+
border-color: var(--hxCheckbox-disabled-hover-border-color, $rax-component-checkbox-disabled-border-color);
89+
color: $rax-component-checkbox-disabled-background-color; //in token bg color is used
90+
color: var(--hxCheckbox-disabled-hover-color, $rax-component-checkbox-disabled-background-color);
8291
}
8392
}
8493
@else {
8594
cursor: not-allowed;
8695

8796
&::-ms-check {
88-
background-color: $gray-0 !important; // simplest way of styling
89-
border-color: $gray-500;
90-
border-width: 1px;
91-
color: $gray-500;
97+
background-color: $rax-color-gray-0 !important; // simplest way of styling
98+
background-color: var(--hxCheckbox-disabled-ie-bgcolor, $rax-color-gray-0); //there is no token for bg color
99+
border-color: $rax-component-checkbox-disabled-border-color;
100+
border-color: var(--hxCheckbox-disabled-ie-border-color, $rax-component-checkbox-disabled-border-color);
101+
border-width: $rax-component-checkbox-base-border-width;
102+
color: $rax-component-checkbox-disabled-background-color; //in token bg color is used
103+
color: var(--hxCheckbox-disabled-ie-color, $rax-component-checkbox-disabled-background-color);
92104
}
93105
}
94106
}

‎src/scss/components/checkbox/mixins/_hxCheckboxFacade.scss‎

Lines changed: 25 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -5,52 +5,55 @@
55
// ========== PRISTINE ==========
66
@mixin __checkboxFacade($pseudo-state: null) {
77
@if $pseudo-state == focus {
8-
border-color: $blue-900;
9-
border-color: var(--hxCheckbox-bordercolor-focus, $blue-900);
8+
border-color: $rax-color-primary-900;
9+
border-color: var(--hxCheckbox-bordercolor-focus, $rax-color-primary-900);
1010
box-shadow: $focus-glow;
1111
}
1212
@else if $pseudo-state == hover {
13-
background-color: var(--hxCheckbox-hover-bgcolor, $gray-0);
14-
border-color: var(--hxCheckbox-hover-bordercolor, $blue-700);
15-
color: var(--hxCheckbox-hover-color, $blue-700);
13+
background-color: $rax-component-checkbox-hover-background-color;
14+
background-color: var(--hxCheckbox-hover-bgcolor, $rax-component-checkbox-hover-background-color);
15+
border-color: $rax-component-checkbox-hover-border-color;
16+
border-color: var(--hxCheckbox-hover-bordercolor, $rax-component-checkbox-hover-border-color);
17+
color: $rax-component-checkbox-hover-border-color; //in token bg color is used
18+
color: var(--hxCheckbox-hover-color, $rax-component-checkbox-hover-border-color);
1619
}
1720
}
1821

1922
// ========== INVALID ==========
2023
@mixin __checkboxFacade--invalid($pseudo-state: null) {
2124
@if $pseudo-state == focus {
22-
border-color: $red-status-500;
23-
border-color: var(--hxCheckbox-invalid-bordercolor, $red-status-500);
25+
border-color: $rax-component-checkbox-invalid-border-color;
26+
border-color: var(--hxCheckbox-invalid-bordercolor, $rax-component-checkbox-invalid-border-color);
2427
box-shadow: $focus-glow-invalid;
2528
}
2629
@else if $pseudo-state == hover {
27-
border-color: $red-status-500;
28-
border-color: var(--hxCheckbox-invalid-hover-bordercolor, $red-status-500);
29-
color: $red-status-500;
30-
color: var(--hxCheckbox-invalid-hover-color, $red-status-500);
30+
border-color: $rax-component-checkbox-invalid-border-color;
31+
border-color: var(--hxCheckbox-invalid-hover-bordercolor, $rax-component-checkbox-invalid-border-color);
32+
color: $rax-component-checkbox-invalid-border-color; //in token border color is used
33+
color: var(--hxCheckbox-invalid-hover-color, $rax-component-checkbox-invalid-border-color);
3134
}
3235
@else {
33-
border: 1px solid $red-status-500;
34-
border: 1px solid var(--hxCheckbox-invalid-border, $red-status-500);
35-
color: $red-status-500;
36-
color: var(--hxCheckbox-invalid-color, $red-status-500);
36+
border: 1px solid $rax-component-checkbox-invalid-border-color;
37+
border: 1px solid var(--hxCheckbox-invalid-border, $rax-component-checkbox-invalid-border-color);
38+
color: $rax-component-checkbox-invalid-border-color; //in token border color is used
39+
color: var(--hxCheckbox-invalid-color, $rax-component-checkbox-invalid-border-color);
3740
}
3841
}
3942

4043
// ========== DISABLED ==========
4144
@mixin __checkboxFacade--disabled($pseudo-state: null) {
4245
@if $pseudo-state == focus {
43-
border-color: $gray-500;
44-
border-color: var(--hxCheckbox-disabled-bordercolor, $gray-500);
46+
border-color: $rax-component-checkbox-disabled-border-color;
47+
border-color: var(--hxCheckbox-disabled-bordercolor, $rax-component-checkbox-disabled-border-color);
4548
}
4649
@else if $pseudo-state == hover {
47-
background-color: $gray-0;
48-
background-color: var(--hxCheckbox-disabled-hover-bgcolor, $gray-0);
49-
border-color: $gray-500;
50-
border-color: var(--hxCheckbox-disabled-hover-bordercolor, $gray-500);
50+
background-color: $rax-component-checkbox-hover-background-color;
51+
background-color: var(--hxCheckbox-disabled-hover-bgcolor, $rax-component-checkbox-hover-background-color);
52+
border-color: $rax-component-checkbox-disabled-border-color;
53+
border-color: var(--hxCheckbox-disabled-hover-bordercolor, $rax-component-checkbox-disabled-border-color);
5154
}
5255
@else {
53-
border-width: 1px;
56+
border-width: $rax-component-checkbox-base-border-width;
5457
cursor: not-allowed;
5558
}
5659
}

0 commit comments

Comments
 (0)