igniteui-theming 2.0.1 → 2.1.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "2.0.1",
+  "version": "2.1.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/_index.scss

@@ -31,6 +31,7 @@
 @use './highlight' as *;
 @use './icon' as *;
 @use './input-group' as *;
+@use './label' as *;
 @use './list' as *;
 @use './navbar' as *;
 @use './navdrawer' as *;
@@ -87,6 +88,7 @@ $dark-material-schema: (
     highlight: $dark-highlight,
     icon: $dark-icon,
     input-group: $dark-input-group,
+    label: $dark-material-label,
     list: $dark-list,
     navbar: $dark-navbar,
     nav-drawer: $dark-navdrawer,
@@ -149,6 +151,7 @@ $dark-fluent-schema: (
     highlight: $dark-fluent-highlight,
     icon: $dark-fluent-icon,
     input-group: $dark-fluent-input-group,
+    label: $dark-fluent-label,
     list: $dark-fluent-list,
     navbar: $dark-fluent-navbar,
     nav-drawer: $dark-fluent-navdrawer,
@@ -211,6 +214,7 @@ $dark-bootstrap-schema: (
     highlight: $dark-bootstrap-highlight,
     icon: $dark-bootstrap-icon,
     input-group: $dark-bootstrap-input-group,
+    label: $dark-bootstrap-label,
     list: $dark-bootstrap-list,
     navbar: $dark-bootstrap-navbar,
     nav-drawer: $dark-bootstrap-navdrawer,
@@ -273,6 +277,7 @@ $dark-indigo-schema: (
     highlight: $dark-indigo-highlight,
     icon: $dark-indigo-icon,
     input-group: $dark-indigo-input-group,
+    label: $dark-indigo-label,
     list: $dark-indigo-list,
     navbar: $dark-indigo-navbar,
     nav-drawer: $dark-indigo-navdrawer,

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

@@ -0,0 +1,33 @@
+@use '../light/label' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a dark material label schema.
+/// @type {Map}
+/// @prop {Color} color [color: ('gray', 700)] - The label color.
+$dark-material-label: $material-label;
+
+/// Generates a dark fluent label schema.
+/// @type {Map}
+/// @prop {Color} color [color: ('gray', 900)] - The label color.
+$dark-fluent-label: $fluent-label;
+
+/// Generates a dark bootstrap label schema.
+/// @type {Map}
+/// @prop {Color} color [color: ('gray', 700)] - The label color.
+$dark-bootstrap-label: $bootstrap-label;
+
+/// Generates a dark indigo label schema.
+/// @type {Map}
+/// @prop {Color} color [contrast-color: ('surface')] - The label color.
+$dark-indigo-label: (
+    color: (
+        contrast-color: (
+            'surface',
+        ),
+    ),
+);

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

@@ -12,8 +12,13 @@
 /// @prop {Map} background [color: ('gray', 400, .54)]- The background color of the avatar.
 /// @prop {Map} color [color: ('gray', 800, .96)] - The text/icon color of the avatar.
 /// @prop {Number} border-radius [rem(0)] - The border radius.
-/// @prop {Number} size - The size of the avatar.
+/// @prop {List} size [(rem(40px), rem(64px), rem(88px))] - The size used for the avatar width and height.
 $light-avatar: (
+    size: (
+        rem(40px),
+        rem(64px),
+        rem(88px),
+    ),
     background: (
         color: (
             'gray',

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

@@ -55,6 +55,7 @@ $material-base-button: (
 /// @prop {Map} active-foreground [color: ('secondary', 500)] - The active text color of a flat button.
 /// @prop {Color} disabled-background [transparent] - The disabled background color a flat button.
 /// @prop {List} border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for flat button.
+/// @prop {List} size [(rem(24px), rem(30px), rem(36px))] - The size used for the flat button.
 /// @requires {Map} $material-base-button
 /// @requires {Map} $flat-elevation-button
 $material-flat-button: extend(
@@ -127,6 +128,11 @@ $material-flat-button: extend(
             rem(0),
             rem(20px),
         ),
+        size: (
+            rem(24px),
+            rem(30px),
+            rem(36px),
+        ),
     )
 );
 
@@ -276,6 +282,7 @@ $material-raised-button: extend(
 /// @prop {Number} hover-elevation [12] - The elevation level, between 0-24, to be used for the hover state.
 /// @prop {Number} focus-elevation [12] - The elevation level, between 0-24, to be used for the focus state.
 /// @prop {List} border-radius [(rem(28px), rem(12px), rem(28px))] - The border radius used for floating button.
+/// @prop {List} size [(rem(32px), rem(40px), rem(48px))] - The size used for floating button.
 /// @requires {Map} $material-raised-button
 /// @requires {Map} $material-fab-elevation
 $material-fab-button: extend(
@@ -288,6 +295,11 @@ $material-fab-button: extend(
             rem(12px),
             rem(28px),
         ),
+        size: (
+            rem(48px),
+            rem(40px),
+            rem(32px),
+        ),
     )
 );
 
@@ -411,6 +423,7 @@ $light-button: (
 /// @requires {Map} $flat-elevation-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.
 $fluent-base-button: extend(
     $material-base-button,
     $flat-elevation-button,
@@ -427,6 +440,11 @@ $fluent-base-button: extend(
                 400,
             ),
         ),
+        size: (
+            rem(24px),
+            rem(32px),
+            rem(38px),
+        ),
     )
 );
 
@@ -906,6 +924,7 @@ $fluent-button: (
 /// @type {Map}
 /// @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.
 /// @requires {Map} $material-base-button
 /// @requires {Map} $flat-elevation-button
 $bootstrap-base-button: extend(
@@ -924,6 +943,11 @@ $bootstrap-base-button: extend(
                 50,
             ),
         ),
+        size: (
+            rem(31px),
+            rem(38px),
+            rem(48px),
+        ),
     )
 );
 
@@ -1391,6 +1415,7 @@ $indigo-base-button: extend($material-base-button, $flat-elevation-button);
 /// @prop {Color} disabled-background [transparent] - The disabled background color of a flat button.
 /// @prop {Map} shadow-color [color: ('gray', 300)] - The shadow color of a flat button.
 /// @prop {List} border-radius [(rem(20px), rem(0), rem(20px))] - The border radius used for flat button.
+/// @prop {List} size [(rem(28px), rem(32px), rem(36px))] - The size used for the flat button.
 /// @requires {Map} $material-flat-button
 /// @requires {Map} $indigo-base-button
 $indigo-flat-button: extend(
@@ -1443,6 +1468,11 @@ $indigo-flat-button: extend(
             rem(0),
             rem(20px),
         ),
+        size: (
+            rem(28px),
+            rem(32px),
+            rem(36px),
+        ),
     )
 );
 
@@ -1625,7 +1655,7 @@ $indigo-raised-button: extend(
 /// @prop {Map} hover-foreground [ color: ('gray', 50)] - The hover text color of a fab button.
 /// @prop {Map} focus-foreground [ color: ('gray', 50)] - The focus text color of a fab button.
 /// @prop {Map} focus-visible-foreground [ color: ('gray', 50)] - The focus-visible text color of a fab button.
-/// @prop {List} border-radius [(rem(28px), rem(12px), rem(28px))] - The border radius used for flat button.
+/// @prop {List} border-radius [(rem(36px), rem(42px), rem(48px))] - The border radius used for fab button.
 /// @requires {Map} $material-fab-button
 /// @requires {Map} $indigo-base-button
 /// @requires {Map} $indigo-raised-button
@@ -1664,6 +1694,11 @@ $indigo-fab-button: extend(
             rem(12px),
             rem(28px),
         ),
+        size: (
+            rem(36px),
+            rem(42px),
+            rem(48px),
+        ),
     )
 );
 

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

@@ -36,6 +36,7 @@
 /// @prop {Map} $disabled-text-color [color: ('gray', 500)] - The disabled chip text color.
 /// @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 {Map} $default-elevation-chip
 $light-chip: extend(
     $default-elevation-chip,
@@ -176,6 +177,11 @@ $light-chip: extend(
                 200,
             ),
         ),
+        size: (
+            rem(20px),
+            rem(24px),
+            rem(32px),
+        ),
     )
 );
 

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

@@ -32,6 +32,7 @@
 /// @prop {Map} border-color [color: ('gray', 300)] - The border color used for drop-down component.
 /// @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.
 /// @requires {Map} $default-elevation-drop-down
 $light-drop-down: extend(
     $default-elevation-drop-down,
@@ -143,6 +144,11 @@ $light-drop-down: extend(
             rem(0),
             rem(20px),
         ),
+        size: (
+            rem(28px),
+            rem(32px),
+            rem(40px),
+        ),
     )
 );
 

package/sass/themes/schemas/components/light/_grid-toolbar.scss

@@ -17,6 +17,7 @@
 /// @prop {Map} item-hover-text-color [color: ('gray', 600)] - The toolbar drop-down item hover text color.
 /// @prop {Map} item-focus-background [color: ('gray', 100)] - The toolbar drop-down item focus background color.
 /// @prop {Map} item-focus-text-color [color: ('gray', 600)] - The toolbar drop-down item focus text color.
+/// @prop {List} size [(rem(44px), rem(52px), rem(58px))] - The size used for the grid toolbar min-height.
 $light-grid-toolbar: (
     background-color: (
         color: (
@@ -72,6 +73,11 @@ $light-grid-toolbar: (
             600,
         ),
     ),
+    size: (
+        rem(44px),
+        rem(52px),
+        rem(58px),
+    ),
 );
 
 /// Generates a fluent grid-toolbar schema.

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

@@ -92,6 +92,10 @@
 /// @prop {Number} grid-elevation [2] - The elevation level, between 0-24, to be used for the grid.
 /// @prop {Number} drag-elevation [5] - The elevation level, between 0-24, to be used for movable elements (ex. column header).
 /// @prop {List} drop-area-border-radius [(rem(16px), rem(0), rem(16px))] - The border radius used for drop-area.
+/// @prop {List} header-size [(rem(32px), rem(40px), rem(50px))] - The size used for the grid header.
+/// @prop {List} drop-area-size [(rem(24px), rem(24px), rem(32px))] - The size used for the grid drop area.
+/// @prop {List} group-area-size [(rem(41), rem(49px), rem(57px))] - The size used for the grid group area.
+
 /// @requires {Map} $default-elevation-grid
 $light-grid: extend(
     $default-elevation-grid,
@@ -631,6 +635,21 @@ $light-grid: extend(
             rem(0),
             rem(16px),
         ),
+        header-size: (
+            rem(32px),
+            rem(40px),
+            rem(50px),
+        ),
+        drop-area-size: (
+            rem(24px),
+            rem(24x),
+            rem(32px),
+        ),
+        group-area-size: (
+            rem(41px),
+            rem(49x),
+            rem(57px),
+        ),
     )
 );
 

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

@@ -11,9 +11,15 @@
 /// @type {Map}
 /// @prop {Color} color ["'currentColor'"] - The icon color.
 /// @prop {Color} disabled-color ["'currentColor'"] - The disabled icon color.
+/// @prop {List} size [(rem(16px), rem(20px), rem(24px))] - The size used for the icon.
 $light-icon: (
     color: "'currentColor'",
     disabled-color: "'currentColor'",
+    size: (
+        rem(16px),
+        rem(20px),
+        rem(24px),
+    ),
 );
 
 /// Generates a fluent icon schema.

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

@@ -32,6 +32,7 @@
 @use './icon' as *;
 @use './input-group' as *;
 @use './list' as *;
+@use './label' as *;
 @use './navbar' as *;
 @use './navdrawer' as *;
 @use './overlay' as *;
@@ -87,6 +88,7 @@ $light-material-schema: (
     highlight: $light-highlight,
     icon: $light-icon,
     input-group: $light-input-group,
+    label: $material-label,
     list: $light-list,
     navbar: $light-navbar,
     nav-drawer: $light-navdrawer,
@@ -149,6 +151,7 @@ $light-fluent-schema: (
     highlight: $fluent-highlight,
     icon: $fluent-icon,
     input-group: $fluent-input-group,
+    label: $fluent-label,
     list: $fluent-list,
     navbar: $fluent-navbar,
     nav-drawer: $fluent-navdrawer,
@@ -211,6 +214,7 @@ $light-bootstrap-schema: (
     highlight: $bootstrap-highlight,
     icon: $bootstrap-icon,
     input-group: $bootstrap-input-group,
+    label: $bootstrap-label,
     list: $bootstrap-list,
     navbar: $bootstrap-navbar,
     nav-drawer: $bootstrap-navdrawer,
@@ -273,6 +277,7 @@ $light-indigo-schema: (
     highlight: $indigo-highlight,
     icon: $indigo-icon,
     input-group: $indigo-input-group,
+    label: $indigo-label,
     list: $indigo-list,
     navbar: $indigo-navbar,
     nav-drawer: $indigo-navdrawer,

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

@@ -62,6 +62,7 @@
 /// @prop {Color} input-suffix-background-filled [inherit] - The background color of an input suffix in the filled state.
 /// @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.
 /// @requires {Map} $default-elevation-input-group
 $light-input-group: extend(
     $default-elevation-input-group,
@@ -295,6 +296,11 @@ $light-input-group: extend(
             rem(0),
             rem(20px),
         ),
+        size: (
+            rem(40px),
+            rem(48px),
+            rem(56px),
+        ),
         success-shadow-color: (
             color: (
                 'success',
@@ -341,6 +347,7 @@ $light-input-group: extend(
 /// @prop {Map} input-suffix-background [color: ('gray', 100)] - The background color of an input suffix of type line, box and border.
 /// @prop {Map} input-suffix-background-filled [color: ('gray', 100)] - The background color of an input suffix in the filled state.
 /// @prop {Map} input-suffix-background--focused [color: ('gray', 100)] - The background color of an input suffix in the focused state.
+/// @prop {List} size [(rem(32px), rem(40px), rem(48px))] - The size used for the input group.
 /// @requires {Map} $light-input-group
 /// @requires {Map} $fluent-elevation-input-group
 $fluent-input-group: extend(
@@ -488,6 +495,11 @@ $fluent-input-group: extend(
             rem(0),
             rem(20px),
         ),
+        size: (
+            rem(32px),
+            rem(40px),
+            rem(48px),
+        ),
     )
 );
 
@@ -516,6 +528,7 @@ $fluent-input-group: extend(
 /// @prop {Map} input-suffix-background [color: ('gray', 300)] - The background color of an input suffix in the idle state.
 /// @prop {Map} input-suffix-background-filled [color: ('gray', 300)] - The background color of an input suffix in the filled state.
 /// @prop {Map} input-suffix-background--focused [color: ('gray', 300)] - The background color of an input suffix in the focused state.
+/// @prop {List} size [(rem(31px), rem(38px), rem(48px))] - The size used for the input group.
 /// @requires {Map} $light-input-group
 $bootstrap-input-group: extend(
     $light-input-group,
@@ -641,6 +654,11 @@ $bootstrap-input-group: extend(
                 400,
             ),
         ),
+        size: (
+            rem(31px),
+            rem(38px),
+            rem(48px),
+        ),
     )
 );
 

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

@@ -0,0 +1,53 @@
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a light material label schema.
+/// @type {Map}
+/// @prop {Color} color [color: ('gray', 700)] - The label color.
+$material-label: (
+    color: (
+        color: (
+            'gray',
+            700,
+        ),
+    ),
+);
+
+/// Generates a light fluent label schema.
+/// @type {Map}
+/// @prop {Color} color [color: ('gray', 900)] - The label color.
+$fluent-label: (
+    color: (
+        color: (
+            'gray',
+            900,
+        ),
+    ),
+);
+
+/// Generates a light bootstrap label schema.
+/// @type {Map}
+/// @prop {Color} color [color: ('gray', 700)] - The label color.
+$bootstrap-label: (
+    color: (
+        color: (
+            'gray',
+            700,
+        ),
+    ),
+);
+
+/// Generates a light indigo label schema.
+/// @type {Map}
+/// @prop {Color} color [color: ('gray', 900)] - The label color.
+$indigo-label: (
+    color: (
+        color: (
+            'gray',
+            900,
+        ),
+    ),
+);

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

@@ -12,6 +12,7 @@
 /// @prop {Map} text-color [color: ('gray', 800)] - The text color.
 /// @prop {Map} background-color [color: ('gray', 100)] - The background color of the paging panel.
 /// @prop {Map} border-color [color: ('gray', 200)] - The border color of the paging panel.
+/// @prop {List} size [(rem(40px), rem(48px), rem(56px))] - The size used for the paginator.
 $light-pagination: (
     text-color: (
         color: (
@@ -33,6 +34,11 @@ $light-pagination: (
             200,
         ),
     ),
+    size: (
+        rem(44px),
+        rem(48px),
+        rem(56px),
+    ),
 );
 
 /// Generates a light pagination schema.

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

@@ -23,6 +23,7 @@
 /// @prop {Map} foreground-disabled [color: ('gray', 500)] - The color used for the content of the disabled tree node.
 /// @prop {Map} drop-area-color [color: ('secondary'] - The background color used for the tree node drop aria.
 /// @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.
 $light-tree: (
     background: (
         color: (
@@ -100,6 +101,11 @@ $light-tree: (
             0.1,
         ),
     ),
+    size: (
+        rem(32px),
+        rem(40px),
+        rem(50px),
+    ),
 );
 
 /// Generates a light fluent tree schema.