Skip to content

Commit d0132d5

Browse files
lalithkarikellilalithkarikelli
committed
refactor(hx-radio): refactor to use design tokens
1 parent 47b5a2b commit d0132d5

File tree

3 files changed

+62
-76
lines changed

3 files changed

+62
-76
lines changed

‎src/scss/components/radio/_index.scss‎

Lines changed: 26 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22

33
// BASE STYLES
44
hx-radio {
5-
border-radius: 1rem;
5+
border-radius: $rax-spacing-400;
66
display: inline-block;
7-
height: 1rem;
7+
height: $rax-spacing-400;
88
vertical-align: baseline;
9-
width: 1rem;
9+
width: $rax-spacing-400;
1010
}
1111

1212
hx-radio-set {
@@ -46,10 +46,10 @@ hx-radio-control {
4646
// facade + text
4747
> label {
4848
// Radio v2.0 specs
49-
font-size: 1rem;
50-
color: $gray-950;
51-
color: var(--hxRadio-radioControl-layout-label-color, $gray-950);
52-
font-weight: 400; // normal
49+
font-size: $rax-component-radio-label-default-font-size;
50+
color: $rax-component-radio-label-default-color; // in tokens it is $gray-900
51+
color: var(--hxRadio-radioControl-layout-label-color, $rax-component-radio-label-default-color);
52+
font-weight: $rax-component-radio-label-default-font-weight; // normal
5353

5454
// grid child
5555
-ms-grid-column: 2;
@@ -85,11 +85,11 @@ hx-radio-control {
8585
> input[type="radio"] {
8686
-ms-grid-column: 1;
8787
-ms-grid-row: 1;
88-
border-radius: 1rem;
88+
border-radius: $rax-spacing-400;
8989
grid-area: ctrl;
90-
height: 1rem;
90+
height: $rax-spacing-400;
9191
margin: 0.25rem 0.5rem 0 0;
92-
width: 1rem;
92+
width: $rax-spacing-400;
9393

9494
&::-ms-check {
9595
box-sizing: border-box;
@@ -100,11 +100,11 @@ hx-radio-control {
100100
// PRISTINE/VALID STATE
101101
hx-radio-control {
102102
> label > hx-radio {
103-
background-color: $gray-0;
104-
background-color: var(--hxRadio-pristine-radio-bgcolor, $gray-0);
105-
border: 1px solid currentColor;
106-
color: $gray-500;
107-
color: var(--hxRadio-pristine-radio-color, $gray-500);
103+
background-color: $rax-component-radio-default-background-color;
104+
background-color: var(--hxRadio-pristine-radio-bgcolor, $rax-component-radio-default-background-color);
105+
border: $rax-component-radio-base-border-width solid currentColor;
106+
color: $rax-component-radio-default-border-color; // in tokens it is border-color
107+
color: var(--hxRadio-pristine-radio-color, $rax-component-radio-default-border-color);
108108
}
109109

110110
> p {
@@ -127,25 +127,25 @@ hx-radio-control {
127127
}
128128

129129
&:checked {
130-
color: $blue-700;
131-
color: var(--hxRadio-pristine-radio-checked-color, $blue-700);
130+
color: $rax-component-radio-checked-border-color; // in tokens it is border-color
131+
color: var(--hxRadio-pristine-radio-checked-color, $rax-component-radio-checked-border-color);
132132

133133
~ label > hx-radio {
134-
border: 1px solid currentColor;
135-
color: $blue-700;
136-
color: var(--hxRadio-pristine-radio-checked-label-color, $blue-700);
134+
border: $rax-component-radio-base-border-width solid currentColor;
135+
color: $rax-component-radio-checked-border-color; // no specific token for checked label color
136+
color: var(--hxRadio-pristine-radio-checked-label-color, $rax-component-radio-checked-border-color);
137137
position: relative;
138138

139139
&::after {
140140
background-color: currentColor;
141-
border-radius: 1rem;
141+
border-radius: $rax-spacing-400;
142142
content: "";
143-
height: 0.5rem;
143+
height: $rax-spacing-200;
144144
left: 50%;
145145
position: absolute;
146146
top: 50%;
147147
transform: translate(-50%, -50%);
148-
width: 0.5rem;
148+
width: $rax-spacing-200;
149149
}
150150
}
151151
}
@@ -197,16 +197,11 @@ hx-radio-control > input[type="radio"]:disabled {
197197

198198
// facade styles
199199
~ label {
200-
color: $gray-600;
201-
color: var(--hxRadio-disable-radio-label-color, $gray-600);
200+
color: $rax-component-radio-label-disabled-color;
201+
color: var(--hxRadio-disable-radio-label-color, $rax-component-radio-label-disabled-color);
202202

203203
> hx-radio {
204204
@include hxRadioFacade(disabled);
205-
206-
&,
207-
&:hover {
208-
@include hxRadioFacade(disabled, hover);
209-
}
210205
}
211206
}
212207
}
@@ -228,7 +223,7 @@ hx-radio-control > input[type="radio"]:disabled {
228223
}
229224

230225
> p {
231-
margin-left: 1.5rem;
226+
margin-left: $rax-spacing-600;
232227
}
233228
}
234229
}

‎src/scss/components/radio/mixins/_hxRadioControl.scss‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,23 @@
55
@if $pseudo-state == focus {
66
box-shadow: $focus-glow;
77
} @else if $pseudo-state == hover {
8-
color: $blue-700;
9-
color: var(--hxRadio-pristine-radio-hover-color, $blue-700);
8+
color: $rax-component-radio-hover-border-color;
9+
color: var(--hxRadio-pristine-radio-hover-color, $rax-component-radio-hover-border-color);
1010

1111
&::-ms-check {
12-
background-color: $gray-0;
13-
background-color: var(--hxRadio-pristine-radio-hover-ie-bgcolor, $gray-0);
14-
color: $blue-700;
15-
color: var(--hxRadio-pristine-radio-hover-ie-color, $blue-700);
12+
background-color: $rax-component-radio-hover-background-color;
13+
background-color: var(--hxRadio-pristine-radio-hover-ie-bgcolor, $rax-component-radio-hover-background-color);
14+
color: $rax-component-radio-hover-border-color;
15+
color: var(--hxRadio-pristine-radio-hover-ie-color, $rax-component-radio-hover-border-color);
1616
}
1717
} @else {
18-
color: $gray-500;
19-
color: var(--hxRadio-pristine-radio-color, $gray-500);
18+
color: $rax-component-radio-default-border-color;
19+
color: var(--hxRadio-pristine-radio-color, $rax-component-radio-default-border-color);
2020

2121
&::-ms-check {
22-
background-color: $gray-0;
23-
background-color: var(--hxRadio-pristine-radio-ie-bgcolor, $gray-0);
24-
border: 1px solid currentColor;
22+
background-color: $rax-component-radio-default-background-color;
23+
background-color: var(--hxRadio-pristine-radio-ie-bgcolor, $rax-component-radio-default-background-color);
24+
border: $rax-component-radio-base-border-width solid currentColor;
2525
color: inherit;
2626
}
2727
}
@@ -36,15 +36,15 @@
3636
background-color: $red-status-100;
3737
background-color: var(--hxRadio-invalid-radio-hover-ie-bgcolor, $red-status-100);
3838
border: 1px solid currentColor;
39-
color: $red-status-500;
40-
color: var(--hxRadio-invalid-radio-hover-ie-color, $red-status-500);
39+
color: $rax-color-status-critical-500;
40+
color: var(--hxRadio-invalid-radio-hover-ie-color, $rax-color-status-critical-500);
4141
}
4242
} @else {
43-
color: $red-status-500;
44-
color: var(--hxRadio-invalid-radio-color, $red-status-500);
43+
color: $rax-component-radio-invalid-border-color;
44+
color: var(--hxRadio-invalid-radio-color, $rax-component-radio-invalid-border-color);
4545

4646
&::-ms-check {
47-
border-width: 1px;
47+
border-width: $rax-component-radio-base-border-width;
4848
}
4949
}
5050
}
@@ -55,23 +55,23 @@
5555
box-shadow: $focus-glow-disabled;
5656
} @else if $pseudo-state == hover {
5757
&::-ms-check {
58-
background-color: $gray-100;
59-
background-color: var(--hxRadio-disabled-radio-hover-ie-bgcolor, $gray-100);
58+
background-color: $rax-color-gray-100;
59+
background-color: var(--hxRadio-disabled-radio-hover-ie-bgcolor, $rax-color-gray-100); // no token for hover state
6060
border: 1px solid currentColor;
6161
color: $gray-500;
6262
color: var(--hxRadio-disabled-radio-hover-ie-color, $gray-500);
6363
}
6464
} @else {
65-
color: $gray-500;
66-
color: var(--hxRadio-disabled-radio-color, $gray-500);
65+
color: $rax-component-radio-disabled-border-color;
66+
color: var(--hxRadio-disabled-radio-color, $rax-component-radio-disabled-border-color);
6767
cursor: not-allowed;
6868

6969
&::-ms-check {
70-
background-color: $gray-100;
71-
background-color: var(--hxRadio-disabled-radio-ie-bgcolor, $gray-100);
72-
border: 1px solid currentColor;
73-
color: $gray-500;
74-
color: var(--hxRadio-disabled-radio-ie-color, $gray-500);
70+
background-color: $rax-color-gray-100;
71+
background-color: var(--hxRadio-disabled-radio-ie-bgcolor, $rax-color-gray-100); //in tokens bg color is $gray-500
72+
border: $rax-component-radio-base-border-width solid currentColor;
73+
color: $rax-component-radio-disabled-border-color;
74+
color: var(--hxRadio-disabled-radio-ie-color, $rax-component-radio-disabled-border-color);
7575
}
7676
}
7777
}

‎src/scss/components/radio/mixins/_hxRadioFacade.scss‎

Lines changed: 11 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@
66
box-shadow: $focus-glow;
77
}
88
@else {
9-
background-color: $gray-0;
10-
background-color: var(--hxRadio-pristine-radio-facade-bgcolor, $gray-0);
11-
border: 1px solid currentColor;
12-
color: $blue-700;
13-
color: var(--hxRadio-pristine-radio-facade-color, $blue-700);
9+
background-color: $rax-component-radio-default-background-color;
10+
background-color: var(--hxRadio-pristine-radio-facade-bgcolor, $rax-component-radio-default-background-color);
11+
border: $rax-component-radio-base-border-width solid currentColor;
12+
color: $rax-color-primary-700;
13+
color: var(--hxRadio-pristine-radio-facade-color, $rax-color-primary-700); // didnt find proper token
1414
}
1515
}
1616

@@ -27,27 +27,18 @@
2727
color: var(--hxRadio-invalid-radio-facade-hover-color, $red-status-500);
2828
}
2929
@else {
30-
border: 1px solid currentColor;
30+
border: $rax-component-radio-base-border-width solid $red-status-500;
3131
color: $red-status-500;
32-
color: var(--hxRadio-invalid-radio-facade-color, $red-status-500);
32+
color: $rax-component-radio-invalid-border-color;
3333
}
3434
}
3535

3636
// ========== DISABLED ==========
3737
@mixin __radioFacade--disabled($pseudo-state: null) {
38-
@if $pseudo-state == hover {
39-
background-color: $gray-0;
40-
background-color: var(--hxRadio-disabled-radio-facade-hover-bgcolor, $gray-0);
41-
border: 1px solid currentColor;
42-
color: $gray-500;
43-
color: var(--hxRadio-disabled-radio-facade-hover-color, $gray-500);
44-
}
45-
@else {
46-
border: 1px solid currentColor;
47-
color: $gray-500;
48-
color: var(--hxRadio-disabled-radio-facade-color, $gray-500);
49-
cursor: not-allowed;
50-
}
38+
border: $rax-component-radio-base-border-width solid currentColor;
39+
color: $gray-500;
40+
color: $rax-component-radio-disabled-border-color;
41+
cursor: not-allowed;
5142
}
5243

5344
@mixin hxRadioFacade($state: null, $pseudo-state: null) {

0 commit comments

Comments
 (0)