igniteui-theming 4.1.0 → 4.2.0

package/package.json

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

@@ -11,6 +11,7 @@
 /// Generates a light navbar schema.
 /// @type {Map}
 /// @prop {Map} background [color: ('primary', 500)] - The navbar background color.
+/// @prop {Map} border-color [color: ('primary', 500)] - The navbar border color.
 /// @prop {Map} text-color [contrast-color: ('primary', 500)] - The navbar text color.
 /// @prop {Map} idle-icon-color [contrast-color: ('primary', 500)] - The navbar idle icon color.
 /// @prop {Map} hover-icon-color [contrast-color: ('primary', 500)] - The navbar hover icon color.
@@ -25,6 +26,12 @@ $light-navbar: extend(
                 500,
             ),
         ),
+        border-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
         text-color: (
             contrast-color: (
                 'primary',
@@ -49,6 +56,7 @@ $light-navbar: extend(
 /// Generates a fluent navbar schema.
 /// @type {Map}
 /// @prop {Map} background [color: 'surface'] - The navbar background color.
+/// @prop {Map} border-color [color: 'surface'] - The navbar border color.
 /// @prop {Map} text-color [color: ('gray', 900)] - The navbar text color.
 /// @prop {Map} idle-icon-color [color: ('primary', 500)] - The navbar idle icon color.
 /// @prop {Map} hover-icon-color [color: ('primary', 500)] - The navbar hover icon color.
@@ -59,6 +67,9 @@ $fluent-navbar: extend(
         background: (
             color: 'surface',
         ),
+        border-color: (
+            color: 'surface',
+        ),
         text-color: (
             color: (
                 'gray',
@@ -83,6 +94,7 @@ $fluent-navbar: extend(
 /// Generates a bootstrap navbar schema.
 /// @type {Map}
 /// @prop {Map} background [color: 'surface'] - The navbar background color.
+/// @prop {Map} border-color [color: ('gray', 300)] - The navbar border color.
 /// @prop {Map} text-color [contrast-color: 'surface'] - The navbar text color.
 /// @prop {Map} idle-icon-color [contrast-color: 'surface'] - The navbar idle icon color.
 /// @prop {Map} hover-icon-color [contrast-color: 'surface'] - The navbar hover icon color.
@@ -96,6 +108,12 @@ $bootstrap-navbar: extend(
         background: (
             color: 'surface',
         ),
+        border-color: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
         text-color: (
             contrast-color: 'surface',
         ),

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

@@ -129,8 +129,19 @@ $fluent-navdrawer: $light-navdrawer;
 
 /// Generates a bootstrap navdrawer schema.
 /// @type {Map}
+/// @prop {Map} border-color [color: ('gray', 300)] - The navigation drawer right border color.
 /// @requires {Map} $light-navdrawer
-$bootstrap-navdrawer: $light-navdrawer;
+$bootstrap-navdrawer: extend(
+    $light-navdrawer,
+    (
+        border-color: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+    )
+);
 
 /// Generates an indigo navdrawer schema.
 /// @type {Map}