@actioneer/ads 0.7.0 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@actioneer/ads",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Actioneer Design System 1.0 — React 19 + Tailwind v4 component library.",
   "type": "module",
   "sideEffects": [
@@ -24,6 +24,7 @@
     "./fonts.css": "./fonts.css",
     "./manifest.json": "./manifest.json",
     "./llms.txt": "./llms.txt",
+    "./DESIGN.md": "./DESIGN.md",
     "./package.json": "./package.json"
   },
   "bin": {

package/styles.css

@@ -39,7 +39,7 @@
 /*
  * ============================================================
  *  ADS 1.0 — Design Tokens
- *  Palette: soft neutral greys + product green
+ *  Palette: warm greys + product green
  *  Typeface: Aribau Grotesk
  * ============================================================
  */
@@ -82,10 +82,10 @@
 
   /* ---- Foundation palette ----
      Canonical primitive names:
-     G1…G12 = Green · NG1…NG12 = Neutral Grey.
+     G1…G12 = Green · WG1…WG12 = Warm Grey.
      Each ramp progresses from light backgrounds and interactive fills through
      supporting tones to solid colors and accessible text. Neutral UI borders
-     are intentionally restricted to NG3–NG5. ---- */
+     are intentionally restricted to WG3–WG5. ---- */
   --color-g1: #f7f9f7;
   --color-g2: #eef5f0;
   --color-g3: #e2efe5;
@@ -99,33 +99,33 @@
   --color-g11: #1f623b;
   --color-g12: #183c28;
 
-  --color-ng1: #fafafa;
-  --color-ng2: #f6f6f6;
-  --color-ng3: #f1f1f1;
-  --color-ng4: #ececec;
-  --color-ng5: #e6e6e6;
-  --color-ng6: #dedede;
-  --color-ng7: #d4d4d4;
-  --color-ng8: #bdbdbd;
-  --color-ng9: #868686;
-  --color-ng10: #7c7b7b;
-  --color-ng11: #5e5d5d;
-  --color-ng12: #202020;
-
-  /* Deprecated Warm Grey names now resolve to Neutral Grey. Keep these
-     aliases so existing consumer utilities continue to render safely. */
-  --color-wg1: var(--color-ng1);
-  --color-wg2: var(--color-ng2);
-  --color-wg3: var(--color-ng3);
-  --color-wg4: var(--color-ng4);
-  --color-wg5: var(--color-ng5);
-  --color-wg6: var(--color-ng6);
-  --color-wg7: var(--color-ng7);
-  --color-wg8: var(--color-ng8);
-  --color-wg9: var(--color-ng9);
-  --color-wg10: var(--color-ng10);
-  --color-wg11: var(--color-ng11);
-  --color-wg12: var(--color-ng12);
+  --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;
+
+  /* Deprecated Neutral Grey names resolve to the canonical Warm Grey ramp.
+     Keep these aliases so existing consumer utilities continue to render. */
+  --color-ng1: var(--color-wg1);
+  --color-ng2: var(--color-wg2);
+  --color-ng3: var(--color-wg3);
+  --color-ng4: var(--color-wg4);
+  --color-ng5: var(--color-wg5);
+  --color-ng6: var(--color-wg6);
+  --color-ng7: var(--color-wg7);
+  --color-ng8: var(--color-wg8);
+  --color-ng9: var(--color-wg9);
+  --color-ng10: var(--color-wg10);
+  --color-ng11: var(--color-wg11);
+  --color-ng12: var(--color-wg12);
 
   --color-white: #ffffff;
 
@@ -143,31 +143,31 @@
   --color-green-900: var(--color-g11);
   --color-green-950: var(--color-g12);
 
-  --color-grey-50: var(--color-ng1);
-  --color-grey-100: var(--color-ng2);
-  --color-grey-200: var(--color-ng3);
-  --color-grey-300: var(--color-ng4);
-  --color-grey-400: var(--color-ng5);
-  --color-grey-500: var(--color-ng6);
-  --color-grey-600: var(--color-ng7);
-  --color-grey-700: var(--color-ng8);
-  --color-grey-800: var(--color-ng9);
-  --color-grey-850: var(--color-ng10);
-  --color-grey-900: var(--color-ng11);
-  --color-grey-950: var(--color-ng12);
-
-  --color-ink-50: var(--color-ng1);
-  --color-ink-100: var(--color-ng2);
-  --color-ink-200: var(--color-ng3);
-  --color-ink-300: var(--color-ng4);
-  --color-ink-400: var(--color-ng5);
-  --color-ink-500: var(--color-ng6);
-  --color-ink-600: var(--color-ng7);
-  --color-ink-700: var(--color-ng8);
-  --color-ink-800: var(--color-ng9);
-  --color-ink-850: var(--color-ng10);
-  --color-ink-900: var(--color-ng11);
-  --color-ink-950: var(--color-ng12);
+  --color-grey-50: var(--color-wg1);
+  --color-grey-100: var(--color-wg2);
+  --color-grey-200: var(--color-wg3);
+  --color-grey-300: var(--color-wg4);
+  --color-grey-400: var(--color-wg5);
+  --color-grey-500: var(--color-wg6);
+  --color-grey-600: var(--color-wg7);
+  --color-grey-700: var(--color-wg8);
+  --color-grey-800: var(--color-wg9);
+  --color-grey-850: var(--color-wg10);
+  --color-grey-900: var(--color-wg11);
+  --color-grey-950: var(--color-wg12);
+
+  --color-ink-50: var(--color-wg1);
+  --color-ink-100: var(--color-wg2);
+  --color-ink-200: var(--color-wg3);
+  --color-ink-300: var(--color-wg4);
+  --color-ink-400: var(--color-wg5);
+  --color-ink-500: var(--color-wg6);
+  --color-ink-600: var(--color-wg7);
+  --color-ink-700: var(--color-wg8);
+  --color-ink-800: var(--color-wg9);
+  --color-ink-850: var(--color-wg10);
+  --color-ink-900: var(--color-wg11);
+  --color-ink-950: var(--color-wg12);
 
   /* ---- Semantic accent ramps ---- */
   /* Success uses the lichen lime family and stays status-only. The original
@@ -242,7 +242,7 @@
      convention). */
   --radius-dot: 2px;
 
-  /* ---- Elevation ---- Shopify-inspired 0–600 ladder, recolored with NG12.
+  /* ---- Elevation ---- Shopify-inspired 0–600 ladder, recolored with WG12.
      Geometry and opacity increase together; static surfaces remain at 0. */
   --shadow-0: none;
   --shadow-100: 0 1px 0 0 rgb(32 32 32 / 0.07);
@@ -258,7 +258,7 @@
 
   /* Pinned-table-column smudges — whisper-soft directional casts shown only
      while content is hidden behind a sticky column (Table is scroll-aware).
-     Deep negative spread keeps the edge feathered; the tint is neutral grey. */
+     Deep negative spread keeps the edge feathered; the tint is warm grey. */
   --shadow-table-smudge-left: 8px 0 24px -14px rgb(32 32 32 / 0.05);
   --shadow-table-smudge-right: -8px 0 24px -14px rgb(32 32 32 / 0.05);
 
@@ -338,6 +338,7 @@
  * @theme inline exposes them as utilities (bg-background, text-primary, …).
  */
 @theme inline {
+  /* The shell canvas and its ink: the ground between top-level panels. */
   --color-background: var(--background);
   --color-foreground: var(--foreground);
 
@@ -354,13 +355,16 @@
   --color-secondary: var(--text-secondary);
   --color-tertiary: var(--text-tertiary);
 
+  /* One continuous recess inside a white surface, never a screen-level ground. */
   --color-surface: var(--surface);
   --color-surface-foreground: var(--surface-foreground);
   --color-elevated: var(--elevated);
 
+  /* The hover and row-state wash: interaction, not a default item background. */
   --color-muted: var(--muted);
   --color-muted-foreground: var(--muted-foreground);
 
+  /* The white working plane that sits on the canvas, and the specimen hairline. */
   --color-card: var(--card);
   --color-card-foreground: var(--card-foreground);
   --color-specimen-stroke: var(--specimen-stroke);
@@ -382,12 +386,15 @@
   /* Quiet fill — avatars, chips, and disabled controls */
   --color-fill: var(--fill);
   --color-fill-foreground: var(--fill-foreground);
+  /* Table surfaces: the white tray, its hairlines, and header ink. */
   --color-table-shell: var(--table-shell);
   --color-table-stroke: var(--table-stroke);
   --color-table-header-foreground: var(--table-header-foreground);
 
+  /* The artifact sheet: white warmed by a trace of the brand mark. */
   --color-artifact-canvas: var(--artifact-canvas);
 
+  /* The active and selected wash, one step above hover. */
   --color-accent: var(--accent);
   --color-accent-foreground: var(--accent-foreground);
 
@@ -399,12 +406,14 @@
   /* 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). */
   --color-warning: var(--color-warning-500);
-  --color-warning-foreground: var(--color-ng12);
+  --color-warning-foreground: var(--color-wg12);
+  /* Danger and info: solid semantic fills carrying white foregrounds. */
   --color-danger: var(--color-danger-600);
   --color-danger-foreground: var(--color-white);
   --color-info: var(--color-info-600);
   --color-info-foreground: var(--color-white);
 
+  /* The neutral stroke ladder: every 1px UI border stays within WG3 to WG5. */
   --color-border-primary: var(--border-primary);
   --color-border-secondary: var(--border-secondary);
   --color-border-tertiary: var(--border-tertiary);
@@ -414,6 +423,7 @@
   --color-menu-stroke: var(--menu-stroke);
   --color-toast-stroke: var(--toast-stroke);
   --color-tree-stroke: var(--tree-stroke);
+  /* Focus ring and scrim, both translucent warm ink. */
   --color-ring: var(--ring);
   --color-overlay: var(--overlay);
 
@@ -444,36 +454,35 @@
 
 /* ---- Theme (light only) ---- */
 :root {
-  /* Surfaces and achromatic text/actions point into NG; the primary CTA
+  /* Surfaces and achromatic text/actions point into WG; the primary CTA
      points into G. */
-  --background: var(--color-ng2);          /* step 2  · canvas */
-  --foreground: var(--color-ng12);         /* step 12 */
-
-  /* Both surface contexts point directly into the approved NG text steps.
-     NG10 is the tertiary/de-emphasis step; it does not clear 4.5:1 for normal
-     body text on these surfaces, so reserve it for nonessential content. */
-  --text-on-white-primary: var(--color-ng12);       /* 16.29:1 · AAA */
-  --text-on-white-secondary: var(--color-ng11);     /*  6.56:1 · AA  */
-  --text-on-white-tertiary: var(--color-ng10);      /*  4.22:1 */
-  --text-on-warm-grey-primary: var(--color-ng12);   /* legacy name · neutral canvas */
-  --text-on-warm-grey-secondary: var(--color-ng11); /* legacy name · neutral canvas */
-  --text-on-warm-grey-tertiary: var(--color-ng10);  /* legacy name · neutral canvas */
+  --background: var(--color-wg2);          /* step 2  · canvas */
+  --foreground: var(--color-wg12);         /* step 12 */
+
+  /* Both surface contexts point directly into the approved WG text steps.
+     WG10 is the tertiary/de-emphasis step and clears AA on White and WG2. */
+  --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-wg10);      /*  5.60: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-wg10);  /*  4.95:1 on WG2 · AA  */
 
   /* Existing context-free utilities remain compatibility aliases. Their
-     tertiary value stays conservative across NG2–NG4 and White. */
-  --text-primary: var(--color-ng12);       /* ~12.5:1 AAA (min surf) */
-  --text-secondary: var(--color-ng11);     /* ~5.0:1  AA  (min surf) */
-  --text-tertiary: #625f5c;                /* ~4.53:1 AA  (min surf) */
+     tertiary value stays conservative across WG2–WG4 and White. */
+  --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) */
 
-  --surface: var(--color-ng3);             /* step 3  · tinted canvas */
-  --surface-foreground: var(--color-ng12);
+  --surface: var(--color-wg3);             /* step 3  · tinted canvas */
+  --surface-foreground: var(--color-wg12);
   --elevated: var(--color-white);           /* pure white base */
 
-  --muted: var(--color-ng4);               /* step 4 */
-  --muted-foreground: var(--color-ng11);   /* step 11 · readable UI text */
+  --muted: var(--color-wg4);               /* step 4 */
+  --muted-foreground: var(--color-wg11);   /* step 11 · readable UI text */
 
   --card: var(--color-white);               /* pure white base */
-  --card-foreground: var(--color-ng12);
+  --card-foreground: var(--color-wg12);
 
   /* Studio green is deliberately isolated to the primary CTA role (roughly
      5–10% of a screen). Selection controls keep using neutral `brand` below,
@@ -486,36 +495,36 @@
 
   /* Neutral action role. The `brand` name remains as a compatibility API,
      and shared selection/control states intentionally remain achromatic. */
-  --brand: var(--color-ng12);              /* darkest neutral action */
+  --brand: var(--color-wg12);              /* darkest neutral action */
   --brand-foreground: var(--color-white);
-  --brand-hover: var(--color-ng11);        /* lighter hover lift */
-  --brand-text: var(--color-ng12);         /* action text / links */
+  --brand-hover: var(--color-wg11);        /* lighter hover lift */
+  --brand-text: var(--color-wg12);         /* action text / links */
 
-  /* Interactive rows lift one step above the NG1 zebra band. */
-  --table-row-hover: var(--color-ng2);
-  --table-row-selected: var(--color-ng1);
+  /* Interactive row hover/focus uses the WG1 highlight wash. */
+  --table-row-hover: var(--color-wg2);
+  --table-row-selected: var(--color-wg1);
 
-  /* Quiet component fill. NG3 is the first interactive-background
+  /* Quiet component fill. WG3 is the first interactive-background
      step, so this remains visible on both white cards and the step-2 canvas. */
-  --fill: var(--color-ng3);                /* step 3 · default component fill */
-  --fill-foreground: var(--color-ng12);
+  --fill: var(--color-wg3);                /* step 3 · default component fill */
+  --fill-foreground: var(--color-wg12);
 
-  --accent: var(--color-ng5);              /* step 5 · active / selected wash */
-  --accent-foreground: var(--color-ng12);
+  --accent: var(--color-wg5);              /* step 5 · active / selected wash */
+  --accent-foreground: var(--color-wg12);
 
-  /* Every neutral border stays within the consecutive NG3–NG5 range:
+  /* Every neutral border stays within the consecutive WG3–WG5 range:
      tertiary is the quietest 1px divider, secondary is the default hairline,
      and primary is the strongest neutral edge. */
-  --border-primary: var(--color-ng5);       /* step 5 · strongest */
-  --border-secondary: var(--color-ng4);     /* step 4 · default   */
-  --border-tertiary: var(--color-ng3);      /* step 3 · faintest  */
+  --border-primary: var(--color-wg5);       /* step 5 · strongest */
+  --border-secondary: var(--color-wg4);     /* step 4 · default   */
+  --border-tertiary: var(--color-wg3);      /* step 3 · faintest  */
   /* Legacy aliases point into the scale so existing utilities keep resolving. */
   --border: var(--border-secondary);        /* default hairline / separator */
   --border-strong: var(--border-primary);   /* emphasized / hover / selected */
-  --input: var(--color-ng4);                /* form-control edge */
-  --menu-stroke: var(--color-ng4);          /* dropdown edge + separator */
-  --toast-stroke: var(--color-ng4);         /* toast card edge */
-  --tree-stroke: var(--color-ng4);          /* tree connector rail + elbows */
+  --input: var(--color-wg4);                /* form-control edge */
+  --menu-stroke: var(--color-wg4);          /* dropdown edge + separator */
+  --toast-stroke: var(--color-wg4);         /* toast card edge */
+  --tree-stroke: var(--color-wg4);          /* tree connector rail + elbows */
   --field-focus: var(--color-g8);           /* subtle green focused-control edge */
 
   /* Ripple — the appearance wash that radiates from a floating surface's
@@ -526,27 +535,27 @@
 
   /* Stroke width — every standard UI border is exactly 1px. */
   --stroke-width: 1px;
-  --ring: color-mix(in srgb, var(--color-ng12) 50%, transparent);    /* NG12 @ 50% */
-  --overlay: color-mix(in srgb, var(--color-ng12) 50%, transparent); /* NG12 @ 50% */
+  --ring: color-mix(in srgb, var(--color-wg12) 50%, transparent);    /* WG12 @ 50% */
+  --overlay: color-mix(in srgb, var(--color-wg12) 50%, transparent); /* WG12 @ 50% */
 
   /* Functional / domain tokens — named for their render role, pointing into
-     the canonical NG palette. Components pass these into non-CSS renderers
+     the canonical WG palette. Components pass these into non-CSS renderers
      (Recharts, React Flow, the Paper/WebGL texture) so no component carries a
      raw primitive value. Same DS pattern as the data-viz palette. */
   --chart-axis: var(--border-tertiary);  /* axis lines + de-emphasised marks */
-  --chart-grid: var(--color-ng3);        /* quieter than axes, visible on white */
-  --chart-track: var(--color-ng3);       /* funnel / progress track */
-  --chart-context: var(--color-ng6);     /* de-emphasised context series */
+  --chart-grid: var(--color-wg3);        /* quieter than axes, visible on white */
+  --chart-track: var(--color-wg3);       /* funnel / progress track */
+  --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-ng12);      /* brand-texture / pixel-blast marks */
+  --texture-ink: var(--color-wg12);      /* brand-texture / pixel-blast marks */
   --table-shell: var(--color-white);     /* simplified single-surface table */
-  --table-stroke: var(--color-ng3);      /* table outline + row separators */
-  --table-header-foreground: var(--color-ng10); /* secondary table heading text */
-  --specimen-stroke: var(--color-ng3);   /* showcase preview + variant-group frames */
-  --table-scroll-hint: rgb(32 32 32 / 0.04); /* right-edge "more columns" wash */
-  --surface-inverse: var(--color-ng12);     /* dark hero / inverse surface base */
-  --surface-inverse-soft: var(--color-ng11);/* dark hero gradient falloff */
+  --table-stroke: var(--color-wg3);      /* table outline + row separators */
+  --table-header-foreground: var(--color-wg11); /* readable secondary table heading text */
+  --specimen-stroke: var(--color-wg3);   /* showcase preview + variant-group frames */
+  --table-scroll-hint: color-mix(in srgb, var(--color-wg12) 4%, transparent); /* right-edge wash */
+  --surface-inverse: var(--color-wg12);     /* dark hero / inverse surface base */
+  --surface-inverse-soft: var(--color-wg11);/* dark hero gradient falloff */
   --artifact-canvas: color-mix(in srgb, var(--color-brand-mark) 7%, var(--color-white));
 
   /* shadcn-compat raw surfaces — so a downstream shadcn Sidebar / Popover
@@ -669,7 +678,7 @@
 }
 
 .ask-empty-composer [data-slot="aui_composer-shell"] {
-  border-color: var(--color-ng4);
+  border-color: var(--color-wg4);
   box-shadow: var(--shadow-200);
 }
 
@@ -780,11 +789,11 @@
    halftone dissolves from the BOTTOM upward (a soft mask band sweeps up
    through it) while the whole layer drifts up and fades — cloud cover
    breaking and rising, not a curtain covering it. The mask rests fully
-   opaque (element aligned with the black end of an oversized gradient), and
+   opaque (element aligned with the ink end of an oversized gradient), and
    the lifted state slides the element to the transparent end. */
 .ads-texture-lift {
-  mask-image: linear-gradient(to top, transparent 0%, transparent 42%, black 58%, black 100%);
-  -webkit-mask-image: linear-gradient(to top, transparent 0%, transparent 42%, black 58%, black 100%);
+  mask-image: linear-gradient(to top, transparent 0%, transparent 42%, var(--color-wg12) 58%, var(--color-wg12) 100%);
+  -webkit-mask-image: linear-gradient(to top, transparent 0%, transparent 42%, var(--color-wg12) 58%, var(--color-wg12) 100%);
   mask-repeat: no-repeat;
   -webkit-mask-repeat: no-repeat;
   mask-size: 100% 240%;
@@ -959,7 +968,7 @@
     /* Optional persistent inset (e.g. the field inner glow) — hosts opt in
        via [--glow-inset:var(--inner-glow-field)]; carried through every
        state below so hover/focus/invalid never strip it. */
-    --glow-inset: 0 0 #0000;
+    --glow-inset: 0 0 transparent;
 
     border-color: var(--glow-border-rest);
     box-shadow: var(--glow-inset);
@@ -1156,14 +1165,10 @@
 }
 
 /* Comments become a placement mode while the comments panel is open. Keep
-   the native cursor readable while giving it the same compact ADS chat mark
-   used by the rest of the Artifact UI. */
+   the native cursor readable while keeping placement precise. */
 .artifact-comment-cursor,
 .artifact-comment-cursor * {
-  cursor:
-    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='12' fill='white' stroke='%23242424' stroke-width='1.5'/%3E%3Cpath d='M8.5 9.5h11v7h-5.5l-3.5 3v-3h-2z' fill='%23242424'/%3E%3C/svg%3E")
-      5 5,
-    crosshair !important;
+  cursor: crosshair !important;
 }
 /* Let the consumer's Tailwind discover the classes ADS components use. */
 @source "./**/*.{js,mjs}";