@brijbyte/agentic-ui 0.0.1 → 0.0.3

package/src/slider/slider.module.css

@@ -0,0 +1,110 @@
+@layer components {
+  .root {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    width: 100%;
+  }
+
+  /* ─── Label + Value row ──────────────────────────────────────── */
+
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-2);
+  }
+
+  .label {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-secondary);
+    letter-spacing: var(--letter-spacing-wide);
+    text-transform: uppercase;
+    user-select: none;
+  }
+
+  .value {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-xs);
+    color: var(--color-tertiary);
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* ─── Control (hit area) ─────────────────────────────────────── */
+
+  .control {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding-block: var(--space-2);
+    touch-action: none;
+    user-select: none;
+    cursor: pointer;
+  }
+
+  .control[data-disabled] {
+    opacity: 0.44;
+    cursor: not-allowed;
+  }
+
+  /* ─── Track ──────────────────────────────────────────────────── */
+
+  .track {
+    position: relative;
+    width: 100%;
+    height: 4px;
+    border-radius: var(--radius-full);
+    background-color: var(--color-surface-3);
+    border: var(--border-width-base) solid var(--color-line-subtle);
+    user-select: none;
+  }
+
+  /* ─── Indicator (filled portion) ────────────────────────────── */
+
+  .indicator {
+    border-radius: var(--radius-full);
+    background-color: var(--color-accent);
+    user-select: none;
+    transition: background-color var(--duration-fast) var(--easing-standard);
+  }
+
+  .root[data-disabled] .indicator {
+    background-color: var(--color-tertiary);
+  }
+
+  /* ─── Thumb ──────────────────────────────────────────────────── */
+
+  .thumb {
+    width: 16px;
+    height: 16px;
+    border-radius: var(--radius-full);
+    background-color: var(--color-elevated);
+    border: var(--border-width-base) solid var(--color-line);
+    box-shadow: var(--shadow-sm);
+    user-select: none;
+    transition:
+      transform var(--duration-fast) var(--easing-spring),
+      box-shadow var(--duration-fast) var(--easing-standard),
+      border-color var(--duration-fast) var(--easing-standard);
+  }
+
+  /* Grow on drag — gives tactile feedback */
+  .thumb[data-dragging] {
+    transform: scale(1.2);
+    border-color: var(--color-accent);
+    box-shadow: var(--shadow-md);
+  }
+
+  /* Focus ring via the nested <input> */
+  .thumb:has(:focus-visible) {
+    border-color: var(--color-accent);
+    box-shadow: var(--shadow-focus);
+  }
+
+  .thumb[data-disabled] {
+    cursor: not-allowed;
+    background-color: var(--color-surface-3);
+  }
+}

package/src/slider/slider.tsx

@@ -0,0 +1,68 @@
+import type { ReactNode } from "react";
+import { Slider as BaseSlider } from "@base-ui/react/slider";
+import styles from "./slider.module.css";
+
+export interface SliderProps {
+  value?: number | number[];
+  defaultValue?: number | number[];
+  onValueChange?: (value: number | number[], eventDetails: unknown) => void;
+  onValueCommitted?: (value: number | number[], eventDetails: unknown) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  largeStep?: number;
+  disabled?: boolean;
+  name?: string;
+  orientation?: "horizontal" | "vertical";
+  format?: Intl.NumberFormatOptions;
+  /** Visible label rendered above the track. */
+  label?: ReactNode;
+  /** Show the current value next to the label. */
+  showValue?: boolean;
+  /** Aria-label for single-thumb sliders without a visible label. */
+  "aria-label"?: string;
+  className?: string;
+}
+
+export function Slider({
+  label,
+  showValue = false,
+  className,
+  onValueChange,
+  onValueCommitted,
+  "aria-label": ariaLabel,
+  ...props
+}: SliderProps) {
+  const isRange = Array.isArray(props.defaultValue ?? props.value);
+
+  return (
+    <BaseSlider.Root
+      className={`${styles.root} ${className ?? ""}`}
+      onValueChange={onValueChange as never}
+      onValueCommitted={onValueCommitted as never}
+      {...props}
+    >
+      {(label || showValue) && (
+        <div className={styles.header}>
+          {label && <BaseSlider.Label className={styles.label}>{label}</BaseSlider.Label>}
+          {showValue && <BaseSlider.Value className={styles.value} />}
+        </div>
+      )}
+      <BaseSlider.Control className={styles.control}>
+        <BaseSlider.Track className={styles.track}>
+          <BaseSlider.Indicator className={styles.indicator} />
+          {isRange ? (
+            <>
+              <BaseSlider.Thumb index={0} className={styles.thumb} aria-label="Minimum value" />
+              <BaseSlider.Thumb index={1} className={styles.thumb} aria-label="Maximum value" />
+            </>
+          ) : (
+            <BaseSlider.Thumb className={styles.thumb} aria-label={ariaLabel} />
+          )}
+        </BaseSlider.Track>
+      </BaseSlider.Control>
+    </BaseSlider.Root>
+  );
+}
+
+export { styles as SliderStyles };

package/src/styles/layer-order.css

@@ -0,0 +1,22 @@
+/*
+ * @brijbyte/agentic-ui — CSS layer order declaration
+ *
+ * Import this ONCE, before any other stylesheet in your app entry.
+ * It establishes the cascade order so component styles always beat
+ * Tailwind preflight resets, and Tailwind utilities always beat components.
+ *
+ * If you use the full bundle (@brijbyte/agentic-ui/styles) or tokens.css,
+ * this is already included — you don't need to import it separately.
+ *
+ * Manual setup (without Tailwind):
+ *   @import "@brijbyte/agentic-ui/layer-order";
+ *   @import "@brijbyte/agentic-ui/tokens";
+ *   @import "@brijbyte/agentic-ui/reset";
+ *
+ * With Tailwind v4:
+ *   @import "tailwindcss";
+ *   @import "@brijbyte/agentic-ui/layer-order";  ← before tokens
+ *   @import "@brijbyte/agentic-ui/tokens";
+ */
+
+@layer theme, base, components, utilities;

package/src/styles/reset.css

@@ -21,8 +21,8 @@
     font-family: var(--font-mono);
     font-size: var(--font-size-md);
     line-height: var(--line-height-normal);
-    color: var(--color-text-primary);
-    background-color: var(--color-bg-base);
+    color: var(--color-primary);
+    background-color: var(--color-canvas);
   }
 
   img,
@@ -66,13 +66,13 @@
     font-weight: var(--font-weight-semibold);
     line-height: var(--line-height-tight);
     letter-spacing: var(--letter-spacing-tight);
-    color: var(--color-text-primary);
+    color: var(--color-primary);
   }
 
   /* Scrollbar styling */
   * {
     scrollbar-width: thin;
-    scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
+    scrollbar-color: var(--color-thumb) var(--color-track);
   }
 
   *::-webkit-scrollbar {
@@ -81,11 +81,11 @@
   }
 
   *::-webkit-scrollbar-thumb {
-    background: var(--color-scrollbar-thumb);
+    background: var(--color-thumb);
     border-radius: var(--radius-full);
   }
 
   *::-webkit-scrollbar-track {
-    background: var(--color-scrollbar-track);
+    background: var(--color-track);
   }
 }

package/src/styles/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/src/styles/tokens.css

@@ -1,10 +1,11 @@
 /**
  * @brijbyte/agentic-ui — Design Tokens
  *
- * macOS/iOS-inspired developer-focused design system.
+ * developer-focused design system, loosely inspired by native desktop and mobile UI.
  * Monospace-first, semantic color tokens, supports light & dark modes.
  */
-@layer base {
+
+@layer theme {
   :root {
     /* ─── Typography ──────────────────────────────────────────────── */
     /*
@@ -125,35 +126,35 @@
   [data-theme="light"] {
     color-scheme: light;
 
-    /* Background layers (macOS vibrancy-inspired) */
-    --color-bg-base: #f5f5f5;
-    --color-bg-elevated: #ffffff;
-    --color-bg-sunken: #ebebeb;
-    --color-bg-overlay: rgba(255, 255, 255, 0.92);
-    --color-bg-sidebar: rgba(246, 246, 246, 0.95);
+    /* Background layers (inspired by system vibrancy) */
+    --color-canvas: #f0eff0;
+    --color-elevated: #fafafa;
+    --color-sunken: #e8e7e8;
+    --color-overlay: rgba(250, 250, 250, 0.92);
+    --color-sidebar: rgba(244, 243, 244, 0.96);
 
     /* Surface (card/panel backgrounds) */
-    --color-surface-1: #ffffff;
-    --color-surface-2: #f9f9f9;
-    --color-surface-3: #f4f4f4;
-    --color-surface-hover: rgba(0, 0, 0, 0.04);
-    --color-surface-active: rgba(0, 0, 0, 0.07);
-    --color-surface-selected: rgba(0, 120, 212, 0.1);
+    --color-surface-1: #fafafa;
+    --color-surface-2: #f4f3f4;
+    --color-surface-3: #eeeded;
+    --color-hover: rgba(0, 0, 0, 0.04);
+    --color-active: rgba(0, 0, 0, 0.07);
+    --color-selected: rgba(0, 120, 212, 0.1);
 
     /* Text */
-    --color-text-primary: rgba(0, 0, 0, 0.88);
-    --color-text-secondary: rgba(0, 0, 0, 0.55);
-    --color-text-tertiary: rgba(0, 0, 0, 0.36);
-    --color-text-disabled: rgba(0, 0, 0, 0.24);
-    --color-text-inverse: rgba(255, 255, 255, 0.95);
-    --color-text-on-accent: #ffffff;
-    --color-text-code: #0f766e;
+    --color-primary: rgba(0, 0, 0, 0.88);
+    --color-secondary: rgba(0, 0, 0, 0.6); /* raised from 0.55 — AA 5.01:1 on hover bg */
+    --color-tertiary: rgba(0, 0, 0, 0.36);
+    --color-disabled: rgba(0, 0, 0, 0.24);
+    --color-inverse: rgba(255, 255, 255, 0.95);
+    --color-on-accent: #ffffff;
+    --color-code: #0f766e;
 
     /* Borders */
-    --color-border-base: rgba(0, 0, 0, 0.12);
-    --color-border-strong: rgba(0, 0, 0, 0.22);
-    --color-border-subtle: rgba(0, 0, 0, 0.06);
-    --color-border-focus: var(--color-focus-ring);
+    --color-line: rgba(0, 0, 0, 0.12);
+    --color-line-strong: rgba(0, 0, 0, 0.22);
+    --color-line-subtle: rgba(0, 0, 0, 0.06);
+    --color-line-focus: var(--color-focus-ring);
 
     /* Accent — macOS blue
      * Semantic names instead of opaque Radix-style numbers:
@@ -166,6 +167,8 @@
     --color-accent: #0078d4;
     --color-accent-hover: #006bbf;
     --color-accent-pressed: #005ea8;
+    --color-accent-solid: #0078d4; /* solid button bg — same as accent in light (4.83:1 vs white) */
+    --color-accent-text: #005ea8; /* text/icon on tinted surfaces — AA 5.09:1 on accent-tint bg */
     --color-accent-tint: rgba(0, 120, 212, 0.1);
     --color-accent-tint-hover: rgba(0, 120, 212, 0.16);
 
@@ -181,25 +184,28 @@
     --shadow-popover: 0 8px 24px -4px rgb(0 0 0 / 0.16), 0 2px 6px -2px rgb(0 0 0 / 0.1);
     --shadow-sheet: 0 -4px 16px 0 rgb(0 0 0 / 0.12);
     --shadow-inset: inset 0 1px 2px 0 rgb(0 0 0 / 0.08);
-    --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);
 
     /* Status — Success */
     --color-success-bg: #f0fdf4;
     --color-success-border: #bbf7d0;
-    --color-success-text: #15803d;
-    --color-success-solid: #16a34a;
+    --color-success-text: #147a39; /* darkened from #15803d — AA 4.73:1 on canvas */
+    --color-success-solid: #15803d; /* darkened from #16a34a — AA 5.02:1 vs white */
+    --color-success-on-solid: #ffffff;
 
     /* Status — Warning */
     --color-warning-bg: #fffbeb;
     --color-warning-border: #fde68a;
     --color-warning-text: #92400e;
-    --color-warning-solid: #d97706;
+    --color-warning-solid: #b45309; /* darkened from #d97706 — AA 5.02:1 vs white */
+    --color-warning-on-solid: #ffffff;
 
     /* Status — Error */
     --color-error-bg: #fef2f2;
     --color-error-border: #fecaca;
     --color-error-text: #991b1b;
     --color-error-solid: #dc2626;
+    --color-error-on-solid: #ffffff;
 
     /* Status — Info */
     --color-info-bg: #eff6ff;
@@ -208,7 +214,7 @@
     --color-info-solid: #2563eb;
 
     /* Code / terminal palette */
-    --color-code-bg: #f6f8fa;
+    --color-code-canvas: #f6f8fa;
     --color-code-border: #d0d7de;
     --color-code-comment: #6e7781;
     --color-code-keyword: #cf222e;
@@ -217,8 +223,8 @@
     --color-code-function: #8250df;
 
     /* Scrollbar */
-    --color-scrollbar-thumb: rgba(0, 0, 0, 0.2);
-    --color-scrollbar-track: transparent;
+    --color-thumb: rgba(0, 0, 0, 0.2);
+    --color-track: transparent;
   }
 
   /* ═══════════════════════════════════════════════════════════════════
@@ -232,38 +238,40 @@
       color-scheme: dark;
 
       /* Background */
-      --color-bg-base: #1c1c1e;
-      --color-bg-elevated: #2c2c2e;
-      --color-bg-sunken: #141416;
-      --color-bg-overlay: rgba(30, 30, 32, 0.92);
-      --color-bg-sidebar: rgba(28, 28, 30, 0.95);
+      --color-canvas: #1c1c1e;
+      --color-elevated: #2c2c2e;
+      --color-sunken: #141416;
+      --color-overlay: rgba(30, 30, 32, 0.92);
+      --color-sidebar: rgba(28, 28, 30, 0.95);
 
       /* Surface */
       --color-surface-1: #2c2c2e;
       --color-surface-2: #3a3a3c;
       --color-surface-3: #48484a;
-      --color-surface-hover: rgba(255, 255, 255, 0.06);
-      --color-surface-active: rgba(255, 255, 255, 0.1);
-      --color-surface-selected: rgba(10, 132, 255, 0.16);
+      --color-hover: rgba(255, 255, 255, 0.06);
+      --color-active: rgba(255, 255, 255, 0.1);
+      --color-selected: rgba(10, 132, 255, 0.16);
 
       /* Text */
-      --color-text-primary: rgba(255, 255, 255, 0.92);
-      --color-text-secondary: rgba(255, 255, 255, 0.55);
-      --color-text-tertiary: rgba(255, 255, 255, 0.36);
-      --color-text-disabled: rgba(255, 255, 255, 0.24);
-      --color-text-inverse: rgba(0, 0, 0, 0.88);
-      --color-text-on-accent: #ffffff;
-      --color-text-code: #2dd4bf;
+      --color-primary: rgba(255, 255, 255, 0.92);
+      --color-secondary: rgba(255, 255, 255, 0.55);
+      --color-tertiary: rgba(255, 255, 255, 0.36);
+      --color-disabled: rgba(255, 255, 255, 0.24);
+      --color-inverse: rgba(0, 0, 0, 0.88);
+      --color-on-accent: #ffffff;
+      --color-code: #2dd4bf;
 
       /* Borders */
-      --color-border-base: rgba(255, 255, 255, 0.12);
-      --color-border-strong: rgba(255, 255, 255, 0.22);
-      --color-border-subtle: rgba(255, 255, 255, 0.06);
+      --color-line: rgba(255, 255, 255, 0.12);
+      --color-line-strong: rgba(255, 255, 255, 0.22);
+      --color-line-subtle: rgba(255, 255, 255, 0.06);
 
       /* Accent — macOS blue dark */
       --color-accent: #0a84ff;
       --color-accent-hover: #0071e3;
       --color-accent-pressed: #005bb5;
+      --color-accent-solid: #0071e3; /* solid button bg — darkened from #0a84ff — AA 4.70:1 vs white */
+      --color-accent-text: #60a5fa; /* text/icon on tinted surfaces — AA 5.87:1 on accent-tint bg */
       --color-accent-tint: rgba(10, 132, 255, 0.12);
       --color-accent-tint-hover: rgba(10, 132, 255, 0.2);
 
@@ -279,25 +287,28 @@
       --shadow-popover: 0 8px 24px -4px rgb(0 0 0 / 0.5), 0 2px 6px -2px rgb(0 0 0 / 0.4);
       --shadow-sheet: 0 -4px 16px 0 rgb(0 0 0 / 0.4);
       --shadow-inset: inset 0 1px 2px 0 rgb(0 0 0 / 0.3);
-      --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);
 
       /* Status — Success */
       --color-success-bg: rgba(22, 163, 74, 0.12);
       --color-success-border: rgba(22, 163, 74, 0.3);
       --color-success-text: #4ade80;
-      --color-success-solid: #22c55e;
+      --color-success-solid: #22c55e; /* vivid — AA 9.22:1 vs black text */
+      --color-success-on-solid: #000000; /* dark text preserves vibrancy */
 
       /* Status — Warning */
       --color-warning-bg: rgba(217, 119, 6, 0.12);
       --color-warning-border: rgba(217, 119, 6, 0.3);
       --color-warning-text: #fbbf24;
-      --color-warning-solid: #f59e0b;
+      --color-warning-solid: #f59e0b; /* vivid — AA 9.78:1 vs black text */
+      --color-warning-on-solid: #000000; /* dark text preserves vibrancy */
 
       /* Status — Error */
       --color-error-bg: rgba(220, 38, 38, 0.12);
       --color-error-border: rgba(220, 38, 38, 0.3);
       --color-error-text: #f87171;
-      --color-error-solid: #ef4444;
+      --color-error-solid: #dc2626; /* darkened from #ef4444 — AA 4.83:1 vs white */
+      --color-error-on-solid: #ffffff;
 
       /* Status — Info */
       --color-info-bg: rgba(37, 99, 235, 0.12);
@@ -306,7 +317,7 @@
       --color-info-solid: #3b82f6;
 
       /* Code / terminal palette */
-      --color-code-bg: #161b22;
+      --color-code-canvas: #161b22;
       --color-code-border: rgba(255, 255, 255, 0.1);
       --color-code-comment: #8b949e;
       --color-code-keyword: #ff7b72;
@@ -315,42 +326,44 @@
       --color-code-function: #d2a8ff;
 
       /* Scrollbar */
-      --color-scrollbar-thumb: rgba(255, 255, 255, 0.2);
-      --color-scrollbar-track: transparent;
+      --color-thumb: rgba(255, 255, 255, 0.2);
+      --color-track: transparent;
     }
   }
 
   [data-theme="dark"] {
     color-scheme: dark;
 
-    --color-bg-base: #1c1c1e;
-    --color-bg-elevated: #2c2c2e;
-    --color-bg-sunken: #141416;
-    --color-bg-overlay: rgba(30, 30, 32, 0.92);
-    --color-bg-sidebar: rgba(28, 28, 30, 0.95);
+    --color-canvas: #1c1c1e;
+    --color-elevated: #2c2c2e;
+    --color-sunken: #141416;
+    --color-overlay: rgba(30, 30, 32, 0.92);
+    --color-sidebar: rgba(28, 28, 30, 0.95);
 
     --color-surface-1: #2c2c2e;
     --color-surface-2: #3a3a3c;
     --color-surface-3: #48484a;
-    --color-surface-hover: rgba(255, 255, 255, 0.06);
-    --color-surface-active: rgba(255, 255, 255, 0.1);
-    --color-surface-selected: rgba(10, 132, 255, 0.16);
-
-    --color-text-primary: rgba(255, 255, 255, 0.92);
-    --color-text-secondary: rgba(255, 255, 255, 0.55);
-    --color-text-tertiary: rgba(255, 255, 255, 0.36);
-    --color-text-disabled: rgba(255, 255, 255, 0.24);
-    --color-text-inverse: rgba(0, 0, 0, 0.88);
-    --color-text-on-accent: #ffffff;
-    --color-text-code: #2dd4bf;
-
-    --color-border-base: rgba(255, 255, 255, 0.12);
-    --color-border-strong: rgba(255, 255, 255, 0.22);
-    --color-border-subtle: rgba(255, 255, 255, 0.06);
+    --color-hover: rgba(255, 255, 255, 0.06);
+    --color-active: rgba(255, 255, 255, 0.1);
+    --color-selected: rgba(10, 132, 255, 0.16);
+
+    --color-primary: rgba(255, 255, 255, 0.92);
+    --color-secondary: rgba(255, 255, 255, 0.55);
+    --color-tertiary: rgba(255, 255, 255, 0.36);
+    --color-disabled: rgba(255, 255, 255, 0.24);
+    --color-inverse: rgba(0, 0, 0, 0.88);
+    --color-on-accent: #ffffff;
+    --color-code: #2dd4bf;
+
+    --color-line: rgba(255, 255, 255, 0.12);
+    --color-line-strong: rgba(255, 255, 255, 0.22);
+    --color-line-subtle: rgba(255, 255, 255, 0.06);
 
     --color-accent: #0a84ff;
     --color-accent-hover: #0071e3;
     --color-accent-pressed: #005bb5;
+    --color-accent-solid: #0071e3;
+    --color-accent-text: #60a5fa;
     --color-accent-tint: rgba(10, 132, 255, 0.12);
     --color-accent-tint-hover: rgba(10, 132, 255, 0.2);
 
@@ -364,29 +377,32 @@
     --shadow-popover: 0 8px 24px -4px rgb(0 0 0 / 0.5), 0 2px 6px -2px rgb(0 0 0 / 0.4);
     --shadow-sheet: 0 -4px 16px 0 rgb(0 0 0 / 0.4);
     --shadow-inset: inset 0 1px 2px 0 rgb(0 0 0 / 0.3);
-    --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: rgba(22, 163, 74, 0.12);
     --color-success-border: rgba(22, 163, 74, 0.3);
     --color-success-text: #4ade80;
     --color-success-solid: #22c55e;
+    --color-success-on-solid: #000000;
 
     --color-warning-bg: rgba(217, 119, 6, 0.12);
     --color-warning-border: rgba(217, 119, 6, 0.3);
     --color-warning-text: #fbbf24;
     --color-warning-solid: #f59e0b;
+    --color-warning-on-solid: #000000;
 
     --color-error-bg: rgba(220, 38, 38, 0.12);
     --color-error-border: rgba(220, 38, 38, 0.3);
     --color-error-text: #f87171;
-    --color-error-solid: #ef4444;
+    --color-error-solid: #dc2626;
+    --color-error-on-solid: #ffffff;
 
     --color-info-bg: rgba(37, 99, 235, 0.12);
     --color-info-border: rgba(37, 99, 235, 0.3);
     --color-info-text: #60a5fa;
     --color-info-solid: #3b82f6;
 
-    --color-code-bg: #161b22;
+    --color-code-canvas: #161b22;
     --color-code-border: rgba(255, 255, 255, 0.1);
     --color-code-comment: #8b949e;
     --color-code-keyword: #ff7b72;
@@ -394,7 +410,7 @@
     --color-code-number: #79c0ff;
     --color-code-function: #d2a8ff;
 
-    --color-scrollbar-thumb: rgba(255, 255, 255, 0.2);
-    --color-scrollbar-track: transparent;
+    --color-thumb: rgba(255, 255, 255, 0.2);
+    --color-track: transparent;
   }
 }