@scania/tegel 1.34.0-multibrand-beta.6 → 1.35.0

package/dist/collection/components/popover-menu/popover-menu.js

@@ -15,7 +15,6 @@ export class TdsPopoverMenu {
         this.offsetSkidding = 0;
         this.offsetDistance = 8;
         this.fluidWidth = false;
-        this.modeVariant = null;
         this.childRef = undefined;
     }
     /** Property for closing popover programmatically */
@@ -28,15 +27,13 @@ export class TdsPopoverMenu {
     }
     render() {
         var _a;
-        return (h(Host, { key: '78e4ee3b0d6eb7c41f724582278b3de4b2227502', class: {
-                [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
-            } }, h("tds-popover-core", { key: 'f16d1d2d97dfa081fbbc13f1da6eb01f15d3e1e8', class: {
+        return (h(Host, { key: '4f285ba1fb6b12ad66c09bbf3d109aa4cdff82cf' }, h("tds-popover-core", { key: 'bd1fb62cbeb25ec8a0a5bfa580cef36c950e0fa3', class: {
                 'tds-popover-menu': true,
                 [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
                 'fluid-width': this.fluidWidth,
             }, selector: this.selector, referenceEl: this.referenceEl, show: this.show, placement: this.placement, offsetSkidding: this.offsetSkidding, offsetDistance: this.offsetDistance, ref: (el) => {
                 this.childRef = el;
-            }, defaultShow: this.defaultShow, animation: this.animation }, h("div", { key: '2c413ca26bb977c971e3206ce7ac79da5107d35e', role: "menu" }, h("slot", { key: 'f9a0da937b2c038ec83e3a8e803fb858a42ab94b' })))));
+            }, defaultShow: this.defaultShow, animation: this.animation }, h("div", { key: 'c79034c0d9f06bc429d30c51e6c5b70edd404052', role: "menu" }, h("slot", { key: '7e10d182c7529d716734317a5cca5087f30c1a9b' })))));
     }
     static get is() { return "tds-popover-menu"; }
     static get encapsulation() { return "scoped"; }
@@ -220,24 +217,6 @@ export class TdsPopoverMenu {
                 "attribute": "fluid-width",
                 "reflect": false,
                 "defaultValue": "false"
-            },
-            "modeVariant": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'primary' | 'secondary'",
-                    "resolved": "\"primary\" | \"secondary\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Mode variant of the component, based on current mode."
-                },
-                "attribute": "mode-variant",
-                "reflect": false,
-                "defaultValue": "null"
             }
         };
     }

package/dist/collection/components/radio-button/radio-button.css

@@ -1,18 +1,11 @@
-/* Typography Usage mixins */
-/* Centralized map of typography types */
-/* Utility mixin */
 .tds-radio-button {
   box-sizing: border-box;
-  font-family: var(--detail-02-font-family);
-  font-size: var(--detail-02-font-size);
-  line-height: var(--detail-02-line-height);
-  font-weight: var(--detail-02-font-weight);
-  letter-spacing: var(--detail-02-letter-spacing);
-  text-transform: var(--detail-02-text-transform);
-  color: var(--radio-button-label);
   display: flex;
   align-items: center;
   margin-left: -4px;
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
+  color: var(--tds-radio-button-color);
 }
 .tds-radio-button * {
   box-sizing: border-box;
@@ -31,7 +24,7 @@
   align-self: flex-start;
 }
 .tds-radio-button .tds-form-input[type=radio] + label {
-  padding: var(--radio-button-spacing-4);
+  padding: var(--tds-spacing-element-4) 0 var(--tds-spacing-element-4) var(--tds-spacing-element-4);
   cursor: pointer;
 }
 .tds-radio-button .tds-form-input[type=radio]::before, .tds-radio-button .tds-form-input[type=radio]::after {
@@ -47,18 +40,18 @@
   top: 1px;
 }
 .tds-radio-button .tds-form-input[type=radio]::after {
-  background-color: var(--radio-button-background-inverse);
-  border: 1px solid var(--radio-button-border);
+  border: 1px solid var(--tds-radio-button-interaction-01);
+  background-color: var(--tds-radio-button-interaction-02);
   width: 16px;
   height: 16px;
   left: 4px;
   top: 4px;
 }
-.tds-radio-button .tds-form-input[type=radio]:hover::after {
-  outline: 2px solid var(--radio-button-background-hover);
+.tds-radio-button .tds-form-input[type=radio]:hover::before {
+  background-color: var(--tds-radio-button-background-hover);
 }
 .tds-radio-button .tds-form-input[type=radio]:focus::before {
-  background-color: var(--radio-button-focus);
+  background-color: var(--tds-radio-button-background-focus);
   animation: rb-focus 0.4s cubic-bezier(0.65, 0.05, 0.38, 0.95) forwards;
 }
 .tds-radio-button .tds-form-input[type=radio]:focus::after {
@@ -67,41 +60,35 @@
 .tds-radio-button .tds-form-input[type=radio]:disabled, .tds-radio-button .tds-form-input[type=radio].disabled {
   cursor: not-allowed;
 }
-.tds-radio-button .tds-form-input[type=radio]:disabled::before, .tds-radio-button .tds-form-input[type=radio].disabled::before {
-  outline: 1px solid var(--radio-button-border-disabled);
-  outline-offset: -4px;
-}
 .tds-radio-button .tds-form-input[type=radio]:disabled::after, .tds-radio-button .tds-form-input[type=radio].disabled::after {
-  background-color: var(--radio-button-background-disabled);
-  border-color: var(--radio-button-background-disabled);
+  border-color: var(--tds-radio-button-border-color-disabled-after);
+  background-color: var(--tds-radio-button-interaction-02);
 }
 .tds-radio-button .tds-form-input[type=radio]:disabled + label, .tds-radio-button .tds-form-input[type=radio].disabled + label {
-  color: var(--radio-button-label-disabled);
+  color: var(--tds-radio-button-disabled);
   cursor: not-allowed;
 }
-.tds-radio-button .tds-form-input[type=radio]:disabled:hover::after, .tds-radio-button .tds-form-input[type=radio].disabled:hover::after {
-  outline: none;
-}
-.tds-radio-button .tds-form-input[type=radio]:checked:focus::after {
-  outline: 4px solid var(--radio-button-focus);
+.tds-radio-button .tds-form-input[type=radio]:disabled:hover::before, .tds-radio-button .tds-form-input[type=radio].disabled:hover::before {
+  display: none;
+  opacity: 1;
 }
 .tds-radio-button .tds-form-input[type=radio]:checked::after {
-  border: 4px solid var(--radio-button-border);
+  border: 4px solid var(--tds-radio-button-interaction-01);
 }
-.tds-radio-button .tds-form-input[type=radio]:checked:disabled::before {
-  border: 1px solid var(--radio-button-border-disabled);
+.tds-radio-button .tds-form-input[type=radio]:checked:disabled:hover::before, .tds-radio-button .tds-form-input[type=radio]:checked:disabled::before, .tds-radio-button .tds-form-input[type=radio]:checked.disabled:hover::before, .tds-radio-button .tds-form-input[type=radio]:checked.disabled::before {
   display: block;
   width: 16px;
   height: 16px;
-  left: 3px;
-  top: 3px;
-  box-sizing: content-box;
-}
-.tds-radio-button .tds-form-input[type=radio]:checked:disabled::after {
-  border: 4px solid var(--radio-button-background-disabled);
-  background-color: var(--radio-button-checked-disabled);
   left: 4px;
   top: 4px;
+  border: 1px solid var(--tds-radio-button-color-disabled-before);
+  box-sizing: content-box;
+}
+.tds-radio-button .tds-form-input[type=radio]:checked:disabled::after, .tds-radio-button .tds-form-input[type=radio]:checked.disabled::after {
+  border: 4px solid var(--tds-radio-button-interaction-02);
+  background-color: var(--tds-radio-button-color-disabled-after);
+  left: 5px;
+  top: 5px;
 }
 @keyframes rb-focus {
   0% {

package/dist/collection/components/radio-button/radio-button.js

@@ -27,9 +27,7 @@ export class TdsRadioButton {
         }
     }
     render() {
-        return (h("div", { key: '6f44a40cb5ccf890bdee47d36f47a79d5f8b603c', class: "tds-radio-button" }, h("input", { key: '9f40ae91078cf4ebaff05897d792423b95e5b123', ref: (inputEl) => {
-                this.inputElement = inputEl;
-            }, "aria-label": this.tdsAriaLabel, class: "tds-form-input", type: "radio", role: "radio", name: this.name, id: this.radioId, value: this.value, checked: this.checked, "aria-checked": this.checked, required: this.required, disabled: this.disabled, onChange: () => this.handleChange(), tabIndex: this.tdsTabIndex }), h("label", { key: '7309cddb34f1e3bb734e26d534f330d1f7b18fd1', htmlFor: this.radioId }, h("slot", { key: '068c0375f5f8c66bbe8159533a629c8adb21d152', name: "label" }))));
+        return (h("div", { key: '6f44a40cb5ccf890bdee47d36f47a79d5f8b603c', class: "tds-radio-button" }, h("input", { key: '1da8f9df168c631a634172385c3471a5c6bb03aa', ref: (inputEl) => (this.inputElement = inputEl), "aria-label": this.tdsAriaLabel, class: "tds-form-input", type: "radio", role: "radio", name: this.name, id: this.radioId, value: this.value, checked: this.checked, "aria-checked": this.checked, required: this.required, disabled: this.disabled, onChange: () => this.handleChange(), tabIndex: this.tdsTabIndex }), h("label", { key: '0acf59236ffd3ee0136f2bdef9db8a36afe666ff', htmlFor: this.radioId }, h("slot", { key: 'add4ebdebbb4d5e15126a876c0c0940734b7b068', name: "label" }))));
     }
     static get is() { return "tds-radio-button"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/side-menu/side-menu-dropdown-list-item/side-menu-dropdown-list-item.css

@@ -35,9 +35,10 @@
   cursor: pointer;
 }
 :host .component ::slotted(a:focus-visible) {
-  outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
-  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
+  outline: 2px solid var(--tds-focus-outline-color);
+  box-shadow: 0 0 0 1px var(--tds-white);
   outline-offset: 1px;
+  z-index: 1;
 }
 :host .component.component-selected ::slotted(a),
 :host .component.component-selected ::slotted(button) {

package/dist/collection/components/side-menu/side-menu-item/side-menu-item.css

@@ -42,9 +42,10 @@
 }
 :host .component ::slotted(a:focus-visible),
 :host .component ::slotted(button:focus-visible) {
-  outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
-  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
+  outline: 2px solid var(--tds-focus-outline-color);
+  box-shadow: 0 0 0 1px var(--tds-white);
   outline-offset: 1px;
+  z-index: 1;
 }
 :host .component:hover ::slotted(a),
 :host .component:hover ::slotted(button) {

package/dist/collection/components/side-menu/side-menu.css

@@ -124,18 +124,18 @@ aside .tds-side-menu-wrapper {
 }
 aside .tds-side-menu-wrapper:hover::-webkit-scrollbar-thumb {
   border: var(--tds-scrollbar-thumb-border-hover-width) solid transparent;
-  background: var(--color-foreground-icon-discrete);
+  background: var(--tds-scrollbar-hover-thumb-color);
   background-clip: padding-box;
 }
 aside .tds-side-menu-wrapper::-webkit-scrollbar {
   width: var(--tds-scrollbar-width);
 }
 aside .tds-side-menu-wrapper::-webkit-scrollbar-track {
-  background: var(--color-background-layer-01);
+  background: var(--tds-scrollbar-track-color);
 }
 aside .tds-side-menu-wrapper::-webkit-scrollbar-thumb {
   border-radius: 40px;
-  background: var(--color-foreground-icon-discrete);
+  background: var(--tds-scrollbar-thumb-color);
   border: var(--tds-scrollbar-thumb-border-width) solid transparent;
   background-clip: padding-box;
 }

package/dist/collection/components/slider/slider-stories-setup.js

@@ -129,30 +129,6 @@ export const SliderArgTypes = ({ storyName }) => ({
             defaultValue: { summary: false },
         },
     },
-    modeVariant: {
-        name: 'Mode variant (input field)',
-        description: 'Mode variant adjusts the background color of the slider input field',
-        control: {
-            type: 'radio',
-        },
-        options: ['Inherit from parent', 'Primary', 'Secondary'],
-        if: { arg: 'showInput', eq: true },
-        table: {
-            defaultValue: { summary: 'Inherit from parent' },
-        },
-    },
-    state: {
-        name: 'Input field state',
-        description: 'Controls the validation state of the slider input.',
-        control: {
-            type: 'radio',
-        },
-        options: ['Default', 'Success'],
-        if: { arg: 'showInput', eq: true },
-        table: {
-            defaultValue: { summary: 'default' },
-        },
-    },
     thumbSize: {
         name: 'Thumb size',
         description: 'Switches between the large and small version of the thumb.',
@@ -206,7 +182,7 @@ const sizeLookUp = {
     Large: 'lg',
     Small: 'sm',
 };
-export const SliderTemplate = ({ min, max, initialValue, showLabel, labelText, showTicks, numTicks, showTickNumbers, snapToTicks, showTooltip, showControls, step, showInput, thumbSize, readonly, disabled, state, modeVariant, }) => formatHtmlPreview(`
+export const SliderTemplate = ({ min, max, initialValue, showLabel, labelText, showTicks, numTicks, showTickNumbers, snapToTicks, showTooltip, showControls, step, showInput, thumbSize, readonly, disabled, }) => formatHtmlPreview(`
    <!-- Style code below is just for demo purposes -->
       <style>
         .demo-wrapper {
@@ -229,10 +205,6 @@ export const SliderTemplate = ({ min, max, initialValue, showLabel, labelText, s
           ${showControls ? 'controls' : ''}
           ${showInput ? 'input' : ''}
           ${disabled ? 'disabled' : ''}
-          state=${(state || 'Default').toLowerCase()}
-          ${modeVariant && modeVariant !== 'Inherit from parent'
-    ? `mode-variant="${modeVariant.toLowerCase()}"`
-    : ''}
           thumb-size="${sizeLookUp[thumbSize]}"
           ${readonly ? 'read-only' : ''}
           tds-read-only-aria-label="Read only"

package/dist/collection/components/slider/slider.css

@@ -1,6 +1,3 @@
-/* Typography Usage mixins */
-/* Centralized map of typography types */
-/* Utility mixin */
 tds-slider {
   box-sizing: border-box;
   width: 100%;
@@ -22,12 +19,6 @@ tds-slider .sr-only {
   white-space: nowrap;
   border: 0;
 }
-tds-slider .slider-primary .tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper {
-  background-color: var(--slider-inputfield-background);
-}
-tds-slider .slider-secondary .tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper {
-  background-color: var(--slider-inputfield-background-secondary);
-}
 
 .tds-slider-wrapper {
   width: 100%;
@@ -36,22 +27,10 @@ tds-slider .slider-secondary .tds-slider .tds-slider__input-values .tds-slider__
   pointer-events: none;
 }
 
-.tds-slider-wrapper.slider-success .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field {
-  border-left: 1px solid var(--slider-border-left-success);
-  border-right: 1px solid var(--slider-border-right-success);
-  border-bottom: 1px solid var(--slider-border-bottom-success);
-  border-top: 1px solid var(--slider-border-top-success);
-  color: var(--slider-input-success-text);
-  box-shadow: var(--slider-border-success);
-}
-.tds-slider-wrapper.slider-success .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field:hover {
-  box-shadow: var(--slider-border-success);
-}
-
 .tds-slider-wrapper:focus-within {
-  border-radius: var(--tds-spacing-element-4);
   outline: 2px solid var(--tds-blue-400);
   outline-offset: 2px;
+  border-radius: var(--tds-spacing-element-4);
 }
 
 .tds-slider {
@@ -86,70 +65,52 @@ tds-slider .slider-secondary .tds-slider .tds-slider__input-values .tds-slider__
   align-items: center;
 }
 .tds-slider .tds-slider__input-values .tds-slider__input-value {
-  font-family: var(--detail-02-font-family);
-  font-size: var(--detail-02-font-size);
-  line-height: var(--detail-02-line-height);
-  font-weight: var(--detail-02-font-weight);
-  letter-spacing: var(--detail-02-letter-spacing);
-  text-transform: var(--detail-02-text-transform);
-  color: var(--slider-input-value);
-  padding: 18px;
   user-select: none;
+  padding: 18px;
+  color: var(--tds-slider-input-value-color);
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
 }
 .tds-slider .tds-slider__input-values .tds-slider__input-value.min-value {
   padding-left: 0;
 }
 .tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper {
-  background-color: var(--slider-inputfield-background);
-  border-radius: var(--slider-border-radius);
+  background-color: var(--tds-slider-inputfield-background);
   display: flex;
   align-items: center;
   justify-content: center;
+  border-radius: 4px 4px 0 0;
 }
 .tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field {
-  font-family: var(--detail-02-font-family);
-  font-size: var(--detail-02-font-size);
-  line-height: var(--detail-02-line-height);
-  font-weight: var(--detail-02-font-weight);
-  letter-spacing: var(--detail-02-letter-spacing);
-  text-transform: var(--detail-02-text-transform);
-  border-left: 1px solid var(--slider-border-left);
-  border-right: 1px solid var(--slider-border-right);
-  border-bottom: 1px solid var(--slider-border-bottom);
-  border-top: 1px solid var(--slider-border-top);
-  border-radius: var(--slider-border-radius);
-  box-shadow: var(--slider-border-appearance);
-  color: var(--slider-input-inputfield);
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
+  color: var(--tds-slider-inputfield-number-color);
   border: 0;
   background-color: transparent;
   text-align: center;
   padding: 12px;
+  box-shadow: inset 0 -1px 0 var(--tds-slider-inputfield-box-shadow);
+  border-radius: 4px 4px 0 0;
+  appearance: textfield;
 }
 .tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field:hover {
-  border-left: 1px solid var(--slider-border-left-hover);
-  border-right: 1px solid var(--slider-border-right-hover);
-  border-bottom: 1px solid var(--slider-border-bottom-hover);
-  border-top: 1px solid var(--slider-border-top-hover);
-  box-shadow: var(--slider-border-hover);
+  box-shadow: inset 0 -1px 0 var(--tds-grey-600);
 }
 .tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field:focus {
-  border-left: 1px solid var(--slider-border-left-focus);
-  border-right: 1px solid var(--slider-border-right-focus);
-  border-bottom: 1px solid var(--slider-border-bottom-focus);
-  border-top: 1px solid var(--slider-border-top-focus);
-  box-shadow: var(--slider-border-focus);
-  outline: var(--slider-border-outline);
+  box-shadow: inset 0 -2px 0 var(--tds-blue-400);
+  outline: 0;
+}
+.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field::-webkit-outer-spin-button,
+.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field::-webkit-inner-spin-button {
+  appearance: none;
+  margin: 0;
 }
 .tds-slider label {
-  font-family: var(--detail-05-font-family);
-  font-size: var(--detail-05-font-size);
-  line-height: var(--detail-05-line-height);
-  font-weight: var(--detail-05-font-weight);
-  letter-spacing: var(--detail-05-letter-spacing);
-  text-transform: var(--detail-05-text-transform);
-  color: var(--slider-label);
+  font: var(--tds-detail-05);
+  letter-spacing: var(--tds-detail-05-ls);
   user-select: none;
   position: absolute;
+  color: var(--tds-slider-label-color);
   padding-bottom: 16px;
   transform: translateY(-100%);
 }
@@ -157,24 +118,19 @@ tds-slider .slider-secondary .tds-slider .tds-slider__input-values .tds-slider__
   padding-bottom: 34px;
 }
 .tds-slider .tds-slider__value {
-  font-family: var(--detail-01-font-family);
-  font-size: var(--detail-01-font-size);
-  line-height: var(--detail-01-line-height);
-  font-weight: var(--detail-01-font-weight);
-  letter-spacing: var(--detail-01-letter-spacing);
-  text-transform: var(--detail-01-text-transform);
-  background-color: var(--slider-value-tooltip-background);
-  color: var(--slider-value-tooltip);
-  z-index: 2;
+  font: var(--tds-detail-01);
+  letter-spacing: var(--tds-detail-01-ls);
   user-select: none;
   border-radius: 4px;
-  padding: 8px 11px;
+  padding: 8px;
   position: absolute;
   transform: translate(-50%, -100%);
   top: -24px;
+  background-color: var(--tds-slider-value-tooltip-background);
+  color: var(--tds-slider-value-tooltip-color);
 }
 .tds-slider .tds-slider__value svg {
-  color: var(--slider-value-tooltip-background);
+  color: var(--tds-slider-value-tooltip-background);
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
@@ -184,10 +140,10 @@ tds-slider .slider-secondary .tds-slider .tds-slider__input-values .tds-slider__
   position: absolute;
 }
 .tds-slider .tds-slider__thumb .tds-slider__thumb-inner {
-  background-color: var(--slider-thumb);
   width: 20px;
   height: 20px;
   border-radius: 100%;
+  background-color: var(--tds-slider-thumb-color);
   position: absolute;
   top: 50%;
   left: 50%;
@@ -195,11 +151,11 @@ tds-slider .slider-secondary .tds-slider .tds-slider__input-values .tds-slider__
   cursor: pointer;
 }
 .tds-slider .tds-slider__thumb .tds-slider__thumb-inner::before {
-  background-color: var(--slider-thumb);
   content: " ";
   display: none;
   width: 48px;
   height: 48px;
+  background-color: var(--tds-slider-thumb-color);
   position: absolute;
   border-radius: 100%;
   top: 50%;
@@ -231,23 +187,18 @@ tds-slider .slider-secondary .tds-slider .tds-slider__input-values .tds-slider__
   width: 100%;
 }
 .tds-slider .tds-slider__value-dividers .tds-slider__value-divider {
-  background-color: var(--slider-divider);
-  color: var(--slider-divider-values);
   transform: translateY(-50%);
   height: 16px;
+  background-color: var(--tds-slider-divider-color);
+  color: var(--tds-slider-divider-values-color);
   width: 1px;
 }
 .tds-slider .tds-slider__value-dividers .tds-slider__value-divider span {
-  font-family: var(--detail-05-font-family);
-  font-size: var(--detail-05-font-size);
-  line-height: var(--detail-05-line-height);
-  font-weight: var(--detail-05-font-weight);
-  letter-spacing: var(--detail-05-letter-spacing);
-  text-transform: var(--detail-05-text-transform);
-  letter-spacing: var(--tds-detail-05-ls);
   display: block;
   user-select: none;
   color: var(-tds-grey-700);
+  font: var(--tds-detail-05);
+  letter-spacing: var(--tds-detail-05-ls);
   position: relative;
   top: -7px;
   left: 50%;
@@ -256,10 +207,10 @@ tds-slider .slider-secondary .tds-slider .tds-slider__input-values .tds-slider__
   text-align: center;
 }
 .tds-slider .tds-slider__track {
-  background-color: var(--slider-track);
   width: 100%;
   height: 2px;
   border-radius: 1px;
+  background-color: var(--tds-slider-track-color);
   position: relative;
   cursor: pointer;
 }
@@ -285,7 +236,7 @@ tds-slider .slider-secondary .tds-slider .tds-slider__input-values .tds-slider__
   opacity: 0.08;
 }
 .tds-slider .tds-slider__track .tds-slider__track-fill {
-  background-color: var(--slider-track-fill);
+  background-color: var(--tds-slider-track-fill-color);
   border-radius: 2px;
   height: 4px;
   position: absolute;
@@ -302,42 +253,44 @@ tds-slider .slider-secondary .tds-slider .tds-slider__input-values .tds-slider__
   pointer-events: none;
 }
 .tds-slider.disabled label {
-  color: var(--slider-disabled-text);
+  color: var(--tds-slider-label-disabled);
 }
 .tds-slider.disabled .tds-slider__controls .tds-slider__control {
   cursor: default;
 }
-.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-minus svg, .tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-plus svg {
-  fill: var(--slider-disabled);
-}
 .tds-slider.disabled .tds-slider__input-values .tds-slider__input-value {
-  color: var(--slider-disabled);
+  color: var(--tds-slider-input-value-disabled);
 }
 .tds-slider.disabled .tds-slider__input-values .tds-slider__input-field-wrapper {
   pointer-events: none;
 }
 .tds-slider.disabled .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field {
-  color: var(--slider-disabled);
-  pointer-events: none;
+  color: var(--tds-slider-inputfield-number-disabled);
   box-shadow: none;
+  pointer-events: none;
+  background: var(--tds-slider-inputfield-background-disabled);
 }
 .tds-slider.disabled .tds-slider__value {
   display: none;
 }
 .tds-slider.disabled .tds-slider__track {
   cursor: not-allowed;
+  background-color: var(--tds-slider-track-disabled);
 }
 .tds-slider.disabled .tds-slider__track .tds-slider__track-fill {
-  background-color: var(--slider-disabled);
+  background-color: var(--tds-slider-track-disabled);
+}
+.tds-slider.disabled .tds-slider__value-dividers .tds-slider__value-divider {
+  background-color: var(--tds-slider-divider-disabled);
 }
 .tds-slider.disabled .tds-slider__value-dividers .tds-slider__value-divider span {
-  color: var(--slider-disabled);
+  color: var(--tds-slider-divider-values-disabled);
 }
 .tds-slider.disabled .tds-slider__thumb {
   pointer-events: none;
 }
 .tds-slider.disabled .tds-slider__thumb .tds-slider__thumb-inner {
-  background-color: var(--slider-disabled);
+  background-color: var(--tds-slider-thumb-disabled);
   cursor: default;
 }
 .tds-slider.tds-slider-small .tds-slider__thumb .tds-slider__thumb-inner {
@@ -357,11 +310,11 @@ tds-slider .slider-secondary .tds-slider .tds-slider__input-values .tds-slider__
   cursor: default;
 }
 .tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-minus tds-icon, .tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-plus tds-icon {
-  color: var(--slider-controls);
+  color: var(--tds-slider-controls-color);
 }
 .tds-slider.disabled .tds-slider__controls .tds-slider__control {
   cursor: default;
 }
 .tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-minus tds-icon, .tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-plus tds-icon {
-  color: var(--slider-disabled);
+  color: var(--tds-slider-controls-disabled);
 }