Merge branch 'master' into didimmova/text-contrast-function

IgniteUI · Feb 17, 2025 · 671f5b7 · 671f5b7
2 parents aeb80bb + ac61efa
commit 671f5b7
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 7 deletions.
diff --git a/sass/themes/_mixins.scss b/sass/themes/_mixins.scss
@@ -12,7 +12,7 @@
 
 /// A list of ignored keywords to be excluded when generating CSS variables for a theme.
 /// @access private
-$ignored-keys: ('name', 'palette', 'variant', 'selector', 'type', '_meta');
+$ignored-keys: ('name', 'palette', 'variant', 'selector', 'type', 'theme', '_meta');
 
 /// Parses a map of key value pairs from component themes to css variables.
 /// @access private
@@ -28,6 +28,7 @@ $ignored-keys: ('name', 'palette', 'variant', 'selector', 'type', '_meta');
 @mixin css-vars-from-theme($theme, $name, $ignored: $ignored-keys) {
     $themes: map.get($theme, 'themes');
     $prefix: map.get($theme, 'prefix');
+    $t: map.get($theme, 'theme');
 
     // This is here only because the button theme consists of 4 nested themes.
     @if $themes and meta.type-of($themes) == 'map' {
@@ -43,6 +44,10 @@ $ignored-keys: ('name', 'palette', 'variant', 'selector', 'type', '_meta');
             --#{$variable}: var(--#{$name}-#{$key}, #{$value});
         }
     }
+
+    @if $t and meta.type-of($t) == 'string' {
+        --ig-theme: #{$t};
+    }
 }
 
 /// Add theme colors as CSS variables to a given scope.

diff --git a/sass/themes/schemas/components/dark/_switch.scss b/sass/themes/schemas/components/dark/_switch.scss
@@ -148,7 +148,7 @@ $dark-fluent-switch: extend(
 
 /// Generates a dark bootstrap switch schema.
 /// @type {Map}
-/// @prop {Map} thumb-on-color [color: ('gray', 900)] - The color of the thumb when the switch is on.
+/// @prop {Map} focus-outline-color [color: ('primary', 900, 0.5)] - The focus outlined color.
 /// @prop {Map} label-disabled-color [color: ('gray', 300)] - The color of the switch label when the switch is disabled
 /// @prop {Map} border-disabled-color [color: ('gray', 100)] - The border color of the disabled switch.
 /// @prop {Map} track-disabled-color [color: 'surface'] - The color of the track when the switch is on and disabled.
@@ -202,6 +202,8 @@ $dark-bootstrap-switch: extend(
 /// @prop {Map} border-hover-color [contrast-color: ('gray', 50, .8)] - The border color of the switch on hover.
 /// @prop {Map} border-disabled-color [contrast-color: ('gray', 50, .2)] - The border color of the disabled switch.
 /// @prop {Map} error-color [contrast-color: ('gray', 50, .6)] - The border and thumb color in invalid state.
+/// @prop {Map} error-color-hover [contrast-color: ('gray', 50, .2)] - The border and thumb color in invalid state on hover.
+/// @prop {Map} thumb-on-error-color [contrast-color: ('gray', 50)] - The color of the thumb when the switch is on and invalid.
 /// @prop {Map} focus-outline-color [contrast-color: ('gray', 50, .2)] - The focus outlined color.
 /// @requires $indigo-switch
 $dark-indigo-switch: extend(
@@ -289,6 +291,19 @@ $dark-indigo-switch: extend(
                 0.6,
             ),
         ),
+        error-color-hover: (
+            contrast-color: (
+                'gray',
+                50,
+                0.2,
+            ),
+        ),
+        thumb-on-error-color: (
+            contrast-color: (
+                'gray',
+                50,
+            ),
+        ),
         focus-outline-color: (
             contrast-color: (
                 'gray',

diff --git a/sass/themes/schemas/components/light/_switch.scss b/sass/themes/schemas/components/light/_switch.scss
@@ -368,6 +368,7 @@ $fluent-switch: extend(
 /// @prop {Map} thumb-on-disabled-color [contrast-color: ('primary', 800)] - The color of the thumb when the switch is on and disabled.
 /// @prop {Map} error-color [color: ('gray', 400)] - The border and thumb color in invalid state.
 /// @prop {Map} error-color-hover [color: ('primary', 200)] - The border and thumb color in invalid state on hover.
+/// @prop {Map} thumb-on-error-color [contrast-color: ('primary', 800)] - The color of the thumb when the switch is on and invalid.
 /// @prop {List} border-radius-track [(rem(32px), rem(0), rem(32px))] - The border radius used for switch track.
 /// @prop {List} border-radius-thumb [(rem(32px), rem(0), rem(32px))] - The border radius used for switch thumb.
 /// @requires {Map} $fluent-switch
@@ -465,6 +466,12 @@ $bootstrap-switch: extend(
                 200,
             ),
         ),
+        thumb-on-error-color: (
+            contrast-color: (
+                'primary',
+                800,
+            ),
+        ),
         border-radius-track: (
             border-radius: (
                 rem(32px),
@@ -498,8 +505,9 @@ $bootstrap-switch: extend(
 /// @prop {Map} border-disabled-color [color: ('gray', 900, .15)] - The border color of the disabled switch.
 /// @prop {Map} border-on-hover-color [color: ('primary', 400)] - The hover border color when the switch is on.
 /// @prop {Map} error-color [color: ('gray', 500)] - The border and thumb color in invalid state.
-/// @prop {Map} error-color-hover [color: ('gray', 300)] - The border and thumb color in invalid state on hover.
+/// @prop {Map} error-color-hover [color: ('gray', 900, .15)] - The border and thumb color in invalid state on hover.
 /// @prop {Color} track-error-color [transparent] - The color of the track in invalid state when the switch is off.
+/// @prop {Map} thumb-on-error-color [contrast-color: ('gray', 900)] - The color of the thumb when the switch is on and invalid.
 /// @prop {List} border-radius-track [(rem(8px), rem(0), rem(8px))] - The border radius used for switch track.
 /// @prop {Map} focus-outline-color [color: ('gray', 900, .15)] - The focus outlined color.
 /// @prop {Map} focus-outline-color-focused [color: ('primary', 400, .5)] - The focus outlined color for focused state.
@@ -618,10 +626,17 @@ $indigo-switch: extend(
         error-color-hover: (
             color: (
                 'gray',
-                300,
+                900,
+                0.15,
             ),
         ),
         track-error-color: transparent,
+        thumb-on-error-color: (
+            contrast-color: (
+                'gray',
+                900,
+            ),
+        ),
         thumb-disabled-color: (
             color: (
                 'gray',

diff --git a/test/_themes.spec.scss b/test/_themes.spec.scss
@@ -9,7 +9,6 @@
 @use '../index' as *;
 
 $schema: (
-    variant: 'material',
     type: 'light',
     background: (
         color: (primary, 400)
@@ -25,6 +24,7 @@ $schema: (
     border-radius: rem(2px),
     brushes: series,
     resting-elevation: 2,
+    theme: material,
     _meta: (
         version: 1,
     ),
@@ -101,7 +101,6 @@ $schema: (
 
         @include it('should output theme maps from schema definitions') {
             $theme: (
-                variant: 'material',
                 type: 'light',
                 background: hsl(from var(--ig-primary-400) h s l / 1),
                 hover-background: hsl(from var(--ig-secondary-700) h s l / .26),
@@ -111,6 +110,7 @@ $schema: (
                 border-radius: .125rem,
                 brushes: var(--chart-brushes),
                 resting-elevation: var(--ig-elevation-2),
+                theme: material,
                 _meta: (
                     version: 1
                 )
@@ -157,6 +157,8 @@ $schema: (
                     @each $key, $value in map.remove($theme, $ignored-keys...) {
                         --#{$key}: var(--#{$name}-#{$key}, #{$value});
                     }
+
+                    --ig-theme: material;
                 }
             }
         }
@@ -201,11 +203,13 @@ $schema: (
                     @each $key, $value in map.remove($theme, $ignored-keys...) {
                         --#{$key}: var(--#{$name}-#{$key}, #{$value});
                     }
+
+                    --ig-theme: test;
                 }
             }
         }
 
-        @include it('should scope theme CSS variables to correctly') {
+        @include it('should scope theme CSS variables correctly') {
             $name: 'igc-avatar';
             $theme: map.merge(digest-schema($schema), (name: $name));
 
@@ -220,6 +224,8 @@ $schema: (
                         @each $key, $value in map.remove($theme, $ignored-keys...) {
                             --#{$key}: var(--#{$name}-#{$key}, #{$value});
                         }
+
+                        --ig-theme: material;
                     }
                 }
             }
@@ -238,6 +244,8 @@ $schema: (
                         @each $key, $value in map.remove($theme, $ignored-keys...) {
                             --#{$key}: var(--#{$name}-#{$key}, #{$value});
                         }
+
+                        --ig-theme: material;
                     }
                 }
             }
@@ -258,6 +266,8 @@ $schema: (
                         @each $key, $value in map.remove($theme, $ignored-keys...) {
                             --#{$key}: var(--#{$name}-#{$key}, #{$value});
                         }
+
+                        --ig-theme: material;
                     }
                 }
             }
@@ -276,6 +286,8 @@ $schema: (
                         @each $key, $value in map.remove($theme, $ignored-keys...) {
                             --#{$key}: var(--#{$name}-#{$key}, #{$value});
                         }
+
+                        --ig-theme: material;
                     }
                 }
             }