igniteui-theming 23.2.2 → 23.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "23.2.2",
+  "version": "23.3.0",
   "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/components/calendar/_calendar-theme.scss

@@ -358,7 +358,7 @@
     $name: #{config.variable-prefix() + '-' + 'calendar'};
     $selector: (
         #{config.element-prefix() + '-' + 'calendar'},
-        #{config.element-prefix() + '-' + 'date-picker'},
+        #{'.' + config.element-prefix() + '-' + 'date-picker'},
         #{config.element-prefix() + '-' + 'month-picker'},
         '.igx-days-view--standalone',
         '.igx-calendar-view--standalone'

package/sass/themes/components/chip/_chip-theme.scss

@@ -26,6 +26,7 @@
 /// @param {Color} $disabled-border-color [null] - The disabled chip border color.
 ///
 /// @param {Color} $ghost-background [null] - The chip ghost background color.
+/// @param {Color} $ghost-text-color [null] - The chip ghost text color.
 /// @param {box-shadow} $ghost-shadow [null] - The chip ghost shadow.
 ///
 /// @param {Color} $hover-text-color [null] - The chip text hover color.
@@ -65,6 +66,7 @@
     $background: null,
     $border-color: null,
     $ghost-background: null,
+    $ghost-text-color: null,
 
     $disabled-text-color: null,
     $disabled-background: null,
@@ -114,6 +116,10 @@
         $text-color: adaptive-contrast(var(--background));
     }
 
+    @if not($ghost-text-color) and $ghost-background {
+        $ghost-text-color: adaptive-contrast(var(--ghost-background));
+    }
+
     @if not($border-color) and $background {
         $border-color: var(--background);
     }
@@ -222,6 +228,7 @@
             background: $background,
             border-color: $border-color,
             ghost-background: $ghost-background,
+            ghost-text-color: $ghost-text-color,
 
             disabled-text-color: $disabled-text-color,
             disabled-background: $disabled-background,

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

@@ -112,6 +112,7 @@ $dark-bootstrap-chip: extend(
 /// @prop {Map} focus-outline-color [contrast-color: ('gray', 50, .2)] - The chip focus outline color.
 ///
 /// @prop {Map} ghost-background [color: ('gray', 100)] - The chip ghost background color.
+/// @prop {Map} ghost-text-color [contrast-color: ('gray', 100, .8)] - The chip ghost text color.
 ///
 /// @prop {Map} disabled-text-color [contrast-color: ('gray', 50, .2)] - The disabled chip text color.
 /// @prop {Map} disabled-background [contrast-color: ('gray', 50, .05)] - The disabled chip background color.
@@ -174,6 +175,14 @@ $dark-indigo-chip: extend(
             ),
         ),
 
+        ghost-text-color: (
+            contrast-color: (
+                'gray',
+                100,
+                0.8,
+            ),
+        ),
+
         border-color: (
             color: (
                 'gray',

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

@@ -29,6 +29,7 @@
 /// @prop {Map} cell-selected-within-background [color: ('secondary', 'A400')] - The background of the selected cell inside a selected row/column.
 /// @prop {Map} cell-selected-within-text-color [contrast-color: ('secondary', 'A400')] - The color of the selected cell inside a selected row/column.
 /// @prop {Map} grouparea-background [color: ('gray', 50)] - The grid group area background color.
+/// @prop {Map} grouparea-color [color: ('gray', 500)] - The grid group area color.
 /// @prop {Map} group-row-background [color: ('gray', 50)] - The grid group row background color.
 /// @prop {Map} group-row-selected-background [color: ('gray', 100)] - The drop area background on drop color.
 $base-dark-grid: (
@@ -172,6 +173,13 @@ $base-dark-grid: (
         ),
     ),
 
+    grouparea-color: (
+        color: (
+            'gray',
+            500,
+        ),
+    ),
+
     group-row-background: (
         color: (
             'gray',
@@ -190,7 +198,6 @@ $base-dark-grid: (
 /// Generates a dark material grid schema based on a mix of $material-grid and $base-dark-grid.
 /// @type {Map}
 /// @prop {Map} header-text-color [color: ('gray', 800, .7)] - The table header text color.
-/// @prop {Map} grouparea-color [color: ('gray', 500)] - The grid group area color.
 /// @prop {Map} group-label-column-name-text [color: ('primary', 500)] - The grid group row column name text color.
 /// @prop {Map} group-label-icon [color: ('primary', 500)] - The grid group row icon color.
 /// @prop {Map} group-count-text-color [color: ('gray', 600)] - The grid group row cont badge text color.
@@ -209,13 +216,6 @@ $dark-material-grid: extend(
             ),
         ),
 
-        grouparea-color: (
-            color: (
-                'gray',
-                500,
-            ),
-        ),
-
         group-label-column-name-text: (
             color: (
                 'primary',
@@ -260,7 +260,6 @@ $dark-material-grid: extend(
 /// @prop {Map} row-selected-hover-text-color [contrast-color: ('gray', 200)] - The selected row hover text color.
 /// @prop {Map} cell-selected-within-background [color: ('gray', 200)] - The background of the selected cell inside a selected row/column.
 /// @prop {Map} cell-selected-within-text-color [contrast-color: ('gray', 200)] - The color of the selected cell inside a selected row/column.
-/// @prop {Map} grouparea-color [color: ('gray', 500)] - The grid group area color.
 /// @prop {Map} group-row-background [color: ('gray', 100, .5)] - The grid group row background color.
 /// @prop {Map} group-count-text-color [color: ('gray', 600)] - The grid group row cont badge text color.
 /// @requires $fluent-grid
@@ -326,13 +325,6 @@ $dark-fluent-grid: extend(
             ),
         ),
 
-        grouparea-color: (
-            color: (
-                'gray',
-                500,
-            ),
-        ),
-
         group-row-background: (
             color: (
                 'gray',
@@ -366,7 +358,6 @@ $dark-fluent-grid: extend(
 /// @prop {Map} content-background [color: ('gray', 50)] - The table body background color.
 /// @prop {Map} drop-area-background [color: ('gray', 100, .5)] - The drop area background color.
 /// @prop {Map} grouparea-background [color: 'surface'] - The grid group area background color.
-/// @prop {Map} grouparea-color [contrast-color: 'surface'] - The grid group area color.
 /// @prop {Map} summaries-patch-background [color: ('gray', 100)] - The leading summaries patch backround. Used in hierarchical grids.
 /// @requires $bootstrap-grid
 /// @requires $base-dark-grid

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

@@ -14,6 +14,7 @@
 /// @prop {Map} background [color: ('gray', 200)] - The chip background color.
 /// @prop {Color} border-color [transparent] - The chip border color.
 /// @prop {Map} ghost-background [color: ('gray', 400))] - The chip ghost background color.
+/// @prop {Map} ghost-text-color [contrast-color: ('gray', 400))] - The chip ghost text color.
 /// @prop {Map} hover-text-color [contrast-color: ('gray', 400)] - The chip text hover color.
 /// @prop {Map} hover-background [color: ('gray', 400)] - The chip hover background color.
 /// @prop {Color} hover-border-color [transparent] - The chip hover border color.
@@ -63,6 +64,13 @@ $light-chip: extend(
             ),
         ),
 
+        ghost-text-color: (
+            contrast-color: (
+                'gray',
+                400,
+            ),
+        ),
+
         hover-text-color: (
             contrast-color: (
                 'gray',
@@ -235,6 +243,7 @@ $material-chip: extend(
 /// @type {Map}
 /// @prop {Map} text-color [color: ('gray', 700)] - The chip text color.
 /// @prop {Map} ghost-background [color: ('primary', 500)] - The chip ghost background color.
+/// @prop {Map} ghost-text-color [contrast-color: ('primary', 500)] - The chip ghost text color.
 /// @prop {Map} hover-background [color: ('gray', 200)] - The chip hover background color.
 /// @prop {Map} hover-text-color [contrast-color: ('gray', 200)] - The chip text hover color.
 /// @prop {Map} selected-text-color [contrast-color: ('primary', 700))] - The selected chip text color.
@@ -266,6 +275,13 @@ $fluent-chip: extend(
             ),
         ),
 
+        ghost-text-color: (
+            contrast-color: (
+                'primary',
+                500,
+            ),
+        ),
+
         hover-text-color: (
             contrast-color: (
                 'gray',
@@ -468,6 +484,7 @@ $bootstrap-chip: extend(
 /// @prop {Map} focus-selected-outline-color [color: ('primary', 400, .5)] - The selected chip focus outline color.
 ///
 /// @prop {Map} ghost-background [color: ('gray', 200)] - The chip ghost background color.
+/// @prop {Map} ghost-text-color [color: ('gray', 700)] - The chip ghost text color.
 ///
 /// @prop {Map} disabled-text-color [color: ('gray', 900, .2)] - The disabled chip text color.
 /// @prop {Map} disabled-background [contrast-color: ('gray', 900)] - The disabled chip background color.
@@ -628,6 +645,13 @@ $indigo-chip: extend(
             ),
         ),
 
+        ghost-text-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+
         disabled-text-color: (
             color: (
                 'gray',

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

@@ -49,7 +49,7 @@
 /// @prop {Map} resize-line-color [color: ('secondary', 500)] - The table header resize line color.
 /// @prop {Map} drop-indicator-color [color: ('secondary', 500)] - The color of the drop indicator.
 /// @prop {Map} grouparea-background [color: ('gray', 100)] - The grid group area background color.
-/// @prop {Map} grouparea-color [color: ('gray', 500)] - The grid group area color.
+/// @prop {Map} grouparea-color [color: ('gray', 600)] - The grid group area color.
 /// @prop {Map} group-row-background [color: ('gray', 100)] - The grid group row background color.
 /// @prop {Map} group-row-selected-background [color: ('gray', 200)] - The drop area background on drop color.
 /// @prop {Map} active-expand-icon-color [color: ('gray', 500)] - The drop area background on drop color.
@@ -97,7 +97,7 @@ $light-grid: extend(
         grouparea-color: (
             color: (
                 'gray',
-                500,
+                600,
             ),
         ),
 
@@ -611,7 +611,6 @@ $light-grid: extend(
 /// @prop {Map} row-selected-hover-background [color: ('secondary', 100)] - The selected row hover background.
 /// @prop {Map} row-selected-hover-text-color [contrast-color: ('secondary', 100)] - The selected row hover text color.
 /// @prop {Map} cell-active-border-color [color: ('secondary', 500)] - The active(focused) cell border color.
-/// @prop {Map} grouparea-color [color: ('gray', 600)] - The grid group area color.
 /// @prop {Map} group-label-column-name-text [color: ('primary', 800)] - The grid group row column name text color.
 /// @prop {Map} group-label-icon [color: ('primary', 800)] - The grid group row icon color.
 /// @prop {Map} group-count-text-color [color: ('gray', 700)] - The grid group row cont badge text color.
@@ -692,13 +691,6 @@ $material-grid: extend(
             ),
         ),
 
-        grouparea-color: (
-            color: (
-                'gray',
-                600,
-            ),
-        ),
-
         group-label-column-name-text: (
             color: (
                 'primary',
@@ -740,7 +732,6 @@ $material-grid: extend(
 /// @prop {Map} pinned-border-color [color: ('gray', 200)] - The color of the pinned border.
 /// @prop {Map} cell-active-border-color [color: ('primary', 100)] - The active(focused) cell border color.
 /// @prop {Map} grouparea-background [color: 'surface'] - The grid group area background color.
-/// @prop {Map} grouparea-color [color: ('gray', 600)] - The grid group area color.
 /// @prop {Map} group-row-background [color: ('gray', 50)] - The grid group row background color.
 /// @prop {Map} group-row-selected-background [color: ('gray', 100)] - The drop area background on drop color.
 /// @prop {Map} group-count-text-color [color: ('gray', 700)] - The grid group row cont badge text color.
@@ -838,13 +829,6 @@ $fluent-grid: extend(
             color: 'surface',
         ),
 
-        grouparea-color: (
-            color: (
-                'gray',
-                600,
-            ),
-        ),
-
         group-row-background: (
             color: (
                 'gray',
@@ -1127,6 +1111,7 @@ $bootstrap-grid: extend(
 /// @prop {Map} cell-editing-background [color: ('gray' 200)] - The background for the cell in editing mode.
 /// @prop {Map} row-selected-hover-text-color [color: ('gray', 900)] - The selected row hover text color.
 /// @prop {Map} grouparea-background [color: ('surface', 500)] - The grid group area background color.
+/// @prop {Map} grouparea-color [color: ('gray', 500)] - The grid group area color.
 /// @prop {Map} drop-area-background [color: ('gray', 200)] - The drop area background color.
 /// @prop {Map} row-hover-text-color [color: ('gray', 900)] - The hover row text color.
 /// @prop {Map} row-selected-text-color [color: ('gray', 900)] - The selected row text color.
@@ -1433,6 +1418,13 @@ $indigo-grid: extend(
             ),
         ),
 
+        grouparea-color: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
+
         drop-area-background: (
             color: (
                 'gray',