feat(checkbox): implement-dark-themes

src/components/checkbox/checkbox.bootstrap.scss

@@ -25,6 +25,7 @@
         stroke-width: 4;
         transform: scale(.7);
         transition: none;
+        stroke: white;
     }
 
     igc-checkbox::part(label) {

src/components/checkbox/checkbox.dark.fluent.scss

@@ -0,0 +1,147 @@
+@use '../../styles/utilities' as utils;
+@use 'checkbox.fluent' as light-checkbox;
+
+@mixin theme() {
+    @include light-checkbox.theme();
+
+    igc-checkbox::part(control) {
+        &::after {
+            box-shadow: inset 0 0 0 1px #{utils.color(gray, 700)};
+        }
+    }
+
+    igc-checkbox::part(indicator) {
+        stroke: #{utils.color(surface, 500)};
+    }
+
+    igc-checkbox:hover {
+        &::part(indicator checked) {
+            stroke: #{utils.color(surface, 500)};
+        }
+    }
+
+    igc-checkbox:hover,
+    igc-checkbox:focus-within {
+        &::part(control)::after {
+            box-shadow: inset 0 0 0 1px #{utils.color(gray, 900)};
+        }
+    }
+
+    igc-checkbox[indeterminate]:hover::part(control),
+    igc-checkbox[indeterminate]:focus-within::part(control) {
+        &::before {
+            background: #{utils.color(primary, 100)};
+        }
+
+        &::after {
+            box-shadow: inset 0 0 0 1px #{utils.color(primary, 100)};
+            background: transparent;
+        }
+    }
+
+    igc-checkbox::part(control checked) {
+        &::after {
+            box-shadow: inset 0 0 0 1px #{utils.color(primary, 500)};
+        }
+    }
+
+    igc-checkbox:hover::part(control checked),
+    igc-checkbox:focus-within::part(control checked) {
+        &::after {
+            background: #{utils.color(primary, 100)};
+            box-shadow: inset 0 0 0 1px #{utils.color(primary, 100)};
+        }
+    }
+
+    igc-checkbox:not([disabled])[invalid]::part(label) {
+        color: #{utils.color(error, 200)};
+    }
+
+    igc-checkbox[invalid]::part(control) {
+        &::after {
+            box-shadow: inset 0 0 0 1px #{utils.color(error, 200)};
+        }
+    }
+
+    igc-checkbox[invalid]:hover::part(indicator) {
+        stroke: #{utils.color(error, 200)};
+    }
+
+    igc-checkbox[invalid]:hover::part(indicator checked) {
+        stroke: #{utils.color(surface, 500)};
+    }
+
+    igc-checkbox[invalid]::part(control checked) {
+        &::after {
+            box-shadow: inset 0 0 0 1px #{utils.color(error, 200)};
+            background: #{utils.color(error, 200)};
+        }
+    }
+
+    igc-checkbox[indeterminate][invalid]::part(control) {
+        &::before {
+            background: #{utils.color(error, 200)};
+        }
+
+        &::after {
+            box-shadow: inset 0 0 0 1px #{utils.color(error, 200)};
+            background: transparent;
+        }
+    }
+
+    igc-checkbox[invalid]:hover::part(control),
+    igc-checkbox[invalid]:focus-within::part(control) {
+        &::after {
+            box-shadow: inset 0 0 0 1px #{utils.color(error, 100)};
+        }
+    }
+
+    igc-checkbox[invalid]:hover::part(control checked),
+    igc-checkbox[invalid]:focus-within::part(control checked) {
+        &::after {
+            box-shadow: inset 0 0 0 1px #{utils.color(error, 100)};
+            background: #{utils.color(error, 100)};
+        }
+    }
+
+    igc-checkbox[indeterminate][invalid]:hover::part(control),
+    igc-checkbox[indeterminate][invalid]:focus-within::part(control) {
+        &::before {
+            background: #{utils.color(error, 100)};
+        }
+
+        &::after {
+            box-shadow: inset 0 0 0 1px #{utils.color(error, 100)};
+            background: transparent;
+        }
+    }
+
+    igc-checkbox[disabled]::part(label) {
+        color: #{utils.color(gray, 200)};
+    }
+
+    igc-checkbox[disabled]::part(control),
+    igc-checkbox[disabled][invalid]::part(control) {
+        &::after {
+            box-shadow: inset 0 0 0 1px #{utils.color(gray, 200)};
+        }
+    }
+
+    igc-checkbox[disabled]::part(control checked),
+    igc-checkbox[disabled][invalid]::part(control checked) {
+        &::after {
+            background: #{utils.color(gray, 200)};
+        }
+    }
+
+    igc-checkbox[disabled][indeterminate]::part(control),
+    igc-checkbox[disabled][indeterminate][invalid]::part(control) {
+        &::before {
+            background: #{utils.color(gray, 200)};
+        }
+
+        &::after {
+            box-shadow: inset 0 0 0 1px #{utils.color(gray, 200)};
+        }
+    }
+}

src/components/checkbox/checkbox.dark.indigo.scss

@@ -0,0 +1,39 @@
+@use '../../styles/utilities' as utils;
+@use 'checkbox.indigo' as light-checkbox;
+
+@mixin theme() {
+    @include light-checkbox.theme();
+
+    igc-checkbox::part(control)::after {
+        border-color: #{utils.color(gray, 700)};
+        transition: none;
+    }
+
+    igc-checkbox:not([invalid])::part(control checked)::after,
+    igc-checkbox:not([invalid])[indeterminate]::part(control)::after {
+        background: #{utils.color(gray, 900)};
+        border-color: #{utils.color(gray, 900)};
+    }
+
+    igc-checkbox[invalid]::part(control)::after {
+        border-color: #{utils.color(error, 500)};
+    }
+
+    igc-checkbox[disabled],
+    igc-checkbox[disabled][invalid] {
+        &::part(control)::after {
+            border-color: #{utils.color(gray, 400)};
+        }
+
+        &::part(control checked)::after {
+            background: #{utils.color(gray, 400)};
+        }
+    }
+
+    igc-checkbox[disabled][indeterminate] {
+        &::part(control)::after {
+            background: #{utils.color(gray, 400)};
+            border-color: #{utils.color(gray, 400)};
+        }
+    }
+}

src/components/checkbox/checkbox.fluent.scss

@@ -18,6 +18,7 @@
     igc-checkbox::part(indicator) {
         stroke-width: 1.5;
         transform: scale(.8);
+        stroke: white;
     }
 
     igc-checkbox:hover {

src/components/checkbox/checkbox.indigo.scss

@@ -38,12 +38,6 @@
         box-shadow: 0 0 0 4px #{utils.color(gray, 300, .87)};
     }
 
-    igc-checkbox::part(control checked),
-    igc-checkbox[indeterminate]::part(control) {
-        background: #{utils.color(primary, 500)};
-        box-shadow: inset 0 0 0 4px #{utils.color(secondary, 500)};
-    }
-
     igc-checkbox:hover::part(control checked),
     igc-checkbox[indeterminate]:hover::part(control) {
         box-shadow: 0 0 0 4px #{utils.color(secondary, 100, .87)};
@@ -61,16 +55,26 @@
     }
 
     igc-checkbox[invalid]:hover::part(control),
-    igc-checkbox[invalid]:focus-within::part(control),
     igc-checkbox[invalid]:hover::part(control checked),
+    igc-checkbox[invalid][indeterminate]:hover::part(control) {
+        box-shadow: 0 0 0 4px #{utils.color(error, 100, .87)};
+    }
+
+    igc-checkbox[invalid]:focus-within::part(control),
     igc-checkbox[invalid]:focus-within::part(control checked),
-    igc-checkbox[invalid][indeterminate]:hover::part(control),
     igc-checkbox[invalid][indeterminate]:focus-within::part(control) {
         box-shadow: 0 0 0 4px #{utils.color(error, 200, .87)};
     }
 
     igc-checkbox[disabled],
     igc-checkbox[disabled][invalid] {
+        &::part(control checked) {
+            background: transparent;
+            box-shadow: none;
+        }
+    }
+
+    igc-checkbox[disabled][invalid][indeterminate] {
         &::part(control) {
             background: transparent;
             box-shadow: none;

src/components/checkbox/checkbox.material.scss

@@ -19,11 +19,11 @@ $mark-length: 24;
     flex-flow: row nowrap;
 
     &:hover [part='control'] {
-        background: color(gray, 200, .87);
+        background: color(gray, 600, .06);
     }
 
     &:focus-within [part='control'] {
-        background: color(gray, 300, .87);
+        background: color(gray, 600, .12);
     }
 }
 
@@ -68,7 +68,7 @@ $mark-length: 24;
     right: 0;
     bottom: 0;
     left: 0;
-    stroke: white;
+    stroke: color(surface, 500);
     stroke-linecap: square;
     stroke-width: 3;
     stroke-dasharray: $mark-length;
@@ -82,11 +82,11 @@ $mark-length: 24;
 
 [part='base checked'] {
     &:hover [part~='control'] {
-        background: color(secondary, 50, .54);
+        background: color(secondary, 500, .06);
     }
 
     &:focus-within [part~='control'] {
-        background: color(secondary, 100, .72);
+        background: color(secondary, 500, .12);
     }
 }
 
@@ -104,11 +104,11 @@ $mark-length: 24;
 :host([indeterminate]) {
     [part~='base'] {
         &:hover [part~='control'] {
-            background: color(secondary, 50, .54);
+            background: color(secondary, 500, .06);
         }
 
         &:focus-within [part~='control'] {
-            background: color(secondary, 100, .72);
+            background: color(secondary, 500, .12);
         }
     }
 
@@ -145,16 +145,6 @@ $mark-length: 24;
             background: color(error, 500);
         }
     }
-
-    [part~='base'] {
-        &:hover [part~='control'] {
-            background: color(error, 50, .54);
-        }
-
-        &:focus-within [part~='control'] {
-            background: color(error, 100, .72);
-        }
-    }
 }
 
 :host(:not([disabled])[invalid][indeterminate]) {

src/styles/themes/dark/fluent.scss

@@ -2,7 +2,7 @@
 @use '../../../components/button/button.fluent' as button;
 @use '../../../components/button/icon-button.fluent' as icon-button;
 @use '../../../components/card/card.fluent' as card;
-@use '../../../components/checkbox/checkbox.fluent' as checkbox;
+@use '../../../components/checkbox/checkbox.dark.fluent' as dark-checkbox;
 @use '../../../components/radio/radio.fluent' as radio;
 @use '../../../components/list/list.fluent' as list;
 @use '../../../components/checkbox/switch.fluent' as switch;
@@ -157,12 +157,10 @@ $type-scale: utils.extend($fluent-type-scale);
 
 @include button.theme();
 @include card.theme();
-@include checkbox.theme();
+@include dark-checkbox.theme();
 @include radio.theme();
 @include list.theme();
 @include switch.theme();
 @include calendar.theme();
 @include input.theme();
 @include icon-button.theme();
-
-

src/styles/themes/dark/indigo.scss

@@ -2,7 +2,7 @@
 @use '../../../components/button/button.indigo' as button;
 @use '../../../components/button/icon-button.indigo' as icon-button;
 @use '../../../components/card/card.indigo' as card;
-@use '../../../components/checkbox/checkbox.indigo' as checkbox;
+@use '../../../components/checkbox/checkbox.dark.indigo' as dark-checkbox;
 @use '../../../components/radio/radio.indigo' as radio;
 @use '../../../components/checkbox/switch.indigo' as switch;
 @use '../../../components/navbar/navbar.indigo' as navbar;
@@ -183,7 +183,7 @@ $type-scale: utils.extend($indigo-type-scale);
 
 @include button.theme();
 @include card.theme();
-@include checkbox.theme();
+@include dark-checkbox.theme();
 @include radio.theme();
 @include switch.theme();
 @include navbar.theme();

src/styles/themes/light/fluent.scss

@@ -162,5 +162,3 @@ $type-scale: utils.extend($fluent-type-scale);
 @include calendar.theme();
 @include input.theme();
 @include icon-button.theme();
-
-