igniteui-theming 5.0.1 → 5.1.0

package/sass/animations/generic/_shadows.scss

@@ -24,11 +24,15 @@
 @mixin shadow-drop-tb {
     @include keyframes(shadow-drop-tb) {
         0% {
-            box-shadow: 0 0 0 0 rgb(0 0 0 / 0%), 0 0 0 0 rgb(0 0 0 / 0%);
+            box-shadow:
+                0 0 0 0 rgb(0 0 0 / 0%),
+                0 0 0 0 rgb(0 0 0 / 0%);
         }
 
         100% {
-            box-shadow: 0 -12px 20px -12px rgb(0 0 0 / 35%), 0 12px 20px -12px rgb(0 0 0 / 35%);
+            box-shadow:
+                0 -12px 20px -12px rgb(0 0 0 / 35%),
+                0 12px 20px -12px rgb(0 0 0 / 35%);
         }
     }
 }
@@ -141,11 +145,15 @@
 @mixin shadow-drop-lr {
     @include keyframes(shadow-drop-lr) {
         0% {
-            box-shadow: 0 0 0 0 rgb(0 0 0 / 0%), 0 0 0 0 rgb(0 0 0 / 0%);
+            box-shadow:
+                0 0 0 0 rgb(0 0 0 / 0%),
+                0 0 0 0 rgb(0 0 0 / 0%);
         }
 
         100% {
-            box-shadow: -12px 0 20px -12px rgb(0 0 0 / 35%), 12px 0 20px -12px rgb(0 0 0 / 35%);
+            box-shadow:
+                -12px 0 20px -12px rgb(0 0 0 / 35%),
+                12px 0 20px -12px rgb(0 0 0 / 35%);
         }
     }
 }
@@ -170,12 +178,16 @@
     @include keyframes(shadow-drop-2-tb) {
         0% {
             transform: translateZ(0);
-            box-shadow: 0 0 0 0 rgb(0 0 0 / 0%), 0 0 0 0 rgb(0 0 0 / 0%);
+            box-shadow:
+                0 0 0 0 rgb(0 0 0 / 0%),
+                0 0 0 0 rgb(0 0 0 / 0%);
         }
 
         100% {
             transform: translateZ(50px);
-            box-shadow: 0 -12px 20px -12px rgb(0 0 0 / 35%), 0 12px 20px -12px rgb(0 0 0 / 35%);
+            box-shadow:
+                0 -12px 20px -12px rgb(0 0 0 / 35%),
+                0 12px 20px -12px rgb(0 0 0 / 35%);
         }
     }
 }
@@ -305,12 +317,16 @@
     @include keyframes(shadow-drop-2-lr) {
         0% {
             transform: translateZ(0);
-            box-shadow: 0 0 0 0 rgb(0 0 0 / 0%), 0 0 0 0 rgb(0 0 0 / 0%);
+            box-shadow:
+                0 0 0 0 rgb(0 0 0 / 0%),
+                0 0 0 0 rgb(0 0 0 / 0%);
         }
 
         100% {
             transform: translateZ(50px);
-            box-shadow: -12px 0 20px -12px rgb(0 0 0 / 35%), 12px 0 20px -12px rgb(0 0 0 / 35%);
+            box-shadow:
+                -12px 0 20px -12px rgb(0 0 0 / 35%),
+                12px 0 20px -12px rgb(0 0 0 / 35%);
         }
     }
 }
@@ -319,14 +335,28 @@
 @mixin shadow-pop-tr {
     @include keyframes(shadow-pop-tr) {
         0% {
-            box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e,
+            box-shadow:
+                0 0 #3e3e3e,
+                0 0 #3e3e3e,
+                0 0 #3e3e3e,
+                0 0 #3e3e3e,
+                0 0 #3e3e3e,
+                0 0 #3e3e3e,
+                0 0 #3e3e3e,
                 0 0 #3e3e3e;
             transform: translateX(0) translateY(0);
         }
 
         100% {
-            box-shadow: 1px -1px #3e3e3e, 2px -2px #3e3e3e, 3px -3px #3e3e3e, 4px -4px #3e3e3e, 5px -5px #3e3e3e,
-                6px -6px #3e3e3e, 7px -7px #3e3e3e, 8px -8px #3e3e3e;
+            box-shadow:
+                1px -1px #3e3e3e,
+                2px -2px #3e3e3e,
+                3px -3px #3e3e3e,
+                4px -4px #3e3e3e,
+                5px -5px #3e3e3e,
+                6px -6px #3e3e3e,
+                7px -7px #3e3e3e,
+                8px -8px #3e3e3e;
             transform: translateX(-8px) translateY(8px);
         }
     }
@@ -336,14 +366,28 @@
 @mixin shadow-pop-br {
     @include keyframes(shadow-pop-br) {
         0% {
-            box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e,
+            box-shadow:
+                0 0 #3e3e3e,
+                0 0 #3e3e3e,
+                0 0 #3e3e3e,
+                0 0 #3e3e3e,
+                0 0 #3e3e3e,
+                0 0 #3e3e3e,
+                0 0 #3e3e3e,
                 0 0 #3e3e3e;
             transform: translateX(0) translateY(0);
         }
 
         100% {
-            box-shadow: 1px 1px #3e3e3e, 2px 2px #3e3e3e, 3px 3px #3e3e3e, 4px 4px #3e3e3e, 5px 5px #3e3e3e,
-                6px 6px #3e3e3e, 7px 7px #3e3e3e, 8px 8px #3e3e3e;
+            box-shadow:
+                1px 1px #3e3e3e,
+                2px 2px #3e3e3e,
+                3px 3px #3e3e3e,
+                4px 4px #3e3e3e,
+                5px 5px #3e3e3e,
+                6px 6px #3e3e3e,
+                7px 7px #3e3e3e,
+                8px 8px #3e3e3e;
             transform: translateX(-8px) translateY(-8px);
         }
     }
@@ -353,14 +397,28 @@
 @mixin shadow-pop-bl {
     @include keyframes(shadow-pop-bl) {
         0% {
-            box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e,
+            box-shadow:
+                0 0 #3e3e3e,
+                0 0 #3e3e3e,
+                0 0 #3e3e3e,
+                0 0 #3e3e3e,
+                0 0 #3e3e3e,
+                0 0 #3e3e3e,
+                0 0 #3e3e3e,
                 0 0 #3e3e3e;
             transform: translateX(0) translateY(0);
         }
 
         100% {
-            box-shadow: -1px 1px #3e3e3e, -2px 2px #3e3e3e, -3px 3px #3e3e3e, -4px 4px #3e3e3e, -5px 5px #3e3e3e,
-                -6px 6px #3e3e3e, -7px 7px #3e3e3e, -8px 8px #3e3e3e;
+            box-shadow:
+                -1px 1px #3e3e3e,
+                -2px 2px #3e3e3e,
+                -3px 3px #3e3e3e,
+                -4px 4px #3e3e3e,
+                -5px 5px #3e3e3e,
+                -6px 6px #3e3e3e,
+                -7px 7px #3e3e3e,
+                -8px 8px #3e3e3e;
             transform: translateX(8px) translateY(-8px);
         }
     }
@@ -370,14 +428,28 @@
 @mixin shadow-pop-tl {
     @include keyframes(shadow-pop-tl) {
         0% {
-            box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e,
+            box-shadow:
+                0 0 #3e3e3e,
+                0 0 #3e3e3e,
+                0 0 #3e3e3e,
+                0 0 #3e3e3e,
+                0 0 #3e3e3e,
+                0 0 #3e3e3e,
+                0 0 #3e3e3e,
                 0 0 #3e3e3e;
             transform: translateX(0) translateY(0);
         }
 
         100% {
-            box-shadow: -1px -1px #3e3e3e, -2px -2px #3e3e3e, -3px -3px #3e3e3e, -4px -4px #3e3e3e, -5px -5px #3e3e3e,
-                -6px -6px #3e3e3e, -7px -7px #3e3e3e, -8px -8px #3e3e3e;
+            box-shadow:
+                -1px -1px #3e3e3e,
+                -2px -2px #3e3e3e,
+                -3px -3px #3e3e3e,
+                -4px -4px #3e3e3e,
+                -5px -5px #3e3e3e,
+                -6px -6px #3e3e3e,
+                -7px -7px #3e3e3e,
+                -8px -8px #3e3e3e;
             transform: translateX(8px) translateY(8px);
         }
     }
@@ -387,11 +459,15 @@
 @mixin shadow-inset-tb {
     @include keyframes(shadow-inset-tb) {
         0% {
-            box-shadow: inset 0 0 0 0 rgb(0 0 0 / 0%), inset 0 0 0 0 rgb(0 0 0 / 0%);
+            box-shadow:
+                inset 0 0 0 0 rgb(0 0 0 / 0%),
+                inset 0 0 0 0 rgb(0 0 0 / 0%);
         }
 
         100% {
-            box-shadow: inset 0 -6px 14px -6px rgb(0 0 0 / 50%), inset 0 6px 14px -6px rgb(0 0 0 / 50%);
+            box-shadow:
+                inset 0 -6px 14px -6px rgb(0 0 0 / 50%),
+                inset 0 6px 14px -6px rgb(0 0 0 / 50%);
         }
     }
 }
@@ -517,11 +593,15 @@
 @mixin shadow-inset-lr {
     @include keyframes(shadow-inset-lr) {
         0% {
-            box-shadow: inset 0 0 0 0 rgb(0 0 0 / 0%), inset 0 0 0 0 rgb(0 0 0 / 0%);
+            box-shadow:
+                inset 0 0 0 0 rgb(0 0 0 / 0%),
+                inset 0 0 0 0 rgb(0 0 0 / 0%);
         }
 
         100% {
-            box-shadow: inset -6px 0 14px -6px rgb(0 0 0 / 50%), inset 6px 0 14px -6px rgb(0 0 0 / 50%);
+            box-shadow:
+                inset -6px 0 14px -6px rgb(0 0 0 / 50%),
+                inset 6px 0 14px -6px rgb(0 0 0 / 50%);
         }
     }
 }

package/sass/color/_functions.scss

@@ -145,6 +145,8 @@ $_enhanced-accessibility: false;
             to-fixed(color.saturation($color) * $sx),
             to-fixed(color.lightness($color) * $lx)
         );
+
+        // prettier-ignore
         $hsl: #{$h, calc(#{$s} * #{$sx}), calc(#{$l} * #{$lx})};
 
         @return (raw: $raw, hsl: $hsl);

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

@@ -6,9 +6,6 @@
 /// @access public
 ////
 
-/**
- * @sass-export-section="dark-bootstrap"
- */
 /// Generates the dark bootstrap palette.
 /// @type Map
 /// @name dark-bootstrap-palette

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

@@ -6,9 +6,6 @@
 /// @access public
 ////
 
-/**
- * @sass-export-section="dark"
- */
 /// Generates the dark green palette.
 /// @type Map
 /// @name dark-green-palette

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

@@ -6,9 +6,6 @@
 /// @access public
 ////
 
-/**
- * @sass-export-section="dark-fluent"
- */
 /// Generates the dark fluent palette.
 /// @type Map
 /// @name dark-fluent-palette

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

@@ -6,9 +6,6 @@
 /// @access public
 ////
 
-/**
- * @sass-export-section="dark-indigo"
- */
 /// Generates the dark indigo palette.
 /// @type Map
 /// @name dark-indigo-palette

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

@@ -6,9 +6,6 @@
 /// @access public
 ////
 
-/**
- * @sass-export-section="dark-material"
- */
 /// Generates the dark material palette.
 /// @type Map
 /// @name dark-material-palette

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

@@ -6,9 +6,6 @@
 /// @access public
 ////
 
-/**
- * @sass-export-section="light-bootstrap"
- */
 /// Generates the light bootstrap palette.
 /// @type Map
 /// @name light-bootstrap-palette

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

@@ -6,9 +6,6 @@
 /// @access public
 ////
 
-/**
- * @sass-export-section="light"
- */
 /// Generates the light green palette.
 /// @type Map
 /// @name light-green-palette

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

@@ -6,9 +6,6 @@
 /// @access public
 ////
 
-/**
- * @sass-export-section="light-fluent"
- */
 /// Generates the light fluent palette.
 /// @type Map
 /// @name light-fluent-palette

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

@@ -6,9 +6,6 @@
 /// @access public
 ////
 
-/**
- * @sass-export-section="light-indigo"
- */
 /// Generates the light indigo palette.
 /// @type Map
 /// @name light-indigo-palette

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

@@ -6,9 +6,6 @@
 /// @access public
 ////
 
-/**
- * @sass-export-section="light-material"
- */
 /// Generates the light material palette.
 /// @type Map
 /// @name light-material-palette

package/sass/elevations/presets/_indigo.scss

@@ -48,9 +48,6 @@ $_22: box-shadow((0 10px 14px -6px $color-1, 0 22px 35px 3px $color-2, 0 8px 42p
 $_23: box-shadow((0 0 16px 0 rgba(0 0 0 / 30%)));
 $_24: box-shadow((0 0 16px 0 rgba(36 37 44 / 40%)));
 
-/**
- * @sass-export-section="indigo"
- */
 /// А map of 24 shadow elevations with the umbra, penumbra and ambient shadows.
 /// @type Map
 /// @access private
@@ -81,5 +78,3 @@ $elevations: (
     23: $_23,
     24: $_24,
 );
-
-// @end-sass-export-section

package/sass/elevations/presets/_material.scss

@@ -48,9 +48,6 @@ $_22: box-shadow((0 10px 14px -6px $color-1, 0 22px 35px 3px $color-2, 0 8px 42p
 $_23: box-shadow((0 11px 14px -7px $color-1, 0 23px 36px 3px $color-2, 0 9px 44px 8px $color-3));
 $_24: box-shadow((0 11px 15px -7px $color-1, 0 24px 38px 3px $color-2, 0 9px 46px 8px $color-3));
 
-/**
- * @sass-export-section="material"
- */
 /// А map of 24 shadow elevations with the umbra, penumbra and ambient shadows.
 /// @type Map
 /// @access private
@@ -81,5 +78,3 @@ $elevations: (
     23: $_23,
     24: $_24,
 );
-
-// @end-sass-export-section

package/sass/json/README.md

@@ -0,0 +1,108 @@
+# What is this?
+
+This folder contains generator files that can be used by the `src/buildJSON.mjs` script to produce JSON files containing serialized information about various parts of the theming package (ex. palettes, typography, elevations, etc.);
+
+The `generators.scss` file contains declarations for how each of the JSON files should be generated, where each file should be placed and what its contents are. 
+
+To achieve this a small [DSL](https://en.wikipedia.org/wiki/Domain-specific_language) on top of CSS is used. A tiny [parser](../../scripts/parser.mjs) handles the transformation of this custom CSS into JSON.
+
+From this point on, this document explains the syntax of the DSL.
+
+## Base Syntax
+
+#### Example of the DSL syntax (Input)
+```css
+/*
+* @outputDir - /custom
+*/
+example {
+  --content: "Hello, World!"
+}
+```
+
+The declaration above will produce the following JSON file when `$ npm run build:json` is run.
+
+#### Output (`igniteui-theming/json/custom/example.json`)
+
+```json
+{
+  "content": "Hello, World!"
+}
+```
+
+To generate a new JSON file, you need to add a new `scss` document in this folder or update the contents of the `generators.scss` file.
+
+### Specifying output directory for the JSON file
+
+The output directory is specified using a comment directly above the declaration body with a string marker of `@outputDir` separated by a `-` followed by the desired location of the generated JSON file relative to the `json` directory located at the root of this project(see the example above). If no comment is specified, the last existing comment specifying an `@outputDir` will be used. If there's no other comment above the declaration specifying an `@outputDir`, the declaration is ignored and no output file is generated.
+
+### JSON declaration
+
+```css
+example {
+  --content: "Hello, World!"
+}
+```
+
+Given the above snippet, the first present selector, i.e. `example`, will be used as the name of the JSON file. Any custom property declaration in the body of the selector, in this case `--content`, will be used to generate a key within the generated JSON file. The opening `{` and closing `}` braces define the scope of the JSON object. The value that will be assigned to the `content` key is anything to the right of the `:`.
+
+##### Grouping several keys together into an object:
+
+###### Input
+```css
+example {
+  > group > x {
+    --a: 'a';
+  }
+
+  > group > y {
+    --b: 'b';
+  }
+}
+```
+
+The declaration above produces the following JSON:
+
+###### Output
+```json
+{
+  "group": {
+    "x": {
+      "a": "a"
+    },
+    "y": {
+      "b": "b"
+    }
+  }
+}
+```
+
+The `>` operator defines nested structures within the current JSON object. If the parser encounters common denominators like `group` it will group the statements, in this case `x` and `y`, together in the `group` object.
+
+##### Handling array-like objects
+
+You can produce arrays in the JSON file by declaring an array-like object as the value of a key.
+
+###### Example
+```css
+example {
+  --array-like: [1, a, 2.4];
+}
+```
+
+###### Output
+```json
+{
+  "array-like": ["1", "a", "2.4"]
+}
+```
+
+**NOTE**: The array-like only supports simple values (strings and numbers). You can't pass in an object block and expect to get a valid JSON.
+
+#### Generating the JSON Files
+
+To generate the JSON files run:
+
+```sh
+npm run build:json
+```

package/sass/json/generators.scss

@@ -0,0 +1,98 @@
+// stylelint-disable selector-type-no-unknown, max-nesting-depth
+@use 'sass:map';
+@use 'sass:list';
+@use 'sass:meta';
+@use 'sass:string';
+@use '../color' as *;
+@use '../color/multipliers' as multipliers;
+@use '../color/presets/light' as light-palettes;
+@use '../color/presets/dark' as dark-palettes;
+@use '../typography/presets' as typography;
+@use '../elevations/presets' as elevations;
+@use '../themes/mixins' as *;
+
+$themes: (bootstrap, material, fluent, indigo);
+
+/*
+* @outputDir - /colors/meta
+*/
+palette {
+    @each $key, $value in map.remove($IPalette, '_meta') {
+        --#{$key}: [#{$value}];
+    }
+}
+
+multipliers {
+    @each $variant in ('color', 'grayscale') {
+        $multipliers: meta.module-variables(multipliers);
+
+        > #{$variant} {
+            @each $multiplier, $props in map.get($multipliers, $variant) {
+                > #{$multiplier} {
+                    @each $key, $value in $props {
+                        --#{$key}: '#{$value}';
+                    }
+                }
+            }
+        }
+    }
+}
+
+/*
+* @outputDir - /colors/presets
+*/
+palettes {
+    @each $theme in $themes {
+        @each $variant in ('light', 'dark') {
+            $name: #{$variant}-#{$theme}-palette;
+            $palettes: meta.module-variables(#{$variant}-palettes);
+            $palette: map.get($palettes, $name);
+
+            > #{$name} {
+                @each $color in map.remove($IPalette, '_meta') {
+                    $name: list.nth($color, 1);
+
+                    --#{$name}: '#{color($palette, #{$name})}';
+                }
+            }
+        }
+    }
+}
+
+/*
+* @outputDir - /typography/presets
+*/
+typescales {
+    $type-styles: meta.module-variables(typography);
+
+    @each $theme in $themes {
+        $typeface: map.get($type-styles, #{$theme}-typeface);
+        $type-scale: map.remove(map.get($type-styles, #{$theme}-type-scale), '_meta');
+
+        > #{'' + $theme} {
+            --typeface: '#{$typeface}';
+
+            @each $style, $props in $type-scale {
+                > #{$style} {
+                    @each $key, $value in $props {
+                        --#{$key}: #{$value};
+                    }
+                }
+            }
+        }
+    }
+}
+
+/*
+* @outputDir - /elevations
+*/
+@each $theme in ('material', 'indigo') {
+    $elevations: map.get(meta.module-variables(elevations), #{$theme}-elevations);
+    #{$theme} {
+        > elevations {
+            @each $level, $value in $elevations {
+                --#{$level}: #{$value};
+            }
+        }
+    }
+}

package/sass/themes/schemas/components/light/_drop-down.scss

@@ -340,9 +340,9 @@ $bootstrap-drop-down: extend(
 /// @prop {Map} focused-item-background [color: ('primary', 500, .15)] - The drop-down focused item background color.
 /// @prop {Map} selected-item-text-color [contrast-color: ('primary', 500)] - The drop-down selected item text color.
 /// @prop {Map} selected-hover-item-background [color: ('primary', 400)] - The drop-down selected item hover background color.
-/// @prop {Map} selected-hover-item-text-color [contrast-color: ('primary', 400)] - The drop-down selected item hover text color.
+/// @prop {Map} selected-hover-item-text-color [contrast-color: ('primary', 500)] - The drop-down selected item hover text color.
 /// @prop {Map} selected-focus-item-background [color: ('primary', 400)] - The drop-down selected item focus background color.
-/// @prop {Map} selected-focus-item-text-color [contrast-color: ('primary', 400)] - The drop-down selected item focus text color.
+/// @prop {Map} selected-focus-item-text-color [contrast-color: ('primary', 500)] - The drop-down selected item focus text color.
 /// @prop {Number} elevation [3] - The elevation level, between 0-24, to be used for the badge shadow.
 /// @prop {List} border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for drop-down component.
 /// @prop {List} item-border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for the drop-down items.
@@ -393,7 +393,7 @@ $indigo-drop-down: extend(
         selected-hover-item-text-color: (
             contrast-color: (
                 'primary',
-                400,
+                500,
             ),
         ),
         selected-focus-item-background: (
@@ -405,7 +405,7 @@ $indigo-drop-down: extend(
         selected-focus-item-text-color: (
             contrast-color: (
                 'primary',
-                400,
+                500,
             ),
         ),
         border-radius: (

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

@@ -411,6 +411,7 @@ $bootstrap-switch: extend(
 /// @prop {Map} label-disabled-color [color: ('gray', 300)] - The color of the switch label when the switch is disabled
 /// @prop {Map} error-color [color: ('gray', 500)] - The border and thumb color in invalid state.
 /// @prop {Map} error-color-hover [color: ('gray', 300)] - The border and thumb color in invalid state on hover.
+/// @prop {Color} track-error-color [transparent] - The color of the track in invalid state when the switch is off.
 /// @prop {List} border-radius-track [(rem(8px), rem(0), rem(8px))] - The border radius used for switch track.
 /// @prop {Map} focus-outline-color [color: ('gray', 300)] - The focus outlined color.
 /// @prop {Map} focus-outline-color-focused [color: ('primary', 200)] - The focus outlined color for focused state.
@@ -472,6 +473,7 @@ $indigo-switch: extend(
                 300,
             ),
         ),
+        track-error-color: transparent,
         thumb-disabled-color: (
             color: (
                 'gray',