Merge branch 'master' into rkaraivanov/textarea

Author: Konstantin Dinev

src/components/checkbox/themes/dark/switch.bootstrap.scss

@@ -0,0 +1,17 @@
+@use 'sass:map';
+@use '../../../../styles/utilities' as *;
+@use '../../../../styles/themes/schemas' as *;
+
+@mixin theme() {
+    $schema: extend(
+        (
+            name: 'ig-switch'
+        ),
+        map.get($dark-bootstrap-schema, 'switch')
+    );
+    $theme: digest-schema($schema);
+
+    igc-switch {
+        @include css-vars($theme);
+    }
+}

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

@@ -1,13 +1,17 @@
+@use 'sass:map';
 @use '../../../../styles/utilities' as *;
+@use '../../../../styles/themes/schemas' as *;
 
 @mixin theme() {
+    $schema: extend(
+        (
+            name: 'switch'
+        ),
+        map.get($dark-fluent-schema, 'switch')
+    );
+    $theme: digest-schema($schema);
+
     igc-switch {
-        --thumb-color: #{color(gray, 500)};
-        --disabled-thumb-color: #{color(gray, 100)};
-        --hover-color: #{color(gray, 900)};
-        --checked-hover-color: #{color(primary, 200)};
-        --invalid-color: #{color(error, 200)};
-        --invalid-hover-color: #{color(error, 100)};
-        --disabled-color: #{color(gray, 200)};
+        @include css-vars($theme);
     }
 }

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

@@ -1,10 +1,17 @@
+@use 'sass:map';
 @use '../../../../styles/utilities' as *;
+@use '../../../../styles/themes/schemas' as *;
 
 @mixin theme() {
+    $schema: extend(
+        (
+            name: 'ig-switch'
+        ),
+        map.get($dark-indigo-schema, 'switch')
+    );
+    $theme: digest-schema($schema);
+
     igc-switch {
-        --border-color: #{color(gray, 700)};
-        --checked-color: #{color(gray, 900)};
-        --thumb-color: #{color(gray, 700)};
-        --disabled-color: #{color(gray, 400)};
+        @include css-vars($theme);
     }
 }

src/components/checkbox/themes/dark/switch.material.scss

@@ -0,0 +1,45 @@
+@use 'sass:map';
+@use '../../../../styles/utilities' as *;
+@use '../../../../styles/themes/schemas' as *;
+
+@mixin theme() {
+    $schema: extend(
+        (
+            name: 'ig-switch'
+        ),
+        map.get($dark-material-schema, 'switch')
+    );
+    $theme: digest-schema($schema);
+
+    igc-switch {
+        @include css-vars($theme);
+
+        &:hover {
+            &::part(thumb) {
+                &::after {
+                    opacity: .12;
+                }
+            }
+
+            &::part(thumb checked) {
+                &::after {
+                    opacity: .12;
+                }
+            }
+        }
+
+        &:focus-within {
+            &::part(thumb) {
+                &::after {
+                    opacity: .24;
+                }
+            }
+
+            &::part(thumb checked) {
+                &::after {
+                    opacity: .24;
+                }
+            }
+        }
+    }
+}

src/components/checkbox/themes/light/switch.base.scss

@@ -1,92 +1,59 @@
+@use 'sass:map';
 @use '../../../../styles/common/component';
 @use '../../../../styles/utilities' as *;
+@use '../../../../styles/themes/schemas' as *;
 
 :host {
     display: inline-flex;
     font-family: var(--ig-font-family);
-
-    --size: #{rem(36px)};
-    --thumb-size: #{rem(20px)};
-    --thumb-offset: #{rem(-1px)};
 }
 
 input[type='checkbox'] {
     @include hide-default();
 }
 
-label {
+[part~='base'] {
     display: flex;
     flex-flow: row nowrap;
     align-items: center;
     cursor: pointer;
-    gap: rem(8px);
-
-    &:hover [part~='thumb'] {
-        &::after {
-            background: color(gray, 600, .06);
-        }
-    }
-
-    &:focus-within [part~='thumb'] {
-        &::after {
-            background: color(gray, 600, .12);
-        }
-    }
+    gap: var(--label-gap);
 }
 
 [part~='control'] {
     display: flex;
     flex-shrink: 0;
     align-items: center;
     user-select: none;
-    transition: all .2s ease-in-out;
 }
 
 [part~='thumb'] {
-    @include border-radius(rem(10px));
-
     position: relative;
-    animation-name: thumb-off;
     animation-duration: .2s;
     animation-fill-mode: none;
+}
+
+[part~='control'],
+[part~='thumb'] {
     transition: all .2s ease-in-out;
 }
 
 [part~='thumb'][part~='checked'] {
-    animation-name: thumb-on;
     animation-duration: .2s;
     animation-fill-mode: forwards;
 }
 
 [part~='label'] {
-    @include type-style('subtitle-1');
-
     display: inline-block;
-    color: color(gray, 900);
     cursor: pointer;
     user-select: none;
-    word-wrap: break-all;
-    transition: all .2s ease-in-out;
+    word-wrap: break-word;
 }
 
 :host([disabled]) {
     user-select: none;
     pointer-events: none;
     cursor: initial;
-
-    [part~='label'] {
-        color: color(gray, 400);
-    }
-}
-
-:host(:not([disabled])[invalid]) {
-    [part~='label'] {
-        color: color(error, 500);
-    }
-
-    [part~='thumb'] {
-        background: color(error, 500);
-    }
 }
 
 :host([label-position='before']) {
@@ -101,16 +68,17 @@ label {
     }
 
     to {
-        margin-inline-start: calc(var(--size) - var(--thumb-size) - var(--thumb-offset));
+        margin-inline-start: calc(var(--size) - var(--thumb-size));
     }
 }
 
 @keyframes thumb-off {
     from {
-        margin-inline-start: calc(var(--size) - var(--thumb-size) - var(--thumb-offset));
+        margin-inline-start: calc(var(--size) - var(--thumb-size));
     }
 
     to {
         margin-inline-start: var(--thumb-offset);
     }
 }
+