@actioneer/ads 1.0.3 → 1.0.5

package/styles.css

@@ -39,7 +39,7 @@
 /*
  * ============================================================
  *  ADS 1.0 — Design Tokens
- *  Palette: warm greys + product green
+ *  Palette: warm greys + product teal
  *  Typeface: Aribau Grotesk
  * ============================================================
  */
@@ -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 */
@@ -93,35 +93,35 @@
 
   /* ---- Foundation palette ----
      Canonical primitive names:
-     G1…G12 = Green · WG1…WG12 = Warm Grey.
+     T1…T12 = Teal · 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 WG3–WG5. ---- */
-  --color-g1: #f7f9f7;
-  --color-g2: #eef5f0;
-  --color-g3: #e2efe5;
-  --color-g4: #cce4d2;
-  --color-g5: #b4d8be;
-  --color-g6: #9bcbaa;
-  --color-g7: #7db78f;
-  --color-g8: #5c9c73;
-  --color-g9: #398457;
-  --color-g10: #2b7348;
-  --color-g11: #1f623b;
-  --color-g12: #183c28;
-
-  --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-t1: #f6f9f9;
+  --color-t2: #edf5f4;
+  --color-t3: #dfefec;
+  --color-t4: #c7e4df;
+  --color-t5: #add8d1;
+  --color-t6: #91cbc2;
+  --color-t7: #6fb7ad;
+  --color-t8: #4c9b92;
+  --color-t9: #1c8379;
+  --color-t10: #017369;
+  --color-t11: #016159;
+  --color-t12: #0f3c37;
+
+  --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. */
@@ -138,21 +138,36 @@
   --color-ng11: var(--color-wg11);
   --color-ng12: var(--color-wg12);
 
+  /* Deprecated Green names resolve step-for-step to the canonical Teal ramp.
+     Keep these aliases so existing consumer utilities (`bg-g9`) still render. */
+  --color-g1: var(--color-t1);
+  --color-g2: var(--color-t2);
+  --color-g3: var(--color-t3);
+  --color-g4: var(--color-t4);
+  --color-g5: var(--color-t5);
+  --color-g6: var(--color-t6);
+  --color-g7: var(--color-t7);
+  --color-g8: var(--color-t8);
+  --color-g9: var(--color-t9);
+  --color-g10: var(--color-t10);
+  --color-g11: var(--color-t11);
+  --color-g12: var(--color-t12);
+
   --color-white: #ffffff;
 
   /* Compatibility aliases preserve the existing ADS utility/API surface. */
-  --color-green-50: var(--color-g1);
-  --color-green-100: var(--color-g2);
-  --color-green-200: var(--color-g3);
-  --color-green-300: var(--color-g4);
-  --color-green-400: var(--color-g5);
-  --color-green-500: var(--color-g6);
-  --color-green-600: var(--color-g7);
-  --color-green-700: var(--color-g8);
-  --color-green-800: var(--color-g9);
-  --color-green-850: var(--color-g10);
-  --color-green-900: var(--color-g11);
-  --color-green-950: var(--color-g12);
+  --color-green-50: var(--color-t1);
+  --color-green-100: var(--color-t2);
+  --color-green-200: var(--color-t3);
+  --color-green-300: var(--color-t4);
+  --color-green-400: var(--color-t5);
+  --color-green-500: var(--color-t6);
+  --color-green-600: var(--color-t7);
+  --color-green-700: var(--color-t8);
+  --color-green-800: var(--color-t9);
+  --color-green-850: var(--color-t10);
+  --color-green-900: var(--color-t11);
+  --color-green-950: var(--color-t12);
 
   --color-grey-50: var(--color-wg1);
   --color-grey-100: var(--color-wg2);
@@ -181,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;
@@ -226,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. */
@@ -380,7 +394,7 @@
   --color-card-foreground: var(--card-foreground);
   --color-specimen-stroke: var(--specimen-stroke);
 
-  /* Primary CTA role — restrained Studio green, used sparingly. */
+  /* Primary CTA role — restrained Studio teal, used sparingly. */
   --color-action-primary: var(--action-primary);
   --color-action-primary-foreground: var(--action-primary-foreground);
   --color-action-primary-hover: var(--action-primary-hover);
@@ -388,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);
@@ -409,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
@@ -465,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 */
 
@@ -474,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);
@@ -497,25 +508,22 @@
   --card: var(--color-white);               /* pure white base */
   --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,
-     so tabs, switches, radios, and progress never inherit CTA color. */
-  --action-primary: var(--color-g9);
+  /* 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-g10);
-  --action-primary-text: var(--color-g11);
-  --action-primary-soft: var(--color-g3);
+  --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. */
@@ -538,7 +546,7 @@
   --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 */
+  --field-focus: var(--color-t8);           /* subtle teal focused-control edge */
 
   /* Ripple — the appearance wash that radiates from a floating surface's
      origin corner as it opens (Dropdown/Popover/Select/Modal…). A soft ink
@@ -548,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
@@ -561,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 */
@@ -580,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);
@@ -670,12 +678,12 @@
 }
 
 /* Ask landing: Hex's hierarchy translated into ADS tokens. The same quiet
-   texture spans the complete canvas; G2-G8 concentrate focus at the prompt. */
+   texture spans the complete canvas; T2-T8 concentrate focus at the prompt. */
 .ask-empty-state {
   background-color: var(--color-white);
   background-image: radial-gradient(
     circle,
-    color-mix(in oklab, var(--color-g8) 22%, transparent) 0 0.75px,
+    color-mix(in oklab, var(--color-t8) 22%, transparent) 0 0.75px,
     transparent 0.9px
   );
   background-size: 12px 12px;
@@ -684,8 +692,8 @@
 .ask-empty-hero-pattern {
   background-image: radial-gradient(
     ellipse at 50% 52%,
-    color-mix(in oklab, var(--color-g3) 88%, transparent) 0%,
-    color-mix(in oklab, var(--color-g2) 48%, transparent) 38%,
+    color-mix(in oklab, var(--color-t3) 88%, transparent) 0%,
+    color-mix(in oklab, var(--color-t2) 48%, transparent) 38%,
     transparent 68%
   );
 }
@@ -696,8 +704,8 @@
 }
 
 .ask-empty-composer:focus-within [data-slot="aui_composer-shell"] {
-  border-color: var(--color-g8);
-  box-shadow: 0 0 0 3px var(--color-g4), var(--shadow-300);
+  border-color: var(--color-t8);
+  box-shadow: 0 0 0 3px var(--color-t4), var(--shadow-300);
 }
 
 .ask-section-label {