igniteui-theming 5.0.0-beta.5 → 5.0.0-beta.6

package/json/colors/presets/palettes.json

@@ -1 +1 @@
-{"dark-bootstrap-palette":{"primary":"#0d6efd","secondary":"#6c757d","gray":"#adb5bd","surface":"#212529","info":"#0dcaf0","success":"#198754","warn":"#ffc107","error":"#dc3545"},"dark-green-palette":{"primary":"#09f","secondary":"#72da67","surface":"#222","info":"#1377d5","success":"#4eb862","warn":"#fbb13c","error":"#ff134a"},"dark-purple-palette":{"primary":"#00b4d6","secondary":"#514590","surface":"#333","info":"#1377d5","success":"#4eb862","warn":"#fbb13c","error":"#ff134a"},"dark-fluent-palette":{"primary":"#0078d4","secondary":"#2b88d8","surface":"#222","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"dark-fluent-word-palette":{"primary":"#2b579a","secondary":"#2b579a","surface":"#222","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"dark-fluent-excel-palette":{"primary":"#217346","secondary":"#217346","surface":"#222","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"dark-indigo-palette":{"100":"to-hsl(#ffb0b7)","200":"to-hsl(#fc7f8a)","300":"to-hsl(#ec5461)","400":"to-hsl(#dd3544)","500":"to-hsl(#cf1a2b)","600":"to-hsl(#c31223)","700":"to-hsl(#b90415)","800":"to-hsl(#ae0111)","900":"to-hsl(#9f000f)","primary":"( 50: to-hsl(#c5cdff)","50-contrast":"black","100-contrast":"black","200-contrast":"black","300-contrast":"black","400-contrast":"black","500-contrast":"white","600-contrast":"white","700-contrast":"white","800-contrast":"white","900-contrast":"white","A100":"to-hsl(#c31223)","A100-contrast":"white","A200":"to-hsl(#b90415)","A200-contrast":"white","A400":"to-hsl(#ae0111)","A400-contrast":"white","A700":"to-hsl(#9f000f)","A700-contrast":"white","secondary":"( 50: to-hsl(#c5cdff)","gray":"( 50: to-hsl(#24252c)","info":"( 50: to-hsl(#f1c3ff)","success":"( 50: to-hsl(#edf3e7)","warn":"( 50: to-hsl(#fed7b7)","error":"( 50: to-hsl(#ffebf0)","surface":"( 500: to-hsl(#1e1e1e)"},"dark-material-palette":{"primary":"#09f","secondary":"#e41c77","surface":"#222","info":"#1377d5","success":"#4eb862","warn":"#faa419","error":"#ff134a"},"light-bootstrap-palette":{"primary":"#0d6efd","secondary":"#6c757d","gray":"#adb5bd","surface":"#f8f9fa","info":"#0dcaf0","success":"#198754","warn":"#ffc107","error":"#dc3545"},"light-green-palette":{"primary":"#09f","secondary":"#72da67","surface":"#fff","info":"#1377d5","success":"#4eb862","warn":"#fbb13c","error":"#ff134a"},"light-purple-palette":{"primary":"#00b4d6","secondary":"#514590","surface":"#fff","info":"#1377d5","success":"#4eb862","warn":"#fbb13c","error":"#ff134a"},"light-fluent-palette":{"primary":"#0078d4","secondary":"#2b88d8","surface":"#fff","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"light-fluent-word-palette":{"primary":"#2b579a","secondary":"#2b579a","surface":"#fff","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"light-fluent-excel-palette":{"primary":"#217346","secondary":"#217346","surface":"#fff","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"light-indigo-palette":{"100":"to-hsl(#ffb0b7)","200":"to-hsl(#fc7f8a)","300":"to-hsl(#ec5461)","400":"to-hsl(#dd3544)","500":"to-hsl(#cf1a2b)","600":"to-hsl(#c31223)","700":"to-hsl(#b90415)","800":"to-hsl(#ae0111)","900":"to-hsl(#9f000f)","primary":"( 50: to-hsl(#c5cdff)","50-contrast":"black","100-contrast":"black","200-contrast":"black","300-contrast":"black","400-contrast":"black","500-contrast":"black","600-contrast":"white","700-contrast":"white","800-contrast":"white","900-contrast":"white","A100":"to-hsl(#c31223)","A100-contrast":"white","A200":"to-hsl(#b90415)","A200-contrast":"white","A400":"to-hsl(#ae0111)","A400-contrast":"white","A700":"to-hsl(#9f000f)","A700-contrast":"white","secondary":"( 50: to-hsl(#c5cdff)","gray":"( 50: to-hsl(#fcfcfd)","info":"( 50: to-hsl(#f1c3ff)","success":"( 50: to-hsl(#edf3e7)","warn":"( 50: to-hsl(#fed7b7)","error":"( 50: to-hsl(#ffebf0)","surface":"( 500: to-hsl(#f8f8fa)"},"light-material-palette":{"primary":"#09f","secondary":"#e41c77","surface":"white","info":"#1377d5","success":"#4eb862","warn":"#faa419","error":"#ff134a"}}
+{"dark-bootstrap-palette":{"primary":"#0d6efd","secondary":"#6c757d","gray":"#adb5bd","surface":"#212529","info":"#0dcaf0","success":"#198754","warn":"#ffc107","error":"#dc3545"},"dark-green-palette":{"primary":"#09f","secondary":"#72da67","surface":"#222","info":"#1377d5","success":"#4eb862","warn":"#fbb13c","error":"#ff134a"},"dark-purple-palette":{"primary":"#00b4d6","secondary":"#514590","surface":"#333","info":"#1377d5","success":"#4eb862","warn":"#fbb13c","error":"#ff134a"},"dark-fluent-palette":{"primary":"#0078d4","secondary":"#2b88d8","surface":"#222","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"dark-fluent-word-palette":{"primary":"#2b579a","secondary":"#2b579a","surface":"#222","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"dark-fluent-excel-palette":{"primary":"#217346","secondary":"#217346","surface":"#222","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"dark-indigo-palette":{"100":"to-hsl(#ffb0b7)","200":"to-hsl(#fc7f8a)","300":"to-hsl(#ec5461)","400":"to-hsl(#dd3544)","500":"to-hsl(#cf1a2b)","600":"to-hsl(#c31223)","700":"to-hsl(#b90415)","800":"to-hsl(#ae0111)","900":"to-hsl(#9f000f)","primary":"( 50: to-hsl(#c5cdff)","50-contrast":"black","100-contrast":"black","200-contrast":"black","300-contrast":"black","400-contrast":"black","500-contrast":"white","600-contrast":"white","700-contrast":"white","800-contrast":"white","900-contrast":"white","A100":"to-hsl(#c31223)","A100-contrast":"white","A200":"to-hsl(#b90415)","A200-contrast":"white","A400":"to-hsl(#ae0111)","A400-contrast":"white","A700":"to-hsl(#9f000f)","A700-contrast":"white","secondary":"( 50: to-hsl(#c5cdff)","gray":"( 50: to-hsl(#24252c)","info":"( 50: to-hsl(#f1c3ff)","success":"( 50: to-hsl(#edf3e7)","warn":"( 50: to-hsl(#fed7b7)","error":"( 50: to-hsl(#ffebf0)","surface":"( 500: to-hsl(#1e1e1e)","_meta":"( variant: 'indigo', )"},"dark-material-palette":{"primary":"#09f","secondary":"#e41c77","surface":"#222","info":"#1377d5","success":"#4eb862","warn":"#faa419","error":"#ff134a"},"light-bootstrap-palette":{"primary":"#0d6efd","secondary":"#6c757d","gray":"#adb5bd","surface":"#f8f9fa","info":"#0dcaf0","success":"#198754","warn":"#ffc107","error":"#dc3545"},"light-green-palette":{"primary":"#09f","secondary":"#72da67","surface":"#fff","info":"#1377d5","success":"#4eb862","warn":"#fbb13c","error":"#ff134a"},"light-purple-palette":{"primary":"#00b4d6","secondary":"#514590","surface":"#fff","info":"#1377d5","success":"#4eb862","warn":"#fbb13c","error":"#ff134a"},"light-fluent-palette":{"primary":"#0078d4","secondary":"#2b88d8","surface":"#fff","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"light-fluent-word-palette":{"primary":"#2b579a","secondary":"#2b579a","surface":"#fff","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"light-fluent-excel-palette":{"primary":"#217346","secondary":"#217346","surface":"#fff","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"light-indigo-palette":{"100":"to-hsl(#ffb0b7)","200":"to-hsl(#fc7f8a)","300":"to-hsl(#ec5461)","400":"to-hsl(#dd3544)","500":"to-hsl(#cf1a2b)","600":"to-hsl(#c31223)","700":"to-hsl(#b90415)","800":"to-hsl(#ae0111)","900":"to-hsl(#9f000f)","primary":"( 50: to-hsl(#c5cdff)","50-contrast":"black","100-contrast":"black","200-contrast":"black","300-contrast":"black","400-contrast":"black","500-contrast":"black","600-contrast":"white","700-contrast":"white","800-contrast":"white","900-contrast":"white","A100":"to-hsl(#c31223)","A100-contrast":"white","A200":"to-hsl(#b90415)","A200-contrast":"white","A400":"to-hsl(#ae0111)","A400-contrast":"white","A700":"to-hsl(#9f000f)","A700-contrast":"white","secondary":"( 50: to-hsl(#c5cdff)","gray":"( 50: to-hsl(#fcfcfd)","info":"( 50: to-hsl(#f1c3ff)","success":"( 50: to-hsl(#edf3e7)","warn":"( 50: to-hsl(#fed7b7)","error":"( 50: to-hsl(#ffebf0)","surface":"( 500: to-hsl(#f8f8fa)","_meta":"( variant: 'indigo', )"},"light-material-palette":{"primary":"#09f","secondary":"#e41c77","surface":"white","info":"#1377d5","success":"#4eb862","warn":"#faa419","error":"#ff134a"}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "5.0.0-beta.5",
+  "version": "5.0.0-beta.6",
   "description": "A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.",
   "main": "index.js",
   "scripts": {

package/sass/color/_functions.scss

@@ -185,7 +185,13 @@ $_enhanced-accessibility: false;
         @return if($contrast, $_mix-alpha, $_hsl-alpha);
     }
 
-    @return rgba(map.get($c, $variant), $alpha: $_alpha);
+    $_shade: map.get($c, $variant);
+
+    @if meta.type-of($_shade) == 'list' and list.length($_shade) == 3 {
+        $_shade: hsl($_shade...);
+    }
+
+    @return rgba($_shade, $alpha: $_alpha);
 }
 
 /// Retrieves a contrast text color for a given color variant from a color palette.

package/sass/color/_mixins.scss

@@ -15,20 +15,21 @@
 @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)};
+            --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;
+            --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;
         }
     }
 }
@@ -39,19 +40,20 @@
     $_shade: meta.type-of($shade) == 'string';
     $_hsl: if($_shade, string.index($shade, 'hsl'), false);
     $_contrast: if($_shade, string.index($shade, 'contrast'), false);
+    $_color: '' + $color;
 
     @if $_hsl {
         $variant: string.slice($shade, 1, string.index($shade, '-hsl') - 1);
 
-        --ig-#{$color}-#{$variant}: #{$value};
+        --ig-#{$_color}-#{$variant}: #{$value};
     }
 
     @if not($_hsl) and not($_contrast) {
-        --ig-#{$color}-#{$shade}: #{$value};
+        --ig-#{$_color}-#{$shade}: #{$value};
     }
 
     @if $_contrast and $contrast {
-        --ig-#{$color}-#{$shade}: #{$value};
+        --ig-#{$_color}-#{$shade}: #{$value};
     }
 }
 

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

@@ -30,7 +30,7 @@ $palette: (
         '200-contrast': black,
         300: to-hsl(#7385f4),
         '300-contrast': black,
-        400: to-hsl(#5c6edb),
+        400: to-hsl(#5468d9),
         '400-contrast': black,
         500: to-hsl(#3f51b5),
         '500-contrast': white,
@@ -60,7 +60,7 @@ $palette: (
         '200-contrast': black,
         300: to-hsl(#7385f4),
         '300-contrast': black,
-        400: to-hsl(#5c6edb),
+        400: to-hsl(#5468d9),
         '400-contrast': black,
         500: to-hsl(#3f51b5),
         '500-contrast': white,
@@ -227,5 +227,7 @@ $palette: (
         500: to-hsl(#1e1e1e),
         '500-contrast': white,
     ),
-    variant: 'indigo',
+    _meta: (
+        variant: 'indigo',
+    ),
 );

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

@@ -30,7 +30,7 @@ $palette: (
         '200-contrast': black,
         300: to-hsl(#7385f4),
         '300-contrast': black,
-        400: to-hsl(#5c6edb),
+        400: to-hsl(#5468d9),
         '400-contrast': black,
         500: to-hsl(#3f51b5),
         '500-contrast': white,
@@ -60,7 +60,7 @@ $palette: (
         '200-contrast': black,
         300: to-hsl(#7385f4),
         '300-contrast': black,
-        400: to-hsl(#5c6edb),
+        400: to-hsl(#5468d9),
         '400-contrast': black,
         500: to-hsl(#3f51b5),
         '500-contrast': white,
@@ -227,5 +227,7 @@ $palette: (
         500: to-hsl(#f8f8fa),
         '500-contrast': black,
     ),
-    variant: 'indigo',
+    _meta: (
+        variant: 'indigo',
+    ),
 );