@kadoui/tailwindcss 1.1.0 → 1.2.1

package/README.md

@@ -65,12 +65,12 @@ Set up your color system and design tokens:
   --background: #efefef;
   --background-thin: #ffffff;
   --background-thick: #dfdfdf;
-  
+
   /* Foreground colors */
   --foreground: #151515;
   --foreground-thin: #303030;
   --foreground-thick: #000000;
-  
+
   /* Semantic colors */
   --primary: #ff5e00;
   --primary-foreground: #ffffff;
@@ -84,26 +84,26 @@ Set up your color system and design tokens:
   --warning-foreground: #ffffff;
   --info: #0000dd;
   --info-foreground: #ffffff;
-  
+
   /* Palette system */
   --palette: var(--foreground);
   --brush: var(--background);
-  
+
   /* Element sizing variables */
-  --element-xs-h: calc(var(--spacing) * 6);
-  --element-sm-h: calc(var(--spacing) * 8);
-  --element-medium-h: calc(var(--spacing) * 10);
-  --element-lg-h: calc(var(--spacing) * 12);
-  --element-xl-h: calc(var(--spacing) * 14);
-  
+  --element-xs-size: calc(var(--spacing) * 6);
+  --element-sm-size: calc(var(--spacing) * 8);
+  --element-medium-size: calc(var(--spacing) * 10);
+  --element-lg-size: calc(var(--spacing) * 12);
+  --element-xl-size: calc(var(--spacing) * 14);
+
   --element-xs-spacing: calc(var(--spacing) * 1);
   --element-sm-spacing: calc(var(--spacing) * 1.5);
   --element-medium-spacing: calc(var(--spacing) * 3);
   --element-lg-spacing: calc(var(--spacing) * 6);
   --element-xl-spacing: calc(var(--spacing) * 9);
-  
+
   /* Default element size */
-  --element-h: var(--element-medium-h);
+  --element-size: var(--element-medium-size);
   --element-spacing: var(--element-medium-spacing);
   --element-text: var(--text-base);
   --element-leading: var(--text-base--line-height);
@@ -129,7 +129,7 @@ Set up your color system and design tokens:
   --color-warning-foreground: var(--warning-foreground);
   --color-info: var(--info);
   --color-info-foreground: var(--info-foreground);
-  
+
   --color-palette: var(--palette);
   --color-brush: var(--brush);
 }
@@ -177,28 +177,29 @@ export default {
 
 The design system uses a consistent spacing scale based on Tailwind's default spacing:
 
-| Level | Value | Usage |
-|-------|-------|-------|
+| Level | Value       | Usage                |
+| ----- | ----------- | -------------------- |
 | lvl-1 | `0.5` (2px) | Tight spacing, icons |
-| lvl-2 | `1.5` (6px) | Small gaps |
-| lvl-3 | `3` (12px) | Default spacing |
-| lvl-4 | `6` (24px) | Large gaps |
-| lvl-5 | `9` (36px) | Extra large gaps |
-| lvl-6 | `12` (48px) | Section spacing |
-| lvl-7 | `16` (64px) | Page sections |
-| lvl-8 | `20` (80px) | Major sections |
+| lvl-2 | `1.5` (6px) | Small gaps           |
+| lvl-3 | `3` (12px)  | Default spacing      |
+| lvl-4 | `6` (24px)  | Large gaps           |
+| lvl-5 | `9` (36px)  | Extra large gaps     |
+| lvl-6 | `12` (48px) | Section spacing      |
+| lvl-7 | `16` (64px) | Page sections        |
+| lvl-8 | `20` (80px) | Major sections       |
 
 ### Breakpoints
 
-| Breakpoint | Min Width | Description |
-|------------|-----------|-------------|
-| `sm` | 640px | Mobile |
-| `md` | 768px | Tablet |
-| `lg` | 1024px | Desktop |
-| `xl` | 1280px | Large desktop |
-| `2xl` | 1536px | Extra large desktop |
+| Breakpoint | Min Width | Description         |
+| ---------- | --------- | ------------------- |
+| `sm`       | 640px     | Mobile              |
+| `md`       | 768px     | Tablet              |
+| `lg`       | 1024px    | Desktop             |
+| `xl`       | 1280px    | Large desktop       |
+| `2xl`      | 1536px    | Extra large desktop |
 
 **Recommended Usage:**
+
 - `sm` - Mobile-first (default)
 - `sm:` - Tablet and up
 - `lg:` - Desktop and up
@@ -277,7 +278,8 @@ The element sizing system provides consistent sizing across components:
 - `element-xl` - Extra large (14 × spacing)
 
 Each size variant sets:
-- `--element-h` - Height
+
+- `--element-size` - Height
 - `--element-spacing` - Padding/spacing
 - `--element-text` - Font size
 - `--element-leading` - Line height
@@ -299,7 +301,7 @@ Each size variant sets:
 #### Element Utilities
 
 - `element-square-size` - Makes element square (width = height)
-- `element-full-w` - Full width element
+- `element-w-full` - Full width element
 - `element-icon-size` - Icon size (half of element height)
 
 **Example:**
@@ -311,7 +313,7 @@ Each size variant sets:
 </button>
 
 <!-- Full width button -->
-<button class="btn btn-fill element-full-w">Full Width</button>
+<button class="btn btn-fill element-w-full">Full Width</button>
 
 <!-- Icon -->
 <Icon class="element-icon-size" />
@@ -319,13 +321,13 @@ Each size variant sets:
 
 ### Border Radius
 
-| Level | Class | Value |
-|-------|-------|-------|
-| lvl-1 | `rounded` | Small radius |
-| lvl-2 | `rounded-md` | Medium radius |
-| lvl-3 | `rounded-lg` | Large radius |
-| lvl-4 | `rounded-xl` | Extra large radius |
-| lvl-5 | `rounded-2xl` | 2XL radius |
+| Level | Class         | Value              |
+| ----- | ------------- | ------------------ |
+| lvl-1 | `rounded`     | Small radius       |
+| lvl-2 | `rounded-md`  | Medium radius      |
+| lvl-3 | `rounded-lg`  | Large radius       |
+| lvl-4 | `rounded-xl`  | Extra large radius |
+| lvl-5 | `rounded-2xl` | 2XL radius         |
 
 ---
 
@@ -340,6 +342,7 @@ Each size variant sets:
 ```
 
 **Recommended Pattern:**
+
 ```html
 <h1 class="text-xl sm:text-2xl lg:text-5xl font-black">Responsive Heading</h1>
 ```
@@ -351,6 +354,7 @@ Each size variant sets:
 ```
 
 **Recommended Pattern:**
+
 ```html
 <h2 class="text-base sm:text-lg lg:text-xl font-bold">Responsive Title</h2>
 ```
@@ -358,6 +362,7 @@ Each size variant sets:
 #### Paragraphs
 
 **Recommended Pattern:**
+
 ```html
 <p class="text-sm sm:text-base">Responsive paragraph text</p>
 ```
@@ -383,7 +388,11 @@ Centered container with max-width:
 Styled link with hover underline:
 
 ```html
-<a href="#" class="link">Link text</a>
+<a
+  href="#"
+  class="link"
+  >Link text</a
+>
 ```
 
 #### Highlight
@@ -457,6 +466,7 @@ Buttons are the foundation of interactive elements.
 #### Button States
 
 Buttons automatically handle:
+
 - `disabled` - Reduced opacity, no pointer events
 - `focus-visible` - Outline ring
 - `active` - Reduced opacity
@@ -465,7 +475,11 @@ Buttons automatically handle:
 **Example:**
 
 ```html
-<button class="btn btn-fill" disabled>Disabled</button>
+<button
+  class="btn btn-fill"
+  disabled>
+  Disabled
+</button>
 ```
 
 #### Button Sizes
@@ -489,16 +503,14 @@ Buttons automatically handle:
 #### Full Width Buttons
 
 ```html
-<button class="btn btn-fill element-full-w">Full Width</button>
+<button class="btn btn-fill element-w-full">Full Width</button>
 ```
 
 #### Button with Data States
 
 ```html
 <!-- Active state -->
-<button class="btn data-[state=true]:btn-fill data-[state=false]:btn-soft">
-  Toggle
-</button>
+<button class="btn data-[state=true]:btn-fill data-[state=false]:btn-soft">Toggle</button>
 ```
 
 ---
@@ -511,7 +523,10 @@ Inputs are built using `<label>` elements for better accessibility.
 
 ```html
 <label class="input">
-  <input type="text" class="input-field" placeholder="Enter text" />
+  <input
+    type="text"
+    class="input-field"
+    placeholder="Enter text" />
 </label>
 ```
 
@@ -525,12 +540,18 @@ Inputs are built using `<label>` elements for better accessibility.
 ```html
 <!-- Outlined input -->
 <label class="input input-outline">
-  <input type="text" class="input-field" placeholder="Outlined" />
+  <input
+    type="text"
+    class="input-field"
+    placeholder="Outlined" />
 </label>
 
 <!-- Soft input -->
 <label class="input input-soft">
-  <input type="text" class="input-field" placeholder="Soft" />
+  <input
+    type="text"
+    class="input-field"
+    placeholder="Soft" />
 </label>
 ```
 
@@ -539,7 +560,10 @@ Inputs are built using `<label>` elements for better accessibility.
 ```html
 <label class="input input-outline">
   <SearchIcon class="element-icon-size" />
-  <input type="text" class="input-field" placeholder="Search" />
+  <input
+    type="text"
+    class="input-field"
+    placeholder="Search" />
 </label>
 ```
 
@@ -547,15 +571,24 @@ Inputs are built using `<label>` elements for better accessibility.
 
 ```html
 <label class="input input-outline element-xs">
-  <input type="text" class="input-field" placeholder="XS" />
+  <input
+    type="text"
+    class="input-field"
+    placeholder="XS" />
 </label>
 
 <label class="input input-outline element-sm">
-  <input type="text" class="input-field" placeholder="SM" />
+  <input
+    type="text"
+    class="input-field"
+    placeholder="SM" />
 </label>
 
 <label class="input input-outline">
-  <input type="text" class="input-field" placeholder="Default" />
+  <input
+    type="text"
+    class="input-field"
+    placeholder="Default" />
 </label>
 ```
 
@@ -563,7 +596,9 @@ Inputs are built using `<label>` elements for better accessibility.
 
 ```html
 <label class="input input-outline">
-  <textarea class="input-field" placeholder="Message"></textarea>
+  <textarea
+    class="input-field"
+    placeholder="Message"></textarea>
 </label>
 ```
 
@@ -571,7 +606,9 @@ Inputs are built using `<label>` elements for better accessibility.
 
 ```html
 <label class="input input-outline">
-  <input type="file" class="input-field" />
+  <input
+    type="file"
+    class="input-field" />
 </label>
 ```
 
@@ -584,9 +621,7 @@ Card component for content containers.
 #### Base Card
 
 ```html
-<div class="card">
-  Card content
-</div>
+<div class="card">Card content</div>
 ```
 
 #### Card Variants
@@ -669,9 +704,7 @@ Alert component for notifications and messages.
 #### Base Alert
 
 ```html
-<div class="alert">
-  Alert message
-</div>
+<div class="alert">Alert message</div>
 ```
 
 **Example:**
@@ -687,19 +720,13 @@ Alert component for notifications and messages.
 
 ```html
 <!-- Error alert -->
-<div class="alert palette-error">
-  Error occurred
-</div>
+<div class="alert palette-error">Error occurred</div>
 
 <!-- Success alert -->
-<div class="alert palette-success">
-  Operation successful
-</div>
+<div class="alert palette-success">Operation successful</div>
 
 <!-- Info alert -->
-<div class="alert palette-info">
-  Information message
-</div>
+<div class="alert palette-info">Information message</div>
 ```
 
 ---
@@ -778,14 +805,10 @@ Separate content with borders and spacing.
 
 ```html
 <!-- Bottom separator -->
-<div class="separate-b">
-  Content with bottom border and spacing
-</div>
+<div class="separate-b">Content with bottom border and spacing</div>
 
 <!-- Vertical separator -->
-<div class="separate-y">
-  Content with top and bottom borders
-</div>
+<div class="separate-y">Content with top and bottom borders</div>
 ```
 
 ---
@@ -797,26 +820,31 @@ Position elements relative to their container.
 #### Individual Positions
 
 **Top:**
+
 - `top-center` - Center vertically, top edge
 - `top-boundary` - Top boundary
 - `top-out` - Outside top edge
 
 **Right:**
+
 - `right-center` - Center horizontally, right edge
 - `right-boundary` - Right boundary
 - `right-out` - Outside right edge
 
 **Bottom:**
+
 - `bottom-center` - Center vertically, bottom edge
 - `bottom-boundary` - Bottom boundary
 - `bottom-out` - Outside bottom edge
 
 **Left:**
+
 - `left-center` - Center horizontally, left edge
 - `left-boundary` - Left boundary
 - `left-out` - Outside left edge
 
 **Center:**
+
 - `inset-center` - Perfect center (top-center + left-center)
 
 #### Compound Positions
@@ -834,9 +862,7 @@ Position elements relative to their container.
 
 ```html
 <div class="relative">
-  <div class="absolute position-b card">
-    Popover content
-  </div>
+  <div class="absolute position-b card">Popover content</div>
 </div>
 ```
 
@@ -847,9 +873,7 @@ Position elements relative to their container.
 ### Accordion
 
 ```html
-<div class="accordion-body">
-  Accordion content
-</div>
+<div class="accordion-body">Accordion content</div>
 ```
 
 ---
@@ -862,13 +886,9 @@ Position elements relative to their container.
   <!-- Body -->
   <div class="modal-body">
     <!-- Header -->
-    <div class="modal-header">
-      Modal Title
-    </div>
+    <div class="modal-header">Modal Title</div>
     <!-- Content -->
-    <div class="modal-content">
-      Modal content
-    </div>
+    <div class="modal-content">Modal content</div>
   </div>
 </div>
 ```
@@ -881,9 +901,7 @@ Position elements relative to their container.
 <!-- Portal (backdrop) -->
 <div class="drawer-portal">
   <!-- Body -->
-  <div class="drawer-body">
-    Drawer content
-  </div>
+  <div class="drawer-body">Drawer content</div>
 </div>
 ```
 
@@ -901,9 +919,7 @@ Position elements relative to their container.
       <div class="sheet-handlebar"></div>
     </div>
     <!-- Content -->
-    <div class="sheet-content">
-      Sheet content
-    </div>
+    <div class="sheet-content">Sheet content</div>
   </div>
 </div>
 ```
@@ -915,13 +931,12 @@ Position elements relative to their container.
 ```html
 <div class="popover">
   <button class="btn">Trigger</button>
-  <div class="popover-body position-b card">
-    Popover content
-  </div>
+  <div class="popover-body position-b card">Popover content</div>
 </div>
 ```
 
 **Position Classes:**
+
 - `position-t` - Top
 - `position-tr` - Top right
 - `position-r` - Right
@@ -960,11 +975,16 @@ Position elements relative to their container.
 ```html
 <div class="select-box-input input input-outline">
   <ChevronDownIcon />
-  <input type="text" class="input-field" placeholder="Select..." />
+  <input
+    type="text"
+    class="input-field"
+    placeholder="Select..." />
   <div class="select-box-list card card-y">
     <div class="input input-outline">
       <SearchIcon />
-      <input type="text" class="input-field" />
+      <input
+        type="text"
+        class="input-field" />
     </div>
     <button class="select-box-option btn">Option 1</button>
     <button class="select-box-option btn">Option 2</button>
@@ -1017,6 +1037,7 @@ Choice component for radio buttons, checkboxes, and switches.
 **States:**
 
 Use `data-state` attribute:
+
 - `data-state="true"` - Active/checked
 - `data-state="false"` - Inactive/unchecked
 
@@ -1039,7 +1060,9 @@ Use `data-state` attribute:
 
 ```html
 <div class="progress">
-  <div class="progress-bar" style="width: 45%">
+  <div
+    class="progress-bar"
+    style="width: 45%">
     45%
   </div>
 </div>
@@ -1066,7 +1089,7 @@ Use `data-state` attribute:
   <!-- Fade overlays -->
   <div class="carousel-left-fade"></div>
   <div class="carousel-right-fade"></div>
-  
+
   <!-- Container -->
   <div class="carousel-container">
     <div class="carousel-children card">Item 1</div>
@@ -1084,10 +1107,18 @@ Use `data-state` attribute:
 ```html
 <nav class="breadcrumbs">
   <div class="breadcrumbs-item">
-    <a href="#" class="btn link">Home</a>
+    <a
+      href="#"
+      class="btn link"
+      >Home</a
+    >
   </div>
   <div class="breadcrumbs-item">
-    <a href="#" class="btn link">Articles</a>
+    <a
+      href="#"
+      class="btn link"
+      >Articles</a
+    >
   </div>
   <div class="breadcrumbs-item">
     <span class="btn btn-fill">Current</span>
@@ -1101,9 +1132,15 @@ Use `data-state` attribute:
 
 ```html
 <div class="otp">
-  <input type="text" class="input input-outline input-square" />
-  <input type="text" class="input input-outline input-square" />
-  <input type="text" class="input input-outline input-square" />
+  <input
+    type="text"
+    class="input input-outline input-square" />
+  <input
+    type="text"
+    class="input input-outline input-square" />
+  <input
+    type="text"
+    class="input input-outline input-square" />
 </div>
 ```
 
@@ -1113,9 +1150,7 @@ Use `data-state` attribute:
 
 ```html
 <div class="relative">
-  <div class="show-more-content">
-    Long content here...
-  </div>
+  <div class="show-more-content">Long content here...</div>
   <div class="show-more-fade"></div>
   <button class="btn">Show more</button>
 </div>
@@ -1132,6 +1167,7 @@ Use `data-state` attribute:
 ```
 
 **States:**
+
 - `data-state="false"` - Blurred (default)
 - `data-state="true"` - Revealed
 
@@ -1146,6 +1182,7 @@ Use `data-state` attribute:
 ```
 
 **States:**
+
 - `data-state="false"` - Hidden
 - `data-state="true"` - Visible
 
@@ -1183,9 +1220,7 @@ Dark mode is supported via the `[data-theme="dark"]` attribute.
 Use the `dark:` variant:
 
 ```html
-<div class="bg-background dark:bg-background-thick">
-  Content
-</div>
+<div class="bg-background dark:bg-background-thick">Content</div>
 ```
 
 ---
@@ -1235,7 +1270,7 @@ Use the `dark:` variant:
 }
 
 @utility element-xxl {
-  --element-h: var(--element-xxl-h);
+  --element-size: var(--element-xxl-h);
   --element-spacing: var(--element-xxl-spacing);
   --element-text: var(--element-xxl-text);
   --element-leading: var(--element-xxl-leading);
@@ -1309,9 +1344,7 @@ Use `data-state` for component states:
 
 ```html
 <!-- ✅ Good -->
-<button class="btn data-[state=true]:btn-fill data-[state=false]:btn-soft">
-  Toggle
-</button>
+<button class="btn data-[state=true]:btn-fill data-[state=false]:btn-soft">Toggle</button>
 ```
 
 ---
@@ -1324,13 +1357,9 @@ This package is designed to work seamlessly with `@kadoui/react`:
 import { Accordion } from "@kadoui/react";
 
 <Accordion>
-  <Accordion.Toggle className="btn btn-soft">
-    Toggle
-  </Accordion.Toggle>
-  <Accordion.Body className="accordion-body">
-    Content
-  </Accordion.Body>
-</Accordion>
+  <Accordion.Toggle className="btn btn-soft">Toggle</Accordion.Toggle>
+  <Accordion.Body className="accordion-body">Content</Accordion.Body>
+</Accordion>;
 ```
 
 See [@kadoui/react documentation](https://www.npmjs.com/package/@kadoui/react) for component usage.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kadoui/tailwindcss",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "description": "Kadoui TailwindCSS styles",
   "author": "FarzadVav",
   "license": "MIT",

package/src/styles/alert.css

@@ -1,9 +1,7 @@
 @utility alert {
   @apply flex items-center bg-palette/10 text-palette border border-palette;
 
-  min-height: var(--element-h);
-  font-size: var(--element-text);
-  line-height: var(--element-line);
+  min-height: var(--element-size);
   padding: var(--element-spacing);
   gap: calc(var(--element-spacing));
   border-radius: var(--element-rounded);

package/src/styles/badge.css

@@ -4,12 +4,10 @@
   @apply flex items-center justify-center max-w-full;
 
   width: var(--element-w);
-  height: var(--element-h);
+  height: var(--element-size);
   padding: 0 var(--element-spacing);
   gap: calc(var(--element-spacing) / 1.5);
   border-radius: var(--element-rounded);
-  font-size: var(--element-text);
-  line-height: var(--element-line);
 }
 
 @utility badge-fill {

package/src/styles/base.css

@@ -1,41 +1,3 @@
-/* Base styles */
-
-@layer base {
-  html {
-    @apply scroll-smooth;
-  }
-
-  body {
-    @apply bg-background text-foreground;
-  }
-
-  * {
-    @apply select-none;
-
-    scrollbar-width: thin;
-    scrollbar-color: var(--color-foreground) transparent;
-  }
-
-  a,
-  span,
-  label {
-    @apply inline-block;
-  }
-
-  button {
-    @apply cursor-pointer;
-  }
-
-  input:focus,
-  textarea:focus {
-    @apply outline-none;
-  }
-
-  textarea {
-    @apply resize-none;
-  }
-}
-
 /* Dark mode */
 
 @custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
@@ -85,64 +47,123 @@
 /* Element sizes */
 
 @utility element-xs {
-  --element-h: var(--element-xs-h);
+  --element-size: var(--element-xs-size);
   --element-spacing: var(--element-xs-spacing);
   --element-text: var(--element-xs-text);
   --element-leading: var(--element-xs-leading);
-  --element-rounded: var(--element-xs-rounded);
+
+  &:not(*:is(.element-rounded-full)) {
+    --element-rounded: var(--element-xs-rounded);
+  }
 }
 
 @utility element-sm {
-  --element-h: var(--element-sm-h);
+  --element-size: var(--element-sm-size);
   --element-spacing: var(--element-sm-spacing);
   --element-text: var(--element-sm-text);
   --element-leading: var(--element-sm-leading);
-  --element-rounded: var(--element-sm-rounded);
+
+  &:not(*:is(.element-rounded-full)) {
+    --element-rounded: var(--element-sm-rounded);
+  }
 }
 
 @utility element-md {
-  --element-h: var(--element-medium-h);
+  --element-size: var(--element-medium-size);
   --element-spacing: var(--element-medium-spacing);
   --element-text: var(--element-medium-text);
   --element-leading: var(--element-medium-leading);
-  --element-rounded: var(--element-medium-rounded);
+
+  &:not(*:is(.element-rounded-full)) {
+    --element-rounded: var(--element-medium-rounded);
+  }
 }
 
 @utility element-lg {
-  --element-h: var(--element-lg-h);
+  --element-size: var(--element-lg-size);
   --element-spacing: var(--element-lg-spacing);
   --element-text: var(--element-lg-text);
   --element-leading: var(--element-lg-leading);
-  --element-rounded: var(--element-lg-rounded);
+
+  &:not(*:is(.element-rounded-full)) {
+    --element-rounded: var(--element-lg-rounded);
+  }
 }
 
 @utility element-xl {
-  --element-h: var(--element-xl-h);
+  --element-size: var(--element-xl-size);
   --element-spacing: var(--element-xl-spacing);
   --element-text: var(--element-xl-text);
   --element-leading: var(--element-xl-leading);
-  --element-rounded: var(--element-xl-rounded);
+
+  &:not(*:is(.element-rounded-full)) {
+    --element-rounded: var(--element-xl-rounded);
+  }
+}
+
+/* Base styles */
+
+@layer base {
+  html {
+    @apply scroll-smooth;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+
+  * {
+    @apply select-none;
+
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-foreground) transparent;
+
+    font-size: var(--element-text);
+    line-height: var(--element-line);
+  }
+
+  a,
+  span,
+  label {
+    @apply inline-block;
+  }
+
+  button {
+    @apply cursor-pointer;
+  }
+
+  input:focus,
+  textarea:focus {
+    @apply outline-none;
+  }
+
+  textarea {
+    @apply resize-y;
+  }
 }
 
 /* Use element sizes */
 
 @utility element-square-size {
-  --element-w: var(--element-h);
+  --element-w: min(var(--element-size), var(--element-size));
   --element-spacing: 0;
 
-  text-align: center;
-  min-width: var(--element-w);
+  @apply text-center justify-center items-center;
 }
 
-@utility element-full-w {
+@utility element-w-full {
   --element-w: 100%;
 }
 
 @utility element-icon-size {
-  width: calc(var(--element-h) / 2);
-  min-width: calc(var(--element-h) / 2);
-  height: calc(var(--element-h) / 2);
-  min-height: calc(var(--element-h) / 2);
+  width: calc(var(--element-size) / 2);
+  min-width: calc(var(--element-size) / 2);
+  height: calc(var(--element-size) / 2);
+  min-height: calc(var(--element-size) / 2);
+}
+
+@utility element-rounded-full {
+  --element-rounded: calc(infinity * 1px);
 }
 
 /* Utilities */
@@ -155,6 +176,10 @@
   @apply w-max max-w-full;
 }
 
+@utility h-fix {
+  @apply h-max max-h-full;
+}
+
 @utility link {
   @apply underline decoration-transparent decoration-0 hover:decoration-palette focus-visible:decoration-palette;
 }

package/src/styles/button.css

@@ -1,15 +1,13 @@
 @utility btn {
-  --element-w: max-content;
+  --element-w: min(max-content, 100%);
 
-  @apply max-w-full flex items-center justify-center transition-all outline-solid outline-2 outline-transparent focus-visible:outline-palette disabled:opacity-50 disabled:cursor-not-allowed active:opacity-50;
+  @apply flex items-center justify-center transition-all outline-solid outline-2 outline-transparent focus-visible:outline-palette disabled:opacity-50 disabled:cursor-not-allowed active:opacity-50;
 
   width: var(--element-w);
-  height: var(--element-h);
+  height: var(--element-size);
   padding: 0 var(--element-spacing);
   gap: calc(var(--element-spacing) / 1.5);
   border-radius: var(--element-rounded);
-  font-size: var(--element-text);
-  line-height: var(--element-line);
 }
 
 @utility btn-fill {

package/src/styles/card.css

@@ -1,8 +1,6 @@
 @utility card {
   padding: var(--element-spacing);
   border-radius: var(--element-rounded);
-  font-size: var(--element-text);
-  line-height: var(--element-line);
 }
 
 @utility card-menu {

package/src/styles/components/choice.css

@@ -5,8 +5,8 @@
 @utility choice-radio {
   @apply rounded-full flex items-center justify-center;
 
-  width: var(--element-h);
-  height: var(--element-h);
+  width: var(--element-size);
+  height: var(--element-size);
 
   &[data-state="false"]>.choice-radio-trigger {
     @apply opacity-0 scale-0;
@@ -16,15 +16,15 @@
 @utility choice-radio-trigger {
   @apply bg-palette rounded-full transition-all flex items-center justify-center text-brush;
 
-  width: calc(var(--element-h) - 0.5rem);
-  height: calc(var(--element-h) - 0.5rem);
+  width: calc(var(--element-size) - 0.5rem);
+  height: calc(var(--element-size) - 0.5rem);
 }
 
 @utility choice-checkbox {
   @apply rounded-(--element-rounded) flex items-center justify-center;
 
-  width: var(--element-h);
-  height: var(--element-h);
+  width: var(--element-size);
+  height: var(--element-size);
 
   &[data-state="false"]>.choice-checkbox-trigger {
     @apply opacity-0 scale-0;
@@ -34,15 +34,15 @@
 @utility choice-checkbox-trigger {
   @apply bg-palette rounded-[calc(var(--element-rounded)-0.25rem)] transition-all flex items-center justify-center text-brush;
 
-  width: calc(var(--element-h) - 0.5rem);
-  height: calc(var(--element-h) - 0.5rem);
+  width: calc(var(--element-size) - 0.5rem);
+  height: calc(var(--element-size) - 0.5rem);
 }
 
 @utility choice-switch {
   @apply relative rounded-full flex items-center;
 
-  width: calc(var(--element-h) * 2);
-  height: var(--element-h);
+  width: calc(var(--element-size) * 2);
+  height: var(--element-size);
 
   &[data-state="true"] {
     @apply bg-palette text-brush;
@@ -50,7 +50,7 @@
     &>.choice-switch-trigger {
       @apply bg-brush text-palette;
 
-      left: calc(var(--element-h) + 0.25rem);
+      left: calc(var(--element-size) + 0.25rem);
     }
   }
 
@@ -64,6 +64,6 @@
 @utility choice-switch-trigger {
   @apply absolute rounded-full transition-all flex items-center justify-center;
 
-  width: calc(var(--element-h) - 0.5rem);
-  height: calc(var(--element-h) - 0.5rem);
+  width: calc(var(--element-size) - 0.5rem);
+  height: calc(var(--element-size) - 0.5rem);
 }

package/src/styles/components/modal.css

@@ -1,15 +1,27 @@
 @utility modal-portal {
-  @apply fixed inset-0 z-50 flex items-center justify-center bg-foreground/50;
+  @apply fixed inset-0 z-50 p-(--element-spacing) flex bg-foreground/50;
 }
 
 @utility modal-body {
-  @apply w-max max-w-[90%] h-full max-h-[90%] flex items-center justify-center flex-col;
+  @apply w-fix h-fix flex flex-col;
+
+  &:has(.modal-header) .modal-content {
+    @apply rounded-t-none;
+  }
+
+  &:has(.modal-footer) .modal-content {
+    @apply rounded-b-none;
+  }
 }
 
 @utility modal-header {
-  @apply w-full h-[calc(var(--element-h)*1.5)] flex items-center px-(--element-spacing) bg-background rounded-t-(--element-rounded) border-b border-background-thin sticky top-0;
+  @apply min-h-(--element-size) flex items-center p-(--element-spacing) gap-(--element-spacing) bg-background rounded-t-(--element-rounded) border-b border-background-thin sticky top-0 shrink-0;
+}
+
+@utility modal-footer {
+  @apply min-h-(--element-size) flex items-center p-(--element-spacing) gap-(--element-spacing) bg-background rounded-b-(--element-rounded) border-t border-background-thin sticky bottom-0 shrink-0;
 }
 
 @utility modal-content {
-  @apply w-full py-(--element-spacing) px-(--element-spacing) bg-background rounded-b-(--element-rounded) max-h-[calc(100%-(var(--element-h)*1.5))] overflow-y-auto;
+  @apply w-full p-(--element-spacing) bg-background rounded-(--element-rounded) overflow-y-auto;
 }

package/src/styles/components/progress.css

@@ -1,5 +1,5 @@
 @utility progress {
-  @apply w-full rounded-(--element-rounded) overflow-hidden h-(--element-h) bg-palette/10;
+  @apply w-full rounded-(--element-rounded) overflow-hidden h-(--element-size) bg-palette/10;
 }
 
 @utility progress-bar {

package/src/styles/components/select-box.css

@@ -7,5 +7,5 @@
 }
 
 @utility select-box-option {
-  @apply btn element-full-w justify-start;
+  @apply btn element-w-full justify-start;
 }

package/src/styles/input.css

@@ -6,9 +6,7 @@
   @apply text-palette flex cursor-text relative transition-all outline-solid outline-2 outline-transparent focus-within:outline-palette disabled:opacity-50 disabled:cursor-not-allowed has-[[type=file]]:cursor-pointer;
 
   width: var(--element-w);
-  height: var(--element-h);
-  font-size: var(--element-text);
-  line-height: var(--element-line);
+  height: var(--element-size);
   border-radius: var(--element-rounded);
   padding: var(--element-spacing);
   gap: var(--element-spacing);

package/src/styles/kbd.css

@@ -3,8 +3,6 @@
 
   padding: var(--element-spacing);
   border-radius: var(--element-rounded);
-  font-size: var(--element-text);
-  line-height: var(--element-line);
   box-shadow: 0 2px 0 1px var(--color-palette);
 
   &:active {