fix(slider): fix slider contrast

A-l-y-l-e · Dec 14, 2021 · a40363f · a40363f
1 parent 32927c1
commit a40363f
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 8 deletions.
diff --git a/src/lib/slider/slider.ts b/src/lib/slider/slider.ts
@@ -46,8 +46,8 @@ export interface LySliderTheme {
    */
   disabled?: StyleCollection<((classes: LyClasses<typeof STYLES>, color: Color) => StyleTemplate)>
   | ((classes: LyClasses<typeof STYLES>, color: Color) => StyleTemplate);
-  color?: StyleCollection<((classes: LyClasses<typeof STYLES>, color: Color) => StyleTemplate)>
-  | ((classes: LyClasses<typeof STYLES>, color: Color) => StyleTemplate);
+  color?: StyleCollection<((classes: LyClasses<typeof STYLES>, color: Color, contrast: Color) => StyleTemplate)>
+  | ((classes: LyClasses<typeof STYLES>, color: Color, contrast: Color) => StyleTemplate);
   appearance?: {
     standard?: StyleCollection<((classes: LyClasses<typeof STYLES>) => StyleTemplate)>
     | ((classes: LyClasses<typeof STYLES>) => StyleTemplate);
@@ -483,14 +483,15 @@ export class LySlider implements OnChanges, OnInit, OnDestroy, ControlValueAcces
 
     const newStyle = (theme: ThemeVariables & LySliderVariables, ref: ThemeRef) => {
       const color = theme.colorOf(val);
+      const contrast = theme.colorOf(`${val}:contrast`);
       const __ = ref.selectorsOf(STYLES);
 
       if (theme.slider && theme.slider.color) {
         const sliderColor = theme.slider.color;
         if (sliderColor) {
           return sliderColor instanceof StyleCollection
-            ? (sliderColor).setTransformer((_) => _(__, color)).css
-            : sliderColor(__, color);
+            ? (sliderColor).setTransformer((_) => _(__, color, contrast)).css
+            : sliderColor(__, color, contrast);
         }
       }
       throw new Error(`${val} not found in theme.slider.color`);

diff --git a/src/lib/src/style-utils.ts b/src/lib/src/style-utils.ts
@@ -129,7 +129,7 @@ function get(obj: Object, path: string[] | string, optional?: string): Color {
   if (obj instanceof Color) {
     return obj;
   } else if (optional) {
-    return obj[optional] || obj['default'];
+    return obj[optional] ?? obj['default'];
   } else {
     return obj['default'];
   }
@@ -167,7 +167,7 @@ export function withMediaInline(
       const val = str[index];
       if (typeof val === 'number' || val === null || val === undefined) {
         styleCollection.add(transformer(val, null));
-      } if (typeof val === 'string') {
+      } else if (typeof val === 'string') {
         parseMediaQueryFromString(val).forEach((_) => {
           styleCollection.add(transformer(_[0], _[1]));
         });

diff --git a/src/lib/themes/minima/base.ts b/src/lib/themes/minima/base.ts
@@ -294,10 +294,14 @@ export class MinimaBase extends LyStyleUtils {
       vertical,
       thumbVisible,
       thumbNotVisible,
-      sliding
-    },      color) => lyl `{
+      sliding,
+      thumbLabelValue
+    },      color, contrast) => lyl `{
       & ${track}, & ${thumb}, & ${thumbLabel}, & ${bg}, & ${tick} {
         background-color: ${color}
+        ${thumbLabelValue} {
+          color: ${contrast}
+        }
       }
       &:not(${disabled}) ${thumbContentFocused} ${thumb}::before, &:not(${disabled}) ${thumb}:hover::before {
         box-shadow: 0 0 0 8px ${color.alpha(.13)}