feat(slider): improve slider theme (#15743)

Author: didimmova

projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss

@@ -71,10 +71,99 @@
     }
 
     $theme: digest-schema($slider-schema);
-    $meta: map.get($theme, '_meta');
+    $variant: map.get($theme, '_meta', 'theme');
+
+    @if $variant == 'fluent' or $variant == 'indigo' {
+        @if not($thumb-border-color) and $track-color {
+            $thumb-border-color: var(--track-color);
+        }
+
+        @if not($track-color) and $thumb-border-color {
+            $track-color: var(--thumb-border-color);
+        }
+
+        @if not($thumb-border-hover-color) and $thumb-border-color {
+            $thumb-border-hover-color: hsl(from var(--thumb-border-color) h s calc(l * 1.1));
+        }
+
+        @if $variant == 'fluent' {
+            @if not($thumb-focus-color) and $thumb-border-color {
+                $thumb-focus-color: hsl(from var(--thumb-border-color) h s calc(l * 1.2));
+            }
+        } @else {
+            @if not($thumb-focus-color) and $thumb-border-color {
+                $thumb-focus-color: hsla(from var(--thumb-border-color) h s l / 0.3);
+            }
+        }
+    }
+
+    @if $variant == 'material' {
+        @if not($thumb-color) and $track-color {
+            $thumb-color: var(--track-color);
+        }
+
+        @if not($track-color) and $thumb-color {
+            $track-color: var(--thumb-color);
+        }
+
+        @if not($base-track-color) and $track-color {
+            $base-track-color: hsla(from var(--track-color) h s l / 0.4);
+        }
+    }
+
+    @if $variant == 'bootstrap' {
+        @if not($thumb-border-color) and $thumb-color {
+            $thumb-border-color: var(--thumb-color);
+        }
+
+        @if not($thumb-focus-color) and $thumb-color {
+            $thumb-focus-color: hsla(from var(--thumb-color) h s l / 0.5);
+        }
+    }
+
+    @if not($track-hover-color) and $track-color {
+        $track-hover-color: hsl(from var(--track-color) h s calc(l * 1.1));
+    }
+
+    @if $variant != 'bootstrap' {
+        @if not($label-background-color) and $track-color {
+            $label-background-color: var(--track-color);
+        }
+    } @else {
+        @if not($label-background-color) and $thumb-color {
+            $label-background-color: var(--thumb-color);
+        }
+    }
+
 
     @if not($label-text-color) and $label-background-color {
-        $label-text-color: text-contrast($label-background-color);
+        $label-text-color: adaptive-contrast($label-background-color);
+    }
+
+    @if $variant != 'indigo' {
+        @if not($base-track-hover-color) and $base-track-color {
+            $base-track-hover-color: var(--base-track-color);
+        }
+    } @else {
+        @if not($base-track-hover-color) and $base-track-color {
+            $base-track-hover-color: hsl(from var(--base-track-color) h s calc(l * 0.8));
+        }
+    }
+
+    @if not($disabled-base-track-color) and $base-track-color {
+        $disabled-base-track-color: hsla(from var(--base-track-color) h s l / 0.5);
+    }
+
+    @if not($disabled-fill-track-color) and $track-color {
+        $disabled-fill-track-color: hsla(from var(--track-color) h s l / 0.5);
+    }
+
+    @if not($disabled-thumb-color) and $thumb-color {
+        $disabled-thumb-color: hsl(from var(--thumb-color) h calc(s * 0.5) calc(l * 1.2));
+    }
+
+    @if not($thumb-disabled-border-color) and $thumb-border-color {
+        $thumb-disabled-border-color: hsla(from var(--thumb-border-color) h s l / 0.5);
     }
 
     @return extend($theme, (
@@ -98,10 +187,6 @@
         disabled-fill-track-color: $disabled-fill-track-color,
         tick-label-color: $tick-label-color,
         tick-color: $tick-color,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
     ));
 }
 
@@ -111,7 +196,7 @@
 @mixin slider($theme) {
     @include css-vars($theme);
 
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
 
     $slider-height: rem(48px);
     $ripple-size: rem(40px);