@brijbyte/agentic-ui 0.0.1 → 0.0.2

package/dist/styles/tokens.css

@@ -1,4 +1,4 @@
-@layer base {
+@layer theme {
   :root {
     --font-display: "New York", "Iowan Old Style", "Palatino Linotype", "URW Palladio L", Georgia, serif;
     --font-mono: "Berkeley Mono", "JetBrains Mono", "Fira Code", "Cascadia Code", "SF Mono", "Menlo", ui-monospace, "Courier New", monospace;
@@ -76,28 +76,28 @@
 
   :root, [data-theme="light"] {
     color-scheme: light;
-    --color-bg-base: #f5f5f5;
-    --color-bg-elevated: #fff;
-    --color-bg-sunken: #ebebeb;
-    --color-bg-overlay: #ffffffeb;
-    --color-bg-sidebar: #f6f6f6f2;
-    --color-surface-1: #fff;
-    --color-surface-2: #f9f9f9;
-    --color-surface-3: #f4f4f4;
-    --color-surface-hover: #0000000a;
-    --color-surface-active: #00000012;
-    --color-surface-selected: #0078d41a;
-    --color-text-primary: #000000e0;
-    --color-text-secondary: #0000008c;
-    --color-text-tertiary: #0000005c;
-    --color-text-disabled: #0000003d;
-    --color-text-inverse: #fffffff2;
-    --color-text-on-accent: #fff;
-    --color-text-code: #0f766e;
-    --color-border-base: #0000001f;
-    --color-border-strong: #00000038;
-    --color-border-subtle: #0000000f;
-    --color-border-focus: var(--color-focus-ring);
+    --color-canvas: #f0eff0;
+    --color-elevated: #fafafa;
+    --color-sunken: #e8e7e8;
+    --color-overlay: #fafafaeb;
+    --color-sidebar: #f4f3f4f5;
+    --color-surface-1: #fafafa;
+    --color-surface-2: #f4f3f4;
+    --color-surface-3: #eeeded;
+    --color-hover: #0000000a;
+    --color-active: #00000012;
+    --color-selected: #0078d41a;
+    --color-primary: #000000e0;
+    --color-secondary: #0000008c;
+    --color-tertiary: #0000005c;
+    --color-disabled: #0000003d;
+    --color-inverse: #fffffff2;
+    --color-on-accent: #fff;
+    --color-code: #0f766e;
+    --color-line: #0000001f;
+    --color-line-strong: #00000038;
+    --color-line-subtle: #0000000f;
+    --color-line-focus: var(--color-focus-ring);
     --color-accent: #0078d4;
     --color-accent-hover: #006bbf;
     --color-accent-pressed: #005ea8;
@@ -112,7 +112,7 @@
     --shadow-popover: 0 8px 24px -4px #00000029, 0 2px 6px -2px #0000001a;
     --shadow-sheet: 0 -4px 16px 0 #0000001f;
     --shadow-inset: inset 0 1px 2px 0 #00000014;
-    --shadow-focus: 0 0 0 2px var(--color-bg-base), 0 0 0 4px var(--color-focus-ring);
+    --shadow-focus: 0 0 0 2px var(--color-canvas), 0 0 0 4px var(--color-focus-ring);
     --color-success-bg: #f0fdf4;
     --color-success-border: #bbf7d0;
     --color-success-text: #15803d;
@@ -129,41 +129,41 @@
     --color-info-border: #bfdbfe;
     --color-info-text: #1d4ed8;
     --color-info-solid: #2563eb;
-    --color-code-bg: #f6f8fa;
+    --color-code-canvas: #f6f8fa;
     --color-code-border: #d0d7de;
     --color-code-comment: #6e7781;
     --color-code-keyword: #cf222e;
     --color-code-string: #0a3069;
     --color-code-number: #0550ae;
     --color-code-function: #8250df;
-    --color-scrollbar-thumb: #0003;
-    --color-scrollbar-track: transparent;
+    --color-thumb: #0003;
+    --color-track: transparent;
   }
 
   @media (prefers-color-scheme: dark) {
     :root:not([data-theme="light"]), :root:not([data-theme="light"]) [data-theme="dark"] {
       color-scheme: dark;
-      --color-bg-base: #1c1c1e;
-      --color-bg-elevated: #2c2c2e;
-      --color-bg-sunken: #141416;
-      --color-bg-overlay: #1e1e20eb;
-      --color-bg-sidebar: #1c1c1ef2;
+      --color-canvas: #1c1c1e;
+      --color-elevated: #2c2c2e;
+      --color-sunken: #141416;
+      --color-overlay: #1e1e20eb;
+      --color-sidebar: #1c1c1ef2;
       --color-surface-1: #2c2c2e;
       --color-surface-2: #3a3a3c;
       --color-surface-3: #48484a;
-      --color-surface-hover: #ffffff0f;
-      --color-surface-active: #ffffff1a;
-      --color-surface-selected: #0a84ff29;
-      --color-text-primary: #ffffffeb;
-      --color-text-secondary: #ffffff8c;
-      --color-text-tertiary: #ffffff5c;
-      --color-text-disabled: #ffffff3d;
-      --color-text-inverse: #000000e0;
-      --color-text-on-accent: #fff;
-      --color-text-code: #2dd4bf;
-      --color-border-base: #ffffff1f;
-      --color-border-strong: #ffffff38;
-      --color-border-subtle: #ffffff0f;
+      --color-hover: #ffffff0f;
+      --color-active: #ffffff1a;
+      --color-selected: #0a84ff29;
+      --color-primary: #ffffffeb;
+      --color-secondary: #ffffff8c;
+      --color-tertiary: #ffffff5c;
+      --color-disabled: #ffffff3d;
+      --color-inverse: #000000e0;
+      --color-on-accent: #fff;
+      --color-code: #2dd4bf;
+      --color-line: #ffffff1f;
+      --color-line-strong: #ffffff38;
+      --color-line-subtle: #ffffff0f;
       --color-accent: #0a84ff;
       --color-accent-hover: #0071e3;
       --color-accent-pressed: #005bb5;
@@ -178,7 +178,7 @@
       --shadow-popover: 0 8px 24px -4px #00000080, 0 2px 6px -2px #0006;
       --shadow-sheet: 0 -4px 16px 0 #0006;
       --shadow-inset: inset 0 1px 2px 0 #0000004d;
-      --shadow-focus: 0 0 0 2px var(--color-bg-base), 0 0 0 4px var(--color-focus-ring);
+      --shadow-focus: 0 0 0 2px var(--color-canvas), 0 0 0 4px var(--color-focus-ring);
       --color-success-bg: #16a34a1f;
       --color-success-border: #16a34a4d;
       --color-success-text: #4ade80;
@@ -195,41 +195,41 @@
       --color-info-border: #2563eb4d;
       --color-info-text: #60a5fa;
       --color-info-solid: #3b82f6;
-      --color-code-bg: #161b22;
+      --color-code-canvas: #161b22;
       --color-code-border: #ffffff1a;
       --color-code-comment: #8b949e;
       --color-code-keyword: #ff7b72;
       --color-code-string: #a5d6ff;
       --color-code-number: #79c0ff;
       --color-code-function: #d2a8ff;
-      --color-scrollbar-thumb: #fff3;
-      --color-scrollbar-track: transparent;
+      --color-thumb: #fff3;
+      --color-track: transparent;
     }
   }
 
   [data-theme="dark"] {
     color-scheme: dark;
-    --color-bg-base: #1c1c1e;
-    --color-bg-elevated: #2c2c2e;
-    --color-bg-sunken: #141416;
-    --color-bg-overlay: #1e1e20eb;
-    --color-bg-sidebar: #1c1c1ef2;
+    --color-canvas: #1c1c1e;
+    --color-elevated: #2c2c2e;
+    --color-sunken: #141416;
+    --color-overlay: #1e1e20eb;
+    --color-sidebar: #1c1c1ef2;
     --color-surface-1: #2c2c2e;
     --color-surface-2: #3a3a3c;
     --color-surface-3: #48484a;
-    --color-surface-hover: #ffffff0f;
-    --color-surface-active: #ffffff1a;
-    --color-surface-selected: #0a84ff29;
-    --color-text-primary: #ffffffeb;
-    --color-text-secondary: #ffffff8c;
-    --color-text-tertiary: #ffffff5c;
-    --color-text-disabled: #ffffff3d;
-    --color-text-inverse: #000000e0;
-    --color-text-on-accent: #fff;
-    --color-text-code: #2dd4bf;
-    --color-border-base: #ffffff1f;
-    --color-border-strong: #ffffff38;
-    --color-border-subtle: #ffffff0f;
+    --color-hover: #ffffff0f;
+    --color-active: #ffffff1a;
+    --color-selected: #0a84ff29;
+    --color-primary: #ffffffeb;
+    --color-secondary: #ffffff8c;
+    --color-tertiary: #ffffff5c;
+    --color-disabled: #ffffff3d;
+    --color-inverse: #000000e0;
+    --color-on-accent: #fff;
+    --color-code: #2dd4bf;
+    --color-line: #ffffff1f;
+    --color-line-strong: #ffffff38;
+    --color-line-subtle: #ffffff0f;
     --color-accent: #0a84ff;
     --color-accent-hover: #0071e3;
     --color-accent-pressed: #005bb5;
@@ -244,7 +244,7 @@
     --shadow-popover: 0 8px 24px -4px #00000080, 0 2px 6px -2px #0006;
     --shadow-sheet: 0 -4px 16px 0 #0006;
     --shadow-inset: inset 0 1px 2px 0 #0000004d;
-    --shadow-focus: 0 0 0 2px var(--color-bg-base), 0 0 0 4px var(--color-focus-ring);
+    --shadow-focus: 0 0 0 2px var(--color-canvas), 0 0 0 4px var(--color-focus-ring);
     --color-success-bg: #16a34a1f;
     --color-success-border: #16a34a4d;
     --color-success-text: #4ade80;
@@ -261,14 +261,16 @@
     --color-info-border: #2563eb4d;
     --color-info-text: #60a5fa;
     --color-info-solid: #3b82f6;
-    --color-code-bg: #161b22;
+    --color-code-canvas: #161b22;
     --color-code-border: #ffffff1a;
     --color-code-comment: #8b949e;
     --color-code-keyword: #ff7b72;
     --color-code-string: #a5d6ff;
     --color-code-number: #79c0ff;
     --color-code-function: #d2a8ff;
-    --color-scrollbar-thumb: #fff3;
-    --color-scrollbar-track: transparent;
+    --color-thumb: #fff3;
+    --color-track: transparent;
   }
 }
+
+@layer base, components, utilities;

package/dist/switch/switch.css

@@ -1,5 +1,3 @@
-@layer theme, base;
-
 @layer components {
   .root_3hDtBa {
     align-items: center;
@@ -17,7 +15,7 @@
   .thumb-track_3hDtBa {
     border-radius: var(--radius-full);
     background-color: var(--color-surface-3);
-    border: var(--border-width-base) solid var(--color-border-base);
+    border: var(--border-width-base) solid var(--color-line);
     width: 36px;
     height: 20px;
     transition: background-color var(--duration-normal) var(--easing-standard),
@@ -61,8 +59,6 @@
   .label_3hDtBa {
     font-family: var(--font-mono);
     font-size: var(--font-size-sm);
-    color: var(--color-text-primary);
+    color: var(--color-primary);
   }
 }
-
-@layer utilities;

package/dist/switch/switch.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.module.js","names":[],"sources":["../../src/switch/switch.module.css"],"sourcesContent":["@layer theme, base, components, utilities;\n\n@layer components {\n  .root {\n    display: flex;\n    align-items: center;\n    gap: var(--space-2);\n    cursor: pointer;\n    user-select: none;\n  }\n\n  .root[data-disabled] {\n    opacity: 0.44;\n    cursor: not-allowed;\n  }\n\n  .thumb-track {\n    position: relative;\n    width: 36px;\n    height: 20px;\n    border-radius: var(--radius-full);\n    background-color: var(--color-surface-3);\n    border: var(--border-width-base) solid var(--color-border-base);\n    transition:\n      background-color var(--duration-normal) var(--easing-standard),\n      border-color var(--duration-normal) var(--easing-standard),\n      box-shadow var(--duration-fast) var(--easing-standard);\n    outline: none;\n    flex-shrink: 0;\n  }\n\n  .thumb-track:focus-visible {\n    box-shadow: var(--shadow-focus);\n  }\n\n  .thumb-track[data-checked] {\n    background-color: var(--color-accent);\n    border-color: var(--color-accent);\n  }\n\n  .thumb-track[data-checked]:hover {\n    background-color: var(--color-accent-hover);\n    border-color: var(--color-accent-hover);\n  }\n\n  .thumb {\n    position: absolute;\n    top: 2px;\n    left: 2px;\n    width: 14px;\n    height: 14px;\n    border-radius: var(--radius-full);\n    background-color: #ffffff;\n    box-shadow: var(--shadow-xs);\n    transition: transform var(--duration-normal) var(--easing-spring);\n  }\n\n  .thumb-track[data-checked] .thumb {\n    transform: translateX(16px);\n  }\n\n  .label {\n    font-family: var(--font-mono);\n    font-size: var(--font-size-sm);\n    color: var(--color-text-primary);\n  }\n}\n"],"mappings":";AAQA,IAAA,wBAAe;CAAC,SAAK;CAAA,QAAA;CAAA,SAAA;CAAA,eAAA;CAAA"}
+{"version":3,"file":"switch.module.js","names":[],"sources":["../../src/switch/switch.module.css"],"sourcesContent":["@layer components {\n  .root {\n    display: flex;\n    align-items: center;\n    gap: var(--space-2);\n    cursor: pointer;\n    user-select: none;\n  }\n  .root[data-disabled] {\n    opacity: 0.44;\n    cursor: not-allowed;\n  }\n  .thumb-track {\n    position: relative;\n    width: 36px;\n    height: 20px;\n    border-radius: var(--radius-full);\n    background-color: var(--color-surface-3);\n    border: var(--border-width-base) solid var(--color-line);\n    transition:\n      background-color var(--duration-normal) var(--easing-standard),\n      border-color var(--duration-normal) var(--easing-standard),\n      box-shadow var(--duration-fast) var(--easing-standard);\n    outline: none;\n    flex-shrink: 0;\n  }\n  .thumb-track:focus-visible {\n    box-shadow: var(--shadow-focus);\n  }\n  .thumb-track[data-checked] {\n    background-color: var(--color-accent);\n    border-color: var(--color-accent);\n  }\n  .thumb-track[data-checked]:hover {\n    background-color: var(--color-accent-hover);\n    border-color: var(--color-accent-hover);\n  }\n  .thumb {\n    position: absolute;\n    top: 2px;\n    left: 2px;\n    width: 14px;\n    height: 14px;\n    border-radius: var(--radius-full);\n    background-color: #ffffff;\n    box-shadow: var(--shadow-xs);\n    transition: transform var(--duration-normal) var(--easing-spring);\n  }\n  .thumb-track[data-checked] .thumb {\n    transform: translateX(16px);\n  }\n  .label {\n    font-family: var(--font-mono);\n    font-size: var(--font-size-sm);\n    color: var(--color-primary);\n  }\n}\n"],"mappings":";AAQA,IAAA,wBAAa;CAAA,SAAU;CAAA,QAAA;CAAA,SAAA;CAAA,eAAA;CAAA"}

package/dist/tabs/tabs.css

@@ -1,5 +1,3 @@
-@layer theme, base;
-
 @layer components {
   .root_prqJ8a {
     flex-direction: column;
@@ -10,7 +8,7 @@
   .list_prqJ8a {
     align-items: center;
     gap: var(--space-px);
-    border-bottom: var(--border-width-base) solid var(--color-border-base);
+    border-bottom: var(--border-width-base) solid var(--color-line);
     scrollbar-width: none;
     display: flex;
     overflow-x: auto;
@@ -27,7 +25,7 @@
     font-family: var(--font-mono);
     font-size: var(--font-size-sm);
     font-weight: var(--font-weight-regular);
-    color: var(--color-text-tertiary);
+    color: var(--color-tertiary);
     cursor: pointer;
     white-space: nowrap;
     transition: color var(--duration-fast) var(--easing-standard),
@@ -43,8 +41,8 @@
   }
 
   .tab_prqJ8a:hover:not([data-disabled]) {
-    color: var(--color-text-primary);
-    border-bottom-color: var(--color-border-strong);
+    color: var(--color-primary);
+    border-bottom-color: var(--color-line-strong);
   }
 
   .tab_prqJ8a:focus-visible {
@@ -61,7 +59,7 @@
   }
 
   .tab_prqJ8a[data-active] {
-    color: var(--color-text-primary);
+    color: var(--color-primary);
     font-weight: var(--font-weight-medium);
     border-bottom-color: var(--color-accent);
   }
@@ -86,5 +84,3 @@
     border-radius: var(--radius-sm);
   }
 }
-
-@layer utilities;

package/dist/tabs/tabs.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.module.js","names":[],"sources":["../../src/tabs/tabs.module.css"],"sourcesContent":["@layer theme, base, components, utilities;\n\n@layer components {\n  .root {\n    display: flex;\n    flex-direction: column;\n    gap: 0;\n  }\n\n  /* ─── Tab List ──────────────────────────────────────── */\n  .list {\n    display: flex;\n    align-items: center;\n    gap: var(--space-px);\n    border-bottom: var(--border-width-base) solid var(--color-border-base);\n    overflow-x: auto;\n    scrollbar-width: none;\n  }\n\n  .list::-webkit-scrollbar {\n    display: none;\n  }\n\n  /* ─── Tab trigger ────────────────────────────────────── */\n  .tab {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--space-1-5);\n    padding: var(--space-1-5) var(--space-3);\n    font-family: var(--font-mono);\n    font-size: var(--font-size-sm);\n    font-weight: var(--font-weight-regular);\n    color: var(--color-text-tertiary);\n    border: none;\n    background: none;\n    cursor: pointer;\n    outline: none;\n    white-space: nowrap;\n    position: relative;\n    margin-bottom: -1px;\n    border-bottom: 3px solid transparent;\n    transition:\n      color var(--duration-fast) var(--easing-standard),\n      border-color var(--duration-fast) var(--easing-standard);\n    user-select: none;\n  }\n\n  .tab:hover:not([data-disabled]) {\n    color: var(--color-text-primary);\n    border-bottom-color: var(--color-border-strong);\n  }\n\n  .tab:focus-visible {\n    outline: none;\n  }\n\n  .tab:focus-visible::after {\n    content: \"\";\n    position: absolute;\n    inset: 2px 2px 8px;\n    border-radius: var(--radius-sm);\n    box-shadow: var(--shadow-focus);\n    pointer-events: none;\n  }\n\n  .tab[data-active] {\n    color: var(--color-text-primary);\n    font-weight: var(--font-weight-medium);\n    border-bottom-color: var(--color-accent);\n  }\n\n  .tab[data-disabled] {\n    opacity: 0.44;\n    cursor: not-allowed;\n  }\n\n  /* ─── Tab panel ─────────────────────────────────────── */\n  .panel {\n    padding-top: var(--space-4);\n    outline: none;\n    transition: opacity 150ms var(--easing-ease-out);\n  }\n\n  .panel[data-starting-style] {\n    opacity: 0;\n  }\n\n  .panel:focus-visible {\n    box-shadow: var(--shadow-focus);\n    border-radius: var(--radius-sm);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"tabs.module.js","names":[],"sources":["../../src/tabs/tabs.module.css"],"sourcesContent":["@layer components {\n  .root {\n    display: flex;\n    flex-direction: column;\n    gap: 0;\n  }\n  /* ─── Tab List ──────────────────────────────────────── */\n  .list {\n    display: flex;\n    align-items: center;\n    gap: var(--space-px);\n    border-bottom: var(--border-width-base) solid var(--color-line);\n    overflow-x: auto;\n    scrollbar-width: none;\n  }\n  .list::-webkit-scrollbar {\n    display: none;\n  }\n  /* ─── Tab trigger ────────────────────────────────────── */\n  .tab {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--space-1-5);\n    padding: var(--space-1-5) var(--space-3);\n    font-family: var(--font-mono);\n    font-size: var(--font-size-sm);\n    font-weight: var(--font-weight-regular);\n    color: var(--color-tertiary);\n    border: none;\n    background: none;\n    cursor: pointer;\n    outline: none;\n    white-space: nowrap;\n    position: relative;\n    margin-bottom: -1px;\n    border-bottom: 3px solid transparent;\n    transition:\n      color var(--duration-fast) var(--easing-standard),\n      border-color var(--duration-fast) var(--easing-standard);\n    user-select: none;\n  }\n  .tab:hover:not([data-disabled]) {\n    color: var(--color-primary);\n    border-bottom-color: var(--color-line-strong);\n  }\n  .tab:focus-visible {\n    outline: none;\n  }\n  .tab:focus-visible::after {\n    content: \"\";\n    position: absolute;\n    inset: 2px 2px 8px;\n    border-radius: var(--radius-sm);\n    box-shadow: var(--shadow-focus);\n    pointer-events: none;\n  }\n  .tab[data-active] {\n    color: var(--color-primary);\n    font-weight: var(--font-weight-medium);\n    border-bottom-color: var(--color-accent);\n  }\n  .tab[data-disabled] {\n    opacity: 0.44;\n    cursor: not-allowed;\n  }\n  /* ─── Tab panel ─────────────────────────────────────── */\n  .panel {\n    padding-top: var(--space-4);\n    outline: none;\n    transition: opacity 150ms var(--easing-ease-out);\n  }\n  .panel[data-starting-style] {\n    opacity: 0;\n  }\n  .panel:focus-visible {\n    box-shadow: var(--shadow-focus);\n    border-radius: var(--radius-sm);\n  }\n}\n"],"mappings":";AAQA,IAAA,sBAAa;CAAA,QAAI;CAAA,SAAA;CAAA,QAAA;CAAA,OAAA;CAAA"}

package/dist/tailwind-theme.css

@@ -14,9 +14,9 @@
  * overrides work automatically without any Tailwind configuration.
  *
  * Generated utility examples:
- *   bg-bg-base        → background-color: var(--color-bg-base)
- *   text-text-primary → color: var(--color-text-primary)
- *   border-border-base→ border-color: var(--color-border-base)
+ *   bg-canvas         → background-color: var(--color-canvas)
+ *   text-primary      → color: var(--color-primary)
+ *   border-line       → border-color: var(--color-line)
  *   font-mono         → font-family: var(--font-mono)
  *   rounded-md        → border-radius: var(--radius-md)
  *   shadow-sm         → box-shadow: var(--shadow-sm)
@@ -24,34 +24,34 @@
 
 @theme inline {
   /* ── Backgrounds ────────────────────────────────────────────── */
-  --color-bg-base: var(--color-bg-base);
-  --color-bg-elevated: var(--color-bg-elevated);
-  --color-bg-sunken: var(--color-bg-sunken);
-  --color-bg-overlay: var(--color-bg-overlay);
-  --color-bg-sidebar: var(--color-bg-sidebar);
+  --color-canvas: var(--color-canvas);
+  --color-elevated: var(--color-elevated);
+  --color-sunken: var(--color-sunken);
+  --color-overlay: var(--color-overlay);
+  --color-sidebar: var(--color-sidebar);
 
   /* ── Surfaces ───────────────────────────────────────────────── */
   --color-surface-1: var(--color-surface-1);
   --color-surface-2: var(--color-surface-2);
   --color-surface-3: var(--color-surface-3);
-  --color-surface-hover: var(--color-surface-hover);
-  --color-surface-active: var(--color-surface-active);
-  --color-surface-selected: var(--color-surface-selected);
+  --color-hover: var(--color-hover);
+  --color-active: var(--color-active);
+  --color-selected: var(--color-selected);
 
   /* ── Text ───────────────────────────────────────────────────── */
-  --color-text-primary: var(--color-text-primary);
-  --color-text-secondary: var(--color-text-secondary);
-  --color-text-tertiary: var(--color-text-tertiary);
-  --color-text-disabled: var(--color-text-disabled);
-  --color-text-inverse: var(--color-text-inverse);
-  --color-text-on-accent: var(--color-text-on-accent);
-  --color-text-code: var(--color-text-code);
+  --color-primary: var(--color-primary);
+  --color-secondary: var(--color-secondary);
+  --color-tertiary: var(--color-tertiary);
+  --color-disabled: var(--color-disabled);
+  --color-inverse: var(--color-inverse);
+  --color-on-accent: var(--color-on-accent);
+  --color-code: var(--color-code);
 
   /* ── Borders ────────────────────────────────────────────────── */
-  --color-border-base: var(--color-border-base);
-  --color-border-strong: var(--color-border-strong);
-  --color-border-subtle: var(--color-border-subtle);
-  --color-border-focus: var(--color-border-focus);
+  --color-line: var(--color-line);
+  --color-line-strong: var(--color-line-strong);
+  --color-line-subtle: var(--color-line-subtle);
+  --color-line-focus: var(--color-line-focus);
 
   /* ── Accent (macOS blue) ────────────────────────────────────── */
   --color-accent: var(--color-accent);
@@ -85,7 +85,7 @@
   --color-info-solid: var(--color-info-solid);
 
   /* ── Code syntax ────────────────────────────────────────────── */
-  --color-code-bg: var(--color-code-bg);
+  --color-code-canvas: var(--color-code-canvas);
   --color-code-border: var(--color-code-border);
   --color-code-keyword: var(--color-code-keyword);
   --color-code-string: var(--color-code-string);

package/dist/toast/toast.css

@@ -1,5 +1,3 @@
-@layer theme, base;
-
 @layer components {
   .viewport_QXnIWW {
     bottom: var(--space-4);
@@ -27,8 +25,8 @@
     align-items: flex-start;
     gap: var(--space-3);
     padding: var(--space-3) var(--space-4);
-    background-color: var(--color-bg-overlay);
-    border: var(--border-width-base) solid var(--color-border-base);
+    background-color: var(--color-overlay);
+    border: var(--border-width-base) solid var(--color-line);
     border-radius: var(--radius-xl);
     box-shadow: var(--shadow-popover);
     pointer-events: auto;
@@ -119,19 +117,19 @@
   }
 
   .toast-success_QXnIWW {
-    background-color: color-mix(in srgb, var(--color-success-solid) 6%, var(--color-bg-overlay));
+    background-color: color-mix(in srgb, var(--color-success-solid) 6%, var(--color-overlay));
   }
 
   .toast-error_QXnIWW {
-    background-color: color-mix(in srgb, var(--color-error-solid) 6%, var(--color-bg-overlay));
+    background-color: color-mix(in srgb, var(--color-error-solid) 6%, var(--color-overlay));
   }
 
   .toast-warning_QXnIWW {
-    background-color: color-mix(in srgb, var(--color-warning-solid) 6%, var(--color-bg-overlay));
+    background-color: color-mix(in srgb, var(--color-warning-solid) 6%, var(--color-overlay));
   }
 
   .toast-info_QXnIWW {
-    background-color: color-mix(in srgb, var(--color-info-solid) 6%, var(--color-bg-overlay));
+    background-color: color-mix(in srgb, var(--color-info-solid) 6%, var(--color-overlay));
   }
 
   .icon_QXnIWW {
@@ -169,14 +167,14 @@
     font-family: var(--font-mono);
     font-size: var(--font-size-sm);
     font-weight: var(--font-weight-medium);
-    color: var(--color-text-primary);
+    color: var(--color-primary);
     line-height: var(--line-height-normal);
   }
 
   .description_QXnIWW {
     font-family: var(--font-mono);
     font-size: var(--font-size-xs);
-    color: var(--color-text-secondary);
+    color: var(--color-secondary);
     line-height: var(--line-height-relaxed);
   }
 
@@ -184,7 +182,7 @@
     border-radius: var(--radius-sm);
     width: 20px;
     height: 20px;
-    color: var(--color-text-tertiary);
+    color: var(--color-tertiary);
     cursor: pointer;
     transition: background-color var(--duration-fast) var(--easing-standard),
       color var(--duration-fast) var(--easing-standard);
@@ -199,13 +197,11 @@
   }
 
   .close_QXnIWW:hover {
-    background-color: var(--color-surface-hover);
-    color: var(--color-text-primary);
+    background-color: var(--color-hover);
+    color: var(--color-primary);
   }
 
   .close_QXnIWW:focus-visible {
     box-shadow: var(--shadow-focus);
   }
 }
-
-@layer utilities;

package/dist/toast/toast.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.module.js","names":[],"sources":["../../src/toast/toast.module.css"],"sourcesContent":["@layer theme, base, components, utilities;\n\n@layer components {\n  /* ─── Viewport ───────────────────────────────────────────────────── */\n\n  .viewport {\n    position: fixed;\n    bottom: var(--space-4);\n    right: var(--space-4);\n    z-index: var(--z-toast);\n    display: flex;\n    flex-direction: column;\n    width: 360px;\n    max-width: calc(100vw - var(--space-8));\n    list-style: none;\n    pointer-events: none;\n    outline: none;\n  }\n\n  /* List variant — toasts sit in a normal column */\n  .viewport-list {\n    gap: var(--space-2);\n  }\n\n  /* Stacked variant — toasts overlap; viewport height = frontmost toast */\n  .viewport-stacked {\n    gap: 0;\n  }\n\n  /* ─── Toast base ─────────────────────────────────────────────────── */\n\n  .toast {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--space-3);\n    padding: var(--space-3) var(--space-4);\n    background-color: var(--color-bg-overlay);\n    border: var(--border-width-base) solid var(--color-border-base);\n    border-radius: var(--radius-xl);\n    box-shadow: var(--shadow-popover);\n    pointer-events: auto;\n    cursor: default;\n    width: 100%;\n  }\n\n  @supports (backdrop-filter: blur(12px)) {\n    .toast {\n      backdrop-filter: blur(12px) saturate(1.5);\n      -webkit-backdrop-filter: blur(12px) saturate(1.5);\n    }\n  }\n\n  /* ─── List mode animations ───────────────────────────────────────── */\n\n  .viewport-list .toast {\n    transform-origin: bottom right;\n    opacity: 1;\n    transform: translateX(0);\n    transition:\n      opacity 300ms var(--easing-ease-out),\n      transform 300ms var(--easing-spring);\n\n    @starting-style {\n      opacity: 0;\n      transform: translateX(calc(100% + var(--space-4)));\n    }\n  }\n\n  .viewport-list .toast[data-ending-style] {\n    opacity: 0;\n    transform: translateX(calc(100% + var(--space-4)));\n    transition:\n      opacity 200ms var(--easing-ease-in),\n      transform 200ms var(--easing-ease-in);\n  }\n\n  /* ─── Stacked mode ───────────────────────────────────────────────── */\n\n  /*\n   * Base UI provides on each toast root (as inline styles):\n   *   --toast-index   : plain integer, 0 = frontmost/newest\n   *   --toast-offset-y: \"Npx\" — cumulative height of all toasts above\n   *   --toast-height  : \"Npx\" — this toast's measured height\n   *\n   * Base UI provides on the viewport:\n   *   --toast-frontmost-height: \"Npx\" — height of index-0 toast\n   *\n   * Collapsed: toasts sit at bottom:0, stacked via scale+translate.\n   * Expanded (data-expanded): each toast moves to its offset position.\n   */\n\n  .viewport-stacked {\n    height: calc(var(--toast-frontmost-height, 64px) + 20px);\n    padding-top: 20px;\n    box-sizing: content-box;\n    clip-path: inset(0 0 0 0 round var(--radius-xl));\n    transition:\n      clip-path 200ms var(--easing-ease-out),\n      height 200ms var(--easing-ease-out);\n  }\n\n  .viewport-stacked[data-expanded] {\n    clip-path: inset(-9999px 0 0 0 round var(--radius-xl));\n    height: calc(var(--toast-frontmost-height, 64px) + 20px);\n  }\n\n  /* Fill the gaps between expanded toasts so the mouse doesn't leave\n     the viewport as it moves between them, which would collapse the stack */\n  .viewport-stacked[data-expanded]::after {\n    content: \"\";\n    position: absolute;\n    inset: -9999px 0 0 0;\n    pointer-events: auto;\n    z-index: 0;\n  }\n\n  .toast-stacked {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n\n    z-index: calc(50 - var(--toast-index));\n\n    transform: translateY(calc(var(--toast-index) * -8px)) scale(calc(1 - var(--toast-index) * 0.04));\n    transform-origin: bottom center;\n    opacity: calc(1 - var(--toast-index) * 0.15);\n\n    transition:\n      transform 200ms var(--easing-ease-out),\n      opacity 200ms var(--easing-ease-out);\n  }\n\n  /* Expanded: each toast animates to its stacked position with a gap */\n  .viewport-stacked[data-expanded] .toast-stacked {\n    transform: translateY(calc((var(--toast-offset-y) + var(--toast-index) * 8px) * -1));\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  /* Enter: new toast slides up from below */\n  .viewport-stacked .toast-stacked {\n    @starting-style {\n      opacity: 0;\n      transform: translateY(16px) scale(calc(1 - var(--toast-index) * 0.04));\n    }\n  }\n\n  /* Exit: dismissed toast slides right */\n  .viewport-stacked .toast-stacked[data-ending-style] {\n    opacity: 0;\n    transform: translateX(calc(100% + var(--space-4)));\n    transition:\n      opacity 150ms var(--easing-ease-in),\n      transform 150ms var(--easing-ease-in);\n  }\n\n  /* ─── Variant tints ──────────────────────────────────────────────── */\n\n  .toast-success {\n    background-color: color-mix(in srgb, var(--color-success-solid) 6%, var(--color-bg-overlay));\n  }\n\n  .toast-error {\n    background-color: color-mix(in srgb, var(--color-error-solid) 6%, var(--color-bg-overlay));\n  }\n\n  .toast-warning {\n    background-color: color-mix(in srgb, var(--color-warning-solid) 6%, var(--color-bg-overlay));\n  }\n\n  .toast-info {\n    background-color: color-mix(in srgb, var(--color-info-solid) 6%, var(--color-bg-overlay));\n  }\n\n  /* ─── Icon ───────────────────────────────────────────────────────── */\n\n  .icon {\n    flex-shrink: 0;\n    width: 16px;\n    height: 16px;\n    margin-top: 1px;\n  }\n\n  .icon-success {\n    color: var(--color-success-solid);\n  }\n  .icon-warning {\n    color: var(--color-warning-solid);\n  }\n  .icon-error {\n    color: var(--color-error-solid);\n  }\n  .icon-info {\n    color: var(--color-info-solid);\n  }\n\n  /* ─── Content ────────────────────────────────────────────────────── */\n\n  .content {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    gap: var(--space-0-5);\n    min-width: 0;\n  }\n\n  .title {\n    font-family: var(--font-mono);\n    font-size: var(--font-size-sm);\n    font-weight: var(--font-weight-medium);\n    color: var(--color-text-primary);\n    line-height: var(--line-height-normal);\n  }\n\n  .description {\n    font-family: var(--font-mono);\n    font-size: var(--font-size-xs);\n    color: var(--color-text-secondary);\n    line-height: var(--line-height-relaxed);\n  }\n\n  /* ─── Close button ───────────────────────────────────────────────── */\n\n  .close {\n    flex-shrink: 0;\n    width: 20px;\n    height: 20px;\n    border-radius: var(--radius-sm);\n    border: none;\n    background: transparent;\n    color: var(--color-text-tertiary);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    outline: none;\n    transition:\n      background-color var(--duration-fast) var(--easing-standard),\n      color var(--duration-fast) var(--easing-standard);\n    margin-top: 1px;\n  }\n\n  .close:hover {\n    background-color: var(--color-surface-hover);\n    color: var(--color-text-primary);\n  }\n\n  .close:focus-visible {\n    box-shadow: var(--shadow-focus);\n  }\n}\n"],"mappings":";AAoCA,IAAA,uBAAe;CAAA,SAAO;CAAe,WAAQ;CAAA,eAAA;CAAA,QAAA;CAAA,cAAA;CAAA,aAAA;CAAA,gBAAA;CAAA,gBAAA;CAAA,SAAA;CAAA,SAAA;CAAA,eAAA;CAAA,cAAA;CAAA,iBAAA;CAAA,iBAAA;CAAA,iBAAA;CAAA,YAAA;CAAA,iBAAA;CAAA,oBAAA;CAAA"}
+{"version":3,"file":"toast.module.js","names":[],"sources":["../../src/toast/toast.module.css"],"sourcesContent":["@layer components {\n  /* ─── Viewport ───────────────────────────────────────────────────── */\n  .viewport {\n    position: fixed;\n    bottom: var(--space-4);\n    right: var(--space-4);\n    z-index: var(--z-toast);\n    display: flex;\n    flex-direction: column;\n    width: 360px;\n    max-width: calc(100vw - var(--space-8));\n    list-style: none;\n    pointer-events: none;\n    outline: none;\n  }\n  /* List variant — toasts sit in a normal column */\n  .viewport-list {\n    gap: var(--space-2);\n  }\n  /* Stacked variant — toasts overlap; viewport height = frontmost toast */\n  .viewport-stacked {\n    gap: 0;\n  }\n  /* ─── Toast base ─────────────────────────────────────────────────── */\n  .toast {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--space-3);\n    padding: var(--space-3) var(--space-4);\n    background-color: var(--color-overlay);\n    border: var(--border-width-base) solid var(--color-line);\n    border-radius: var(--radius-xl);\n    box-shadow: var(--shadow-popover);\n    pointer-events: auto;\n    cursor: default;\n    width: 100%;\n  }\n  @supports (backdrop-filter: blur(12px)) {\n    .toast {\n      backdrop-filter: blur(12px) saturate(1.5);\n      -webkit-backdrop-filter: blur(12px) saturate(1.5);\n    }\n  }\n  /* ─── List mode animations ───────────────────────────────────────── */\n  .viewport-list .toast {\n    transform-origin: bottom right;\n    opacity: 1;\n    transform: translateX(0);\n    transition:\n      opacity 300ms var(--easing-ease-out),\n      transform 300ms var(--easing-spring);\n    @starting-style {\n      opacity: 0;\n      transform: translateX(calc(100% + var(--space-4)));\n    }\n  }\n  .viewport-list .toast[data-ending-style] {\n    opacity: 0;\n    transform: translateX(calc(100% + var(--space-4)));\n    transition:\n      opacity 200ms var(--easing-ease-in),\n      transform 200ms var(--easing-ease-in);\n  }\n  /* ─── Stacked mode ───────────────────────────────────────────────── */\n  /*\n   * Base UI provides on each toast root (as inline styles):\n   *   --toast-index   : plain integer, 0 = frontmost/newest\n   *   --toast-offset-y: \"Npx\" — cumulative height of all toasts above\n   *   --toast-height  : \"Npx\" — this toast's measured height\n   *\n   * Base UI provides on the viewport:\n   *   --toast-frontmost-height: \"Npx\" — height of index-0 toast\n   *\n   * Collapsed: toasts sit at bottom:0, stacked via scale+translate.\n   * Expanded (data-expanded): each toast moves to its offset position.\n   */\n  .viewport-stacked {\n    height: calc(var(--toast-frontmost-height, 64px) + 20px);\n    padding-top: 20px;\n    box-sizing: content-box;\n    clip-path: inset(0 0 0 0 round var(--radius-xl));\n    transition:\n      clip-path 200ms var(--easing-ease-out),\n      height 200ms var(--easing-ease-out);\n  }\n  .viewport-stacked[data-expanded] {\n    clip-path: inset(-9999px 0 0 0 round var(--radius-xl));\n    height: calc(var(--toast-frontmost-height, 64px) + 20px);\n  }\n  /* Fill the gaps between expanded toasts so the mouse doesn't leave\n     the viewport as it moves between them, which would collapse the stack */\n  .viewport-stacked[data-expanded]::after {\n    content: \"\";\n    position: absolute;\n    inset: -9999px 0 0 0;\n    pointer-events: auto;\n    z-index: 0;\n  }\n  .toast-stacked {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    z-index: calc(50 - var(--toast-index));\n    transform: translateY(calc(var(--toast-index) * -8px)) scale(calc(1 - var(--toast-index) * 0.04));\n    transform-origin: bottom center;\n    opacity: calc(1 - var(--toast-index) * 0.15);\n    transition:\n      transform 200ms var(--easing-ease-out),\n      opacity 200ms var(--easing-ease-out);\n  }\n  /* Expanded: each toast animates to its stacked position with a gap */\n  .viewport-stacked[data-expanded] .toast-stacked {\n    transform: translateY(calc((var(--toast-offset-y) + var(--toast-index) * 8px) * -1));\n    opacity: 1;\n    pointer-events: auto;\n  }\n  /* Enter: new toast slides up from below */\n  .viewport-stacked .toast-stacked {\n    @starting-style {\n      opacity: 0;\n      transform: translateY(16px) scale(calc(1 - var(--toast-index) * 0.04));\n    }\n  }\n  /* Exit: dismissed toast slides right */\n  .viewport-stacked .toast-stacked[data-ending-style] {\n    opacity: 0;\n    transform: translateX(calc(100% + var(--space-4)));\n    transition:\n      opacity 150ms var(--easing-ease-in),\n      transform 150ms var(--easing-ease-in);\n  }\n  /* ─── Variant tints ──────────────────────────────────────────────── */\n  .toast-success {\n    background-color: color-mix(in srgb, var(--color-success-solid) 6%, var(--color-overlay));\n  }\n  .toast-error {\n    background-color: color-mix(in srgb, var(--color-error-solid) 6%, var(--color-overlay));\n  }\n  .toast-warning {\n    background-color: color-mix(in srgb, var(--color-warning-solid) 6%, var(--color-overlay));\n  }\n  .toast-info {\n    background-color: color-mix(in srgb, var(--color-info-solid) 6%, var(--color-overlay));\n  }\n  /* ─── Icon ───────────────────────────────────────────────────────── */\n  .icon {\n    flex-shrink: 0;\n    width: 16px;\n    height: 16px;\n    margin-top: 1px;\n  }\n  .icon-success {\n    color: var(--color-success-solid);\n  }\n  .icon-warning {\n    color: var(--color-warning-solid);\n  }\n  .icon-error {\n    color: var(--color-error-solid);\n  }\n  .icon-info {\n    color: var(--color-info-solid);\n  }\n  /* ─── Content ────────────────────────────────────────────────────── */\n  .content {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    gap: var(--space-0-5);\n    min-width: 0;\n  }\n  .title {\n    font-family: var(--font-mono);\n    font-size: var(--font-size-sm);\n    font-weight: var(--font-weight-medium);\n    color: var(--color-primary);\n    line-height: var(--line-height-normal);\n  }\n  .description {\n    font-family: var(--font-mono);\n    font-size: var(--font-size-xs);\n    color: var(--color-secondary);\n    line-height: var(--line-height-relaxed);\n  }\n  /* ─── Close button ───────────────────────────────────────────────── */\n  .close {\n    flex-shrink: 0;\n    width: 20px;\n    height: 20px;\n    border-radius: var(--radius-sm);\n    border: none;\n    background: transparent;\n    color: var(--color-tertiary);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    outline: none;\n    transition:\n      background-color var(--duration-fast) var(--easing-standard),\n      color var(--duration-fast) var(--easing-standard);\n    margin-top: 1px;\n  }\n  .close:hover {\n    background-color: var(--color-hover);\n    color: var(--color-primary);\n  }\n  .close:focus-visible {\n    box-shadow: var(--shadow-focus);\n  }\n}\n"],"mappings":";AAoCA,IAAA,uBAAE;CAAA,SAAA;CAAA,WAAA;CAAA,eAAA;CAAA,QAAA;CAAA,cAAA;CAAA,aAAA;CAAA,gBAAA;CAAA,gBAAA;CAAA,SAAA;CAAA,SAAA;CAAA,eAAA;CAAA,cAAA;CAAA,iBAAA;CAAA,iBAAA;CAAA,iBAAA;CAAA,YAAA;CAAA,iBAAA;CAAA,oBAAA;CAAA"}