@adea-ai/ui 0.18.0 → 0.18.2

package/README.md

@@ -3,3 +3,41 @@
 Reusable Base UI/shadcn primitives and React controls for the HQ shell, scene
 controls, room authoring, themes, drawers, loading states, and overlays. Scene
 branding and Three.js runtime behavior stay in their owning packages.
+
+## Theming contract: CSS custom properties are the only color surface
+
+Components in this package never contain a color literal. Colors come from the
+token layer (`src/styles/theme.css` for the shadcn tokens, `workspace-shell.css`
+for the HQ shell tokens, `auth-shell.css` for the auth shell), and a component
+that needs a new color adds a token instead of a value.
+
+A color literal is legal in exactly one place: the **declaration** of a custom
+property.
+
+```css
+/* A new token, declared once. */
+--hq-shell-notice: #d97706;
+
+/* Then used everywhere it is needed. */
+.notice {
+  color: var(--hq-shell-notice);
+  border-color: color-mix(in srgb, var(--hq-shell-notice) 45%, transparent);
+}
+```
+
+`scripts/check-theme-colors.mjs` enforces the rule across `packages/ui`,
+`packages/workspace-ui`, `apps/desktop/src`, and `apps/web/src`;
+`scripts/theme-color-boundary.test.ts` runs the scan in the validation lane.
+
+The rule is a gate with a burn-down, not a rewrite:
+
+- Files in `BASELINE` may carry an exact number of literals, each entry with a
+  reason. Adding a literal fails the build, and so does removing one without
+  updating the count — so the list only shrinks.
+- `TOKEN_FILES` are the declared token layers, where a literal _is_ the theme.
+- Named colors (`white`, `transparent`) are out of scope; the gate targets
+  explicit literals.
+
+Why it is worth a gate: with it, restyling is a token swap and dark mode is a
+second set of declarations. Without it, every hardcoded value is a small rewrite
+that nobody schedules.

package/dist/components/ui/button.js

@@ -10,7 +10,7 @@ const buttonVariants = cva("group/button inline-flex shrink-0 items-center justi
             secondary: 'bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
             ghost: 'hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50',
             destructive: 'bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40',
-            success: 'bg-[#1a7f37]/10 text-[#1a7f37] hover:bg-[#1a7f37]/20 focus-visible:border-[#1a7f37]/40 focus-visible:ring-[#1a7f37]/20 dark:bg-[#3fb950]/20 dark:text-[#7ee787] dark:hover:bg-[#3fb950]/30 dark:focus-visible:ring-[#3fb950]/40',
+            success: 'bg-success/10 text-success hover:bg-success/20 focus-visible:border-success/40 focus-visible:ring-success/20 dark:bg-success/20 dark:hover:bg-success/30 dark:focus-visible:ring-success/40',
             link: 'text-primary underline-offset-4 hover:underline',
         },
         size: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adea-ai/ui",
-  "version": "0.18.0",
+  "version": "0.18.2",
   "description": "Shared UI kit for Adea: Base UI-backed shadcn primitives, workspace shells, and theme styles.",
   "keywords": [
     "base-ui",

package/src/components/ui/button.tsx

@@ -18,7 +18,7 @@ const buttonVariants = cva(
         destructive:
           'bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40',
         success:
-          'bg-[#1a7f37]/10 text-[#1a7f37] hover:bg-[#1a7f37]/20 focus-visible:border-[#1a7f37]/40 focus-visible:ring-[#1a7f37]/20 dark:bg-[#3fb950]/20 dark:text-[#7ee787] dark:hover:bg-[#3fb950]/30 dark:focus-visible:ring-[#3fb950]/40',
+          'bg-success/10 text-success hover:bg-success/20 focus-visible:border-success/40 focus-visible:ring-success/20 dark:bg-success/20 dark:hover:bg-success/30 dark:focus-visible:ring-success/40',
         link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {

package/src/styles/auth-shell.css

@@ -10,13 +10,15 @@
   --auth-accent: var(--hq-shell-accent);
   --auth-accent-hover: var(--hq-shell-accent-strong);
   --auth-accent-foreground: var(--hq-shell-accent-foreground);
+  --auth-grid-line: rgb(255 255 255 / 4%);
+  --auth-panel-shadow: 0 1.5rem 4rem rgb(0 0 0 / 24%);
 
   display: grid;
   min-height: 100svh;
   place-items: center;
   padding: 1.5rem;
   background:
-    linear-gradient(90deg, rgb(255 255 255 / 4%) 1px, transparent 1px) 0 0 / 4rem 4rem,
+    linear-gradient(90deg, var(--auth-grid-line) 1px, transparent 1px) 0 0 / 4rem 4rem,
     var(--auth-background);
   color: var(--auth-foreground);
 }
@@ -27,7 +29,7 @@
   border: 1px solid var(--auth-border);
   border-radius: 0.75rem;
   background: var(--auth-surface);
-  box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 24%);
+  box-shadow: var(--auth-panel-shadow);
 }
 
 .auth-eyebrow {

package/src/styles/theme.css

@@ -21,6 +21,7 @@
   --color-accent: var(--accent);
   --color-accent-foreground: var(--accent-foreground);
   --color-destructive: var(--destructive);
+  --color-success: var(--success);
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
@@ -47,6 +48,8 @@
   --accent: oklch(0.97 0 0);
   --accent-foreground: oklch(0.205 0 0);
   --destructive: oklch(0.577 0.245 27.325);
+  /* Mirrors the literals the success button variant used to carry. */
+  --success: #1a7f37;
   --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
   --ring: oklch(0.708 0 0);
@@ -68,6 +71,7 @@
   --accent: oklch(0.269 0 0);
   --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.704 0.191 22.216);
+  --success: #3fb950;
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
   --ring: oklch(0.556 0 0);