fix(themes): handmade palettes don't work (#9237)

Author: simeonoff

projects/igniteui-angular/src/lib/core/styles/base/utilities/_mixins.scss

@@ -161,14 +161,16 @@
 ///
 @mixin igx-palette-vars($palette, $contrast: true) {
     $scope: if(is-root(), ':root', '&');
-    $theme: map-get(map-get($palette, '_meta'), 'variant');
+    $_meta: map-get($palette, '_meta');
+    $theme: if($_meta, map-get($_meta, 'variant'), null);
 
     #{$scope} {
         @each $name, $color in $palette {
             @each $variant, $value in $color {
-                $valid: not(str-index(#{$variant}, 'contrast')) and not(str-index(#{$variant}, 'variant'));
+                $_valid-base: type-of(map-get($color, 500)) == 'color' and $theme;
+                $_valid-variant: not(str-index(#{$variant}, 'contrast')) and not(str-index(#{$variant}, 'variant')) and $theme;
 
-                @if($variant == 500) {
+                @if $_valid-base and $variant == 500 {
                     --igx-#{$name}-h: #{round(hue($value))};
                     --igx-#{$name}-s: #{round(saturation($value))};
                     --igx-#{$name}-l: #{round(lightness($value))};
@@ -180,7 +182,7 @@
                     }
                 }
 
-                @if $valid {
+                @if $_valid-base and $_valid-variant {
                     --igx-#{$name}-#{$variant}: #{_gen-hsla-color($name, $variant, $theme)};
                 } @else if $name != '_meta' {
                     --igx-#{$name}-#{$variant}: #{$value};

src/styles/_demo-theme.scss

@@ -9,6 +9,10 @@ body {
     color: $igx-foreground-color;
 }
 
+:root {
+    --some-dynamic-color: hsl(#{random(360)}, 100%, 50%);
+}
+
 @include igx-core($direction: $direction);
 @include igx-typography($font-family: $typeface, $type-scale: $type-scale);
 @include igx-theme($palette: $palette, $schema: $schema, $legacy-support: $legacy-support);

src/styles/_variables.scss

@@ -73,26 +73,26 @@ $handmade-palette: (
         'A700-contrast': white
     ),
     grays: (
-        50: rgba(0, 0, 0, .02),
-        '50-contrast': black,
-        100: rgba(0, 0, 0, .04),
-        '100-contrast': black,
-        200: rgba(0, 0, 0, .08),
-        '200-contrast': black,
-        300: rgba(0, 0, 0, .12),
-        '300-contrast': black,
-        400: rgba(0, 0, 0, .26),
-        '400-contrast': black,
-        500: rgba(0, 0, 0, .38),
+        50: rgba(255, 255, 255, .02),
+        '50-contrast': white,
+        100: rgba(255, 255, 255, .04),
+        '100-contrast': white,
+        200: rgba(255, 255, 255, .08),
+        '200-contrast': white,
+        300: rgba(255, 255, 255, .12),
+        '300-contrast': white,
+        400: rgba(255, 255, 255, .26),
+        '400-contrast': white,
+        500: rgba(255, 255, 255, .38),
         '500-contrast': black,
-        600: rgba(0, 0, 0, .54),
-        '600-contrast': white,
-        700: rgba(0, 0, 0, .62),
-        '700-contrast': white,
-        800: rgba(0, 0, 0, .74),
-        '800-contrast': white,
-        900: rgba(0, 0, 0, .87),
-        '900-contrast': white
+        600: rgba(255, 255, 255, .54),
+        '600-contrast': black,
+        700: rgba(255, 255, 255, .62),
+        '700-contrast': black,
+        800: rgba(255, 255, 255, .74),
+        '800-contrast': black,
+        900: rgba(255, 255, 255, .87),
+        '900-contrast': black
     ),
     info: (
         500: #1377d5,
@@ -111,7 +111,9 @@ $handmade-palette: (
         '500-contrast': black
     ),
     surface: (
-        500: #fff,
-        '500-contrast': black
+        500: #222,
+        '500-contrast': white
     )
 );
+
+// $palette: $handmade-palette;