@adia-ai/web-components 0.7.21 → 0.7.22

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog — @adia-ai/web-components
 
+## [0.7.22] — 2026-06-16
+
+### Changed
+- **Surface tokens aligned onto the symmetric canvas ramp.** The `--a-canvas-*` surface assignments were consolidated onto one symmetric luminance ramp so elevation reads identically in light + dark (the prior mix of the flipping + symmetric ramps inverted in light mode). Chrome overlays — `components/modal`, `components/popover`, `components/drawer` — sit at `--a-canvas-dimmer`; `components/card` (`card-ui`) roots at `--a-canvas-base` with nesting `base → bright → brighter → brightest` (capped). `styles/colors/surfaces.css` gained the named canvas luminance scales (`--a-canvas-{dimmest…brightest}`); `styles/colors/parameters.css` updated; `drawer-ui` pulled on-ramp (was the only off-ramp overlay). `dist/` bundles (`host`, `theme-provider`, `web-components`) regenerated. Re-skins every modal/card/drawer/popover — a visible behavior change with no public-API change (PATCH). (journal 2026-06-15 §6)
+
 ## [0.7.21] — 2026-06-10
 
 ### Maintenance In-repo only: 57 `components/`/`traits/` `*.examples.html` files were de-annotated as part of the corpus curation (demo markers kept for the `?chunks` overlay) — `.examples.html` files are excluded from the published tarball (`files:` negation), so the npm artifact is unchanged.

package/components/card/card.css

@@ -20,7 +20,7 @@
     --card-description-size:  var(--a-caption-size);
 
     /* ── Colors ── */
-    --card-bg:                var(--a-canvas-1);
+    --card-bg:                var(--a-canvas-base);
     --card-bg-padded:         var(--a-canvas-0-scrim);
     --card-fg:                var(--a-fg);
     --card-heading-fg:        var(--a-fg-strong);
@@ -457,13 +457,14 @@
   }
 
   /* ═══════ Nested surface layering ═══════
-     Step background up one canvas level per nesting depth.
+     Step background up the symmetric luminance ramp (base → bright → brighter →
+     brightest) per nesting depth; depths past brightest cap at brightest.
      :scope card-ui has specificity (0,1,1) which beats the
      :where(:scope) initializer (0,0,0) in each inner scope. */
-  :scope card-ui                                     { --card-bg: var(--a-canvas-1); --card-border: 1px solid var(--a-border); --a-radius: var(--a-radius-md); }
-  :scope card-ui card-ui                              { --card-bg: var(--a-canvas-2); --a-radius: var(--a-radius-sm); }
-  :scope card-ui card-ui card-ui                       { --card-bg: var(--a-canvas-3); }
-  :scope card-ui card-ui card-ui card-ui                { --card-bg: var(--a-canvas-4); }
-  :scope card-ui card-ui card-ui card-ui card-ui         { --card-bg: var(--a-canvas-5); }
-  :scope card-ui card-ui card-ui card-ui card-ui card-ui  { --card-bg: var(--a-canvas-6); }
+  :scope card-ui                                     { --card-bg: var(--a-canvas-base); --card-border: 1px solid var(--a-border); --a-radius: var(--a-radius-md); }
+  :scope card-ui card-ui                              { --card-bg: var(--a-canvas-bright); --a-radius: var(--a-radius-sm); }
+  :scope card-ui card-ui card-ui                       { --card-bg: var(--a-canvas-brighter); }
+  :scope card-ui card-ui card-ui card-ui                { --card-bg: var(--a-canvas-brightest); }
+  :scope card-ui card-ui card-ui card-ui card-ui         { --card-bg: var(--a-canvas-brightest); }
+  :scope card-ui card-ui card-ui card-ui card-ui card-ui  { --card-bg: var(--a-canvas-brightest); }
 }

package/components/drawer/drawer.css

@@ -30,7 +30,7 @@
   --drawer-easing:      var(--a-easing-out);
 
   /* ── Colors ── */
-  --drawer-bg:          var(--a-canvas-1);
+  --drawer-bg:          var(--a-canvas-dimmer);
   --drawer-border:      var(--a-border-subtle);
   --drawer-divider:     var(--a-border-subtle);
   --drawer-shadow:      var(--a-shadow-lg);

package/components/modal/modal.css

@@ -11,7 +11,7 @@
   :where(:scope) {
     --modal-width:          32rem;
     --modal-radius:         var(--a-radius-lg);
-    --modal-bg:             var(--a-bg-subtle);
+    --modal-bg:             var(--a-canvas-dimmer);
     --modal-border:         var(--a-border-subtle);
     --modal-shadow:         var(--a-shadow-lg);
     --modal-backdrop:       var(--a-scrim-dialog);

package/components/popover/popover.css

@@ -7,7 +7,7 @@
 
     /* ── Colors (default panel chrome — opt out per `:has(>card-ui)` rule
        below or by setting tokens to transparent / 0) ── */
-    --popover-bg:      var(--a-bg-subtle);
+    --popover-bg:      var(--a-canvas-dimmer);
     --popover-border:  var(--a-border-subtle);
     --popover-shadow:  var(--a-shadow-lg);
   }