Merge pull request #2682 from Teradata/bug/DSYS-612

fix(components slider): value indicator token fix

Author: omaardev

libs/components/src/slider/slider.scss

@@ -0,0 +1,11 @@
+:host {
+  .mdc-slider__value-indicator {
+    background-color: var(--cv-theme-on-surface);
+    color: var(--cv-theme-on-primary);
+    opacity: 0.74;
+  }
+
+  .mdc-slider__value-indicator::before {
+    border-top-color: var(--cv-theme-on-surface);
+  }
+}

libs/components/src/slider/slider.ts

@@ -1,6 +1,8 @@
 import { SliderSingleBase } from '@material/mwc-slider/slider-single-base';
-import { styles } from '@material/mwc-slider/mwc-slider.css';
+import { styles as baseStyles } from '@material/mwc-slider/mwc-slider.css';
 import { customElement } from 'lit/decorators.js';
+import styles from './slider.scss?inline';
+import { css, unsafeCSS } from 'lit';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -10,7 +12,12 @@ declare global {
 
 @customElement('cv-slider')
 export class CovalentSlider extends SliderSingleBase {
-  static override styles = [styles];
+  static override styles = [
+    baseStyles,
+    css`
+      ${unsafeCSS(styles)}
+    `,
+  ];
 }
 
 export default CovalentSlider;