@actioneer/ads 1.0.4 → 1.0.6

package/components/stepper.js

@@ -18,8 +18,8 @@ const b = y(
         error: "bg-danger text-danger-foreground"
       },
       size: {
-        sm: "size-5 text-xs [&>svg]:size-3",
-        md: "size-6 text-xs [&>svg]:size-3.5"
+        sm: "size-5 text-s [&>svg]:size-3",
+        md: "size-6 text-s [&>svg]:size-3.5"
       }
     },
     defaultVariants: { status: "upcoming", size: "md" }
@@ -72,7 +72,7 @@ const b = y(
                 {
                   className: a(
                     "truncate whitespace-nowrap",
-                    i === "sm" ? "text-xs" : "text-base",
+                    i === "sm" ? "text-s" : "text-base",
                     r === "upcoming" ? "text-tertiary" : "text-foreground",
                     r === "error" && "text-danger"
                   ),
@@ -117,7 +117,7 @@ const b = y(
                 {
                   className: a(
                     "truncate",
-                    i === "sm" ? "text-xs" : "text-base",
+                    i === "sm" ? "text-s" : "text-base",
                     r === "upcoming" ? "text-tertiary" : "text-foreground",
                     r === "error" && "text-danger"
                   ),

package/components/switch.js

@@ -17,27 +17,27 @@ const v = {
   }
 }, y = c.forwardRef(
   ({
-    className: d,
+    className: m,
     checked: t = !1,
     onCheckedChange: e,
-    size: f = "md",
+    size: d = "md",
     disabled: s,
     children: o,
     ...r
-  }, m) => {
-    const l = v[f], a = c.useId(), u = r["aria-label"] != null || r["aria-labelledby"] != null, b = o && !u ? a : void 0;
+  }, f) => {
+    const l = v[d], a = c.useId(), u = r["aria-label"] != null || r["aria-labelledby"] != null, b = o && !u ? a : void 0;
     return /* @__PURE__ */ p(
       "label",
       {
         className: n(
-          "inline-flex items-center gap-2 text-xs text-foreground select-none",
+          "inline-flex items-center gap-2 text-m text-foreground select-none",
           s ? "cursor-not-allowed opacity-50" : "cursor-pointer"
         ),
         children: [
           /* @__PURE__ */ i(
             "button",
             {
-              ref: m,
+              ref: f,
               type: "button",
               role: "switch",
               "aria-checked": t,
@@ -51,7 +51,7 @@ const v = {
                 "disabled:cursor-not-allowed",
                 t ? "bg-brand" : "bg-input",
                 l.track,
-                d
+                m
               ),
               ...r,
               children: /* @__PURE__ */ i(w, { reducedMotion: "user", children: /* @__PURE__ */ i(

package/components/tooltip.js

@@ -116,7 +116,7 @@ function Y({
           },
           className: S(
             "relative z-50 max-w-xs rounded-sm bg-foreground px-2 py-1",
-            "text-xs text-background",
+            "text-s text-background",
             "pointer-events-none select-none",
             A
           ),

package/components/tree.js

@@ -12,7 +12,7 @@ const B = t.forwardRef(
       ref: n,
       role: "tree",
       "data-variant": a,
-      className: f("group/tree flex flex-col gap-0.5 text-xs", u),
+      className: f("group/tree flex flex-col gap-0.5 text-m", u),
       ...m
     }
   )
@@ -24,29 +24,29 @@ const E = t.forwardRef(
     label: a,
     icon: m,
     count: n,
-    endContent: v,
+    endContent: x,
     defaultExpanded: R = !1,
-    expanded: x,
-    onExpandedChange: g,
-    href: w,
+    expanded: v,
+    onExpandedChange: b,
+    href: y,
     isActive: s,
-    onSelect: b,
+    onSelect: p,
     children: l,
     ..._
   }, j) => {
-    const o = t.Children.count(l) > 0, y = x !== void 0, [z, F] = t.useState(R), r = y ? x : z, N = (c) => {
-      y || F(c), g == null || g(c);
+    const o = t.Children.count(l) > 0, N = v !== void 0, [z, F] = t.useState(R), r = N ? v : z, w = (c) => {
+      N || F(c), b == null || b(c);
     }, d = f(
       "group/tree-row flex h-9 w-full items-center gap-1.5 rounded-md px-2 text-left",
       "outline-none transition-colors focus-visible:ring-3 focus-visible:ring-ring",
       "[&_svg]:size-4 [&_svg]:shrink-0",
       "group-data-[variant=sidebar]/tree:border group-data-[variant=sidebar]/tree:border-transparent group-data-[variant=sidebar]/tree:text-wg11",
-      "group-data-[variant=sidebar]/tree:[&_svg]:size-5 group-data-[variant=sidebar]/tree:[&_svg]:text-wg11",
-      s ? "bg-fill font-normal text-foreground group-data-[variant=sidebar]/tree:border-wg4 group-data-[variant=sidebar]/tree:bg-wg2 group-data-[variant=sidebar]/tree:text-wg11" : "text-muted-foreground hover:bg-fill/60 hover:text-foreground group-data-[variant=sidebar]/tree:hover:bg-wg1 group-data-[variant=sidebar]/tree:hover:text-wg11"
-    ), p = m ?? (o ? null : /* @__PURE__ */ e(W, { className: "text-tertiary" })), k = s && t.isValidElement(p) ? t.cloneElement(
-      p,
+      "group-data-[variant=sidebar]/tree:[&_svg]:size-5",
+      s ? "bg-action-primary-soft font-normal text-brand-text [&_svg]:text-brand-text group-data-[variant=sidebar]/tree:border-brand group-data-[variant=sidebar]/tree:bg-action-primary-soft group-data-[variant=sidebar]/tree:text-brand-text" : "text-muted-foreground hover:bg-action-primary-soft hover:text-brand-text group-data-[variant=sidebar]/tree:hover:bg-action-primary-soft group-data-[variant=sidebar]/tree:hover:text-brand-text"
+    ), g = m ?? (o ? null : /* @__PURE__ */ e(W, { className: "text-tertiary" })), k = s && t.isValidElement(g) ? t.cloneElement(
+      g,
       { weight: "fill" }
-    ) : p, C = /* @__PURE__ */ e(
+    ) : g, C = /* @__PURE__ */ e(
       V,
       {
         className: f(
@@ -55,30 +55,30 @@ const E = t.forwardRef(
         ),
         strokeWidth: 2
       }
-    ), I = (n ?? t.Children.count(l)) > 0 && /* @__PURE__ */ e("span", { className: "shrink-0 tabular-nums text-xs text-tertiary", children: n ?? t.Children.count(l) }), h = /* @__PURE__ */ i(T, { children: [
+    ), I = (n ?? t.Children.count(l)) > 0 && /* @__PURE__ */ e("span", { className: "shrink-0 tabular-nums text-s text-tertiary", children: n ?? t.Children.count(l) }), h = /* @__PURE__ */ i(T, { children: [
       k,
       /* @__PURE__ */ e("span", { className: "min-w-0 flex-1 truncate", children: a }),
-      v,
+      x,
       o && /* @__PURE__ */ i(T, { children: [
         I,
         C
       ] })
     ] });
     return /* @__PURE__ */ i("div", { ref: j, role: "treeitem", "aria-expanded": o ? r : void 0, "aria-selected": s, className: u, ..._, children: [
-      o && b ? /* @__PURE__ */ i("div", { className: d, children: [
+      o && p ? /* @__PURE__ */ i("div", { className: d, children: [
         /* @__PURE__ */ i(
           "button",
           {
             type: "button",
             className: "flex min-w-0 flex-1 items-center gap-1.5 rounded-sm text-left outline-none focus-visible:ring-3 focus-visible:ring-ring",
-            onClick: b,
+            onClick: p,
             children: [
               k,
               /* @__PURE__ */ e("span", { className: "min-w-0 flex-1 truncate", children: a })
             ]
           }
         ),
-        v,
+        x,
         I,
         /* @__PURE__ */ e(
           "button",
@@ -87,11 +87,11 @@ const E = t.forwardRef(
             "aria-label": `${r ? "Collapse" : "Expand"} ${typeof a == "string" ? a : "tree item"}`,
             "aria-expanded": r,
             className: "inline-flex size-7 shrink-0 items-center justify-center rounded-sm outline-none hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring",
-            onClick: () => N(!r),
+            onClick: () => w(!r),
             children: C
           }
         )
-      ] }) : o ? /* @__PURE__ */ e("button", { type: "button", className: d, onClick: () => N(!r), children: h }) : w ? /* @__PURE__ */ e("a", { href: w, className: d, "aria-current": s ? "page" : void 0, children: h }) : /* @__PURE__ */ e("button", { type: "button", className: d, onClick: b, children: h }),
+      ] }) : o ? /* @__PURE__ */ e("button", { type: "button", className: d, onClick: () => w(!r), children: h }) : y ? /* @__PURE__ */ e("a", { href: y, className: d, "aria-current": s ? "page" : void 0, children: h }) : /* @__PURE__ */ e("button", { type: "button", className: d, onClick: p, children: h }),
       /* @__PURE__ */ e(M, { reducedMotion: "user", children: /* @__PURE__ */ e($, { initial: !1, children: o && r && /* @__PURE__ */ e(
         D.div,
         {

package/components/ui/button.js

@@ -1,23 +1,23 @@
 "use client";
-import { jsx as i } from "react/jsx-runtime";
+import { jsx as s } from "react/jsx-runtime";
 import { cva as a } from "class-variance-authority";
 import { Slot as d } from "radix-ui";
 import { cn as c } from "../../lib/cn.js";
 const u = a(
-  "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-xs font-medium whitespace-nowrap transition-[background-color,border-color,color,box-shadow,transform] duration-150 ease-out outline-none motion-reduce:transition-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-m font-medium whitespace-nowrap transition-[background-color,border-color,color,box-shadow,transform] duration-150 ease-out outline-none motion-reduce:transition-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default: "bg-action-primary text-action-primary-foreground hover:bg-action-primary-hover",
         destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20",
-        outline: "border bg-background shadow-100 hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline"
+        outline: "border bg-background shadow-100 hover:border-action-primary hover:bg-action-primary-soft hover:text-action-primary-text",
+        secondary: "bg-action-primary-soft text-action-primary-text hover:bg-action-primary-soft/80",
+        ghost: "hover:bg-action-primary-soft hover:text-action-primary-text",
+        link: "text-action-primary-text underline-offset-4 hover:underline"
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        xs: "h-6 gap-1 rounded-sm px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        xs: "h-6 gap-1 rounded-sm px-2 has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
         sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
         lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
         icon: "size-9",
@@ -32,26 +32,26 @@ const u = a(
     }
   }
 );
-function p({
-  className: o,
-  variant: e = "default",
-  size: t = "default",
-  asChild: r = !1,
-  ...s
+function g({
+  className: r,
+  variant: t = "default",
+  size: e = "default",
+  asChild: o = !1,
+  ...i
 }) {
-  const n = r ? d.Root : "button";
-  return /* @__PURE__ */ i(
+  const n = o ? d.Root : "button";
+  return /* @__PURE__ */ s(
     n,
     {
       "data-slot": "button",
-      "data-variant": e,
-      "data-size": t,
-      className: c(u({ variant: e, size: t, className: o })),
-      ...s
+      "data-variant": t,
+      "data-size": e,
+      className: c(u({ variant: t, size: e, className: r })),
+      ...i
     }
   );
 }
 export {
-  p as Button,
+  g as Button,
   u as buttonVariants
 };

package/components/ui/tooltip.js

@@ -2,7 +2,7 @@
 import { jsx as t, jsxs as m } from "react/jsx-runtime";
 import * as s from "react";
 import { Tooltip as i } from "radix-ui";
-import { MotionConfig as x, AnimatePresence as g, motion as v } from "motion/react";
+import { MotionConfig as g, AnimatePresence as x, motion as v } from "motion/react";
 import { cn as T } from "../../lib/cn.js";
 import { tooltipVariants as h } from "../../lib/motion.js";
 const u = s.createContext(!1);
@@ -54,7 +54,7 @@ function y({
   ...n
 }) {
   const a = s.useContext(u);
-  return /* @__PURE__ */ t(i.Portal, { children: /* @__PURE__ */ t(x, { reducedMotion: "user", children: /* @__PURE__ */ t(g, { initial: !1, children: a && /* @__PURE__ */ t(
+  return /* @__PURE__ */ t(i.Portal, { children: /* @__PURE__ */ t(g, { reducedMotion: "user", children: /* @__PURE__ */ t(x, { initial: !1, children: a && /* @__PURE__ */ t(
     i.Content,
     {
       "data-slot": "tooltip-content",
@@ -70,7 +70,7 @@ function y({
           animate: "visible",
           exit: "hidden",
           className: T(
-            "z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md bg-foreground px-3 py-1.5 text-xs text-balance text-background",
+            "z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md bg-foreground px-3 py-1.5 text-s text-balance text-background",
             o
           ),
           children: [

package/llms.txt

@@ -41,10 +41,10 @@ Reference semantic roles, never raw color/dimension literals (ads-lint rejects l
 - `action-primary-text` — Primary CTA role — restrained Studio teal, used sparingly.
 - `action-primary-soft` — Primary CTA role — restrained Studio teal, used sparingly.
 - `field-focus` — Primary CTA role — restrained Studio teal, used sparingly.
-- `brand` — Compatibility action role — neutral ink, never a colored primary hue.
-- `brand-foreground` — Compatibility action role — neutral ink, never a colored primary hue.
-- `brand-hover` — Compatibility action role — neutral ink, never a colored primary hue.
-- `brand-text` — Compatibility action role — neutral ink, never a colored primary hue.
+- `brand` — Shared brand roles for control states, primary accents, and marks.
+- `brand-foreground` — Shared brand roles for control states, primary accents, and marks.
+- `brand-hover` — Shared brand roles for control states, primary accents, and marks.
+- `brand-text` — Shared brand roles for control states, primary accents, and marks.
 - `fill` — Quiet fill — avatars, chips, and disabled controls
 - `fill-foreground` — Quiet fill — avatars, chips, and disabled controls
 - `table-shell` — Table surfaces: the white tray, its hairlines, and header ink.
@@ -53,8 +53,8 @@ Reference semantic roles, never raw color/dimension literals (ads-lint rejects l
 - `artifact-canvas` — The artifact sheet: white warmed by a trace of the brand mark.
 - `accent` — The active and selected wash, one step above hover.
 - `accent-foreground` — The active and selected wash, one step above hover.
-- `success` — Lichen success-700 clears AA on White and both success soft fills; success-600 is reserved for non-text marks because its 3.73:1 contrast on White does not clear body-text AA.
-- `success-foreground` — Lichen success-700 clears AA on White and both success soft fills; success-600 is reserved for non-text marks because its 3.73:1 contrast on White does not clear body-text AA.
+- `success` — Grass green 700 clears AA on White and both success soft fills.
+- `success-foreground` — Grass green 700 clears AA on White and both success soft fills.
 - `warning` — Amber-500 fill kept (it IS the caution signal); dark ink foreground instead of white = 6.94:1 (white on amber was 2.35:1, failed even 3:1).
 - `warning-foreground` — Amber-500 fill kept (it IS the caution signal); dark ink foreground instead of white = 6.94:1 (white on amber was 2.35:1, failed even 3:1).
 - `danger` — Danger and info: solid semantic fills carrying white foregrounds.

package/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "@actioneer/ads",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "importPath": "@actioneer/ads",
   "styleImport": "@import \"@actioneer/ads/styles.css\";",
   "families": [
@@ -277,7 +277,7 @@
         "text-brand",
         "border-brand"
       ],
-      "description": "Compatibility action role — neutral ink, never a colored primary hue."
+      "description": "Shared brand roles for control states, primary accents, and marks."
     },
     {
       "name": "--color-brand-foreground",
@@ -286,7 +286,7 @@
         "text-brand-foreground",
         "bg-brand-foreground"
       ],
-      "description": "Compatibility action role — neutral ink, never a colored primary hue."
+      "description": "Shared brand roles for control states, primary accents, and marks."
     },
     {
       "name": "--color-brand-hover",
@@ -296,7 +296,7 @@
         "text-brand-hover",
         "border-brand-hover"
       ],
-      "description": "Compatibility action role — neutral ink, never a colored primary hue."
+      "description": "Shared brand roles for control states, primary accents, and marks."
     },
     {
       "name": "--color-brand-text",
@@ -306,7 +306,7 @@
         "text-brand-text",
         "border-brand-text"
       ],
-      "description": "Compatibility action role — neutral ink, never a colored primary hue."
+      "description": "Shared brand roles for control states, primary accents, and marks."
     },
     {
       "name": "--color-fill",
@@ -393,7 +393,7 @@
         "text-success",
         "border-success"
       ],
-      "description": "Lichen success-700 clears AA on White and both success soft fills; success-600 is reserved for non-text marks because its 3.73:1 contrast on White does not clear body-text AA."
+      "description": "Grass green 700 clears AA on White and both success soft fills."
     },
     {
       "name": "--color-success-foreground",
@@ -402,7 +402,7 @@
         "text-success-foreground",
         "bg-success-foreground"
       ],
-      "description": "Lichen success-700 clears AA on White and both success soft fills; success-600 is reserved for non-text marks because its 3.73:1 contrast on White does not clear body-text AA."
+      "description": "Grass green 700 clears AA on White and both success soft fills."
     },
     {
       "name": "--color-warning",
@@ -799,8 +799,8 @@
           ],
           "default": "solid",
           "options": {
-            "solid": "The restrained teal primary CTA; use for the one primary action on a screen, keeping teal to roughly 5–10% of the UI.",
-            "secondary": "A standalone neutral action that must still read as a real button (e.g. Cancel beside Save) — more emphasis than outline or ghost.",
+            "solid": "The teal primary CTA; shares the brand palette used by checked controls and selected states.",
+            "secondary": "A teal outlined companion action with accessible brand text and pale-teal hover fill.",
             "outline": "Unfilled with a visible border, lighter than secondary but still clearly a button.",
             "ghost": "Unfilled and borderless — the lowest-emphasis button chrome short of link.",
             "link": "Drops all button chrome for inline text-style actions; underlines on hover, no press scale.",
@@ -5142,7 +5142,7 @@
           "default": "default",
           "options": {
             "default": "Neutral heads-up with no status implication, foreground-colored icon/title, no urgency signaled.",
-            "success": "Confirms a completed or positive outcome (e.g. saved changes), green accent.",
+            "success": "Grass green confirms a completed or positive outcome.",
             "warning": "Flags a non-blocking risk or upcoming issue (e.g. scheduled maintenance), amber accent.",
             "danger": "Signals a failure or blocking problem (e.g. connection error) needing attention, red accent.",
             "info": "Neutral-positive announcement or tip (e.g. new feature, update available), blue accent — softer than success, less urgent than warning."
@@ -9669,7 +9669,7 @@
         "required": false,
         "derived": true,
         "isDefault": true,
-        "description": "The restrained teal primary CTA; use for the one primary action on a screen, keeping teal to roughly 5–10% of the UI."
+        "description": "The teal primary CTA; shares the brand palette used by checked controls and selected states."
       },
       {
         "id": "state:Button:variant=secondary",
@@ -9681,7 +9681,7 @@
         "required": false,
         "derived": true,
         "isDefault": false,
-        "description": "A standalone neutral action that must still read as a real button (e.g. Cancel beside Save) — more emphasis than outline or ghost."
+        "description": "A teal outlined companion action with accessible brand text and pale-teal hover fill."
       },
       {
         "id": "state:Button:variant=outline",
@@ -14526,7 +14526,7 @@
         "required": false,
         "derived": true,
         "isDefault": false,
-        "description": "Confirms a completed or positive outcome (e.g. saved changes), green accent."
+        "description": "Grass green confirms a completed or positive outcome."
       },
       {
         "id": "state:Alert:variant=warning",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@actioneer/ads",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "Actioneer Design System 1.0 — React 19 + Tailwind v4 component library.",
   "type": "module",
   "sideEffects": [

package/styles.css

@@ -59,13 +59,13 @@
 
   /* ---- Type scale ---- seven canonical steps: XS · S · M · L · XL · 2XL · 3XL.
      Roles follow the agent workflow. Root stays 16px so spacing is unaffected. */
-  --text-xs: 0.625rem;     /* 10px · compact chips and micro metadata */
+  --text-xs: 0.625rem;     /* 10px · noninteractive micro metadata */
   --text-xs--line-height: 0.875rem; /* 14px */
-  --text-s: 0.75rem;       /* 12px · table headers and uppercase kickers */
+  --text-s: 0.75rem;       /* 12px · compact controls, table headers and kickers */
   --text-s--line-height: 1rem; /* 16px */
-  --text-m: 0.875rem;      /* 14px · default body, table cells, record names */
+  --text-m: 0.875rem;      /* 14px · body, table cells, form labels and controls */
   --text-m--line-height: 1.25rem; /* 20px */
-  --text-l: 1rem;          /* 16px · tabs, form labels, and section titles */
+  --text-l: 1rem;          /* 16px · tabs and section titles */
   --text-l--line-height: 1.375rem; /* 22px */
   --text-xl: 1.125rem;     /* 18px · metric values and subtitles */
   --text-xl--line-height: 1.5rem; /* 24px */
@@ -110,18 +110,18 @@
   --color-t11: #016159;
   --color-t12: #0f3c37;
 
-  --color-wg1: #f5f5f3;
-  --color-wg2: #f1f1ef;
-  --color-wg3: #ececea;
-  --color-wg4: #e5e5e2;
-  --color-wg5: #dcdcd8;
-  --color-wg6: #d1d1cc;
-  --color-wg7: #c2c2bc;
-  --color-wg8: #a6a69f;
-  --color-wg9: #777771;
-  --color-wg10: #686863;
-  --color-wg11: #4b4b47;
-  --color-wg12: #20201e;
+  --color-wg1: #f9f7f0;
+  --color-wg2: #f3f1e9;
+  --color-wg3: #efece3;
+  --color-wg4: #e8e5db;
+  --color-wg5: #dfdcd0;
+  --color-wg6: #d4d1c4;
+  --color-wg7: #c6c2b3;
+  --color-wg8: #aaa698;
+  --color-wg9: #79766a;
+  --color-wg10: #6b685e;
+  --color-wg11: #4d4b44;
+  --color-wg12: #21201d;
 
   /* Deprecated Neutral Grey names resolve to the canonical Warm Grey ramp.
      Keep these aliases so existing consumer utilities continue to render. */
@@ -196,16 +196,15 @@
   --color-ink-950: var(--color-wg12);
 
   /* ---- Semantic accent ramps ---- */
-  /* Success uses the lichen lime family and stays status-only. The original
-     soft/base/deep anchors map to 50/500/600; 100 and 400 bridge the soft fill
-     and base, while 700 deepens the family enough for AA text on White. */
-  --color-success-50: #e4efcf;
-  --color-success-100: #d4e5b5;
-  --color-success-300: #c4dc9b;
-  --color-success-400: #b4d281;
-  --color-success-500: #a3c765;
-  --color-success-600: #6e8f30;
-  --color-success-700: #516923;
+  /* Grass green keeps positive states distinct from primary-action teal.
+     Soft fills use 50/100; 700 carries accessible status text and solid fills. */
+  --color-success-50: #f2fbef;
+  --color-success-100: #e1f3d8;
+  --color-success-300: #b2dda0;
+  --color-success-400: #8acb70;
+  --color-success-500: #4d9f38;
+  --color-success-600: #3b852b;
+  --color-success-700: #2d6b22;
 
   --color-warning-50: #fffaeb;
   --color-warning-100: #fef0c7;
@@ -241,8 +240,8 @@
   --color-amber-base: #f3a72e;
   --color-amber-deep: #b57414;
 
-  /* Demo logo indigo — source for artifact canvas wash. */
-  --color-brand-mark: #2e1065;
+  /* Brand mark and artifact canvas wash share the product teal. */
+  --color-brand-mark: var(--brand);
 
   /* ---- Radii ---- four canonical steps: XS · S · M · L.
      M (6px) is the default corner radius. */
@@ -403,7 +402,7 @@
   --color-action-primary-soft: var(--action-primary-soft);
   --color-field-focus: var(--field-focus);
 
-  /* Compatibility action role — neutral ink, never a colored primary hue. */
+  /* Shared brand roles for control states, primary accents, and marks. */
   --color-brand: var(--brand);
   --color-brand-foreground: var(--brand-foreground);
   --color-brand-hover: var(--brand-hover);
@@ -424,9 +423,7 @@
   --color-accent: var(--accent);
   --color-accent-foreground: var(--accent-foreground);
 
-  /* Lichen success-700 clears AA on White and both success soft fills;
-     success-600 is reserved for non-text marks because its 3.73:1 contrast
-     on White does not clear body-text AA. */
+  /* Grass green 700 clears AA on White and both success soft fills. */
   --color-success: var(--color-success-700);
   --color-success-foreground: var(--color-white);
   /* Amber-500 fill kept (it IS the caution signal); dark ink foreground
@@ -480,8 +477,7 @@
 
 /* ---- Theme (light only) ---- */
 :root {
-  /* Surfaces and achromatic text/actions point into WG; the primary CTA
-     points into G. */
+  /* Surfaces and neutral text use WG; actions and controls share Teal. */
   --background: var(--color-wg2);          /* step 2  · canvas */
   --foreground: var(--color-wg12);         /* step 12 */
 
@@ -489,18 +485,18 @@
      WG9 is the tertiary/de-emphasis step for nonessential metadata. It clears
      normal-text AA on White; use Secondary when normal text on WG2 must clear
      AA. */
-  --text-on-white-primary: var(--color-wg12);       /* 16.32:1 · AAA */
-  --text-on-white-secondary: var(--color-wg11);     /*  8.76:1 · AAA */
-  --text-on-white-tertiary: var(--color-wg9);       /*  4.50:1 · AA  */
-  --text-on-warm-grey-primary: var(--color-wg12);   /* 14.43:1 on WG2 · AAA */
-  --text-on-warm-grey-secondary: var(--color-wg11); /*  7.75:1 on WG2 · AAA */
-  --text-on-warm-grey-tertiary: var(--color-wg9);   /*  3.98:1 on WG2 · large text AA */
+  --text-on-white-primary: var(--color-wg12);       /* 16.29:1 · AAA */
+  --text-on-white-secondary: var(--color-wg11);     /*  8.73:1 · AAA */
+  --text-on-white-tertiary: var(--color-wg9);       /*  4.55:1 · AA  */
+  --text-on-warm-grey-primary: var(--color-wg12);   /* 14.41:1 on WG2 · AAA */
+  --text-on-warm-grey-secondary: var(--color-wg11); /*  7.72:1 on WG2 · AAA */
+  --text-on-warm-grey-tertiary: var(--color-wg9);   /*  4.03:1 on WG2 · large text AA */
 
   /* Existing context-free utilities remain conservative compatibility aliases
      across WG2–WG4 and White until their call sites adopt a surface role. */
   --text-primary: var(--color-wg12);       /* 12.93:1 AAA (WG4 min surf) */
-  --text-secondary: var(--color-wg11);     /*  6.94:1 AA  (WG4 min surf) */
-  --text-tertiary: color-mix(in srgb, var(--color-wg10) 80%, var(--color-wg11)); /* 4.86:1 AA (WG4) */
+  --text-secondary: var(--color-wg11);     /*  6.93:1 AA  (WG4 min surf) */
+  --text-tertiary: color-mix(in srgb, var(--color-wg10) 80%, var(--color-wg11)); /* 4.83:1 AA (WG4) */
 
   --surface: var(--color-wg3);             /* step 3  · tinted canvas */
   --surface-foreground: var(--color-wg12);
@@ -512,25 +508,22 @@
   --card: var(--color-white);               /* pure white base */
   --card-foreground: var(--color-wg12);
 
-  /* Studio teal is deliberately isolated to the primary CTA role (roughly
-     5–10% of a screen). Selection controls keep using neutral `brand` below,
-     so tabs, switches, radios, and progress never inherit CTA color. */
+  /* One teal action palette shared by CTAs and component interaction states. */
   --action-primary: var(--color-t9);
   --action-primary-foreground: var(--color-white);
   --action-primary-hover: var(--color-t10);
   --action-primary-text: var(--color-t11);
   --action-primary-soft: var(--color-t3);
 
-  /* Neutral action role. The `brand` name remains as a compatibility API,
-     and shared selection/control states intentionally remain achromatic. */
-  --brand: var(--color-wg12);              /* darkest neutral action */
-  --brand-foreground: var(--color-white);
-  --brand-hover: var(--color-wg11);        /* lighter hover lift */
-  --brand-text: var(--color-wg12);         /* action text / links */
+  /* Brand aliases follow the action roles so every consumer stays in sync. */
+  --brand: var(--action-primary);
+  --brand-foreground: var(--action-primary-foreground);
+  --brand-hover: var(--action-primary-hover);
+  --brand-text: var(--action-primary-text);
 
   /* Interactive row hover/focus uses the WG2 highlight wash. */
   --table-row-hover: var(--color-wg2);
-  --table-row-selected: var(--color-wg1);
+  --table-row-selected: var(--action-primary-soft);
 
   /* Quiet component fill. WG3 is the first interactive-background
      step, so this remains visible on both white cards and the step-2 canvas. */
@@ -563,7 +556,7 @@
 
   /* Stroke width — every standard UI border is exactly 1px. */
   --stroke-width: 1px;
-  --ring: color-mix(in srgb, var(--color-wg12) 50%, transparent);    /* WG12 @ 50% */
+  --ring: var(--brand);                                        /* visible teal focus */
   --overlay: color-mix(in srgb, var(--color-wg12) 50%, transparent); /* WG12 @ 50% */
 
   /* Functional / domain tokens — named for their render role, pointing into
@@ -576,7 +569,7 @@
   --chart-context: var(--color-wg6);     /* de-emphasised context series */
   --chart-active-bar-opacity: 0.68;       /* hover lightens a bar while preserving its series hue */
   --canvas-edge: var(--border-secondary);/* infinite-canvas edges / connectors */
-  --texture-ink: var(--color-wg12);      /* brand-texture / pixel-blast marks */
+  --texture-ink: var(--brand);          /* brand-texture / pixel-blast marks */
   --table-shell: var(--color-white);     /* simplified single-surface table */
   --table-stroke: var(--color-wg3);      /* table outline + row separators */
   --table-header-foreground: var(--text-tertiary); /* 12px tertiary table heading text */
@@ -595,8 +588,8 @@
   --sidebar-foreground: var(--foreground);
   --sidebar-primary: var(--brand);
   --sidebar-primary-foreground: var(--brand-foreground);
-  --sidebar-accent: var(--muted);
-  --sidebar-accent-foreground: var(--foreground);
+  --sidebar-accent: var(--action-primary-soft);
+  --sidebar-accent-foreground: var(--brand-text);
   --sidebar-border: var(--border);
   --sidebar-ring: var(--ring);
   --popover: var(--elevated);