@teseor/css 1.6.0 → 1.8.0

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

@@ -45,7 +45,7 @@
       "default": "var(--ui-color-primary)"
     },
     {
-      "name": "--ui-select-text",
+      "name": "--ui-select-color",
       "default": "var(--ui-color-text)"
     },
     {
@@ -54,7 +54,7 @@
     },
     {
       "name": "--ui-select-height-sm",
-      "default": "calc(#{t.$row} * 1.5"
+      "default": "calc(var(--ui-row) * 1.5"
     },
     {
       "name": "--ui-select-font-size-sm",
@@ -62,7 +62,7 @@
     },
     {
       "name": "--ui-select-height-lg",
-      "default": "calc(#{t.$row} * 2.5"
+      "default": "calc(var(--ui-row) * 2.5"
     },
     {
       "name": "--ui-select-padding-x-lg",

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,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // @component slider
 // @element input[type="range"]
@@ -122,7 +122,7 @@
 
     // Focus state
     &:focus-visible {
-      outline: none;
+      outline: var(--ui-border-width-md, #{t.$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);
@@ -146,7 +146,7 @@
 
     // Disabled state
     &:disabled {
-      opacity: 0.5;
+      opacity: var(--ui-opacity-disabled, 0.5);
       cursor: not-allowed;
     }
   }

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,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // @component textarea
 // @element textarea
@@ -13,7 +13,7 @@
     --_bg: var(--ui-textarea-bg, var(--ui-color-bg, #{t.$color-bg}));
     --_border-color: var(--ui-textarea-border-color, var(--ui-color-border-strong, #{t.$color-border-strong}));
     --_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}));
+    --_color: var(--ui-textarea-color, var(--ui-color-text, #{t.$color-text}));
     --_placeholder: var(--ui-textarea-placeholder, var(--ui-color-text-muted, #{t.$color-text-muted}));
   }
 
@@ -66,7 +66,7 @@
     font-family: inherit;
     font-size: var(--_font-size);
     line-height: var(--ui-row-1, #{t.$row});
-    color: var(--_text);
+    color: var(--_color);
 
     background: var(--_bg);
     border: none;
@@ -85,11 +85,11 @@
       color: var(--_placeholder);
     }
 
-    &:hover:not(:disabled, :focus) {
+    &:hover:not(:disabled, :focus-visible) {
       outline-color: var(--ui-color-border-strong, #{t.$color-border-strong});
     }
 
-    &:focus,
+    &:focus-visible,
     &--focus {
       outline-color: var(--_border-color-focus);
 
@@ -98,7 +98,7 @@
 
     &:disabled,
     &--disabled {
-      opacity: 0.5;
+      opacity: var(--ui-opacity-disabled, 0.5);
       cursor: not-allowed;
       resize: none;
     }

package/src/{04-components → components}/forms/textarea/textarea.api.json

@@ -18,7 +18,7 @@
   "cssVars": [
     {
       "name": "--ui-textarea-min-height",
-      "default": "calc(#{t.$row} * 4"
+      "default": "calc(var(--ui-row) * 4"
     },
     {
       "name": "--ui-textarea-padding-x",
@@ -49,7 +49,7 @@
       "default": "var(--ui-color-primary)"
     },
     {
-      "name": "--ui-textarea-text",
+      "name": "--ui-textarea-color",
       "default": "var(--ui-color-text)"
     },
     {
@@ -58,7 +58,7 @@
     },
     {
       "name": "--ui-textarea-min-height-sm",
-      "default": "calc(#{t.$row} * 3"
+      "default": "calc(var(--ui-row) * 3"
     },
     {
       "name": "--ui-textarea-font-size-sm",
@@ -66,7 +66,7 @@
     },
     {
       "name": "--ui-textarea-min-height-lg",
-      "default": "calc(#{t.$row} * 6"
+      "default": "calc(var(--ui-row) * 6"
     },
     {
       "name": "--ui-textarea-padding-x-lg",

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

@@ -9,7 +9,13 @@
       "title": "Default",
       "examples": [
         {
-          "html": "<textarea class=\"ui-textarea\" placeholder=\"Enter your message...\"></textarea>"
+          "items": [
+            {
+              "tag": "textarea",
+              "class": "ui-textarea",
+              "attrs": { "placeholder": "Enter your message..." }
+            }
+          ]
         }
       ]
     },
@@ -17,7 +23,7 @@
       "title": "Sizes",
       "examples": [
         {
-          "layout": "stack",
+          "layout": "column",
           "items": [
             {
               "tag": "textarea",
@@ -43,7 +49,7 @@
       "title": "Variants",
       "examples": [
         {
-          "layout": "stack",
+          "layout": "column",
           "items": [
             {
               "tag": "textarea",
@@ -69,7 +75,7 @@
       "title": "States",
       "examples": [
         {
-          "layout": "stack",
+          "layout": "column",
           "items": [
             {
               "tag": "textarea",
@@ -103,7 +109,7 @@
       "api": "./textarea.api.json",
       "examples": [
         {
-          "layout": "stack",
+          "layout": "column",
           "items": [
             {
               "tag": "textarea",
@@ -129,17 +135,17 @@
   "customization": [
     {
       "token": "--ui-textarea-min-height",
-      "default": "calc(var(--row) * 4)",
+      "default": "calc(var(--ui-row) * 4)",
       "description": "Default minimum height"
     },
     {
       "token": "--ui-textarea-min-height-sm",
-      "default": "calc(var(--row) * 3)",
+      "default": "calc(var(--ui-row) * 3)",
       "description": "Small minimum height"
     },
     {
       "token": "--ui-textarea-min-height-lg",
-      "default": "calc(var(--row) * 6)",
+      "default": "calc(var(--ui-row) * 6)",
       "description": "Large minimum height"
     },
     {
@@ -178,7 +184,7 @@
       "description": "Focus border color"
     },
     {
-      "token": "--ui-textarea-text",
+      "token": "--ui-textarea-color",
       "default": "var(--ui-color-text)",
       "description": "Text color"
     },

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

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // @component toggle
 // @element div
@@ -11,7 +11,7 @@
     --_track-bg-checked: var(--ui-toggle-track-bg-checked, var(--ui-color-primary));
     --_track-radius: var(--ui-toggle-track-radius, calc(#{t.$unit} * 1.5));
     --_thumb-size: var(--ui-toggle-thumb-size, calc(#{t.$unit} * 2.5));
-    --_thumb-bg: var(--ui-toggle-thumb-bg, white);
+    --_thumb-bg: var(--ui-toggle-thumb-bg, var(--ui-color-bg, #{t.$color-bg}));
     --_thumb-offset: var(--ui-toggle-thumb-offset, calc(#{t.$unit} / 4));
   }
 
@@ -107,7 +107,7 @@
   // Disabled state
   .toggle__input:disabled ~ .toggle__track,
   .toggle__input:disabled ~ .toggle__thumb {
-    opacity: 0.5;
+    opacity: var(--ui-opacity-disabled, 0.5);
     cursor: not-allowed;
   }
 

package/src/{04-components → components}/forms/toggle/toggle.api.json

@@ -14,11 +14,11 @@
   "cssVars": [
     {
       "name": "--ui-toggle-track-width",
-      "default": "calc(#{t.$unit} * 5"
+      "default": "calc(var(--ui-unit) * 5"
     },
     {
       "name": "--ui-toggle-track-height",
-      "default": "calc(#{t.$unit} * 3"
+      "default": "calc(var(--ui-unit) * 3"
     },
     {
       "name": "--ui-toggle-track-bg",
@@ -30,11 +30,11 @@
     },
     {
       "name": "--ui-toggle-track-radius",
-      "default": "calc(#{t.$unit} * 1.5"
+      "default": "calc(var(--ui-unit) * 1.5"
     },
     {
       "name": "--ui-toggle-thumb-size",
-      "default": "calc(#{t.$unit} * 2.5"
+      "default": "calc(var(--ui-unit) * 2.5"
     },
     {
       "name": "--ui-toggle-thumb-bg",
@@ -42,7 +42,7 @@
     },
     {
       "name": "--ui-toggle-thumb-offset",
-      "default": "calc(#{t.$unit} / 4"
+      "default": "calc(var(--ui-unit) / 4"
     }
   ]
 }