Skip to content

Commit f212cce

Browse files
100stacks100stacks
authored
Merge pull request #846 from HelixDesignSystem/surf-2182-checkbox-specs
feat(checkbox): update component specs
2 parents aa96910 + 2538b24 commit f212cce

File tree

5 files changed

+91
-31
lines changed

5 files changed

+91
-31
lines changed

‎docs/components/checkbox/_spec.scss‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,9 @@
2424
@include hxCheckboxControl($pseudo-state: hover);
2525

2626
~ label > hx-checkbox {
27-
@include hxCheckboxFacade($pseudo-state: hover);
27+
@include hxCheckboxFacade($pseudo-state: null);
28+
29+
border-color: $blue-700;
2830
}
2931
}
3032

@@ -43,7 +45,12 @@
4345
@include hxCheckboxControl(disabled, hover);
4446

4547
~ label > hx-checkbox {
46-
@include hxCheckboxFacade(disabled, hover);
48+
@include hxCheckboxFacade(disabled, null);
49+
50+
border-color: $gray-500;
51+
border-color: var(--hxCheckbox-disabled-checked-label-bordercolor, $gray-500);
52+
color: $gray-0;
53+
color: var(--hxCheckbox-disabled-checked-label-color, $gray-0);
4754
}
4855
}
4956
}

‎src/scss/_vars.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@ $font-monospace: "Open Sans Condensed", "Roboto Mono", monospace;
153153
// ==== FOCUS STATE =====
154154
$focus-glow: 0 0 4px rgba($blue-700, 0.5);
155155
$focus-glow-disabled: $focus-glow;
156-
$focus-glow-invalid: 0 0 4px rgba($red-status-900, 0.5);
156+
$focus-glow-invalid: 0 0 4px rgba($red-status-500, 0.5);
157157

158158
$app-nav-width: 15rem;
159159
//$corner-radius: 2px; // Deprecated for Button- v2.0 Specs

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

Lines changed: 40 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -80,9 +80,12 @@ hx-checkbox-control {
8080

8181
// ========== PRISTINE ==========
8282
hx-checkbox {
83+
background-color: $gray-0;
8384
background-color: var(--hxCheckbox-bgcolor, $gray-0);
84-
border-radius: 2px;
85-
border: 1px solid var(--hxCheckbox-border, $gray-500);
85+
border-color: $gray-500;
86+
border-color: var(--hxCheckbox-border, $gray-500);
87+
border-style: solid;
88+
border-width: 1px;
8689
}
8790

8891
hx-checkbox-control {
@@ -125,17 +128,22 @@ hx-checkbox-control {
125128

126129
&:checked,
127130
&:indeterminate {
131+
color: $blue-700;
128132
color: var(--hxCheckbox-indeterminate-color, $blue-700);
129133

130134
~ label > hx-checkbox {
135+
background-color: $blue-700;
136+
background-color: var(--hxCheckbox-indeterminate-label-bgcolor, $blue-700);
137+
border-color: $blue-700;
131138
border-color: var(--hxCheckbox-indeterminate-label-bordercolor, $blue-700);
132-
color: var(--hxCheckbox-indeterminate-label-color, $blue-700);
139+
color: $gray-0;
140+
color: var(--hxCheckbox-indeterminate-label-color, $gray-0);
133141
}
134142
}
135143

136144
&:valid {
137145
~ label > hx-checkbox:hover {
138-
@include hxCheckboxFacade($pseudo-state: hover);
146+
@include hxCheckboxFacade($pseudo-state: null); // v2.0 specs
139147
}
140148
}
141149
}
@@ -165,6 +173,20 @@ hx-checkbox-control.hxInvalid > input[type="checkbox"]:enabled {
165173
@include hxCheckboxFacade(invalid, hover);
166174
}
167175
}
176+
177+
// v2.0 specs
178+
&:checked,
179+
&:indeterminate {
180+
color: $red-status-500;
181+
color: var(--hxCheckbox-invalid-checked-color, $red-status-500);
182+
183+
~ 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);
188+
}
189+
}
168190
}
169191

170192
// ========== DISABLED ==========
@@ -184,6 +206,7 @@ hx-checkbox-control > input[type="checkbox"]:disabled {
184206
}
185207

186208
~ label {
209+
color: $gray-600;
187210
color: var(--hxCheckbox-disabled-label-color, $gray-600);
188211

189212
> hx-checkbox {
@@ -197,6 +220,19 @@ hx-checkbox-control > input[type="checkbox"]:disabled {
197220
}
198221
}
199222

223+
// v2.0 specs
224+
hx-checkbox-control > input[type="checkbox"]:indeterminate:disabled,
225+
hx-checkbox-control > input[type="checkbox"]:checked:disabled {
226+
~ 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);
233+
}
234+
}
235+
200236
// ----- Modern Browsers -----
201237
@supports (--modern: true) {
202238
hx-checkbox-control {

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

Lines changed: 24 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,33 @@
1-
//
2-
// ===== Mixins for <hx-checkbox-control> states =====
3-
//
1+
// =================================================== //
2+
// ===== Mixins for <hx-checkbox-control> states ===== //
3+
// =================================================== //
44

55
// ========== PRISTINE ==========
66
@mixin __checkboxControl($pseudo-state: null) {
77
@if $pseudo-state == focus {
88
box-shadow: $focus-glow;
99

1010
&::-ms-check {
11+
border-color: $blue-700;
1112
border-color: var(--hxCheckbox-focus-bordercolor, $blue-700);
1213
}
1314
}
1415
@else if $pseudo-state == hover {
16+
color: $blue-700;
1517
color: var(--hxCheckbox-hover-color, $blue-700);
1618

1719
&::-ms-check {
18-
background-color: var(--hxCheckbox-hover-bgcolor, $gray-0);
19-
color: var(--hxCheckbox-hover-ie-color, $blue-700);
20+
background-color: $gray-0;
21+
border-color: $blue-700;
22+
color: $blue-700;
2023
}
2124
}
2225
@else {
26+
color: $gray-500;
2327
color: var(--hxCheckbox-color, $gray-500);
2428

2529
&::-ms-check {
30+
background-color: $gray-0;
2631
background-color: var(--hxCheckbox-bgcolor, $gray-0);
2732
border-color: currentColor;
2833
border-style: solid;
@@ -38,21 +43,24 @@
3843
box-shadow: $focus-glow-invalid;
3944

4045
&::-ms-check {
41-
border-color: var(--hxCheckbox-invalid-bordercolor, $red-status-900);
46+
border-color: $red-status-500;
47+
border-color: var(--hxCheckbox-invalid-bordercolor, $red-status-500);
4248
}
4349
}
4450
@else if $pseudo-state == hover {
4551
&::-ms-check {
46-
background-color: var(--hxCheckbox-invalid-hover-bgcolor, $red-status-100);
52+
// v2.0 specs
4753
}
4854
}
4955
@else {
50-
color: var(--hxCheckbox-invalid-color, $red-status-900);
56+
color: $red-status-500;
57+
color: var(--hxCheckbox-invalid-color, $red-status-500);
58+
background-color: $red-status-100;
5159

5260
&::-ms-check {
5361
border-width: 1px;
54-
border-color: $red-status-900 !important;
55-
color: $red-status-900 !important;
62+
border-color: $red-status-500 !important;
63+
color: $red-status-500 !important;
5664
}
5765
}
5866
}
@@ -61,24 +69,26 @@
6169
@mixin __checkboxControl--disabled($pseudo-state: null) {
6270
@if $pseudo-state == focus {
6371
&::-ms-check {
72+
border-color: $gray-500;
6473
border-color: var(--hxCheckbox-disabled-bordercolor, $gray-500);
6574
box-shadow: $focus-glow-disabled;
6675
}
6776
}
6877
@else if $pseudo-state == hover {
6978
&::-ms-check {
70-
background-color: var(--hxCheckbox-disabled-hover-bgcolor, $gray-0);
71-
border-color: var(--hxCheckbox-disabled-hover-bordercolor, $gray-500);
72-
color: var(--hxCheckbox-disabled-hover-color, $gray-500);
79+
background-color: $gray-0;
80+
border-color: $gray-500;
81+
color: $gray-500;
7382
}
7483
}
7584
@else {
76-
color: var(--hxCheckbox-disabled-color, $gray-500);
7785
cursor: not-allowed;
7886

7987
&::-ms-check {
8088
background-color: $gray-0 !important; // simplest way of styling
89+
border-color: $gray-500;
8190
border-width: 1px;
91+
color: $gray-500;
8292
}
8393
}
8494
}

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

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
//
2-
// ===== Mixins for <hx-checkbox> facade states =====
3-
//
1+
// ================================================== //
2+
// ===== Mixins for <hx-checkbox> facade states ===== //
3+
// ================================================== //
44

55
// ========== PRISTINE ==========
66
@mixin __checkboxFacade($pseudo-state: null) {
77
@if $pseudo-state == focus {
8+
border-color: $blue-900;
89
border-color: var(--hxCheckbox-bordercolor-focus, $blue-900);
910
box-shadow: $focus-glow;
1011
}
@@ -18,29 +19,35 @@
1819
// ========== INVALID ==========
1920
@mixin __checkboxFacade--invalid($pseudo-state: null) {
2021
@if $pseudo-state == focus {
21-
border-color: var(--hxCheckbox-invalid-bordercolor, $red-status-900);
22+
border-color: $red-status-500;
23+
border-color: var(--hxCheckbox-invalid-bordercolor, $red-status-500);
2224
box-shadow: $focus-glow-invalid;
2325
}
2426
@else if $pseudo-state == hover {
25-
background-color: var(--hxCheckbox-invalid-hover-bgcolor, $red-status-100);
26-
border-color: var(--hxCheckbox-invalid-hover-bordercolor, $red-status-900);
27-
color: var(--hxCheckbox-invalid-hover-color, $red-status-900);
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);
2831
}
2932
@else {
30-
border: 1px solid var(--hxCheckbox-invalid-border, $red-status-900);
31-
color: var(--hxCheckbox-invalid-color, $red-status-900);
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);
3237
}
3338
}
3439

3540
// ========== DISABLED ==========
3641
@mixin __checkboxFacade--disabled($pseudo-state: null) {
3742
@if $pseudo-state == focus {
43+
border-color: $gray-500;
3844
border-color: var(--hxCheckbox-disabled-bordercolor, $gray-500);
3945
}
4046
@else if $pseudo-state == hover {
47+
background-color: $gray-0;
4148
background-color: var(--hxCheckbox-disabled-hover-bgcolor, $gray-0);
49+
border-color: $gray-500;
4250
border-color: var(--hxCheckbox-disabled-hover-bordercolor, $gray-500);
43-
color: var(--hxCheckbox-disabled-color, $gray-500);
4451
}
4552
@else {
4653
border-width: 1px;

0 commit comments

Comments
 (0)