igniteui-angular 20.0.1 → 20.0.2

package/lib/core/styles/components/radio/_radio-theme.scss

@@ -24,6 +24,7 @@
 /// @param {Color} $hover-color [null] - The border and dot colors on hover.
 /// @param {Color} $fill-color-hover [null] - The checked dot color on hover.
 /// @param {Color} $fill-hover-border-color [null] - The checked border color on hover.
+/// @param {Color} $focus-border-color [null] - The focus border color.
 /// @param {Color} $focus-outline-color [null] - The focus outlined color.
 /// @param {Color} $focus-outline-color-filled [null] - The focus outline color when radio is filled.
 /// @param {Color} $error-color [null] - The label, border and dot color in invalid state.
@@ -46,6 +47,7 @@
     $empty-fill-color: null,
     $fill-color: null,
     $fill-hover-border-color: null,
+    $focus-border-color: null,
     $focus-outline-color: null,
     $focus-outline-color-filled: null,
     $disabled-color: null,
@@ -67,7 +69,53 @@
     }
 
     $theme: digest-schema($radio-schema);
-    $meta: map.get($theme, '_meta');
+    $variant: map.get($theme, '_meta', 'theme');
+
+    @if not($hover-color) and $empty-color {
+        $hover-color: hsl(from var(--empty-color) h s calc(l * 0.9));
+    }
+
+    @if not($fill-color-hover) and $fill-color {
+        $fill-color-hover: hsl(from var(--fill-color) h s calc(l * 0.9));
+    }
+
+    @if $variant != 'bootstrap' {
+        @if not($fill-hover-border-color) and $fill-color-hover {
+            $fill-hover-border-color: var(--fill-color-hover);
+        }
+    }
+
+    @if not($label-color-hover) and $label-color {
+        $label-color-hover: hsl(from var(--label-color) h s calc(l * 0.9));
+    }
+
+    @if not($error-color-hover) and $error-color {
+        $error-color-hover: hsl(from var(--error-color) h s calc(l * 0.9));
+    }
+
+    @if not($focus-outline-color-error) and $error-color {
+        $focus-outline-color-error: hsla(from var(--error-color) h s l / .5);
+    }
+
+    @if $variant == 'bootstrap' {
+        @if not($focus-border-color) and $fill-color {
+            $focus-border-color: var(--fill-color);
+        }
+
+        @if not($focus-outline-color) and $fill-color {
+            $focus-outline-color: hsla(from var(--fill-color) h s l / .5);
+        }
+    }
+
+    @if $variant == 'indigo' {
+        @if not($focus-outline-color) and $empty-color {
+            $focus-outline-color: hsla(from var(--empty-color) h s l / .5);
+        }
+
+        @if not($focus-outline-color-filled) and $fill-color {
+            $focus-outline-color-filled: hsla(from var(--fill-color) h s l / .5);
+        }
+    }
 
     @return extend($theme, (
         name: $name,
@@ -82,16 +130,12 @@
         disabled-fill-color: $disabled-fill-color,
         hover-color: $hover-color,
         fill-color-hover: $fill-color-hover,
+        focus-border-color: $focus-border-color,
         focus-outline-color: $focus-outline-color,
         focus-outline-color-filled: $focus-outline-color-filled,
         error-color: $error-color,
         error-color-hover: $error-color-hover,
         focus-outline-color-error: $focus-outline-color-error,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme'),
-            theme-variant: map.get($schema, '_meta', 'variant')
-        )),
     ));
 }
 
@@ -102,8 +146,8 @@
     @include css-vars($theme);
     @include scale-in-out($start-scale: .9);
 
-    $theme-variant: map.get($theme, '_meta', 'theme-variant');
-    $variant: map.get($theme, '_meta', 'variant');
+    $theme-variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
     $material-theme: $variant == 'material';
     $bootstrap-theme: $variant == 'bootstrap';
     $not-bootstrap-theme: $variant != 'bootstrap';
@@ -462,7 +506,7 @@
                 box-shadow: 0 0 0 rem(4px) var-get($theme, 'focus-outline-color');
 
                 &::after {
-                    border-color: color($color: 'primary', $variant: 200);
+                    border-color: var-get($theme, 'focus-border-color');
                 }
             }
         }
@@ -478,7 +522,7 @@
     %igx-checkbox--focused-hovered {
         @if $variant == 'bootstrap' {
             %radio-composite:after {
-                border-color: color($color: 'primary', $variant: 300);
+                border-color: hsl(from var-get($theme, 'focus-border-color') h calc(s * 1.12) calc(l * 0.82));
             }
         }
     }

package/lib/core/styles/components/ripple/_ripple-theme.scss

@@ -37,7 +37,6 @@
         name: $name,
         selector: $selector,
         color: $color,
-        theme: map.get($schema, '_meta', 'theme'),
     ));
 }
 

package/lib/core/styles/components/scrollbar/scrollbar-theme.scss

@@ -81,7 +81,6 @@
         sb-corner-bg: $sb-corner-bg,
         sb-corner-border-color: $sb-corner-border-color,
         sb-corner-border-size: $sb-corner-border-size,
-        theme: map.get($schema, '_meta', 'theme'),
     ));
 }
 

package/lib/core/styles/components/select/_select-theme.scss

@@ -46,7 +46,39 @@
     }
 
     $theme: digest-schema($select-schema);
-    $meta: map.get($theme, '_meta');
+    $variant: map.get($theme, '_meta', 'theme');
+
+    @if not($toggle-button-foreground) and $toggle-button-background {
+        $toggle-button-foreground: adaptive-contrast(var(--toggle-button-background));
+    }
+
+    @if not($toggle-button-foreground-filled) and $toggle-button-background {
+        $toggle-button-foreground-filled: adaptive-contrast(var(--toggle-button-background));
+    }
+
+    @if $variant == 'material' {
+        @if not($toggle-button-background-focus) and $toggle-button-background {
+            $toggle-button-background-focus: hsl(from var(--toggle-button-background) h s calc(l * 0.9));
+        }
+    } @else {
+        @if not($toggle-button-background-focus) and $toggle-button-background {
+            $toggle-button-background-focus: var(--toggle-button-background);
+        }
+    }
+
+    @if $variant == 'bootstrap' or $variant == 'indigo' {
+        @if not($toggle-button-background-focus--border) and $toggle-button-background {
+            $toggle-button-background-focus--border: var(--toggle-button-background)
+        }
+
+        @if not($toggle-button-foreground-focus) and $toggle-button-background-focus--border {
+            $toggle-button-foreground-focus: adaptive-contrast(var(--toggle-button-background-focus--border));
+        }
+    } @else {
+        @if not($toggle-button-foreground-focus) and $toggle-button-background-focus {
+            $toggle-button-foreground-focus: adaptive-contrast(var(--toggle-button-background-focus));
+        }
+    }
 
     @return extend($theme, (
         name: $name,
@@ -59,10 +91,6 @@
         toggle-button-foreground-disabled: $toggle-button-foreground-disabled,
         toggle-button-foreground-filled: $toggle-button-foreground-filled,
         toggle-button-background-focus--border: $toggle-button-background-focus--border,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
     ));
 }
 
@@ -71,7 +99,7 @@
 /// @param {Map} $theme - The theme used to style the component.
 @mixin select($theme) {
     @include css-vars($theme);
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
 
     %igx-select {
         position: relative;
@@ -127,7 +155,7 @@
     }
 
     .igx-input-group.igx-input-group--focused:not(.igx-input-group--box) {
-        @if $variant != 'fluent' {
+        @if $variant != 'fluent' and $variant != 'material' {
             %igx-select__toggle-button {
                 background: var-get($theme, 'toggle-button-background-focus--border');
             }

package/lib/core/styles/components/slider/_slider-theme.scss

@@ -71,10 +71,99 @@
     }
 
     $theme: digest-schema($slider-schema);
-    $meta: map.get($theme, '_meta');
+    $variant: map.get($theme, '_meta', 'theme');
+
+    @if $variant == 'fluent' or $variant == 'indigo' {
+        @if not($thumb-border-color) and $track-color {
+            $thumb-border-color: var(--track-color);
+        }
+
+        @if not($track-color) and $thumb-border-color {
+            $track-color: var(--thumb-border-color);
+        }
+
+        @if not($thumb-border-hover-color) and $thumb-border-color {
+            $thumb-border-hover-color: hsl(from var(--thumb-border-color) h s calc(l * 1.1));
+        }
+
+        @if $variant == 'fluent' {
+            @if not($thumb-focus-color) and $thumb-border-color {
+                $thumb-focus-color: hsl(from var(--thumb-border-color) h s calc(l * 1.2));
+            }
+        } @else {
+            @if not($thumb-focus-color) and $thumb-border-color {
+                $thumb-focus-color: hsla(from var(--thumb-border-color) h s l / 0.3);
+            }
+        }
+    }
+
+    @if $variant == 'material' {
+        @if not($thumb-color) and $track-color {
+            $thumb-color: var(--track-color);
+        }
+
+        @if not($track-color) and $thumb-color {
+            $track-color: var(--thumb-color);
+        }
+
+        @if not($base-track-color) and $track-color {
+            $base-track-color: hsla(from var(--track-color) h s l / 0.4);
+        }
+    }
+
+    @if $variant == 'bootstrap' {
+        @if not($thumb-border-color) and $thumb-color {
+            $thumb-border-color: var(--thumb-color);
+        }
+
+        @if not($thumb-focus-color) and $thumb-color {
+            $thumb-focus-color: hsla(from var(--thumb-color) h s l / 0.5);
+        }
+    }
+
+    @if not($track-hover-color) and $track-color {
+        $track-hover-color: hsl(from var(--track-color) h s calc(l * 1.1));
+    }
+
+    @if $variant != 'bootstrap' {
+        @if not($label-background-color) and $track-color {
+            $label-background-color: var(--track-color);
+        }
+    } @else {
+        @if not($label-background-color) and $thumb-color {
+            $label-background-color: var(--thumb-color);
+        }
+    }
+
 
     @if not($label-text-color) and $label-background-color {
-        $label-text-color: text-contrast($label-background-color);
+        $label-text-color: adaptive-contrast($label-background-color);
+    }
+
+    @if $variant != 'indigo' {
+        @if not($base-track-hover-color) and $base-track-color {
+            $base-track-hover-color: var(--base-track-color);
+        }
+    } @else {
+        @if not($base-track-hover-color) and $base-track-color {
+            $base-track-hover-color: hsl(from var(--base-track-color) h s calc(l * 0.8));
+        }
+    }
+
+    @if not($disabled-base-track-color) and $base-track-color {
+        $disabled-base-track-color: hsla(from var(--base-track-color) h s l / 0.5);
+    }
+
+    @if not($disabled-fill-track-color) and $track-color {
+        $disabled-fill-track-color: hsla(from var(--track-color) h s l / 0.5);
+    }
+
+    @if not($disabled-thumb-color) and $thumb-color {
+        $disabled-thumb-color: hsl(from var(--thumb-color) h calc(s * 0.5) calc(l * 1.2));
+    }
+
+    @if not($thumb-disabled-border-color) and $thumb-border-color {
+        $thumb-disabled-border-color: hsla(from var(--thumb-border-color) h s l / 0.5);
     }
 
     @return extend($theme, (
@@ -98,10 +187,6 @@
         disabled-fill-track-color: $disabled-fill-track-color,
         tick-label-color: $tick-label-color,
         tick-color: $tick-color,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
     ));
 }
 
@@ -111,7 +196,7 @@
 @mixin slider($theme) {
     @include css-vars($theme);
 
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
 
     $slider-height: rem(48px);
     $ripple-size: rem(40px);

package/lib/core/styles/components/snackbar/_snackbar-theme.scss

@@ -42,14 +42,13 @@
     }
 
     $theme: digest-schema($snackbar-schema);
-    $meta: map.get($theme, '_meta');
 
     @if not($button-color) and $background {
-        $button-color: text-contrast($background);
+        $button-color: adaptive-contrast(var(--background));
     }
 
     @if not($text-color) and $background {
-        $text-color: text-contrast($background);
+        $text-color: adaptive-contrast(var(--background));
     }
 
     @if not($shadow) {
@@ -64,10 +63,6 @@
         text-color: $text-color,
         button-color: $button-color,
         shadow: $shadow,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
     ));
 }
 
@@ -78,7 +73,7 @@
     @include css-vars($theme);
     @include fade-in();
 
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
 
     $snackbar-min-height: rem(48px);
     $snackbar-padding: rem(7px) rem(24px);

package/lib/core/styles/components/splitter/_splitter-theme.scss

@@ -42,16 +42,27 @@
     }
 
     $theme: digest-schema($splitter-schema);
-    $meta: map.get($theme, '_meta');
+    $variant: map.get($theme, '_meta', 'theme');
 
     @if not($handle-color) and $bar-color {
-        $handle-color: text-contrast($bar-color);
+        $handle-color: adaptive-contrast(var(--bar-color));
     }
 
     @if not($expander-color) and $bar-color {
-        $expander-color: text-contrast($bar-color);
+        $expander-color: adaptive-contrast(var(--bar-color));
     }
 
+    @if $variant != 'indigo' {
+        @if not($focus-color) and $bar-color {
+            $focus-color: hsl(from var(--bar-color) h s calc(l * 0.7));
+        }
+    } @else {
+        @if not($focus-color) and $bar-color {
+            $focus-color: var(--bar-color);
+        }
+    }
+
+
     @return extend($theme, (
         name: $name,
         bar-color: $bar-color,
@@ -60,10 +71,6 @@
         border-radius: $border-radius,
         focus-color: $focus-color,
         size: $size,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
     ));
 }
 
@@ -77,7 +84,7 @@
     $debug-hitbox: false;
     $hitbox-debug-color: rgba(coral, .24);
 
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
 
     //splitter-size + borders
     $splitter-size: unitless(map.get($theme, 'size')) + 2;

package/lib/core/styles/components/stepper/_stepper-theme.scss

@@ -186,50 +186,222 @@
     }
 
     $theme: digest-schema($stepper-schema);
-    $meta: map.get($theme, '_meta');
 
-    @if not($indicator-background) and $step-background {
-        $indicator-background: text-contrast($step-background);
+    //default step
+    @if not($step-hover-background) and $step-background {
+        $step-hover-background: hsl(from var(--step-background) h s calc(l * 0.8));
     }
 
-    @if not($indicator-color) and $indicator-background {
-        $indicator-color: text-contrast($indicator-background);
+    @if not($step-focus-background) and $step-background {
+        $step-focus-background: hsl(from var(--step-background) h s calc(l * 0.9));
     }
 
-    @if not($complete-indicator-color) and $complete-indicator-background {
-        $complete-indicator-color: text-contrast($complete-indicator-background);
+    @if not($indicator-background) and $step-background {
+        $indicator-background: hsla(from adaptive-contrast(var(--step-background)) h s l / .6);
     }
 
-    @if not($invalid-indicator-color) and $invalid-indicator-background {
-        $invalid-indicator-color: text-contrast($invalid-indicator-background);
+    @if not($indicator-outline) and $indicator-background {
+        $indicator-outline: var(--indicator-background);
     }
 
-    @if not($current-indicator-color) and $current-indicator-background {
-        $current-indicator-color: text-contrast($current-indicator-background);
+    @if not($indicator-color) and $indicator-background {
+        $indicator-color: adaptive-contrast(var(--indicator-background));
     }
 
     @if not($title-color) and $step-background {
-        $title-color: text-contrast($step-background);
+        $title-color: adaptive-contrast(var(--step-background));
     }
 
     @if not($subtitle-color) and $step-background {
-        $subtitle-color: text-contrast($step-background);
+        $subtitle-color: adaptive-contrast(var(--step-background));
     }
 
     @if not($title-hover-color) and $step-hover-background {
-        $title-hover-color: text-contrast($step-hover-background);
+        $title-hover-color: adaptive-contrast(var(--step-hover-background));
     }
 
     @if not($subtitle-hover-color) and $step-hover-background {
-        $subtitle-hover-color: text-contrast($step-hover-background);
+        $subtitle-hover-color: adaptive-contrast(var(--step-hover-background));
     }
 
     @if not($title-focus-color) and $step-focus-background {
-        $title-focus-color: text-contrast($step-focus-background);
+        $title-focus-color: adaptive-contrast(var(--step-focus-background));
     }
 
     @if not($subtitle-focus-color) and $step-focus-background {
-        $subtitle-focus-color: text-contrast($step-focus-background);
+        $subtitle-focus-color: adaptive-contrast(var(--step-focus-background));
+    }
+
+    //current step
+    @if not($current-step-background) and $step-background {
+        $current-step-background: var(--step-background);
+    }
+
+    @if not($current-step-hover-background) and $current-step-background {
+        $current-step-hover-background: hsl(from var(--current-step-background) h s calc(l * 0.8));
+    }
+
+    @if not($current-step-focus-background) and $current-step-background {
+        $current-step-focus-background: hsl(from var(--current-step-background) h s calc(l * 0.9));
+    }
+
+    @if not($current-indicator-background) and $current-step-background {
+        $current-indicator-background: hsl(from var(--current-step-background) h s calc(l * 0.6));
+    }
+
+    @if not($current-indicator-outline) and $current-indicator-background {
+        $current-indicator-outline: var(--current-indicator-background);
+    }
+
+    @if not($current-indicator-color) and $current-indicator-background {
+        $current-indicator-color: adaptive-contrast(var(--current-indicator-background));
+    }
+
+    @if not($current-title-color) and $current-step-background {
+        $current-title-color: adaptive-contrast(var(--current-step-background));
+    }
+
+    @if not($current-subtitle-color) and $current-step-background {
+        $current-subtitle-color: adaptive-contrast(var(--current-step-background));
+    }
+
+    @if not($current-title-hover-color) and $current-step-hover-background {
+        $current-title-hover-color: adaptive-contrast(var(--current-step-hover-background));
+    }
+
+    @if not($current-subtitle-hover-color) and $current-step-hover-background {
+        $current-subtitle-hover-color: adaptive-contrast(var(--current-step-hover-background));
+    }
+
+    @if not($current-title-focus-color) and $current-step-focus-background {
+        $current-title-focus-color: adaptive-contrast(var(--current-step-focus-background));
+    }
+
+    @if not($current-subtitle-focus-color) and $current-step-focus-background {
+        $current-subtitle-focus-color: adaptive-contrast(var(--current-step-focus-background));
+    }
+
+    //invalid step
+    @if not($invalid-step-background) and $step-background {
+        $invalid-step-background: var(--step-background);
+    }
+
+    @if not($invalid-step-hover-background) and $invalid-step-background {
+        $invalid-step-hover-background: hsl(from var(--invalid-step-background) h s calc(l * 0.8));
+    }
+
+    @if not($invalid-step-focus-background) and $invalid-step-background {
+        $invalid-step-focus-background: hsl(from var(--invalid-step-background) h s calc(l * 0.9));
+    }
+
+    @if not($invalid-indicator-background) and not($step-background) and $invalid-step-background {
+        $invalid-indicator-background: adaptive-contrast(var(--invalid-step-background));
+    }
+
+    @if not($invalid-indicator-outline) and $invalid-indicator-background {
+        $invalid-indicator-outline: var(--invalid-indicator-background);
+    }
+
+    @if not($invalid-indicator-color) and not($step-background) and $invalid-indicator-background {
+        $invalid-indicator-color: adaptive-contrast(var(--invalid-indicator-background));
+    }
+
+    @if not($invalid-title-color) and $invalid-indicator-background {
+        $invalid-title-color: var(--invalid-indicator-background);
+    }
+
+    @if not($invalid-subtitle-color) and $invalid-indicator-background {
+        $invalid-subtitle-color: var(--invalid-indicator-background);
+    }
+
+    @if not($invalid-title-hover-color) and $invalid-indicator-background {
+        $invalid-title-hover-color: var(--invalid-indicator-background);
+    }
+
+    @if not($invalid-subtitle-hover-color) and $invalid-indicator-background {
+        $invalid-subtitle-hover-color: var(--invalid-indicator-background);
+    }
+
+    @if not($invalid-title-focus-color) and $invalid-indicator-background {
+        $invalid-title-focus-color: var(--invalid-indicator-background);
+    }
+
+    @if not($invalid-subtitle-focus-color) and $invalid-indicator-background {
+        $invalid-subtitle-focus-color: var(--invalid-indicator-background);
+    }
+
+    //completed step
+    @if not($complete-step-background) and $step-background {
+        $complete-step-background: var(--step-background);
+    }
+
+    @if not($complete-step-hover-background) and $complete-step-background {
+        $complete-step-hover-background: hsl(from var(--complete-step-background) h s calc(l * 0.8));
+    }
+
+    @if not($complete-step-focus-background) and $complete-step-background {
+        $complete-step-focus-background: hsl(from var(--complete-step-background) h s calc(l * 0.9));
+    }
+
+    @if not($complete-indicator-background) and $complete-step-background {
+        $complete-indicator-background: adaptive-contrast(var(--complete-step-background));
+    }
+
+    @if not($complete-indicator-color) and $complete-indicator-background {
+        $complete-indicator-color: adaptive-contrast(var(--complete-indicator-background));
+    }
+
+    @if not($complete-title-color) and $complete-step-background {
+        $complete-title-color: adaptive-contrast(var(--complete-step-background));
+    }
+
+    @if not($complete-subtitle-color) and $complete-step-background {
+        $complete-subtitle-color: adaptive-contrast(var(--complete-step-background));
+    }
+
+    @if not($complete-title-hover-color) and $complete-step-hover-background {
+        $complete-title-hover-color: adaptive-contrast(var(--complete-step-hover-background));
+    }
+
+    @if not($complete-subtitle-hover-color) and $complete-step-hover-background {
+        $complete-subtitle-hover-color: adaptive-contrast(var(--complete-step-hover-background));
+    }
+
+    @if not($complete-title-focus-color) and $complete-step-focus-background {
+        $complete-title-focus-color: adaptive-contrast(var(--complete-step-focus-background));
+    }
+
+    @if not($complete-subtitle-focus-color) and $complete-step-focus-background {
+        $complete-subtitle-focus-color: adaptive-contrast(var(--complete-step-focus-background));
+    }
+
+    //disabled step
+    @if not($disabled-indicator-background) and $step-background {
+        $disabled-indicator-background: hsla(from (adaptive-contrast(var(--step-background)) h s l / 0.5));
+    }
+
+    @if not($disabled-indicator-color) and $disabled-indicator-background {
+        $disabled-indicator-color: hsla(from (adaptive-contrast(var(--disabled-indicator-background)) h s l / 0.5));
+    }
+
+    @if not($disabled-indicator-outline) and $disabled-indicator-background {
+        $disabled-indicator-outline: var(--disabled-indicator-background);
+    }
+
+    @if not($disabled-title-color) and $step-background {
+        $disabled-title-color: hsla(from (adaptive-contrast(var(--step-background)) h s l / 0.3));
+    }
+
+    @if not($disabled-subtitle-color) and $step-background {
+        $disabled-subtitle-color: hsla(from (adaptive-contrast(var(--step-background)) h s l / 0.3));
+    }
+
+    @if not($step-separator-color) and $step-background {
+        $step-separator-color: var(--step-background);
+    }
+
+    @if not($step-separator-color) and $indicator-background {
+        $step-separator-color: var(--indicator-background);
     }
 
     @if not($border-radius-indicator) {
@@ -318,10 +490,6 @@
         // Border-radius
         border-radius-indicator: $border-radius-indicator,
         border-radius-step-header: $border-radius-step-header,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
     ));
 }
 
@@ -331,7 +499,7 @@
 @mixin stepper($theme) {
     @include css-vars($theme);
 
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
 
     $indicator-size: map.get((
         'material': rem(24px),