igniteui-theming 27.0.0 → 27.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "27.0.0",
+  "version": "27.2.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/bem/_index.scss

@@ -150,6 +150,14 @@ $_bem-mod-cache: () !default;
     @return string.index($x, ':');
 }
 
+/// Checks if the passed selector string contains an attribute selector.
+/// @access private
+/// @param {String} $x - The string to check for attribute selectors.
+/// @returns {number|null} Will return the index of the occurrence, or null if the string does not contain any attribute selectors.
+@function bem--contains-attr($x) {
+    @return string.index($x, '[');
+}
+
 /// Returns the BEM block-name that generated `$x`. Does not include leading ".".
 /// @access private
 /// @param {String} $x - The block name.
@@ -160,6 +168,16 @@ $_bem-mod-cache: () !default;
         @return string.slice($x, 1, string.index($x, $bem--sep-elem) - 1);
     } @else if bem--contains-pseudo($x) {
         @return string.slice($x, 1, string.index($x, ':') - 1);
+    } @else if bem--contains-attr($x) {
+        $attr-idx: string.index($x, '[');
+        $end: $attr-idx - 1;
+
+        // Trim trailing descendant-combinator space before [
+        @if string.slice($x, $end, $end) == ' ' {
+            $end: $end - 1;
+        }
+
+        @return string.slice($x, 1, $end);
     }
 
     @return $x;
@@ -169,7 +187,13 @@ $_bem-mod-cache: () !default;
 /// @access private
 @function bem--extract-first-selector($x) {
     $parens: string.index($x, '(');
-    $eow: if($parens, string.index($x, ')'), string.index($x, ' ') or -1);
+    $space: string.index($x, ' ');
+    $bracket: string.index($x, '[');
+
+    // A space that precedes an attribute selector is a descendant combinator —
+    // treat the whole selector as a single unit (no split before the [...])
+    $space-before-attr: $space and $bracket and $space < $bracket;
+    $eow: if($parens, string.index($x, ')'), if($space-before-attr, -1, $space or -1));
 
     @return string.slice($x, 1, $eow);
 }
@@ -403,7 +427,7 @@ $_bem-mod-cache: () !default;
     $context: bem--selector-to-string(&);
     $block: bem--extract-block($context);
     $first: bem--extract-first-selector($context);
-    $nested: bem--contains-pseudo($context) or bem--contains-mod($context);
+    $nested: bem--contains-pseudo($context) or bem--contains-mod($context) or bem--contains-attr($context);
     $mod: $m or $mod;
 
     // Validate context

package/sass/color/presets/dark/_indigo.scss

@@ -23,7 +23,7 @@ $surface-shades: shades('surface', #1e1f24, $color-shades);
 /// @prop {Color} surface [#1e1f24] - The surface color.
 $palette: (
     'primary': (
-        '50': #c5cdff,
+        '50': #d9deff,
         '50-contrast': black,
         '100': #a3aff6,
         '100-contrast': black,
@@ -55,7 +55,7 @@ $palette: (
         'seed-contrast': white,
     ),
     'secondary': (
-        '50': #c5cdff,
+        '50': #d9deff,
         '50-contrast': black,
         '100': #a3aff6,
         '100-contrast': black,
@@ -95,11 +95,11 @@ $palette: (
         '200-contrast': white,
         '300': #6c707a,
         '300-contrast': white,
-        '400': #9a9da2,
+        '400': #8e9096,
         '400-contrast': black,
-        '500': #c3c4c7,
+        '500': #b0b2b7,
         '500-contrast': black,
-        '600': #d6d8dc,
+        '600': #cbcdd2,
         '600-contrast': black,
         '700': #ebedf2,
         '700-contrast': black,
@@ -111,11 +111,11 @@ $palette: (
         'seed-contrast': black,
     ),
     'info': (
-        '50': #f1c3ff,
+        '50': #f8e2ff,
         '50-contrast': black,
-        '100': #e89eff,
+        '100': #f1c4ff,
         '100-contrast': black,
-        '200': #dd71ff,
+        '200': #e89eff,
         '200-contrast': black,
         '300': #da64ff,
         '300-contrast': black,
@@ -207,7 +207,7 @@ $palette: (
         'seed-contrast': black,
     ),
     'error': (
-        '50': #ffebf0,
+        '50': #ffebef,
         '50-contrast': black,
         '100': #ffb0b7,
         '100-contrast': black,

package/sass/color/presets/light/_indigo.scss

@@ -23,7 +23,7 @@ $surface-shades: shades('surface', #f8f8fa, $color-shades);
 /// @prop {Color} surface [#f8f8fa] - The surface color.
 $palette: (
     'primary': (
-        '50': #c5cdff,
+        '50': #d9deff,
         '50-contrast': black,
         '100': #a3aff6,
         '100-contrast': black,
@@ -55,7 +55,7 @@ $palette: (
         'seed-contrast': white,
     ),
     'secondary': (
-        '50': #c5cdff,
+        '50': #d9deff,
         '50-contrast': black,
         '100': #a3aff6,
         '100-contrast': black,
@@ -93,11 +93,11 @@ $palette: (
         '100-contrast': black,
         '200': #ebedf2,
         '200-contrast': black,
-        '300': #d6d8dc,
+        '300': #cbcdd2,
         '300-contrast': black,
-        '400': #c3c4c7,
+        '400': #b0b2b7,
         '400-contrast': black,
-        '500': #9a9da2,
+        '500': #8e9096,
         '500-contrast': black,
         '600': #6c707a,
         '600-contrast': white,
@@ -111,11 +111,11 @@ $palette: (
         'seed-contrast': black,
     ),
     'info': (
-        '50': #f1c3ff,
+        '50': #f8e2ff,
         '50-contrast': black,
-        '100': #e89eff,
+        '100': #f1c4ff,
         '100-contrast': black,
-        '200': #dd71ff,
+        '200': #e89eff,
         '200-contrast': black,
         '300': #da64ff,
         '300-contrast': black,
@@ -207,7 +207,7 @@ $palette: (
         'seed-contrast': black,
     ),
     'error': (
-        '50': #ffebf0,
+        '50': #ffebef,
         '50-contrast': black,
         '100': #ffb0b7,
         '100-contrast': black,

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

@@ -26,9 +26,11 @@
 /// @param {Color} $background-color [null] - The summaries background color. PRIMARY - derives label-color, result-color, border-color, pinned-border-color.
 /// @param {Color} $label-color [null] - The summaries label color. PRIMARY - derives label-hover-color. Auto-derived from background-color.
 /// @param {Color} $result-color [null] - The summaries value/result color. Auto-derived from background-color.
+/// @param {String} $border-width [null] - The summaries border width.
+/// @param {String} $border-style [null] - The summaries border style.
 /// @param {Color} $border-color [null] - The summaries border color. Auto-derived from background-color.
-/// @param {Color} $pinned-border-width [null] - The border width of the summary panel.
-/// @param {Color} $pinned-border-style [null] - The border style of the summary panel.
+/// @param {String} $pinned-border-width [null] - The border width of the summary panel.
+/// @param {String} $pinned-border-style [null] - The border style of the summary panel.
 /// @param {Color} $pinned-border-color [null] - The border color of the summary panel. Auto-derived from background-color.
 /// @param {Color} $label-hover-color [null] - The summaries hover label color. Auto-derived from label-color.
 /// @requires $light-material-schema
@@ -45,6 +47,8 @@
     $background-color: null,
     $label-color: null,
     $result-color: null,
+    $border-width: null,
+    $border-style: null,
     $border-color: null,
     $pinned-border-width: null,
     $pinned-border-style: null,
@@ -75,7 +79,7 @@
     }
 
     @if not($border-color) and $background-color {
-        $border-color: hsl(from adaptive-contrast(var(--background-color)) h s l / 0.26);
+        $border-color: hsl(from adaptive-contrast(var(--background-color)) h s l / 0.2);
     }
 
     @if not($pinned-border-color) and $background-color {
@@ -89,6 +93,8 @@
             background-color: $background-color,
             label-color: $label-color,
             result-color: $result-color,
+            border-width: $border-width,
+            border-style: $border-style,
             border-color: $border-color,
             pinned-border-width: $pinned-border-width,
             pinned-border-style: $pinned-border-style,