igniteui-theming 25.0.2 → 25.0.3

package/json/components/themes.json

@@ -2229,6 +2229,11 @@
         "type": "Color",
         "description": "The disabled border and fill colors."
       },
+      {
+        "name": "disabled-fill-color",
+        "type": "Color",
+        "description": "The disabled border and fill colors in checked state. Auto-derived from disabled-color (material/fluent) or disabled-indeterminate-color (bootstrap/indigo)."
+      },
       {
         "name": "disabled-tick-color",
         "type": "Color",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "25.0.2",
+  "version": "25.0.3",
   "description": "A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.",
   "main": "index.js",
   "type": "module",

package/sass/bem/_index.scss

@@ -127,8 +127,7 @@ $_bem-mod-cache: () !default;
 /// Checks if the element separator string is part of the passed string.
 /// @access private
 /// @param {String} $x - The string to check.
-/// @returns {number|null} Will return the index of the occurance,
-/// or null if the element separator name is not part of the passed string.
+/// @returns {number|null} Will return the index of the occurance, or null if the element is not part of the string.
 @function bem--contains-elem($x) {
     // if you set the separators to common strings, this could fail
     @return string.index($x, $bem--sep-elem);
@@ -137,8 +136,7 @@ $_bem-mod-cache: () !default;
 /// Checks if the modifier separator string is part of the passed string.
 /// @access private
 /// @param {String} $x - The string to check.
-/// @returns {number|null} Will return the index of the occurance,
-/// or null if the modifier separator string is not part of the passed string.
+/// @returns {number|null} Will return the index of the occurance, or null if the modifier is not part of the string.
 @function bem--contains-mod($x) {
     // if you set the separators to common strings, this could fail
     @return string.index($x, $bem--sep-mod);
@@ -147,8 +145,7 @@ $_bem-mod-cache: () !default;
 /// Checks if the passed selector string contains a colon.
 /// @access private
 /// @param {String} $x - The string to check for colons.
-/// @returns {number|null} Will return the index of the occurance,
-/// or null if the string does not contain any colons.
+/// @returns {number|null} Will return the index of the occurance, or null if the string does not contain any colons.
 @function bem--contains-pseudo($x) {
     @return string.index($x, ':');
 }
@@ -213,7 +210,7 @@ $_bem-mod-cache: () !default;
 /// @param {String|Map} $mod - Optional modifier
 /// @param {String} $first - Optional first selector for nesting
 /// @return {String} The generated selector
-/// @throw {Error} If invalid parameter types are provided
+/// @throw If invalid parameter types are provided
 @function bem--generate-elem-selector($block, $elem, $mod, $first: null) {
     @if $first and not meta.type-of($first) == 'string' {
         @error 'First selector must be a string, got #{meta.type-of($first)}';
@@ -229,8 +226,7 @@ $_bem-mod-cache: () !default;
 /// Generates a full BEM selector.
 /// @access public
 /// @param {String} $block - A string block name. Required.
-/// @param {String|List} $elem [null] - A sub-element name. If `$mod` is not present, it is
-/// joined with $block. If $mod is present, it is nested under `$block--$mod`.
+/// @param {String|List} $elem [null] - A sub-element name. If `$mod` is not present, it is joined with $block. If $mod is present, it is nested under `$block--$mod`.
 /// @param {String|Map} $mod [null] - A block modifier.
 /// @param {List} $mods [null] - A list of block modifiers.
 ///
@@ -241,13 +237,13 @@ $_bem-mod-cache: () !default;
 ///   $selector: bem-selector(block, $elem: elem); // returns .block__elem
 ///
 /// @example scss - Include block, element, and element modifier
-///   $selector: bem-selector(block, $elem: (elem, mod); // returns .block__elem--mod
+///   $selector: bem-selector(block, $elem: (elem, mod)); // returns .block__elem--mod
 ///
 /// @example scss - Include block and block modifier
-///   $selector: bem-selector(block, $mod: mod) // returns .block--mod
+///   $selector: bem-selector(block, $mod: mod); // returns .block--mod
 ///
 /// @example scss - Include block and multiple block modifiers
-///   $selector: bem-selector(block, $mods: (mod-1, mod-2)) // returns .block--mod-1.block--mod-2
+///   $selector: bem-selector(block, $mods: (mod-1, mod-2)); // returns .block--mod-1.block--mod-2
 ///
 /// @example scss - Include block modifier followed by block sub-element
 ///   $selector: bem-selector(block, $m: mod, $e: elem); // returns .block--mod .block__elem
@@ -332,8 +328,8 @@ $_bem-mod-cache: () !default;
 /// @param {String} $mod [null] - The modifier name. Optional.
 /// @return {String} The BEM element selector string.
 /// @example scss
-///   $selector: elem('button', 'icon') // returns '.button__icon'
-///   $selector: elem('button', 'icon', 'big') // returns '.button__icon--big'
+///   $selector: elem('button', 'icon'); // returns '.button__icon'
+///   $selector: elem('button', 'icon', 'big'); // returns '.button__icon--big'
 @function elem($block, $elem, $mod: null) {
     @if not meta.type-of($block) == 'string' {
         @error 'Block must be a string, got #{meta.type-of($block)}';
@@ -360,8 +356,8 @@ $_bem-mod-cache: () !default;
 /// @param {String} $mod - The modifier name.
 /// @return {String} The BEM modifier selector string.
 /// @example scss
-///   $selector: mod('button', 'primary') // returns '.button--primary'
-///   $selector: mod('card', 'outlined') // returns '.card--outlined'
+///   $selector: mod('button', 'primary'); // returns '.button--primary'
+///   $selector: mod('card', 'outlined'); // returns '.card--outlined'
 @function mod($block, $mod) {
     @return bem-selector($block, $m: $mod);
 }
@@ -571,8 +567,7 @@ $_bem-mod-cache: () !default;
 /// Generates a full BEM rule.
 /// @access public
 /// @param {String} $block - A string block name. Required.
-/// @param {String|List} $elem [null] - A sub-element name. If `$mod` is not present, it is
-/// joined with $block. If $mod is present, it is nested under `$block--$mod`.
+/// @param {String|List} $elem [null] - A sub-element name. If `$mod` is not present, it is joined with $block. If $mod is present, it is nested under `$block--$mod`.
 /// @param {String|Map} $mod [null] - A block modifier.
 /// @param {String|Map} $mods [null] - A list of block modifiers.
 ///

package/sass/color/_functions.scss

@@ -276,7 +276,6 @@ $_enhanced-accessibility: false;
 ///      background: color($color: 'primary', $variant: 200);
 ///      color: contrast-color($color: 'primary', $variant: 200);
 ///    }
-///
 @function contrast-color($palette: null, $color: primary, $variant: 500, $opacity: null) {
     @return color($palette, $color, #{$variant}-contrast, $opacity);
 }
@@ -285,8 +284,6 @@ $_enhanced-accessibility: false;
 /// @access public
 /// @group Color
 /// @param {Color} $color - The base color used in the calculation.
-/// @returns {string} Returns a relative HSL color where the lightness is adjusted
-/// based on the specified contrast level, resulting in either black or white.
 ///
 /// @example scss
 ///   .my-component {
@@ -294,6 +291,7 @@ $_enhanced-accessibility: false;
 ///      background: var(--bg);
 ///      color: adaptive-contrast(var(--bg)); // hsl(from color(from var(--bg) var(--y-contrast)) h 0 l)
 ///    }
+/// @returns {string} Returns a relative HSL color where the lightness is adjusted
 @function adaptive-contrast($color) {
     $fn: meta.get-function('color', $css: true);
 
@@ -305,20 +303,17 @@ $_enhanced-accessibility: false;
 /// @access public
 /// @group Color
 /// @param {Color} $background - The background color used to return a contrast/forground color for.
-/// @param {Color | List<Color>} $foreground [#fff] - A list of foreground colors
-/// that can be used with the provided background.
+/// @param {Color | List } $foreground [#fff] - A list of foreground colors that can be used with the provided background.
 /// @param {String} $contrast [AAA] - The contrast level according to WCAG 2.0 standards.
-/// @require {function} contrast
-/// @returns {Color} Returns either white, black, or the provided foreground
-/// color if it meets the required contrast level.
-///
 /// @example scss
 ///   .my-component {
 ///      background: #09f;
 ///      color: text-contrast(#09f);
 ///    }
 ///
+/// @require {function} contrast
 /// @see {function} adaptive-contrast
+/// @returns {Color} Returns either white, black, or the provided foreground color if it meets the required contrast level.
 /// @link https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html WCAG 2.0 Contrast
 @function text-contrast($background, $foreground: white, $contrast: 'AAA') {
     @if meta.type-of($foreground) != 'list' and meta.type-of($background) != 'color' {

package/sass/color/_mixins.scss

@@ -13,8 +13,8 @@
 // Tracks added CSS variables for color shades
 $_added: () !default;
 
-// Generates CSS variables for a shade color
-// @access private
+/// Generates CSS variables for a shade color
+/// @access private
 @mixin _shade($color, $shade, $value, $contrast) {
     $_shade: meta.type-of($shade) == 'string';
     $_hsl: if($_shade, string.index($shade, 'hsl'), false);

package/sass/themes/_mixins.scss

@@ -88,8 +88,12 @@ $ignored-keys: ('name', 'palette', 'variant', 'selector', 'type', 'theme', 'typo
 /// @param {Map} $theme - The component theme used for generating CSS variables.
 /// @param {String} $name [null] - Deprecated. This parameter is ignored.
 /// @param {Map} $ignored [$ignored-keys] - A list of ignored keywords to be excluded when generating CSS variables.
-/// @example scss Convert theme colors to CSS variables.
-///   $theme: digest-schema((background: color(primary, 500), foreground: contrast-color(color, 500));
+/// @example scss - Convert theme colors to CSS variables.
+///   $theme: digest-schema((
+///     background: color(primary, '500'),
+///     foreground: contrast-color(color, '500')
+///   ));
+///
 ///   :root {
 ///     @include css-vars-from-theme($theme);
 ///   }
@@ -102,14 +106,17 @@ $ignored-keys: ('name', 'palette', 'variant', 'selector', 'type', 'theme', 'typo
 
     $t: map.get($theme, '_meta', 'theme');
     $v: map.get($theme, '_meta', 'variant');
+    $p: map.get($theme, 'prefix');
     $vp: config.variable-prefix();
 
     @each $key, $value in map.remove($theme, $ignored...) {
         @if _is-emittable($key, $value) {
+            $local: if($p, '#{$p}-#{$key}', $key);
+
             @if $vp == 'ig' {
-                --#{$key}: var(--ig-#{$n}-#{$key}, #{$value});
+                --#{$local}: var(--ig-#{$n}-#{$key}, #{$value});
             } @else {
-                --#{$key}: var(--#{$vp}-#{$n}-#{$key}, var(--ig-#{$n}-#{$key}, #{$value}));
+                --#{$local}: var(--#{$vp}-#{$n}-#{$key}, var(--ig-#{$n}-#{$key}, #{$value}));
             }
         }
     }
@@ -237,7 +244,7 @@ $ignored-keys: ('name', 'palette', 'variant', 'selector', 'type', 'theme', 'typo
 /// @param {map} $scope [null] - The CSS variables scope to be used. (optional)
 /// @requires {mixin} tokens
 /// @example scss - Convert grid theme colors to css variables
-///   $my-grid-theme grid-theme(
+///   $my-grid-theme: grid-theme(
 ///     $header-background: red,
 ///     $content-background: #222
 ///   );

package/sass/themes/components/checkbox/_checkbox-theme.scss

@@ -35,6 +35,7 @@
 /// @param {Color} $tick-color-hover [null] - The checked mark color on hover.
 /// @param {Number} $tick-width [null] - The checked mark width.
 /// @param {Color} $disabled-color [null] - The disabled border and fill colors.
+/// @param {Color} $disabled-fill-color [null] - The disabled border and fill colors in checked state. Auto-derived from disabled-color (material/fluent) or disabled-indeterminate-color (bootstrap/indigo).
 /// @param {Color} $disabled-tick-color [null] - The checked mark color in disabled state.
 /// @param {Color} $disabled-indeterminate-color [null] - The disabled border and fill colors in indeterminate state. Auto-derived from fill-color.
 /// @param {Color} $disabled-color-label [null] - The disabled label color.
@@ -69,6 +70,7 @@
     $tick-color-hover: null,
     $tick-width: null,
     $disabled-color: null,
+    $disabled-fill-color: null,
     $disabled-tick-color: null,
     $disabled-indeterminate-color: null,
     $disabled-color-label: null,
@@ -116,6 +118,14 @@
         $disabled-indeterminate-color: hsl(from var(--fill-color) h s l / 0.5);
     }
 
+    @if not($disabled-fill-color) and $fill-color {
+        $disabled-fill-color: hsl(from var(--fill-color) h s l / 0.5);
+    }
+
+    @if not($disabled-color-label) and $label-color {
+        $disabled-color-label: hsl(from var(--label-color) h s l / 0.5);
+    }
+
     @if not($error-color-hover) and $error-color {
         $error-color-hover: dynamic-shade(var(--error-color));
     }
@@ -155,6 +165,7 @@
             tick-color-hover: $tick-color-hover,
             tick-width: $tick-width,
             disabled-color: $disabled-color,
+            disabled-fill-color: $disabled-fill-color,
             disabled-tick-color: $disabled-tick-color,
             disabled-indeterminate-color: $disabled-indeterminate-color,
             disabled-color-label: $disabled-color-label,

package/sass/themes/schemas/components/dark/_checkbox.scss

@@ -50,6 +50,7 @@ $dark-material-checkbox: extend(
 /// @prop {Map} fill-color [color: ('primary', 300)] - The checked border and fill colors.
 /// @prop {Map} fill-color-hover [color: ('primary', 100)] - The checked border and fill colors on hover.
 /// @prop {Map} disabled-color [color: ('gray', 100)] - The disabled border and fill colors.
+/// @prop {Map} disabled-fill-color [color: ('gray', 100)] - The disabled border and fill colors in checked state.
 /// @prop {Map} disabled-color-label [color: ('gray', 300)] - The disabled color of the label.
 /// @prop {Map} error-color [color: ('error', 100)] - The border and fill colors in invalid state.
 /// @prop {Map} error-color-hover [color: ('error', 50)] - The border and fill colors in invalid state on hover.
@@ -89,6 +90,12 @@ $dark-fluent-checkbox: extend(
                 100,
             ),
         ),
+        disabled-fill-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
         disabled-color-label: (
             color: (
                 'gray',

package/sass/themes/schemas/components/dark/_dock-manager.scss

@@ -26,7 +26,7 @@
 /// @prop {Color} tab-background [color: ('gray', 100, .3)] - Sets the background color for tabs.
 /// @prop {Color} tab-background-active [color: ('gray', 100, .3)] - Sets the background color for active tabs.
 /// @prop {Color} tab-border-color-active [color: ('gray', 100)] - Sets the border color for active tabs.
-/// @prop {Color} button-text [contrast-color: 'surface'] - Sets the button text color.
+/// @prop {Color} button-component-text [contrast-color: 'surface'] - Sets the button text color.
 /// @prop {Color} flyout-shadow-color [color: ('gray', 50, .3)] - Sets the flyout shadow color.
 /// @prop {Color} drop-shadow-background [color: ('primary', 900, .3)] - Sets the drop-shadow background color.
 /// @prop {Color} splitter-background [color: ('gray', 100)] - Sets the background color for the splitters.
@@ -140,7 +140,7 @@ $dark-base-dock-manager: (
         ),
     ),
 
-    button-text: (
+    button-component-text: (
         contrast-color: 'surface',
     ),
 
@@ -282,7 +282,7 @@ $dark-bootstrap-dock-manager: extend(
 
 /// Generates a dark indigo dock-manager schema.
 /// @type Map
-/// @prop {Color} button-text [color: ('primary', 200)] - Sets the button text color.
+/// @prop {Color} button-component-text [color: ('primary', 200)] - Sets the button text color.
 /// @prop {Color} joystick-background [color: ('surface')] - Sets the background color of the joystick.
 /// @prop {Color} joystick-background-active [color: ('primary')] - Sets the background color of the joysticks.
 /// @prop {Color} joystick-border-color [color: ('gray', 100)] - Sets the border color of the joystick.
@@ -297,7 +297,7 @@ $dark-indigo-dock-manager: extend(
     $indigo-dock-manager,
     $dark-base-dock-manager,
     (
-        button-text: (
+        button-component-text: (
             color: (
                 'primary',
                 200,

package/sass/themes/schemas/components/light/_checkbox.scss

@@ -20,8 +20,8 @@
 /// @prop {Color} focus-outline-color-focused [transparent] - The focus outlined color for focused state.
 /// @prop {Color} focus-outline-color-error [transparent] - The focus outlined color for focused invalid state.
 /// @prop {Map} disabled-color [color: ('gray', 400)] - The disabled border and fill colors.
+/// @prop {Map} disabled-fill-color [color: ('gray', 400)] - The disabled border and fill colors in checked state.
 /// @prop {Map} disabled-tick-color [color: ('gray', 50)] - The checked mark color in disabled state.
-/// @prop {Map} disabled-indeterminate-color [color: ('secondary', 100)] - The disabled border and fill colors in indeterminate state.
 /// @prop {Map} disabled-color-label [color: ('gray', 500)] - The disabled color of the label.
 /// @prop {Map} error-color [color: ('error', 500)] - The border and fill colors in invalid state.
 /// @prop {List} border-radius [(rem(2px), rem(0), rem(10px))] - The border radius used for checkbox.
@@ -62,16 +62,16 @@ $light-checkbox: (
             400,
         ),
     ),
-    disabled-tick-color: (
+    disabled-fill-color: (
         color: (
             'gray',
-            50,
+            400,
         ),
     ),
-    disabled-indeterminate-color: (
+    disabled-tick-color: (
         color: (
-            'secondary',
-            100,
+            'gray',
+            50,
         ),
     ),
     disabled-color-label: (
@@ -121,6 +121,7 @@ $light-checkbox: (
 /// @prop {Color} focus-outline-color [transparent] - The focus outlined color.
 /// @prop {Map} focus-border-color [color: ('gray', 600)] - The focus border color.
 /// @prop {Map} error-color [color: ('error', 800)] - The border and fill colors in invalid state.
+/// @prop {Map} disabled-indeterminate-color [color: ('secondary', 100)] - The disabled border and fill colors in indeterminate state.
 /// @prop {Map} error-color-hover [color: ('error', 800)] - The border and fill colors in invalid state on hover.
 /// @prop {Map} typography [label: (value: 'subtitle-1')] - The typography styles used for the component.
 /// @requires $light-checkbox
@@ -185,6 +186,13 @@ $material-checkbox: extend(
             ),
         ),
 
+        disabled-indeterminate-color: (
+            color: (
+                'secondary',
+                100,
+            ),
+        ),
+
         typography: (
             label: (
                 value: 'subtitle-1',
@@ -206,6 +214,7 @@ $material-checkbox: extend(
 /// @prop {Map} fill-color-hover [color: ('primary', 800)] - The checked border and fill colors on hover.
 /// @prop {Map} focus-outline-color [color: ('gray', 700)] - The focus outlined color.
 /// @prop {Map} focus-border-color [color: ('gray', 900)] - The focus border color.
+/// @prop {Map} disabled-indeterminate-color [color: ('gray', 400)] - The disabled border and fill colors in indeterminate state.
 /// @prop {Map} error-color-hover [color: ('error', 700)] - The border and fill colors in invalid state on hover.
 /// @prop {List} border-radius-ripple [(rem(2px), rem(0), rem(24px))] - The border radius used for checkbox ripple.
 /// @requires $light-checkbox
@@ -249,6 +258,12 @@ $fluent-checkbox: extend(
                 800,
             ),
         ),
+        disabled-indeterminate-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
         error-color-hover: (
             color: (
                 'error',
@@ -277,6 +292,7 @@ $fluent-checkbox: extend(
 /// @prop {Map} empty-fill-color [contrast-color: ('gray', 900)] - The unchecked fill color.
 /// @prop {Map} fill-color-hover [color: ('primary', 600)] - The checked border and fill colors on hover.
 /// @prop {Map} disabled-color [color: ('gray', 300)] - The disabled border color.
+/// @prop {Map} disabled-fill-color [color: ('primary', 200)] - The disabled border and fill colors in checked state.
 /// @prop {Map} disabled-tick-color [contrast-color: ('primary', 900)] - The checked mark color in disabled state.
 /// @prop {Map} disabled-indeterminate-color [color: ('primary', 200)] - The disabled border and fill colors.
 /// @prop {Map} focus-border-color [color: ('primary', 200)] - The focus border color.
@@ -352,6 +368,12 @@ $bootstrap-checkbox: extend(
                 300,
             ),
         ),
+        disabled-fill-color: (
+            color: (
+                'primary',
+                200,
+            ),
+        ),
         disabled-tick-color: (
             contrast-color: (
                 'primary',
@@ -405,6 +427,7 @@ $bootstrap-checkbox: extend(
 /// @prop {Map} empty-color-hover [color: ('gray', 600)] - The unchecked border color on hover.
 /// @prop {Map} disabled-color [color: ('gray', 900, .15)] - The disabled border and fill colors.
 /// @prop {Map} disabled-tick-color [contrast-color: ('primary', 500, .4)] - The checked mark color in disabled state.
+/// @prop {Map} disabled-fill-color [color: ('primary', 400, .5)] - The disabled border and fill colors in checked state.
 /// @prop {Map} disabled-indeterminate-color [color: ('primary', 400, .5)] - The disabled border and fill colors in checked/indeterminate state.
 /// @prop {Map} disabled-color-label [color: ('gray', 900, .2)] - The disabled label color.
 /// @prop {Map} focus-outline-color [color: ('gray', 900, .15)] - The focus outlined color.
@@ -495,6 +518,13 @@ $indigo-checkbox: extend(
                 0.4,
             ),
         ),
+        disabled-fill-color: (
+            color: (
+                'primary',
+                400,
+                0.5,
+            ),
+        ),
         disabled-color-label: (
             color: (
                 'gray',

package/sass/themes/schemas/components/light/_dock-manager.scss

@@ -13,7 +13,7 @@
 /// @prop {Color} active-color [color: 'primary'] - Sets the active text and border colors for tabs, panes, and menus.
 /// @prop {Color} background-color [null] - Sets the base dock manager color as well as the pane headers and tabs background colors.
 /// @prop {Color} border-color [color: ('surface')] - Sets the global border color in the dock manager. Also sets the pane content background and the context menu active background colors.
-/// @prop {Color} button-text [color: ('gray', 800)] - Sets the button text color.
+/// @prop {Color} button-component-text [color: ('gray', 800)] - Sets the button text color.
 /// @prop {Color} context-menu-background-active [color: 'primary'] - Sets the background color for active context menus.
 /// @prop {Color} context-menu-background [null] - Sets the background color for context menus.
 /// @prop {Color} dock-background [null] - Sets the background color of the dock manager.
@@ -60,7 +60,7 @@ $light-dock-manager: (
         ),
     ),
 
-    button-text: (
+    button-component-text: (
         color: (
             'gray',
             800,
@@ -347,7 +347,7 @@ $fluent-dock-manager: extend(
 
 /// Generates a bootstrap dock-manager schema.
 /// @type Map
-/// @prop {Color} button-text [color: 'primary'] - Sets the button text color.
+/// @prop {Color} button-component-text [color: 'primary'] - Sets the button text color.
 /// @prop {Color} context-menu-background [color: 'surface'] - Sets the background color for context menus.
 /// @prop {Color} context-menu-color-active [color: 'surface'] - Sets the text color for active context menus.
 /// @prop {Color} context-menu-color [color: 'primary'] - Sets the text color for context menus.
@@ -364,7 +364,7 @@ $fluent-dock-manager: extend(
 $bootstrap-dock-manager: extend(
     $light-dock-manager,
     (
-        button-text: (
+        button-component-text: (
             color: 'primary',
         ),
 
@@ -446,7 +446,7 @@ $bootstrap-dock-manager: extend(
 /// Generates a light indigo dock-manager schema.
 /// @type Map
 /// @prop {Color} background-color [color: ('gray', 100)] - Sets the base dock manager color as well as the pane headers and tabs background colors.
-/// @prop {Color} button-text [color: 'primary'] - Sets the button text color.
+/// @prop {Color} button-component-text [color: 'primary'] - Sets the button text color.
 /// @prop {Color} context-menu-color-active [contrast-color: 'primary'] - Sets the text color for active context menus.
 /// @prop {Color} context-menu-color [color: ('gray', 700)] - Sets the text color for context menus.
 /// @prop {Color} joystick-background [color: ('primary', 50)] - Sets the background color of the joysticks.
@@ -468,7 +468,7 @@ $indigo-dock-manager: extend(
             ),
         ),
 
-        button-text: (
+        button-component-text: (
             color: 'primary',
         ),
 

package/sass/typography/_mixins.scss

@@ -26,8 +26,7 @@
 
 /// Includes all category related styles into the current style block.
 /// @param {String} $category - The type scale category.
-/// @param {String} $check [true] - Toggles category checks against ITypeScale.
-/// Set to false when using a custom type scale.
+/// @param {String} $check [true] - Toggles category checks against ITypeScale. Set to false when using a custom type scale.
 /// @example scss - Add the `h1` styles to custom CSS selector.
 ///   .fancy-h1 {
 ///      @include type-style('h1');
@@ -135,9 +134,6 @@
 /// The produced styles are based on the passed typeface and type scale.
 /// @access public
 /// @param {String | List} $font-family - The font family to be used across all typographic elements.
-/// Accepts a Sass list (e.g. "Open Sans", Helvetica, sans-serif), a quoted string
-/// (e.g. "'Comic Sans MS', sans-serif" for backward compatibility), or any other
-/// valid CSS value such as var(--my-font), inherit, etc.
 /// @param {Map} $type-scale - A type scale map as produced by the type-scale function.
 /// @example scss - Using a font-family list
 ///   @include typography(("Open Sans", Helvetica, sans-serif), $my-type-scale);

package/sass/utils/_map.scss

@@ -31,7 +31,15 @@
     $result: ();
 
     @each $map in $maps {
-        $result: map.deep-merge($result, clean($map));
+        $cleaned: clean($map);
+
+        @if map.has-key($cleaned, '_meta') {
+            $_meta: map.get($result, '_meta') or ();
+            $result: map.merge($result, $cleaned);
+            $result: map.set($result, '_meta', map.deep-merge($_meta, map.get($cleaned, '_meta')));
+        } @else {
+            $result: map.merge($result, $cleaned);
+        }
     }
 
     @return $result;