igniteui-theming 3.2.2 → 3.3.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "3.2.2",
+  "version": "3.3.0-beta.2",
   "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/light/_avatar.scss

@@ -13,6 +13,7 @@
 /// @prop {Map} color [color: ('gray', 800, .96)] - The text/icon color of the avatar.
 /// @prop {Number} border-radius [rem(8px)] - The border radius for rounded avatar.
 /// @prop {List} size [(rem(40px), rem(64px), rem(88px))] - The size used for the avatar width and height.
+/// @prop {Number} default-size [2] - The default size used for the avatar component.
 $light-avatar: (
     background: (
         color: (
@@ -36,18 +37,26 @@ $light-avatar: (
             rem(88px),
         ),
     ),
+    default-size: 2,
 );
 
 /// Generates a fluent avatar schema.
 /// @type {Map}
+/// @prop {Number} default-size [1] - The default size used for the avatar component.
 /// @requires {Map} $light-avatar
-$fluent-avatar: $light-avatar;
+$fluent-avatar: extend(
+    $light-avatar,
+    (
+        default-size: 1,
+    )
+);
 
 /// Generates a bootstrap avatar schema.
 /// @type {Map}
 /// @prop {Map} background [color: ('gray', 400)]- The background color of the avatar.
 /// @prop {Map} color [contrast-color: ('gray', 400)] - The text/icon color of the avatar.
 /// @prop {Number} border-radius [rem(4px)] - The border radius for rounded avatar.
+/// @prop {Number} default-size [1] - The default size used for the avatar component.
 /// @requires {Map} $light-avatar
 $bootstrap-avatar: extend(
     $light-avatar,
@@ -65,10 +74,17 @@ $bootstrap-avatar: extend(
             ),
         ),
         border-radius: rem(4px),
+        default-size: 1,
     )
 );
 
 /// Generates an indigo avatar schema.
 /// @type {Map}
+/// @prop {Number} default-size [1] - The default size used for the avatar component.
 /// @requires {Map} $light-avatar
-$indigo-avatar: $light-avatar;
+$indigo-avatar: extend(
+    $light-avatar,
+    (
+        default-size: 1,
+    )
+);

package/sass/themes/schemas/components/light/_button-group.scss

@@ -25,6 +25,7 @@
 /// @prop {Map} idle-shadow-color [transparent] - The outline color of button group items.
 /// @prop {Number} elevation [2] - The elevation level, between 0-24, to be used for the button group shadow.
 /// @prop {List} border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for button-group component.
+/// @prop {Number} default-size [2] - The default size used for the button-group component.
 /// @requires {Map} $default-elevation-button-group
 $light-button-group: extend(
     $default-elevation-button-group,
@@ -123,6 +124,8 @@ $light-button-group: extend(
                 rem(20px),
             ),
         ),
+
+        default-size: 2,
     )
 );
 

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

@@ -21,6 +21,7 @@
 /// @prop {Map} disabled-background [color: ('gray', 300)] - The disabled background color of the button.
 /// @prop {Map} disabled-foreground [color: ('gray', 500)] - The disabled foreground color of the button.
 /// @prop {List} size [(rem(24px), rem(30px), rem(36px))] - The size used for the button.
+/// @prop {Number} default-size [1] - The default size used for the button component.
 $material-base-button: (
     shadow-color: transparent,
     border-color: transparent,
@@ -48,6 +49,7 @@ $material-base-button: (
             rem(36px),
         ),
     ),
+    default-size: 1,
 );
 
 /// @type {Map}
@@ -330,6 +332,7 @@ $material-fab-button: extend(
 /// @prop {Map} active-border-color [color: ('gray', 400)] - The active border color of the button.
 /// @prop {List} border-radius [(rem(20px), rem(0), rem(20px))] - The border radius used for floating button.
 /// @prop {List} size [(rem(24px), rem(30px), rem(36px))] - The size used for icon button.
+/// @prop {Number} default-size [2] - The default size used for the icon button component.
 /// @requires {Map} $material-base-button
 /// @requires {Map} $material-ib-elevation
 $material-icon-button: extend(
@@ -420,6 +423,7 @@ $material-icon-button: extend(
                 rem(36px),
             ),
         ),
+        default-size: 2,
     )
 );
 
@@ -444,6 +448,7 @@ $light-button: (
 /// @prop {Map} disabled-background [color: ('gray', 200)] - The disabled background color of the button.
 /// @prop {Map} disabled-foreground [color: ('gray', 400)] - The disabled foreground color of the button.
 /// @prop {List} size [(rem(24px), rem(32px), rem(38px))] - The size used for the button.
+/// @prop {Number} default-size [2] - The default size used for the button component.
 $fluent-base-button: extend(
     $material-base-button,
     $flat-elevation-button,
@@ -467,6 +472,7 @@ $fluent-base-button: extend(
                 rem(38px),
             ),
         ),
+        default-size: 2,
     )
 );
 
@@ -965,6 +971,7 @@ $fluent-button: (
 /// @prop {Map} disabled-background [color: ('primary', 50)] - The disabled background color of the button.
 /// @prop {Map} disabled-foreground [color: ('primary', 200)] - The disabled foreground color of the button.
 /// @prop {List} size [(rem(31px), rem(38px), rem(48px))] - The size used for the button.
+/// @prop {Number} default-size [2] - The default size used for the button component.
 /// @requires {Map} $material-base-button
 /// @requires {Map} $flat-elevation-button
 $bootstrap-base-button: extend(
@@ -990,6 +997,7 @@ $bootstrap-base-button: extend(
                 rem(48px),
             ),
         ),
+        default-size: 2,
     )
 );
 

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

@@ -57,6 +57,7 @@
 /// @prop {List} border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for calendar.
 /// @prop {List} date-border-radius [(rem(20px), rem(0), rem(20px))] - The border radius used for calendar date.
 /// @prop {List} month-border-radius [(rem(20px), rem(0), rem(20px))] - The border radius used for calendar month.
+/// @prop {Number} default-size [2] - The default size used for the calendar component.
 $light-calendar: (
     content-background: (
         color: 'surface',
@@ -381,6 +382,7 @@ $light-calendar: (
             rem(20px),
         ),
     ),
+    default-size: 2,
 );
 
 /// Generates a fluent calendar schema.

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

@@ -19,6 +19,7 @@
 /// @prop {Number} resting-elevation [4] - The elevation level, between 0-24, to be used for the resting state.
 /// @prop {Number} hover-elevation [6] - The elevation level, between 0-24, to be used for the hover state.
 /// @prop {List} border-radius [(rem(4px), rem(0), rem(24px))] - The border radius used for card.
+/// @prop {Number} default-size [2] - The default size used for the card component.
 /// @requires {Map} $default-elevation-card
 $light-card: extend(
     $default-elevation-card,
@@ -70,6 +71,7 @@ $light-card: extend(
                 rem(24px),
             ),
         ),
+        default-size: 2,
     )
 );
 

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

@@ -37,6 +37,7 @@
 /// @prop {Map} $disabled-background [color: ('gray', 200)] - The disabled chip background color.
 /// @prop {Map} $disabled-border-color [color: ('gray', 200)] - The disabled chip border color.
 /// @prop {List} size [(rem(20px), rem(24px), rem(32px))] - The size used for the chip height.
+/// @prop {Number} default-size [2] - The default size used for the chip component.
 /// @prop {Map} $default-elevation-chip
 $light-chip: extend(
     $default-elevation-chip,
@@ -188,6 +189,7 @@ $light-chip: extend(
                 rem(32px),
             ),
         ),
+        default-size: 2,
     )
 );
 

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

@@ -28,6 +28,7 @@
 /// @prop {Map} clear-button-foreground-focus [contrast-color: ('gray', 100)] - The combo clear button foreground color when the combo is focused.
 /// @prop {Map} case-icon-color [color: ('gray', 400)] - The case sensitive icon color in inactive state for combo search input
 /// @prop {Map} case-icon-color--active [color: ('primary', 500)] - The case sensitive icon color in active state for combo search input
+/// @prop {Number} default-size [2] - The default size used for the combo component.
 $light-combo: (
     toggle-button-background-focus--border: (
         color: (
@@ -119,6 +120,7 @@ $light-combo: (
             500,
         ),
     ),
+    default-size: 2,
 );
 
 /// Generates a fluent combo schema.

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

@@ -17,6 +17,7 @@
 /// @prop {Map} backdrop [color: ('gray', 50, .54)] - The dialog backdrop color.
 /// @prop {Number} elevation [24] - The elevation level, between 0-24, to be used for the dialog.
 /// @prop {List} border-radius [(rem(4px), rem(0), rem(36px))] - The border radius used for dialog.
+/// @prop {Number} default-size [2] - The default size used for the dialog component.
 /// @requires {Map} $default-elevation-dialog
 $light-dialog: extend(
     $default-elevation-dialog,
@@ -56,6 +57,7 @@ $light-dialog: extend(
                 rem(36px),
             ),
         ),
+        default-size: 2,
     )
 );
 

package/sass/themes/schemas/components/light/_drop-down.scss

@@ -33,6 +33,7 @@
 /// @prop {List} border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for drop-down component.
 /// @prop {List} item-border-radius [(rem(0), rem(0), rem(20px))] - The border radius used for the drop-down items.
 /// @prop {List} size [(rem(28px), rem(32px), rem(40px))] - The size used for the dropdown item height.
+/// @prop {Number} default-size [2] - The default size used for the drop down component.
 /// @requires {Map} $default-elevation-drop-down
 $light-drop-down: extend(
     $default-elevation-drop-down,
@@ -155,6 +156,7 @@ $light-drop-down: extend(
                 rem(40px),
             ),
         ),
+        default-size: 2,
     )
 );
 

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/_icon.scss

@@ -12,6 +12,7 @@
 /// @prop {Color} color ["'currentColor'"] - The icon color.
 /// @prop {Color} disabled-color ["'currentColor'"] - The disabled icon color.
 /// @prop {List} size [(rem(18px), rem(20px), rem(24px))] - The size used for the icon.
+/// @prop {Number} default-size [2] - The default size used for the icon component.
 $light-icon: (
     color: "'currentColor'",
     disabled-color: "'currentColor'",
@@ -22,6 +23,7 @@ $light-icon: (
             rem(24px),
         ),
     ),
+    default-size: 2,
 );
 
 /// Generates a fluent icon schema.

package/sass/themes/schemas/components/light/_input-group.scss

@@ -63,6 +63,7 @@
 /// @prop {Map} input-suffix-color--focused [color: ('gray', 900)] - The input suffix color in the focused state.
 /// @prop {Color} input-suffix-background--focused [inherit] - The background color of an input suffix in the focused state.
 /// @prop {List} size [(rem(40px), rem(48px), rem(56px))] - The size used for the input group.
+/// @prop {Number} default-size [2] - The default size used for the input group component.
 /// @requires {Map} $default-elevation-input-group
 $light-input-group: extend(
     $default-elevation-input-group,
@@ -323,6 +324,7 @@ $light-input-group: extend(
                 rem(56px),
             ),
         ),
+        default-size: 2,
     )
 );
 

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

@@ -34,6 +34,7 @@
 /// @prop {List} item-border-radius [()] - The border radius used for list item.
 /// @prop {Number} border-color [transparent] - The list border color.
 /// @prop {Color} border-width [0] - The list border width.
+/// @prop {Number} default-size [2] - The default size used for the list component.
 $light-list: (
     background: (
         color: 'surface',
@@ -131,6 +132,7 @@ $light-list: (
             rem(24px),
         ),
     ),
+    default-size: 2,
 );
 
 /// Generates a fluent list schema.

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

@@ -19,6 +19,7 @@
 /// @prop {Map} disabled-label-color [color: ('gray', 400)] - sets the color for the label in disabled state.
 /// @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.
+/// @prop {Number} default-size [2] - The default size used for the rating component.
 /// Generates a light rating schema.
 /// @type {Map}
 $light-rating: (
@@ -77,6 +78,7 @@ $light-rating: (
             200,
         ),
     ),
+    default-size: 2,
 );
 
 /// Generates a fluent rating schema.

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

@@ -19,6 +19,7 @@
 /// @prop {Map} toggle-button-background-disabled [color: ('gray', 100] - The select toggle button background color when the select is disabled.
 /// @prop {Map} toggle-button-foreground-disabled [color: ('gray', 500)] - The select toggle button foreground color when the select is disabled.
 /// @prop {Map} toggle-button-background-focus--border [color: ('gray', 300)] The select toggle button background color when the select is focused in material border and line variants.
+/// @prop {Number} default-size [2] - The default size used for the select component.
 $light-select: (
     toggle-button-background-focus--border: (
         color: (
@@ -69,6 +70,7 @@ $light-select: (
             500,
         ),
     ),
+    default-size: 2,
 );
 
 /// Generates a fluent select schema.

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

@@ -25,6 +25,7 @@
 /// @prop {Map} hover-color [color: ('gray', 900, .1)] - The background color used for the tree node on hover.
 /// @prop {Map} border-color [color: ('secondary')] - The outline shadow color used for tree node in focus state.
 /// @prop {List} size [(rem(32px), rem(40px), rem(50px))] - The size used for the tree node.
+/// @prop {Number} default-size [2] - The default size used for the tree component.
 $light-tree: (
     background: (
         color: (
@@ -109,6 +110,7 @@ $light-tree: (
             rem(50px),
         ),
     ),
+    default-size: 2,
 );
 
 /// Generates a light fluent tree schema.