igniteui-theming 27.2.1 → 27.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "27.2.1",
+  "version": "27.4.0",
   "description": "A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/sass/themes/components/grid/_grid-theme.scss

@@ -52,6 +52,7 @@
 /// @param {String} $row-border-width [null] - The row bottom border width.
 /// @param {String} $row-border-style [null] - The row bottom border style.
 /// @param {Color} $row-border-color [null] - The row bottom border color. Auto-derived from content-background.
+/// @param {Color} $action-border-color [null] - The color used for action borders.
 /// @param {String} $pinned-border-width [null] - The border width of the pinned border.
 /// @param {String} $pinned-border-style [null] - The CSS border style of the pinned border.
 /// @param {Color} $pinned-border-color [null] - The color of the pinned border. Auto-derived from content-background.
@@ -160,6 +161,8 @@
     $row-border-style: null,
     $row-border-color: null,
 
+    $action-border-color: null,
+
     $pinned-border-width: null,
     $pinned-border-style: null,
     $pinned-border-color: null,
@@ -396,6 +399,10 @@
         $row-border-color: hsl(from color-mix(in srgb, var(--foreground) 16%, var(--background)) h s l / 0.38);
     }
 
+    @if not($action-border-color) and $foreground and $background {
+        $action-border-color: color-mix(in srgb, var(--foreground) 20%, var(--background));
+    }
+
     @if not($pinned-border-color) and $foreground and $background {
         $pinned-border-color: color-mix(in srgb, var(--foreground) 20%, var(--background));
     }
@@ -682,6 +689,8 @@
             row-border-style: $row-border-style,
             row-border-color: $row-border-color,
 
+            action-border-color: $action-border-color,
+
             pinned-border-width: $pinned-border-width,
             pinned-border-style: $pinned-border-style,
             pinned-border-color: $pinned-border-color,

package/sass/themes/components/navdrawer/_navdrawer-theme.scss

@@ -39,6 +39,8 @@
 /// @param {Color} $shadow [null] - Sets a custom shadow to be used by the drawer.
 /// @param {List} $border-radius [null] - The border radius used for the navdrawer.
 /// @param {List} $item-border-radius [null] - The border radius used for the navdrawer item.
+/// @param {Number} $size [null] - The width of the navigation drawer in its expanded (full) state.
+/// @param {Number} $size--mini [null] - The width of the navigation drawer in its mini state.
 /// @requires $light-material-schema
 /// @example scss - Change the background and item colors
 ///   $navdrawer-theme: navdrawer-theme(
@@ -54,6 +56,9 @@
     $border-radius: null,
     $item-border-radius: null,
 
+    $size: null,
+    $size--mini: null,
+
     $background: null,
     $border-color: null,
 
@@ -139,6 +144,8 @@
             selector: $selector,
             border-radius: $border-radius,
             item-border-radius: $item-border-radius,
+            size: $size,
+            size--mini: $size--mini,
             background: $background,
             border-color: $border-color,
             item-text-color: $item-text-color,

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

@@ -12,6 +12,7 @@
 /// @prop {Color} content-background [color: 'surface'] - The table body background color.
 /// @prop {Map} drop-area-background [color: ('gray', 100, .4)] - The drop area background color.
 /// @prop {Map} header-border-color [color: ('gray', 200)] - The color used for header borders.
+/// @prop {Map} action-border-color [color: ('gray', 200)] - The color used for action borders.
 /// @prop {Map} header-background [color: ('gray', 100)] - The table header background color.
 /// @prop {Map} header-selected-background [color: ('secondary', 600)] - The table header background color when selected (ex. column selection).
 /// @prop {Map} header-selected-text-color [contrast-color: ('secondary', 600)] - The table header text color when selected (ex. column selection).
@@ -54,6 +55,13 @@ $base-dark-grid: (
         ),
     ),
 
+    action-border-color: (
+        color: (
+            'gray',
+            200,
+        ),
+    ),
+
     header-background: (
         color: (
             'gray',
@@ -456,6 +464,7 @@ $dark-bootstrap-grid: extend(
 /// @type Map
 /// @prop {Map} content-text-color [contrast-color: ('gray', 50, .8)] - The table body text color.
 /// @prop {Map} header-border-color [color: ('gray', 200)] - The color used for header borders.
+/// @prop {Map} action-border-color [color: ('gray', 200)] - The color used for action borders.
 /// @prop {Map} header-text-color [contrast-color: ('gray', 50, .9)] - The table header text color.
 /// @prop {Map} header-selected-background [color: ('primary', 900)] - The table header background color when selected (ex. column selection).
 /// @prop {Map} header-selected-text-color [contrast-color: ('gray' 50)] - The table header text color when selected (ex. column selection).
@@ -528,6 +537,13 @@ $dark-indigo-grid: extend(
             ),
         ),
 
+        action-border-color: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+
         header-text-color: (
             contrast-color: (
                 'gray',

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

@@ -17,6 +17,7 @@
 /// @prop {Number} header-border-width [1px] - The border width used for header borders.
 /// @prop {String} header-border-style [solid] - The border style used for header borders.
 /// @prop {Map} header-border-color [color: ('gray', 400)] - The color used for header borders.
+/// @prop {Map} action-border-color [color: ('gray', 400)] - The color used for action borders.
 /// @prop {Map} ghost-header-text-color [color: ('gray', 700)] - The dragged header text color.
 /// @prop {Map} ghost-header-icon-color [color: ('gray', 600)] - The dragged header icon color.
 /// @prop {Map} ghost-header-background [color: ('gray', 50)] - The dragged header background color.
@@ -179,6 +180,13 @@ $light-grid: extend(
             ),
         ),
 
+        action-border-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+
         ghost-header-background: (
             color: (
                 'gray',
@@ -839,6 +847,7 @@ $material-grid: extend(
 /// @prop {Map} header-selected-background [color: ('gray', 200)] - The table header background color when selected (ex. column selection).
 /// @prop {Map} header-selected-text-color [contrast-color: ('gray', 200)] - The table header text color when selected (ex. column selection).
 /// @prop {Map} header-border-color [color: ('gray', 300)] - The color used for header borders.
+/// @prop {Map} action-border-color [color: ('gray', 300)] - The color used for action borders.
 /// @prop {Map} row-selected-background [color: ('gray', 200)] - The selected row background color.
 /// @prop {Map} row-selected-hover-background [color: ('gray', 300)] - The selected row hover background.
 /// @prop {Map} body-column-selected-border-color [color: ('gray', 200)] - The border color used for the body column when in group-row state.
@@ -904,6 +913,13 @@ $fluent-grid: extend(
             ),
         ),
 
+        action-border-color: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+
         row-border-color: (
             color: (
                 'gray',
@@ -1226,6 +1242,7 @@ $bootstrap-grid: extend(
 /// @prop {Map} header-selected-background [color: ('primary', 50)] - The table header background color when selected (ex. column selection).
 /// @prop {Map} header-selected-text-color [color: 'gray', 900] - The table header text color when selected (ex. column selection).
 /// @prop {Map} header-border-color [color: ('gray', 400)] - The color used for header borders.
+/// @prop {Map} action-border-color [color: ('gray', 400)] - The color used for action borders.
 /// @prop {Map} filtering-row-background [color: ('surface', 500)] - The background color of the filtering row.
 /// @prop {Map} filtering-dialog-background [contrast-color: ('gray', 900)] - The background color of the advanced filtering dialog.
 /// @prop {Map} edited-row-indicator [color: ('primary', 400)] - The indicator's color of edited row.
@@ -1330,6 +1347,13 @@ $indigo-grid: extend(
             ),
         ),
 
+        action-border-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+
         filtering-header-background: (
             color: (
                 'gray',

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

@@ -15,10 +15,14 @@
 /// @prop {Map} item-disabled-icon-color [color: ('gray', 400)] - The item's disabled icon color.
 /// @prop {Map} elevation [16] - The elevation level, between 0-24, to be used for the drawer.
 /// @prop {List} border-radius [(rem(0), rem(0), rem(36px))] - The border radius used for the navdrawer component.
+/// @prop {Number} size [rem(240px)] - The width of the navigation drawer in its expanded (full) state.
+/// @prop {Number} size--mini [rem(56px)] - The width of the navigation drawer in its mini state.
 /// @requires $default-elevation-navdrawer
 $light-navdrawer: extend(
     $default-elevation-navdrawer,
     (
+        size: rem(240px),
+        size--mini: rem(56px),
         background: (
             color: 'surface',
         ),
@@ -169,10 +173,12 @@ $material-navdrawer: extend(
 /// @prop {Map} item-icon-color [ color: ('primary', 500)] - The item's icon color.
 /// @prop {Map} item-header-text-color [color: ('gray', 800)] - The header's idle text color.
 /// @prop {Map} typography [ item: (value: 'body-2'), header: (value: 'subtitle-1')] - The typography styles used for the component.
+/// @prop {Number} size--mini [rem(40px)] - The width of the navigation drawer in its mini state.
 /// @requires $light-navdrawer
 $fluent-navdrawer: extend(
     $light-navdrawer,
     (
+        size--mini: rem(40px),
         item-border-radius: 0,
         item-hover-icon-color: (
             color: (
@@ -262,10 +268,12 @@ $fluent-navdrawer: extend(
 /// @prop {Map} item-icon-color [ color: ('gray', 900)] - The item's icon color.
 /// @prop {Map} item-header-text-color [color: ('gray', 900)] - The header's idle text color.
 /// @prop {Map} typography [item: (value: 'body-2'), header: (value: 'caption')] - The typography styles used for the component.
+/// @prop {Number} size--mini [rem(88px)] - The width of the navigation drawer in its mini state.
 /// @requires $light-navdrawer
 $bootstrap-navdrawer: extend(
     $light-navdrawer,
     (
+        size--mini: rem(88px),
         item-border-radius: (
             border-radius: (
                 rem(4px),
@@ -365,10 +373,12 @@ $bootstrap-navdrawer: extend(
 /// @prop {Map} border-color [color: ('gray', 300)] - The navigation drawer right border color.
 /// @prop {List} item-border-radius [(rem(4px), rem(0), rem(4px))] - The border radius used for the navdrawer items.
 /// @prop {Map} typography [item: (value: 'subtitle-2'), header: (value: 'overline')] - The typography styles used for the component.
+/// @prop {Number} size--mini [rem(48px)] - The width of the navigation drawer in its mini state.
 /// @requires $light-navdrawer
 $indigo-navdrawer: extend(
     $light-navdrawer,
     (
+        size--mini: rem(48px),
         border-color: (
             color: (
                 'gray',