Merge pull request #846 from HelixDesignSystem/surf-2182-checkbox-specs

feat(checkbox): update component specs
HelixDesignSystem · Mar 15, 2021 · f212cce · f212cce
2 parents aa96910 + 2538b24
commit f212cce
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 31 deletions.
diff --git a/docs/components/checkbox/_spec.scss b/docs/components/checkbox/_spec.scss
@@ -24,7 +24,9 @@
         @include hxCheckboxControl($pseudo-state: hover);
 
         ~ label > hx-checkbox {
-          @include hxCheckboxFacade($pseudo-state: hover);
+          @include hxCheckboxFacade($pseudo-state: null);
+
+          border-color: $blue-700;
         }
       }
 
@@ -43,7 +45,12 @@
         @include hxCheckboxControl(disabled, hover);
 
         ~ label > hx-checkbox {
-          @include hxCheckboxFacade(disabled, hover);
+          @include hxCheckboxFacade(disabled, null);
+
+          border-color: $gray-500;
+          border-color: var(--hxCheckbox-disabled-checked-label-bordercolor, $gray-500);
+          color: $gray-0;
+          color: var(--hxCheckbox-disabled-checked-label-color, $gray-0);
         }
       }
     }

diff --git a/src/scss/_vars.scss b/src/scss/_vars.scss
@@ -153,7 +153,7 @@ $font-monospace: "Open Sans Condensed", "Roboto Mono", monospace;
 // ==== FOCUS STATE =====
 $focus-glow: 0 0 4px rgba($blue-700, 0.5);
 $focus-glow-disabled: $focus-glow;
-$focus-glow-invalid: 0 0 4px rgba($red-status-900, 0.5);
+$focus-glow-invalid: 0 0 4px rgba($red-status-500, 0.5);
 
 $app-nav-width: 15rem;
 //$corner-radius: 2px;  // Deprecated for Button- v2.0 Specs

diff --git a/src/scss/components/checkbox/_index.scss b/src/scss/components/checkbox/_index.scss
@@ -80,9 +80,12 @@ hx-checkbox-control {
 
 // ========== PRISTINE ==========
 hx-checkbox {
+  background-color: $gray-0;
   background-color: var(--hxCheckbox-bgcolor, $gray-0);
-  border-radius: 2px;
-  border: 1px solid var(--hxCheckbox-border, $gray-500);
+  border-color: $gray-500;
+  border-color: var(--hxCheckbox-border, $gray-500);
+  border-style: solid;
+  border-width: 1px;
 }
 
 hx-checkbox-control {
@@ -125,17 +128,22 @@ hx-checkbox-control {
 
     &:checked,
     &:indeterminate {
+      color: $blue-700;
       color: var(--hxCheckbox-indeterminate-color, $blue-700);
 
       ~ label > hx-checkbox {
+        background-color: $blue-700;
+        background-color: var(--hxCheckbox-indeterminate-label-bgcolor, $blue-700);
+        border-color: $blue-700;
         border-color: var(--hxCheckbox-indeterminate-label-bordercolor, $blue-700);
-        color: var(--hxCheckbox-indeterminate-label-color, $blue-700);
+        color: $gray-0;
+        color: var(--hxCheckbox-indeterminate-label-color, $gray-0);
       }
     }
 
     &:valid {
       ~ label > hx-checkbox:hover {
-        @include hxCheckboxFacade($pseudo-state: hover);
+        @include hxCheckboxFacade($pseudo-state: null);  // v2.0 specs
       }
     }
   }
@@ -165,6 +173,20 @@ hx-checkbox-control.hxInvalid > input[type="checkbox"]:enabled {
       @include hxCheckboxFacade(invalid, hover);
     }
   }
+
+  // v2.0 specs
+  &:checked,
+  &:indeterminate {
+    color: $red-status-500;
+    color: var(--hxCheckbox-invalid-checked-color, $red-status-500);
+
+    ~ label > hx-checkbox {
+      background-color: $red-status-100;
+      background-color: var(--hxCheckbox-invalid-checked-bgcolor, $red-status-100);
+      border-color: $red-status-500;
+      border-color: var(--hxCheckbox-invalid-checked-label-bordercolor, $red-status-500);
+    }
+  }
 }
 
 // ========== DISABLED ==========
@@ -184,6 +206,7 @@ hx-checkbox-control > input[type="checkbox"]:disabled {
   }
 
   ~ label {
+    color: $gray-600;
     color: var(--hxCheckbox-disabled-label-color, $gray-600);
 
     > hx-checkbox {
@@ -197,6 +220,19 @@ hx-checkbox-control > input[type="checkbox"]:disabled {
   }
 }
 
+// v2.0 specs
+hx-checkbox-control > input[type="checkbox"]:indeterminate:disabled,
+hx-checkbox-control > input[type="checkbox"]:checked:disabled {
+  ~ label > hx-checkbox {
+    background-color: $gray-500;
+    background-color: var(--hxCheckbox-disabled-checked-label-bgcolor, $gray-500);
+    border-color: $gray-500;
+    border-color: var(--hxCheckbox-disabled-checked-label-bordercolor, $gray-500);
+    color: $gray-0;
+    color: var(--hxCheckbox-disabled-checked-label-color, $gray-0);
+  }
+}
+
 // ----- Modern Browsers -----
 @supports (--modern: true) {
   hx-checkbox-control {

diff --git a/src/scss/components/checkbox/mixins/_hxCheckboxControl.scss b/src/scss/components/checkbox/mixins/_hxCheckboxControl.scss
@@ -1,28 +1,33 @@
-//
-// ===== Mixins for <hx-checkbox-control> states =====
-//
+// =================================================== //
+// ===== Mixins for <hx-checkbox-control> states ===== //
+// =================================================== //
 
 // ========== PRISTINE ==========
 @mixin __checkboxControl($pseudo-state: null) {
   @if $pseudo-state == focus {
     box-shadow: $focus-glow;
 
     &::-ms-check {
+      border-color: $blue-700;
       border-color: var(--hxCheckbox-focus-bordercolor, $blue-700);
     }
   }
   @else if $pseudo-state == hover {
+    color: $blue-700;
     color: var(--hxCheckbox-hover-color, $blue-700);
 
     &::-ms-check {
-      background-color: var(--hxCheckbox-hover-bgcolor, $gray-0);
-      color: var(--hxCheckbox-hover-ie-color, $blue-700);
+      background-color: $gray-0;
+      border-color: $blue-700;
+      color: $blue-700;
     }
   }
   @else {
+    color: $gray-500;
     color: var(--hxCheckbox-color, $gray-500);
 
     &::-ms-check {
+      background-color: $gray-0;
       background-color: var(--hxCheckbox-bgcolor, $gray-0);
       border-color: currentColor;
       border-style: solid;
@@ -38,21 +43,24 @@
     box-shadow: $focus-glow-invalid;
 
     &::-ms-check {
-      border-color: var(--hxCheckbox-invalid-bordercolor, $red-status-900);
+      border-color: $red-status-500;
+      border-color: var(--hxCheckbox-invalid-bordercolor, $red-status-500);
     }
   }
   @else if $pseudo-state == hover {
     &::-ms-check {
-      background-color: var(--hxCheckbox-invalid-hover-bgcolor, $red-status-100);
+      // v2.0 specs
     }
   }
   @else {
-    color: var(--hxCheckbox-invalid-color, $red-status-900);
+    color: $red-status-500;
+    color: var(--hxCheckbox-invalid-color, $red-status-500);
+    background-color: $red-status-100;
 
     &::-ms-check {
       border-width: 1px;
-      border-color: $red-status-900 !important;
-      color: $red-status-900 !important;
+      border-color: $red-status-500 !important;
+      color: $red-status-500 !important;
     }
   }
 }
@@ -61,24 +69,26 @@
 @mixin __checkboxControl--disabled($pseudo-state: null) {
   @if $pseudo-state == focus {
     &::-ms-check {
+      border-color: $gray-500;
       border-color: var(--hxCheckbox-disabled-bordercolor, $gray-500);
       box-shadow: $focus-glow-disabled;
     }
   }
   @else if $pseudo-state == hover {
     &::-ms-check {
-      background-color: var(--hxCheckbox-disabled-hover-bgcolor, $gray-0);
-      border-color: var(--hxCheckbox-disabled-hover-bordercolor, $gray-500);
-      color: var(--hxCheckbox-disabled-hover-color, $gray-500);
+      background-color: $gray-0;
+      border-color: $gray-500;
+      color: $gray-500;
     }
   }
   @else {
-    color: var(--hxCheckbox-disabled-color, $gray-500);
     cursor: not-allowed;
 
     &::-ms-check {
       background-color: $gray-0 !important; // simplest way of styling
+      border-color: $gray-500;
       border-width: 1px;
+      color: $gray-500;
     }
   }
 }

diff --git a/src/scss/components/checkbox/mixins/_hxCheckboxFacade.scss b/src/scss/components/checkbox/mixins/_hxCheckboxFacade.scss
@@ -1,10 +1,11 @@
-//
-// ===== Mixins for <hx-checkbox> facade states =====
-//
+// ================================================== //
+// ===== Mixins for <hx-checkbox> facade states ===== //
+// ================================================== //
 
 // ========== PRISTINE ==========
 @mixin __checkboxFacade($pseudo-state: null) {
   @if $pseudo-state == focus {
+    border-color: $blue-900;
     border-color: var(--hxCheckbox-bordercolor-focus, $blue-900);
     box-shadow: $focus-glow;
   }
@@ -18,29 +19,35 @@
 // ========== INVALID ==========
 @mixin __checkboxFacade--invalid($pseudo-state: null) {
   @if $pseudo-state == focus {
-    border-color: var(--hxCheckbox-invalid-bordercolor, $red-status-900);
+    border-color: $red-status-500;
+    border-color: var(--hxCheckbox-invalid-bordercolor, $red-status-500);
     box-shadow: $focus-glow-invalid;
   }
   @else if $pseudo-state == hover {
-    background-color: var(--hxCheckbox-invalid-hover-bgcolor, $red-status-100);
-    border-color: var(--hxCheckbox-invalid-hover-bordercolor, $red-status-900);
-    color: var(--hxCheckbox-invalid-hover-color, $red-status-900);
+    border-color: $red-status-500;
+    border-color: var(--hxCheckbox-invalid-hover-bordercolor, $red-status-500);
+    color: $red-status-500;
+    color: var(--hxCheckbox-invalid-hover-color, $red-status-500);
   }
   @else {
-    border: 1px solid var(--hxCheckbox-invalid-border, $red-status-900);
-    color: var(--hxCheckbox-invalid-color, $red-status-900);
+    border: 1px solid $red-status-500;
+    border: 1px solid var(--hxCheckbox-invalid-border, $red-status-500);
+    color: $red-status-500;
+    color: var(--hxCheckbox-invalid-color, $red-status-500);
   }
 }
 
 // ========== DISABLED ==========
 @mixin __checkboxFacade--disabled($pseudo-state: null) {
   @if $pseudo-state == focus {
+    border-color: $gray-500;
     border-color: var(--hxCheckbox-disabled-bordercolor, $gray-500);
   }
   @else if $pseudo-state == hover {
+    background-color: $gray-0;
     background-color: var(--hxCheckbox-disabled-hover-bgcolor, $gray-0);
+    border-color: $gray-500;
     border-color: var(--hxCheckbox-disabled-hover-bordercolor, $gray-500);
-    color: var(--hxCheckbox-disabled-color, $gray-500);
   }
   @else {
     border-width: 1px;