igniteui-theming 5.0.0 → 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
@@ -21,7 +18,7 @@
 /// @prop {Color} error [#cf1a2b] - The 500 variant of the error color.
 /// @prop {Color} surface [#1e1f24] - The surface color.
 $palette: (
-    primary: (
+    'primary': (
         50: to-hsl(#c5cdff),
         '50-contrast': black,
         100: to-hsl(#a3aff6),
@@ -51,7 +48,7 @@ $palette: (
         'A700': to-hsl(#262851),
         'A700-contrast': white,
     ),
-    secondary: (
+    'secondary': (
         50: to-hsl(#c5cdff),
         '50-contrast': black,
         100: to-hsl(#a3aff6),
@@ -81,7 +78,7 @@ $palette: (
         'A700': to-hsl(#262851),
         'A700-contrast': white,
     ),
-    gray: (
+    'gray': (
         50: to-hsl(#24252c),
         '50-contrast': white,
         100: to-hsl(#3b3d47),
@@ -103,7 +100,7 @@ $palette: (
         900: to-hsl(#fcfcfd),
         '900-contrast': black,
     ),
-    info: (
+    'info': (
         50: to-hsl(#f1c3ff),
         '50-contrast': black,
         100: to-hsl(#e89eff),
@@ -133,7 +130,7 @@ $palette: (
         'A700': to-hsl(#5c056b),
         'A700-contrast': white,
     ),
-    success: (
+    'success': (
         50: to-hsl(#edf3e7),
         '50-contrast': black,
         100: to-hsl(#d2e2c3),
@@ -163,7 +160,7 @@ $palette: (
         'A700': to-hsl(#316109),
         'A700-contrast': white,
     ),
-    warn: (
+    'warn': (
         50: to-hsl(#fed7b7),
         '50-contrast': black,
         100: to-hsl(#ffc696),
@@ -193,7 +190,7 @@ $palette: (
         'A700': to-hsl(#d22900),
         'A700-contrast': white,
     ),
-    error: (
+    'error': (
         50: to-hsl(#ffebf0),
         '50-contrast': black,
         100: to-hsl(#ffb0b7),
@@ -223,7 +220,7 @@ $palette: (
         'A700': to-hsl(#9f000f),
         'A700-contrast': white,
     ),
-    surface: (
+    'surface': (
         500: to-hsl(#1e1f24),
         '500-contrast': white,
     ),

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
@@ -21,7 +18,7 @@
 /// @prop {Color} error [#cf1a2b] - The 500 variant of the error color.
 /// @prop {Color} surface [#f8f8fa] - The surface color.
 $palette: (
-    primary: (
+    'primary': (
         50: to-hsl(#c5cdff),
         '50-contrast': black,
         100: to-hsl(#a3aff6),
@@ -51,7 +48,7 @@ $palette: (
         'A700': to-hsl(#262851),
         'A700-contrast': white,
     ),
-    secondary: (
+    'secondary': (
         50: to-hsl(#c5cdff),
         '50-contrast': black,
         100: to-hsl(#a3aff6),
@@ -81,7 +78,7 @@ $palette: (
         'A700': to-hsl(#262851),
         'A700-contrast': white,
     ),
-    gray: (
+    'gray': (
         50: to-hsl(#fcfcfd),
         '50-contrast': black,
         100: to-hsl(#f8f8fa),
@@ -103,7 +100,7 @@ $palette: (
         900: to-hsl(#24252c),
         '900-contrast': white,
     ),
-    info: (
+    'info': (
         50: to-hsl(#f1c3ff),
         '50-contrast': black,
         100: to-hsl(#e89eff),
@@ -133,7 +130,7 @@ $palette: (
         'A700': to-hsl(#5c056b),
         'A700-contrast': white,
     ),
-    success: (
+    'success': (
         50: to-hsl(#edf3e7),
         '50-contrast': black,
         100: to-hsl(#d2e2c3),
@@ -163,7 +160,7 @@ $palette: (
         'A700': to-hsl(#316109),
         'A700-contrast': white,
     ),
-    warn: (
+    'warn': (
         50: to-hsl(#fed7b7),
         '50-contrast': black,
         100: to-hsl(#ffc696),
@@ -193,7 +190,7 @@ $palette: (
         'A700': to-hsl(#d22900),
         'A700-contrast': white,
     ),
-    error: (
+    'error': (
         50: to-hsl(#ffebf0),
         '50-contrast': black,
         100: to-hsl(#ffb0b7),
@@ -223,7 +220,7 @@ $palette: (
         'A700': to-hsl(#9f000f),
         'A700-contrast': white,
     ),
-    surface: (
+    'surface': (
         500: to-hsl(#f8f8fa),
         '500-contrast': black,
     ),

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
+```