@brignano/design 0.3.0 → 0.3.1

package/DECISIONS.md

@@ -299,7 +299,12 @@ other theme.
   needs a colour resolves it through `getComputedStyle` on an element
   (DESIGN.md §11). ADR-0002's advice that `chart-colors.ts` read the custom
   properties still stands, but by that route.
-- Consumers shouldn't wrap tokens in `color-mix()`; washes are tokens.
+- Consumers shouldn't wrap tokens in `color-mix()`; washes are tokens. The
+  first consumer that needed one (`life`'s sticky bars) got `--surface-sticky`
+  in 0.3.1 rather than a local mix.
+- A build that lowers `light-dark()` for older browsers (Lightning CSS, inside
+  Next.js and Vite) fixes the theme at `:root`, losing scoped theming. Found in
+  `brignano.io`; consumers set `browserslist` to the floor (DESIGN.md §11).
 - Not a token rename and not a visual change, so a patch release.
 
 

package/DESIGN.md

@@ -135,6 +135,10 @@ for cards, `--radius-lg` for hero surfaces.
 a shadow (`--shadow-1/2/3`). Dark mode does not use borders — surfaces get
 *lighter* with elevation. This is why `--line` can stay nearly invisible in dark.
 
+**Sticky chrome** — a header or toolbar that content scrolls under — is
+`--surface-sticky` with `backdrop-filter: blur(8px)`: 92% of the card in light,
+of the page ground in dark, so it reads as the surface it sits on, not a new layer.
+
 ## 7. Motion
 
 **Content is visible by default. Motion is progressive enhancement layered on top
@@ -241,11 +245,30 @@ Two consequences for code that touches tokens directly:
   Re-read it when the theme changes.
 - **Don't wrap a token in `color-mix()` or `light-dark()`.** Nesting is valid CSS,
   but not every engine has been verified to resolve it. If you need a wash, it's
-  a token (`--*-surface`, `--*-line`); if it isn't, add it here.
+  a token (`--*-surface`, `--*-line`, `--surface-sticky`); if it isn't, add it here.
 
 Needs Chrome/Edge 123, Firefox 120, Safari 17.5 or later (all shipped by May 2024).
 An older browser drops every colour token and renders unstyled rather than wrong.
 
+### Build tools that lower `light-dark()`
+
+A CSS pipeline that targets browsers older than that floor rewrites
+`light-dark()` into a fallback. Lightning CSS (inside Next.js, Vite, Parcel)
+turns each token into `var(--lightningcss-light, …) var(--lightningcss-dark, …)`
+and flips those two variables wherever `color-scheme` changes. The tokens
+resolve on `:root`, so the side is fixed there. Page-wide theming still works,
+but **`data-theme` on an inner element stops re-theming that section.**
+
+The fix is to target the same floor the tokens need, which leaves `light-dark()`
+alone. In the consumer's `package.json`:
+
+```json
+"browserslist": ["chrome >= 123", "edge >= 123", "firefox >= 120", "safari >= 17.5"]
+```
+
+Verified with Lightning CSS: older targets lower the tokens; these targets
+pass `light-dark(#076bd3, #6ba5f3)` through untouched.
+
 ### Tailwind
 
 Tailwind's dark variant keys off a `.dark` class; these tokens key off

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brignano/design",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Shared design system for brignano surfaces — colour, type, space, shape, motion.",
   "license": "MIT",
   "repository": {

package/tailwind.css

@@ -23,6 +23,7 @@
   --color-line-control: var(--line-control);
   --color-surface-hover: var(--surface-hover);
   --color-surface-active: var(--surface-active);
+  --color-surface-sticky: var(--surface-sticky);
   --color-on-dark: var(--on-dark);
 
   --color-interactive: var(--i);

package/tokens.css

@@ -119,6 +119,11 @@
   --card: light-dark(#ffffff, #17171a); /* n-0 / n-50 */
   --surface-hover: var(--n-100);
   --surface-active: var(--n-200);
+  /* Sticky chrome — a header or toolbar that content scrolls under, usually
+     with `backdrop-filter: blur()`. 92% of the surface it sits on: the card
+     in light, the page ground in dark, where cards are lighter than the
+     page. A token so consumers never color-mix() one (DESIGN.md §11). */
+  --surface-sticky: light-dark(color-mix(in srgb, #ffffff 92%, transparent), color-mix(in srgb, #0d0d0f 92%, transparent)); /* card / bg */
   --ink: var(--n-900);
   --ink-soft: var(--n-700);
   --slate: light-dark(#6b6b73, #8b8b93); /* n-600 / n-500 — text-safe: eyebrows, axis labels, captions */