@teseor/css 1.6.0 → 1.8.0

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

@@ -0,0 +1,282 @@
+{
+  "id": "drawer",
+  "type": "component",
+  "title": "Drawer",
+  "api": "./drawer.api.json",
+  "sections": [
+    {
+      "title": "Default (End)",
+      "description": "Slides in from the end (right in LTR)",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": {
+                "style": "position:relative;height:300px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)"
+              },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-drawer-overlay",
+                  "attrs": { "style": "position:absolute" }
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-drawer ui-drawer--end",
+                  "attrs": { "style": "position:absolute", "data-state": "open" },
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-drawer__header",
+                      "children": [
+                        {
+                          "tag": "div",
+                          "children": [
+                            { "tag": "h2", "class": "ui-drawer__title", "text": "Drawer Title" },
+                            {
+                              "tag": "p",
+                              "class": "ui-drawer__description",
+                              "text": "Optional description text"
+                            }
+                          ]
+                        },
+                        {
+                          "tag": "button",
+                          "class": "ui-drawer__close ui-button ui-button--ghost ui-button--icon",
+                          "text": "X"
+                        }
+                      ]
+                    },
+                    {
+                      "tag": "div",
+                      "class": "ui-drawer__body",
+                      "children": [{ "tag": "p", "text": "Drawer content goes here." }]
+                    },
+                    {
+                      "tag": "div",
+                      "class": "ui-drawer__footer",
+                      "children": [
+                        {
+                          "tag": "button",
+                          "class": "ui-button ui-button--secondary",
+                          "text": "Cancel"
+                        },
+                        { "tag": "button", "class": "ui-button", "text": "Save" }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Positions",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": {
+                "style": "position:relative;height:200px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)"
+              },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-drawer ui-drawer--start ui-drawer--sm",
+                  "attrs": { "style": "position:absolute", "data-state": "open" },
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-drawer__header",
+                      "children": [{ "tag": "h2", "class": "ui-drawer__title", "text": "Start" }]
+                    },
+                    {
+                      "tag": "div",
+                      "class": "ui-drawer__body",
+                      "children": [{ "tag": "p", "text": "From start edge" }]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "layout": "column"
+        },
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": {
+                "style": "position:relative;height:200px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)"
+              },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-drawer ui-drawer--top",
+                  "attrs": { "style": "position:absolute", "data-state": "open" },
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-drawer__header",
+                      "children": [{ "tag": "h2", "class": "ui-drawer__title", "text": "Top" }]
+                    },
+                    {
+                      "tag": "div",
+                      "class": "ui-drawer__body",
+                      "children": [{ "tag": "p", "text": "From top edge" }]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "layout": "column"
+        },
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": {
+                "style": "position:relative;height:200px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)"
+              },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-drawer ui-drawer--bottom",
+                  "attrs": { "style": "position:absolute", "data-state": "open" },
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-drawer__header",
+                      "children": [{ "tag": "h2", "class": "ui-drawer__title", "text": "Bottom" }]
+                    },
+                    {
+                      "tag": "div",
+                      "class": "ui-drawer__body",
+                      "children": [{ "tag": "p", "text": "From bottom edge" }]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "layout": "column"
+        }
+      ]
+    },
+    {
+      "title": "Sizes",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": {
+                "style": "position:relative;height:150px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)"
+              },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-drawer ui-drawer--end ui-drawer--sm",
+                  "attrs": { "style": "position:absolute", "data-state": "open" },
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-drawer__body",
+                      "children": [{ "tag": "p", "text": "Small drawer" }]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "layout": "column"
+        },
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": {
+                "style": "position:relative;height:150px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)"
+              },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-drawer ui-drawer--end",
+                  "attrs": { "style": "position:absolute", "data-state": "open" },
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-drawer__body",
+                      "children": [{ "tag": "p", "text": "Default drawer" }]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "layout": "column"
+        },
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": {
+                "style": "position:relative;height:150px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)"
+              },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-drawer ui-drawer--end ui-drawer--lg",
+                  "attrs": { "style": "position:absolute", "data-state": "open" },
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-drawer__body",
+                      "children": [{ "tag": "p", "text": "Large drawer" }]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "layout": "column"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-drawer-size",
+      "default": "calc(var(--ui-unit) * 40)",
+      "description": "Default width/height"
+    },
+    { "token": "--ui-drawer-max-size", "default": "90%", "description": "Maximum size" },
+    {
+      "token": "--ui-drawer-bg",
+      "default": "var(--ui-color-bg)",
+      "description": "Background color"
+    },
+    { "token": "--ui-drawer-shadow", "default": "var(--shadow-lg)", "description": "Box shadow" },
+    {
+      "token": "--ui-drawer-header-padding",
+      "default": "16px 24px",
+      "description": "Header padding"
+    },
+    { "token": "--ui-drawer-body-padding", "default": "24px", "description": "Body padding" },
+    {
+      "token": "--ui-drawer-footer-padding",
+      "default": "16px 24px",
+      "description": "Footer padding"
+    },
+    {
+      "token": "--ui-drawer-border-color",
+      "default": "var(--ui-color-border)",
+      "description": "Border color"
+    }
+  ]
+}

package/src/{04-components → components}/overlays/drawer/index.scss

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // Drawer - slide-out panel
 // Side panel that slides in from edge
@@ -8,7 +8,7 @@
     --_size: var(--ui-drawer-size, calc(#{t.$unit} * 40));
     --_max-size: var(--ui-drawer-max-size, 90%);
     --_bg: var(--ui-drawer-bg, var(--ui-color-bg, #{t.$color-bg}));
-    --_shadow: var(--ui-drawer-shadow, var(--shadow-lg));
+    --_shadow: var(--ui-drawer-shadow, var(--ui-shadow-lg));
     --_header-padding: var(--ui-drawer-header-padding, calc(#{t.$unit} * 2) calc(#{t.$unit} * 3));
     --_body-padding: var(--ui-drawer-body-padding, calc(#{t.$unit} * 3));
     --_footer-padding: var(--ui-drawer-footer-padding, calc(#{t.$unit} * 2) calc(#{t.$unit} * 3));
@@ -248,4 +248,11 @@
 
     box-shadow: inset 0 var(--ui-border-width-sm, 1px) 0 var(--_border-color);
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    .drawer-overlay[data-state],
+    .drawer[data-state] {
+      animation: none;
+    }
+  }
 }

package/src/{04-components → components}/overlays/modal/index.scss

@@ -1,11 +1,11 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // Modal - container for modal dialogs
 // Centered container with backdrop that appears over page content
 
 @layer components.tokens {
   .modal {
-    --_bg: var(--ui-modal-bg, var(--ui-color-bg, white));
+    --_bg: var(--ui-modal-bg, var(--ui-color-bg, #{t.$color-bg}));
     --_radius: var(--ui-modal-radius, var(--ui-radius-lg, calc(#{t.$unit} * 1.5)));
     --_shadow: var(--ui-modal-shadow, 0 calc(#{t.$unit} * 3) calc(#{t.$unit} * 6) rgb(0 0 0 / 0.25));
     --_padding: var(--ui-modal-padding, calc(#{t.$unit} * 3));

package/src/{04-components → components}/overlays/modal/modal.api.json

@@ -24,19 +24,19 @@
     },
     {
       "name": "--ui-modal-shadow",
-      "default": "0 calc(#{t.$unit} * 3"
+      "default": "0 calc(var(--ui-unit) * 3"
     },
     {
       "name": "--ui-modal-padding",
-      "default": "calc(#{t.$unit} * 3"
+      "default": "calc(var(--ui-unit) * 3"
     },
     {
       "name": "--ui-modal-max-width",
-      "default": "calc(#{t.$unit} * 60"
+      "default": "calc(var(--ui-unit) * 60"
     },
     {
       "name": "--ui-modal-max-height",
-      "default": "calc(100vh - #{t.$unit} * 8"
+      "default": "calc(100vh - var(--ui-unit) * 8"
     },
     {
       "name": "--ui-modal-z",
@@ -44,11 +44,11 @@
     },
     {
       "name": "--ui-modal-max-width-sm",
-      "default": "calc(#{t.$unit} * 40"
+      "default": "calc(var(--ui-unit) * 40"
     },
     {
       "name": "--ui-modal-max-width-lg",
-      "default": "calc(#{t.$unit} * 80"
+      "default": "calc(var(--ui-unit) * 80"
     }
   ]
 }

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

@@ -0,0 +1,163 @@
+{
+  "id": "modal",
+  "type": "component",
+  "title": "Modal",
+  "description": "Container for modal dialogs. Use with overlay for backdrop effect.",
+  "api": "./modal.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": {
+                "style": "position: relative; height: 200px; background: var(--ui-color-bg-subtle);"
+              },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-modal ui-modal--visible",
+                  "attrs": { "style": "position: absolute;" },
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-modal__content",
+                      "children": [{ "tag": "p", "text": "Modal content goes here" }]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-overlay\"></div>\n<div class=\"ui-modal\">\n  <div class=\"ui-modal__content\">\n    <p>Modal content goes here</p>\n  </div>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Sizes",
+      "data": {
+        "sizes": [
+          { "mod": "sm", "label": "Small" },
+          { "mod": "", "label": "Default" },
+          { "mod": "lg", "label": "Large" }
+        ]
+      },
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": {
+                "style": "position: relative; height: 120px; background: var(--ui-color-bg-subtle);"
+              },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-modal ui-modal--sm ui-modal--visible",
+                  "attrs": { "style": "position: absolute;" },
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-modal__content",
+                      "children": [{ "tag": "p", "text": "Small modal" }]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-modal ui-modal--sm\">\n  <div class=\"ui-modal__content\">Small modal</div>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "With Scrollable Content",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": {
+                "style": "position: relative; height: 200px; background: var(--ui-color-bg-subtle);"
+              },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-modal ui-modal--visible",
+                  "attrs": { "style": "position: absolute;" },
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-modal__content",
+                      "attrs": { "style": "max-height: 150px;" },
+                      "children": [
+                        {
+                          "tag": "div",
+                          "class": "ui-modal__body",
+                          "children": [
+                            { "tag": "p", "text": "Line 1" },
+                            { "tag": "p", "text": "Line 2" },
+                            { "tag": "p", "text": "Line 3" },
+                            { "tag": "p", "text": "Line 4" },
+                            { "tag": "p", "text": "Line 5" },
+                            { "tag": "p", "text": "Line 6" }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-modal\">\n  <div class=\"ui-modal__content\">\n    <div class=\"ui-modal__body\">\n      <!-- Scrollable content -->\n    </div>\n  </div>\n</div>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-modal-bg",
+      "default": "var(--ui-color-bg)",
+      "description": "Background color"
+    },
+    {
+      "token": "--ui-modal-radius",
+      "default": "var(--ui-radius-lg)",
+      "description": "Border radius"
+    },
+    {
+      "token": "--ui-modal-shadow",
+      "default": "0 24px 48px rgb(0 0 0 / 0.25)",
+      "description": "Box shadow"
+    },
+    {
+      "token": "--ui-modal-padding",
+      "default": "calc(var(--ui-unit) * 3)",
+      "description": "Content padding"
+    },
+    {
+      "token": "--ui-modal-max-width",
+      "default": "calc(var(--ui-unit) * 60)",
+      "description": "Max width (default)"
+    },
+    {
+      "token": "--ui-modal-max-width-sm",
+      "default": "calc(var(--ui-unit) * 40)",
+      "description": "Max width (small)"
+    },
+    {
+      "token": "--ui-modal-max-width-lg",
+      "default": "calc(var(--ui-unit) * 80)",
+      "description": "Max width (large)"
+    },
+    {
+      "token": "--ui-modal-max-height",
+      "default": "calc(100vh - var(--ui-unit) * 8)",
+      "description": "Max height"
+    },
+    { "token": "--ui-modal-z", "default": "var(--ui-z-modal)", "description": "Z-index" }
+  ]
+}

package/src/{04-components → components}/overlays/overlay/index.scss

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // Overlay - backdrop for modals, dialogs, drawers
 // Full viewport coverage with semi-transparent background

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

@@ -0,0 +1,138 @@
+{
+  "id": "overlay",
+  "type": "component",
+  "title": "Overlay",
+  "description": "Full viewport backdrop for modals, dialogs, and drawers. Controls visibility via state modifiers.",
+  "api": "./overlay.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": {
+                "style": "position: relative; height: 120px; background: var(--ui-color-bg-subtle);"
+              },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-overlay",
+                  "attrs": { "style": "position: absolute;" }
+                },
+                {
+                  "tag": "p",
+                  "attrs": { "style": "position: relative; padding: var(--ui-space-2);" },
+                  "text": "Content behind overlay"
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-overlay\"></div>"
+        }
+      ]
+    },
+    {
+      "title": "Light Variant",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": {
+                "style": "position: relative; height: 120px; background: var(--ui-color-text);"
+              },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-overlay ui-overlay--light",
+                  "attrs": { "style": "position: absolute;" }
+                },
+                {
+                  "tag": "p",
+                  "attrs": {
+                    "style": "position: relative; padding: var(--ui-space-2); color: white;"
+                  },
+                  "text": "Dark content behind light overlay"
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-overlay ui-overlay--light\"></div>"
+        }
+      ]
+    },
+    {
+      "title": "Blur Variant",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": {
+                "style": "position: relative; height: 120px; background: linear-gradient(45deg, var(--ui-color-primary), var(--ui-color-success));"
+              },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-overlay ui-overlay--blur",
+                  "attrs": { "style": "position: absolute;" }
+                },
+                {
+                  "tag": "p",
+                  "attrs": {
+                    "style": "position: relative; padding: var(--ui-space-2); color: white;"
+                  },
+                  "text": "Blurred backdrop"
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-overlay ui-overlay--blur\"></div>"
+        }
+      ]
+    },
+    {
+      "title": "With Animation",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": {
+                "style": "position: relative; height: 120px; background: var(--ui-color-bg-subtle);"
+              },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-overlay ui-overlay--animate ui-overlay--visible",
+                  "attrs": { "style": "position: absolute;" }
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-overlay ui-overlay--animate ui-overlay--visible\"></div>\n<!-- JS toggles between --visible and --hidden -->"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-overlay-bg",
+      "default": "rgb(0 0 0 / 0.5)",
+      "description": "Default backdrop color"
+    },
+    {
+      "token": "--ui-overlay-bg-light",
+      "default": "rgb(255 255 255 / 0.7)",
+      "description": "Light variant backdrop color"
+    },
+    {
+      "token": "--ui-overlay-bg-blur",
+      "default": "rgb(0 0 0 / 0.3)",
+      "description": "Blur variant backdrop color"
+    },
+    { "token": "--ui-overlay-z", "default": "var(--ui-z-overlay)", "description": "Z-index layer" }
+  ]
+}

package/src/{04-components → components}/overlays/popover/index.scss

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // Popover - floating panel for additional content
 // Larger than tooltip, can contain structured content