igniteui-theming 3.2.1 → 3.3.0-beta.1

package/package.json

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

package/sass/themes/schemas/components/dark/_icon-button.scss

@@ -0,0 +1,132 @@
+@use '../../../../utils/map' as *;
+@use '../light/icon-button' as *;
+
+/* stylelint-disable max-line-length */
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a dark material flat icon button schema.
+/// @type {Map}
+/// @requires {Map} $material-flat-icon-button
+$material-flat-icon-button-dark: extend($material-flat-icon-button);
+
+/// Generates a dark material contained icon button schema.
+/// @type {Map}
+/// @requires {Map} $material-contained-icon-button
+$material-contained-icon-button-dark: extend($material-contained-icon-button);
+
+/// Generates a dark material outlined icon button schema.
+/// @type {Map}
+/// @requires {Map} $material-outlined-icon-button
+$material-outlined-icon-button-dark: extend($material-outlined-icon-button);
+
+/// Generates a dark material icon button schema.
+/// @type {Map}
+/// @requires {Map} $material-flat-icon-button-dark
+/// @requires {Map} $material-outlined-icon-button-dark
+/// @requires {Map} $material-contained-icon-button-dark
+$dark-icon-button: (
+    flat: $material-flat-icon-button-dark,
+    outlined: $material-outlined-icon-button-dark,
+    contained: $material-contained-icon-button-dark,
+);
+
+/// Generates a dark fluent flat icon button schema.
+/// @type {Map}
+/// @requires {Map} $fluent-flat-icon-button
+$fluent-flat-icon-button-dark: extend($fluent-flat-icon-button);
+
+/// Generates a dark fluent contained icon button schema.
+/// @type {Map}
+/// @prop {Map} foreground [color: ('surface', 500)] - The idle text color of the fluent dark contained icon button.
+/// @prop {Map} focus-background [color: ('primary', 300)] - The hover/focus background color of the fluent dark contained icon button.
+/// @requires {Map} $fluent-contained-icon-button
+$fluent-contained-icon-button-dark: extend(
+    $fluent-contained-icon-button,
+    (
+        foreground: (
+            color: (
+                'surface',
+                500,
+            ),
+        ),
+        focus-background: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
+    )
+);
+
+/// Generates a dark fluent outlined icon button schema.
+/// @type {Map}
+/// @requires {Map} $fluent-outlined-icon-button
+$fluent-outlined-icon-button-dark: extend($fluent-outlined-icon-button);
+
+/// Generates a dark fluent icon button schema.
+/// @type {Map}
+/// @requires {Map} $fluent-flat-icon-button-dark
+/// @requires {Map} $fluent-outlined-icon-button-dark
+/// @requires {Map} $fluent-contained-icon-button-dark
+$dark-fluent-icon-button: (
+    flat: $fluent-flat-icon-button-dark,
+    outlined: $fluent-outlined-icon-button-dark,
+    contained: $fluent-contained-icon-button-dark,
+);
+
+/// Generates a dark bootstrap flat icon button schema.
+/// @type {Map}
+/// @requires {Map} $bootstrap-flat-icon-button
+$bootstrap-flat-icon-button-dark: extend($bootstrap-flat-icon-button);
+
+/// Generates a dark bootstrap contained icon button schema.
+/// @type {Map}
+/// @requires {Map} $bootstrap-contained-icon-button
+$bootstrap-contained-icon-button-dark: extend($bootstrap-contained-icon-button);
+
+/// Generates a dark bootstrap outlined icon button schema.
+/// @type {Map}
+/// @requires {Map} $bootstrap-outlined-icon-button
+$bootstrap-outlined-icon-button-dark: extend($bootstrap-outlined-icon-button);
+
+/// Generates a dark bootstrap icon button schema.
+/// @type {Map}
+/// @requires {Map} $bootstrap-flat-icon-button-dark
+/// @requires {Map} $bootstrap-outlined-icon-button-dark
+/// @requires {Map} $bootstrap-contained-icon-button-dark
+$dark-bootstrap-icon-button: (
+    flat: $bootstrap-flat-icon-button-dark,
+    outlined: $bootstrap-outlined-icon-button-dark,
+    contained: $bootstrap-contained-icon-button-dark,
+);
+
+/// Generates a dark indigo flat icon button schema.
+/// @type {Map}
+/// @requires {Map} $indigo-flat-icon-button
+$indigo-flat-icon-button-dark: extend($indigo-flat-icon-button);
+
+/// Generates a dark indigo contained icon button schema.
+/// @type {Map}
+/// @requires {Map} $indigo-contained-icon-button
+$indigo-contained-icon-button-dark: extend($indigo-contained-icon-button);
+
+/// Generates a dark indigo outlined icon button schema.
+/// @type {Map}
+/// @requires {Map} $indigo-outlined-icon-button
+$indigo-outlined-icon-button-dark: extend($indigo-outlined-icon-button);
+
+/// Generates a dark indigo icon button schema.
+/// @type {Map}
+/// @requires {Map} $indigo-flat-icon-button-dark
+/// @requires {Map} $indigo-outlined-icon-button-dark
+/// @requires {Map} $indigo-contained-icon-button-dark
+$dark-indigo-icon-button: (
+    flat: $indigo-flat-icon-button-dark,
+    outlined: $indigo-outlined-icon-button-dark,
+    contained: $indigo-contained-icon-button-dark,
+);

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

@@ -17,8 +17,8 @@ $dark-rating: $light-rating;
 /// @type {Map}
 /// @prop {Map} symbol-full-color [color: ('gray', 800)] - sets the color in selected state for the symbol when it is a plane text.
 /// @prop {Map} symbol-empty-color [color: ('gray', 400)] - sets the idle color for the symbol when it is a plane text.
-/// @prop {Map} disabled-full-symbols-color [color: ('warn', 900)] - sets the color for the symbol in selected/disabled state when it is a plane text.
-/// @prop {Map} disabled-empty-symbols-color [color: ('gray', 900)] - sets the idle color for the symbol in disabled state when it is a plane text.
+/// @prop {Map} disabled-full-symbol-color [color: ('warn', 900)] - sets the color for the symbol in selected/disabled state when it is a plane text.
+/// @prop {Map} disabled-empty-symbol-color [color: ('warn', 900)] - sets the idle color for the symbol in disabled state when it is a plane text.
 /// @requires $fluent-rating
 $dark-fluent-rating: extend(
     $fluent-rating,
@@ -43,7 +43,7 @@ $dark-fluent-rating: extend(
         ),
         disabled-empty-symbol-color: (
             color: (
-                'gray',
+                'warn',
                 900,
             ),
         ),

package/sass/themes/schemas/components/light/_icon-button.scss

@@ -0,0 +1,664 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Material Schemas
+
+/// Generates a base material icon button schema.
+/// @type {Map}
+/// @prop {Color} background [transparent] - The background color of the material icon button.
+/// @prop {Color} border-color [transparent] - The border color of the material icon button.
+/// @prop {Map} foreground [color: ('gray', 900)] - The idle text color of the material icon button.
+/// @prop {Map} focus-background [color: ('gray', 200)] - The focus background color of the material icon button.
+/// @prop {Map} focus-border-color [color: ('gray', 400)] - The focus border color of the material icon button.
+/// @prop {Map} disabled-background [color: ('gray', 100)] - The disabled background color of the material icon button.
+/// @prop {Color} disabled-border-color [transparent] - The disabled border color of the material icon button.
+/// @prop {Map} disabled-foreground [color: ('gray', 500)] - The disabled foreground color of the material icon button.
+/// @prop {List} border-radius [(rem(20px), rem(0), rem(20px))] - The border radius used for the material icon button.
+/// @prop {List} size [(rem(24px), rem(30px), rem(36px))] - The size used for the material icon button.
+$material-base-icon-button: (
+    background: transparent,
+    border-color: transparent,
+    foreground: (
+        color: (
+            'gray',
+            900,
+        ),
+    ),
+    focus-background: (
+        color: (
+            'gray',
+            200,
+        ),
+    ),
+    focus-border-color: (
+        color: (
+            'gray',
+            400,
+        ),
+    ),
+    disabled-background: (
+        color: (
+            'gray',
+            100,
+        ),
+    ),
+    disabled-border-color: transparent,
+    disabled-foreground: (
+        color: (
+            'gray',
+            500,
+        ),
+    ),
+    border-radius: (
+        border-radius: (
+            rem(20px),
+            rem(0),
+            rem(20px),
+        ),
+    ),
+    size: (
+        sizable: (
+            rem(24px),
+            rem(30px),
+            rem(36px),
+        ),
+    ),
+);
+
+/// Generates a material flat icon button schema.
+/// @type {Map}
+/// @prop {Color} disabled-background [transparent] - The disabled background color the material flat icon button.
+/// @requires {Map} $material-base-icon-button
+$material-flat-icon-button: extend(
+    $material-base-icon-button,
+    (
+        disabled-background: transparent,
+    )
+);
+
+/// Generates a material contained icon button schema.
+/// @type {Map}
+/// @prop {Map} background [color: ('gray', 200)] - The background color of the material contained icon button.
+/// @prop {Map} focus-background [color: ('gray', 300)] - The focus background color of the material contained icon button.
+/// @requires {Map} $material-base-icon-button
+$material-contained-icon-button: extend(
+    $material-base-icon-button,
+    (
+        background: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+        focus-background: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+    )
+);
+
+/// Generates a material outlined icon button schema.
+/// @type {Map}
+/// @prop {Map} border-color [color: ('gray', 300)] - The border color of the material outlined icon button.
+/// @prop {Map} disabled-border-color [color: ('gray', 100)] - The disabled border color of the material outlined icon button.
+/// @requires {Map} $material-base-icon-button
+$material-outlined-icon-button: extend(
+    $material-base-icon-button,
+    (
+        border-color: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+        disabled-border-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+    )
+);
+
+/// Generates a light material icon button schema.
+/// @type {Map}
+/// @requires {Map} $material-flat-icon-button
+/// @requires {Map} $material-contained-icon-button
+/// @requires {Map} $material-outlined-icon-button
+$light-icon-button: (
+    flat: $material-flat-icon-button,
+    contained: $material-contained-icon-button,
+    outlined: $material-outlined-icon-button,
+);
+
+/// Fluent Schemas
+
+/// Generates a fluent base icon button schema.
+/// @type {Map}
+/// @prop {Color} background [transparent] - The background color of the fluent icon button.
+/// @prop {Map} foreground [color: ('primary', 500)] - The idle text color of the fluent icon button.
+/// @prop {Map} focus-background [color: ('gray', 200)] - The hover/focus background color of the fluent icon button.
+/// @prop {Map} active-background [color: ('gray', 300)] - The active background color of the fluent icon button.
+/// @prop {Map} focus-border-color [color: ('gray', 500)] - The focus border color of the fluent icon button.
+/// @prop {Map} disabled-background [color: ('gray', 100)] - The disabled background color of the fluent icon button.
+/// @prop {Map} disabled-foreground [color: ('gray', 400)] - The disabled foreground color of the fluent icon button.
+/// @prop {List} border-radius [(rem(0), rem(0), rem(20px))] - The border radius used for the fluent flat icon button.
+/// @prop {List} size [(rem(24px), rem(32px), rem(38px))] - The size used for the fluent icon button.
+$fluent-base-icon-button: (
+    background: transparent,
+    foreground: (
+        color: (
+            'primary',
+            500,
+        ),
+    ),
+    focus-background: (
+        color: (
+            'gray',
+            200,
+        ),
+    ),
+    active-background: (
+        color: (
+            'gray',
+            300,
+        ),
+    ),
+    focus-border-color: (
+        color: (
+            'gray',
+            500,
+        ),
+    ),
+    disabled-background: (
+        color: (
+            'gray',
+            100,
+        ),
+    ),
+    disabled-foreground: (
+        color: (
+            'gray',
+            400,
+        ),
+    ),
+    border-radius: (
+        border-radius: (
+            rem(0),
+            rem(0),
+            rem(20px),
+        ),
+    ),
+    size: (
+        sizable: (
+            rem(24px),
+            rem(32px),
+            rem(38px),
+        ),
+    ),
+);
+
+/// Generates a fluent flat icon button schema.
+/// @type {Map}
+/// @requires {Map} $fluent-base-icon-button
+$fluent-flat-icon-button: extend($fluent-base-icon-button);
+
+/// Generates a fluent contained icon button schema.
+/// @type {Map}
+/// @prop {Map} background [color: ('primary', 500)] - The background color of the fluent contained icon button.
+/// @prop {Map} foreground [contrast-color: ('primary', 600)] - The idle text color of the fluent contained icon button.
+/// @prop {Map} focus-background [color: ('primary', 600)] - The hover/focus background color of the fluent contained icon button.
+/// @prop {Map} active-background [color: ('primary', 800)] - The active background color of the fluent contained icon button.
+/// @prop {Map} active-foreground [contrast-color: ('primary', 800)] - The active text color of the fluent contained icon button.
+/// @prop {Map} focus-border-color [contrast-color: ('primary', 600)] - The focus border color of the fluent contained icon button.
+/// @requires {Map} $fluent-base-icon-button
+$fluent-contained-icon-button: extend(
+    $fluent-base-icon-button,
+    (
+        background: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+        foreground: (
+            contrast-color: (
+                'primary',
+                600,
+            ),
+        ),
+        focus-background: (
+            color: (
+                'primary',
+                600,
+            ),
+        ),
+        active-background: (
+            color: (
+                'primary',
+                800,
+            ),
+        ),
+        active-foreground: (
+            contrast-color: (
+                'primary',
+                800,
+            ),
+        ),
+        focus-border-color: (
+            contrast-color: (
+                'primary',
+                600,
+            ),
+        ),
+    )
+);
+
+/// Generates a fluent outlined icon button schema.
+/// @type {Map}
+/// @prop {Map} foreground [color: ('gray', 900)] - The idle text color of the fluent outlined icon button.
+/// @prop {Map} border-color [color: ('gray', 700)] - The border color of the fluent outlined icon button.
+/// @prop {Color} focus-background [transparent] - The focus background color of the fluent outlined icon button.
+/// @prop {Map} active-background [color: ('gray', 200)] - The hover/active background color of the fluent outlined icon button.
+/// @prop {Map} focus-border-color [color: ('gray', 900)] - The focus border color of the fluent outlined icon button.
+/// @requires {Map} $fluent-base-icon-button
+$fluent-outlined-icon-button: extend(
+    $fluent-base-icon-button,
+    (
+        foreground: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+        border-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+        focus-background: transparent,
+        active-background: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+        focus-border-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+    )
+);
+
+/// Generates a light fluent icon button schema.
+/// @type {Map}
+/// @requires {Map} $fluent-flat-icon-button
+/// @requires {Map} $fluent-contained-icon-button
+/// @requires {Map} $fluent-outlined-icon-button
+$fluent-icon-button: (
+    flat: $fluent-flat-icon-button,
+    contained: $fluent-contained-icon-button,
+    outlined: $fluent-outlined-icon-button,
+);
+
+/// Bootstrap Schemas
+
+/// Generates a base bootstrap icon button schema.
+/// @type {Map}
+/// @prop {Color} background [transparent] - The background color of the bootstrap icon button.
+/// @prop {Map} foreground [color: ('primary', 500)] - The idle text color of the bootstrap icon button.
+/// @prop {Map} focus-background [color: ('gray', 100)] - The focus background color of the bootstrap icon button.
+/// @prop {Color} disabled-background [transparent] - The disabled background color of the bootstrap icon button.
+/// @prop {Map} disabled-foreground [color: ('primary', 100)] - The disabled foreground color of the bootstrap icon button.
+/// @prop {List} border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for the bootstrap icon button.
+/// @prop {List} size [(rem(31px), rem(38px), rem(48px))] - The size used for the bootstrap icon button.
+$bootstrap-base-icon-button: (
+    background: transparent,
+    foreground: (
+        color: (
+            'primary',
+            500,
+        ),
+    ),
+    focus-background: (
+        color: (
+            'gray',
+            100,
+        ),
+    ),
+    disabled-background: transparent,
+    disabled-foreground: (
+        color: (
+            'primary',
+            100,
+        ),
+    ),
+    border-radius: (
+        border-radius: (
+            rem(4px),
+            rem(0),
+            rem(20px),
+        ),
+    ),
+    size: (
+        sizable: (
+            rem(31px),
+            rem(38px),
+            rem(48px),
+        ),
+    ),
+);
+
+/// Generates a bootstrap flat icon button schema.
+/// @type {Map}
+/// @prop {Map} hover-foreground [color: ('primary', 800)] - The hover text color of the bootstrap icon button.
+/// @prop {Map} focus-foreground [color: ('primary', 600)] - The focus text color of the bootstrap icon button.
+/// @requires {Map} $bootstrap-base-icon-button
+$bootstrap-flat-icon-button: extend(
+    $bootstrap-base-icon-button,
+    (
+        hover-foreground: (
+            color: (
+                'primary',
+                800,
+            ),
+        ),
+        focus-foreground: (
+            color: (
+                'primary',
+                600,
+            ),
+        ),
+    )
+);
+
+/// Generates a bootstrap contained icon button schema.
+/// @type {Map}
+/// @prop {Map} background [color: ('primary', 500)] - The background color of the bootstrap contained icon button.
+/// @prop {Map} foreground [contrast-color: ('primary', 600)] - The idle text color of the bootstrap contained icon button.
+/// @prop {Map} focus-background [color: ('primary', 600)] - The focus background color of the bootstrap contained icon button.
+/// @prop {Map} focus-border-color [color: ('primary', 200, .5)] - The focus border color of the bootstrap contained icon button.
+/// @prop {Map} disabled-background [color: ('primary', 100)] - The disabled background color of the bootstrap contained icon button.
+/// @prop {Map} disabled-foreground [color: ('primary', 300)] - The disabled foreground color of the bootstrap contained icon button.
+/// @requires {Map} $bootstrap-base-icon-button
+$bootstrap-contained-icon-button: extend(
+    $bootstrap-base-icon-button,
+    (
+        background: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+        foreground: (
+            contrast-color: (
+                'primary',
+                600,
+            ),
+        ),
+        focus-background: (
+            color: (
+                'primary',
+                600,
+            ),
+        ),
+        focus-border-color: (
+            color: (
+                'primary',
+                200,
+                0.5,
+            ),
+        ),
+        disabled-background: (
+            color: (
+                'primary',
+                100,
+            ),
+        ),
+        disabled-foreground: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
+    )
+);
+
+/// Generates a bootstrap outlined icon button schema.
+/// @type {Map}
+/// @prop {Map} border-color [color: ('primary', 500)] - The border color of the bootstrap outlined icon button.
+/// @prop {Map} focus-background [color: ('primary', 600)] - The focus background color of the bootstrap outlined icon button.
+/// @prop {Map} hover-foreground [contrast-color: ('primary', 600)] - The hover text color of the bootstrap outlined icon button.
+/// @prop {Map} focus-foreground [contrast-color: ('primary', 600)] - The focus text color of the bootstrap outlined icon button.
+/// @prop {Map} focus-border-color [color: ('primary', 200, .5)] - The focus border color of the bootstrap outlined icon button.
+/// @prop {Map} disabled-foreground [color: ('primary', 100)] - The disabled foreground color of the bootstrap outlined icon button.
+/// @prop {Map} disabled-border-color [color: ('primary', 100)] - The disabled border color of the bootstrap outlined icon button.
+/// @requires {Map} $bootstrap-base-icon-button
+$bootstrap-outlined-icon-button: extend(
+    $bootstrap-base-icon-button,
+    (
+        border-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+        hover-foreground: (
+            contrast-color: (
+                'primary',
+                600,
+            ),
+        ),
+        focus-foreground: (
+            contrast-color: (
+                'primary',
+                600,
+            ),
+        ),
+        focus-background: (
+            color: (
+                'primary',
+                600,
+            ),
+        ),
+        focus-border-color: (
+            color: (
+                'primary',
+                200,
+                0.5,
+            ),
+        ),
+        disabled-border-color: (
+            color: (
+                'primary',
+                100,
+            ),
+        ),
+        disabled-foreground: (
+            color: (
+                'primary',
+                100,
+            ),
+        ),
+    )
+);
+
+/// Generates a light bootstrap icon button schema.
+/// @type {Map}
+/// @requires {Map} $bootstrap-flat-icon-button
+/// @requires {Map} $bootstrap-contained-icon-button
+/// @requires {Map} $bootstrap-outlined-icon-button
+$bootstrap-icon-button: (
+    flat: $bootstrap-flat-icon-button,
+    contained: $bootstrap-contained-icon-button,
+    outlined: $bootstrap-outlined-icon-button,
+);
+
+/// Indigo Schemas
+
+/// Generates a base indigo icon button schema.
+/// @type {Map}
+/// @prop {Color} background [transparent] - The background color of the indigo icon button.
+/// @prop {Map} foreground [color: ('gray', 700)] - The idle text color of the indigo icon button.
+/// @prop {Color} focus-background [transparent] - The focus background color of the indigo icon button.
+/// @prop {Map} focus-border-color [color: ('gray', 300)] - The focus border color of the indigo icon button.
+/// @prop {Color} disabled-background [transparent] - The disabled background color of the indigo icon button.
+/// @prop {Map} disabled-foreground [color: ('gray', 400)] - The disabled foreground color of the indigo icon button.
+/// @prop {List} border-radius [(rem(20px), rem(0), rem(20px))] - The border radius used for the indigo icon button.
+/// @prop {List} size [(rem(28px), rem(32px), rem(36px))] - The size used for the indigo icon button.
+$indigo-base-icon-button: (
+    background: transparent,
+    foreground: (
+        color: (
+            'gray',
+            700,
+        ),
+    ),
+    focus-background: transparent,
+    focus-border-color: (
+        color: (
+            'gray',
+            300,
+        ),
+    ),
+    disabled-background: transparent,
+    disabled-foreground: (
+        color: (
+            'gray',
+            400,
+        ),
+    ),
+    border-radius: (
+        border-radius: (
+            rem(20px),
+            rem(0),
+            rem(20px),
+        ),
+    ),
+    size: (
+        sizable: (
+            rem(28px),
+            rem(32px),
+            rem(36px),
+        ),
+    ),
+);
+
+/// Generates an indigo flat icon button schema.
+/// @type {Map}
+/// @prop {Map} focus-foreground [color: ('gray', 900)] - The focus text color of the indigo flat icon button.
+/// @requires {Map} $indigo-base-icon-button
+$indigo-flat-icon-button: extend(
+    $indigo-base-icon-button,
+    (
+        focus-foreground: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+    )
+);
+
+/// Generates an indigo contained icon button schema.
+/// @type {Map}
+/// @prop {Map} background [color: ('primary', 500)] - The background color of the indigo contained icon button.
+/// @prop {Map} foreground [contrast-color: ('primary', 600)] - The idle text color of the indigo contained icon button.
+/// @prop {Map} focus-background [color: ('primary', 600)] - The focus background color of the indigo contained icon button.
+/// @prop {Map} focus-border-color [color: ('primary', 200, .5)] - The focus border color of the indigo contained icon button.
+/// @prop {Map} disabled-background [color: ('primary', 100)] - The disabled background color of the indigo contained icon button.
+/// @requires {Map} $indigo-base-icon-button
+$indigo-contained-icon-button: extend(
+    $indigo-base-icon-button,
+    (
+        background: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+        foreground: (
+            contrast-color: (
+                'primary',
+                600,
+            ),
+        ),
+        focus-background: (
+            color: (
+                'primary',
+                400,
+            ),
+        ),
+        focus-border-color: (
+            color: (
+                'primary',
+                200,
+            ),
+        ),
+        disabled-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+    )
+);
+
+/// Generates an indigo outlined icon button schema.
+/// @type {Map}
+/// @prop {Map} border-color [color: ('gray', 500)] - The border color of the indigo outlined icon button.
+/// @prop {Map} focus-foreground [color: ('gray', 900)] - The focus text color of the indigo outlined icon button.
+/// @prop {Map} focus-background [color: ('gray', 100)] - The focus background color of the indigo outlined icon button.
+/// @prop {Map} focus-border-color [color: ('gray', 300)] - The focus border color of the indigo outlined icon button.
+/// @requires {Map} $indigo-base-icon-button
+$indigo-outlined-icon-button: extend(
+    $indigo-base-icon-button,
+    (
+        border-color: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
+        focus-foreground: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+        focus-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+        focus-border-color: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+    )
+);
+
+/// Generates a light indigo icon button schema.
+/// @type {Map}
+/// @requires {Map} $indigo-flat-icon-button
+/// @requires {Map} $indigo-contained-icon-button
+/// @requires {Map} $indigo-outlined-icon-button
+$indigo-icon-button: (
+    flat: $indigo-flat-icon-button,
+    contained: $indigo-contained-icon-button,
+    outlined: $indigo-outlined-icon-button,
+);

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

@@ -17,8 +17,8 @@
 /// @prop {Function} symbol-empty-filter [grayscale(100%) opacity(50%)] - the filter(s) used for the empty symbol.
 /// @prop {Function} symbol-full-filter [grayscale(50%)] - the filter(s) used for the filled symbol.
 /// @prop {Map} disabled-label-color [color: ('gray', 400)] - sets the color for the label in disabled state.
-/// @prop {Map} disabled-empty-symbols-color [color: ('gray', 400)] - sets the idle color for the symbol in disabled state when it is a plane text.
-/// @prop {Map} disabled-full-symbols-color [color: ('gray', 600)] - sets the color for the symbol in selected/disabled state when it is a plane text.
+/// @prop {Map} disabled-empty-symbol-color [color: ('gray', 400)] - sets the idle color for the symbol in disabled state when it is a plane text.
+/// @prop {Map} disabled-full-symbol-color [color: ('gray', 600)] - sets the color for the symbol in selected/disabled state when it is a plane text.
 /// Generates a light rating schema.
 /// @type {Map}
 $light-rating: (
@@ -85,9 +85,8 @@ $light-rating: (
 /// @prop {Map} disabled-idle-symbols-color [color: ('gray', 200)] - sets the idle color for the symbol in disabled state when it is a plane text.
 /// @prop {Map} symbol-empty-color [color: ('gray', 700)] - sets the idle color for the symbol when it is a plane text.
 /// @prop {Map} symbol-full-color [[color: ('warn', 900)] - sets the color in selected state for the symbol when it is a plane text.
-/// @prop {Map} disabled-empty-symbols-color [color: ('warn', 100)] - sets the idle color for the symbol in disabled state when it is a plane text.
-/// @prop {Map} disabled-full-symbols-color [color: ('warn', 100)] - sets the color for the symbol in selected/disabled state when it is a plane text.
-/// @prop {Map} disabled-selected-symbols-color [color: ('gray', 500)] - sets the color for the symbol in selected/disabled state when it is a plane text.
+/// @prop {Map} disabled-empty-symbol-color [color: ('warn', 100)] - sets the idle color for the symbol in disabled state when it is a plane text.
+/// @prop {Map} disabled-full-symbol-color [color: ('warn', 100)] - sets the color for the symbol in selected/disabled state when it is a plane text.
 /// @requires {Map} $light-rating
 $fluent-rating: extend(
     $light-rating,
@@ -116,13 +115,13 @@ $fluent-rating: extend(
                 400,
             ),
         ),
-        disabled-empty-symbols-color: (
+        disabled-empty-symbol-color: (
             color: (
                 'warn',
                 100,
             ),
         ),
-        disabled-full-symbols-color: (
+        disabled-full-symbol-color: (
             color: (
                 'warn',
                 100,