@teseor/css 1.8.0 → 1.9.0

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

@@ -1,28 +1,55 @@
 @use '../../../config/tokens/variables' as t;
+// @component tabs
+// @element div
 
 // Token definitions
 @layer components.tokens {
   .tabs {
+    --_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});
+    --_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);
+    --_ease-default: var(--ui-ease-default);
+    --_color-text: var(--ui-color-text, #{t.$color-text});
+    --_color-primary: var(--ui-color-primary, #{t.$color-primary});
+    --_row-1: var(--ui-row-1, #{t.$row});
+    // @desc Border color
     --_border-color: var(--ui-tabs-border-color, var(--ui-color-border, #{t.$color-border}));
+    // @desc Tab height
     --_tab-height: var(--ui-tabs-tab-height, var(--ui-row-2, #{t.$row-2}));
+    // @desc Tab padding x
     --_tab-padding-x: var(--ui-tabs-tab-padding-x, var(--ui-space-2, #{t.$space-2}));
+    // @desc Tab padding y
     --_tab-padding-y: var(--ui-tabs-tab-padding-y, var(--ui-space-1, #{t.$space-1}));
+    // @desc Tab font size
     --_tab-font-size: var(--ui-tabs-tab-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    // @desc Tab bg
     --_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 Panel padding on all sides
     --_panel-padding: var(--ui-tabs-panel-padding, var(--ui-space-3, #{t.$space-3}));
   }
 
   // @modifier size
   .tabs--sm {
+    // @desc Tab height sm
     --_tab-height: var(--ui-tabs-tab-height-sm, var(--ui-row-1, #{t.$row}));
+    // @desc Tab padding x sm
     --_tab-padding-x: var(--ui-tabs-tab-padding-x-sm, var(--ui-space-1, #{t.$space-1}));
+    // @desc Tab font size sm
     --_tab-font-size: var(--ui-tabs-tab-font-size-sm, var(--ui-font-size-xs, #{t.$font-size-xs}));
   }
 
   .tabs--lg {
+    // @desc Tab height lg
     --_tab-height: var(--ui-tabs-tab-height-lg, calc(#{t.$row} * 2.5));
+    // @desc Tab padding x lg
     --_tab-padding-x: var(--ui-tabs-tab-padding-x-lg, var(--ui-space-3, #{t.$space-3}));
+    // @desc Tab font size lg
     --_tab-font-size: var(--ui-tabs-tab-font-size-lg, var(--ui-font-size-md, #{t.$font-size-md}));
   }
 }
@@ -32,13 +59,13 @@
   .tabs__list {
     display: flex;
     align-items: stretch;
-    gap: var(--ui-space-1, #{t.$space-1});
+    gap: var(--_space-1);
 
     box-sizing: border-box;
     block-size: var(--_tab-height);
 
     // Use box-shadow instead of border to avoid affecting height
-    box-shadow: inset 0 calc(var(--ui-border-width-sm, #{t.$border-width-sm}) * -1) 0 var(--_border-color);
+    box-shadow: inset 0 calc(var(--_border-width-sm) * -1) 0 var(--_border-color);
   }
 
   .tabs__tab {
@@ -50,31 +77,31 @@
     padding-inline: var(--_tab-padding-x);
     margin: 0;
 
-    font-family: var(--ui-font-sans, #{t.$font-sans});
+    font-family: var(--_font-sans);
     font-size: var(--_tab-font-size);
-    font-weight: var(--ui-weight-medium, #{t.$weight-medium});
+    font-weight: var(--_weight-medium);
     line-height: 1;
-    color: var(--ui-color-text-muted, #{t.$color-text-muted});
+    color: var(--_color-text-muted);
 
     background: var(--_tab-bg);
     border: none;
     // Use box-shadow for indicator to avoid affecting height
-    box-shadow: inset 0 calc(var(--ui-border-width-md, #{t.$border-width-md}) * -1) 0 transparent;
+    box-shadow: inset 0 calc(var(--_border-width-md) * -1) 0 transparent;
     cursor: pointer;
 
     transition:
-      color var(--ui-duration-base) var(--ui-ease-default),
-      box-shadow var(--ui-duration-base) var(--ui-ease-default);
+      color var(--_duration-base) var(--_ease-default),
+      box-shadow var(--_duration-base) var(--_ease-default);
 
     &:hover {
-      color: var(--ui-color-text, #{t.$color-text});
+      color: var(--_color-text);
     }
 
     &--active {
-      color: var(--ui-color-primary, #{t.$color-primary});
+      color: var(--_color-primary);
 
       background: var(--_tab-bg-active);
-      box-shadow: inset 0 calc(var(--ui-border-width-md, #{t.$border-width-md}) * -1) 0 var(--ui-color-primary, #{t.$color-primary});
+      box-shadow: inset 0 calc(var(--_border-width-md) * -1) 0 var(--_color-primary);
     }
   }
 
@@ -83,7 +110,7 @@
 
     padding: var(--_panel-padding);
 
-    line-height: var(--ui-row-1, #{t.$row});
+    line-height: var(--_row-1);
 
     &--active {
       display: block;
@@ -91,6 +118,7 @@
   }
 
   // Vertical orientation
+  // @modifier boolean vertical
   .tabs--vertical {
     display: flex;
 
@@ -101,16 +129,16 @@
       inline-size: auto;
 
       // Move indicator to inline-start instead of block-end
-      box-shadow: inset calc(var(--ui-border-width-sm, #{t.$border-width-sm}) * -1) 0 0 var(--_border-color);
+      box-shadow: inset calc(var(--_border-width-sm) * -1) 0 0 var(--_border-color);
     }
 
     > .tabs__list > .tabs__tab {
       block-size: var(--_tab-height);
 
-      box-shadow: inset calc(var(--ui-border-width-md, #{t.$border-width-md}) * -1) 0 0 transparent;
+      box-shadow: inset calc(var(--_border-width-md) * -1) 0 0 transparent;
 
       &--active {
-        box-shadow: inset calc(var(--ui-border-width-md, #{t.$border-width-md}) * -1) 0 0 var(--ui-color-primary, #{t.$color-primary});
+        box-shadow: inset calc(var(--_border-width-md) * -1) 0 0 var(--_color-primary);
       }
     }
 

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

@@ -1,4 +1,5 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "tabs",
   "element": "div",
   "modifiers": {
@@ -11,53 +12,79 @@
   },
   "elements": {
     "list": {},
-    "tab": {
-      "modifiers": {
-        "active": {
-          "type": "boolean"
-        }
-      }
-    },
-    "panel": {
-      "modifiers": {
-        "active": {
-          "type": "boolean"
-        }
-      }
-    }
+    "tab": {},
+    "panel": {}
   },
   "cssVars": [
     {
       "name": "--ui-tabs-border-color",
-      "default": "var(--ui-color-border)"
+      "default": "var(--ui-color-border)",
+      "description": "Border color"
     },
     {
       "name": "--ui-tabs-tab-height",
-      "default": "var(--ui-row-2)"
+      "default": "var(--ui-row-2)",
+      "description": "Tab height"
     },
     {
       "name": "--ui-tabs-tab-padding-x",
-      "default": "var(--ui-space-2)"
+      "default": "var(--ui-space-2)",
+      "description": "Tab padding x"
     },
     {
       "name": "--ui-tabs-tab-padding-y",
-      "default": "var(--ui-space-1)"
+      "default": "var(--ui-space-1)",
+      "description": "Tab padding y"
     },
     {
       "name": "--ui-tabs-tab-font-size",
-      "default": "var(--ui-font-size-sm)"
+      "default": "var(--ui-font-size-sm)",
+      "description": "Tab font size"
     },
     {
       "name": "--ui-tabs-tab-bg",
-      "default": "transparent"
+      "default": "transparent",
+      "description": "Tab bg"
     },
     {
       "name": "--ui-tabs-tab-bg-active",
-      "default": "var(--ui-color-bg)"
+      "default": "var(--ui-color-bg)",
+      "description": "Tab bg active"
     },
     {
       "name": "--ui-tabs-panel-padding",
-      "default": "var(--ui-space-3)"
+      "default": "var(--ui-space-3)",
+      "description": "Panel padding on all sides"
+    },
+    {
+      "name": "--ui-tabs-tab-height-sm",
+      "default": "var(--ui-row-1)",
+      "description": "Tab height sm"
+    },
+    {
+      "name": "--ui-tabs-tab-padding-x-sm",
+      "default": "var(--ui-space-1)",
+      "description": "Tab padding x sm"
+    },
+    {
+      "name": "--ui-tabs-tab-font-size-sm",
+      "default": "var(--ui-font-size-xs)",
+      "description": "Tab font size sm"
+    },
+    {
+      "name": "--ui-tabs-tab-height-lg",
+      "default": "calc(var(--ui-row) * 2.5)",
+      "description": "Tab height lg"
+    },
+    {
+      "name": "--ui-tabs-tab-padding-x-lg",
+      "default": "var(--ui-space-3)",
+      "description": "Tab padding x lg"
+    },
+    {
+      "name": "--ui-tabs-tab-font-size-lg",
+      "default": "var(--ui-font-size-md)",
+      "description": "Tab font size lg"
     }
   ]
 }

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

@@ -1,4 +1,5 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "dialog",
   "element": "div",
   "modifiers": {
@@ -16,19 +17,23 @@
   "cssVars": [
     {
       "name": "--ui-dialog-header-padding",
-      "default": "calc(var(--ui-unit) * 2"
+      "default": "calc(var(--ui-unit) * 2) calc(var(--ui-unit) * 3)",
+      "description": "Header padding on all sides"
     },
     {
       "name": "--ui-dialog-body-padding",
-      "default": "calc(var(--ui-unit) * 3"
+      "default": "calc(var(--ui-unit) * 3)",
+      "description": "Body area padding on all sides"
     },
     {
       "name": "--ui-dialog-footer-padding",
-      "default": "calc(var(--ui-unit) * 2"
+      "default": "calc(var(--ui-unit) * 2) calc(var(--ui-unit) * 3)",
+      "description": "Footer padding on all sides"
     },
     {
       "name": "--ui-dialog-border-color",
-      "default": "var(--ui-color-border)"
+      "default": "var(--ui-color-border)",
+      "description": "Border color"
     }
   ]
 }

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

@@ -1,14 +1,22 @@
 @use '../../../config/tokens/variables' as t;
+// @component dialog
+// @element div
 
 // Dialog - structured modal with header, body, footer
 // Extends modal with semantic sections
 
 @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});
+    // @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
     --_body-padding: var(--ui-dialog-body-padding, calc(#{t.$unit} * 3));
+    // @desc Footer padding on all sides
     --_footer-padding: var(--ui-dialog-footer-padding, calc(#{t.$unit} * 2) calc(#{t.$unit} * 3));
-    --_border-color: var(--ui-dialog-border-color, var(--ui-color-border, rgb(0 0 0 / 0.1)));
+    // @desc Border color
+    --_border-color: var(--ui-dialog-border-color, var(--ui-color-border, #{t.$color-border}));
   }
 }
 
@@ -33,8 +41,8 @@
   .dialog__title {
     margin: 0;
 
-    font-size: var(--ui-font-size-lg, #{t.$font-size-lg});
-    font-weight: var(--ui-weight-semibold, 600);
+    font-size: var(--_font-size-lg);
+    font-weight: var(--_weight-semibold);
     line-height: calc(#{t.$unit} * 3);
   }
 
@@ -64,6 +72,7 @@
   }
 
   // Variant without borders
+  // @modifier boolean borderless
   .dialog--borderless .dialog__header {
     border-block-end: none;
   }

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

@@ -1,12 +1,13 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "drawer",
   "element": "div",
   "modifiers": {
-    "position": {
-      "values": ["start", "end", "top", "bottom"]
-    },
     "size": {
-      "values": ["sm", "lg"]
+      "values": ["sm", "lg", "full"]
+    },
+    "position": {
+      "values": ["end", "start", "top", "bottom"]
     }
   },
   "elements": {
@@ -17,39 +18,51 @@
     "body": {},
     "footer": {}
   },
-  "relatedComponents": ["drawer-overlay"],
+  "relatedComponents": [
+    {
+      "name": "drawer-overlay"
+    }
+  ],
   "cssVars": [
     {
       "name": "--ui-drawer-size",
-      "default": "calc(var(--ui-unit) * 40"
+      "default": "calc(var(--ui-unit) * 40)",
+      "description": "Overall size"
     },
     {
       "name": "--ui-drawer-max-size",
-      "default": "90%"
+      "default": "90%",
+      "description": "Max size"
     },
     {
       "name": "--ui-drawer-bg",
-      "default": "var(--ui-color-bg)"
+      "default": "var(--ui-color-bg)",
+      "description": "Background color"
     },
     {
       "name": "--ui-drawer-shadow",
-      "default": "var(--shadow-lg)"
+      "default": "var(--ui-shadow-lg)",
+      "description": "Box shadow"
     },
     {
       "name": "--ui-drawer-header-padding",
-      "default": "calc(var(--ui-unit) * 2"
+      "default": "calc(var(--ui-unit) * 2) calc(var(--ui-unit) * 3)",
+      "description": "Header padding on all sides"
     },
     {
       "name": "--ui-drawer-body-padding",
-      "default": "calc(var(--ui-unit) * 3"
+      "default": "calc(var(--ui-unit) * 3)",
+      "description": "Body area padding on all sides"
     },
     {
       "name": "--ui-drawer-footer-padding",
-      "default": "calc(var(--ui-unit) * 2"
+      "default": "calc(var(--ui-unit) * 2) calc(var(--ui-unit) * 3)",
+      "description": "Footer padding on all sides"
     },
     {
       "name": "--ui-drawer-border-color",
-      "default": "var(--ui-color-border)"
+      "default": "var(--ui-color-border)",
+      "description": "Border color"
     }
   ]
 }

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

@@ -1,20 +1,44 @@
 @use '../../../config/tokens/variables' as t;
+// @component drawer
+// @element div
+// @related drawer-overlay
 
 // Drawer - slide-out panel
 // Side panel that slides in from edge
 
 @layer components.tokens {
   .drawer {
+    --_z-drawer: var(--ui-z-drawer, #{t.$z-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);
+    --_duration-fast: var(--ui-duration-fast, #{t.$duration-fast});
+    --_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});
+    --_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});
+    // @desc Overall size
     --_size: var(--ui-drawer-size, calc(#{t.$unit} * 40));
+    // @desc Max size
     --_max-size: var(--ui-drawer-max-size, 90%);
+    // @desc Background color
     --_bg: var(--ui-drawer-bg, var(--ui-color-bg, #{t.$color-bg}));
+    // @desc Box shadow
     --_shadow: var(--ui-drawer-shadow, var(--ui-shadow-lg));
+    // @desc Header padding on all sides
     --_header-padding: var(--ui-drawer-header-padding, calc(#{t.$unit} * 2) calc(#{t.$unit} * 3));
+    // @desc Body area padding on all sides
     --_body-padding: var(--ui-drawer-body-padding, calc(#{t.$unit} * 3));
+    // @desc Footer padding on all sides
     --_footer-padding: var(--ui-drawer-footer-padding, calc(#{t.$unit} * 2) calc(#{t.$unit} * 3));
+    // @desc Border color
     --_border-color: var(--ui-drawer-border-color, var(--ui-color-border, #{t.$color-border}));
   }
 
+  // @modifier size
   .drawer--sm {
     --_size: calc(#{t.$unit} * 30);
   }
@@ -34,17 +58,17 @@
   .drawer-overlay {
     position: fixed;
     inset: 0;
-    z-index: var(--ui-z-drawer, 900);
+    z-index: var(--_z-drawer);
 
-    background: var(--ui-overlay-bg, rgb(0 0 0 / 0.5));
+    background: var(--_overlay-bg);
   }
 
   .drawer-overlay[data-state="open"] {
-    animation: drawer-overlay-in var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out);
+    animation: drawer-overlay-in var(--_duration-normal) var(--_ease-out);
   }
 
   .drawer-overlay[data-state="closed"] {
-    animation: drawer-overlay-out var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in);
+    animation: drawer-overlay-out var(--_duration-fast) var(--_ease-in);
   }
 
   @keyframes drawer-overlay-in {
@@ -65,13 +89,14 @@
     display: flex;
     flex-direction: column;
     position: fixed;
-    z-index: var(--ui-z-drawer, 900);
+    z-index: var(--_z-drawer);
 
     background: var(--_bg);
     box-shadow: var(--_shadow);
   }
 
   // Direction variants
+  // @modifier position
   .drawer--end {
     inset-block: 0;
     inset-inline-end: 0;
@@ -79,7 +104,7 @@
     inline-size: var(--_size);
     max-inline-size: var(--_max-size);
 
-    box-shadow: calc(var(--ui-border-width-sm, 1px) * -1) 0 0 var(--_border-color);
+    box-shadow: calc(var(--_border-width-sm) * -1) 0 0 var(--_border-color);
   }
 
   .drawer--start {
@@ -89,7 +114,7 @@
     inline-size: var(--_size);
     max-inline-size: var(--_max-size);
 
-    box-shadow: var(--ui-border-width-sm, 1px) 0 0 var(--_border-color);
+    box-shadow: var(--_border-width-sm) 0 0 var(--_border-color);
   }
 
   .drawer--top {
@@ -99,7 +124,7 @@
     block-size: var(--_size);
     max-block-size: var(--_max-size);
 
-    box-shadow: 0 var(--ui-border-width-sm, 1px) 0 var(--_border-color);
+    box-shadow: 0 var(--_border-width-sm) 0 var(--_border-color);
   }
 
   .drawer--bottom {
@@ -109,40 +134,40 @@
     block-size: var(--_size);
     max-block-size: var(--_max-size);
 
-    box-shadow: 0 calc(var(--ui-border-width-sm, 1px) * -1) 0 var(--_border-color);
+    box-shadow: 0 calc(var(--_border-width-sm) * -1) 0 var(--_border-color);
   }
 
   // Animation states
   .drawer--end[data-state="open"] {
-    animation: drawer-slide-in-end var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out);
+    animation: drawer-slide-in-end var(--_duration-normal) var(--_ease-out);
   }
 
   .drawer--end[data-state="closed"] {
-    animation: drawer-slide-out-end var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in);
+    animation: drawer-slide-out-end var(--_duration-fast) var(--_ease-in);
   }
 
   .drawer--start[data-state="open"] {
-    animation: drawer-slide-in-start var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out);
+    animation: drawer-slide-in-start var(--_duration-normal) var(--_ease-out);
   }
 
   .drawer--start[data-state="closed"] {
-    animation: drawer-slide-out-start var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in);
+    animation: drawer-slide-out-start var(--_duration-fast) var(--_ease-in);
   }
 
   .drawer--top[data-state="open"] {
-    animation: drawer-slide-in-top var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out);
+    animation: drawer-slide-in-top var(--_duration-normal) var(--_ease-out);
   }
 
   .drawer--top[data-state="closed"] {
-    animation: drawer-slide-out-top var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in);
+    animation: drawer-slide-out-top var(--_duration-fast) var(--_ease-in);
   }
 
   .drawer--bottom[data-state="open"] {
-    animation: drawer-slide-in-bottom var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out);
+    animation: drawer-slide-in-bottom var(--_duration-normal) var(--_ease-out);
   }
 
   .drawer--bottom[data-state="closed"] {
-    animation: drawer-slide-out-bottom var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in);
+    animation: drawer-slide-out-bottom var(--_duration-fast) var(--_ease-in);
   }
 
   @keyframes drawer-slide-in-end {
@@ -203,23 +228,23 @@
 
     padding: var(--_header-padding);
 
-    box-shadow: inset 0 calc(var(--ui-border-width-sm, 1px) * -1) 0 var(--_border-color);
+    box-shadow: inset 0 calc(var(--_border-width-sm) * -1) 0 var(--_border-color);
   }
 
   .drawer__title {
     margin: 0;
 
-    font-size: var(--ui-font-size-lg, #{t.$font-size-lg});
-    font-weight: var(--ui-weight-semibold, 600);
-    line-height: var(--ui-row-1, #{t.$row});
+    font-size: var(--_font-size-lg);
+    font-weight: var(--_weight-semibold);
+    line-height: var(--_row-1);
   }
 
   .drawer__description {
     margin: 0;
 
-    font-size: var(--ui-font-size-sm, #{t.$font-size-sm});
-    line-height: var(--ui-row-1, #{t.$row});
-    color: var(--ui-color-text-muted, #{t.$color-text-muted});
+    font-size: var(--_font-size-sm);
+    line-height: var(--_row-1);
+    color: var(--_color-text-muted);
   }
 
   .drawer__close {
@@ -234,7 +259,7 @@
     padding: var(--_body-padding);
     overflow-y: auto;
 
-    line-height: var(--ui-row-1, #{t.$row});
+    line-height: var(--_row-1);
   }
 
   .drawer__footer {
@@ -246,7 +271,7 @@
 
     padding: var(--_footer-padding);
 
-    box-shadow: inset 0 var(--ui-border-width-sm, 1px) 0 var(--_border-color);
+    box-shadow: inset 0 var(--_border-width-sm) 0 var(--_border-color);
   }
 
   @media (prefers-reduced-motion: reduce) {

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

@@ -1,24 +1,38 @@
 @use '../../../config/tokens/variables' as t;
+// @component modal
+// @element div
 
 // Modal - container for modal dialogs
 // Centered container with backdrop that appears over page content
 
 @layer components.tokens {
   .modal {
+    --_duration-normal: var(--ui-duration-normal, #{t.$duration-normal});
+    --_ease-default: var(--ui-ease-default, ease);
+    // @desc Background color
     --_bg: var(--ui-modal-bg, var(--ui-color-bg, #{t.$color-bg}));
+    // @desc Corner radius
     --_radius: var(--ui-modal-radius, var(--ui-radius-lg, calc(#{t.$unit} * 1.5)));
+    // @desc Box shadow
     --_shadow: var(--ui-modal-shadow, 0 calc(#{t.$unit} * 3) calc(#{t.$unit} * 6) rgb(0 0 0 / 0.25));
+    // @desc Padding on all sides
     --_padding: var(--ui-modal-padding, calc(#{t.$unit} * 3));
+    // @desc Maximum width
     --_max-width: var(--ui-modal-max-width, calc(#{t.$unit} * 60));
+    // @desc Maximum height
     --_max-height: var(--ui-modal-max-height, calc(100vh - #{t.$unit} * 8));
-    --_z: var(--ui-modal-z, var(--ui-z-modal, 400));
+    // @desc Z-index stacking order
+    --_z: var(--ui-modal-z, var(--ui-z-modal, #{t.$z-modal}));
   }
 
+  // @modifier size
   .modal--sm {
+    // @desc Maximum width at small size
     --_max-width: var(--ui-modal-max-width-sm, calc(#{t.$unit} * 40));
   }
 
   .modal--lg {
+    // @desc Maximum width at large size
     --_max-width: var(--ui-modal-max-width-lg, calc(#{t.$unit} * 80));
   }
 
@@ -68,6 +82,7 @@
 
   // Animation states
   .modal--entering .modal__content,
+  // @modifier boolean visible
   .modal--visible .modal__content {
     opacity: 1;
     transform: scale(1);
@@ -81,8 +96,8 @@
 
   .modal--animate .modal__content {
     transition:
-      opacity var(--ui-duration-normal, 200ms) var(--ui-ease-default, ease),
-      transform var(--ui-duration-normal, 200ms) var(--ui-ease-default, ease);
+      opacity var(--_duration-normal) var(--_ease-default),
+      transform var(--_duration-normal) var(--_ease-default);
   }
 
   // Hidden state hides entire modal