@teseor/css 2.2.2 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teseor/css",
-  "version": "2.2.2",
+  "version": "2.3.0",
   "description": "CSS library - reset, primitives, components, utilities",
   "license": "MIT",
   "author": "letanure",

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

@@ -18,7 +18,7 @@
     },
     {
       "name": "--ui-badge-height",
-      "default": "calc(var(--ui-row) * 1.25)",
+      "default": "calc(var(--ui-row) * 1.5)",
       "description": "Overall height"
     },
     {
@@ -63,7 +63,7 @@
     },
     {
       "name": "--ui-badge-height-lg",
-      "default": "calc(var(--ui-row) * 1.5)",
+      "default": "var(--ui-row-2)",
       "description": "Overall height at large size"
     },
     {

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

@@ -10,7 +10,7 @@
     --_accent: var(--ui-badge-accent, var(--ui-color-bg-muted, #{t.$color-bg-muted}));
 
     // @desc Overall height
-    --_height: var(--ui-badge-height, calc(var(--ui-row, #{t.$row}) * 1.25));
+    --_height: var(--ui-badge-height, calc(var(--ui-row, #{t.$row}) * 1.5));
     // @desc Horizontal padding
     --_padding-x: var(--ui-badge-padding-x, var(--ui-space-1, #{t.$space-1}));
     // @desc Font size
@@ -36,7 +36,7 @@
 
   .badge--lg {
     // @desc Overall height at large size
-    --_height: var(--ui-badge-height-lg, calc(var(--ui-row, #{t.$row}) * 1.5));
+    --_height: var(--ui-badge-height-lg, var(--ui-row-2, #{t.$row-2}));
     // @desc Horizontal padding at large size
     --_padding-x: var(--ui-badge-padding-x-lg, var(--ui-space-2, #{t.$space-2}));
     // @desc Font size at large size

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

@@ -8,7 +8,6 @@
     --_border-width-sm: var(--ui-border-width-sm, #{t.$border-width-sm});
     --_unit: var(--ui-unit, #{t.$unit});
     --_weight-medium: var(--ui-font-weight-medium, #{t.$font-weight-medium});
-    --_color-bg-subtle: var(--ui-color-bg-subtle, #{t.$color-bg-subtle});
     --_color-bg-muted: var(--ui-color-bg-muted, #{t.$color-bg-muted});
     // @desc Font size
     --_font-size: var(--ui-table-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
@@ -63,11 +62,11 @@
   // @modifier boolean striped
     &--striped {
       tbody tr:nth-child(odd) {
-        background: var(--_color-bg-subtle);
+        background: var(--_color-bg-muted);
       }
 
       th {
-        background: var(--_color-bg-muted);
+        background: var(--_header-bg);
       }
     }
   }

package/src/components/feedback/progress/api.json

@@ -30,7 +30,7 @@
     },
     {
       "name": "--ui-progress-bg",
-      "default": "var(--ui-color-bg-subtle)",
+      "default": "var(--ui-color-bg-inset)",
       "description": "Background color"
     },
     {

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

@@ -21,7 +21,7 @@
     // @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.$color-bg-subtle}));
+    --_bg: var(--ui-progress-bg, var(--ui-color-bg-inset, #{t.$color-bg-inset}));
     // @desc Fill
     --_fill: var(--ui-progress-fill, var(--ui-color-primary, #{t.$color-primary}));
     // @desc Corner radius

package/src/components/feedback/skeleton/api.json

@@ -13,7 +13,7 @@
   "cssVars": [
     {
       "name": "--ui-skeleton-bg",
-      "default": "var(--ui-color-bg-subtle)",
+      "default": "var(--ui-color-bg-inset)",
       "description": "Background color"
     },
     {

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

@@ -8,7 +8,7 @@
 @layer components.tokens {
   .skeleton {
     // @desc Background color
-    --_bg: var(--ui-skeleton-bg, var(--ui-color-bg-subtle, #{t.$color-bg-subtle}));
+    --_bg: var(--ui-skeleton-bg, var(--ui-color-bg-inset, #{t.$color-bg-inset}));
     // @desc Shimmer
     --_shimmer: var(--ui-skeleton-shimmer, #{t.$skeleton-shimmer});
     // @desc Corner radius

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

@@ -23,7 +23,7 @@
     },
     {
       "name": "--ui-slider-track-bg",
-      "default": "var(--ui-color-bg-subtle)",
+      "default": "var(--ui-color-bg-inset)",
       "description": "Track background"
     },
     {
@@ -71,6 +71,11 @@
       "default": "var(--ui-color-focus)",
       "description": "Focus ring"
     },
+    {
+      "name": "--ui-slider-fill-pct",
+      "default": "50%",
+      "description": "Fill percentage (set via JS for Webkit track fill)"
+    },
     {
       "name": "--ui-slider-height-sm",
       "default": "calc(var(--ui-row) * 1.5)",

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

@@ -14,7 +14,7 @@
     // @desc Track height
     --_track-height: var(--ui-slider-track-height, var(--ui-unit, #{t.$unit}));
     // @desc Track background
-    --_track-bg: var(--ui-slider-track-bg, var(--ui-color-bg-subtle, #{t.$color-bg-subtle}));
+    --_track-bg: var(--ui-slider-track-bg, var(--ui-color-bg-inset, #{t.$color-bg-inset}));
     // @desc Track fill
     --_track-fill: var(--ui-slider-track-fill, var(--ui-color-primary, #{t.$color-primary}));
     // @desc Track corner radius
@@ -33,6 +33,8 @@
     --_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}));
+    // @desc Fill percentage (set via JS for Webkit track fill)
+    --_fill-pct: var(--ui-slider-fill-pct, 50%);
   }
 
   // @modifier size
@@ -81,11 +83,11 @@
     cursor: pointer;
     appearance: none;
 
-    // Webkit track
+    // Webkit track — gradient simulates fill (no ::-webkit-range-progress)
     &::-webkit-slider-runnable-track {
       block-size: var(--_track-height);
 
-      background: var(--_track-bg);
+      background: linear-gradient(to right, var(--_track-fill) var(--_fill-pct, 50%), var(--_track-bg) var(--_fill-pct, 50%));
       border-radius: var(--_track-radius);
     }
 

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

@@ -25,7 +25,7 @@
     },
     {
       "name": "--ui-toggle-track-bg",
-      "default": "var(--ui-color-bg-subtle)",
+      "default": "var(--ui-color-bg-inset)",
       "description": "Track background"
     },
     {

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

@@ -15,7 +15,7 @@
     // @desc Track height
     --_track-height: var(--ui-toggle-track-height, calc(#{t.$unit} * 3));
     // @desc Track background
-    --_track-bg: var(--ui-toggle-track-bg, var(--ui-color-bg-subtle, #{t.$color-bg-subtle}));
+    --_track-bg: var(--ui-toggle-track-bg, var(--ui-color-bg-inset, #{t.$color-bg-inset}));
     // @desc Track bg checked
     --_track-bg-checked: var(--ui-toggle-track-bg-checked, var(--ui-color-primary, #{t.$color-primary}));
     // @desc Track corner radius

package/src/config/guides/theming.docs.html

@@ -11,47 +11,47 @@ weight: 2
   <div class="demo-playground">
     <div class="demo-playground__row">
       <label>scale</label>
-      <input type="range" min="0.75" max="1.25" step="0.025" value="1" data-token="--ui-scale" data-suffix="">
+      <input class="ui-slider ui-slider--sm" type="range" min="0.75" max="1.25" step="0.025" value="1" data-token="--ui-scale" data-suffix="">
       <output>1</output>
     </div>
     <div class="demo-playground__row">
       <label>primary hue</label>
-      <input type="range" min="0" max="360" step="1" value="250" data-token="--ui-color-primary" data-template="oklch(55% 0.22 {value})" data-suffix="">
+      <input class="ui-slider ui-slider--sm" type="range" min="0" max="360" step="1" value="250" data-token="--ui-color-primary" data-template="oklch(55% 0.22 {value})" data-suffix="">
       <output>250</output>
     </div>
     <div class="demo-playground__row">
       <label>success hue</label>
-      <input type="range" min="0" max="360" step="1" value="145" data-token="--ui-color-success" data-template="oklch(60% 0.18 {value})" data-suffix="">
+      <input class="ui-slider ui-slider--sm" type="range" min="0" max="360" step="1" value="145" data-token="--ui-color-success" data-template="oklch(60% 0.18 {value})" data-suffix="">
       <output>145</output>
     </div>
     <div class="demo-playground__row">
       <label>warning hue</label>
-      <input type="range" min="0" max="360" step="1" value="70" data-token="--ui-color-warning" data-template="oklch(75% 0.18 {value})" data-suffix="">
+      <input class="ui-slider ui-slider--sm" type="range" min="0" max="360" step="1" value="70" data-token="--ui-color-warning" data-template="oklch(75% 0.18 {value})" data-suffix="">
       <output>70</output>
     </div>
     <div class="demo-playground__row">
       <label>danger hue</label>
-      <input type="range" min="0" max="360" step="1" value="25" data-token="--ui-color-danger" data-template="oklch(60% 0.22 {value})" data-suffix="">
+      <input class="ui-slider ui-slider--sm" type="range" min="0" max="360" step="1" value="25" data-token="--ui-color-danger" data-template="oklch(60% 0.22 {value})" data-suffix="">
       <output>25</output>
     </div>
     <div class="demo-playground__row">
       <label>neutral hue</label>
-      <input type="range" min="0" max="360" step="1" value="250" data-token="--ui-color-neutral" data-param="hue" data-template="oklch(50% {chroma} {hue})" data-suffix="">
+      <input class="ui-slider ui-slider--sm" type="range" min="0" max="360" step="1" value="250" data-token="--ui-color-neutral" data-param="hue" data-template="oklch(50% {chroma} {hue})" data-suffix="">
       <output>250</output>
     </div>
     <div class="demo-playground__row">
       <label>neutral chroma</label>
-      <input type="range" min="0" max="0.08" step="0.005" value="0.02" data-token="--ui-color-neutral" data-param="chroma" data-template="oklch(50% {chroma} {hue})" data-suffix="">
+      <input class="ui-slider ui-slider--sm" type="range" min="0" max="0.08" step="0.005" value="0.02" data-token="--ui-color-neutral" data-param="chroma" data-template="oklch(50% {chroma} {hue})" data-suffix="">
       <output>0.02</output>
     </div>
     <div class="demo-playground__row">
       <label>font size</label>
-      <input type="range" min="0.75" max="1.25" step="0.05" value="1" data-token="--ui-font-size-base" data-suffix="rem">
+      <input class="ui-slider ui-slider--sm" type="range" min="0.75" max="1.25" step="0.05" value="1" data-token="--ui-font-size-base" data-suffix="rem">
       <output>1rem</output>
     </div>
     <div class="demo-playground__row">
       <label>font family</label>
-      <select data-token="--ui-font-sans">
+      <select class="ui-select ui-select--sm" data-token="--ui-font-sans">
         <option value="system-ui, -apple-system, sans-serif">System</option>
         <option value="'Georgia', 'Times New Roman', serif">Serif</option>
         <option value="ui-monospace, sfmono-regular, monospace">Mono</option>
@@ -59,19 +59,28 @@ weight: 2
       </select>
       <output></output>
     </div>
+    <div class="demo-playground__row">
+      <label>mono font</label>
+      <select class="ui-select ui-select--sm" data-token="--ui-font-mono">
+        <option value="ui-monospace, sfmono-regular, monospace">System</option>
+        <option value="'Courier New', courier, monospace">Courier</option>
+        <option value="'Fira Code', ui-monospace, monospace">Fira Code</option>
+      </select>
+      <output></output>
+    </div>
     <div class="demo-playground__row">
       <label>radius</label>
-      <input type="range" min="0" max="24" step="1" value="8" data-token="--ui-radius-base" data-suffix="px">
+      <input class="ui-slider ui-slider--sm" type="range" min="0" max="24" step="1" value="8" data-token="--ui-radius-base" data-suffix="px">
       <output>8px</output>
     </div>
     <div class="demo-playground__row">
       <label>shadow strength</label>
-      <input type="range" min="0" max="40" step="1" value="20" data-token="--ui-shadow-strength" data-suffix="%">
+      <input class="ui-slider ui-slider--sm" type="range" min="0" max="40" step="1" value="20" data-token="--ui-shadow-strength" data-suffix="%">
       <output>20%</output>
     </div>
     <div class="demo-playground__row">
       <label>border width</label>
-      <input type="range" min="0" max="4" step="0.5" value="1" data-token="--ui-border-width-base" data-suffix="px">
+      <input class="ui-slider ui-slider--sm" type="range" min="0" max="4" step="0.5" value="1" data-token="--ui-border-width-base" data-suffix="px">
       <output>1px</output>
     </div>
     <div class="ui-row ui-row--xs">
@@ -111,6 +120,18 @@ weight: 2
         <span class="ui-tag">{{ t('tag', 'Tag') }}</span>
       </div>
     </div>
+    <div class="ui-row ui-row--xs">
+      <input class="ui-slider" type="range" min="0" max="100" value="60">
+      <div class="ui-toggle">
+        <input class="ui-toggle__input" type="checkbox" checked>
+        <span class="ui-toggle__track"></span>
+        <span class="ui-toggle__thumb"></span>
+      </div>
+    </div>
+    <div class="ui-progress" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="--ui-progress-value: 65%">
+      <div class="ui-progress__bar"></div>
+    </div>
+    <code class="ui-code">{{ t('mono_preview', 'const theme = "custom"') }}</code>
     <div class="ui-column ui-column--xs">
       <div class="ui-alert ui-alert--info">{{ t('alert_info', 'Info alert') }}</div>
       <div class="ui-alert ui-alert--success">{{ t('alert_success', 'Success alert') }}</div>

package/src/config/tokens/_variables.scss

@@ -211,6 +211,7 @@ $color-text-inverse: $color-neutral-50;
 $color-bg: $color-neutral-50;
 $color-bg-subtle: $color-neutral-100;
 $color-bg-muted: $color-neutral-200;
+$color-bg-inset: $color-neutral-300;
 
 $color-border: $color-neutral-200;
 $color-border-strong: $color-neutral-300;

package/src/config/tokens/semantic-colors.scss

@@ -9,6 +9,7 @@
     --ui-color-bg: light-dark(var(--ui-color-neutral-50), var(--ui-color-neutral-900));
     --ui-color-bg-subtle: light-dark(var(--ui-color-neutral-100), var(--ui-color-neutral-800));
     --ui-color-bg-muted: light-dark(var(--ui-color-neutral-200), var(--ui-color-neutral-700));
+    --ui-color-bg-inset: light-dark(var(--ui-color-neutral-300), var(--ui-color-neutral-600));
 
     --ui-color-border: light-dark(var(--ui-color-neutral-200), var(--ui-color-neutral-700));
     --ui-color-border-strong: light-dark(var(--ui-color-neutral-300), var(--ui-color-neutral-600));

package/src/debug/index.scss

@@ -7,7 +7,7 @@
 }
 
 .debug-grid {
-  --debug-color: color-mix(in oklch, var(--ui-color-primary, #{t.$color-primary}) 15%, transparent);
+  --debug-color: color-mix(in oklch, var(--ui-color-primary, #{t.$color-primary}) 20%, transparent);
 }
 
 .debug-grid::after {
@@ -28,10 +28,10 @@
   background-position: 0 0;
 }
 
-// Stronger grid at row intervals
+// Stronger grid at row intervals — green to contrast with blue unit grid
 .debug-grid-rows {
-  --debug-color: color-mix(in oklch, var(--ui-color-primary, #{t.$color-primary}) 10%, transparent);
-  --debug-color-strong: color-mix(in oklch, var(--ui-color-primary, #{t.$color-primary}) 25%, transparent);
+  --debug-color: color-mix(in oklch, var(--ui-color-success, #{t.$color-success}) 15%, transparent);
+  --debug-color-strong: color-mix(in oklch, var(--ui-color-success, #{t.$color-success}) 30%, transparent);
 }
 
 .debug-grid-rows::after {
@@ -53,9 +53,9 @@
   background-position: 0 0;
 }
 
-// Baseline grid only (horizontal lines)
+// Baseline grid only (horizontal lines) — red to contrast with blue/green grids
 .debug-baseline {
-  --debug-color: color-mix(in oklch, var(--ui-color-danger, #{t.$color-danger}) 20%, transparent);
+  --debug-color: color-mix(in oklch, var(--ui-color-danger, #{t.$color-danger}) 25%, transparent);
 }
 
 .debug-baseline::after {