@teseor/css 1.10.0 → 1.10.1

package/src/components/data-display/card/index.scss

@@ -1,34 +1,36 @@
+@use '../../../config/tokens/variables' as t;
+
 // @component card
 // @element div
 
 @layer components.tokens {
   .card {
-    --_row-1: var(--ui-row-1);
-    --_duration-fast: var(--ui-duration-fast);
-    --_ease-default: var(--ui-ease-default);
+    --_row-1: var(--ui-row-1, #{t.$row-1});
+    --_duration-fast: var(--ui-duration-fast, #{t.$duration-fast});
+    --_ease-default: var(--ui-ease-default, #{t.$ease-default});
     // @desc Padding on all sides
-    --_padding: var(--ui-card-padding, var(--ui-space-4));
+    --_padding: var(--ui-card-padding, var(--ui-space-4, #{t.$space-4}));
     // @desc Border thickness
-    --_border-width: var(--ui-card-border-width, var(--ui-border-width-sm));
+    --_border-width: var(--ui-card-border-width, var(--ui-border-width-sm, #{t.$border-width-sm}));
     // @desc Background color
-    --_bg: var(--ui-card-bg, var(--ui-color-bg));
+    --_bg: var(--ui-card-bg, var(--ui-color-bg, #{t.$color-bg}));
     // @desc Border color
-    --_border-color: var(--ui-card-border-color, var(--ui-color-border));
+    --_border-color: var(--ui-card-border-color, var(--ui-color-border, #{t.$color-border}));
     // @desc Corner radius
-    --_radius: var(--ui-card-radius, var(--ui-radius-md));
+    --_radius: var(--ui-card-radius, var(--ui-radius-md, #{t.$radius-md}));
   }
 
   // @modifier variant
   // @desc Bg subtle
-  .card--subtle { --_bg: var(--ui-card-bg-subtle, var(--ui-color-bg-subtle)); }
+  .card--subtle { --_bg: var(--ui-card-bg-subtle, var(--ui-color-bg-subtle, #{t.$color-bg-subtle})); }
   // @desc Bg muted
-  .card--muted { --_bg: var(--ui-card-bg-muted, var(--ui-color-bg-muted)); }
+  .card--muted { --_bg: var(--ui-card-bg-muted, var(--ui-color-bg-muted, #{t.$color-bg-muted})); }
 
   // @modifier size
   // @desc Padding on all sides at small size
-  .card--sm { --_padding: var(--ui-card-padding-sm, var(--ui-space-2)); }
+  .card--sm { --_padding: var(--ui-card-padding-sm, var(--ui-space-2, #{t.$space-2})); }
   // @desc Padding on all sides at large size
-  .card--lg { --_padding: var(--ui-card-padding-lg, var(--ui-space-6)); }
+  .card--lg { --_padding: var(--ui-card-padding-lg, var(--ui-space-6, #{t.$space-6})); }
 
   // @modifier boolean interactive
   .card--interactive {
@@ -63,14 +65,14 @@
 
     &:hover {
       // @desc Bg hover
-      --_bg: var(--ui-card-bg-hover, var(--ui-color-bg-subtle));
+      --_bg: var(--ui-card-bg-hover, var(--ui-color-bg-subtle, #{t.$color-bg-subtle}));
       // @desc Border color hover
-      --_border-color: var(--ui-card-border-color-hover, var(--ui-color-border-strong));
+      --_border-color: var(--ui-card-border-color-hover, var(--ui-color-border-strong, #{t.$color-border-strong}));
     }
 
     &:active {
       // @desc Bg active
-      --_bg: var(--ui-card-bg-active, var(--ui-color-bg-muted));
+      --_bg: var(--ui-card-bg-active, var(--ui-color-bg-muted, #{t.$color-bg-muted}));
     }
   }
 }

package/src/components/data-display/data-list/data-list.api.json

@@ -3,14 +3,14 @@
   "name": "data-list",
   "element": "div",
   "modifiers": {
+    "size": {
+      "values": ["sm", "lg"]
+    },
     "layout": {
       "values": ["horizontal"]
     },
     "style": {
       "values": ["divided", "striped"]
-    },
-    "size": {
-      "values": ["sm", "lg"]
     }
   },
   "elements": {

package/src/components/data-display/data-list/index.scss

@@ -24,6 +24,19 @@
     // @desc Value display text color
     --_value-color: var(--ui-data-list-value-color, var(--ui-color-text, #{t.$color-text}));
   }
+
+  // Compact size
+  // @modifier size
+  .data-list--sm {
+    --_gap: calc(#{t.$unit} * 1);
+    --_item-gap: 0;
+  }
+
+  // Large size
+  .data-list--lg {
+    --_gap: calc(#{t.$unit} * 3);
+    --_item-gap: calc(#{t.$unit} * 1);
+  }
 }
 
 @layer components.styles {
@@ -100,17 +113,11 @@
   // Compact size
   // @modifier size
   .data-list--sm {
-    --_gap: calc(#{t.$unit} * 1);
-    --_item-gap: 0;
-
     font-size: var(--_font-size-sm);
   }
 
   // Large size
   .data-list--lg {
-    --_gap: calc(#{t.$unit} * 3);
-    --_item-gap: calc(#{t.$unit} * 1);
-
     font-size: var(--_font-size-lg);
   }
 }

package/src/components/data-display/image/index.scss

@@ -19,7 +19,7 @@
     // @desc Caption font size
     --_caption-font-size: var(--ui-image-caption-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
     // @desc Caption spacing
-    --_caption-spacing: var(--ui-image-caption-spacing, var(--ui-space-1));
+    --_caption-spacing: var(--ui-image-caption-spacing, var(--ui-space-1, #{t.$space-1}));
   }
 
   // @modifier size

package/src/components/data-display/status/index.scss

@@ -10,26 +10,38 @@
     // @desc Overall size
     --_size: var(--ui-status-size, calc(#{t.$unit} * 1));
     // @desc Text color
-    --_color: var(--ui-status-color, var(--ui-color-text-muted));
+    --_color: var(--ui-status-color, var(--ui-color-text-muted, #{t.$color-text-muted}));
     // @desc Gap between children
     --_gap: var(--ui-status-gap, calc(#{t.$unit} * 1));
   }
 
   // @modifier variant
   .status--success {
-    --_color: var(--ui-color-success);
+    --_color: var(--ui-color-success, #{t.$color-success});
   }
 
   .status--warning {
-    --_color: var(--ui-color-warning);
+    --_color: var(--ui-color-warning, #{t.$color-warning});
   }
 
   .status--danger {
-    --_color: var(--ui-color-danger);
+    --_color: var(--ui-color-danger, #{t.$color-danger});
   }
 
   .status--info {
-    --_color: var(--ui-color-primary);
+    --_color: var(--ui-color-primary, #{t.$color-primary});
+  }
+
+  // Size variants
+  // @modifier size
+  .status--sm {
+    --_size: calc(#{t.$unit} * 0.75);
+    --_gap: calc(#{t.$unit} * 0.75);
+  }
+
+  .status--lg {
+    --_size: calc(#{t.$unit} * 1.5);
+    --_gap: calc(#{t.$unit} * 1.5);
   }
 }
 
@@ -84,16 +96,4 @@
       animation: none;
     }
   }
-
-  // Size variants
-  // @modifier size
-  .status--sm {
-    --_size: calc(#{t.$unit} * 0.75);
-    --_gap: calc(#{t.$unit} * 0.75);
-  }
-
-  .status--lg {
-    --_size: calc(#{t.$unit} * 1.5);
-    --_gap: calc(#{t.$unit} * 1.5);
-  }
 }

package/src/components/data-display/status/status.api.json

@@ -6,11 +6,11 @@
     "variant": {
       "values": ["success", "warning", "danger", "info"]
     },
-    "pulse": {
-      "type": "boolean"
-    },
     "size": {
       "values": ["sm", "lg"]
+    },
+    "pulse": {
+      "type": "boolean"
     }
   },
   "elements": {

package/src/components/disclosure/accordion/index.scss

@@ -14,6 +14,11 @@
     // @desc Corner radius
     --_radius: var(--ui-accordion-radius, var(--ui-radius-md, calc(#{t.$unit} * 1)));
   }
+
+  // Remove individual borders from nested disclosures
+  .accordion > .disclosure {
+    --_border-width: 0;
+  }
 }
 
 @layer components.styles {
@@ -26,8 +31,6 @@
 
   // Remove individual borders from nested disclosures
   .accordion > .disclosure {
-    // Reset disclosure's border-width token so its height calculation is correct
-    --_border-width: 0;
     border: none;
     border-radius: 0;
   }

package/src/components/disclosure/disclosure/disclosure.api.json

@@ -3,10 +3,10 @@
   "name": "disclosure",
   "element": "div",
   "modifiers": {
-    "animate": {
+    "borderless": {
       "type": "boolean"
     },
-    "borderless": {
+    "animate": {
       "type": "boolean"
     }
   },

package/src/components/disclosure/disclosure/index.scss

@@ -25,6 +25,12 @@
     // @desc Vertical padding
     --_padding-y: var(--ui-disclosure-padding-y, calc(#{t.$unit} * 2));
   }
+
+  // Borderless variant
+  // @modifier boolean borderless
+  .disclosure--borderless {
+    --_border-width: 0;
+  }
 }
 
 @layer components.styles {
@@ -109,8 +115,6 @@
   // Borderless variant
   // @modifier boolean borderless
   .disclosure--borderless {
-    --_border-width: 0;
-
     border: none;
     border-radius: 0;
   }

package/src/components/feedback/progress/index.scss

@@ -8,13 +8,13 @@
 @layer components.tokens {
   .progress {
     --_duration-normal: var(--ui-duration-normal, #{t.$duration-normal});
-    --_ease-default: var(--ui-ease-default, ease);
+    --_ease-default: var(--ui-ease-default, #{t.$ease-default});
     // @desc Overall height
     --_height: var(--ui-progress-height, calc(#{t.$unit} * 1));
     // @desc Background color
     --_bg: var(--ui-progress-bg, var(--ui-color-bg-subtle, #{t.$overlay-bg-subtle}));
     // @desc Fill
-    --_fill: var(--ui-progress-fill, var(--ui-color-primary));
+    --_fill: var(--ui-progress-fill, var(--ui-color-primary, #{t.$color-primary}));
     // @desc Corner radius
     --_radius: var(--ui-progress-radius, var(--ui-radius-full, #{t.$radius-full}));
   }
@@ -112,14 +112,14 @@
   // Color variants
   // @modifier variant
   .progress--success {
-    --_fill: var(--ui-color-success);
+    --_fill: var(--ui-color-success, #{t.$color-success});
   }
 
   .progress--warning {
-    --_fill: var(--ui-color-warning);
+    --_fill: var(--ui-color-warning, #{t.$color-warning});
   }
 
   .progress--danger {
-    --_fill: var(--ui-color-danger);
+    --_fill: var(--ui-color-danger, #{t.$color-danger});
   }
 }

package/src/components/feedback/progress-circle/index.scss

@@ -8,15 +8,15 @@
 @layer components.tokens {
   .progress-circle {
     --_duration-slow: var(--ui-duration-slow, #{t.$duration-slow});
-    --_ease-default: var(--ui-ease-default, ease);
+    --_ease-default: var(--ui-ease-default, #{t.$ease-default});
     // @desc Overall size
-    --_size: var(--ui-progress-circle-size, calc(var(--ui-unit) * 6));
+    --_size: var(--ui-progress-circle-size, calc(var(--ui-unit, #{t.$unit}) * 6));
     // @desc Stroke width
     --_stroke-width: var(--ui-progress-circle-stroke-width, #{t.$progress-circle-stroke-width});
     // @desc Fill area text color
-    --_fill-color: var(--ui-progress-circle-fill-color, var(--ui-color-primary));
+    --_fill-color: var(--ui-progress-circle-fill-color, var(--ui-color-primary, #{t.$color-primary}));
     // @desc Track text color
-    --_track-color: var(--ui-progress-circle-track-color, var(--ui-color-border));
+    --_track-color: var(--ui-progress-circle-track-color, var(--ui-color-border, #{t.$color-border}));
     // @desc Value
     --_value: var(--ui-progress-circle-value, 0);
     --_circumference: 282.743;
@@ -25,30 +25,30 @@
   // @modifier size
   .progress-circle--sm {
     // @desc Overall size at small size
-    --_size: var(--ui-progress-circle-size-sm, calc(var(--ui-unit) * 4));
+    --_size: var(--ui-progress-circle-size-sm, calc(var(--ui-unit, #{t.$unit}) * 4));
   }
 
   .progress-circle--lg {
     // @desc Overall size at large size
-    --_size: var(--ui-progress-circle-size-lg, calc(var(--ui-unit) * 8));
+    --_size: var(--ui-progress-circle-size-lg, calc(var(--ui-unit, #{t.$unit}) * 8));
   }
 
   .progress-circle--xl {
     // @desc Overall size at extra-large size
-    --_size: var(--ui-progress-circle-size-xl, calc(var(--ui-unit) * 12));
+    --_size: var(--ui-progress-circle-size-xl, calc(var(--ui-unit, #{t.$unit}) * 12));
   }
 
   // @modifier variant
   .progress-circle--success {
-    --_fill-color: var(--ui-color-success);
+    --_fill-color: var(--ui-color-success, #{t.$color-success});
   }
 
   .progress-circle--warning {
-    --_fill-color: var(--ui-color-warning);
+    --_fill-color: var(--ui-color-warning, #{t.$color-warning});
   }
 
   .progress-circle--danger {
-    --_fill-color: var(--ui-color-danger);
+    --_fill-color: var(--ui-color-danger, #{t.$color-danger});
   }
 }
 

package/src/components/feedback/spinner/index.scss

@@ -6,9 +6,9 @@
 @layer components.tokens {
   .spinner {
     // @desc Overall size
-    --_size: var(--ui-spinner-size, calc(var(--ui-unit) * 4));
+    --_size: var(--ui-spinner-size, calc(var(--ui-unit, #{t.$unit}) * 4));
     // @desc Border thickness
-    --_border-width: var(--ui-spinner-border-width, var(--ui-border-width-md));
+    --_border-width: var(--ui-spinner-border-width, var(--ui-border-width-md, #{t.$border-width-md}));
     // @desc Text color
     --_color: var(--ui-spinner-color, currentcolor);
     // @desc Track text color
@@ -20,30 +20,30 @@
   // @modifier size
   .spinner--xs {
     // @desc Overall size at extra-small size
-    --_size: var(--ui-spinner-size-xs, calc(var(--ui-unit) * 2));
+    --_size: var(--ui-spinner-size-xs, calc(var(--ui-unit, #{t.$unit}) * 2));
     // @desc Border thickness at extra-small size
-    --_border-width: var(--ui-spinner-border-width-xs, var(--ui-border-width-sm));
+    --_border-width: var(--ui-spinner-border-width-xs, var(--ui-border-width-sm, #{t.$border-width-sm}));
   }
 
   .spinner--sm {
     // @desc Overall size at small size
-    --_size: var(--ui-spinner-size-sm, calc(var(--ui-unit) * 3));
+    --_size: var(--ui-spinner-size-sm, calc(var(--ui-unit, #{t.$unit}) * 3));
     // @desc Border thickness at small size
-    --_border-width: var(--ui-spinner-border-width-sm, var(--ui-border-width-md));
+    --_border-width: var(--ui-spinner-border-width-sm, var(--ui-border-width-md, #{t.$border-width-md}));
   }
 
   .spinner--lg {
     // @desc Overall size at large size
-    --_size: var(--ui-spinner-size-lg, calc(var(--ui-unit) * 5));
+    --_size: var(--ui-spinner-size-lg, calc(var(--ui-unit, #{t.$unit}) * 5));
     // @desc Border thickness at large size
-    --_border-width: var(--ui-spinner-border-width-lg, var(--ui-border-width-md));
+    --_border-width: var(--ui-spinner-border-width-lg, var(--ui-border-width-md, #{t.$border-width-md}));
   }
 
   .spinner--xl {
     // @desc Overall size at extra-large size
-    --_size: var(--ui-spinner-size-xl, calc(var(--ui-unit) * 6));
+    --_size: var(--ui-spinner-size-xl, calc(var(--ui-unit, #{t.$unit}) * 6));
     // @desc Border thickness at extra-large size
-    --_border-width: var(--ui-spinner-border-width-xl, var(--ui-border-width-lg));
+    --_border-width: var(--ui-spinner-border-width-xl, var(--ui-border-width-lg, #{t.$border-width-lg}));
   }
 }
 

package/src/components/feedback/toast/index.scss

@@ -39,24 +39,24 @@
     // @desc Border color
     --_border-color: var(--ui-toast-border-color, var(--ui-color-border, #{t.$color-border}));
     // @desc Box shadow
-    --_shadow: var(--ui-toast-shadow, var(--ui-shadow-lg));
+    --_shadow: var(--ui-toast-shadow, var(--ui-shadow-lg, #{t.$shadow-lg}));
   }
 
   // @modifier variant
   .toast--success {
-    --_border-color: var(--ui-color-success);
+    --_border-color: var(--ui-color-success, #{t.$color-success});
   }
 
   .toast--warning {
-    --_border-color: var(--ui-color-warning);
+    --_border-color: var(--ui-color-warning, #{t.$color-warning});
   }
 
   .toast--danger {
-    --_border-color: var(--ui-color-danger);
+    --_border-color: var(--ui-color-danger, #{t.$color-danger});
   }
 
   .toast--info {
-    --_border-color: var(--ui-color-primary);
+    --_border-color: var(--ui-color-primary, #{t.$color-primary});
   }
 }
 

package/src/components/forms/form-error/index.scss

@@ -7,9 +7,9 @@
 
 @layer components.tokens {
   .form-error {
-    --_leading-tight-sm: var(--ui-leading-tight-sm, var(--ui-row-1));
+    --_leading-tight-sm: var(--ui-leading-tight-sm, var(--ui-row-1, #{t.$row-1}));
     // @desc Text color
-    --_color: var(--ui-form-error-color, var(--ui-color-danger));
+    --_color: var(--ui-form-error-color, var(--ui-color-danger, #{t.$color-danger}));
     // @desc Overall size
     --_size: var(--ui-form-error-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
     // @desc Gap between children

package/src/components/forms/form-helper/form-helper.docs.json

@@ -15,6 +15,124 @@
           "code": "<span class=\"ui-form-helper\">Must be at least 8 characters</span>"
         }
       ]
+    },
+    {
+      "title": "With Input Field",
+      "description": "Helper text paired with a form input for context.",
+      "examples": [
+        {
+          "layout": "column",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-column ui-column--xs",
+              "children": [
+                {
+                  "tag": "input",
+                  "class": "ui-input",
+                  "attrs": { "type": "email", "placeholder": "Email address" }
+                },
+                {
+                  "tag": "span",
+                  "class": "ui-form-helper",
+                  "text": "We will never share your email"
+                }
+              ]
+            }
+          ],
+          "code": "<input class=\"ui-input\" type=\"email\" placeholder=\"Email address\">\n<span class=\"ui-form-helper\">We will never share your email</span>"
+        }
+      ]
+    },
+    {
+      "title": "Error State",
+      "description": "Helper text styled for validation errors using the input error context.",
+      "examples": [
+        {
+          "layout": "column",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-column ui-column--xs",
+              "children": [
+                {
+                  "tag": "input",
+                  "class": "ui-input ui-input--error",
+                  "attrs": { "type": "text", "value": "abc" }
+                },
+                {
+                  "tag": "span",
+                  "class": "ui-form-helper",
+                  "attrs": { "style": "color: var(--ui-color-danger);" },
+                  "text": "Password must be at least 8 characters"
+                }
+              ]
+            }
+          ],
+          "code": "<input class=\"ui-input ui-input--error\" value=\"abc\">\n<span class=\"ui-form-helper\" style=\"color: var(--ui-color-danger);\">Password must be at least 8 characters</span>"
+        }
+      ]
+    },
+    {
+      "title": "Success State",
+      "description": "Helper text for successful validation.",
+      "examples": [
+        {
+          "layout": "column",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-column ui-column--xs",
+              "children": [
+                {
+                  "tag": "input",
+                  "class": "ui-input ui-input--success",
+                  "attrs": { "type": "text", "value": "strongpassword123" }
+                },
+                {
+                  "tag": "span",
+                  "class": "ui-form-helper",
+                  "attrs": { "style": "color: var(--ui-color-success);" },
+                  "text": "Password strength: strong"
+                }
+              ]
+            }
+          ],
+          "code": "<input class=\"ui-input ui-input--success\" value=\"strongpassword123\">\n<span class=\"ui-form-helper\" style=\"color: var(--ui-color-success);\">Password strength: strong</span>"
+        }
+      ]
+    },
+    {
+      "title": "With Select",
+      "description": "Helper text paired with a select field.",
+      "examples": [
+        {
+          "layout": "column",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-column ui-column--xs",
+              "children": [
+                {
+                  "tag": "select",
+                  "class": "ui-select",
+                  "children": [
+                    { "tag": "option", "text": "Choose a country" },
+                    { "tag": "option", "text": "United States" },
+                    { "tag": "option", "text": "Canada" }
+                  ]
+                },
+                {
+                  "tag": "span",
+                  "class": "ui-form-helper",
+                  "text": "Required for shipping calculations"
+                }
+              ]
+            }
+          ],
+          "code": "<select class=\"ui-select\">\n  <option>Choose a country</option>\n</select>\n<span class=\"ui-form-helper\">Required for shipping calculations</span>"
+        }
+      ]
     }
   ],
   "customization": [

package/src/components/forms/form-helper/index.scss

@@ -7,9 +7,9 @@
 
 @layer components.tokens {
   .form-helper {
-    --_leading-tight-sm: var(--ui-leading-tight-sm, var(--ui-row-1));
+    --_leading-tight-sm: var(--ui-leading-tight-sm, var(--ui-row-1, #{t.$row-1}));
     // @desc Text color
-    --_color: var(--ui-form-helper-color, var(--ui-color-text-muted));
+    --_color: var(--ui-form-helper-color, var(--ui-color-text-muted, #{t.$color-text-muted}));
     // @desc Overall size
     --_size: var(--ui-form-helper-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
     // @desc Gap between children

package/src/components/forms/label/index.scss

@@ -6,7 +6,7 @@
 @layer components.tokens {
   .label {
     --_weight-medium: var(--ui-weight-medium, #{t.$weight-medium});
-    --_leading-tight-sm: var(--ui-leading-tight-sm, var(--ui-row-1));
+    --_leading-tight-sm: var(--ui-leading-tight-sm, var(--ui-row-1, #{t.$row-1}));
     --_opacity-disabled: var(--ui-opacity-disabled, #{t.$opacity-disabled});
     --_weight-normal: var(--ui-weight-normal, #{t.$weight-normal});
     --_color-text-muted: var(--ui-color-text-muted, #{t.$color-text-muted});

package/src/components/forms/slider/index.scss

@@ -6,7 +6,7 @@
 @layer components.tokens {
   .slider {
     --_duration-fast: var(--ui-duration-fast, #{t.$duration-fast});
-    --_ease-default: var(--ui-ease-default, ease);
+    --_ease-default: var(--ui-ease-default, #{t.$ease-default});
     --_border-width-md: var(--ui-border-width-md, #{t.$border-width-md});
     --_opacity-disabled: var(--ui-opacity-disabled, #{t.$opacity-disabled});
     // @desc Overall height
@@ -16,7 +16,7 @@
     // @desc Track background
     --_track-bg: var(--ui-slider-track-bg, var(--ui-color-bg-subtle, #{t.$overlay-bg-subtle}));
     // @desc Track fill
-    --_track-fill: var(--ui-slider-track-fill, var(--ui-color-primary));
+    --_track-fill: var(--ui-slider-track-fill, var(--ui-color-primary, #{t.$color-primary}));
     // @desc Track corner radius
     --_track-radius: var(--ui-slider-track-radius, var(--ui-radius-full, #{t.$radius-full}));
     // @desc Thumb control size
@@ -24,7 +24,7 @@
     // @desc Thumb background
     --_thumb-bg: var(--ui-slider-thumb-bg, var(--ui-color-bg, #{t.$color-bg}));
     // @desc Thumb control border color
-    --_thumb-border-color: var(--ui-slider-thumb-border-color, var(--ui-color-primary));
+    --_thumb-border-color: var(--ui-slider-thumb-border-color, var(--ui-color-primary, #{t.$color-primary}));
     // @desc Thumb control border thickness
     --_thumb-border-width: var(--ui-slider-thumb-border-width, var(--ui-border-width-md, #{t.$border-width-md}));
     // @desc Thumb corner radius
@@ -52,18 +52,18 @@
 
   // @modifier color
   .slider--success {
-    --_track-fill: var(--ui-color-success);
-    --_thumb-border-color: var(--ui-color-success);
+    --_track-fill: var(--ui-color-success, #{t.$color-success});
+    --_thumb-border-color: var(--ui-color-success, #{t.$color-success});
   }
 
   .slider--warning {
-    --_track-fill: var(--ui-color-warning);
-    --_thumb-border-color: var(--ui-color-warning);
+    --_track-fill: var(--ui-color-warning, #{t.$color-warning});
+    --_thumb-border-color: var(--ui-color-warning, #{t.$color-warning});
   }
 
   .slider--danger {
-    --_track-fill: var(--ui-color-danger);
-    --_thumb-border-color: var(--ui-color-danger);
+    --_track-fill: var(--ui-color-danger, #{t.$color-danger});
+    --_thumb-border-color: var(--ui-color-danger, #{t.$color-danger});
   }
 }