feat(chip): improve chip custom theme functions (#15619)

Author: didimmova

projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss

@@ -106,94 +106,116 @@
     }
 
     $theme: digest-schema($chip-schema);
-    $meta: map.get($theme, '_meta');
+    $variant: map.get($theme, '_meta', 'theme');
 
     @if not($text-color) and $background {
-        $text-color: text-contrast($background);
+        $text-color: adaptive-contrast(var(--background));
     }
 
-    @if not($hover-background) and $background {
-        $luminance: luminance($background);
+    @if not($border-color) and $background {
+        $border-color: var(--background);
+    }
 
-        @if meta.type-of($luminance) == 'color' and $luminance + .05 < .5 {
-            $hover-background: color.scale($background, $lightness: 14%);
-        } @else {
-            $hover-background: color.scale($background, $lightness: -4%);
-        }
+    @if not($hover-background) and $background {
+        $hover-background: hsl(from var(--background) h s calc(l * 0.9));
     }
 
     @if not($hover-text-color) and $hover-background {
-        $hover-text-color: text-contrast(to-opaque($hover-background));
+        $hover-text-color: adaptive-contrast(var(--hover-background));
     }
 
     @if not($focus-background) and $background {
-        $luminance: luminance($background);
+        $focus-background: hsl(from var(--background) h s calc(l * 0.8));
+    }
 
-        @if meta.type-of($luminance) == 'color' and $luminance + .05 < .5 {
-            $focus-background: color.scale($background, $lightness: 22%);
-        } @else {
-            $focus-background: color.scale($background, $lightness: -8%);
+    @if $variant == 'fluent' {
+        @if not($focus-background) and $selected-background {
+            $focus-background: var(--selected-background);
         }
     }
 
     @if not($focus-text-color) and $focus-background {
-        $focus-text-color: text-contrast(to-opaque($focus-background));
+        $focus-text-color: adaptive-contrast(var(--focus-background));
     }
 
-    @if not($selected-background) and $background {
-        $luminance: luminance($background);
-
-        @if meta.type-of($luminance) == 'color' and $luminance + .05 < .5 {
-            $selected-background: color.scale($background, $lightness: 22%);
-        } @else {
-            $selected-background: color.scale($background, $lightness: -8%);
+    @if $variant != 'indigo' and $variant != 'fluent' {
+        @if not($selected-background) and $background {
+            $selected-background: var(--background);
+        }
+    } @else {
+        @if not($selected-background) and $background {
+            $selected-background: hsl(from var(--background) h s calc(l * 1.1));
         }
     }
 
     @if not($selected-text-color) and $selected-background {
-        $selected-text-color: text-contrast(to-opaque($selected-background));
+        $selected-text-color: adaptive-contrast(var(--selected-background));
     }
 
-    @if not($hover-selected-background) and $hover-background {
-        $hover-selected-background: $hover-background;
+    @if not($hover-selected-background) and $selected-background {
+        $hover-selected-background: hsl(from var(--selected-background) h s calc(l * 0.9));
     }
 
     @if not($hover-selected-text-color) and $hover-selected-background {
-        $hover-selected-text-color: text-contrast(to-opaque($hover-selected-background));
+        $hover-selected-text-color: adaptive-contrast(var(--hover-selected-background));
     }
 
-    @if not($focus-selected-background) and $selected-background {
-        $luminance: luminance($selected-background);
-
-        @if meta.type-of($luminance) == 'color' and $luminance + .05 < .5 {
-            $focus-selected-background: color.scale($background, $lightness: 32%);
-        } @else {
-            $focus-selected-background: color.scale($background, $lightness: -16%);
+    @if $variant != 'indigo' {
+        @if not($focus-selected-background) and $selected-background {
+            $focus-selected-background: hsl(from var(--selected-background) h s calc(l * 0.8));
+        }
+    } @else {
+        @if not($focus-selected-background) and $selected-background {
+            $focus-selected-background: var(--selected-background);
         }
     }
 
     @if not($focus-selected-text-color) and $focus-selected-background {
-        $focus-selected-text-color: text-contrast(to-opaque($focus-selected-background));
+        $focus-selected-text-color: adaptive-contrast(var(--focus-selected-background));
     }
 
     @if not($hover-border-color) and $border-color {
-        $hover-border-color: $border-color;
+        $hover-border-color: var(--border-color);
     }
 
     @if not($focus-border-color) and $border-color {
-        $focus-border-color: $border-color;
+        $focus-border-color: var(--border-color);
     }
 
     @if not($selected-border-color) and $border-color {
-        $selected-border-color: $border-color;
+        $selected-border-color: var(--border-color);
     }
 
     @if not($hover-selected-border-color) and $border-color {
-        $hover-selected-border-color: $border-color;
+        $hover-selected-border-color: var(--border-color);
     }
 
     @if not($focus-selected-border-color) and $border-color {
-        $focus-selected-border-color: $border-color;
+        $focus-selected-border-color: var(--border-color);
+    }
+
+    @if $variant == 'indigo' {
+        @if not($selected-border-color) and $selected-background {
+            $selected-border-color: var(--selected-background);
+        }
+
+        @if not($hover-selected-border-color) and $hover-selected-background {
+            $hover-selected-border-color: var(--hover-selected-background);
+        }
+
+        @if not($focus-selected-border-color) and $focus-selected-background {
+            $focus-selected-border-color: var(--focus-selected-background);
+        }
+    }
+
+    @if $variant == 'bootstrap' or $variant == 'indigo' {
+        @if not($focus-outline-color) and $focus-background {
+            $focus-outline-color: hsla(from var(--focus-background) h s l / 0.4);
+        }
+
+        @if not($focus-selected-outline-color) and $focus-selected-background {
+            $focus-selected-outline-color: hsla(from var(--focus-selected-background) h s l / 0.4);
+        }
     }
 
     @if not($ghost-shadow) {
@@ -240,11 +262,6 @@
         remove-icon-color-focus: $remove-icon-color-focus,
         focus-selected-outline-color: $focus-selected-outline-color,
         focus-outline-color: $focus-outline-color,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme'),
-            theme-variant: map.get($schema, '_meta', 'variant')
-        )),
         size: $size,
     ));
 }
@@ -256,8 +273,8 @@
     @include css-vars($theme);
     $chip-max-width: 32ch;
 
-    $variant: map.get($theme, '_meta', 'variant');
-    $theme-variant: map.get($theme, '_meta', 'theme-variant');
+    $variant: map.get($theme, '_meta', 'theme');
+    $theme-variant: map.get($theme, '_meta', 'variant');
 
     $chip-padding: (
         comfortable: rem(if($variant != 'indigo', 12px, 7px)),