Merge branch 'master' into simeonoff/bem-improvements

IgniteUI · Feb 13, 2025 · be15d74 · be15d74
2 parents 1bb9e7c + ac61efa
commit be15d74
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 4 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/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;
                     }
                 }
             }