igniteui-theming 23.2.3 → 23.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "23.2.3",
+  "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/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',