igniteui-theming 13.1.0-beta.2 → 14.0.0

package/README.md

@@ -102,12 +102,3 @@ To start the docs in your browser, run
 ```
 npm run serve:docs
 ```
-
-## Testing and Debugging
-
-### Preview Palettes
-To preview a palette you can pass the palette (`material`, `bootstrap`, `fluent`, `indigo`) and variant (`light` or `dark`) to the `palette` and `variant` arguments respectively. If you want to output the result to a file in the `./dist` folder add the `out` option.
-
-```
-npm run preview:palette -- --palette=material --variant=light --out
-```

package/json/colors/meta/multipliers.json

@@ -1 +1 @@
-{"color":{"s":{"50":"1.23","100":"0.8","200":"0.64","300":"0.73","400":"0.875","500":"1","600":"1.26","700":"1.26","800":"1.26","900":"1.26","A100":"1.23","A200":"1.22","A400":"1.23","A700":"1.23"},"l":{"50":"1.78","100":"1.66","200":"1.43","300":"1.19","400":"1.08","500":"1","600":"0.89","700":"0.81","800":"0.73","900":"0.64","A100":"1.34","A200":"1.16","A400":"0.91","A700":"0.65"}},"grayscale":{"l":{"50":"13%","100":"26%","200":"38%","300":"54%","400":"62%","500":"74%","600":"88%","700":"93%","800":"96%","900":"98%"}}}
+{"color":{"s":{"50":"1.23","100":"0.8","200":"0.64","300":"0.73","400":"0.875","500":"1","600":"1.26","700":"1.52","800":"1.5","900":"1.34","A100":"1.23","A200":"1.22","A400":"1.23","A700":"1.23"},"l":{"50":"1.78","100":"1.66","200":"1.43","300":"1.19","400":"1.08","500":"1","600":"0.89","700":"0.81","800":"0.73","900":"0.64","A100":"1.34","A200":"1.16","A400":"0.91","A700":"0.65"}},"grayscale":{"l":{"50":"13%","100":"26%","200":"38%","300":"54%","400":"62%","500":"74%","600":"88%","700":"93%","800":"96%","900":"98%"}}}

package/json/colors/presets/palettes.json

@@ -1 +1 @@
-{"light-bootstrap-palette":{"primary":"#0d6efd","secondary":"#6c757d","gray":"#949ea9","surface":"#f8f9fa","info":"#0dcaf0","success":"#198754","warn":"#ffc107","error":"#dc3545"},"dark-bootstrap-palette":{"primary":"#0d6efd","secondary":"#6c757d","gray":"#b6bdc4","surface":"#212529","info":"#0dcaf0","success":"#198754","warn":"#ffc107","error":"#dc3545"},"light-material-palette":{"primary":"#0099ff","secondary":"#df1b74","gray":"#9e9e9e","surface":"white","info":"#1377d5","success":"#4eb862","warn":"#faa419","error":"#ff134a"},"dark-material-palette":{"primary":"#0099ff","secondary":"#df1b74","gray":"#bdbdbd","surface":"#222222","info":"#1377d5","success":"#4eb862","warn":"#faa419","error":"#ff134a"},"light-fluent-palette":{"primary":"#0078d4","secondary":"#2b88d8","gray":"#9e9e9e","surface":"white","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"dark-fluent-palette":{"primary":"#0078d4","secondary":"#2b88d8","gray":"#bdbdbd","surface":"#1b1b1b","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"light-indigo-palette":{"primary":"#3f51b5","secondary":"#3f51b5","gray":"#9a9da2","surface":"#f8f8fa","info":"#9c27b0","success":"#689f38","warn":"#f56b1d","error":"#cf1a2b"},"dark-indigo-palette":{"primary":"#3f51b5","secondary":"#3f51b5","gray":"#c3c4c7","surface":"#1e1f24","info":"#9c27b0","success":"#689f38","warn":"#f56b1d","error":"#cf1a2b"}}
+{"light-bootstrap-palette":{"primary":"#0d6efd","secondary":"#6c757d","gray":"#949ea9","surface":"#f8f9fa","info":"#0dcaf0","success":"#198754","warn":"#ffc107","error":"#dc3545"},"dark-bootstrap-palette":{"primary":"#0d6efd","secondary":"#6c757d","gray":"#b6bdc4","surface":"#212529","info":"#0dcaf0","success":"#198754","warn":"#ffc107","error":"#dc3545"},"light-material-palette":{"primary":"#0099ff","secondary":"#df1b74","gray":"#9e9e9e","surface":"white","info":"#1377d5","success":"#4eb862","warn":"#faa419","error":"#ff134a"},"dark-material-palette":{"primary":"#0099ff","secondary":"#df1b74","gray":"#bdbdbd","surface":"#222222","info":"#1377d5","success":"#4eb862","warn":"#faa419","error":"#ff134a"},"light-fluent-palette":{"primary":"#0078d4","secondary":"#2b88d8","gray":"#9e9e9e","surface":"white","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"dark-fluent-palette":{"primary":"#0078d4","secondary":"#2b88d8","gray":"#bdbdbd","surface":"#1b1b1b","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"light-indigo-palette":{"primary":"#4051b5","secondary":"#4051b5","gray":"#9a9da2","surface":"#f8f8fa","info":"#9b27b0","success":"#689f38","warn":"#f66d1e","error":"#d11a2c"},"dark-indigo-palette":{"primary":"#4051b5","secondary":"#4051b5","gray":"#c3c3c6","surface":"#1e1f24","info":"#9b27b0","success":"#689f38","warn":"#f66d1e","error":"#d11a2c"}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "13.1.0-beta.2",
+  "version": "14.0.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": {
@@ -93,9 +93,10 @@
     "shx": "^0.3.4",
     "stylelint": "^15.6.2",
     "stylelint-config-standard-scss": "^7.0.1",
-    "stylelint-scss": "^4.7.0"
+    "stylelint-scss": "^4.7.0",
+    "yargs": "^17.7.2"
   },
   "peerDependencies": {
-    "sass": "^1.69.5"
+    "sass": "^1.58.1"
   }
 }

package/sass/color/_functions.scss

@@ -103,13 +103,13 @@ $_enhanced-accessibility: false;
         $result: map.merge(
             $result,
             (
-                $variant: map.get($shade, 'hsl'),
+                $variant: map.get($shade, 'raw'),
                 #{$variant}-contrast:
                     text-contrast(
                         $background: map.get($shade, 'raw'),
                         $contrast: 'AA',
                     ),
-                raw: map.get($shade, 'raw'),
+                #{$variant}-hsl: map.get($shade, 'hsl'),
             )
         );
     }
@@ -139,14 +139,8 @@ $_enhanced-accessibility: false;
         $len: list.length($lmap);
         $i: list.index(map.keys($lmap), $shade);
         $l: list.nth(map.values($lmap), if($lum > 0.5, $len - $i + 1, $i));
-        $raw: hsl(to-fixed(color.hue($color)), to-fixed(color.saturation($color)), $l);
-        $hsl: #{hsl(from var(--ig-#{$name}-500) h s $l)};
 
-        @if #{$shade} == '500' {
-            $hsl: $raw;
-        }
-
-        @return (raw: $raw, hsl: $hsl);
+        @return (raw: hsl(to-fixed(color.hue($color)), to-fixed(color.saturation($color)), $l), hsl: #{$h, $s, $l});
     } @else {
         $sx: map.get(multipliers.$color, 's', $shade);
         $lx: map.get(multipliers.$color, 'l', $shade);
@@ -155,11 +149,9 @@ $_enhanced-accessibility: false;
             to-fixed(color.saturation($color) * $sx),
             to-fixed(color.lightness($color) * $lx)
         );
-        $hsl: #{hsl(from var(--ig-#{$name}-500) h calc(s * $sx) calc(l * $lx))};
 
-        @if #{$shade} == '500' {
-            $hsl: $color;
-        }
+        // prettier-ignore
+        $hsl: #{$h, calc(#{$s} * #{$sx}), calc(#{$l} * #{$lx})};
 
         @return (raw: $raw, hsl: $hsl);
     }
@@ -186,21 +178,26 @@ $_enhanced-accessibility: false;
 ///      background: color($my-palette, 'primary', 200, .5);
 ///    }
 @function color($palette: null, $color: 'primary', $variant: 500, $opacity: null) {
+    $c: map.get($palette or types.$IPalette, #{$color});
+    $a: var(--ig-#{$color}-a);
     $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: hsl(from $s h s l / $_alpha);
+    $_hsl-alpha: hsla($s, if($opacity, $opacity, $a));
     $_mix-alpha: color-mix(in oklch, $s #{$_alpha * 100%}, transparent);
 
-    @if $palette and not($contrast) {
-        $s: map.get($palette, $color);
-        $base: map.get($s, $variant);
-        $raw: map.get($s, raw);
+    @if not($palette) or not($meta) {
+        @return if($contrast, $_mix-alpha, $_hsl-alpha);
+    }
+
+    $_shade: map.get($c, $variant);
 
-        @return if($raw and $variant != 500, rgba($raw, $_alpha), rgba($base, $_alpha));
+    @if meta.type-of($_shade) == 'list' and list.length($_shade) == 3 {
+        $_shade: hsl($_shade...);
     }
 
-    @return if($contrast, $_mix-alpha, $_hsl-alpha);
+    @return rgba($_shade, $alpha: $_alpha);
 }
 
 /// Retrieves a contrast text color for a given color variant from a color palette.

package/sass/color/_mixins.scss

@@ -10,8 +10,29 @@
 /// @package theming
 ////
 
-// Tracks added CSS variables for color shades
-$_added: () !default;
+// Generates CSS variables for a base color
+// @access private
+@mixin _base($color, $shade, $value) {
+    @if $shade == 500 {
+        $_type: meta.type-of($value);
+        $_color: '' + $color;
+
+        @if $_type == 'color' {
+            --ig-#{$_color}-h: #{math.round(color.hue($value))};
+            --ig-#{$_color}-s: #{math.round(color.saturation($value))};
+            --ig-#{$_color}-l: #{math.round(color.lightness($value))};
+            --ig-#{$_color}-a: #{color.alpha($value)};
+        }
+
+        // Cover handmade palettes with hsl values for base color
+        @if $_type == 'list' and list.length($value) == 3 {
+            --ig-#{$_color}-h: #{list.nth($value, 1)};
+            --ig-#{$_color}-s: #{list.nth($value, 2)};
+            --ig-#{$_color}-l: #{list.nth($value, 3)};
+            --ig-#{$_color}-a: 1;
+        }
+    }
+}
 
 // Generates CSS variables for a shade color
 // @access private
@@ -20,11 +41,18 @@ $_added: () !default;
     $_hsl: if($_shade, string.index($shade, 'hsl'), false);
     $_contrast: if($_shade, string.index($shade, 'contrast'), false);
     $_color: '' + $color;
-    $_exists: list.index($_added, #{$_color}-#{$shade});
 
-    @if not($_hsl) {
-        $_added: list.append($_added, #{$_color}-#{$shade}) !global;
+    @if $_hsl {
+        $variant: string.slice($shade, 1, string.index($shade, '-hsl') - 1);
+
+        --ig-#{$_color}-#{$variant}: #{$value};
+    }
+
+    @if not($_hsl) and not($_contrast) {
+        --ig-#{$_color}-#{$shade}: #{$value};
+    }
 
+    @if $_contrast and $contrast {
         --ig-#{$_color}-#{$shade}: #{$value};
     }
 }
@@ -43,7 +71,8 @@ $_added: () !default;
 
     #{$scope} {
         @each $color, $shades in map.remove($palette, '_meta') {
-            @each $shade, $value in map.remove($shades, 'raw') {
+            @each $shade, $value in $shades {
+                @include _base($color, $shade, $value);
                 @include _shade($color, $shade, $value, $contrast);
             }
         }

package/sass/color/_multipliers.scss

@@ -7,9 +7,9 @@ $color: (
         400: 0.875,
         500: 1,
         600: 1.26,
-        700: 1.26,
-        800: 1.26,
-        900: 1.26,
+        700: 1.52,
+        800: 1.5,
+        900: 1.34,
         'A100': 1.23,
         'A200': 1.22,
         'A400': 1.23,

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

@@ -23,205 +23,205 @@ $surface-shades: shades('surface', #1e1f24, $color-shades);
 /// @prop {Color} surface [#1e1f24] - The surface color.
 $palette: (
     'primary': (
-        50: #c5cdff,
+        50: to-hsl(#c5cdff),
         '50-contrast': black,
-        100: #a3aff6,
+        100: to-hsl(#a3aff6),
         '100-contrast': black,
-        200: #8293f8,
+        200: to-hsl(#8293f8),
         '200-contrast': black,
-        300: #7385f4,
+        300: to-hsl(#7385f4),
         '300-contrast': black,
-        400: #5468d9,
+        400: to-hsl(#5468d9),
         '400-contrast': black,
-        500: #3f51b5,
+        500: to-hsl(#3f51b5),
         '500-contrast': white,
-        600: #39479c,
+        600: to-hsl(#39479c),
         '600-contrast': white,
-        700: #333d83,
+        700: to-hsl(#333d83),
         '700-contrast': white,
-        800: #2e3172,
+        800: to-hsl(#2e3172),
         '800-contrast': white,
-        900: #262851,
+        900: to-hsl(#262851),
         '900-contrast': white,
-        'A100': #39479c,
+        'A100': to-hsl(#39479c),
         'A100-contrast': white,
-        'A200': #333d83,
+        'A200': to-hsl(#333d83),
         'A200-contrast': white,
-        'A400': #2e3172,
+        'A400': to-hsl(#2e3172),
         'A400-contrast': white,
-        'A700': #262851,
+        'A700': to-hsl(#262851),
         'A700-contrast': white,
     ),
     'secondary': (
-        50: #c5cdff,
+        50: to-hsl(#c5cdff),
         '50-contrast': black,
-        100: #a3aff6,
+        100: to-hsl(#a3aff6),
         '100-contrast': black,
-        200: #8293f8,
+        200: to-hsl(#8293f8),
         '200-contrast': black,
-        300: #7385f4,
+        300: to-hsl(#7385f4),
         '300-contrast': black,
-        400: #5468d9,
+        400: to-hsl(#5468d9),
         '400-contrast': black,
-        500: #3f51b5,
+        500: to-hsl(#3f51b5),
         '500-contrast': white,
-        600: #39479c,
+        600: to-hsl(#39479c),
         '600-contrast': white,
-        700: #333d83,
+        700: to-hsl(#333d83),
         '700-contrast': white,
-        800: #2e3172,
+        800: to-hsl(#2e3172),
         '800-contrast': white,
-        900: #262851,
+        900: to-hsl(#262851),
         '900-contrast': white,
-        'A100': #39479c,
+        'A100': to-hsl(#39479c),
         'A100-contrast': white,
-        'A200': #333d83,
+        'A200': to-hsl(#333d83),
         'A200-contrast': white,
-        'A400': #2e3172,
+        'A400': to-hsl(#2e3172),
         'A400-contrast': white,
-        'A700': #262851,
+        'A700': to-hsl(#262851),
         'A700-contrast': white,
     ),
     'gray': (
-        50: #24252c,
+        50: to-hsl(#24252c),
         '50-contrast': white,
-        100: #3b3d47,
+        100: to-hsl(#3b3d47),
         '100-contrast': white,
-        200: #545762,
+        200: to-hsl(#545762),
         '200-contrast': white,
-        300: #6c707a,
+        300: to-hsl(#6c707a),
         '300-contrast': white,
-        400: #9a9da2,
+        400: to-hsl(#9a9da2),
         '400-contrast': black,
-        500: #c3c4c7,
+        500: to-hsl(#c3c4c7),
         '500-contrast': black,
-        600: #d6d8dc,
+        600: to-hsl(#d6d8dc),
         '600-contrast': black,
-        700: #ebedf2,
+        700: to-hsl(#ebedf2),
         '700-contrast': black,
-        800: #f8f8fa,
+        800: to-hsl(#f8f8fa),
         '800-contrast': black,
-        900: #fcfcfd,
+        900: to-hsl(#fcfcfd),
         '900-contrast': black,
     ),
     'info': (
-        50: #f1c3ff,
+        50: to-hsl(#f1c3ff),
         '50-contrast': black,
-        100: #e89eff,
+        100: to-hsl(#e89eff),
         '100-contrast': black,
-        200: #dd71ff,
+        200: to-hsl(#dd71ff),
         '200-contrast': black,
-        300: #da64ff,
+        300: to-hsl(#da64ff),
         '300-contrast': black,
-        400: #bc34d3,
+        400: to-hsl(#bc34d3),
         '400-contrast': white,
-        500: #9c27b0,
+        500: to-hsl(#9c27b0),
         '500-contrast': white,
-        600: #8c16a0,
+        600: to-hsl(#8c16a0),
         '600-contrast': white,
-        700: #7f1192,
+        700: to-hsl(#7f1192),
         '700-contrast': white,
-        800: #6f0a80,
+        800: to-hsl(#6f0a80),
         '800-contrast': white,
-        900: #5c056b,
+        900: to-hsl(#5c056b),
         '900-contrast': white,
-        'A100': #8c16a0,
+        'A100': to-hsl(#8c16a0),
         'A100-contrast': white,
-        'A200': #7f1192,
+        'A200': to-hsl(#7f1192),
         'A200-contrast': white,
-        'A400': #6f0a80,
+        'A400': to-hsl(#6f0a80),
         'A400-contrast': white,
-        'A700': #5c056b,
+        'A700': to-hsl(#5c056b),
         'A700-contrast': white,
     ),
     'success': (
-        50: #edf3e7,
+        50: to-hsl(#edf3e7),
         '50-contrast': black,
-        100: #d2e2c3,
+        100: to-hsl(#d2e2c3),
         '100-contrast': black,
-        200: #b4cf9c,
+        200: to-hsl(#b4cf9c),
         '200-contrast': black,
-        300: #95bc74,
+        300: to-hsl(#95bc74),
         '300-contrast': black,
-        400: #7fad56,
+        400: to-hsl(#7fad56),
         '400-contrast': black,
-        500: #689f38,
+        500: to-hsl(#689f38),
         '500-contrast': black,
-        600: #5a912a,
+        600: to-hsl(#5a912a),
         '600-contrast': black,
-        700: #4e8222,
+        700: to-hsl(#4e8222),
         '700-contrast': white,
-        800: #3d7012,
+        800: to-hsl(#3d7012),
         '800-contrast': white,
-        900: #316109,
+        900: to-hsl(#316109),
         '900-contrast': white,
-        'A100': #5a912a,
+        'A100': to-hsl(#5a912a),
         'A100-contrast': black,
-        'A200': #4e8222,
+        'A200': to-hsl(#4e8222),
         'A200-contrast': white,
-        'A400': #3d7012,
+        'A400': to-hsl(#3d7012),
         'A400-contrast': white,
-        'A700': #316109,
+        'A700': to-hsl(#316109),
         'A700-contrast': white,
     ),
     'warn': (
-        50: #fed7b7,
+        50: to-hsl(#fed7b7),
         '50-contrast': black,
-        100: #ffc696,
+        100: to-hsl(#ffc696),
         '100-contrast': black,
-        200: #ffad67,
+        200: to-hsl(#ffad67),
         '200-contrast': black,
-        300: #fb8f32,
+        300: to-hsl(#fb8f32),
         '300-contrast': black,
-        400: #fa7b0e,
+        400: to-hsl(#fa7b0e),
         '400-contrast': black,
-        500: #f56b1d,
+        500: to-hsl(#f56b1d),
         '500-contrast': black,
-        600: #f05a2b,
+        600: to-hsl(#f05a2b),
         '600-contrast': black,
-        700: #ec4820,
+        700: to-hsl(#ec4820),
         '700-contrast': black,
-        800: #df370e,
+        800: to-hsl(#df370e),
         '800-contrast': black,
-        900: #d22900,
+        900: to-hsl(#d22900),
         '900-contrast': white,
-        'A100': #f05a2b,
+        'A100': to-hsl(#f05a2b),
         'A100-contrast': black,
-        'A200': #ec4820,
+        'A200': to-hsl(#ec4820),
         'A200-contrast': black,
-        'A400': #df370e,
+        'A400': to-hsl(#df370e),
         'A400-contrast': black,
-        'A700': #d22900,
+        'A700': to-hsl(#d22900),
         'A700-contrast': white,
     ),
     'error': (
-        50: #ffebf0,
+        50: to-hsl(#ffebf0),
         '50-contrast': black,
-        100: #ffb0b7,
+        100: to-hsl(#ffb0b7),
         '100-contrast': black,
-        200: #fc7f8a,
+        200: to-hsl(#fc7f8a),
         '200-contrast': black,
-        300: #ec5461,
+        300: to-hsl(#ec5461),
         '300-contrast': black,
-        400: #dd3544,
+        400: to-hsl(#dd3544),
         '400-contrast': black,
-        500: #cf1a2b,
+        500: to-hsl(#cf1a2b),
         '500-contrast': white,
-        600: #c31223,
+        600: to-hsl(#c31223),
         '600-contrast': white,
-        700: #b90415,
+        700: to-hsl(#b90415),
         '700-contrast': white,
-        800: #ae0111,
+        800: to-hsl(#ae0111),
         '800-contrast': white,
-        900: #9f000f,
+        900: to-hsl(#9f000f),
         '900-contrast': white,
-        'A100': #c31223,
+        'A100': to-hsl(#c31223),
         'A100-contrast': white,
-        'A200': #b90415,
+        'A200': to-hsl(#b90415),
         'A200-contrast': white,
-        'A400': #ae0111,
+        'A400': to-hsl(#ae0111),
         'A400-contrast': white,
-        'A700': #9f000f,
+        'A700': to-hsl(#9f000f),
         'A700-contrast': white,
     ),
     'surface': $surface-shades,