@teseor/css 2.3.2 → 2.4.0

package/package.json

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

package/src/components/navigation/tabs/api.json

@@ -63,6 +63,11 @@
       "default": "var(--ui-color-bg)",
       "description": "Tab bg active"
     },
+    {
+      "name": "--ui-tabs-tab-line-height",
+      "default": "var(--ui-line-height-none)",
+      "description": "Tab line height"
+    },
     {
       "name": "--ui-tabs-panel-padding",
       "default": "var(--ui-space-3)",

package/src/components/navigation/tabs/index.scss

@@ -30,6 +30,8 @@
     --_tab-bg: var(--ui-tabs-tab-bg, transparent);
     // @desc Tab bg active
     --_tab-bg-active: var(--ui-tabs-tab-bg-active, var(--ui-color-bg, #{t.$color-bg}));
+    // @desc Tab line height
+    --_tab-line-height: var(--ui-tabs-tab-line-height, var(--ui-line-height-none, #{t.$line-height-none}));
     // @desc Panel padding on all sides
     --_panel-padding: var(--ui-tabs-panel-padding, var(--ui-space-3, #{t.$space-3}));
   }
@@ -80,7 +82,7 @@
     font-family: var(--_font-sans);
     font-size: var(--_tab-font-size);
     font-weight: var(--_weight-medium);
-    line-height: 1;
+    line-height: var(--_tab-line-height);
     color: var(--_color-text-muted);
 
     background: var(--_tab-bg);

package/src/config/tokens/_variables.scss

@@ -103,8 +103,8 @@ $sizes: (
 // ==========================================================================
 
 // Font families (system stack, consumers override via CSS tokens)
-$font-sans: system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
-$font-mono: ui-monospace, sfmono-regular, "SF Mono", menlo, consolas, "Liberation Mono", monospace;
+$font-sans: system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Helvetica Neue", arial, sans-serif;
+$font-mono: ui-monospace, "SFMono-Regular", "SF Mono", menlo, consolas, "Liberation Mono", "Courier New", monospace;
 
 // Font sizes (derived from base, 1.2 modular scale)
 $font-size-base: 1rem; // 16px — core knob
@@ -117,6 +117,9 @@ $font-size-2xl: 1.75rem; // 28px
 $font-size-3xl: 2rem; // 32px
 $font-size-4xl: 2.5rem; // 40px
 
+// Unitless line height (no extra leading)
+$line-height-none: 1;
+
 // Tight line heights (compact UI elements)
 $line-height-tight-xs: $row;
 $line-height-tight-sm: $row;

package/src/config/tokens/core.scss

@@ -8,26 +8,26 @@
     --ui-unit: calc(8px * var(--ui-scale));
 
     // Base colors — shades auto-generated via color-mix in tokens.scale
-    --ui-color-primary: oklch(55% 0.22 250);
+    --ui-color-primary: oklch(54% 0.20 260);
     --ui-color-success: oklch(60% 0.18 145);
     --ui-color-warning: oklch(75% 0.18 70);
     --ui-color-danger: oklch(60% 0.22 25);
-    --ui-color-neutral: oklch(50% 0.02 250);
+    --ui-color-neutral: oklch(45% 0.015 260);
 
     // Font families — system stacks, override for brand fonts
-    --ui-font-sans: system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
-    --ui-font-mono: ui-monospace, sfmono-regular, "SF Mono", menlo, consolas, "Liberation Mono", monospace;
+    --ui-font-sans: system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Helvetica Neue", arial, sans-serif;
+    --ui-font-mono: ui-monospace, "SFMono-Regular", "SF Mono", menlo, consolas, "Liberation Mono", "Courier New", monospace;
 
     // Base font size — all font-size-* tokens derive from this via calc()
     --ui-font-size-base: calc(1rem * var(--ui-scale));
 
     // Base radius — sm/md/lg derive from this
-    --ui-radius-base: var(--ui-unit);
+    --ui-radius-base: 6px;
 
     // Base border width — sm/md/lg derive from this
     --ui-border-width-base: calc(var(--ui-unit) * 0.125);
 
     // Shadow strength — controls opacity of all shadow levels
-    --ui-shadow-strength: 20%;
+    --ui-shadow-strength: 12%;
   }
 }

package/src/config/tokens/typography.scss

@@ -17,6 +17,9 @@
     // Two modes: normal (for body text) and tight (for UI/forms)
     // ==========================================================================
 
+    // Unitless line height (no extra leading)
+    --ui-line-height-none: 1;
+
     // Tight line-heights for compact UI elements
     --ui-line-height-tight-xs: var(--ui-row-1);
     --ui-line-height-tight-sm: var(--ui-row-1);

package/src/layout/sidebar-nav/api.json

@@ -76,9 +76,19 @@
     },
     {
       "name": "--ui-sidebar-nav-group-label-weight",
-      "default": "var(--ui-font-weight-bold)",
+      "default": "var(--ui-font-weight-semibold)",
       "description": "Group label weight"
     },
+    {
+      "name": "--ui-sidebar-nav-group-label-transform",
+      "default": "none",
+      "description": "Group label text-transform"
+    },
+    {
+      "name": "--ui-sidebar-nav-group-label-letter-spacing",
+      "default": "normal",
+      "description": "Group label letter-spacing"
+    },
     {
       "name": "--ui-sidebar-nav-item-height",
       "default": "var(--ui-row-2)",
@@ -116,17 +126,17 @@
     },
     {
       "name": "--ui-sidebar-nav-item-active-bg",
-      "default": "var(--ui-color-primary-subtle)",
+      "default": "var(--ui-color-bg-muted)",
       "description": "Item active bg"
     },
     {
       "name": "--ui-sidebar-nav-item-active-color",
-      "default": "var(--ui-color-primary-hover)",
+      "default": "var(--ui-color-primary)",
       "description": "Item active color"
     },
     {
       "name": "--ui-sidebar-nav-item-active-weight",
-      "default": "var(--ui-font-weight-medium)",
+      "default": "normal",
       "description": "Item active weight"
     },
     {

package/src/layout/sidebar-nav/index.scss

@@ -83,7 +83,11 @@
     // @desc Group label color
     --_color: var(--ui-sidebar-nav-group-label-color, var(--ui-color-text-muted));
     // @desc Group label weight
-    --_weight: var(--ui-sidebar-nav-group-label-weight, var(--ui-font-weight-bold));
+    --_weight: var(--ui-sidebar-nav-group-label-weight, var(--ui-font-weight-semibold));
+    // @desc Group label text-transform
+    --_transform: var(--ui-sidebar-nav-group-label-transform, none);
+    // @desc Group label letter-spacing
+    --_letter-spacing: var(--ui-sidebar-nav-group-label-letter-spacing, normal);
 
     display: block;
 
@@ -92,8 +96,8 @@
 
     font-size: var(--_font-size);
     font-weight: var(--_weight);
-    letter-spacing: #{t.$letter-spacing-wide};
-    text-transform: uppercase;
+    letter-spacing: var(--_letter-spacing);
+    text-transform: var(--_transform);
     color: var(--_color);
   }
 
@@ -156,12 +160,14 @@
     min-block-size: var(--_height);
     padding-inline: var(--_padding-inline);
 
+    font-family: inherit;
     font-size: var(--_font-size);
     font-weight: var(--_weight, normal);
     text-decoration: none;
     color: var(--_color);
 
     background: var(--_bg);
+    border: none;
     border-radius: var(--_radius);
     cursor: pointer;
 
@@ -187,11 +193,11 @@
   // Active state
   .sidebar-nav__item--active {
     // @desc Item active bg
-    --_bg: var(--ui-sidebar-nav-item-active-bg, var(--ui-color-primary-subtle));
+    --_bg: var(--ui-sidebar-nav-item-active-bg, var(--ui-color-bg-muted));
     // @desc Item active color
-    --_color: var(--ui-sidebar-nav-item-active-color, var(--ui-color-primary-hover));
+    --_color: var(--ui-sidebar-nav-item-active-color, var(--ui-color-primary));
     // @desc Item active weight
-    --_weight: var(--ui-sidebar-nav-item-active-weight, var(--ui-font-weight-medium));
+    --_weight: var(--ui-sidebar-nav-item-active-weight, normal);
   }
 
   // Nested item indent

package/src/utilities/position/api.json

@@ -1,6 +1,25 @@
 {
   "name": "position",
   "type": "utility",
-  "utilities": ["relative", "absolute", "overflow-hidden", "inset-0"],
+  "utilities": [
+    "relative",
+    "absolute",
+    "fixed",
+    "sticky",
+    "inset-0",
+    "top-0",
+    "bottom-0",
+    "start-0",
+    "end-0",
+    "top-2",
+    "bottom-2",
+    "start-2",
+    "end-2",
+    "z-10",
+    "z-20",
+    "z-50",
+    "overflow-hidden",
+    "overflow-auto"
+  ],
   "cssVars": []
 }

package/src/utilities/position/docs.html

@@ -9,6 +9,13 @@ description: Position, overflow, and inset utilities for controlling element pla
   <div class="ui-absolute ui-top-0 ui-end-0 ui-bg-subtle ui-p-1">{{ t('absolute_top_end', 'Absolute top-end') }}</div>
   <div class="ui-absolute ui-bottom-0 ui-start-0 ui-bg-subtle ui-p-1">{{ t('absolute_bottom_start', 'Absolute bottom-start') }}</div>
 </div>
+<div class="ui-sticky ui-top-0 ui-bg-muted ui-p-2">
+  <span class="ui-text-sm">{{ t('sticky_element', 'Sticky element (sticks to top on scroll)') }}</span>
+</div>
+<div class="ui-relative ui-overflow-hidden ui-bg-muted" style="block-size: var(--ui-row-4); transform: translate(0)">
+  <div class="ui-fixed ui-top-0 ui-start-0 ui-bg-subtle ui-p-1">{{ t('fixed_in_container', 'Fixed (contained by transform parent)') }}</div>
+</div>
+<p class="ui-text-sm ui-text-muted">{{ t('position_classes', 'Also available: ui-static') }}</p>
 
 <!-- @inset | row -->
 <!-- Pin element to all edges or specific sides. -->
@@ -19,6 +26,24 @@ description: Position, overflow, and inset utilities for controlling element pla
   <div class="ui-absolute ui-inset-block-0 ui-start-0 ui-bg-subtle ui-p-2">{{ t('inset_block_0_start_0', 'inset-block-0 + start-0') }}</div>
 </div>
 
+<!-- @inset-scale | row -->
+<!-- Offset from edges using space tokens (1-4). -->
+<div class="ui-relative ui-bg-muted" style="block-size: var(--ui-row-4)">
+  <div class="ui-absolute ui-top-1 ui-end-1 ui-bg-subtle ui-p-1">{{ t('top_1_end_1', 'top-1 end-1') }}</div>
+  <div class="ui-absolute ui-bottom-2 ui-start-2 ui-bg-subtle ui-p-1">{{ t('bottom_2_start_2', 'bottom-2 start-2') }}</div>
+</div>
+<div class="ui-relative ui-bg-muted" style="block-size: var(--ui-row-4)">
+  <div class="ui-absolute ui-top-0 ui-end-2 ui-bg-subtle ui-p-1">{{ t('top_0_end_2', 'top-0 end-2') }}</div>
+</div>
+
+<!-- @z-index | row -->
+<!-- Control stacking order. Scale: 0, 10, 20, 30, 40, 50. -->
+<div class="ui-relative ui-bg-muted" style="block-size: var(--ui-row-4)">
+  <div class="ui-absolute ui-top-1 ui-start-1 ui-z-10 ui-bg-subtle ui-p-1">{{ t('z_10', 'z-10') }}</div>
+  <div class="ui-absolute ui-top-2 ui-start-2 ui-z-20 ui-bg ui-p-1 ui-rounded">{{ t('z_20_on_top', 'z-20 on top') }}</div>
+  <div class="ui-absolute ui-top-3 ui-start-3 ui-z-50 ui-bg-subtle ui-p-1 ui-rounded">{{ t('z_50_highest', 'z-50 highest') }}</div>
+</div>
+
 <!-- @overflow | row -->
 <!-- Control overflow behavior. -->
 <div class="ui-overflow-hidden ui-bg-muted ui-p-2" style="block-size: var(--ui-row-3)">

package/src/utilities/position/position.scss

@@ -35,20 +35,51 @@
     inset-inline: 0;
   }
 
-  .top-0 {
-    inset-block-start: 0;
+  @each $n in (0, 1, 2, 3, 4) {
+    .top-#{$n} {
+      inset-block-start: if($n == 0, 0, var(--ui-space-#{$n}));
+    }
+
+    .bottom-#{$n} {
+      inset-block-end: if($n == 0, 0, var(--ui-space-#{$n}));
+    }
+
+    .start-#{$n} {
+      inset-inline-start: if($n == 0, 0, var(--ui-space-#{$n}));
+    }
+
+    .end-#{$n} {
+      inset-inline-end: if($n == 0, 0, var(--ui-space-#{$n}));
+    }
+  }
+
+  // Z-index
+  .z-0 {
+    z-index: 0;
+  }
+
+  .z-10 {
+    z-index: 10;
+  }
+
+  .z-20 {
+    z-index: 20;
+  }
+
+  .z-30 {
+    z-index: 30;
   }
 
-  .bottom-0 {
-    inset-block-end: 0;
+  .z-40 {
+    z-index: 40;
   }
 
-  .start-0 {
-    inset-inline-start: 0;
+  .z-50 {
+    z-index: 50;
   }
 
-  .end-0 {
-    inset-inline-end: 0;
+  .z-auto {
+    z-index: auto;
   }
 
   // Overflow