@teseor/css 1.16.0 → 2.0.1

package/package.json

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

package/src/base/docs.html

@@ -13,7 +13,7 @@ skipValidation: true
 .ui-root {
   font-family: var(--ui-font-sans);
   font-size: var(--ui-font-size-md);
-  line-height: var(--ui-leading-md);
+  line-height: var(--ui-line-height-md);
   color: var(--ui-color-text);
   background: var(--ui-color-bg);
 }

package/src/base/root.scss

@@ -4,7 +4,7 @@
   .root {
     font-family: var(--ui-font-sans, #{t.$font-sans});
     font-size: var(--ui-font-size-md, #{t.$font-size-md});
-    line-height: var(--ui-leading-md, calc(#{t.$unit} * 3));
+    line-height: var(--ui-line-height-md, calc(#{t.$unit} * 3));
     color: var(--ui-color-text, #{t.$color-text});
 
     background: var(--ui-color-bg, #{t.$color-bg});

package/src/base/typography/typography.scss

@@ -62,7 +62,7 @@
   // Inline elements - line-height: 0 prevents affecting parent rhythm
   strong,
   b {
-    font-weight: var(--ui-weight-bold);
+    font-weight: var(--ui-font-weight-bold);
     line-height: 0;
   }
 
@@ -127,22 +127,22 @@
   @media (width < 45.625rem) {
     h1 {
       font-size: var(--ui-font-size-2xl); // 28px
-      line-height: var(--ui-leading-2xl); // 32px
+      line-height: var(--ui-line-height-2xl); // 32px
     }
 
     h2 {
       font-size: var(--ui-font-size-xl); // 24px
-      line-height: var(--ui-leading-xl); // 32px
+      line-height: var(--ui-line-height-xl); // 32px
     }
 
     h3 {
       font-size: var(--ui-font-size-lg); // 20px
-      line-height: var(--ui-leading-sm); // 24px
+      line-height: var(--ui-line-height-sm); // 24px
     }
 
     h4 {
       font-size: 1.125rem; // 18px
-      line-height: var(--ui-leading-sm); // 24px
+      line-height: var(--ui-line-height-sm); // 24px
     }
   }
 
@@ -155,7 +155,7 @@
 
     h2 {
       font-size: var(--ui-font-size-4xl); // 40px
-      line-height: var(--ui-leading-4xl); // 48px
+      line-height: var(--ui-line-height-4xl); // 48px
     }
   }
 }

package/src/components/actions/button/api.json

@@ -57,7 +57,7 @@
     },
     {
       "name": "--ui-button-font-weight",
-      "default": "var(--ui-weight-medium)",
+      "default": "var(--ui-font-weight-medium)",
       "description": "Font weight"
     },
     {

package/src/components/actions/button/index.scss

@@ -27,7 +27,7 @@
     // @desc Font size
     --_font-size: var(--ui-button-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
     // @desc Font weight
-    --_font-weight: var(--ui-button-font-weight, var(--ui-weight-medium, #{t.$weight-medium}));
+    --_font-weight: var(--ui-button-font-weight, var(--ui-font-weight-medium, #{t.$font-weight-medium}));
     // @desc Corner radius
     --_radius: var(--ui-button-radius, var(--ui-radius-md, #{t.$radius-md}));
     --_bg: var(--_accent);

package/src/components/content/divider/index.scss

@@ -10,9 +10,9 @@
     // @desc Text color
     --_color: var(--ui-divider-color, var(--ui-color-border, #{t.$color-border}));
     // @desc Line size
-    --_line-size: var(--ui-divider-line-size, #{t.$border-width-sm});
+    --_line-size: var(--ui-divider-line-size, var(--ui-border-width-sm, #{t.$border-width-sm}));
     // @desc Overall height
-    --_height: var(--ui-divider-height, #{t.$unit});
+    --_height: var(--ui-divider-height, var(--ui-unit, #{t.$unit}));
     // @desc Gap between children
     --_gap: var(--ui-divider-gap, calc(#{t.$unit} * 2));
   }

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

@@ -6,7 +6,7 @@
 
 @layer components.tokens {
   .avatar {
-    --_weight-medium: var(--ui-weight-medium, #{t.$weight-medium});
+    --_weight-medium: var(--ui-font-weight-medium, #{t.$font-weight-medium});
     --_border-width-sm: var(--ui-border-width-sm, #{t.$border-width-sm});
     --_color-bg: var(--ui-color-bg, #{t.$color-bg});
     // @desc Overall size

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

@@ -33,7 +33,7 @@
     },
     {
       "name": "--ui-badge-font-weight",
-      "default": "var(--ui-weight-medium)",
+      "default": "var(--ui-font-weight-medium)",
       "description": "Font weight"
     },
     {

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

@@ -16,7 +16,7 @@
     // @desc Font size
     --_font-size: var(--ui-badge-font-size, var(--ui-font-size-xs, #{t.$font-size-xs}));
     // @desc Font weight
-    --_font-weight: var(--ui-badge-font-weight, var(--ui-weight-medium, #{t.$weight-medium}));
+    --_font-weight: var(--ui-badge-font-weight, var(--ui-font-weight-medium, #{t.$font-weight-medium}));
     // @desc Corner radius
     --_radius: var(--ui-badge-radius, var(--ui-radius-full, #{t.$radius-full}));
     --_bg: var(--_accent);

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

@@ -9,7 +9,7 @@
   .data-list {
     --_row-1: var(--ui-row-1, #{t.$row});
     --_font-size-sm: var(--ui-font-size-sm, #{t.$font-size-sm});
-    --_weight-medium: var(--ui-weight-medium, #{t.$weight-medium});
+    --_weight-medium: var(--ui-font-weight-medium, #{t.$font-weight-medium});
     --_border-width-sm: var(--ui-border-width-sm, #{t.$border-width-sm});
     --_color-border: var(--ui-color-border, #{t.$color-border});
     --_color-bg-subtle: var(--ui-color-bg-subtle, #{t.$color-bg-subtle});

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

@@ -24,12 +24,12 @@
     },
     {
       "name": "--ui-stat-value-font-weight",
-      "default": "var(--ui-weight-bold)",
+      "default": "var(--ui-font-weight-bold)",
       "description": "Value display font weight"
     },
     {
       "name": "--ui-stat-value-line-height",
-      "default": "var(--ui-leading-3xl)",
+      "default": "var(--ui-line-height-3xl)",
       "description": "Value display line height"
     },
     {
@@ -49,7 +49,7 @@
     },
     {
       "name": "--ui-stat-label-line-height",
-      "default": "var(--ui-leading-sm)",
+      "default": "var(--ui-line-height-sm)",
       "description": "Label line height"
     }
   ]

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

@@ -4,7 +4,7 @@
 
 @layer components.tokens {
   .stat {
-    --_tracking-display: var(--ui-tracking-display, #{t.$tracking-display});
+    --_tracking-display: var(--ui-letter-spacing-display, #{t.$letter-spacing-display});
     // @desc Gap between children
     --_gap: var(--ui-stat-gap, var(--ui-space-1, #{t.$space-1}));
   }
@@ -13,9 +13,9 @@
     // @desc Value display font size
     --_font-size: var(--ui-stat-value-font-size, var(--ui-font-size-3xl, #{t.$font-size-3xl}));
     // @desc Value display font weight
-    --_font-weight: var(--ui-stat-value-font-weight, var(--ui-weight-bold, #{t.$weight-bold}));
+    --_font-weight: var(--ui-stat-value-font-weight, var(--ui-font-weight-bold, #{t.$font-weight-bold}));
     // @desc Value display line height
-    --_line-height: var(--ui-stat-value-line-height, var(--ui-leading-3xl, #{t.$leading-3xl}));
+    --_line-height: var(--ui-stat-value-line-height, var(--ui-line-height-3xl, #{t.$line-height-3xl}));
     // @desc Value display text color
     --_color: var(--ui-stat-value-color, var(--ui-color-text, #{t.$color-text}));
   }
@@ -26,13 +26,13 @@
     // @desc Label text color
     --_color: var(--ui-stat-label-color, var(--ui-color-text-muted, #{t.$color-text-muted}));
     // @desc Label line height
-    --_line-height: var(--ui-stat-label-line-height, var(--ui-leading-sm, #{t.$leading-sm}));
+    --_line-height: var(--ui-stat-label-line-height, var(--ui-line-height-sm, #{t.$line-height-sm}));
   }
 
   // @modifier size
   .stat--sm .stat__value {
     --_font-size: var(--ui-font-size-xl, #{t.$font-size-xl});
-    --_line-height: var(--ui-leading-xl, #{t.$leading-xl});
+    --_line-height: var(--ui-line-height-xl, #{t.$line-height-xl});
   }
 }
 

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

@@ -7,7 +7,7 @@
   .table {
     --_border-width-sm: var(--ui-border-width-sm, #{t.$border-width-sm});
     --_unit: var(--ui-unit, #{t.$unit});
-    --_weight-medium: var(--ui-weight-medium, #{t.$weight-medium});
+    --_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

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

@@ -6,7 +6,7 @@
 
 @layer components.tokens {
   .tag {
-    --_weight-medium: var(--ui-weight-medium, #{t.$weight-medium});
+    --_weight-medium: var(--ui-font-weight-medium, #{t.$font-weight-medium});
     --_opacity-disabled: var(--ui-opacity-disabled, #{t.$opacity-disabled});
     --_opacity-loading: var(--ui-opacity-loading, #{t.$opacity-loading});
     // @desc Overall height

package/src/components/disclosure/accordion/index.scss

@@ -10,7 +10,7 @@
     // @desc Border color
     --_border-color: var(--ui-accordion-border-color, var(--ui-color-border, #{t.$color-border}));
     // @desc Border thickness
-    --_border-width: var(--ui-accordion-border-width, #{t.$border-width-sm});
+    --_border-width: var(--ui-accordion-border-width, var(--ui-border-width-sm, #{t.$border-width-sm}));
     // @desc Corner radius
     --_radius: var(--ui-accordion-radius, var(--ui-radius-md, calc(#{t.$unit} * 1)));
   }

package/src/components/disclosure/disclosure/index.scss

@@ -7,7 +7,7 @@
 
 @layer components.tokens {
   .disclosure {
-    --_weight-medium: var(--ui-weight-medium, #{t.$weight-medium});
+    --_weight-medium: var(--ui-font-weight-medium, #{t.$font-weight-medium});
     --_color-bg-subtle: var(--ui-color-bg-subtle, #{t.$color-bg-subtle});
     --_duration-fast: var(--ui-duration-fast, #{t.$duration-fast});
     --_ease-default: var(--ui-ease-default, ease);
@@ -15,7 +15,7 @@
     // @desc Border color
     --_border-color: var(--ui-disclosure-border-color, var(--ui-color-border, #{t.$color-border}));
     // @desc Border thickness
-    --_border-width: var(--ui-disclosure-border-width, #{t.$border-width-sm});
+    --_border-width: var(--ui-disclosure-border-width, var(--ui-border-width-sm, #{t.$border-width-sm}));
     // @desc Corner radius
     --_radius: var(--ui-disclosure-radius, var(--ui-radius-md, calc(#{t.$unit} * 1)));
     // @desc Trigger overall height

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

@@ -5,7 +5,7 @@
 
 @layer components.tokens {
   .alert {
-    --_weight-medium: var(--ui-weight-medium, #{t.$weight-medium});
+    --_weight-medium: var(--ui-font-weight-medium, #{t.$font-weight-medium});
     --_row-1: var(--ui-row-1, #{t.$row});
     --_font-size-sm: var(--ui-font-size-sm, #{t.$font-size-sm});
     --_color-text-muted: var(--ui-color-text-muted, #{t.$color-text-muted});

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

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.$overlay-bg-subtle}));
+    --_bg: var(--ui-skeleton-bg, var(--ui-color-bg-subtle, #{t.$color-bg-subtle}));
     // @desc Shimmer
     --_shimmer: var(--ui-skeleton-shimmer, #{t.$skeleton-shimmer});
     // @desc Corner radius

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

@@ -8,7 +8,7 @@
 
 @layer components.tokens {
   .toast-viewport {
-    --_z-toast: var(--ui-z-toast, #{t.$z-toast});
+    --_z-toast: var(--ui-z-index-toast, #{t.$z-index-toast});
     // @desc Viewport gap
     --_gap: var(--ui-toast-viewport-gap, calc(#{t.$unit} * 1));
     // @desc Viewport padding
@@ -19,7 +19,7 @@
 
   .toast {
     --_border-width-sm: var(--ui-border-width-sm, #{t.$border-width-sm});
-    --_weight-medium: var(--ui-weight-medium, #{t.$weight-medium});
+    --_weight-medium: var(--ui-font-weight-medium, #{t.$font-weight-medium});
     --_row-1: var(--ui-row-1, #{t.$row});
     --_font-size-sm: var(--ui-font-size-sm, #{t.$font-size-sm});
     --_color-text-muted: var(--ui-color-text-muted, #{t.$color-text-muted});

package/src/components/forms/checkbox-group/api.json

@@ -31,7 +31,7 @@
     },
     {
       "name": "--ui-checkbox-group-legend-weight",
-      "default": "var(--ui-weight-medium)",
+      "default": "var(--ui-font-weight-medium)",
       "description": "Legend weight"
     },
     {

package/src/components/forms/checkbox-group/index.scss

@@ -5,7 +5,7 @@
 
 @layer components.tokens {
   .checkbox-group {
-    --_leading-tight-sm: var(--ui-leading-tight-sm, var(--ui-row-1, #{t.$leading-tight-sm}));
+    --_leading-tight-sm: var(--ui-line-height-tight-sm, var(--ui-row-1, #{t.$line-height-tight-sm}));
     --_row-1: var(--ui-row-1, #{t.$row-1});
     --_opacity-disabled: var(--ui-opacity-disabled, #{t.$opacity-disabled});
     --_space-2: var(--ui-space-2, #{t.$space-2});
@@ -14,7 +14,7 @@
     // @desc Legend size
     --_legend-size: var(--ui-checkbox-group-legend-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
     // @desc Legend weight
-    --_legend-weight: var(--ui-checkbox-group-legend-weight, var(--ui-weight-medium, #{t.$weight-medium}));
+    --_legend-weight: var(--ui-checkbox-group-legend-weight, var(--ui-font-weight-medium, #{t.$font-weight-medium}));
     // @desc Legend color
     --_legend-color: var(--ui-checkbox-group-legend-color, var(--ui-color-text, #{t.$color-text}));
     // @desc Legend spacing

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

@@ -46,7 +46,7 @@
     },
     {
       "name": "--ui-fieldset-legend-weight",
-      "default": "var(--ui-weight-medium)",
+      "default": "var(--ui-font-weight-medium)",
       "description": "Legend weight"
     },
     {

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

@@ -7,7 +7,7 @@
 
 @layer components.tokens {
   .fieldset {
-    --_leading-tight-sm: var(--ui-leading-tight-sm, var(--ui-row-1, #{t.$leading-tight-sm}));
+    --_leading-tight-sm: var(--ui-line-height-tight-sm, var(--ui-row-1, #{t.$line-height-tight-sm}));
     --_space-half: var(--ui-space-half, #{t.$space-0});
     --_opacity-disabled: var(--ui-opacity-disabled, #{t.$opacity-disabled});
     // @desc Spacing
@@ -23,7 +23,7 @@
     // @desc Legend size
     --_legend-size: var(--ui-fieldset-legend-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
     // @desc Legend weight
-    --_legend-weight: var(--ui-fieldset-legend-weight, var(--ui-weight-medium, #{t.$weight-medium}));
+    --_legend-weight: var(--ui-fieldset-legend-weight, var(--ui-font-weight-medium, #{t.$font-weight-medium}));
     // @desc Legend color
     --_legend-color: var(--ui-fieldset-legend-color, var(--ui-color-text, #{t.$color-text}));
   }

package/src/components/forms/form-error/index.scss

@@ -7,7 +7,7 @@
 
 @layer components.tokens {
   .form-error {
-    --_leading-tight-sm: var(--ui-leading-tight-sm, var(--ui-row-1, #{t.$row-1}));
+    --_leading-tight-sm: var(--ui-line-height-tight-sm, var(--ui-row-1, #{t.$row-1}));
     // @desc Text color
     --_color: var(--ui-form-error-color, var(--ui-color-danger, #{t.$color-danger}));
     // @desc Overall size

package/src/components/forms/form-helper/index.scss

@@ -7,7 +7,7 @@
 
 @layer components.tokens {
   .form-helper {
-    --_leading-tight-sm: var(--ui-leading-tight-sm, var(--ui-row-1, #{t.$row-1}));
+    --_leading-tight-sm: var(--ui-line-height-tight-sm, var(--ui-row-1, #{t.$row-1}));
     // @desc Text color
     --_color: var(--ui-form-helper-color, var(--ui-color-text-muted, #{t.$color-text-muted}));
     // @desc Overall size

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

@@ -5,10 +5,10 @@
 
 @layer components.tokens {
   .label {
-    --_weight-medium: var(--ui-weight-medium, #{t.$weight-medium});
-    --_leading-tight-sm: var(--ui-leading-tight-sm, var(--ui-row-1, #{t.$row-1}));
+    --_weight-medium: var(--ui-font-weight-medium, #{t.$font-weight-medium});
+    --_leading-tight-sm: var(--ui-line-height-tight-sm, var(--ui-row-1, #{t.$row-1}));
     --_opacity-disabled: var(--ui-opacity-disabled, #{t.$opacity-disabled});
-    --_weight-normal: var(--ui-weight-normal, #{t.$weight-normal});
+    --_weight-normal: var(--ui-font-weight-normal, #{t.$font-weight-normal});
     --_color-text-muted: var(--ui-color-text-muted, #{t.$color-text-muted});
     // @desc Font size
     --_font-size: var(--ui-label-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));

package/src/components/forms/radio-group/api.json

@@ -31,7 +31,7 @@
     },
     {
       "name": "--ui-radio-group-legend-weight",
-      "default": "var(--ui-weight-medium)",
+      "default": "var(--ui-font-weight-medium)",
       "description": "Legend weight"
     },
     {

package/src/components/forms/radio-group/index.scss

@@ -5,7 +5,7 @@
 
 @layer components.tokens {
   .radio-group {
-    --_leading-tight-sm: var(--ui-leading-tight-sm, var(--ui-row-1, #{t.$leading-tight-sm}));
+    --_leading-tight-sm: var(--ui-line-height-tight-sm, var(--ui-row-1, #{t.$line-height-tight-sm}));
     --_row-1: var(--ui-row-1, #{t.$row-1});
     --_opacity-disabled: var(--ui-opacity-disabled, #{t.$opacity-disabled});
     --_space-2: var(--ui-space-2, #{t.$space-2});
@@ -14,7 +14,7 @@
     // @desc Legend size
     --_legend-size: var(--ui-radio-group-legend-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
     // @desc Legend weight
-    --_legend-weight: var(--ui-radio-group-legend-weight, var(--ui-weight-medium, #{t.$weight-medium}));
+    --_legend-weight: var(--ui-radio-group-legend-weight, var(--ui-font-weight-medium, #{t.$font-weight-medium}));
     // @desc Legend color
     --_legend-color: var(--ui-radio-group-legend-color, var(--ui-color-text, #{t.$color-text}));
     // @desc Legend spacing

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

@@ -12,9 +12,9 @@
     // @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-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.$overlay-bg-subtle}));
+    --_track-bg: var(--ui-slider-track-bg, var(--ui-color-bg-subtle, #{t.$color-bg-subtle}));
     // @desc Track fill
     --_track-fill: var(--ui-slider-track-fill, var(--ui-color-primary, #{t.$color-primary}));
     // @desc Track corner radius

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

@@ -14,7 +14,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.$overlay-bg-subtle}));
+    --_track-bg: var(--ui-toggle-track-bg, var(--ui-color-bg-subtle, #{t.$color-bg-subtle}));
     // @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/components/navigation/dropdown-menu/api.json

@@ -24,7 +24,7 @@
   "cssVars": [
     {
       "name": "--ui-dropdown-menu-z",
-      "default": "var(--ui-z-dropdown)",
+      "default": "var(--ui-z-index-dropdown)",
       "description": "Z-index stacking order"
     },
     {

package/src/components/navigation/dropdown-menu/index.scss

@@ -10,7 +10,7 @@
     --_duration-fast: var(--ui-duration-fast, #{t.$duration-fast});
     --_ease-default: var(--ui-ease-default, #{t.$ease-default});
     // @desc Z-index stacking order
-    --_z: var(--ui-dropdown-menu-z, #{t.$z-dropdown});
+    --_z: var(--ui-dropdown-menu-z, var(--ui-z-index-dropdown, #{t.$z-index-dropdown}));
     // @desc Panel offset from anchor
     --_panel-offset: var(--ui-dropdown-menu-panel-offset, var(--ui-space-1, #{t.$space-1}));
     // @desc Panel minimum width

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

@@ -9,7 +9,7 @@
   .menu {
     --_border-width-sm: var(--ui-border-width-sm, #{t.$border-width-sm});
     --_font-size-xs: var(--ui-font-size-xs, #{t.$font-size-xs});
-    --_weight-medium: var(--ui-weight-medium, #{t.$weight-medium});
+    --_weight-medium: var(--ui-font-weight-medium, #{t.$font-weight-medium});
     --_row-1: var(--ui-row-1, #{t.$row});
     --_color-text-muted: var(--ui-color-text-muted, #{t.$color-text-muted});
     --_font-size-sm: var(--ui-font-size-sm, #{t.$font-size-sm});
@@ -69,7 +69,7 @@
     font-size: var(--_font-size-xs);
     font-weight: var(--_weight-medium);
     line-height: var(--_row-1);
-    letter-spacing: #{t.$tracking-wide};
+    letter-spacing: #{t.$letter-spacing-wide};
     text-transform: uppercase;
     color: var(--_color-text-muted);
   }

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

@@ -46,7 +46,7 @@
     },
     {
       "name": "--ui-nav-item-font-weight",
-      "default": "var(--ui-weight-medium)",
+      "default": "var(--ui-font-weight-medium)",
       "description": "Item font weight"
     },
     {

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

@@ -20,7 +20,7 @@
     // @desc Item font size
     --_item-font-size: var(--ui-nav-item-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
     // @desc Item font weight
-    --_item-font-weight: var(--ui-nav-item-font-weight, var(--ui-weight-medium, #{t.$weight-medium}));
+    --_item-font-weight: var(--ui-nav-item-font-weight, var(--ui-font-weight-medium, #{t.$font-weight-medium}));
     // @desc Item text color
     --_item-color: var(--ui-nav-item-color, var(--ui-color-text-muted, #{t.$color-text-muted}));
     // @desc Item color hover

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

@@ -8,7 +8,7 @@
     --_space-1: var(--ui-space-1, #{t.$space-1});
     --_border-width-sm: var(--ui-border-width-sm, #{t.$border-width-sm});
     --_font-sans: var(--ui-font-sans, #{t.$font-sans});
-    --_weight-medium: var(--ui-weight-medium, #{t.$weight-medium});
+    --_weight-medium: var(--ui-font-weight-medium, #{t.$font-weight-medium});
     --_color-text-muted: var(--ui-color-text-muted, #{t.$color-text-muted});
     --_border-width-md: var(--ui-border-width-md, #{t.$border-width-md});
     --_duration-base: var(--ui-duration-base, #{t.$duration-base});

package/src/components/overlays/dialog/index.scss

@@ -8,7 +8,7 @@
 @layer components.tokens {
   .dialog {
     --_font-size-lg: var(--ui-font-size-lg, #{t.$font-size-lg});
-    --_weight-semibold: var(--ui-weight-semibold, #{t.$weight-semibold});
+    --_weight-semibold: var(--ui-font-weight-semibold, #{t.$font-weight-semibold});
     // @desc Header padding on all sides
     --_header-padding: var(--ui-dialog-header-padding, calc(#{t.$unit} * 2) calc(#{t.$unit} * 3));
     // @desc Body area padding on all sides

package/src/components/overlays/drawer/index.scss

@@ -8,7 +8,7 @@
 
 @layer components.tokens {
   .drawer {
-    --_z-drawer: var(--ui-z-drawer, #{t.$z-drawer});
+    --_z-drawer: var(--ui-z-index-drawer, #{t.$z-index-drawer});
     --_overlay-bg: var(--ui-overlay-bg, #{t.$overlay-bg});
     --_duration-normal: var(--ui-duration-normal, #{t.$duration-normal});
     --_ease-out: var(--ui-ease-out, ease-out);
@@ -16,7 +16,7 @@
     --_ease-in: var(--ui-ease-in, ease-in);
     --_border-width-sm: var(--ui-border-width-sm, #{t.$border-width-sm});
     --_font-size-lg: var(--ui-font-size-lg, #{t.$font-size-lg});
-    --_weight-semibold: var(--ui-weight-semibold, #{t.$weight-semibold});
+    --_weight-semibold: var(--ui-font-weight-semibold, #{t.$font-weight-semibold});
     --_row-1: var(--ui-row-1, #{t.$row});
     --_font-size-sm: var(--ui-font-size-sm, #{t.$font-size-sm});
     --_color-text-muted: var(--ui-color-text-muted, #{t.$color-text-muted});

package/src/components/overlays/modal/api.json

@@ -47,7 +47,7 @@
     },
     {
       "name": "--ui-modal-z",
-      "default": "var(--ui-z-modal)",
+      "default": "var(--ui-z-index-modal)",
       "description": "Z-index stacking order"
     },
     {

package/src/components/overlays/modal/index.scss

@@ -22,7 +22,7 @@
     // @desc Maximum height
     --_max-height: var(--ui-modal-max-height, calc(100vh - #{t.$unit} * 8));
     // @desc Z-index stacking order
-    --_z: var(--ui-modal-z, var(--ui-z-modal, #{t.$z-modal}));
+    --_z: var(--ui-modal-z, var(--ui-z-index-modal, #{t.$z-index-modal}));
   }
 
   // @modifier size

package/src/components/overlays/overlay/api.json

@@ -24,7 +24,7 @@
     },
     {
       "name": "--ui-overlay-z",
-      "default": "var(--ui-z-overlay)",
+      "default": "var(--ui-z-index-overlay)",
       "description": "Z-index stacking order"
     },
     {

package/src/components/overlays/overlay/index.scss

@@ -12,7 +12,7 @@
     // @desc Background color
     --_bg: var(--ui-overlay-bg, #{t.$overlay-bg});
     // @desc Z-index stacking order
-    --_z: var(--ui-overlay-z, var(--ui-z-overlay, #{t.$z-overlay}));
+    --_z: var(--ui-overlay-z, var(--ui-z-index-overlay, #{t.$z-index-overlay}));
   }
 
   // @modifier boolean light

package/src/components/overlays/popover/api.json

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

package/src/components/overlays/popover/index.scss

@@ -10,11 +10,11 @@
     --_row-1: var(--ui-row-1, #{t.$row});
     --_border-width-sm: var(--ui-border-width-sm, #{t.$border-width-sm});
     --_font-size-md: var(--ui-font-size-md, #{t.$font-size-md});
-    --_weight-semibold: var(--ui-weight-semibold, #{t.$weight-semibold});
+    --_weight-semibold: var(--ui-font-weight-semibold, #{t.$font-weight-semibold});
     --_duration-fast: var(--ui-duration-fast, #{t.$duration-fast});
     --_ease-default: var(--ui-ease-default, ease);
     // @desc Background color
-    --_bg: var(--ui-popover-bg, var(--ui-color-bg, white));
+    --_bg: var(--ui-popover-bg, var(--ui-color-bg, #{t.$color-bg}));
     // @desc Border color
     --_border-color: var(--ui-popover-border-color, var(--ui-color-border, #{t.$color-border}));
     // @desc Corner radius
@@ -26,7 +26,7 @@
     // @desc Maximum width
     --_max-width: var(--ui-popover-max-width, calc(#{t.$unit} * 40));
     // @desc Z-index stacking order
-    --_z: var(--ui-popover-z, var(--ui-z-popover, #{t.$z-popover}));
+    --_z: var(--ui-popover-z, var(--ui-z-index-popover, #{t.$z-index-popover}));
     // @desc Arrow size
     --_arrow-size: var(--ui-popover-arrow-size, calc(#{t.$unit}));
   }