@teseor/css 1.7.0 → 1.9.0

package/src/{04-components → components}/forms/select/select.docs.json

@@ -9,7 +9,22 @@
       "title": "Default",
       "examples": [
         {
-          "html": "<select class=\"ui-select\"><option value=\"\" disabled selected>Choose option...</option><option value=\"1\">Option 1</option><option value=\"2\">Option 2</option><option value=\"3\">Option 3</option></select>"
+          "items": [
+            {
+              "tag": "select",
+              "class": "ui-select",
+              "children": [
+                {
+                  "tag": "option",
+                  "text": "Choose option...",
+                  "attrs": { "value": "", "disabled": "", "selected": "" }
+                },
+                { "tag": "option", "text": "Option 1", "attrs": { "value": "1" } },
+                { "tag": "option", "text": "Option 2", "attrs": { "value": "2" } },
+                { "tag": "option", "text": "Option 3", "attrs": { "value": "3" } }
+              ]
+            }
+          ]
         }
       ]
     },
@@ -17,22 +32,31 @@
       "title": "Sizes",
       "examples": [
         {
-          "layout": "stack",
+          "layout": "column",
           "items": [
             {
               "tag": "select",
               "class": "ui-select ui-select--sm",
-              "html": "<option>Small</option><option>Option 2</option>"
+              "children": [
+                { "tag": "option", "text": "Small" },
+                { "tag": "option", "text": "Option 2" }
+              ]
             },
             {
               "tag": "select",
               "class": "ui-select",
-              "html": "<option>Default</option><option>Option 2</option>"
+              "children": [
+                { "tag": "option", "text": "Default" },
+                { "tag": "option", "text": "Option 2" }
+              ]
             },
             {
               "tag": "select",
               "class": "ui-select ui-select--lg",
-              "html": "<option>Large</option><option>Option 2</option>"
+              "children": [
+                { "tag": "option", "text": "Large" },
+                { "tag": "option", "text": "Option 2" }
+              ]
             }
           ],
           "code": "<select class=\"ui-select ui-select--sm\">...</select>\n<select class=\"ui-select\">...</select>\n<select class=\"ui-select ui-select--lg\">...</select>"
@@ -43,18 +67,22 @@
       "title": "Variants",
       "examples": [
         {
-          "layout": "stack",
+          "layout": "column",
           "items": [
-            { "tag": "select", "class": "ui-select", "html": "<option>Outline (default)</option>" },
+            {
+              "tag": "select",
+              "class": "ui-select",
+              "children": [{ "tag": "option", "text": "Outline (default)" }]
+            },
             {
               "tag": "select",
               "class": "ui-select ui-select--filled",
-              "html": "<option>Filled</option>"
+              "children": [{ "tag": "option", "text": "Filled" }]
             },
             {
               "tag": "select",
               "class": "ui-select ui-select--ghost",
-              "html": "<option>Ghost</option>"
+              "children": [{ "tag": "option", "text": "Ghost" }]
             }
           ],
           "code": "<select class=\"ui-select\">...</select>\n<select class=\"ui-select ui-select--filled\">...</select>\n<select class=\"ui-select ui-select--ghost\">...</select>"
@@ -65,23 +93,23 @@
       "title": "States",
       "examples": [
         {
-          "layout": "stack",
+          "layout": "column",
           "items": [
             {
               "tag": "select",
               "class": "ui-select ui-select--error",
-              "html": "<option>Error state</option>"
+              "children": [{ "tag": "option", "text": "Error state" }]
             },
             {
               "tag": "select",
               "class": "ui-select ui-select--success",
-              "html": "<option>Success state</option>"
+              "children": [{ "tag": "option", "text": "Success state" }]
             },
             {
               "tag": "select",
               "class": "ui-select",
               "attrs": { "disabled": "" },
-              "html": "<option>Disabled</option>"
+              "children": [{ "tag": "option", "text": "Disabled" }]
             }
           ],
           "code": "<select class=\"ui-select ui-select--error\">...</select>\n<select class=\"ui-select ui-select--success\">...</select>\n<select class=\"ui-select\" disabled>...</select>"
@@ -92,7 +120,16 @@
       "title": "Full Width",
       "examples": [
         {
-          "html": "<select class=\"ui-select ui-select--block\"><option value=\"\">Full width select...</option><option value=\"1\">Option 1</option></select>"
+          "items": [
+            {
+              "tag": "select",
+              "class": "ui-select ui-select--block",
+              "children": [
+                { "tag": "option", "text": "Full width select...", "attrs": { "value": "" } },
+                { "tag": "option", "text": "Option 1", "attrs": { "value": "1" } }
+              ]
+            }
+          ]
         }
       ]
     },
@@ -100,7 +137,35 @@
       "title": "With Option Groups",
       "examples": [
         {
-          "html": "<select class=\"ui-select ui-select--block\"><option value=\"\" disabled selected>Choose a fruit...</option><optgroup label=\"Citrus\"><option value=\"orange\">Orange</option><option value=\"lemon\">Lemon</option></optgroup><optgroup label=\"Berries\"><option value=\"strawberry\">Strawberry</option><option value=\"blueberry\">Blueberry</option></optgroup></select>",
+          "items": [
+            {
+              "tag": "select",
+              "class": "ui-select ui-select--block",
+              "children": [
+                {
+                  "tag": "option",
+                  "text": "Choose a fruit...",
+                  "attrs": { "value": "", "disabled": "", "selected": "" }
+                },
+                {
+                  "tag": "optgroup",
+                  "attrs": { "label": "Citrus" },
+                  "children": [
+                    { "tag": "option", "text": "Orange", "attrs": { "value": "orange" } },
+                    { "tag": "option", "text": "Lemon", "attrs": { "value": "lemon" } }
+                  ]
+                },
+                {
+                  "tag": "optgroup",
+                  "attrs": { "label": "Berries" },
+                  "children": [
+                    { "tag": "option", "text": "Strawberry", "attrs": { "value": "strawberry" } },
+                    { "tag": "option", "text": "Blueberry", "attrs": { "value": "blueberry" } }
+                  ]
+                }
+              ]
+            }
+          ],
           "code": "<select class=\"ui-select\">\n  <optgroup label=\"Citrus\">\n    <option>Orange</option>\n    <option>Lemon</option>\n  </optgroup>\n  <optgroup label=\"Berries\">\n    <option>Strawberry</option>\n  </optgroup>\n</select>"
         }
       ]
@@ -114,12 +179,12 @@
     },
     {
       "token": "--ui-select-height-sm",
-      "default": "calc(var(--row) * 1.5)",
+      "default": "calc(var(--ui-row) * 1.5)",
       "description": "Small height"
     },
     {
       "token": "--ui-select-height-lg",
-      "default": "calc(var(--row) * 2.5)",
+      "default": "calc(var(--ui-row) * 2.5)",
       "description": "Large height"
     },
     {
@@ -152,7 +217,11 @@
       "default": "var(--ui-color-primary)",
       "description": "Focus border color"
     },
-    { "token": "--ui-select-text", "default": "var(--ui-color-text)", "description": "Text color" },
+    {
+      "token": "--ui-select-color",
+      "default": "var(--ui-color-text)",
+      "description": "Text color"
+    },
     {
       "token": "--ui-select-icon-color",
       "default": "var(--ui-color-text-muted)",

package/src/{04-components → components}/forms/slider/index.scss

@@ -1,32 +1,50 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // @component slider
 // @element input[type="range"]
 
 @layer components.tokens {
   .slider {
+    --_duration-fast: var(--ui-duration-fast, #{t.$duration-fast});
+    --_ease-default: var(--ui-ease-default, ease);
+    --_border-width-md: var(--ui-border-width-md, #{t.$border-width-md});
+    --_opacity-disabled: var(--ui-opacity-disabled, #{t.$opacity-disabled});
+    // @desc Overall height
     --_height: var(--ui-slider-height, var(--ui-row-2, #{t.$row-2}));
+    // @desc Track height
     --_track-height: var(--ui-slider-track-height, #{t.$unit});
-    --_track-bg: var(--ui-slider-track-bg, var(--ui-color-bg-subtle, rgb(0 0 0 / 0.1)));
+    // @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));
+    // @desc Track corner radius
     --_track-radius: var(--ui-slider-track-radius, var(--ui-radius-full, #{t.$radius-full}));
+    // @desc Thumb control size
     --_thumb-size: var(--ui-slider-thumb-size, calc(#{t.$unit} * 2.5));
+    // @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));
+    // @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
     --_thumb-radius: var(--ui-slider-thumb-radius, var(--ui-radius-full, #{t.$radius-full}));
-    --_thumb-shadow: var(--ui-slider-thumb-shadow, 0 1px 3px rgb(0 0 0 / 0.2));
+    // @desc Thumb control box shadow
+    --_thumb-shadow: var(--ui-slider-thumb-shadow, #{t.$slider-thumb-shadow});
+    // @desc Focus ring
     --_focus-ring: var(--ui-slider-focus-ring, var(--ui-color-focus, #{t.$color-focus}));
   }
 
   // @modifier size
   .slider--sm {
+    // @desc Overall height at small size
     --_height: var(--ui-slider-height-sm, calc(#{t.$row} * 1.5));
     --_track-height: calc(#{t.$unit} * 0.5);
     --_thumb-size: calc(#{t.$unit} * 2);
   }
 
   .slider--lg {
+    // @desc Overall height at large size
     --_height: var(--ui-slider-height-lg, calc(#{t.$row} * 2.5));
     --_track-height: calc(#{t.$unit} * 1.5);
     --_thumb-size: calc(#{t.$unit} * 3);
@@ -101,8 +119,8 @@
       appearance: none;
 
       transition:
-        box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease),
-        transform var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
+        box-shadow var(--_duration-fast) var(--_ease-default),
+        transform var(--_duration-fast) var(--_ease-default);
     }
 
     // Firefox thumb
@@ -116,20 +134,20 @@
       box-shadow: var(--_thumb-shadow);
 
       transition:
-        box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease),
-        transform var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
+        box-shadow var(--_duration-fast) var(--_ease-default),
+        transform var(--_duration-fast) var(--_ease-default);
     }
 
     // Focus state
     &:focus-visible {
-      outline: none;
+      outline: var(--_border-width-md) solid transparent;
 
       &::-webkit-slider-thumb {
-        box-shadow: 0 0 0 var(--ui-border-width-md, #{t.$border-width-md}) var(--_focus-ring);
+        box-shadow: 0 0 0 var(--_border-width-md) var(--_focus-ring);
       }
 
       &::-moz-range-thumb {
-        box-shadow: 0 0 0 var(--ui-border-width-md, #{t.$border-width-md}) var(--_focus-ring);
+        box-shadow: 0 0 0 var(--_border-width-md) var(--_focus-ring);
       }
     }
 
@@ -146,7 +164,7 @@
 
     // Disabled state
     &:disabled {
-      opacity: 0.5;
+      opacity: var(--_opacity-disabled);
       cursor: not-allowed;
     }
   }

package/src/components/forms/slider/slider.api.json

@@ -0,0 +1,85 @@
+{
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
+  "name": "slider",
+  "element": "input",
+  "modifiers": {
+    "size": {
+      "values": ["sm", "lg"]
+    },
+    "color": {
+      "values": ["success", "warning", "danger"]
+    }
+  },
+  "cssVars": [
+    {
+      "name": "--ui-slider-height",
+      "default": "var(--ui-row-2)",
+      "description": "Overall height"
+    },
+    {
+      "name": "--ui-slider-track-height",
+      "default": "var(--ui-unit)",
+      "description": "Track height"
+    },
+    {
+      "name": "--ui-slider-track-bg",
+      "default": "var(--ui-color-bg-subtle)",
+      "description": "Track background"
+    },
+    {
+      "name": "--ui-slider-track-fill",
+      "default": "var(--ui-color-primary)",
+      "description": "Track fill"
+    },
+    {
+      "name": "--ui-slider-track-radius",
+      "default": "var(--ui-radius-full)",
+      "description": "Track corner radius"
+    },
+    {
+      "name": "--ui-slider-thumb-size",
+      "default": "calc(var(--ui-unit) * 2.5)",
+      "description": "Thumb control size"
+    },
+    {
+      "name": "--ui-slider-thumb-bg",
+      "default": "var(--ui-color-bg)",
+      "description": "Thumb background"
+    },
+    {
+      "name": "--ui-slider-thumb-border-color",
+      "default": "var(--ui-color-primary)",
+      "description": "Thumb control border color"
+    },
+    {
+      "name": "--ui-slider-thumb-border-width",
+      "default": "var(--ui-border-width-md)",
+      "description": "Thumb control border thickness"
+    },
+    {
+      "name": "--ui-slider-thumb-radius",
+      "default": "var(--ui-radius-full)",
+      "description": "Thumb corner radius"
+    },
+    {
+      "name": "--ui-slider-thumb-shadow",
+      "default": "var(--ui-slider-thumb-shadow)",
+      "description": "Thumb control box shadow"
+    },
+    {
+      "name": "--ui-slider-focus-ring",
+      "default": "var(--ui-color-focus)",
+      "description": "Focus ring"
+    },
+    {
+      "name": "--ui-slider-height-sm",
+      "default": "calc(var(--ui-row) * 1.5)",
+      "description": "Overall height at small size"
+    },
+    {
+      "name": "--ui-slider-height-lg",
+      "default": "calc(var(--ui-row) * 2.5)",
+      "description": "Overall height at large size"
+    }
+  ]
+}

package/src/{04-components → components}/forms/slider/slider.docs.json

@@ -24,7 +24,7 @@
       "title": "Sizes",
       "examples": [
         {
-          "layout": "stack",
+          "layout": "column",
           "items": [
             {
               "tag": "input",
@@ -50,7 +50,7 @@
       "title": "Colors",
       "examples": [
         {
-          "layout": "stack",
+          "layout": "column",
           "items": [
             {
               "tag": "input",
@@ -81,7 +81,7 @@
       "title": "Disabled",
       "examples": [
         {
-          "layout": "stack",
+          "layout": "column",
           "items": [
             {
               "tag": "input",

package/src/{04-components → components}/forms/textarea/index.scss

@@ -1,37 +1,63 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // @component textarea
 // @element textarea
 
 @layer components.tokens {
   .textarea {
+    --_row-1: var(--ui-row-1, #{t.$row});
+    --_border-width-sm: var(--ui-border-width-sm, #{t.$border-width-sm});
+    --_duration-fast: var(--ui-duration-fast, #{t.$duration-fast});
+    --_ease-default: var(--ui-ease-default, ease);
+    --_color-border-strong: var(--ui-color-border-strong, #{t.$color-border-strong});
+    --_border-width-md: var(--ui-border-width-md, #{t.$border-width-md});
+    --_color-focus: var(--ui-color-focus, #{t.$color-focus});
+    --_opacity-disabled: var(--ui-opacity-disabled, #{t.$opacity-disabled});
+    --_color-bg-subtle: var(--ui-color-bg-subtle, #{t.$color-bg-subtle});
+    // @desc Minimum height
     --_min-height: var(--ui-textarea-min-height, calc(#{t.$row} * 4));
+    // @desc Horizontal padding
     --_padding-x: var(--ui-textarea-padding-x, var(--ui-space-1, #{t.$space-1}));
+    // @desc Vertical padding
     --_padding-y: var(--ui-textarea-padding-y, var(--ui-space-1, #{t.$space-1}));
+    // @desc Font size
     --_font-size: var(--ui-textarea-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    // @desc Corner radius
     --_radius: var(--ui-textarea-radius, var(--ui-radius-md, #{t.$radius-md}));
+    // @desc Background color
     --_bg: var(--ui-textarea-bg, var(--ui-color-bg, #{t.$color-bg}));
+    // @desc Border color
     --_border-color: var(--ui-textarea-border-color, var(--ui-color-border-strong, #{t.$color-border-strong}));
+    // @desc Border color focus
     --_border-color-focus: var(--ui-textarea-border-color-focus, var(--ui-color-primary, #{t.$color-primary}));
-    --_text: var(--ui-textarea-text, var(--ui-color-text, #{t.$color-text}));
+    // @desc Text color
+    --_color: var(--ui-textarea-color, var(--ui-color-text, #{t.$color-text}));
+    // @desc Placeholder
     --_placeholder: var(--ui-textarea-placeholder, var(--ui-color-text-muted, #{t.$color-text-muted}));
   }
 
   // @modifier size
   .textarea--sm {
+    // @desc Minimum height at small size
     --_min-height: var(--ui-textarea-min-height-sm, calc(#{t.$row} * 3));
+    // @desc Font size at small size
     --_font-size: var(--ui-textarea-font-size-sm, var(--ui-font-size-xs, #{t.$font-size-xs}));
   }
 
   .textarea--lg {
+    // @desc Minimum height at large size
     --_min-height: var(--ui-textarea-min-height-lg, calc(#{t.$row} * 6));
+    // @desc Horizontal padding at large size
     --_padding-x: var(--ui-textarea-padding-x-lg, var(--ui-space-2, #{t.$space-2}));
+    // @desc Vertical padding at large size
     --_padding-y: var(--ui-textarea-padding-y-lg, var(--ui-space-2, #{t.$space-2}));
+    // @desc Font size at large size
     --_font-size: var(--ui-textarea-font-size-lg, var(--ui-font-size-md, #{t.$font-size-md}));
   }
 
   // @modifier variant
   .textarea--filled {
+    // @desc Filled bg
     --_bg: var(--ui-textarea-filled-bg, var(--ui-color-bg-muted, #{t.$color-bg-muted}));
     --_border-color: transparent;
   }
@@ -43,12 +69,16 @@
 
   // @modifier state
   .textarea--error {
+    // @desc Error border
     --_border-color: var(--ui-textarea-error-border, var(--ui-color-danger, #{t.$color-danger}));
+    // @desc Error border
     --_border-color-focus: var(--ui-textarea-error-border, var(--ui-color-danger, #{t.$color-danger}));
   }
 
   .textarea--success {
+    // @desc Success border
     --_border-color: var(--ui-textarea-success-border, var(--ui-color-success, #{t.$color-success}));
+    // @desc Success border
     --_border-color-focus: var(--ui-textarea-success-border, var(--ui-color-success, #{t.$color-success}));
   }
 }
@@ -65,18 +95,18 @@
 
     font-family: inherit;
     font-size: var(--_font-size);
-    line-height: var(--ui-row-1, #{t.$row});
-    color: var(--_text);
+    line-height: var(--_row-1);
+    color: var(--_color);
 
     background: var(--_bg);
     border: none;
     border-radius: var(--_radius);
-    outline: var(--ui-border-width-sm, #{t.$border-width-sm}) solid var(--_border-color);
+    outline: var(--_border-width-sm) solid var(--_border-color);
 
     transition:
-      border-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease),
-      box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
-    outline-offset: calc(var(--ui-border-width-sm, #{t.$border-width-sm}) * -1);
+      border-color var(--_duration-fast) var(--_ease-default),
+      box-shadow var(--_duration-fast) var(--_ease-default);
+    outline-offset: calc(var(--_border-width-sm) * -1);
 
     // Default resize behavior
     resize: vertical;
@@ -85,30 +115,31 @@
       color: var(--_placeholder);
     }
 
-    &:hover:not(:disabled, :focus) {
-      outline-color: var(--ui-color-border-strong, #{t.$color-border-strong});
+    &:hover:not(:disabled, :focus-visible) {
+      outline-color: var(--_color-border-strong);
     }
 
-    &:focus,
+    &:focus-visible,
     &--focus {
       outline-color: var(--_border-color-focus);
 
-      box-shadow: 0 0 0 var(--ui-border-width-md, #{t.$border-width-md}) var(--ui-color-focus, #{t.$color-focus});
+      box-shadow: 0 0 0 var(--_border-width-md) var(--_color-focus);
     }
 
     &:disabled,
     &--disabled {
-      opacity: 0.5;
+      opacity: var(--_opacity-disabled);
       cursor: not-allowed;
       resize: none;
     }
 
     &:read-only {
-      background: var(--ui-color-bg-subtle, #{t.$color-bg-subtle});
+      background: var(--_color-bg-subtle);
       resize: none;
     }
 
     // Resize variants
+  // @modifier resize
     &--resize-none {
       resize: none;
     }

package/src/components/forms/textarea/textarea.api.json

@@ -0,0 +1,116 @@
+{
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
+  "name": "textarea",
+  "element": "textarea",
+  "modifiers": {
+    "size": {
+      "values": ["sm", "lg"]
+    },
+    "variant": {
+      "values": ["filled", "ghost"]
+    },
+    "state": {
+      "values": ["error", "success"]
+    },
+    "resize": {
+      "values": ["resize-none", "resize-horizontal", "resize-both"]
+    }
+  },
+  "cssVars": [
+    {
+      "name": "--ui-textarea-min-height",
+      "default": "calc(var(--ui-row) * 4)",
+      "description": "Minimum height"
+    },
+    {
+      "name": "--ui-textarea-padding-x",
+      "default": "var(--ui-space-1)",
+      "description": "Horizontal padding"
+    },
+    {
+      "name": "--ui-textarea-padding-y",
+      "default": "var(--ui-space-1)",
+      "description": "Vertical padding"
+    },
+    {
+      "name": "--ui-textarea-font-size",
+      "default": "var(--ui-font-size-sm)",
+      "description": "Font size"
+    },
+    {
+      "name": "--ui-textarea-radius",
+      "default": "var(--ui-radius-md)",
+      "description": "Corner radius"
+    },
+    {
+      "name": "--ui-textarea-bg",
+      "default": "var(--ui-color-bg)",
+      "description": "Background color"
+    },
+    {
+      "name": "--ui-textarea-border-color",
+      "default": "var(--ui-color-border-strong)",
+      "description": "Border color"
+    },
+    {
+      "name": "--ui-textarea-border-color-focus",
+      "default": "var(--ui-color-primary)",
+      "description": "Border color focus"
+    },
+    {
+      "name": "--ui-textarea-color",
+      "default": "var(--ui-color-text)",
+      "description": "Text color"
+    },
+    {
+      "name": "--ui-textarea-placeholder",
+      "default": "var(--ui-color-text-muted)",
+      "description": "Placeholder"
+    },
+    {
+      "name": "--ui-textarea-min-height-sm",
+      "default": "calc(var(--ui-row) * 3)",
+      "description": "Minimum height at small size"
+    },
+    {
+      "name": "--ui-textarea-font-size-sm",
+      "default": "var(--ui-font-size-xs)",
+      "description": "Font size at small size"
+    },
+    {
+      "name": "--ui-textarea-min-height-lg",
+      "default": "calc(var(--ui-row) * 6)",
+      "description": "Minimum height at large size"
+    },
+    {
+      "name": "--ui-textarea-padding-x-lg",
+      "default": "var(--ui-space-2)",
+      "description": "Horizontal padding at large size"
+    },
+    {
+      "name": "--ui-textarea-padding-y-lg",
+      "default": "var(--ui-space-2)",
+      "description": "Vertical padding at large size"
+    },
+    {
+      "name": "--ui-textarea-font-size-lg",
+      "default": "var(--ui-font-size-md)",
+      "description": "Font size at large size"
+    },
+    {
+      "name": "--ui-textarea-filled-bg",
+      "default": "var(--ui-color-bg-muted)",
+      "description": "Filled bg"
+    },
+    {
+      "name": "--ui-textarea-error-border",
+      "default": "var(--ui-color-danger)",
+      "description": "Error border"
+    },
+    {
+      "name": "--ui-textarea-success-border",
+      "default": "var(--ui-color-success)",
+      "description": "Success border"
+    }
+  ]
+}