@actioneer/ads 1.0.6 → 1.0.8

package/styles.css

@@ -39,7 +39,7 @@
 /*
  * ============================================================
  *  ADS 1.0 — Design Tokens
- *  Palette: warm greys + product teal
+ *  Palette: neutral greys + product teal
  *  Typeface: Aribau Grotesk
  * ============================================================
  */
@@ -93,7 +93,7 @@
 
   /* ---- Foundation palette ----
      Canonical primitive names:
-     T1…T12 = Teal · WG1…WG12 = Warm Grey.
+     T1…T12 = Teal · WG1…WG12 = Neutral Grey (the WG token names are kept).
      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. ---- */
@@ -110,20 +110,20 @@
   --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.
+  --color-wg1: #fafafa;
+  --color-wg2: #f6f6f6;
+  --color-wg3: #f1f1f1;
+  --color-wg4: #ececec;
+  --color-wg5: #e6e6e6;
+  --color-wg6: #dedede;
+  --color-wg7: #d4d4d4;
+  --color-wg8: #bdbdbd;
+  --color-wg9: #868686;
+  --color-wg10: #7c7b7b;
+  --color-wg11: #5e5d5d;
+  --color-wg12: #202020;
+
+  /* Deprecated NG names resolve step-for-step to the canonical WG ramp.
      Keep these aliases so existing consumer utilities continue to render. */
   --color-ng1: var(--color-wg1);
   --color-ng2: var(--color-wg2);
@@ -267,41 +267,26 @@
      convention). */
   --radius-dot: 2px;
 
-  /* ---- Elevation ---- Shopify-inspired 0–600 ladder, recolored with WG12.
-     Geometry and opacity increase together; static surfaces remain at 0. */
+  /* ---- Elevation ---- five shadows, nothing else (ADS 1.0.8).
+     A shadow means "this layer floats above the page". Everything that sits
+     in the page — cards, panels, chips, buttons, tabs, fields — is flat and
+     reads by fill or border. Neutral WG12 ink (rgb 32 32 32); each floating
+     level pairs a 4% hairline (crisp edge on white), a tight contact shadow
+     and a wide ambient one. */
   --shadow-0: none;
-  --shadow-100: 0 1px 0 0 rgb(32 32 32 / 0.07);
-  --shadow-200: 0 3px 1px -1px rgb(32 32 32 / 0.07);
-  --shadow-300: 0 4px 6px -2px rgb(32 32 32 / 0.2);
-  --shadow-400: 0 8px 16px -4px rgb(32 32 32 / 0.22);
-  --shadow-500: 0 12px 20px -8px rgb(32 32 32 / 0.24);
-  --shadow-600: 0 20px 20px -8px rgb(32 32 32 / 0.28);
-
-  /* Compatibility hook stays flat. Apply a numbered level only when the user
-     explicitly requests elevation for a named surface. */
-  --shadow-elevation: var(--shadow-0);
-
-  /* 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 warm grey. */
+  /* Menus, popovers, listboxes, tooltips with content, toasts, toolbars and
+     the chat composer dock. */
+  --shadow-float: 0 0 0 1px rgb(32 32 32 / 0.04), 0 2px 4px rgb(32 32 32 / 0.04), 0 8px 20px -4px rgb(32 32 32 / 0.10);
+  /* Modals, dialogs and overlay drawers — one step above float so a dialog
+     always reads on top of a menu. */
+  --shadow-overlay: 0 0 0 1px rgb(32 32 32 / 0.04), 0 4px 8px rgb(32 32 32 / 0.04), 0 16px 36px -8px rgb(32 32 32 / 0.14);
+
+  /* Table scroll hints — 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. */
   --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);
 
-  /* ---- Button inset depth ---- Polaris-inspired stacked inner edges. The
-     lower contact line, quiet inner outline, and half-pixel top catch make
-     solid actions feel tactile without adding a decorative outer border. */
-  --inner-glow-cta: inset 0 -1px 0 1px rgb(32 32 32 / 0.22),
-    inset 0 0 0 1px rgb(32 32 32 / 0.12),
-    inset 0 0.5px 0 1.5px rgb(255 255 255 / 0.28);
-  /* Compatibility treatment for explicitly raised light fills. Its visible
-     edge is entirely inset, so it keeps a transparent outer border. */
-  --inner-glow-fill: inset 0 -1px 0 0 var(--border-primary),
-    inset 0 0 0 1px rgb(32 32 32 / 0.1),
-    inset 0 0.5px 0 1.5px rgb(255 255 255 / 0.86);
-  /* Text fields — a whisper of inset depth so the writing surface reads
-     recessed into the page (persists through hover/focus/invalid). */
-  --inner-glow-field: inset 0 1px 2px 0 rgb(32 32 32 / 0.06);
-
   /* ---- Layout ---- app-frame dimensions (Sidebar / Panel) */
   --sidebar-width: 15rem; /* 240px — primary nav rail */
   --sidebar-width-sm: 3.5rem; /* 56px — collapsed icon rail */
@@ -446,7 +431,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. */
+  /* Focus ring and scrim, both translucent neutral ink. */
   --color-ring: var(--ring);
   --color-overlay: var(--overlay);
 
@@ -482,21 +467,21 @@
   --foreground: var(--color-wg12);         /* step 12 */
 
   /* Both surface contexts point directly into the approved WG text steps.
-     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. */
+     WG9 is the tertiary/de-emphasis step for nonessential metadata. On the
+     neutral ramp it clears large-text AA only; use Secondary whenever normal
+     text must clear 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 */
+  --text-on-white-secondary: var(--color-wg11);     /*  6.56:1 · AA  */
+  --text-on-white-tertiary: var(--color-wg9);       /*  3.64:1 · large text AA */
+  --text-on-warm-grey-primary: var(--color-wg12);   /* 15.08:1 on WG2 · AAA */
+  --text-on-warm-grey-secondary: var(--color-wg11); /*  6.07:1 on WG2 · AA  */
+  --text-on-warm-grey-tertiary: var(--color-wg9);   /*  3.37: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.93:1 AA  (WG4 min surf) */
-  --text-tertiary: color-mix(in srgb, var(--color-wg10) 80%, var(--color-wg11)); /* 4.83:1 AA (WG4) */
+  --text-primary: var(--color-wg12);       /* 13.79:1 AAA (WG4 min surf) */
+  --text-secondary: var(--color-wg11);     /*  5.56:1 AA  (WG4 min surf) */
+  --text-tertiary: color-mix(in srgb, var(--color-wg10) 40%, var(--color-wg11)); /* 4.63:1 AA (WG4) */
 
   --surface: var(--color-wg3);             /* step 3  · tinted canvas */
   --surface-foreground: var(--color-wg12);
@@ -521,8 +506,9 @@
   --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);
+  /* Interactive row hover/focus uses the WG1 highlight wash. */
+  --table-row-hover: var(--color-wg1);
+  /* Start color for the row's selection fade; its right edge returns to White. */
   --table-row-selected: var(--action-primary-soft);
 
   /* Quiet component fill. WG3 is the first interactive-background
@@ -588,8 +574,8 @@
   --sidebar-foreground: var(--foreground);
   --sidebar-primary: var(--brand);
   --sidebar-primary-foreground: var(--brand-foreground);
-  --sidebar-accent: var(--action-primary-soft);
-  --sidebar-accent-foreground: var(--brand-text);
+  --sidebar-accent: var(--elevated);
+  --sidebar-accent-foreground: var(--foreground);
   --sidebar-border: var(--border);
   --sidebar-ring: var(--ring);
   --popover: var(--elevated);
@@ -619,6 +605,12 @@
  *  clipped to the panel radius. Honours reduced-motion.
  * ============================================================
  */
+/* Icon-only controls fill their icon on hover instead of drawing a
+   background (see IconHoverFillContext in src/lib/icons.tsx). */
+.ads-icon-hover { display: none; }
+[data-icon-hover-fill]:hover:not(:disabled) .ads-icon-rest { display: none; }
+[data-icon-hover-fill]:hover:not(:disabled) .ads-icon-hover { display: block; }
+
 @keyframes ads-ripple-wave {
   0% { opacity: 0.6; transform: scale(0.15); }
   100% { opacity: 0; transform: scale(1.08); }
@@ -700,12 +692,12 @@
 
 .ask-empty-composer [data-slot="aui_composer-shell"] {
   border-color: var(--color-wg4);
-  box-shadow: var(--shadow-200);
+  box-shadow: var(--shadow-float);
 }
 
 .ask-empty-composer:focus-within [data-slot="aui_composer-shell"] {
   border-color: var(--color-t8);
-  box-shadow: 0 0 0 3px var(--color-t4), var(--shadow-300);
+  box-shadow: 0 0 0 3px var(--color-t4), var(--shadow-float);
 }
 
 .ask-section-label {
@@ -714,13 +706,10 @@
 }
 
 /* Artifact widgets are positioned by GridStack; ADS cards own the visible
-   surface while the library content wrapper only clips during interaction.
-   The subtle elevation lives on the wrapper (not the inner card) because the
-   wrapper's own `overflow: hidden` would clip a shadow drawn on its child. */
+   surface while the library content wrapper only clips during interaction. */
 .artifact-grid-stack > .grid-stack-item > .grid-stack-item-content {
   overflow: hidden;
   border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-elevation);
 }
 
 /* Edit affordances live on a parent flag — never toggle GridStack's own
@@ -986,9 +975,8 @@
     --glow-border-rest: var(--border);
     --glow-border-hover: var(--brand);
     --glow-border-active: var(--foreground);
-    /* 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. */
+    /* Optional persistent inset hook. ADS fields are flat (no inset shadow);
+       carried through every state below so a host value is never stripped. */
     --glow-inset: 0 0 transparent;
 
     border-color: var(--glow-border-rest);

package/theme.css

@@ -8,7 +8,7 @@
 /*
  * ============================================================
  *  ADS 1.0 — Design Tokens
- *  Palette: warm greys + product teal
+ *  Palette: neutral greys + product teal
  *  Typeface: Aribau Grotesk
  * ============================================================
  */
@@ -62,7 +62,7 @@
 
   /* ---- Foundation palette ----
      Canonical primitive names:
-     T1…T12 = Teal · WG1…WG12 = Warm Grey.
+     T1…T12 = Teal · WG1…WG12 = Neutral Grey (the WG token names are kept).
      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. ---- */
@@ -79,20 +79,20 @@
   --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.
+  --color-wg1: #fafafa;
+  --color-wg2: #f6f6f6;
+  --color-wg3: #f1f1f1;
+  --color-wg4: #ececec;
+  --color-wg5: #e6e6e6;
+  --color-wg6: #dedede;
+  --color-wg7: #d4d4d4;
+  --color-wg8: #bdbdbd;
+  --color-wg9: #868686;
+  --color-wg10: #7c7b7b;
+  --color-wg11: #5e5d5d;
+  --color-wg12: #202020;
+
+  /* Deprecated NG names resolve step-for-step to the canonical WG ramp.
      Keep these aliases so existing consumer utilities continue to render. */
   --color-ng1: var(--color-wg1);
   --color-ng2: var(--color-wg2);
@@ -236,41 +236,26 @@
      convention). */
   --radius-dot: 2px;
 
-  /* ---- Elevation ---- Shopify-inspired 0–600 ladder, recolored with WG12.
-     Geometry and opacity increase together; static surfaces remain at 0. */
+  /* ---- Elevation ---- five shadows, nothing else (ADS 1.0.8).
+     A shadow means "this layer floats above the page". Everything that sits
+     in the page — cards, panels, chips, buttons, tabs, fields — is flat and
+     reads by fill or border. Neutral WG12 ink (rgb 32 32 32); each floating
+     level pairs a 4% hairline (crisp edge on white), a tight contact shadow
+     and a wide ambient one. */
   --shadow-0: none;
-  --shadow-100: 0 1px 0 0 rgb(32 32 32 / 0.07);
-  --shadow-200: 0 3px 1px -1px rgb(32 32 32 / 0.07);
-  --shadow-300: 0 4px 6px -2px rgb(32 32 32 / 0.2);
-  --shadow-400: 0 8px 16px -4px rgb(32 32 32 / 0.22);
-  --shadow-500: 0 12px 20px -8px rgb(32 32 32 / 0.24);
-  --shadow-600: 0 20px 20px -8px rgb(32 32 32 / 0.28);
-
-  /* Compatibility hook stays flat. Apply a numbered level only when the user
-     explicitly requests elevation for a named surface. */
-  --shadow-elevation: var(--shadow-0);
-
-  /* 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 warm grey. */
+  /* Menus, popovers, listboxes, tooltips with content, toasts, toolbars and
+     the chat composer dock. */
+  --shadow-float: 0 0 0 1px rgb(32 32 32 / 0.04), 0 2px 4px rgb(32 32 32 / 0.04), 0 8px 20px -4px rgb(32 32 32 / 0.10);
+  /* Modals, dialogs and overlay drawers — one step above float so a dialog
+     always reads on top of a menu. */
+  --shadow-overlay: 0 0 0 1px rgb(32 32 32 / 0.04), 0 4px 8px rgb(32 32 32 / 0.04), 0 16px 36px -8px rgb(32 32 32 / 0.14);
+
+  /* Table scroll hints — 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. */
   --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);
 
-  /* ---- Button inset depth ---- Polaris-inspired stacked inner edges. The
-     lower contact line, quiet inner outline, and half-pixel top catch make
-     solid actions feel tactile without adding a decorative outer border. */
-  --inner-glow-cta: inset 0 -1px 0 1px rgb(32 32 32 / 0.22),
-    inset 0 0 0 1px rgb(32 32 32 / 0.12),
-    inset 0 0.5px 0 1.5px rgb(255 255 255 / 0.28);
-  /* Compatibility treatment for explicitly raised light fills. Its visible
-     edge is entirely inset, so it keeps a transparent outer border. */
-  --inner-glow-fill: inset 0 -1px 0 0 var(--border-primary),
-    inset 0 0 0 1px rgb(32 32 32 / 0.1),
-    inset 0 0.5px 0 1.5px rgb(255 255 255 / 0.86);
-  /* Text fields — a whisper of inset depth so the writing surface reads
-     recessed into the page (persists through hover/focus/invalid). */
-  --inner-glow-field: inset 0 1px 2px 0 rgb(32 32 32 / 0.06);
-
   /* ---- Layout ---- app-frame dimensions (Sidebar / Panel) */
   --sidebar-width: 15rem; /* 240px — primary nav rail */
   --sidebar-width-sm: 3.5rem; /* 56px — collapsed icon rail */
@@ -415,7 +400,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. */
+  /* Focus ring and scrim, both translucent neutral ink. */
   --color-ring: var(--ring);
   --color-overlay: var(--overlay);
 
@@ -451,21 +436,21 @@
   --foreground: var(--color-wg12);         /* step 12 */
 
   /* Both surface contexts point directly into the approved WG text steps.
-     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. */
+     WG9 is the tertiary/de-emphasis step for nonessential metadata. On the
+     neutral ramp it clears large-text AA only; use Secondary whenever normal
+     text must clear 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 */
+  --text-on-white-secondary: var(--color-wg11);     /*  6.56:1 · AA  */
+  --text-on-white-tertiary: var(--color-wg9);       /*  3.64:1 · large text AA */
+  --text-on-warm-grey-primary: var(--color-wg12);   /* 15.08:1 on WG2 · AAA */
+  --text-on-warm-grey-secondary: var(--color-wg11); /*  6.07:1 on WG2 · AA  */
+  --text-on-warm-grey-tertiary: var(--color-wg9);   /*  3.37: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.93:1 AA  (WG4 min surf) */
-  --text-tertiary: color-mix(in srgb, var(--color-wg10) 80%, var(--color-wg11)); /* 4.83:1 AA (WG4) */
+  --text-primary: var(--color-wg12);       /* 13.79:1 AAA (WG4 min surf) */
+  --text-secondary: var(--color-wg11);     /*  5.56:1 AA  (WG4 min surf) */
+  --text-tertiary: color-mix(in srgb, var(--color-wg10) 40%, var(--color-wg11)); /* 4.63:1 AA (WG4) */
 
   --surface: var(--color-wg3);             /* step 3  · tinted canvas */
   --surface-foreground: var(--color-wg12);
@@ -490,8 +475,9 @@
   --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);
+  /* Interactive row hover/focus uses the WG1 highlight wash. */
+  --table-row-hover: var(--color-wg1);
+  /* Start color for the row's selection fade; its right edge returns to White. */
   --table-row-selected: var(--action-primary-soft);
 
   /* Quiet component fill. WG3 is the first interactive-background
@@ -557,8 +543,8 @@
   --sidebar-foreground: var(--foreground);
   --sidebar-primary: var(--brand);
   --sidebar-primary-foreground: var(--brand-foreground);
-  --sidebar-accent: var(--action-primary-soft);
-  --sidebar-accent-foreground: var(--brand-text);
+  --sidebar-accent: var(--elevated);
+  --sidebar-accent-foreground: var(--foreground);
   --sidebar-border: var(--border);
   --sidebar-ring: var(--ring);
   --popover: var(--elevated);
@@ -588,6 +574,12 @@
  *  clipped to the panel radius. Honours reduced-motion.
  * ============================================================
  */
+/* Icon-only controls fill their icon on hover instead of drawing a
+   background (see IconHoverFillContext in src/lib/icons.tsx). */
+.ads-icon-hover { display: none; }
+[data-icon-hover-fill]:hover:not(:disabled) .ads-icon-rest { display: none; }
+[data-icon-hover-fill]:hover:not(:disabled) .ads-icon-hover { display: block; }
+
 @keyframes ads-ripple-wave {
   0% { opacity: 0.6; transform: scale(0.15); }
   100% { opacity: 0; transform: scale(1.08); }