use-wc 1.0.0-pre.74 → 1.0.0-pre.75

package/dist/design-system.css

@@ -313,7 +313,7 @@
 
 @layer use-theme.link {
   :is(nav, header, footer, [role="navigation"], [role="menubar"], [role="tablist"], [role="toolbar"]) {
-    --usewc-effect-link-decoration: var(--usewc-effect-link-chrome-text-decoration);
+    --usewc-local-link-decoration-line: var(--usewc-effect-link-chrome-text-decoration);
   }
 
   :is(a:not([class*="appearance-"]), .appearance-a) {
@@ -321,11 +321,23 @@
       all: unset;
     }
 
-    --usewc-color-link-text: var(--usewc-color-link-text-static);
+    /* `--usewc-local-*` names the variables below as rule-scoped plumbing rather than themeable
+       tokens — set here to thread the current state (hover/active, chrome context, sidebar) into
+       the properties further down, as opposed to the real tokens in `semantic.css` they read
+       from. `--usewc-local-link-decoration-color` in particular has to be derived here rather
+       than hoisted into `semantic.css`: relative-color syntax reading a `var()` only resolves
+       once the referenced custom property is defined on the same element/rule, and
+       `--usewc-local-link-text` only ever exists on this one. */
+    --usewc-local-link-text: var(--usewc-color-link-text-static);
+    --usewc-local-link-decoration-opacity: var(--usewc-effect-link-decoration-opacity);
+    --usewc-local-link-decoration-color: oklch(
+      from var(--usewc-local-link-text) l c h / var(--usewc-local-link-decoration-opacity)
+    );
     --usewc-effect-outline-width: 0;
 
-    color: var(--usewc-color-link-text);
-    text-decoration: var(--usewc-effect-link-decoration, var(--usewc-effect-link-text-decoration));
+    color: var(--usewc-local-link-text);
+    text-decoration: var(--usewc-local-link-decoration-line, var(--usewc-effect-link-text-decoration));
+    text-decoration-color: var(--usewc-local-link-decoration-color);
     cursor: pointer;
     outline: var(--usewc-effect-outline-width) var(--usewc-effect-outline-style) var(--usewc-color-outline);
     outline-offset: var(--usewc-effect-outline-offset);
@@ -336,7 +348,7 @@
     }
 
     &:is(:hover, :focus-visible) {
-      --usewc-color-link-text: var(--usewc-color-link-text-hover);
+      --usewc-local-link-text: var(--usewc-color-link-text-hover);
     }
 
     &:focus-visible {
@@ -344,12 +356,15 @@
     }
 
     &:active {
-      --usewc-color-link-text: var(--usewc-color-link-text-active);
+      --usewc-local-link-text: var(--usewc-color-link-text-active);
+      /* Pressed reads as committed rather than merely hinted at, so the underline matches the
+         text exactly here instead of staying a lighter tint of it. */
+      --usewc-local-link-decoration-opacity: 1;
     }
 
     nav.sidebar > & {
       display: block;
-      /* Swapping these source tokens, rather than the resolved `--usewc-color-link-text` slot
+      /* Swapping these source tokens, rather than the resolved `--usewc-local-link-text` slot
          itself, means the existing `:hover`/`:active` rules above keep working unmodified — they
          already read through `-hover`/`-active`, so overriding what those resolve to here is
          enough to recolor every state at once. */
@@ -1401,6 +1416,24 @@
     }
   }
 
+  /* A link inside a cell reads as the cell's own text rather than the document's default link
+     blue — the grid draws attention with its row/selection bands, not link-colored text, so a
+     link that broke from the cell's color would read as an anomaly instead of an affordance.
+     Hover/active still need to move, the same as the default link darkening through
+     blue-600/700/800 — `currentColor` alone can't step down like that, so each state is the
+     cell's own color with its lightness nudged instead. `link.css`'s own decoration-color rule
+     already derives from `--usewc-local-link-text`, so the underline follows every step here for
+     free, staying a lighter tint of whichever shade the text itself is in. */
+  use-gridcell :is(a:not([class*="appearance-"]), .appearance-a) {
+    --usewc-color-link-text-static: currentColor;
+    --usewc-color-link-text-hover: oklch(
+      from currentColor calc(l + var(--usewc-color-grid-cell-link-hover-lightness-shift)) c h
+    );
+    --usewc-color-link-text-active: oklch(
+      from currentColor calc(l + var(--usewc-color-grid-cell-link-active-lightness-shift)) c h
+    );
+  }
+
   use-grid:not(.chips, .list, .appearance-native) {
     display: block;
     overflow: clip;
@@ -2261,6 +2294,17 @@
     min-inline-size: 0;
   }
 
+  /* `--usewc-layout-region-gap`/`-padding` are custom properties, which inherit by default — left
+     alone, a nested `use-layout` would pick up its ancestor's density instead of its own default
+     of "no gap/padding of its own." Resetting them here, at `:where()`'s zero specificity, stops
+     that inheritance at every `use-layout` boundary without affecting a variant class or a
+     `gap`/`padding` attribute below, both of which carry real specificity and still win on the
+     element they target. */
+  :where(use-layout) {
+    --usewc-layout-region-gap: initial;
+    --usewc-layout-region-padding: initial;
+  }
+
   /* ── Variant density ────────────────────────────────────────────────────────────────────────
      A variant class sets its own scale and nothing else; the generic region rules below read
      these properties. Keeping the arrangement in one ruleset rather than four means a future
@@ -2277,6 +2321,14 @@
     --usewc-layout-footer-justify: space-between;
   }
 
+  /* A page's own `h1` — its title, wherever it sits in the topbar — reads at the page's title
+     size and weight rather than the browser's default heading style. Matched at any depth, since
+     a topbar routinely nests it a `<section>` or an `<hgroup>` down. */
+  use-layout.page h1 {
+    font-size: var(--usewc-font-page-title-size);
+    font-weight: var(--usewc-font-page-title-weight);
+  }
+
   use-layout.entry {
     --usewc-layout-region-padding: var(--usewc-layout-entry-padding);
     --usewc-layout-region-gap: var(--usewc-layout-entry-gap);

package/dist/tokens.css

@@ -37,6 +37,7 @@
   --usewc-font-size-18: 1.125rem;
   --usewc-font-size-20: 1.25rem;
   --usewc-font-size-24: 1.5rem;
+  --usewc-font-size-28: 1.75rem;
 
   /** Font weight */
   --usewc-font-weight-light: 300;
@@ -203,6 +204,12 @@
   --usewc-color-link-text-visited-hover: var(--usewc-color-indigo-600);
   --usewc-color-link-text-visited-active: var(--usewc-color-indigo-700);
   --usewc-effect-link-text-decoration: underline;
+  /* The underline is always this much fainter than whatever the link's own text color resolves
+     to, in whichever state — a plain number rather than a full `oklch(from ...)` expression,
+     since relative-color syntax reading a `var()` only resolves reliably when the referenced
+     custom property lives on the same rule; `link.css` does the actual derivation locally,
+     alongside the (also local) `--usewc-local-link-text` it reads from. */
+  --usewc-effect-link-decoration-opacity: 0.5;
   --usewc-effect-link-chrome-text-decoration: none;
   /* - Sidebar nav item */
   /* A sidebar item reads as chrome, not a hyperlink, so its text stays the document's own ink
@@ -578,6 +585,15 @@
   --usewc-color-grid-header-background: transparent;
   --usewc-color-grid-header-text: var(--usewc-color-gray-600);
   --usewc-color-grid-row-background-hover: oklch(from var(--usewc-color-gray-300) l c h / 0.55);
+  /* A link inside a cell inherits its resting color from the cell (`currentColor`), so hover/active
+     can't reach for a fixed color the way the default link does — they shift that same color's own
+     lightness instead. Light mode's cell text is usually dark, so darkening it further (moving
+     toward black) reads as pressed, the same direction the default link's blue-600/700/800
+     progression darkens on hover/active; the dark-mode block below flips both to lighten instead,
+     since a light-on-dark cell darkening toward the page background would lose contrast rather
+     than gain it — the same reason `button.css`'s own hover/active derivation carries a shift. */
+  --usewc-color-grid-cell-link-hover-lightness-shift: -0.08;
+  --usewc-color-grid-cell-link-active-lightness-shift: -0.16;
   /* A super-light tint of the primary — its hue and a whisper of its chroma, floated up to
      near-white — so it tracks the primary even if that's overridden. */
   --usewc-color-grid-row-background-selected: oklch(from var(--usewc-color-brand-primary) 0.96 0.03 h);
@@ -756,6 +772,8 @@
   --usewc-layout-page-padding: var(--usewc-space-20);
   --usewc-layout-page-gap: var(--usewc-space-12);
   --usewc-layout-page-avatar-size: var(--usewc-layout-region-title-block-size);
+  --usewc-font-page-title-size: var(--usewc-font-size-28);
+  --usewc-font-page-title-weight: var(--usewc-font-weight-medium);
 
   --usewc-layout-card-padding: var(--usewc-space-16);
   --usewc-layout-card-gap: var(--usewc-space-10);
@@ -898,6 +916,11 @@
     --usewc-color-grid-header-text: var(--usewc-color-gray-200);
     --usewc-color-avatar-background: var(--usewc-color-gray-800);
     --usewc-color-avatar-text: var(--usewc-color-gray-200);
+    /* A cell's own text is usually light against a dark page, so hover/active need to lighten it
+       further instead of darkening it toward the background — the opposite direction from light
+       mode, same as the sign flip below. */
+    --usewc-color-grid-cell-link-hover-lightness-shift: 0.08;
+    --usewc-color-grid-cell-link-active-lightness-shift: 0.16;
   }
 }
 

package/dist/use-wc.mjs

@@ -5223,13 +5223,7 @@ let UseGridCell = class UseGridCell extends UseWidget {
 		this.#action = null;
 		this.#actionsInitialized = false;
 		this.#handleFocusIn = () => {
-			if (!this.#actionsInitialized) {
-				focusable(this).forEach((el) => {
-					el.tabIndex = -1;
-					if (!this.#action) this.#action = el;
-				});
-				this.#actionsInitialized = true;
-			}
+			this.#initializeAction();
 			if (this.#action) {
 				this.#action.focus();
 				this.tabIndex = -1;
@@ -5246,10 +5240,19 @@ let UseGridCell = class UseGridCell extends UseWidget {
 		if (!this.hasAttribute("role")) this.setAttribute("role", this.closest("use-gridhead") ? "columnheader" : "gridcell");
 		this.tabIndex = -1;
 		if (this.mode === "action") {
+			queueMicrotask(() => this.#initializeAction());
 			this.addEventListener("focusin", this.#handleFocusIn);
 			this.addEventListener("focusout", this.#handleFocusOut);
 		}
 	}
+	#initializeAction() {
+		if (this.#actionsInitialized) return;
+		focusable(this).forEach((el) => {
+			el.tabIndex = -1;
+			if (!this.#action) this.#action = el;
+		});
+		this.#actionsInitialized = true;
+	}
 	#handleFocusIn;
 	#handleFocusOut;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-wc",
-  "version": "1.0.0-pre.74",
+  "version": "1.0.0-pre.75",
   "private": false,
   "homepage": "https://usewc.com",
   "bugs": "https://github.com/dang-rabbits/use-wc/issues",