igniteui-theming 4.1.0-beta.1 → 4.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "4.1.0-beta.1",
+  "version": "4.2.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/color/_functions.scss

@@ -177,12 +177,15 @@ $_enhanced-accessibility: false;
     $s: #{var(--ig-#{$color}-#{$variant})};
     $contrast: if(meta.type-of($variant) == string, string.index($variant, 'contrast'), false);
     $meta: if($palette, map.get($palette, '_meta'), null);
+    $_alpha: if($opacity, $opacity, 1);
+    $_hsl-alpha: hsla($s, if($opacity, $opacity, $a));
+    $_mix-alpha: color-mix(in oklch, $s #{$_alpha * 100%}, transparent);
 
     @if not($palette) or not($meta) {
-        @return if($contrast, $s, hsla($s, if($opacity, $opacity, $a)));
+        @return if($contrast, $_mix-alpha, $_hsl-alpha);
     }
 
-    @return rgba(map.get($c, $variant), $alpha: if($opacity, $opacity, 1));
+    @return rgba(map.get($c, $variant), $alpha: $_alpha);
 }
 
 /// Retrieves a contrast text color for a given color variant from a color palette.
@@ -191,6 +194,7 @@ $_enhanced-accessibility: false;
 /// @param {Map} $palette [null] - The source palette map (optional).
 /// @param {String} $color [primary] - The target color from the color palette.
 /// @param {Number | String} $variant [500] - The target color shade from the color palette.
+/// @param {Number} $opacity [null] - Optional opacity to apply to the color shade.
 /// @requires {function} color
 /// @returns {Color | String} - The raw contrast color shade or CSS variable from the palette.
 /// @example scss without passing a palette
@@ -198,8 +202,8 @@ $_enhanced-accessibility: false;
 ///      background: color($color: 'primary', $variant: 200);
 ///      color: contrast-color($color: 'primary', $variant: 200);
 ///    }
-@function contrast-color($palette: null, $color: primary, $variant: 500) {
-    @return color($palette, $color, #{$variant}-contrast);
+@function contrast-color($palette: null, $color: primary, $variant: 500, $opacity: null) {
+    @return color($palette, $color, #{$variant}-contrast, $opacity);
 }
 
 /// Returns a contrast color for a passed color.

package/sass/themes/schemas/components/dark/_button-group.scss

@@ -11,7 +11,9 @@
 /// @type {Map}
 /// @prop {Map} item-disabled-border [color: ('gray', 100)] - The border color for a disabled item in the button group.
 /// @prop {Map} item-border-color [color: ('gray', 100)] - The border color between button group items.
+/// @prop {Map} item-focused-border-color [color: ('gray', 100)] - The focused border color for an item from the button group.
 /// @prop {Map} item-hover-background [color: ('gray', 100), .8] - The hover background color for button group items.
+/// @prop {Map} item-focused-background [color: ('gray', 100), .8] - The focused background color for button group items.
 /// @prop {Map} item-selected-background [color: ('gray', 200)] - The background color for a selected item in the button group.
 /// @prop {Map} item-selected-hover-background [color: ('gray', 300, .8)] - The background color for a selected item in hover or focus state in the button group.
 /// @prop {Map} item-selected-border-color [color: ('gray', 300)] - The border color for button group selected items.
@@ -24,6 +26,14 @@ $base-dark-button-group: (
         ),
     ),
 
+    item-focused-background: (
+        color: (
+            'gray',
+            100,
+            0.8,
+        ),
+    ),
+
     item-selected-background: (
         color: (
             'gray',
@@ -53,6 +63,13 @@ $base-dark-button-group: (
         ),
     ),
 
+    item-focused-border-color: (
+        color: (
+            'gray',
+            100,
+        ),
+    ),
+
     item-disabled-border: (
         color: (
             'gray',
@@ -69,16 +86,17 @@ $dark-button-group: extend($light-button-group, $base-dark-button-group);
 
 /// Generates a dark fluent button-group schema based on a mix of $fluent-button-group and $base-dark-button-group
 /// @type {Map}
-/// @prop {Map} item-border-color [color: ('gray', 100)] - The border color for button group items.
-/// @prop {Map} item-selected-border-color [color: ('gray', 100)] - The border color for button group selected items.
-/// @prop {Map} item-disabled-border: [color: ('gray', 100)] - The border color for button group disabled items.
+/// @prop {Map} item-border-color [color: ('gray', 400)] - The border color for button group items.
+/// @prop {Map} item-focused-border-color [color: ('gray', 400)] - The focused border color for button group items.
+/// @prop {Map} item-disabled-border: [color: ('gray', 400)] - The border color for button group disabled items.
 /// @prop {Map} item-text-color [color: ('gray', 900)] - The text color for button group items.
-/// @prop {Map} item-hover-text-color [color: ('primary', 200)] - The text color for button group items on hover.
-/// @prop {Color} item-hover-background [color: ('gray', 50)] - The background color for button group items on hover.
-/// @prop {Map} item-selected-background [color: ('gray', 100, .5)] - The background color for button group selected items.
-/// @prop {Map} item-selected-hover-background [color: ('gray', 100, .5)] - The background color for button group selected items on hover.
-/// @prop {Map} item-selected-text-color [color: ('primary', 200)] - The text color for button group selected items.
-/// @prop {Color} disabled-background-color [color: ('gray', 50)] - The background color for button group disabled items.
+/// @prop {Map} item-hover-background [color: ('gray', 50)] - The background color for button group items on hover.
+/// @prop {Map} item-focused-background [color: ('gray', 100)] - The focused background color for button group items.
+/// @prop {Map} item-selected-background [color: ('gray', 200)] - The background color for button group selected items.
+/// @prop {Map} item-selected-hover-background [color: ('gray', 300)] - The background color for a selected item in hover or focus state in the button group.
+/// @prop {Map} item-selected-border-color [color: ('gray', 400)] - The border color for button group selected items.
+/// @prop {Map} disabled-background-color [color: ('gray', 50)] - The background color for button group disabled items.
+/// @prop {Map} disabled-text-color [color: ('gray', 300)]- The text/icon color for a disabled item in the button group.
 /// @requires $fluent-button-group
 /// @requires $base-dark-button-group
 $dark-fluent-button-group: extend(
@@ -92,61 +110,59 @@ $dark-fluent-button-group: extend(
             ),
         ),
 
-        item-selected-text-color: (
+        item-hover-background: (
             color: (
-                'primary',
-                200,
+                'gray',
+                50,
             ),
         ),
 
-        item-hover-text-color: (
+        item-focused-background: (
             color: (
-                'primary',
-                200,
+                'gray',
+                100,
             ),
         ),
 
-        item-hover-background: (
+        item-selected-background: (
             color: (
                 'gray',
-                50,
+                200,
             ),
         ),
 
-        item-selected-background: (
+        item-selected-hover-background: (
             color: (
                 'gray',
-                100,
-                0.5,
+                300,
             ),
         ),
 
-        item-selected-hover-background: (
+        item-border-color: (
             color: (
                 'gray',
-                100,
-                0.5,
+                400,
             ),
         ),
 
-        item-border-color: (
+        item-focused-border-color: (
             color: (
                 'gray',
-                100,
+                400,
             ),
         ),
 
         item-selected-border-color: (
             color: (
                 'gray',
-                100,
+                400,
             ),
         ),
 
         item-disabled-border: (
             color: (
                 'gray',
-                100,
+                400,
             ),
         ),
 
@@ -156,6 +172,13 @@ $dark-fluent-button-group: extend(
                 50,
             ),
         ),
+
+        disabled-text-color: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
     )
 );
 

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

@@ -9,41 +9,54 @@
 
 /// Generates a dark calendar schema.
 /// @type {Map}
-
-/// Generates a dark calendar schema.
-/// @type {Map}
+/// @prop {Map} date-disabled-text-color [color: ('gray', 500)] - The text color for disabled dates.
+/// @prop {Map} date-selected-hover-foreground [contrast-color: ('secondary', 500)] - The hover text color for the selected date.
+/// @prop {Map} date-selected-focus-foreground [contrast-color: ('secondary', 500)] - The focus text color for the selected date.
 /// @requires $light-calendar
-$dark-calendar: extend($light-calendar);
-
-/// Generates a dark fluent calendar schema.
-/// @type {Map}
-/// @prop {Map} date-disabled-foreground [color: ('gray', 300)] - The foreground of disabled dates.
-/// @requires $fluent-calendar
-$dark-fluent-calendar: extend(
-    $fluent-calendar,
+$dark-calendar: extend(
+    $light-calendar,
     (
-        date-disabled-foreground: (
+        date-disabled-text-color: (
             color: (
                 'gray',
-                300,
+                500,
+            ),
+        ),
+
+        date-selected-hover-foreground: (
+            contrast-color: (
+                'secondary',
+                500,
+            ),
+        ),
+
+        date-selected-focus-foreground: (
+            contrast-color: (
+                'secondary',
+                500,
             ),
         ),
     )
 );
 
+/// Generates a dark fluent calendar schema.
+/// @type {Map}
+/// @requires $fluent-calendar
+$dark-fluent-calendar: extend($fluent-calendar);
+
 /// Generates a dark bootstrap calendar schema.
 /// @type {Map}
 /// @prop {Map} content-background [color: ('gray', 50)] - The main content background color.
 /// @prop {Color} picker-background-color [color: ('gray', 100, .5)] - The igx calendar picker background color.
 /// @prop {Map} border-color [color: ('gray', 100)] - The calendar border color.
-/// @prop {Map} picker-foreground [contrast-color: ('surface')]- The idle picker month/year color.
-/// @prop {Map} date-selected-foreground [contrast-color: ('secondary', 600)] - The text color for the selected date.
-/// @prop {Map} date-current-foreground [contrast-color: 'surface'] - The text color for the current date.
-/// @prop {Map} date-current-hover-foreground [color: ('surface')] - The hover text color for the current date.
-/// @prop {Map} date-current-focus-foreground [color: ('surface')] - The focus text color for the current date.
+/// @prop {Map} picker-text-color [contrast-color: ('surface')]- The idle picker month/year color.
+/// @prop {Map} date-selected-text-color [contrast-color: ('secondary', 600)] - The text color for the selected date.
+/// @prop {Map} date-current-text-color [contrast-color: 'surface'] - The text color for the current date.
+/// @prop {Map} date-current-hover-text-color [color: ('surface')] - The hover text color for the current date.
+/// @prop {Map} date-current-focus-text-color [color: ('surface')] - The focus text color for the current date.
 /// @prop {Map} week-number-background [('gray', 300, .2)] - The background color of the week number column.
-/// @prop {Map} date-selected-hover-foreground [contrast-color: ('surface')] - The hover text color for the selected date.
-/// @prop {Map} date-selected-focus-foreground [contrast-color: ('surface')] - The focus text color for the selected date.
+/// @prop {Map} date-selected-hover-text-color [contrast-color: ('surface')] - The hover text color for the selected date.
+/// @prop {Map} date-selected-focus-text-color [contrast-color: ('surface')] - The focus text color for the selected date.
 /// @requires $bootstrap-calendar
 $dark-bootstrap-calendar: extend(
     $bootstrap-calendar,
@@ -70,40 +83,40 @@ $dark-bootstrap-calendar: extend(
             ),
         ),
 
-        picker-foreground: (
+        picker-text-color: (
             contrast-color: (
                 'surface',
             ),
         ),
 
-        date-selected-foreground: (
+        date-selected-text-color: (
             contrast-color: (
                 'secondary',
                 600,
             ),
         ),
 
-        date-selected-hover-foreground: (
+        date-selected-hover-text-color: (
             contrast-color: (
                 'surface',
             ),
         ),
 
-        date-selected-focus-foreground: (
+        date-selected-focus-text-color: (
             contrast-color: (
                 'surface',
             ),
         ),
 
-        date-current-foreground: (
+        date-current-text-color: (
             contrast-color: 'surface',
         ),
 
-        date-current-hover-foreground: (
+        date-current-hover-text-color: (
             contrast-color: 'surface',
         ),
 
-        date-current-focus-foreground: (
+        date-current-focus-text-color: (
             contrast-color: 'surface',
         ),
 
@@ -119,5 +132,155 @@ $dark-bootstrap-calendar: extend(
 
 /// Generates a dark indigo calendar schema.
 /// @type {Map}
+/// @prop {Map} content-text-color [contrast-color: ('surface')] - The main content text color.
+/// @prop {Map} inactive-text-color [color: ('gray', 700)] - The text color for previous and next month dates.
+/// @prop {Map} label-color [color: ('gray', 700)] - The text color for weekday labels.
+/// @prop {Map} weekend-text-color [color: ('gray', 700)] - The text color for weekend days.
+/// @prop {Map} picker-arrow-color [color: ('gray', 800)] - The idle picker arrow color.
+/// @prop {Map} picker-arrow-hover-color [contrast-color: ('surface')] - The picker hover arrow color.
+/// @prop {Map} picker-text-color [color: ('gray', 800)]- The idle picker month/year color.
+/// @prop {Map} picker-text-hover-color [contrast-color: ('surface')]-  The hover picker month/year color.
+/// @prop {Map} month-hover-text-color [color: ('primary', 300)] - The month hover text color.
+/// @prop {Map} year-hover-text-color [color: ('primary', 300)] - The year hover text color.
+/// @prop {Map} year-current-text-color [color: ('primary', 300)] - The text color for the current/selected year.
+/// @prop {Map} month-current-text-color [color: ('primary', 300)]- The text color for the current/selected month.
+/// @prop {Map} month-hover-current-text-color [color: ('primary', 300)]- The text color for the current/selected month on hover.
+/// @prop {Map} date-selected-hover-text-color [contrast-color: ('surface')] - The hover text color for the selected date.
+/// @prop {Map} date-selected-focus-text-color [contrast-color: ('surface')] - The focus text color for the selected date.
+/// @prop {Map} date-current-hover-text-color [color: ('primary', 200)] - The hover text color for the current date.
+/// @prop {Map} date-current-focus-text-color [color: ('gray', 100)] - The focus text color for the current date.
+/// @prop {Map} date-current-hover-bg-color [color: ('gray', 100)] - The hover background color for the current date.
+/// @prop {Map} date-current-focus-bg-color [color: ('gray', 100)] - The focus background color for the current date.
 /// @requires $indigo-calendar
-$dark-indigo-calendar: extend($indigo-calendar);
+$dark-indigo-calendar: extend(
+    $indigo-calendar,
+    (
+        content-text-color: (
+            contrast-color: (
+                'surface',
+            ),
+        ),
+
+        date-current-hover-bg-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+
+        date-current-focus-bg-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+
+        date-current-hover-text-color: (
+            color: (
+                'primary',
+                200,
+            ),
+        ),
+
+        date-current-focus-text-color: (
+            color: (
+                'primary',
+                200,
+            ),
+        ),
+
+        inactive-text-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+
+        date-selected-hover-text-color: (
+            contrast-color: (
+                'surface',
+            ),
+        ),
+
+        date-selected-focus-text-color: (
+            contrast-color: (
+                'surface',
+            ),
+        ),
+
+        label-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+
+        weekend-text-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+
+        picker-arrow-color: (
+            color: (
+                'gray',
+                800,
+            ),
+        ),
+
+        picker-arrow-hover-color: (
+            contrast-color: (
+                'surface',
+            ),
+        ),
+
+        picker-text-color: (
+            color: (
+                'gray',
+                800,
+            ),
+        ),
+
+        picker-text-hover-color: (
+            contrast-color: (
+                'surface',
+            ),
+        ),
+
+        month-hover-text-color: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
+
+        year-hover-text-color: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
+
+        month-current-text-color: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
+
+        month-hover-current-text-color: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
+
+        year-current-text-color: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
+    )
+);

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

@@ -11,10 +11,12 @@
 /// Generates a light button group schema.
 /// @type {Map}
 /// @prop {Map} item-text-color [color: ('gray', 700)]- The text color for button group items.
-/// @prop {Map} item-background [color: ('gray', 50)] - The background color for button group items .
+/// @prop {Map} item-background [color: ('gray', 50)] - The background color for button group items.
 /// @prop {Map} item-border-color [color: ('gray', 400)] - The border color between button group items.
+/// @prop {Map} item-focused-border-color [color: ('gray', 400)] - The focused border color for an item from the button group.
 /// @prop {Map} item-hover-text-color [color: ('gray', 800)] - The hover text color for button group items.
 /// @prop {Map} item-hover-background [color: ('gray', 300)] - The hover background color for button group items.
+/// @prop {Map} item-focused-background [color: ('gray', 300)] - The focused background color for button group items.
 /// @prop {Map} disabled-text-color [color: ('gray', 400)]- The text/icon color for a disabled item in the button group.
 /// @prop {Map} disabled-background-color [color: ('gray', 50)] - The background color for a disabled item in the button group.
 /// @prop {Map} item-disabled-border [color: ('gray', 400)] - The border color for a disabled item in the button group.
@@ -46,6 +48,13 @@ $light-button-group: extend(
             ),
         ),
 
+        item-focused-border-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+
         item-text-color: (
             color: (
                 'gray',
@@ -67,6 +76,13 @@ $light-button-group: extend(
             ),
         ),
 
+        item-focused-background: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+
         item-selected-text-color: (
             color: (
                 'gray',
@@ -132,12 +148,19 @@ $light-button-group: extend(
 /// Generates a fluent button group schema.
 /// @type {Map}
 /// @prop {Map} item-text-color [color: ('gray', 900)]- The text color for button group items.
-/// @prop {Map} item-hover-text-color [color: ('primary', 200)] - The hover text color for button group items.
-/// @prop {Map} item-hover-background [color: ('gray', 50)] - The hover background color for button group items.
-/// @prop {Map} item-selected-background [color: ('gray', 200)] - The background color for a selected item in the button group.
-/// @prop {Map} item-selected-hover-background [color: ('gray', 200)] - The background color for a selected item in hover or focus state in the button group.
-/// @prop {Map} item-selected-text-color [color: ('primary', 200)]- The text color for a selected item in the button group.
-/// @prop {Color} disabled-background-color [color: ('gray', 50)] - The background color for a disabled item in the button group.
+/// @prop {Map} item-background [contrast-color: ('gray', 900)] - The background color for button group items.
+/// @prop {Map} item-border-color [color: ('gray', 600)] - The border color between button group items.`
+/// @prop {Map} item-hover-text-color [color: ('gray', 900)] - The hover text color for button group items.
+/// @prop {Map} item-hover-background [color: ('gray', 200)] - The hover background color for button group items.
+/// @prop {Map} item-focused-background [color: ('gray', 300)] - The focused background color for button group items.
+/// @prop {Map} item-selected-background [color: ('gray', 300)] - The background color for a selected item in the button group.
+/// @prop {Map} item-selected-hover-background [color: ('gray', 400)] - The background color for a selected item in hover or focus state in the button group.
+/// @prop {Map} item-selected-text-color [color: ('gray', 900)]- The text color for a selected item in the button group.
+/// @prop {Map} item-selected-border-color [color: ('gray', 600)] - The border color for a selected item from the button group.
+/// @prop {Map} item-focused-border-color [color: ('gray', 700)] - The focused border color for an item from the button group.
+/// @prop {Map} disabled-background-color [color: ('gray', 50)] - The background color for a disabled item in the button group.
+/// @prop {Map} disabled-text-color [color: ('gray', 500)]- The text/icon color for a disabled item in the button group.
+/// @prop {Map} item-disabled-border [color: ('gray', 600)] - The border color for a disabled item in the button group.
 /// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the button group shadow.
 /// @prop {List} border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for button-group component.
 /// @requires {Map} $light-button-group
@@ -146,6 +169,27 @@ $fluent-button-group: extend(
     $light-button-group,
     $fluent-elevation-button-group,
     (
+        item-background: (
+            contrast-color: (
+                'gray',
+                900,
+            ),
+        ),
+
+        item-border-color: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+
+        item-focused-border-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+
         item-text-color: (
             color: (
                 'gray',
@@ -155,36 +199,50 @@ $fluent-button-group: extend(
 
         item-hover-text-color: (
             color: (
-                'primary',
-                200,
+                'gray',
+                900,
             ),
         ),
 
         item-hover-background: (
             color: (
                 'gray',
-                50,
+                200,
+            ),
+        ),
+
+        item-focused-background: (
+            color: (
+                'gray',
+                300,
             ),
         ),
 
         item-selected-background: (
             color: (
                 'gray',
-                200,
+                300,
             ),
         ),
 
         item-selected-hover-background: (
             color: (
                 'gray',
-                200,
+                400,
             ),
         ),
 
         item-selected-text-color: (
             color: (
-                'primary',
-                200,
+                'gray',
+                900,
+            ),
+        ),
+
+        item-selected-border-color: (
+            color: (
+                'gray',
+                600,
             ),
         ),
 
@@ -195,6 +253,20 @@ $fluent-button-group: extend(
             ),
         ),
 
+        disabled-text-color: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
+
+        item-disabled-border: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+
         border-radius: (
             border-radius: (
                 rem(2px),