igniteui-theming 3.3.0-beta.1 → 3.3.0-beta.3

package/package.json

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

@@ -174,13 +174,124 @@ $fluent-flat-button-dark: extend(
     )
 );
 
+/// @type {Map}
+/// @prop {Map} background [color: ('primary', 300)] - The background color of an raised button.
+/// @prop {Map} foreground [color: ('surface', 500] - The idle text color of a raised button.
+/// @prop {Map} border-color [color: ('primary', 300)] - The border color of a raised button.
+/// @prop {Map} hover-border-color [color: ('primary', 200)] - The hover border color of a raised button.
+/// @prop {Map} focus-border-color [color: ('primary', 300)] - The focus border color of a raised button.
+/// @prop {Map} focus-visible-border-color [color: ('primary', 200)] - The focus-visible border color of a raised button.
+/// @prop {Map} active-border-color [color: ('primary', 200)] - The active border color of a raised button.
+/// @prop {Map} hover-background [color: ('primary', 200)] - The hover background of a raised button.
+/// @prop {Map} hover-foreground [color: ('surface', 500] - The hover text color of a raised button.
+/// @prop {Map} focus-background [color: ('primary', 300)] - The focus background color of a raised button.
+/// @prop {Map} focus-foreground [color: ('surface', 500] - The focus text color of a raised button.
+/// @prop {Map} focus-visible-background [color: ('primary', 200)] - The focus-visible background color of a raised button.
+/// @prop {Map} focus-visible-foreground [color: ('surface', 500] - The focus-visible text color of a raised button.
+/// @prop {Map} active-background [color: ('primary', 200)] - The active background color of a raised button.
+/// @prop {Map} active-foreground [color: ('surface', 500] - The active text color of a raised button.
 /// @requires {Map} $fluent-raised-button
 /// @requires {Map} $fluent-base-button-dark
-$fluent-raised-button-dark: extend($fluent-raised-button, $fluent-base-button-dark);
+$fluent-raised-button-dark: extend(
+    $fluent-raised-button,
+    $fluent-base-button-dark,
+    (
+        background: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
+        foreground: (
+            color: (
+                'surface',
+                500,
+            ),
+        ),
+        border-color: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
+        hover-background: (
+            color: (
+                'primary',
+                200,
+            ),
+        ),
+        hover-foreground: (
+            color: (
+                'surface',
+                500,
+            ),
+        ),
+        hover-border-color: (
+            color: (
+                'primary',
+                200,
+            ),
+        ),
+        focus-background: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
+        focus-foreground: (
+            color: (
+                'surface',
+                500,
+            ),
+        ),
+        focus-border-color: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
+        focus-visible-background: (
+            color: (
+                'primary',
+                200,
+            ),
+        ),
+        focus-visible-foreground: (
+            color: (
+                'surface',
+                500,
+            ),
+        ),
+        focus-visible-border-color: (
+            color: (
+                'primary',
+                200,
+            ),
+        ),
+        active-background: (
+            color: (
+                'primary',
+                200,
+            ),
+        ),
+        active-foreground: (
+            color: (
+                'surface',
+                500,
+            ),
+        ),
+        active-border-color: (
+            color: (
+                'primary',
+                200,
+            ),
+        ),
+    )
+);
 
 /// @requires {Map} $fluent-fab-button
 /// @requires {Map} $fluent-base-button-dark
-$fluent-fab-button-dark: extend($fluent-fab-button, $fluent-base-button-dark);
+$fluent-fab-button-dark: extend($fluent-fab-button, $fluent-base-button-dark, $fluent-raised-button-dark);
 
 /// @prop {Map} hover-background [color: ('gray', 50)] - The hover background color of an icon button.
 /// @prop {Map} active-background [color: ('gray', 100, .8)] - The active background color of an icon button.

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

@@ -42,24 +42,59 @@ $fluent-flat-icon-button-dark: extend($fluent-flat-icon-button);
 
 /// Generates a dark fluent contained icon button schema.
 /// @type {Map}
+/// @prop {Map} background [color: ('primary', 300)] - The background color of the fluent dark contained icon button.
 /// @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.
+/// @prop {Map} hover-background [color: ('primary', 200)] - The hover background color of the fluent dark contained icon button.
+/// @prop {Map} focus-background [color: ('primary', 300)] - The focus background color of the fluent dark contained icon button.
+/// @prop {Map} active-background [color: ('primary', 200)] - The active background color of the fluent dark contained icon button.
+/// @prop {Map} active-foreground [color: ('surface', 500)] - The active text color of the fluent dark contained icon button.
+/// @prop {Map} focus-border-color [color: ('surface', 500)] - The focus border color of the fluent dark contained icon button.
 /// @requires {Map} $fluent-contained-icon-button
 $fluent-contained-icon-button-dark: extend(
     $fluent-contained-icon-button,
     (
+        background: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
         foreground: (
             color: (
                 'surface',
                 500,
             ),
         ),
+        hover-background: (
+            color: (
+                'primary',
+                200,
+            ),
+        ),
         focus-background: (
             color: (
                 'primary',
                 300,
             ),
         ),
+        active-background: (
+            color: (
+                'primary',
+                200,
+            ),
+        ),
+        active-foreground: (
+            color: (
+                'surface',
+                500,
+            ),
+        ),
+        focus-border-color: (
+            color: (
+                'surface',
+                500,
+            ),
+        ),
     )
 );
 

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

@@ -145,7 +145,8 @@ $light-icon-button: (
 /// @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} hover-background [color: ('gray', 200)] - The hover background color of the fluent icon button.
+/// @prop {Map} focus-background [color: ('gray', 200)] - The 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.
@@ -160,6 +161,12 @@ $fluent-base-icon-button: (
             500,
         ),
     ),
+    hover-background: (
+        color: (
+            'gray',
+            200,
+        ),
+    ),
     focus-background: (
         color: (
             'gray',
@@ -215,7 +222,8 @@ $fluent-flat-icon-button: extend($fluent-base-icon-button);
 /// @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} hover-background [color: ('primary', 600)] - The hover background color of the fluent contained icon button.
+/// @prop {Map} focus-background [color: ('primary', 600)] - The 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.
@@ -235,6 +243,12 @@ $fluent-contained-icon-button: extend(
                 600,
             ),
         ),
+        hover-background: (
+            color: (
+                'primary',
+                600,
+            ),
+        ),
         focus-background: (
             color: (
                 'primary',
@@ -266,6 +280,7 @@ $fluent-contained-icon-button: extend(
 /// @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} hover-background [transparent] - The hover background 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.
@@ -285,6 +300,7 @@ $fluent-outlined-icon-button: extend(
                 700,
             ),
         ),
+        hover-background: transparent,
         focus-background: transparent,
         active-background: (
             color: (

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.