@teseor/css 1.16.0 → 2.0.1

package/src/config/tokens/typography.scss

@@ -23,35 +23,35 @@
     // ==========================================================================
 
     // Tight line-heights for compact UI elements
-    --ui-leading-tight-xs: var(--ui-row-1);
-    --ui-leading-tight-sm: var(--ui-row-1);
-    --ui-leading-tight-md: calc(var(--ui-unit) * 3);
-    --ui-leading-tight-lg: calc(var(--ui-unit) * 3);
+    --ui-line-height-tight-xs: var(--ui-row-1);
+    --ui-line-height-tight-sm: var(--ui-row-1);
+    --ui-line-height-tight-md: calc(var(--ui-unit) * 3);
+    --ui-line-height-tight-lg: calc(var(--ui-unit) * 3);
 
     // Normal line-heights for readable body text
-    --ui-leading-xs: var(--ui-row-1);
-    --ui-leading-sm: calc(var(--ui-unit) * 3);
-    --ui-leading-md: calc(var(--ui-unit) * 3);
-    --ui-leading-lg: var(--ui-row-2);
-    --ui-leading-xl: var(--ui-row-2);
-    --ui-leading-2xl: var(--ui-row-2);
-    --ui-leading-3xl: calc(var(--ui-unit) * 5);
-    --ui-leading-4xl: calc(var(--ui-unit) * 6);
+    --ui-line-height-xs: var(--ui-row-1);
+    --ui-line-height-sm: calc(var(--ui-unit) * 3);
+    --ui-line-height-md: calc(var(--ui-unit) * 3);
+    --ui-line-height-lg: var(--ui-row-2);
+    --ui-line-height-xl: var(--ui-row-2);
+    --ui-line-height-2xl: var(--ui-row-2);
+    --ui-line-height-3xl: calc(var(--ui-unit) * 5);
+    --ui-line-height-4xl: calc(var(--ui-unit) * 6);
 
     // ==========================================================================
     // PRIMITIVE TOKENS - Font Weights
     // ==========================================================================
-    --ui-weight-normal: 400;
-    --ui-weight-medium: 500;
-    --ui-weight-semibold: 600;
-    --ui-weight-bold: 700;
+    --ui-font-weight-normal: 400;
+    --ui-font-weight-medium: 500;
+    --ui-font-weight-semibold: 600;
+    --ui-font-weight-bold: 700;
 
     // ==========================================================================
     // PRIMITIVE TOKENS - Letter Spacing
     // ==========================================================================
-    --ui-tracking-display: -0.02em;
-    --ui-tracking-body: 0;
-    --ui-tracking-caps: 0.08em;
+    --ui-letter-spacing-display: -0.02em;
+    --ui-letter-spacing-body: 0;
+    --ui-letter-spacing-caps: 0.08em;
 
     // ==========================================================================
     // SEMANTIC TOKENS - Text Roles
@@ -59,62 +59,62 @@
 
     // Heading 1
     --ui-heading-1-size: var(--ui-font-size-4xl);
-    --ui-heading-1-line-height: var(--ui-leading-4xl);
-    --ui-heading-1-weight: var(--ui-weight-bold);
-    --ui-heading-1-tracking: var(--ui-tracking-display);
+    --ui-heading-1-line-height: var(--ui-line-height-4xl);
+    --ui-heading-1-weight: var(--ui-font-weight-bold);
+    --ui-heading-1-tracking: var(--ui-letter-spacing-display);
 
     // Heading 2
     --ui-heading-2-size: var(--ui-font-size-3xl);
-    --ui-heading-2-line-height: var(--ui-leading-3xl);
-    --ui-heading-2-weight: var(--ui-weight-bold);
+    --ui-heading-2-line-height: var(--ui-line-height-3xl);
+    --ui-heading-2-weight: var(--ui-font-weight-bold);
     --ui-heading-2-tracking: -0.01em;
 
     // Heading 3
     --ui-heading-3-size: var(--ui-font-size-2xl);
-    --ui-heading-3-line-height: var(--ui-leading-2xl);
-    --ui-heading-3-weight: var(--ui-weight-semibold);
-    --ui-heading-3-tracking: var(--ui-tracking-body);
+    --ui-heading-3-line-height: var(--ui-line-height-2xl);
+    --ui-heading-3-weight: var(--ui-font-weight-semibold);
+    --ui-heading-3-tracking: var(--ui-letter-spacing-body);
 
     // Heading 4
     --ui-heading-4-size: var(--ui-font-size-xl);
-    --ui-heading-4-line-height: var(--ui-leading-xl);
-    --ui-heading-4-weight: var(--ui-weight-semibold);
-    --ui-heading-4-tracking: var(--ui-tracking-body);
+    --ui-heading-4-line-height: var(--ui-line-height-xl);
+    --ui-heading-4-weight: var(--ui-font-weight-semibold);
+    --ui-heading-4-tracking: var(--ui-letter-spacing-body);
 
     // Heading 5
     --ui-heading-5-size: var(--ui-font-size-lg);
-    --ui-heading-5-line-height: var(--ui-leading-sm);
-    --ui-heading-5-weight: var(--ui-weight-medium);
-    --ui-heading-5-tracking: var(--ui-tracking-body);
+    --ui-heading-5-line-height: var(--ui-line-height-sm);
+    --ui-heading-5-weight: var(--ui-font-weight-medium);
+    --ui-heading-5-tracking: var(--ui-letter-spacing-body);
 
     // Body
     --ui-body-size: var(--ui-font-size-md);
-    --ui-body-line-height: var(--ui-leading-md);
-    --ui-body-weight: var(--ui-weight-normal);
-    --ui-body-tracking: var(--ui-tracking-body);
+    --ui-body-line-height: var(--ui-line-height-md);
+    --ui-body-weight: var(--ui-font-weight-normal);
+    --ui-body-tracking: var(--ui-letter-spacing-body);
 
     // Body Small
     --ui-body-sm-size: var(--ui-font-size-sm);
-    --ui-body-sm-line-height: var(--ui-leading-sm);
-    --ui-body-sm-weight: var(--ui-weight-normal);
-    --ui-body-sm-tracking: var(--ui-tracking-body);
+    --ui-body-sm-line-height: var(--ui-line-height-sm);
+    --ui-body-sm-weight: var(--ui-font-weight-normal);
+    --ui-body-sm-tracking: var(--ui-letter-spacing-body);
 
     // Caption
     --ui-caption-size: var(--ui-font-size-xs);
-    --ui-caption-line-height: var(--ui-leading-xs);
-    --ui-caption-weight: var(--ui-weight-normal);
+    --ui-caption-line-height: var(--ui-line-height-xs);
+    --ui-caption-weight: var(--ui-font-weight-normal);
     --ui-caption-tracking: 0.01em;
 
     // Lead
     --ui-lead-size: var(--ui-font-size-lg);
-    --ui-lead-line-height: var(--ui-leading-lg);
-    --ui-lead-weight: var(--ui-weight-normal);
-    --ui-lead-tracking: var(--ui-tracking-body);
+    --ui-lead-line-height: var(--ui-line-height-lg);
+    --ui-lead-weight: var(--ui-font-weight-normal);
+    --ui-lead-tracking: var(--ui-letter-spacing-body);
 
     // Eyebrow
     --ui-eyebrow-size: var(--ui-font-size-xs);
-    --ui-eyebrow-line-height: var(--ui-leading-xs);
-    --ui-eyebrow-weight: var(--ui-weight-semibold);
-    --ui-eyebrow-tracking: var(--ui-tracking-caps);
+    --ui-eyebrow-line-height: var(--ui-line-height-xs);
+    --ui-eyebrow-weight: var(--ui-font-weight-semibold);
+    --ui-eyebrow-tracking: var(--ui-letter-spacing-caps);
   }
 }

package/src/config/tokens/zindex.scss

@@ -1,15 +1,15 @@
 @layer tokens {
   :root {
     // Z-index scale (gaps allow insertion)
-    --ui-z-base: 0;
-    --ui-z-sticky: 100;
-    --ui-z-dropdown: 200;
-    --ui-z-overlay: 300;
-    --ui-z-modal: 400;
-    --ui-z-popover: 500;
-    --ui-z-tooltip: 600;
-    --ui-z-toast: 700;
-    --ui-z-drawer: 800;
-    --ui-z-debug: 9999;
+    --ui-z-index-base: 0;
+    --ui-z-index-sticky: 100;
+    --ui-z-index-dropdown: 200;
+    --ui-z-index-overlay: 300;
+    --ui-z-index-modal: 400;
+    --ui-z-index-popover: 500;
+    --ui-z-index-tooltip: 600;
+    --ui-z-index-toast: 700;
+    --ui-z-index-drawer: 800;
+    --ui-z-index-debug: 9999;
   }
 }

package/src/debug/index.scss

@@ -15,7 +15,7 @@
   position: absolute;
   inset-block-start: 0;
   inset-inline-start: 0;
-  z-index: var(--ui-z-debug);
+  z-index: var(--ui-z-index-debug);
 
   block-size: 100%;
   inline-size: 100%;
@@ -39,7 +39,7 @@
   position: absolute;
   inset-block-start: 0;
   inset-inline-start: 0;
-  z-index: var(--ui-z-debug);
+  z-index: var(--ui-z-index-debug);
 
   block-size: 100%;
   inline-size: 100%;
@@ -63,7 +63,7 @@
   position: absolute;
   inset-block-start: 0;
   inset-inline-start: 0;
-  z-index: var(--ui-z-debug);
+  z-index: var(--ui-z-index-debug);
 
   block-size: 100%;
   inline-size: 100%;

package/src/layout/footer/api.json

@@ -44,7 +44,7 @@
     },
     {
       "name": "--ui-footer-z",
-      "default": "var(--ui-z-sticky)",
+      "default": "var(--ui-z-index-sticky)",
       "description": "Z-index stacking order"
     }
   ]

package/src/layout/footer/index.scss

@@ -16,7 +16,7 @@
     // @desc Border color
     --_border-color: var(--ui-footer-border-color, var(--ui-color-border));
     // @desc Z-index stacking order
-    --_z: var(--ui-footer-z, var(--ui-z-sticky));
+    --_z: var(--ui-footer-z, var(--ui-z-index-sticky));
 
     display: flex;
     align-items: center;

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

@@ -34,7 +34,7 @@
     },
     {
       "name": "--ui-nav-rail-z",
-      "default": "var(--ui-z-sticky)",
+      "default": "var(--ui-z-index-sticky)",
       "description": "Z-index stacking order"
     }
   ]

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

@@ -14,7 +14,7 @@
     // @desc Gap between children
     --_gap: var(--ui-nav-rail-gap, var(--ui-space-1));
     // @desc Z-index stacking order
-    --_z: var(--ui-nav-rail-z, var(--ui-z-sticky));
+    --_z: var(--ui-nav-rail-z, var(--ui-z-index-sticky));
 
     display: flex;
     flex-direction: column;

package/src/layout/page-header/index.scss

@@ -7,7 +7,7 @@
     --_space-1: var(--ui-space-1);
     --_space-2: var(--ui-space-2);
     --_border-width-sm: var(--ui-border-width-sm);
-    --_z-sticky: var(--ui-z-sticky);
+    --_z-sticky: var(--ui-z-index-sticky);
     --_color-bg: var(--ui-color-bg);
     // @desc Vertical padding
     --_padding-block: var(--ui-page-header-padding-block, var(--ui-space-3));

package/src/layout/sidebar/index.scss

@@ -3,7 +3,7 @@
 
 @layer primitives {
   .sidebar {
-    --_z-sticky: var(--ui-z-sticky);
+    --_z-sticky: var(--ui-z-index-sticky);
     --_unit: var(--ui-unit);
     --_color-bg-subtle: var(--ui-color-bg-subtle);
     --_border-width-sm: var(--ui-border-width-sm);

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

@@ -76,7 +76,7 @@
     },
     {
       "name": "--ui-sidebar-nav-group-label-weight",
-      "default": "var(--ui-weight-bold)",
+      "default": "var(--ui-font-weight-bold)",
       "description": "Group label weight"
     },
     {
@@ -126,7 +126,7 @@
     },
     {
       "name": "--ui-sidebar-nav-item-active-weight",
-      "default": "var(--ui-weight-medium)",
+      "default": "var(--ui-font-weight-medium)",
       "description": "Item active weight"
     },
     {

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

@@ -12,7 +12,7 @@
     --_space-1: var(--ui-space-1);
     --_space-half: var(--ui-space-half);
     --_size-xs: var(--ui-size-xs);
-    --_weight-medium: var(--ui-weight-medium);
+    --_weight-medium: var(--ui-font-weight-medium);
     --_color-text-muted: var(--ui-color-text-muted);
     --_duration-fast: var(--ui-duration-fast);
     --_easing-default: var(--ui-easing-default);
@@ -83,7 +83,7 @@
     // @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-weight-bold));
+    --_weight: var(--ui-sidebar-nav-group-label-weight, var(--ui-font-weight-bold));
 
     display: block;
 
@@ -92,7 +92,7 @@
 
     font-size: var(--_font-size);
     font-weight: var(--_weight);
-    letter-spacing: #{t.$tracking-wide};
+    letter-spacing: #{t.$letter-spacing-wide};
     text-transform: uppercase;
     color: var(--_color);
   }
@@ -191,7 +191,7 @@
     // @desc Item active color
     --_color: var(--ui-sidebar-nav-item-active-color, var(--ui-color-primary-hover));
     // @desc Item active weight
-    --_weight: var(--ui-sidebar-nav-item-active-weight, var(--ui-weight-medium));
+    --_weight: var(--ui-sidebar-nav-item-active-weight, var(--ui-font-weight-medium));
   }
 
   // Nested item indent

package/src/layout/topbar/api.json

@@ -44,7 +44,7 @@
     },
     {
       "name": "--ui-topbar-z",
-      "default": "var(--ui-z-sticky)",
+      "default": "var(--ui-z-index-sticky)",
       "description": "Z-index stacking order"
     }
   ]

package/src/layout/topbar/index.scss

@@ -15,7 +15,7 @@
     // @desc Border color
     --_border-color: var(--ui-topbar-border-color, var(--ui-color-border));
     // @desc Z-index stacking order
-    --_z: var(--ui-topbar-z, var(--ui-z-sticky));
+    --_z: var(--ui-topbar-z, var(--ui-z-index-sticky));
 
     display: flex;
     align-items: center;

package/src/utilities/scroll-animation/index.scss

@@ -12,7 +12,7 @@
       position: fixed;
       inset-block-start: 0;
       inset-inline-start: 0;
-      z-index: var(--ui-z-toast, #{t.$z-toast});
+      z-index: var(--ui-z-index-toast, #{t.$z-index-toast});
 
       block-size: var(--ui-scroll-progress-height, var(--ui-space-half, #{t.$space-0}));
       inline-size: 100%;

package/src/utilities/text/text.scss

@@ -25,19 +25,19 @@
   // FONT WEIGHT
   // ==========================================================================
   .font-normal {
-    font-weight: var(--ui-weight-normal);
+    font-weight: var(--ui-font-weight-normal);
   }
 
   .font-medium {
-    font-weight: var(--ui-weight-medium);
+    font-weight: var(--ui-font-weight-medium);
   }
 
   .font-semibold {
-    font-weight: var(--ui-weight-semibold);
+    font-weight: var(--ui-font-weight-semibold);
   }
 
   .font-bold {
-    font-weight: var(--ui-weight-bold);
+    font-weight: var(--ui-font-weight-bold);
   }
 
   // ==========================================================================
@@ -45,42 +45,42 @@
   // ==========================================================================
   .text-xs {
     font-size: var(--ui-font-size-xs);
-    line-height: var(--ui-leading-xs);
+    line-height: var(--ui-line-height-xs);
   }
 
   .text-sm {
     font-size: var(--ui-font-size-sm);
-    line-height: var(--ui-leading-sm);
+    line-height: var(--ui-line-height-sm);
   }
 
   .text-md {
     font-size: var(--ui-font-size-md);
-    line-height: var(--ui-leading-md);
+    line-height: var(--ui-line-height-md);
   }
 
   .text-lg {
     font-size: var(--ui-font-size-lg);
-    line-height: var(--ui-leading-lg);
+    line-height: var(--ui-line-height-lg);
   }
 
   .text-xl {
     font-size: var(--ui-font-size-xl);
-    line-height: var(--ui-leading-xl);
+    line-height: var(--ui-line-height-xl);
   }
 
   .text-2xl {
     font-size: var(--ui-font-size-2xl);
-    line-height: var(--ui-leading-2xl);
+    line-height: var(--ui-line-height-2xl);
   }
 
   .text-3xl {
     font-size: var(--ui-font-size-3xl);
-    line-height: var(--ui-leading-3xl);
+    line-height: var(--ui-line-height-3xl);
   }
 
   .text-4xl {
     font-size: var(--ui-font-size-4xl);
-    line-height: var(--ui-leading-4xl);
+    line-height: var(--ui-line-height-4xl);
   }
 
   // ==========================================================================
@@ -275,14 +275,14 @@
   // LETTER SPACING
   // ==========================================================================
   .tracking-display {
-    letter-spacing: var(--ui-tracking-display);
+    letter-spacing: var(--ui-letter-spacing-display);
   }
 
   .tracking-body {
-    letter-spacing: var(--ui-tracking-body);
+    letter-spacing: var(--ui-letter-spacing-body);
   }
 
   .tracking-caps {
-    letter-spacing: var(--ui-tracking-caps);
+    letter-spacing: var(--ui-letter-spacing-caps);
   }
 }