@adia-ai/web-components 0.6.47 → 0.6.48

package/index.css

@@ -3,9 +3,11 @@
  *
  *   <link rel="stylesheet" href="@adia-ai/web-components/css" />
  *
- * Imports, in cascade order: design tokens (primitives + semantics
- * + typography — via the colors tree) → component styles → global
- * resets.
+ * The real barrel now lives at `./styles/index.css`; this file re-exports
+ * it (v0.6.48 foundation reorg, ADR-0035) so this published entry point
+ * and the `dist/web-components.min.css` bundle are unchanged. It pulls, in
+ * cascade order: design tokens (foundation + type + color, via the colors
+ * tree) → component styles → global resets.
  *
  * Composite-element CSS (chat-shell, editor-shell, admin-shell, etc.)
  * lives in the sibling `@adia-ai/web-modules` package as of 0.0.29
@@ -22,6 +24,4 @@
  *   @adia-ai/web-components/styles/typography.css  (standalone)
  */
 
-@import "./styles/tokens.css";
-@import "./styles/components.css";
-@import "./styles/resets.css";
+@import "./styles/index.css";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.6.47",
+  "version": "0.6.48",
   "description": "AdiaUI web components \u2014 vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui-runtime.",
   "type": "module",
   "types": "./index.d.ts",

package/styles/README.md

@@ -8,17 +8,24 @@ Consumable design-token reference for component authors.
 
 ## Token layers
 
+Files are organized by **dimension × layer** (v0.6.48 reorg, [ADR-0035](../../../.brain/adrs/0035-foundation-by-dimension-and-layer.md)).
+A file answers two questions: which dimension (color · type · space · size · radius · motion · elevation) and which layer (primitive → semantic → role → applied/element → attribute-API → context → reset).
+
 | Layer | Files | When to use |
 |-------|-------|-------------|
-| **L1 — Primitives** | `colors/parameters.css`, `colors/primitives.css` | Token system authors only. OKLCH base values, hue ramps, neutral scales. |
-| **L2 — Families** | `colors/semantics.css` | Component authors building *new* semantic aliases not yet in L3. Maps primitives to semantic meaning (`--a-canvas-text`, `--a-danger-muted`). |
-| **L3 — Semantic aliases** | `colors/semantics.css` (short-alias section) | **All component CSS.** The stable public API: `--a-fg`, `--a-bg`, `--a-accent`, `--a-border-subtle`. |
+| **L1 — Color primitives** | `colors/parameters.css`, `colors/primitives-*.css` | Token system authors only. OKLCH base values, hue ramps, neutral scales. |
+| **L2 — Color families** | `colors/semantics/core.css` | Component authors building *new* semantic aliases not yet exposed. Maps primitives to meaning (`--a-canvas-text`, `--a-danger-muted`). |
+| **L3 — Color aliases** | `colors/semantics/core.css` + `colors/semantics/{features,buckets,data-viz}.css` | **All component CSS.** The stable public API: `--a-fg`, `--a-bg`, `--a-accent`, `--a-focus-ring`, `--a-data-0`. |
 | **Dynamic / Theme** | `themes.css`, `colors/surfaces.css` | Theme authors. Per-theme hue shifts, density, radius overrides. |
-| **Typography** | `typography.css` | Component authors for font-size, weight, leading, tracking. |
-| **Spacing** | `tokens.css` | Component authors for padding, margin, gap. |
-| **Chrome** | `tokens.css` | Shell / layout authors for chrome dimensions (header/footer/toolbar heights). |
-| **Shadows** | `tokens.css` | Elevation authors. `--a-shadow-sm/md/lg`. |
-| **Timing** | `tokens.css` | Motion authors. `--a-duration`, `--a-easing`. |
+| **Type primitives + roles** | `type/scale.css` (L1/L2), `type/roles.css` (L3) | Component authors for font-size, weight, leading, tracking. |
+| **Element defaults** | `type/elements.css` | Native HTML element typographic baseline (table, code, h1–h6, links…). |
+| **Spacing / Size** | `foundation/space.css`, `foundation/size.css` | Component authors for padding, margin, gap, component/chrome heights. |
+| **Radius** | `foundation/radius.css` | `--a-radius-sm/md/lg`, the `--a-radius-k` knob. |
+| **Shadows** | `foundation/elevation.css` | Elevation authors. `--a-shadow-sm/md/lg`. |
+| **Timing** | `foundation/motion.css` | Motion authors. `--a-duration`, `--a-easing`. |
+| **Attribute API** | `api/sizing.css`, `api/text.css`, `api/layout.css` | The consumer-facing `[size]`/`[gap]`/`[weight]`/`[color]`/`[grow]`… selectors. |
+
+> `tokens.css`, `typography.css`, `colors/semantics.css` remain as **compat barrels** at their published paths — they `@import` the files above. Link them exactly as before; the reorg is behind the barrel.
 
 ---
 
@@ -236,13 +243,14 @@ Set `--a-density` and `--a-radius-k` on `:root` for global effect, or on `[densi
 
 ## How to add a new token
 
-1. **Need a new semantic color?** Add it in `colors/semantics.css` L3 section, mapping to an L2 family. Example:
+1. **Need a new semantic color?** Add it in `colors/semantics/core.css` (canvas/accent/brand/status), mapping to an L2 family — or the matching `colors/semantics/{features,buckets,data-viz}.css` for focus/field/highlight/chrome/bucket/data tokens. Example:
    ```css
    --a-bg-ghost: var(--a-canvas-0); /* new variant */
    ```
 2. **Need a new primitive hue?** Extend `colors/parameters.css` hue ramp.
-3. **Need a new spacing step?** Add to `tokens.css` spacing scale.
-4. **Never** add tokens directly in component CSS. Always add to the token system first, then consume.
+3. **Need a new spacing step?** Add to `foundation/space.css`. (radius → `foundation/radius.css`, motion → `foundation/motion.css`, shadow → `foundation/elevation.css`, type role → `type/roles.css`.)
+4. **Need a new global attribute?** Add the `[attr]` selector to the matching `api/{sizing,text,layout}.css` — never scatter attribute selectors into primitive files.
+5. **Never** add tokens directly in component CSS. Always add to the token system first, then consume.
 
 ---
 
@@ -250,23 +258,50 @@ Set `--a-density` and `--a-radius-k` on `:root` for global effect, or on `[densi
 
 ```
 styles/
-├── tokens.css              # Spacing, chrome, shadows, timing, density, radius
-├── typography.css          # Font families, type scale, weights, trackings
-├── themes.css              # 8 named themes + light/dark scheme overrides
-├── colors/
-│   ├── index.css           # Barrel: parameters → primitives → surfaces → scrims → semantics
-│   ├── parameters.css      # L1: hue definitions, OKLCH ramp parameters
-│   ├── primitives.css      # L1: OKLCH color values
-│   ├── surfaces.css        # L2: canvas ramps (--a-canvas-0 … 6)
-│   ├── scrims.css          # L2: overlay transparency values
-│   └── semantics.css       # L2 families + L3 aliases (the consumable API)
-├── prose.css               # Opt-in article typography
-├── resets.css              # Minimal CSS reset
-├── fonts.css               # @font-face declarations
-├── components.css          # Component-specific rules (progress bars, etc.)
-├── elevation.examples.html # Shadow demo page
-├── icons.examples.html     # Icon demo page
-└── spacing.examples.html   # Spacing demo page
+├── index.css               # Real barrel: tokens → components → resets (re-exported by ../index.css)
+│
+├── tokens.css              # COMPAT BARREL → colors + typography + foundation + api/sizing
+├── typography.css          # COMPAT BARREL → type/{scale,roles,elements} + api/{text,layout}
+│
+├── foundation/             # non-color, non-type PRIMITIVES (L1), one file per dimension
+│   ├── index.css           #   barrel
+│   ├── space.css           #   --a-space-* · inset · gap   (+ the --a-density knob)
+│   ├── size.css            #   --a-size-* · chrome heights · toggle · icon/caret
+│   ├── radius.css          #   --a-radius-*                (+ the --a-radius-k knob)
+│   ├── motion.css          #   --a-duration-* · --a-easing-*
+│   └── elevation.css       #   --a-shadow-*
+│
+├── type/                   # the TYPE system (content of the typography.css barrel)
+│   ├── scale.css           #   L1/L2: families, weights, leading, tracking
+│   ├── roles.css           #   L3: 13 roles + h1–h6 defaults + [variant]
+│   └── elements.css        #   native element typographic defaults (table, code, h1–h6, links…)
+│
+├── colors/                 # the COLOR system (L1 → L3)
+│   ├── index.css           #   barrel: parameters → primitives → surfaces → scrims → semantics
+│   ├── parameters.css      #   L1: hue definitions, OKLCH ramp parameters
+│   ├── primitives.css      #   L1 barrel → primitives-{shared,neutral,brand,accent,info,success,warning,danger}.css
+│   ├── primitives-*.css    #   L1: per-family OKLCH ramps (8 files)
+│   ├── surfaces.css        #   L2: canvas ramps (--a-canvas-0 … 6)
+│   ├── scrims.css          #   L2: overlay transparency values
+│   ├── semantics.css       #   COMPAT BARREL → semantics/*
+│   └── semantics/
+│       ├── core.css        #   L2+L3 canvas/accent/brand/status aliases (the consumable API)
+│       ├── buckets.css     #   sequential data-vis ramps
+│       ├── features.css    #   focus ring · field · highlight · chrome
+│       ├── data-viz.css    #   --a-data-0..9 categorical palette + tuning knobs
+│       └── aliases.css     #   scrim role aliases + legacy status-compat (loads LAST — order-bearing)
+│
+├── api/                    # the global ATTRIBUTE API (consumer-facing [attr] selectors)
+│   ├── sizing.css          #   [density] [radius] [size] [gap] [padding] [margin]
+│   ├── text.css            #   [text-align] [weight] [color] [transform] [truncate]
+│   └── layout.css          #   [hidden] [nomargin] [grow]
+│
+├── themes.css              # CONTEXT: 8 named themes + light/dark scheme overrides ([data-theme])
+├── prose.css               # CONTEXT: opt-in article typography ([prose])
+├── resets.css              # global RESET (box-sizing, scrollbar, focus, normalize)
+├── fonts.css               # @font-face declarations + font-family primitives
+├── components.css          # per-component @import barrel
+└── design-tokens-export.js # tooling: Figma Variables Pro exporter (reads the live --a-* surface)
 ```
 
 ---
@@ -275,12 +310,12 @@ styles/
 
 | Layer | File(s) | ~Tokens |
 |-------|---------|---------|
-| L1 Primitives | `colors/parameters.css`, `colors/primitives.css` | ~80 |
-| L2 Families | `colors/semantics.css` (family section) | ~60 |
-| L3 Semantic aliases | `colors/semantics.css` (alias section) | ~150 |
-| Typography | `typography.css` | ~80 |
-| Spacing | `tokens.css` | ~25 |
-| Chrome | `tokens.css` | ~10 |
-| Shadows | `tokens.css` | ~4 |
-| Timing | `tokens.css` | ~5 |
+| L1 Primitives | `colors/parameters.css`, `colors/primitives-*.css` | ~80 |
+| L2 Families | `colors/semantics/core.css` (family section) | ~60 |
+| L3 Semantic aliases | `colors/semantics/{core,features,buckets,data-viz}.css` | ~150 |
+| Typography | `type/{scale,roles}.css` | ~80 |
+| Spacing / Size | `foundation/{space,size}.css` | ~25 |
+| Chrome | `foundation/size.css` | ~10 |
+| Shadows | `foundation/elevation.css` | ~4 |
+| Timing | `foundation/motion.css` | ~5 |
 | **Total** | | **~410** |

package/styles/api/layout.css

@@ -0,0 +1,19 @@
+/* adia:attribute-api/layout — global presentational LAYOUT attributes.
+   [hidden] [nomargin] [grow] — NOT typography; relocated out of
+   typography.css where they had drifted (v0.6.48 foundation reorg, ADR-0035). */
+
+/* Visibility */
+[hidden] {
+  display: none !important;
+}
+
+[nomargin] {
+  margin: 0;
+}
+
+/* Flex grow — fills remaining space in a flex parent.
+   Works on any element (col-ui, row-ui, input-ui, etc.) */
+[grow] {
+  flex: 1;
+  min-width: 0;
+}

package/styles/api/sizing.css

@@ -0,0 +1,225 @@
+/* adia:attribute-api/sizing — global spatial attribute API.
+   [density] [radius] [size] [gap] [padding] [margin] — the consumer-facing
+   selectors that turn spatial primitives into behavior. Moved verbatim out
+   of tokens.css (v0.6.48 foundation reorg, ADR-0035); imported by the
+   tokens.css barrel AFTER foundation/ so cascade position is unchanged. */
+
+/* ═══════════════════════════════════════════════════════════════
+   DENSITY PRESETS — scoped via [density] attribute.
+   --a-density controls spacing, padding, gaps, AND component heights.
+   --a-radius-k is coupled for visual consistency.
+
+   Usage:
+     <div density="compact">...tight layout...</div>
+     <div density="spacious">...generous layout...</div>
+   ═══════════════════════════════════════════════════════════════ */
+
+[density="compact"] {
+  --a-density: 0.85;
+  --a-radius-k: 0.75;
+}
+
+[density="spacious"] {
+  --a-density: 1.15;
+  --a-radius-k: 1.25;
+}
+
+/* ── Radius presets — scoped via [radius] attribute ── */
+
+[radius="sharp"] {
+  --a-radius-k: 0;
+  --a-radius-min: 0rem;
+  --a-radius-max: 0rem;
+}
+
+[radius="rounded"] {
+  --a-radius-k: 1.5;
+}
+
+[radius="round"] {
+  --a-radius-k: 2;
+  --a-radius-max: 3rem;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   SIZE PRESETS — universal [size="sm|md|lg"] attribute.
+
+   Sets BOTH component tokens AND container tokens.
+   Each tier shifts the entire typescale to its sm/md/lg variant.
+
+   Component: --a-size, --a-ui-px, --a-ui-size, --a-icon-size
+   Container: --a-inset, --a-gap
+   Typography: all 13 role sizes shift to the tier's variant
+
+   Usage:
+     <button-ui size="sm">            — compact button
+     <card-ui size="lg">...</card-ui>  — spacious card + larger type inside
+     <div size="sm">...</div>        — everything inside scales down
+   ═══════════════════════════════════════════════════════════════ */
+/* ── sm — dense data UIs, sidebars, inspectors ── */
+[size] {
+  font-size: var(--a-body-size);
+}
+[size="sm"] {
+  /* Component */
+  --a-size: calc(var(--a-density) * 1.5rem);
+  --a-toggle-size: calc(var(--a-size-sm) - var(--a-space-2)); /* 16px at d=1 */
+  --a-ui-px: var(--a-space-1-5);
+  --a-ui-size: var(--a-ui-sm);
+  --a-icon-size: 0.875rem;
+  --a-caret-size: 0.75rem;
+  /* Container */
+  --a-inset: var(--a-inset-sm);
+  --a-gap: var(--a-gap-sm);
+  --a-radius: var(--a-radius-sm);
+  /* Typography — all roles shift to -sm */
+  --a-display-size: var(--a-display-sm);
+  --a-title-size: var(--a-title-sm);
+  --a-heading-size: var(--a-heading-sm);
+  --a-section-size: var(--a-section-sm);
+  --a-subsection-size: var(--a-subsection-sm);
+  --a-body-size: var(--a-body-sm);
+  --a-deck-size: var(--a-deck-sm);
+  --a-caption-size: var(--a-caption-sm);
+  --a-kicker-size: var(--a-kicker-sm);
+  --a-label-size: var(--a-label-sm);
+  --a-metric-size: var(--a-metric-sm);
+  --a-code-size: var(--a-code-sm);
+}
+
+/* [size="md"] is the default — no overrides needed */
+
+/* ── lg — pages, hero sections, marketing ── */
+[size="lg"] {
+  /* Component */
+  --a-size: calc(var(--a-density) * 2.25rem);
+  --a-toggle-size: var(--a-size-sm); /* 24px at d=1 */
+  --a-ui-px: var(--a-space-3);
+  --a-ui-size: var(--a-ui-lg);
+  --a-icon-size: 1.25rem;
+  --a-caret-size: 1rem;
+  /* Container */
+  --a-inset: var(--a-inset-lg);
+  --a-gap: var(--a-gap-lg);
+  --a-radius: var(--a-radius-lg);
+  /* Typography — all roles shift to -lg */
+  --a-display-size: var(--a-display-lg);
+  --a-title-size: var(--a-title-lg);
+  --a-heading-size: var(--a-heading-lg);
+  --a-section-size: var(--a-section-lg);
+  --a-subsection-size: var(--a-subsection-lg);
+  --a-body-size: var(--a-body-lg);
+  --a-deck-size: var(--a-deck-lg);
+  --a-caption-size: var(--a-caption-lg);
+  --a-kicker-size: var(--a-kicker-lg);
+  --a-label-size: var(--a-label-lg);
+  --a-metric-size: var(--a-metric-lg);
+  --a-code-size: var(--a-code-lg);
+}
+
+[gap="0"] {
+  --a-gap: 0;
+}
+[gap="1"] {
+  --a-gap: var(--a-space-1);
+}
+[gap="2"] {
+  --a-gap: var(--a-space-2);
+}
+[gap="3"] {
+  --a-gap: var(--a-space-3);
+}
+[gap="4"] {
+  --a-gap: var(--a-space-4);
+}
+[gap="5"] {
+  --a-gap: var(--a-space-5);
+}
+[gap="6"] {
+  --a-gap: var(--a-space-6);
+}
+[gap="7"] {
+  --a-gap: var(--a-space-7);
+}
+[gap="8"] {
+  --a-gap: var(--a-space-8);
+}
+[gap="9"] {
+  --a-gap: var(--a-space-9);
+}
+[gap="10"] {
+  --a-gap: var(--a-space-10);
+}
+[gap="12"] {
+  --a-gap: var(--a-space-12);
+}
+[gap="16"] {
+  --a-gap: var(--a-space-16);
+}
+
+[gap="sm"] {
+  --a-gap: var(--a-space-4);
+}
+[gap="md"] {
+  --a-gap: var(--a-space-6);
+}
+[gap="lg"] {
+  --a-gap: var(--a-space-8);
+}
+
+/* ── Universal [padding] / [margin] — same scale as [gap]. Layout
+   primitives (row-ui, col-ui, grid-ui, stack-ui) opt in by reading
+   var(--a-padding, 0) and var(--a-margin, 0). Components with their
+   own padding/margin contracts (block-ui, card-ui, drawer-ui) keep
+   their scoped declarations and aren't affected.
+
+   Registered as non-inheriting via @property so a parent's
+   [padding="6"] doesn't bleed into nested layout primitives —
+   children see the initial-value (0) unless they declare their own
+   [padding] / [margin]. */
+@property --a-padding {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+@property --a-margin {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+
+[padding="0"]  { --a-padding: 0; }
+[padding="1"]  { --a-padding: var(--a-space-1); }
+[padding="2"]  { --a-padding: var(--a-space-2); }
+[padding="3"]  { --a-padding: var(--a-space-3); }
+[padding="4"]  { --a-padding: var(--a-space-4); }
+[padding="5"]  { --a-padding: var(--a-space-5); }
+[padding="6"]  { --a-padding: var(--a-space-6); }
+[padding="7"]  { --a-padding: var(--a-space-7); }
+[padding="8"]  { --a-padding: var(--a-space-8); }
+[padding="9"]  { --a-padding: var(--a-space-9); }
+[padding="10"] { --a-padding: var(--a-space-10); }
+[padding="12"] { --a-padding: var(--a-space-12); }
+[padding="16"] { --a-padding: var(--a-space-16); }
+
+[padding="sm"] { --a-padding: var(--a-space-4); }
+[padding="md"] { --a-padding: var(--a-space-6); }
+[padding="lg"] { --a-padding: var(--a-space-8); }
+
+[margin="0"]  { --a-margin: 0; }
+[margin="1"]  { --a-margin: var(--a-space-1); }
+[margin="2"]  { --a-margin: var(--a-space-2); }
+[margin="3"]  { --a-margin: var(--a-space-3); }
+[margin="4"]  { --a-margin: var(--a-space-4); }
+[margin="5"]  { --a-margin: var(--a-space-5); }
+[margin="6"]  { --a-margin: var(--a-space-6); }
+[margin="7"]  { --a-margin: var(--a-space-7); }
+[margin="8"]  { --a-margin: var(--a-space-8); }
+[margin="9"]  { --a-margin: var(--a-space-9); }
+[margin="10"] { --a-margin: var(--a-space-10); }
+[margin="12"] { --a-margin: var(--a-space-12); }
+[margin="16"] { --a-margin: var(--a-space-16); }
+
+[margin="sm"] { --a-margin: var(--a-space-4); }
+[margin="md"] { --a-margin: var(--a-space-6); }
+[margin="lg"] { --a-margin: var(--a-space-8); }

package/styles/api/text.css

@@ -0,0 +1,106 @@
+/* adia:attribute-api/text — global presentational TEXT attributes.
+   [text-align] [weight] [color] [transform] [truncate]. Moved verbatim out
+   of typography.css (v0.6.48 foundation reorg, ADR-0035); imported by the
+   typography.css barrel at its original cascade position. */
+
+/* ═══════════════════════════════════════════════════════════
+   GLOBAL PRESENTATIONAL ATTRIBUTES
+   Work on any element. Attribute-driven, not class-based.
+
+   NOTE: These have lower specificity than @scope component CSS.
+   Using [weight="bold"] on a component like <text-ui> will be
+   overridden by the component's own font-weight rule. Use these
+   on plain elements (<span>, <p>, <div>) or choose the right
+   [variant] instead.
+   ═══════════════════════════════════════════════════════════ */
+
+/* Text alignment */
+[text-align="left"] {
+  text-align: left;
+}
+[text-align="center"] {
+  text-align: center;
+}
+[text-align="right"] {
+  text-align: right;
+}
+
+/* Font weight — six steps matching --a-weight-* tokens */
+[weight="thin"] {
+  --a-weight: var(--a-weight-thin);
+  font-weight: var(--a-weight);
+} /* 100 — hairline, display only */
+[weight="light"] {
+  --a-weight: var(--a-weight-light);
+  font-weight: var(--a-weight);
+} /* 300 — light UI emphasis */
+[weight="normal"] {
+  --a-weight: var(--a-weight-normal);
+  font-weight: var(--a-weight);
+} /* 400 */
+[weight="medium"] {
+  --a-weight: var(--a-weight-medium);
+  font-weight: var(--a-weight);
+} /* 500 */
+[weight="semibold"] {
+  --a-weight: var(--a-weight-semibold);
+  font-weight: var(--a-weight);
+} /* 600 */
+[weight="bold"] {
+  --a-weight: var(--a-weight-bold);
+  font-weight: var(--a-weight);
+} /* 700 */
+
+/* Text color */
+[color] {
+  color: var(--a-fg);
+}
+[color="text"] {
+  --a-fg: var(--a-canvas-text);
+}
+[color="text-strong"] {
+  --a-fg: var(--a-fg-strong);
+}
+[color="subtle"] {
+  --a-fg: var(--a-fg-subtle);
+}
+[color="muted"] {
+  --a-fg: var(--a-fg-muted);
+}
+[color="accent"] {
+  --a-fg: var(--a-accent);
+}
+[color="success"] {
+  --a-fg: var(--a-success);
+}
+[color="warning"] {
+  --a-fg: var(--a-warning);
+}
+[color="danger"] {
+  --a-fg: var(--a-danger);
+}
+[color="info"] {
+  --a-fg: var(--a-info);
+}
+
+/* Text transform */
+[transform="uppercase"] {
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+[transform="lowercase"] {
+  text-transform: lowercase;
+}
+[transform="capitalize"] {
+  text-transform: capitalize;
+}
+[transform="none"] {
+  text-transform: none;
+}
+
+/* Truncation */
+[truncate] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/styles/colors/semantics/aliases.css

@@ -0,0 +1,32 @@
+/* adia:semantic/color — scrim role aliases + legacy status compat.
+   --a-scrim-* role names, and the STATUS COMPAT block that overrides
+   --a-danger / --a-success to -strong. Imported LAST by the semantics.css
+   barrel — this ordering is load-bearing: these re-declarations must win
+   over the core.css defaults (v0.6.48 reorg, ADR-0035). */
+
+:root, theme-ui, [data-theme] {
+  /* ══════════════════════════════════════════════════════════════
+     SCRIMS — Role aliases. Map onto the 7-step adaptive scrim-0..6
+     scale in scrims.css. Per-family semantic tiers (weak / default /
+     strong / peak) live in surfaces.css.
+     ══════════════════════════════════════════════════════════════ */
+
+  --a-scrim-weak:    var(--a-neutral-1-shade-scrim);  /* 20% — hover wash */
+  --a-scrim-toast:   var(--a-neutral-2-shade-scrim);  /* 30% — toast veil */
+  --a-scrim-default: var(--a-neutral-3-shade-scrim);  /* 40% — generic overlay */
+  --a-scrim-dialog:  var(--a-neutral-4-shade-scrim);  /* 50% — modal backdrop */
+  --a-scrim-strong:  var(--a-neutral-6-shade-scrim);  /* 70% — heaviest veil */
+
+  /* ══════════════════════════════════════════════════════════════
+     STATUS COMPAT — Legacy status shortcuts used by existing
+     components (button, chart, pipeline-status, timeline). Override
+     the L2 "default" shade to match -strong so the pre-reorg visual
+     behavior is preserved. Components should migrate to the L3
+     matrix (--a-danger-bg, --a-success-fg, etc) over time.
+     ══════════════════════════════════════════════════════════════ */
+
+  --a-danger:     var(--a-danger-strong);
+  --a-danger-fg:  var(--a-danger-text-strong);
+  --a-success:    var(--a-success-strong);
+  --a-success-fg: var(--a-success-text-strong);
+}

package/styles/colors/semantics/buckets.css

@@ -0,0 +1,64 @@
+/* adia:semantic/color — sequential data-vis buckets (5-step per family).
+   Distinct from --a-data-0..9 (categorical): buckets are 5 ordered steps
+   within ONE family for heatmap/choropleth/treemap intensity.
+   Split out of semantics.css (v0.6.48 reorg, ADR-0035). */
+
+:root, theme-ui, [data-theme] {
+  /* ══════════════════════════════════════════════════════════════
+     BUCKETS — sequential 5-step ramp per family for data-vis consumers
+
+     Distinct from `--a-data-0..9` (categorical, distinct hues) — buckets
+     are 5 steps within ONE family, ordered low → high. Used by sequential
+     data-vis surfaces (heatmap-ui, choropleth, treemap intensity).
+
+     Anchor: bucket-2 = `--a-{family}-strong` (semantic step-50). Steps 0
+     and 1 sit lighter (toward muted); steps 3 and 4 sit deeper (toward
+     active). Light/dark scheme polarity is honored via `light-dark()` —
+     in light mode the lighter primitives are step-tints, in dark mode
+     the lighter primitives are step-shades, so "low intensity" reads
+     as low contrast against canvas-0 in either scheme.
+
+     Coordinate with chart palette: `--a-data-N` are categorical (10 hue
+     slots fanning out from accent-hue); buckets stay within one family
+     so a heatmap colored `[color="success"]` doesn't drift through the
+     accent → success → warning hue arc. Five steps were chosen so the
+     ramp fits within WCAG AA against `--a-canvas-0` at the high end and
+     remains visually distinguishable at the low end.
+     ══════════════════════════════════════════════════════════════ */
+
+  /* Accent buckets */
+  --a-accent-bucket-0: light-dark(var(--a-accent-15-tint), var(--a-accent-85-shade));
+  --a-accent-bucket-1: light-dark(var(--a-accent-30-tint), var(--a-accent-70-shade));
+  --a-accent-bucket-2: var(--a-accent-strong);
+  --a-accent-bucket-3: light-dark(var(--a-accent-65-tint), var(--a-accent-35-shade));
+  --a-accent-bucket-4: light-dark(var(--a-accent-80-tint), var(--a-accent-20-shade));
+
+  /* Success buckets */
+  --a-success-bucket-0: light-dark(var(--a-success-15-tint), var(--a-success-85-shade));
+  --a-success-bucket-1: light-dark(var(--a-success-30-tint), var(--a-success-70-shade));
+  --a-success-bucket-2: var(--a-success-strong);
+  --a-success-bucket-3: light-dark(var(--a-success-65-tint), var(--a-success-35-shade));
+  --a-success-bucket-4: light-dark(var(--a-success-80-tint), var(--a-success-20-shade));
+
+  /* Warning buckets */
+  --a-warning-bucket-0: light-dark(var(--a-warning-15-tint), var(--a-warning-85-shade));
+  --a-warning-bucket-1: light-dark(var(--a-warning-30-tint), var(--a-warning-70-shade));
+  --a-warning-bucket-2: var(--a-warning-strong);
+  --a-warning-bucket-3: light-dark(var(--a-warning-65-tint), var(--a-warning-35-shade));
+  --a-warning-bucket-4: light-dark(var(--a-warning-80-tint), var(--a-warning-20-shade));
+
+  /* Danger buckets */
+  --a-danger-bucket-0: light-dark(var(--a-danger-15-tint), var(--a-danger-85-shade));
+  --a-danger-bucket-1: light-dark(var(--a-danger-30-tint), var(--a-danger-70-shade));
+  --a-danger-bucket-2: var(--a-danger-strong);
+  --a-danger-bucket-3: light-dark(var(--a-danger-65-tint), var(--a-danger-35-shade));
+  --a-danger-bucket-4: light-dark(var(--a-danger-80-tint), var(--a-danger-20-shade));
+
+  /* Info buckets */
+  --a-info-bucket-0: light-dark(var(--a-info-15-tint), var(--a-info-85-shade));
+  --a-info-bucket-1: light-dark(var(--a-info-30-tint), var(--a-info-70-shade));
+  --a-info-bucket-2: var(--a-info-strong);
+  --a-info-bucket-3: light-dark(var(--a-info-65-tint), var(--a-info-35-shade));
+  --a-info-bucket-4: light-dark(var(--a-info-80-tint), var(--a-info-20-shade));
+
+}