igniteui-theming 14.2.0-beta.2 → 14.2.0

package/README.md

@@ -102,3 +102,12 @@ 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.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%"}}}
+{"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%"}}}

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":"#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"}}
+{"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"}}

package/package.json

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

package/sass/color/_functions.scss

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

package/sass/color/_mixins.scss

@@ -10,29 +10,8 @@
 /// @package theming
 ////
 
-// 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;
-        }
-    }
-}
+// Tracks added CSS variables for color shades
+$_added: () !default;
 
 // Generates CSS variables for a shade color
 // @access private
@@ -41,18 +20,11 @@
     $_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 $_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 not($_hsl) {
+        $_added: list.append($_added, #{$_color}-#{$shade}) !global;
 
-    @if $_contrast and $contrast {
         --ig-#{$_color}-#{$shade}: #{$value};
     }
 }
@@ -72,8 +44,9 @@
     #{$scope} {
         @each $color, $shades in map.remove($palette, '_meta') {
             @each $shade, $value in $shades {
-                @include _base($color, $shade, $value);
-                @include _shade($color, $shade, $value, $contrast);
+                @if not(string.index(to-string($shade), raw)) {
+                    @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.52,
-        800: 1.5,
-        900: 1.34,
+        700: 1.26,
+        800: 1.26,
+        900: 1.26,
         '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: to-hsl(#c5cdff),
+        50: #c5cdff,
         '50-contrast': black,
-        100: to-hsl(#a3aff6),
+        100: #a3aff6,
         '100-contrast': black,
-        200: to-hsl(#8293f8),
+        200: #8293f8,
         '200-contrast': black,
-        300: to-hsl(#7385f4),
+        300: #7385f4,
         '300-contrast': black,
-        400: to-hsl(#5468d9),
+        400: #5468d9,
         '400-contrast': black,
-        500: to-hsl(#3f51b5),
+        500: #3f51b5,
         '500-contrast': white,
-        600: to-hsl(#39479c),
+        600: #39479c,
         '600-contrast': white,
-        700: to-hsl(#333d83),
+        700: #333d83,
         '700-contrast': white,
-        800: to-hsl(#2e3172),
+        800: #2e3172,
         '800-contrast': white,
-        900: to-hsl(#262851),
+        900: #262851,
         '900-contrast': white,
-        'A100': to-hsl(#39479c),
+        'A100': #39479c,
         'A100-contrast': white,
-        'A200': to-hsl(#333d83),
+        'A200': #333d83,
         'A200-contrast': white,
-        'A400': to-hsl(#2e3172),
+        'A400': #2e3172,
         'A400-contrast': white,
-        'A700': to-hsl(#262851),
+        'A700': #262851,
         'A700-contrast': white,
     ),
     'secondary': (
-        50: to-hsl(#c5cdff),
+        50: #c5cdff,
         '50-contrast': black,
-        100: to-hsl(#a3aff6),
+        100: #a3aff6,
         '100-contrast': black,
-        200: to-hsl(#8293f8),
+        200: #8293f8,
         '200-contrast': black,
-        300: to-hsl(#7385f4),
+        300: #7385f4,
         '300-contrast': black,
-        400: to-hsl(#5468d9),
+        400: #5468d9,
         '400-contrast': black,
-        500: to-hsl(#3f51b5),
+        500: #3f51b5,
         '500-contrast': white,
-        600: to-hsl(#39479c),
+        600: #39479c,
         '600-contrast': white,
-        700: to-hsl(#333d83),
+        700: #333d83,
         '700-contrast': white,
-        800: to-hsl(#2e3172),
+        800: #2e3172,
         '800-contrast': white,
-        900: to-hsl(#262851),
+        900: #262851,
         '900-contrast': white,
-        'A100': to-hsl(#39479c),
+        'A100': #39479c,
         'A100-contrast': white,
-        'A200': to-hsl(#333d83),
+        'A200': #333d83,
         'A200-contrast': white,
-        'A400': to-hsl(#2e3172),
+        'A400': #2e3172,
         'A400-contrast': white,
-        'A700': to-hsl(#262851),
+        'A700': #262851,
         'A700-contrast': white,
     ),
     'gray': (
-        50: to-hsl(#24252c),
+        50: #24252c,
         '50-contrast': white,
-        100: to-hsl(#3b3d47),
+        100: #3b3d47,
         '100-contrast': white,
-        200: to-hsl(#545762),
+        200: #545762,
         '200-contrast': white,
-        300: to-hsl(#6c707a),
+        300: #6c707a,
         '300-contrast': white,
-        400: to-hsl(#9a9da2),
+        400: #9a9da2,
         '400-contrast': black,
-        500: to-hsl(#c3c4c7),
+        500: #c3c4c7,
         '500-contrast': black,
-        600: to-hsl(#d6d8dc),
+        600: #d6d8dc,
         '600-contrast': black,
-        700: to-hsl(#ebedf2),
+        700: #ebedf2,
         '700-contrast': black,
-        800: to-hsl(#f8f8fa),
+        800: #f8f8fa,
         '800-contrast': black,
-        900: to-hsl(#fcfcfd),
+        900: #fcfcfd,
         '900-contrast': black,
     ),
     'info': (
-        50: to-hsl(#f1c3ff),
+        50: #f1c3ff,
         '50-contrast': black,
-        100: to-hsl(#e89eff),
+        100: #e89eff,
         '100-contrast': black,
-        200: to-hsl(#dd71ff),
+        200: #dd71ff,
         '200-contrast': black,
-        300: to-hsl(#da64ff),
+        300: #da64ff,
         '300-contrast': black,
-        400: to-hsl(#bc34d3),
+        400: #bc34d3,
         '400-contrast': white,
-        500: to-hsl(#9c27b0),
+        500: #9c27b0,
         '500-contrast': white,
-        600: to-hsl(#8c16a0),
+        600: #8c16a0,
         '600-contrast': white,
-        700: to-hsl(#7f1192),
+        700: #7f1192,
         '700-contrast': white,
-        800: to-hsl(#6f0a80),
+        800: #6f0a80,
         '800-contrast': white,
-        900: to-hsl(#5c056b),
+        900: #5c056b,
         '900-contrast': white,
-        'A100': to-hsl(#8c16a0),
+        'A100': #8c16a0,
         'A100-contrast': white,
-        'A200': to-hsl(#7f1192),
+        'A200': #7f1192,
         'A200-contrast': white,
-        'A400': to-hsl(#6f0a80),
+        'A400': #6f0a80,
         'A400-contrast': white,
-        'A700': to-hsl(#5c056b),
+        'A700': #5c056b,
         'A700-contrast': white,
     ),
     'success': (
-        50: to-hsl(#edf3e7),
+        50: #edf3e7,
         '50-contrast': black,
-        100: to-hsl(#d2e2c3),
+        100: #d2e2c3,
         '100-contrast': black,
-        200: to-hsl(#b4cf9c),
+        200: #b4cf9c,
         '200-contrast': black,
-        300: to-hsl(#95bc74),
+        300: #95bc74,
         '300-contrast': black,
-        400: to-hsl(#7fad56),
+        400: #7fad56,
         '400-contrast': black,
-        500: to-hsl(#689f38),
+        500: #689f38,
         '500-contrast': black,
-        600: to-hsl(#5a912a),
+        600: #5a912a,
         '600-contrast': black,
-        700: to-hsl(#4e8222),
+        700: #4e8222,
         '700-contrast': white,
-        800: to-hsl(#3d7012),
+        800: #3d7012,
         '800-contrast': white,
-        900: to-hsl(#316109),
+        900: #316109,
         '900-contrast': white,
-        'A100': to-hsl(#5a912a),
+        'A100': #5a912a,
         'A100-contrast': black,
-        'A200': to-hsl(#4e8222),
+        'A200': #4e8222,
         'A200-contrast': white,
-        'A400': to-hsl(#3d7012),
+        'A400': #3d7012,
         'A400-contrast': white,
-        'A700': to-hsl(#316109),
+        'A700': #316109,
         'A700-contrast': white,
     ),
     'warn': (
-        50: to-hsl(#fed7b7),
+        50: #fed7b7,
         '50-contrast': black,
-        100: to-hsl(#ffc696),
+        100: #ffc696,
         '100-contrast': black,
-        200: to-hsl(#ffad67),
+        200: #ffad67,
         '200-contrast': black,
-        300: to-hsl(#fb8f32),
+        300: #fb8f32,
         '300-contrast': black,
-        400: to-hsl(#fa7b0e),
+        400: #fa7b0e,
         '400-contrast': black,
-        500: to-hsl(#f56b1d),
+        500: #f56b1d,
         '500-contrast': black,
-        600: to-hsl(#f05a2b),
+        600: #f05a2b,
         '600-contrast': black,
-        700: to-hsl(#ec4820),
+        700: #ec4820,
         '700-contrast': black,
-        800: to-hsl(#df370e),
+        800: #df370e,
         '800-contrast': black,
-        900: to-hsl(#d22900),
+        900: #d22900,
         '900-contrast': white,
-        'A100': to-hsl(#f05a2b),
+        'A100': #f05a2b,
         'A100-contrast': black,
-        'A200': to-hsl(#ec4820),
+        'A200': #ec4820,
         'A200-contrast': black,
-        'A400': to-hsl(#df370e),
+        'A400': #df370e,
         'A400-contrast': black,
-        'A700': to-hsl(#d22900),
+        'A700': #d22900,
         'A700-contrast': white,
     ),
     'error': (
-        50: to-hsl(#ffebf0),
+        50: #ffebf0,
         '50-contrast': black,
-        100: to-hsl(#ffb0b7),
+        100: #ffb0b7,
         '100-contrast': black,
-        200: to-hsl(#fc7f8a),
+        200: #fc7f8a,
         '200-contrast': black,
-        300: to-hsl(#ec5461),
+        300: #ec5461,
         '300-contrast': black,
-        400: to-hsl(#dd3544),
+        400: #dd3544,
         '400-contrast': black,
-        500: to-hsl(#cf1a2b),
+        500: #cf1a2b,
         '500-contrast': white,
-        600: to-hsl(#c31223),
+        600: #c31223,
         '600-contrast': white,
-        700: to-hsl(#b90415),
+        700: #b90415,
         '700-contrast': white,
-        800: to-hsl(#ae0111),
+        800: #ae0111,
         '800-contrast': white,
-        900: to-hsl(#9f000f),
+        900: #9f000f,
         '900-contrast': white,
-        'A100': to-hsl(#c31223),
+        'A100': #c31223,
         'A100-contrast': white,
-        'A200': to-hsl(#b90415),
+        'A200': #b90415,
         'A200-contrast': white,
-        'A400': to-hsl(#ae0111),
+        'A400': #ae0111,
         'A400-contrast': white,
-        'A700': to-hsl(#9f000f),
+        'A700': #9f000f,
         'A700-contrast': white,
     ),
     'surface': $surface-shades,