@teseor/css 1.15.7 → 2.0.0

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/docs.html

@@ -4,8 +4,8 @@ description: Structured modal with header, body, and footer sections. Use with m
 ---
 
 <!-- @default -->
-<div style="position: relative; height: 240px; background: var(--ui-color-bg-subtle);">
-  <div class="ui-modal ui-modal--visible" style="position: absolute;">
+<div class="demo-area" style="--demo-h: 240px">
+  <div class="ui-modal ui-modal--visible ui-absolute">
     <div class="ui-modal__content ui-dialog" style="max-height: 200px;">
       <header class="ui-dialog__header">
         <h2 class="ui-dialog__title">{{ t('dialog_title', 'Dialog Title') }}</h2>
@@ -23,8 +23,8 @@ description: Structured modal with header, body, and footer sections. Use with m
 </div>
 
 <!-- @borderless -->
-<div style="position: relative; height: 200px; background: var(--ui-color-bg-subtle);">
-  <div class="ui-modal ui-modal--visible" style="position: absolute;">
+<div class="demo-area">
+  <div class="ui-modal ui-modal--visible ui-absolute">
     <div class="ui-modal__content ui-dialog ui-dialog--borderless" style="max-height: 180px;">
       <header class="ui-dialog__header">
         <h2 class="ui-dialog__title">{{ t('simple_dialog', 'Simple Dialog') }}</h2>
@@ -40,8 +40,8 @@ description: Structured modal with header, body, and footer sections. Use with m
 </div>
 
 <!-- @confirmation_dialog -->
-<div style="position: relative; height: 200px; background: var(--ui-color-bg-subtle);">
-  <div class="ui-modal ui-modal--sm ui-modal--visible" style="position: absolute;">
+<div class="demo-area">
+  <div class="ui-modal ui-modal--sm ui-modal--visible ui-absolute">
     <div class="ui-modal__content ui-dialog">
       <header class="ui-dialog__header">
         <h2 class="ui-dialog__title">{{ t('delete_item', 'Delete Item?') }}</h2>

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/docs.html

@@ -4,9 +4,9 @@ title: Drawer
 
 <!-- @default_end -->
 <!-- Slides in from the end (right in LTR) -->
-<div style="position:relative;height:300px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)">
-  <div class="ui-drawer-overlay" style="position:absolute"></div>
-  <div class="ui-drawer ui-drawer--end" style="position:absolute" data-state="open">
+<div class="demo-container demo-container--overflow" style="--demo-h: 300px">
+  <div class="ui-drawer-overlay ui-absolute"></div>
+  <div class="ui-drawer ui-drawer--end ui-absolute" data-state="open">
     <div class="ui-drawer__header">
       <div>
         <h2 class="ui-drawer__title">{{ t('drawer_title', 'Drawer Title') }}</h2>
@@ -25,8 +25,8 @@ title: Drawer
 </div>
 
 <!-- @positions | column -->
-<div style="position:relative;height:200px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)">
-  <div class="ui-drawer ui-drawer--start ui-drawer--sm" style="position:absolute" data-state="open">
+<div class="demo-container demo-container--overflow">
+  <div class="ui-drawer ui-drawer--start ui-drawer--sm ui-absolute" data-state="open">
     <div class="ui-drawer__header">
       <h2 class="ui-drawer__title">{{ t('start', 'Start') }}</h2>
     </div>
@@ -35,8 +35,8 @@ title: Drawer
     </div>
   </div>
 </div>
-<div style="position:relative;height:200px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)">
-  <div class="ui-drawer ui-drawer--top" style="position:absolute" data-state="open">
+<div class="demo-container demo-container--overflow">
+  <div class="ui-drawer ui-drawer--top ui-absolute" data-state="open">
     <div class="ui-drawer__header">
       <h2 class="ui-drawer__title">{{ t('top', 'Top') }}</h2>
     </div>
@@ -45,8 +45,8 @@ title: Drawer
     </div>
   </div>
 </div>
-<div style="position:relative;height:200px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)">
-  <div class="ui-drawer ui-drawer--bottom" style="position:absolute" data-state="open">
+<div class="demo-container demo-container--overflow">
+  <div class="ui-drawer ui-drawer--bottom ui-absolute" data-state="open">
     <div class="ui-drawer__header">
       <h2 class="ui-drawer__title">{{ t('bottom', 'Bottom') }}</h2>
     </div>
@@ -57,29 +57,29 @@ title: Drawer
 </div>
 
 <!-- @sizes | column -->
-<div style="position:relative;height:150px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)">
-  <div class="ui-drawer ui-drawer--end ui-drawer--sm" style="position:absolute" data-state="open">
+<div class="demo-container demo-container--overflow" style="--demo-h: 150px">
+  <div class="ui-drawer ui-drawer--end ui-drawer--sm ui-absolute" data-state="open">
     <div class="ui-drawer__body">
       <p>{{ t('small_drawer', 'Small drawer') }}</p>
     </div>
   </div>
 </div>
-<div style="position:relative;height:150px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)">
-  <div class="ui-drawer ui-drawer--end" style="position:absolute" data-state="open">
+<div class="demo-container demo-container--overflow" style="--demo-h: 150px">
+  <div class="ui-drawer ui-drawer--end ui-absolute" data-state="open">
     <div class="ui-drawer__body">
       <p>{{ t('default_drawer', 'Default drawer') }}</p>
     </div>
   </div>
 </div>
-<div style="position:relative;height:150px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)">
-  <div class="ui-drawer ui-drawer--end ui-drawer--lg" style="position:absolute" data-state="open">
+<div class="demo-container demo-container--overflow" style="--demo-h: 150px">
+  <div class="ui-drawer ui-drawer--end ui-drawer--lg ui-absolute" data-state="open">
     <div class="ui-drawer__body">
       <p>{{ t('large_drawer', 'Large drawer') }}</p>
     </div>
   </div>
 </div>
-<div style="position:relative;height:150px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)">
-  <div class="ui-drawer ui-drawer--end ui-drawer--full" style="position:absolute" data-state="open">
+<div class="demo-container demo-container--overflow" style="--demo-h: 150px">
+  <div class="ui-drawer ui-drawer--end ui-drawer--full ui-absolute" data-state="open">
     <div class="ui-drawer__body">
       <p>{{ t('full_size_drawer', 'Full-size drawer') }}</p>
     </div>

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/docs.html

@@ -4,8 +4,8 @@ description: Container for modal dialogs. Use with overlay for backdrop effect.
 ---
 
 <!-- @default -->
-<div style="position: relative; height: 200px; background: var(--ui-color-bg-subtle);">
-  <div class="ui-modal ui-modal--visible" style="position: absolute;">
+<div class="demo-area">
+  <div class="ui-modal ui-modal--visible ui-absolute">
     <div class="ui-modal__content">
       <p>{{ t('modal_content_goes_here', 'Modal content goes here') }}</p>
     </div>
@@ -13,8 +13,8 @@ description: Container for modal dialogs. Use with overlay for backdrop effect.
 </div>
 
 <!-- @sizes -->
-<div style="position: relative; height: 120px; background: var(--ui-color-bg-subtle);">
-  <div class="ui-modal ui-modal--sm ui-modal--visible" style="position: absolute;">
+<div class="demo-area" style="--demo-h: 120px">
+  <div class="ui-modal ui-modal--sm ui-modal--visible ui-absolute">
     <div class="ui-modal__content">
       <p>{{ t('small_modal', 'Small modal') }}</p>
     </div>
@@ -22,8 +22,8 @@ description: Container for modal dialogs. Use with overlay for backdrop effect.
 </div>
 
 <!-- @large -->
-<div style="position: relative; height: 120px; background: var(--ui-color-bg-subtle);">
-  <div class="ui-modal ui-modal--lg ui-modal--visible" style="position: absolute;">
+<div class="demo-area" style="--demo-h: 120px">
+  <div class="ui-modal ui-modal--lg ui-modal--visible ui-absolute">
     <div class="ui-modal__content">
       <p>{{ t('large_modal', 'Large modal') }}</p>
     </div>
@@ -31,8 +31,8 @@ description: Container for modal dialogs. Use with overlay for backdrop effect.
 </div>
 
 <!-- @full -->
-<div style="position: relative; height: 120px; background: var(--ui-color-bg-subtle);">
-  <div class="ui-modal ui-modal--full ui-modal--visible" style="position: absolute;">
+<div class="demo-area" style="--demo-h: 120px">
+  <div class="ui-modal ui-modal--full ui-modal--visible ui-absolute">
     <div class="ui-modal__content">
       <p>{{ t('full_screen_modal', 'Full-screen modal') }}</p>
     </div>
@@ -41,8 +41,8 @@ description: Container for modal dialogs. Use with overlay for backdrop effect.
 
 <!-- @entering_animation -->
 <!-- Apply entering modifier for open transition. -->
-<div style="position: relative; height: 120px; background: var(--ui-color-bg-subtle);">
-  <div class="ui-modal ui-modal--visible ui-modal--entering" style="position: absolute;">
+<div class="demo-area" style="--demo-h: 120px">
+  <div class="ui-modal ui-modal--visible ui-modal--entering ui-absolute">
     <div class="ui-modal__content">
       <p>{{ t('entering_modal', 'Entering modal') }}</p>
     </div>
@@ -50,8 +50,8 @@ description: Container for modal dialogs. Use with overlay for backdrop effect.
 </div>
 
 <!-- @with_scrollable_content -->
-<div style="position: relative; height: 200px; background: var(--ui-color-bg-subtle);">
-  <div class="ui-modal ui-modal--visible" style="position: absolute;">
+<div class="demo-area">
+  <div class="ui-modal ui-modal--visible ui-absolute">
     <div class="ui-modal__content" style="max-height: 150px;">
       <div class="ui-modal__body">
         <p>{{ t('line_1', 'Line 1') }}</p>

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/docs.html

@@ -4,24 +4,24 @@ description: Full viewport backdrop for modals, dialogs, and drawers. Controls v
 ---
 
 <!-- @default -->
-<div style="position: relative; height: 120px; background: var(--ui-color-bg-subtle);">
-  <div class="ui-overlay" style="position: absolute;"></div>
+<div class="demo-area" style="--demo-h: 120px">
+  <div class="ui-overlay ui-absolute"></div>
   <p style="position: relative; padding: var(--ui-space-2);">{{ t('content_behind_overlay', 'Content behind overlay') }}</p>
 </div>
 
 <!-- @light_variant -->
-<div style="position: relative; height: 120px; background: var(--ui-color-text);">
-  <div class="ui-overlay ui-overlay--light" style="position: absolute;"></div>
+<div class="demo-area" style="--demo-h: 120px; background: var(--ui-color-text)">
+  <div class="ui-overlay ui-overlay--light ui-absolute"></div>
   <p style="position: relative; padding: var(--ui-space-2); color: white;">{{ t('dark_content_behind_light_overlay', 'Dark content behind light overlay') }}</p>
 </div>
 
 <!-- @blur_variant -->
-<div style="position: relative; height: 120px; background: linear-gradient(45deg, var(--ui-color-primary), var(--ui-color-success));">
-  <div class="ui-overlay ui-overlay--blur" style="position: absolute;"></div>
+<div class="demo-area" style="--demo-h: 120px; background: linear-gradient(45deg, var(--ui-color-primary), var(--ui-color-success))">
+  <div class="ui-overlay ui-overlay--blur ui-absolute"></div>
   <p style="position: relative; padding: var(--ui-space-2); color: white;">{{ t('blurred_backdrop', 'Blurred backdrop') }}</p>
 </div>
 
 <!-- @with_animation -->
-<div style="position: relative; height: 120px; background: var(--ui-color-bg-subtle);">
-  <div class="ui-overlay ui-overlay--animate ui-overlay--visible" style="position: absolute;"></div>
+<div class="demo-area" style="--demo-h: 120px">
+  <div class="ui-overlay ui-overlay--animate ui-overlay--visible ui-absolute"></div>
 </div>

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/docs.html

@@ -4,12 +4,12 @@ description: Floating panel for additional content. Larger than tooltip, can con
 ---
 
 <!-- @default -->
-<div class="ui-popover" style="position: relative;">
+<div class="ui-popover ui-relative">
   <p>{{ t('popover_content', 'Popover content goes here. Can contain multiple paragraphs and other elements.') }}</p>
 </div>
 
 <!-- @with_header -->
-<div class="ui-popover" style="position: relative;">
+<div class="ui-popover ui-relative">
   <header class="ui-popover__header">
     <h3 class="ui-popover__title">{{ t('popover_title', 'Popover Title') }}</h3>
   </header>
@@ -18,21 +18,21 @@ description: Floating panel for additional content. Larger than tooltip, can con
 
 <!-- @positions -->
 <div style="padding: var(--ui-space-4);">
-  <div class="ui-popover ui-popover--top" style="position: relative;">
+  <div class="ui-popover ui-popover--top ui-relative">
     <p>{{ t('top_arrow_down', 'Top (arrow down)') }}</p>
   </div>
 </div>
 <div style="padding: var(--ui-space-4);">
-  <div class="ui-popover ui-popover--bottom" style="position: relative;">
+  <div class="ui-popover ui-popover--bottom ui-relative">
     <p>{{ t('bottom_arrow_up', 'Bottom (arrow up)') }}</p>
   </div>
 </div>
 
 <!-- @visibility -->
 <!-- Control popover visibility and animation. -->
-<div class="ui-popover ui-popover--visible ui-popover--animate" style="position: relative;">
+<div class="ui-popover ui-popover--visible ui-popover--animate ui-relative">
   <p>{{ t('visible_and_animated', 'Visible and animated') }}</p>
 </div>
-<div class="ui-popover ui-popover--hidden" style="position: relative;">
+<div class="ui-popover ui-popover--hidden ui-relative">
   <p>{{ t('hidden_popover', 'Hidden popover') }}</p>
 </div>

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

@@ -10,7 +10,7 @@
     --_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
@@ -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}));
   }

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

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

package/src/components/overlays/tooltip/docs.html

@@ -4,23 +4,23 @@ description: Small informational popup for additional context. Position via JS.
 ---
 
 <!-- @positions -->
-<div style="display: flex; gap: var(--ui-space-4); padding: var(--ui-space-4); flex-wrap: wrap;">
-  <div style="position: relative;">
-    <span class="ui-tooltip ui-tooltip--top" style="position: relative;">{{ t('top', 'Top') }}</span>
+<div class="ui-flex ui-gap-4 ui-p-4 ui-flex-wrap">
+  <div class="ui-relative">
+    <span class="ui-tooltip ui-tooltip--top ui-relative">{{ t('top', 'Top') }}</span>
   </div>
-  <div style="position: relative;">
-    <span class="ui-tooltip ui-tooltip--bottom" style="position: relative;">{{ t('bottom', 'Bottom') }}</span>
+  <div class="ui-relative">
+    <span class="ui-tooltip ui-tooltip--bottom ui-relative">{{ t('bottom', 'Bottom') }}</span>
   </div>
-  <div style="position: relative;">
-    <span class="ui-tooltip ui-tooltip--start" style="position: relative;">{{ t('start', 'Start') }}</span>
+  <div class="ui-relative">
+    <span class="ui-tooltip ui-tooltip--start ui-relative">{{ t('start', 'Start') }}</span>
   </div>
-  <div style="position: relative;">
-    <span class="ui-tooltip ui-tooltip--end" style="position: relative;">{{ t('end', 'End') }}</span>
+  <div class="ui-relative">
+    <span class="ui-tooltip ui-tooltip--end ui-relative">{{ t('end', 'End') }}</span>
   </div>
 </div>
 
 <!-- @with_animation -->
-<span class="ui-tooltip ui-tooltip--top ui-tooltip--animate ui-tooltip--visible" style="position: relative;">{{ t('animated_tooltip', 'Animated tooltip') }}</span>
+<span class="ui-tooltip ui-tooltip--top ui-tooltip--animate ui-tooltip--visible ui-relative">{{ t('animated_tooltip', 'Animated tooltip') }}</span>
 
 <!-- @anchor_positioned -->
 <!-- Browser-native positioning via CSS Anchor Positioning. No JS needed for placement. Wrapped in @supports — falls back to manual positioning in unsupported browsers. -->

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

@@ -22,7 +22,7 @@
     // @desc Font size
     --_font-size: var(--ui-tooltip-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
     // @desc Z-index stacking order
-    --_z: var(--ui-tooltip-z, var(--ui-z-tooltip, #{t.$z-tooltip}));
+    --_z: var(--ui-tooltip-z, var(--ui-z-index-tooltip, #{t.$z-index-tooltip}));
     // @desc Arrow size
     --_arrow-size: var(--ui-tooltip-arrow-size, calc(#{t.$unit} / 2));
   }

package/src/components/typography/blockquote/api.json

@@ -38,7 +38,7 @@
     },
     {
       "name": "--ui-blockquote-line-height",
-      "default": "var(--ui-leading-lg)",
+      "default": "var(--ui-line-height-lg)",
       "description": "Line height"
     }
   ]

package/src/components/typography/blockquote/index.scss

@@ -6,7 +6,7 @@
   .blockquote {
     --_space-1: var(--ui-space-1, #{t.$space-1});
     --_font-size-sm: var(--ui-font-size-sm, #{t.$font-size-sm});
-    --_leading-sm: var(--ui-leading-sm, #{t.$leading-sm});
+    --_leading-sm: var(--ui-line-height-sm, #{t.$line-height-sm});
     --_color-text-muted: var(--ui-color-text-muted, #{t.$color-text-muted});
     // @desc Border color
     --_border-color: var(--ui-blockquote-border-color, var(--ui-color-border-strong, #{t.$color-border-strong}));
@@ -19,7 +19,7 @@
     // @desc Font size
     --_font-size: var(--ui-blockquote-font-size, var(--ui-font-size-lg, #{t.$font-size-lg}));
     // @desc Line height
-    --_line-height: var(--ui-blockquote-line-height, var(--ui-leading-lg, #{t.$leading-lg}));
+    --_line-height: var(--ui-blockquote-line-height, var(--ui-line-height-lg, #{t.$line-height-lg}));
   }
 
   // @modifier variant

package/src/components/typography/code/index.scss

@@ -8,7 +8,7 @@
   // Inline code
   .code {
     --_font-mono: var(--ui-font-mono, #{t.$font-mono});
-    --_leading-tight-sm: var(--ui-leading-tight-sm, #{t.$leading-tight-sm});
+    --_leading-tight-sm: var(--ui-line-height-tight-sm, #{t.$line-height-tight-sm});
     --_border-width-sm: var(--ui-border-width-sm, #{t.$border-width-sm});
     // @desc Font size
     --_font-size: var(--ui-code-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));

package/src/components/typography/code-block/api.json

@@ -48,7 +48,7 @@
     },
     {
       "name": "--ui-code-block-line-height",
-      "default": "var(--ui-leading-tight-sm)",
+      "default": "var(--ui-line-height-tight-sm)",
       "description": "Line height"
     },
     {

package/src/components/typography/code-block/index.scss

@@ -21,7 +21,7 @@
     // @desc Font size
     --_font-size: var(--ui-code-block-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
     // @desc Line height
-    --_line-height: var(--ui-code-block-line-height, var(--ui-leading-tight-sm, #{t.$leading-tight-sm}));
+    --_line-height: var(--ui-code-block-line-height, var(--ui-line-height-tight-sm, #{t.$line-height-tight-sm}));
     // @desc Corner radius
     --_radius: var(--ui-code-block-radius, var(--ui-radius-md, #{t.$radius-md}));
   }

package/src/components/typography/heading/api.json

@@ -15,12 +15,12 @@
     },
     {
       "name": "--ui-heading-line-height",
-      "default": "var(--ui-leading-xl)",
+      "default": "var(--ui-line-height-xl)",
       "description": "Line height"
     },
     {
       "name": "--ui-heading-weight",
-      "default": "var(--ui-weight-bold)",
+      "default": "var(--ui-font-weight-bold)",
       "description": "Weight"
     },
     {
@@ -35,7 +35,7 @@
     },
     {
       "name": "--ui-heading-line-height-4xl",
-      "default": "var(--ui-leading-4xl)",
+      "default": "var(--ui-line-height-4xl)",
       "description": "Line height 4xl"
     },
     {
@@ -45,7 +45,7 @@
     },
     {
       "name": "--ui-heading-line-height-3xl",
-      "default": "var(--ui-leading-3xl)",
+      "default": "var(--ui-line-height-3xl)",
       "description": "Line height 3xl"
     },
     {
@@ -55,7 +55,7 @@
     },
     {
       "name": "--ui-heading-line-height-2xl",
-      "default": "var(--ui-leading-2xl)",
+      "default": "var(--ui-line-height-2xl)",
       "description": "Line height 2xl"
     },
     {
@@ -65,7 +65,7 @@
     },
     {
       "name": "--ui-heading-line-height-xl",
-      "default": "var(--ui-leading-xl)",
+      "default": "var(--ui-line-height-xl)",
       "description": "Line height at extra-large size"
     },
     {
@@ -75,7 +75,7 @@
     },
     {
       "name": "--ui-heading-line-height-lg",
-      "default": "var(--ui-leading-lg)",
+      "default": "var(--ui-line-height-lg)",
       "description": "Line height at large size"
     },
     {
@@ -85,7 +85,7 @@
     },
     {
       "name": "--ui-heading-line-height-md",
-      "default": "var(--ui-leading-tight-md)",
+      "default": "var(--ui-line-height-tight-md)",
       "description": "Line height at medium size"
     },
     {
@@ -95,7 +95,7 @@
     },
     {
       "name": "--ui-heading-line-height-sm",
-      "default": "var(--ui-leading-tight-sm)",
+      "default": "var(--ui-line-height-tight-sm)",
       "description": "Line height at small size"
     }
   ]