igniteui-theming 5.0.0-beta.4 → 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.4",
+  "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',
+    ),
 );

package/sass/themes/schemas/components/dark/_banner.scss

@@ -19,9 +19,9 @@ $dark-fluent-banner: $fluent-banner;
 
 /// Generates a dark bootstrap banner schema.
 /// @type {Map}
-/// @prop {Map} banner-background [color: ('surface')] - The background color used banner background.
-/// @prop {Map} banner-message-color [color: ('gray', 600)] - The color used for banner label.
-/// @prop {Map} banner-illustration-color [color: ('gray', 600)] - The color used banner illustration.
+/// @prop {Map} banner-background [color: ('surface')] - The color used for the banner background.
+/// @prop {Map} banner-message-color [color: ('gray', 600)] - The color used for the banner label.
+/// @prop {Map} banner-illustration-color [color: ('gray', 600)] - The color used for the banner illustration.
 /// @requires $bootstrap-banner
 $dark-bootstrap-banner: extend(
     $bootstrap-banner,
@@ -50,5 +50,24 @@ $dark-bootstrap-banner: extend(
 
 /// Generates a dark indigo banner schema.
 /// @type {Map}
+/// @prop {Map} banner-background [color: ('gray', 50)] - The color used for the banner background.
+/// @prop {Map} banner-border-color [color: ('gray', 100)] - The color used for the banner border.
 /// @requires $indigo-banner
-$dark-indigo-banner: $indigo-banner;
+$dark-indigo-banner: extend(
+    $indigo-banner,
+    (
+        banner-background: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+
+        banner-border-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+    )
+);

package/sass/themes/schemas/components/elevation/_snackbar.scss

@@ -11,7 +11,13 @@ $default-elevation-snackbar: (
 );
 
 /// @type Map
-/// @prop {Number} elevation [10] - The elevation level, between 0-24, to be used in the snackbar.
+/// @prop {Number} elevation [10] - The elevation level, between 0-24, to be used in the bootstrap snackbar.
 $bootstrap-elevation-snackbar: (
     elevation: 10,
 );
+
+/// @type Map
+/// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used in the indigo snackbar.
+$indigo-elevation-snackbar: (
+    elevation: 0,
+);

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

@@ -9,10 +9,10 @@
 
 /// Generates a light banner schema.
 /// @type {Map}
-/// @prop {Map} banner-background [color: 'surface']- The background color used banner background.
-/// @prop {Map} banner-message-color [contrast-color: 'surface']- The color used for banner label.
-/// @prop {Map} banner-border-color [color: ('gray', 400)] - The border color used banner border.
-/// @prop {Map} banner-illustration-color [contrast-color: 'surface'] - The color used banner illustration.
+/// @prop {Map} banner-background [color: 'surface'] - The color used for the banner background.
+/// @prop {Map} banner-message-color [contrast-color: 'surface'] - The color used for the banner label.
+/// @prop {Map} banner-border-color [color: ('gray', 400)] - The color used for the banner border.
+/// @prop {Map} banner-illustration-color [contrast-color: 'surface'] - The color used for the banner illustration.
 $light-banner: (
     banner-background: (
         color: 'surface',
@@ -46,9 +46,9 @@ $fluent-banner: $light-banner;
 
 /// Generates a bootstrap banner schema.
 /// @type {Map}
-/// @prop {Map} banner-background [contrast-color: ('gray', 900)] - The background color used banner background.
-/// @prop {Map} banner-message-color [color: ('gray', 800)] - The color used for banner label.
-/// @prop {Map} banner-illustration-color [color: ('gray', 800)] - The color used banner illustration.
+/// @prop {Map} banner-background [contrast-color: ('gray', 900)] - The color used for the banner background.
+/// @prop {Map} banner-message-color [color: ('gray', 800)] - The color used for the banner label.
+/// @prop {Map} banner-illustration-color [color: ('gray', 800)] - The color used for the banner illustration.
 /// @requires {Map} $light-banner
 $bootstrap-banner: extend(
     $light-banner,
@@ -78,24 +78,36 @@ $bootstrap-banner: extend(
 
 /// Generates an indigo banner schema.
 /// @type {Map}
-/// @prop {Map} banner-message-color [color: ('gray', 900)]- The color used for banner label.
-/// @prop {Map} banner-illustration-color [color: ('gray', 600)] - The color used banner illustration.
-/// @requires {Map} $light-banner
-$indigo-banner: extend(
-    $light-banner,
-    (
-        banner-message-color: (
-            color: (
-                'gray',
-                900,
-            ),
+/// @prop {Map} banner-background [color: ('gray', 200)] - The color used for the banner background.
+/// @prop {Map} banner-message-color [color: ('gray', 700)] - The color used for the banner label.
+/// @prop {Map} banner-border-color [color: ('gray', 300)] - The color used for the banner border.
+/// @prop {Map} banner-illustration-color [color: ('gray', 600)] - The color used for the banner illustration.
+$indigo-banner: (
+    banner-background: (
+        color: (
+            'gray',
+            200,
         ),
+    ),
 
-        banner-illustration-color: (
-            color: (
-                'gray',
-                600,
-            ),
+    banner-border-color: (
+        color: (
+            'gray',
+            300,
         ),
-    )
+    ),
+
+    banner-message-color: (
+        color: (
+            'gray',
+            700,
+        ),
+    ),
+
+    banner-illustration-color: (
+        color: (
+            'gray',
+            600,
+        ),
+    ),
 );

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

@@ -108,31 +108,32 @@ $bootstrap-snackbar: extend(
 
 /// Generates an indigo snackbar schema.
 /// @type {Map}
-/// @prop {Map} background [color: ('gray', 700, .9)] - The background color used in the snackbar.
-/// @prop {Map} text-color [contrast-color: ('gray', 700)] - The text color used in the snackbar.
-/// @prop {Map} button-color [contrast-color: ('gray', 700)] - The button color used in the snackbar.
+/// @prop {Map} background [color: ('gray', 200)] - The background color used in the snackbar.
+/// @prop {Map} text-color [color: ('gray', 700)] - The text color used in the snackbar.
+/// @prop {Map} button-color [color: ('gray', 700)] - The button color used in the snackbar.
 /// @prop {List} border-radius [(rem(6px), rem(0), rem(24px))] - The border radius used for snackbar.
 /// @requires $light-snackbar
+/// @requires {Map} $indigo-elevation-snackbar
 $indigo-snackbar: extend(
     $light-snackbar,
+    $indigo-elevation-snackbar,
     (
         background: (
             color: (
                 'gray',
-                700,
-                0.9,
+                200,
             ),
         ),
 
         text-color: (
-            contrast-color: (
+            color: (
                 'gray',
                 700,
             ),
         ),
 
         button-color: (
-            contrast-color: (
+            color: (
                 'gray',
                 700,
             ),