ui-style-kit-css 2.7.0 → 2.7.1

package/docs/DEMO-SHOWCASE.md

@@ -4,6 +4,22 @@ The default `index.html` and `demo/index.html` present one shared library showca
 semantic components, overview, color tokens, prefixed components, native HTML,
 the Interactive Surface bridge, and usage examples.
 
+## Interaction contrast
+
+Hover, press, and keyboard focus must preserve readable labels. A filled action
+keeps its paired foreground and background; an inline-link rule must not recolor
+a button or navigation component. Gloss and grain remain decorative rather than
+replacing the label's underlying paint.
+
+The release regressions check 20 presets, 25 named palettes plus native palettes,
+three modes, and five interaction states, including hover on pressed buttons.
+They cover prefixed, semantic, and mixed React class models, anchor buttons,
+native controls, disclosures, navigation, and table labels. The
+contrast probe samples the central label lane and accounts for translucent paint
+and full-face pseudo-elements; positioned dropdown arrows are outside that lane.
+
+Recheck the rendered demo after changing palette values in the workbench.
+
 ## Preview state and palette editing
 
 Use `?ui=tactile&theme=None&mode=dark` to preview a native palette. The `personality`

package/docs/ECOSYSTEM.md

@@ -14,11 +14,11 @@ Before a UI branch or pull request is expected to validate, verify the reviewed
 
 | Library | Current aligned version | Owns |
 |---|---:|---|
-| `ui-style-kit-css@2.7.0` | current release candidate | visual identity, color themes, UI paint, native HTML styling, content wrapping, and bridge tokens |
+| `ui-style-kit-css@2.7.1` | current UI version | visual identity, color themes, UI paint, native HTML styling, content wrapping, and bridge tokens |
 | `interactive-surface-css@1.7.3` | compatible state release | interaction-state primitives, surface behavior, state layers, and input affordances |
 | `layout-style-css@3.2.3` | compatible structural release | structural wrappers, grids, sections, app shells, and layout recipes |
 
-The current combination is `ui-style-kit-css@2.7.0`, `interactive-surface-css@1.7.3`, and `layout-style-css@3.2.3`. UI Style Kit `2.7.0` is the current release candidate; `2.6.1` remains published on npm. The companion versions are reviewed releases. Layout Style `3.2.3` is the compatible structural release. The validated minimum remains `ui-style-kit-css@2.1.0`, `interactive-surface-css@1.5.0`, and `layout-style-css@3.0.0`.
+The current combination is `ui-style-kit-css@2.7.1`, `interactive-surface-css@1.7.3`, and `layout-style-css@3.2.3`. UI Style Kit `2.7.1` is the current UI version. The companion versions are reviewed releases. Layout Style `3.2.3` is the compatible structural release. The validated minimum remains `ui-style-kit-css@2.1.0`, `interactive-surface-css@1.5.0`, and `layout-style-css@3.0.0`.
 
 ## Layout-to-visual pairing matrix
 

package/docs/PUBLISHING.md

@@ -1,10 +1,10 @@
 # Publishing Guide
 
-## 2.7.0 release workflow
+## 2.7.1 release workflow
 
-The current checkout is a release candidate. [Release preparation notes](RELEASE-2.7.0.md)
+This guide prepares version `2.7.1`. [Release preparation notes](RELEASE-2.7.1.md)
 record the current local scope and gates; existing visual-QA documents are historical
-evidence, not proof that subsequent edits passed browser validation. The 2.7.0
+evidence, not proof that subsequent edits passed browser validation. The 2.7.1
 changelog entry must carry the approved publication date before tagging.
 
 Update the tracked `wiki/` sources with the README and docs. Publishing those pages
@@ -13,9 +13,9 @@ documentation generator is configured in this package; reusable JavaScript helpe
 use JSDoc-compatible comments, and the checked-in build owns generated CSS, manifests,
 icons, README size measurements, and demo asset hashes.
 
-Prepare `ui-style-kit-css@2.7.0` on its release branch, open a pull request against `main`, and merge only after the fast automated gate is green and any requested manual demo review is complete. The aligned companion releases are `layout-style-css@3.2.3` and `interactive-surface-css@1.7.3`.
+Prepare `ui-style-kit-css@2.7.1` on its release branch, open a pull request against `main`, and merge only after the fast automated gate is green and any requested manual demo review is complete. The aligned companion releases are `layout-style-css@3.2.3` and `interactive-surface-css@1.7.3`.
 
-Do not push `v2.7.0` before the reviewed release commit is on `main`. A pushed version tag runs Release Version Alignment, which validates the tag/package/changelog contract and creates the GitHub Release; publishing that release triggers the protected npm workflow.
+Do not push `v2.7.1` before the reviewed release commit is on `main`. A pushed version tag runs Release Version Alignment, which validates the tag/package/changelog contract and creates the GitHub Release; publishing that release triggers the protected npm workflow.
 
 Release Version Alignment owns the fast automated release gate: lint, build, unit checks, the tagged Chromium release-smoke Playwright suite, and packed ecosystem preflight with `--skip-clean-install`. The visual-baseline suite, full UI matrix, and clean-install ecosystem matrix are manual escalation tools, not default push or publish blockers. The protected npm workflow intentionally does not rerun browser gates; it revalidates the immutable tag, package contracts, browser-free compatibility checks, companion commit reachability, the explicit release preflight with `--skip-clean-install`, npm token presence, npm owner authorization, and registry state before publishing.
 
@@ -76,7 +76,7 @@ npm run check:ecosystem:packs -- --layout-repo ../Layout-Style-CSS --interactive
 npm publish
 ```
 
-`prepublishOnly` runs `npm run release:verify`, so a direct `npm publish` still has the default fast release gate. For GitHub releases, push or dispatch the matching package tag, such as `v2.7.0`, only after the release PR is merged. The release workflows verify that `package.json`, `package-lock.json`, `CHANGELOG.md`, generated dist banners, and ecosystem pins are aligned before publishing. Dispatch the protected npm workflow from the current `main` workflow file when recovering publication for a release that has already passed Release Version Alignment.
+`prepublishOnly` runs `npm run release:verify`, so a direct `npm publish` still has the default fast release gate. For GitHub releases, push or dispatch the matching package tag, such as `v2.7.1`, only after the release PR is merged. The release workflows verify that `package.json`, `package-lock.json`, `CHANGELOG.md`, generated dist banners, and ecosystem pins are aligned before publishing. Dispatch the protected npm workflow from the current `main` workflow file when recovering publication for a release that has already passed Release Version Alignment.
 
 The repository `NPM_TOKEN` secret must authenticate to npm as a user that appears in `npm owner ls ui-style-kit-css`. If the token belongs to another npm account or lacks package publish rights, npm may report a misleading registry `E404` at publish time.
 
@@ -88,4 +88,4 @@ npm run release:minor
 npm run release:major
 ```
 
-Use patch for compatible fixes, minor for new themes, presets, component capabilities, or browser-support contracts, and major for incompatible public API changes. Version `2.7.0` is a minor candidate because it adds shared component presentation and spacing controls while retaining the existing preset and semantic component APIs. Future feature versioning continues to follow this policy.
+Use patch for compatible fixes, minor for new themes, presets, component capabilities, or browser-support contracts, and major for incompatible public API changes. Version `2.7.1` is a patch release because it repairs interaction paint and contrast while retaining the preset and semantic component APIs. Future feature versioning continues to follow this policy.

package/docs/RELEASE-2.7.1.md

@@ -0,0 +1,21 @@
+# v2.7.1 interaction contrast patch
+
+This compatible patch preserves the 20 presets, 25 named color themes, native palettes, three modes, and existing public entrypoints.
+
+## Corrections
+
+- Neutral hover rules no longer replace filled action backgrounds while retaining their foregrounds.
+- Outlined CTAs retain readable surface ink at rest and their paired primary fill on hover. Neutral defaults exclude these paint-owning modifiers; Clay icon buttons use the control surface beneath their labels.
+- Inline-link presentation excludes prefixed and semantic action classes. The build generates semantic aliases only for selectors that positively select a promoted component; exclusions alone cannot introduce a competing component rule. Variant exclusions also cover mixed prefixed/semantic markup used by React consumers.
+- Primary, danger, warning, and current-navigation labels retain a matched foreground and background. Decorative reflections stay outside the central label lane.
+- Neumorphism table values use readable surface ink, and Bento success and warning badge labels remain readable on translucent tints.
+- Neo Noir warning paint belongs to its skewed face, preserving the component geometry.
+- Y2K cut modifiers preserve primary action paint, and the compact trust seal contains its full number and caption.
+
+## Verification boundary
+
+Focused Chromium regressions cover all presets, native plus named palettes, all modes, and rest, hover, active, keyboard-focus, and pressed-hover states. Fixtures include prefixed buttons, both semantic namespaces, mixed React class models, anchor actions, marketing CTAs, icon actions, native fields, disclosures, navigation, and tables. The React paint check asserts the real theme IDs visited, preventing a repeated native palette from masquerading as named-theme coverage.
+
+Manual demo interaction uses the connected local Opera browser because Gnomie Browser Commander's runtime is unavailable in this session. Local evidence, protected GitHub release checks, npm publication, and live demo verification remain separate gates. No jsdoc2md generator is configured in this CSS package; JSDoc-compatible comments and the repository build maintain the generated artifacts.
+
+Publication follows [PUBLISHING.md](PUBLISHING.md). The aligned companions remain Interactive Surface CSS 1.7.3 and Layout Style CSS 3.2.3.

package/manifest.json

@@ -5,7 +5,7 @@
     "breakingChange": "increment-schemaVersion-before-removing-or-renaming-fields"
   },
   "name": "ui-style-kit-css",
-  "version": "2.7.0",
+  "version": "2.7.1",
   "cascadeLayers": [
     "ui-style-kit.theme_colors",
     "ui-style-kit.native_elements",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-style-kit-css",
-  "version": "2.7.0",
+  "version": "2.7.1",
   "description": "CSS theme and UI style preset library for accessible websites, dashboards, admin interfaces, and client-facing pages.",
   "style": "dist/ui-style-kit.css",
   "main": "dist/ui-style-kit.css",

package/styles/art-deco.css

@@ -438,7 +438,8 @@
 .deco-card, .deco-panel { background: var(--deco-card-bg); }
 .deco-toolbar, .deco-table-wrap { background: var(--deco-control-bg); }
 /** Attribute-selected variants bypass the legacy neutral-only paint fallback. */
-.deco-button:where(:not([data-ui-variant])):not(.deco-button-primary):not(.deco-button-secondary):not(.deco-button-danger):not(.deco-button-warning):not(.deco-button-ghost), .deco-icon-button { background: var(--deco-control-bg); }
+/** Neutral defaults exclude outlined actions so their hover fill and ink remain paired. */
+.deco-button:where(:not([data-ui-variant])):not(.deco-button-primary):not(.deco-button-secondary):not(.deco-button-danger):not(.deco-button-warning):not(.deco-button-ghost):not(.deco-button-outline-heavy), .deco-icon-button { background: var(--deco-control-bg); }
 .deco-button, .deco-icon-button, .deco-badge, .deco-nav-link { font-family: var(--deco-font-control); }
 
 
@@ -630,7 +631,7 @@
 .deco-button.deco-button-outline-heavy,
 .deco-button-outline-heavy {
   background: transparent;
-  color: var(--usk-primary-ink, var(--deco-primary));
+  color: var(--usk-primary-ink, var(--deco-text));
   border-style: solid;
   border-width: 2px;
   border-color: var(--deco-primary);
@@ -1058,6 +1059,12 @@
   }
 }
 
+/** Named palettes preserve their tested primary paint pair instead of tempering only the fill. */
+[data-ui="art-deco"][data-theme][data-mode] :is(.deco-button-primary, .deco-nav-link[aria-current="page"], .deco-nav-link.is-active) {
+  background-color: var(--deco-primary);
+  color: var(--deco-on-primary);
+}
+
 /**
  * Lets explicit runtime token edits render exact user-supplied action colors
  * while untouched shared themes keep the tempered Art Deco jewel paint.
@@ -1524,7 +1531,9 @@
   text-indent: 0;
 }
 
-.deco-button:where(:not([data-ui-variant])):not(.deco-button-primary):not(.deco-button-secondary):not(.deco-button-danger):not(.deco-button-warning):not(.deco-button-ghost),
+/** Neutral defaults exclude outlined actions so their hover fill and ink remain paired. */
+
+.deco-button:where(:not([data-ui-variant])):not(.deco-button-primary):not(.deco-button-secondary):not(.deco-button-danger):not(.deco-button-warning):not(.deco-button-ghost):not(.deco-button-outline-heavy),
 .deco-icon-button {
   background-color: var(--deco-surface-strong);
   background-image: none;

package/styles/bauhaus.css

@@ -464,7 +464,8 @@
 .bau-card, .bau-panel { background: var(--bau-card-bg); }
 .bau-toolbar, .bau-table-wrap { background: var(--bau-control-bg); }
 /** Attribute-selected variants bypass the legacy neutral-only paint fallback. */
-.bau-button:where(:not([data-ui-variant])):not(.bau-button-primary):not(.bau-button-secondary):not(.bau-button-danger):not(.bau-button-warning):not(.bau-button-ghost):not(.is-primary):not(.is-secondary):not(.is-danger):not(.is-ghost):not(.is-busy):not(.is-hover), .bau-icon-button { background: var(--bau-control-bg); }
+/** Neutral defaults exclude outlined actions so their hover fill and ink remain paired. */
+.bau-button:where(:not([data-ui-variant])):not(.bau-button-primary):not(.bau-button-secondary):not(.bau-button-danger):not(.bau-button-warning):not(.bau-button-ghost):not(.bau-button-outline-heavy):not(.is-primary):not(.is-secondary):not(.is-danger):not(.is-ghost):not(.is-busy):not(.is-hover), .bau-icon-button { background: var(--bau-control-bg); }
 .bau-button, .bau-icon-button, .bau-badge, .bau-nav-link { font-family: var(--bau-font-control); }
 
 
@@ -662,7 +663,7 @@
 .bau-button.bau-button-outline-heavy,
 .bau-button-outline-heavy {
   background: transparent;
-  color: var(--usk-primary-ink, var(--bau-primary));
+  color: var(--usk-primary-ink, var(--bau-text));
   border-style: solid;
   border-width: 2px;
   border-color: var(--bau-primary);
@@ -950,7 +951,8 @@
 .bau-button-primary { background: var(--bau-primary); color: var(--bau-on-primary); border-color: var(--bau-primary); }
 .bau-button-secondary { background: var(--bau-secondary); color: var(--bau-on-secondary); border-color: var(--bau-secondary); }
 .bau-button-danger { background: var(--bau-danger); color: var(--bau-on-danger); border-color: var(--bau-danger); }
-.bau-button-ghost { background: transparent; color: var(--usk-primary-ink, var(--bau-primary)); border-color: transparent; }
+/** Native palettes need surface ink when the primary fill is too dark for an unfilled action. */
+.bau-button-ghost { background: transparent; color: var(--usk-primary-ink, var(--bau-text)); border-color: transparent; }
 }
 
 @layer ui-style-kit.bauhaus {

package/styles/bento.css

@@ -454,7 +454,8 @@
 /* Theme-responsive component defaults */
 .bento-card, .bento-panel { background: var(--bento-card-bg); }
 .bento-toolbar, .bento-table-wrap { background: var(--bento-control-bg); }
-.bento-button:where(:not(.bento-button-primary):not(.bento-button-secondary):not(.bento-button-danger):not(.bento-button-warning):not(.bento-button-ghost):not(.is-primary):not(.is-secondary):not(.is-danger):not(.is-ghost):not(.is-hover):not(.is-busy)), .bento-icon-button { background: var(--bento-control-bg); }
+/** Neutral defaults exclude outlined actions so their hover fill and ink remain paired. */
+.bento-button:where(:not(.bento-button-primary):not(.bento-button-secondary):not(.bento-button-danger):not(.bento-button-warning):not(.bento-button-ghost):not(.bento-button-outline-heavy):not(.is-primary):not(.is-secondary):not(.is-danger):not(.is-ghost):not(.is-hover):not(.is-busy)), .bento-icon-button { background: var(--bento-control-bg); }
 .bento-button, .bento-icon-button, .bento-badge, .bento-nav-link { font-family: var(--bento-font-control); }
 
 
@@ -500,8 +501,9 @@
 .bento-badge { display: inline-flex; align-items: center; gap: var(--bento-space-1); min-height: 1.75rem; padding: .38rem .72rem; background: var(--bento-tile-secondary-bg); color: var(--bento-text); border: 1px solid var(--bento-tile-edge); border-radius: var(--bento-radius-sm); box-shadow: inset 0 1px 0 rgb(var(--bento-surface-strong-rgb) / .62); font-size: .8125rem; font-weight: 800; line-height: 1; }
 .bento-badge-primary { background: var(--bento-primary); color: var(--bento-on-primary); border-color: var(--bento-primary); }
 .bento-badge-secondary { background: rgb(var(--bento-primary-rgb) / .10); color: var(--usk-primary-ink, var(--bento-primary)); border-color: transparent; }
-.bento-badge-success { background: rgb(var(--bento-success-rgb) / .14); color: var(--bento-success); border-color: transparent; }
-.bento-badge-warning { background: rgb(var(--bento-warning-rgb) / .14); color: var(--bento-warning); border-color: transparent; }
+/** Warning and success tints use surface text rather than their solid signal fill as ink. */
+.bento-badge-success { background: rgb(var(--bento-success-rgb) / .14); color: var(--bento-text); border-color: transparent; }
+.bento-badge-warning { background: rgb(var(--bento-warning-rgb) / .14); color: var(--bento-text); border-color: transparent; }
 .bento-badge-danger { background: rgb(var(--bento-danger-rgb) / .14); color: var(--bento-danger); border-color: transparent; }
 
 .bento-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bento-space-2); padding: var(--bento-space-2); background: var(--bento-card-bg); border: 1px solid var(--bento-tile-edge); border-radius: var(--bento-tile-radius); box-shadow: var(--bento-tile-shadow); }
@@ -674,7 +676,7 @@
 .bento-button.bento-button-outline-heavy,
 .bento-button-outline-heavy {
   background: transparent;
-  color: var(--usk-primary-ink, var(--bento-primary));
+  color: var(--usk-primary-ink, var(--bento-text));
   border-style: solid;
   border-width: 2px;
   border-color: var(--bento-primary);
@@ -817,7 +819,7 @@
 }
 .bento-button.bento-button-outline-heavy, .bento-button-outline-heavy {
   background: rgb(var(--bento-surface-strong-rgb) / var(--bento-panel-alpha));
-  color: var(--usk-primary-ink, var(--bento-primary));
+  color: var(--usk-primary-ink, var(--bento-text));
   border-width: 1px;
   border-color: rgb(var(--bento-primary-rgb) / .32);
   border-radius: var(--bento-control-radius);
@@ -1210,7 +1212,6 @@
 
 [data-ui=bento][data-mode] :is(.bento-button, .bento-icon-button) {
   align-items: center;
-  background: var(--bento-mosaic-panel-soft);
   border: 1px solid var(--bento-mosaic-line);
   border-radius: 8px;
   display: inline-flex;
@@ -1221,6 +1222,8 @@
   padding: 0 16px;
   transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
 }
+/** Mosaic neutral paint yields to the outlined CTA's paired hover fill. */
+[data-ui=bento][data-mode] :is(.bento-button, .bento-icon-button):where(:not(.bento-button-outline-heavy)) { background: var(--bento-mosaic-panel-soft); }
 [data-ui=bento][data-mode] .bento-button:hover:not(:disabled) { transform: translateY(-1px); }
 [data-ui=bento][data-mode] .bento-button:active:not(:disabled) { transform: translateY(1px); }
 [data-ui=bento][data-mode] .bento-button.is-primary,
@@ -1595,7 +1598,8 @@
 [data-ui=bento][data-mode] .bento-card, [data-ui=bento][data-mode] .bento-panel { padding: 16px; }
 [data-ui=bento][data-mode] .bento-button, [data-ui=bento][data-mode] .bento-icon-button { border-radius: 8px; box-shadow: none; font-weight: 750; text-shadow: none; }
 /** Attribute-selected variants bypass the legacy neutral-only paint fallback. */
-[data-ui=bento][data-mode] .bento-button:where(:not([data-ui-variant])):not(.bento-button-primary):not(.bento-button-secondary):not(.bento-button-danger):not(.bento-button-warning):not(.bento-button-ghost):not(.is-primary):not(.is-secondary):not(.is-danger):not(.is-ghost):not(.is-busy):not(.is-hover) { background: var(--bento-surface-soft); }
+/** Neutral defaults exclude outlined actions so their hover fill and ink remain paired. */
+[data-ui=bento][data-mode] .bento-button:where(:not([data-ui-variant])):not(.bento-button-primary):not(.bento-button-secondary):not(.bento-button-danger):not(.bento-button-warning):not(.bento-button-ghost):not(.bento-button-outline-heavy):not(.is-primary):not(.is-secondary):not(.is-danger):not(.is-ghost):not(.is-busy):not(.is-hover) { background: var(--bento-surface-soft); }
 [data-ui=bento][data-mode] .bento-button.bento-button-primary, [data-ui=bento][data-mode] .bento-button.is-primary, [data-ui=bento][data-mode] .bento-button.is-busy { background: var(--bento-primary); color: var(--bento-on-primary); border-color: var(--bento-primary); }
 [data-ui=bento][data-mode] .bento-button.bento-button-secondary, [data-ui=bento][data-mode] .bento-button.is-secondary { background: transparent; color: var(--bento-link); border-color: var(--bento-primary); }
 [data-ui=bento][data-mode] .bento-button.bento-button-danger, [data-ui=bento][data-mode] .bento-button.is-danger { background: var(--bento-mosaic-danger-soft); color: var(--bento-text); border-color: var(--bento-danger); }

package/styles/brutalism.css

@@ -432,7 +432,8 @@
 
 [data-ui="brutalism"][data-mode] { background: var(--brutal-theme-bg); background-size: var(--brutal-theme-bg-size); }
 
-[data-ui="brutalism"] a { color: var(--brutal-link); text-decoration-thickness: 0.14em; text-underline-offset: 0.16em; font-weight: 800; }
+/** Inline-link ink must not override the foreground paired with an action surface. */
+[data-ui="brutalism"] a:where(:not(.brutal-button):not(.brutal-icon-button)) { color: var(--brutal-link); text-decoration-thickness: 0.14em; text-underline-offset: 0.16em; font-weight: 800; }
 [data-ui="brutalism"] ::selection { background: var(--brutal-primary); color: var(--brutal-on-primary); }
 
 /* Spinner geometry follows the brutalism preset's blunt mechanical edges. */
@@ -525,7 +526,8 @@
 .brutal-card, .brutal-panel { background: var(--brutal-card-bg); }
 .brutal-toolbar, .brutal-table-wrap { background: var(--brutal-control-bg); }
 /** Attribute-selected variants bypass the legacy neutral-only paint fallback. */
-.brutal-button:where(:not([data-ui-variant])):not(.brutal-button-primary):not(.brutal-button-secondary):not(.brutal-button-danger):not(.brutal-button-warning):not(.brutal-button-ghost), .brutal-icon-button { background: var(--brutal-control-bg); }
+/** Neutral defaults exclude outlined actions so their hover fill and ink remain paired. */
+.brutal-button:where(:not([data-ui-variant])):not(.brutal-button-primary):not(.brutal-button-secondary):not(.brutal-button-danger):not(.brutal-button-warning):not(.brutal-button-ghost):not(.brutal-button-outline-heavy), .brutal-icon-button { background: var(--brutal-control-bg); }
 .brutal-button, .brutal-icon-button, .brutal-badge, .brutal-nav-link { font-family: var(--brutal-font-control); }
 
 
@@ -639,7 +641,7 @@
 .brutal-button.brutal-button-outline-heavy,
 .brutal-button-outline-heavy {
   background: transparent;
-  color: var(--usk-primary-ink, var(--brutal-primary));
+  color: var(--usk-primary-ink, var(--brutal-text));
   border-style: solid;
   border-width: 2px;
   border-color: var(--brutal-primary);

package/styles/clay.css

@@ -446,7 +446,8 @@
 .clay-card, .clay-panel { background: var(--clay-card-bg); }
 .clay-toolbar, .clay-table-wrap { background: var(--clay-control-bg); }
 /** Attribute-selected variants bypass the legacy neutral-only paint fallback. */
-.clay-button:where(:not([data-ui-variant])):not(.clay-button-primary):not(.clay-button-secondary):not(.clay-button-danger):not(.clay-button-warning):not(.clay-button-ghost), .clay-icon-button { background: var(--clay-control-bg); }
+/** Neutral defaults exclude outlined actions so their hover fill and ink remain paired. */
+.clay-button:where(:not([data-ui-variant])):not(.clay-button-primary):not(.clay-button-secondary):not(.clay-button-danger):not(.clay-button-warning):not(.clay-button-ghost):not(.clay-button-outline-heavy), .clay-icon-button { background: var(--clay-control-bg); }
 .clay-button, .clay-icon-button, .clay-badge, .clay-nav-link { font-family: var(--clay-font-control); }
 
 
@@ -638,7 +639,7 @@
 .clay-button.clay-button-outline-heavy,
 .clay-button-outline-heavy {
   background: transparent;
-  color: var(--usk-primary-ink, var(--clay-primary));
+  color: var(--usk-primary-ink, var(--clay-text));
   border-style: solid;
   border-width: 2px;
   border-color: var(--clay-primary);
@@ -895,7 +896,8 @@
   --clay-molded-track: var(--clay-grain-image), linear-gradient(180deg, var(--clay-material-contact), transparent 46%), var(--clay-material-inset);
   --clay-molded-raised: var(--clay-grain-image), linear-gradient(176deg, var(--clay-material-highlight), transparent 42%), var(--clay-material-raised);
   --clay-molded-thumb: var(--clay-grain-image), radial-gradient(circle at 34% 24%, var(--clay-material-highlight), transparent 46%), linear-gradient(176deg, var(--clay-material-highlight), transparent 44%), var(--clay-thumb-material);
-  --clay-molded-primary: var(--clay-grain-image), linear-gradient(176deg, var(--clay-material-highlight), transparent 42%), var(--clay-pigment-primary);
+  /** Raised highlights stay above the label, preserving the pigment's paired ink. */
+  --clay-molded-primary: var(--clay-grain-image), linear-gradient(176deg, var(--clay-material-highlight), transparent 20%), var(--clay-pigment-primary);
   --clay-molded-success: var(--clay-grain-image), linear-gradient(176deg, var(--clay-material-highlight), transparent 42%), var(--clay-pigment-success);
   --clay-molded-warning: var(--clay-grain-image), linear-gradient(176deg, var(--clay-material-highlight), transparent 42%), var(--clay-pigment-warning);
   --clay-molded-danger: var(--clay-grain-image), linear-gradient(176deg, var(--clay-material-highlight), transparent 42%), var(--clay-pigment-danger);
@@ -1073,11 +1075,12 @@
 }
 
 /** Gives every button the shallow relief and debossed lettering shown in the reference. */
+/** Action and icon labels use the control surface; thumb pigment belongs to movable parts. */
 .clay-button, .clay-icon-button,
 [data-ui="clay"][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
   min-height: 2rem;
   padding: .34rem .64rem;
-  background-color: var(--clay-thumb-material);
+  background-color: var(--clay-control-bg);
   background-image: var(--clay-grain-image), linear-gradient(174deg, var(--clay-material-highlight), transparent 34%);
   background-size: var(--clay-grain-size), auto;
   border: 1px solid var(--clay-material-seam);
@@ -1102,7 +1105,8 @@
   text-shadow: var(--clay-label-relief);
 }
 .clay-button-primary { background: var(--clay-molded-primary); color: var(--clay-pigment-ink); border-color: var(--clay-pigment-primary); }
-.clay-button-primary:hover { background-color: var(--clay-pigment-primary-hover); border-color: var(--clay-pigment-primary-hover); }
+/** Hover changes the relief and edge without lightening the pigment beneath its label. */
+.clay-button-primary:hover { background: var(--clay-molded-primary); border-color: var(--clay-pigment-primary-hover); }
 .clay-button-secondary { background: var(--clay-grain-image), linear-gradient(176deg, var(--clay-material-highlight), transparent 42%), var(--clay-pigment-secondary); color: var(--clay-on-secondary); border-color: var(--clay-pigment-secondary); }
 .clay-button-secondary:hover { background-color: var(--clay-pigment-secondary); border-color: var(--clay-pigment-secondary); }
 .clay-button-danger { background: var(--clay-molded-danger); color: rgb(var(--clay-danger-text-rgb)); border-color: var(--clay-pigment-danger); }
@@ -1127,7 +1131,7 @@
 }
 .clay-button.clay-button-outline-heavy, .clay-button-outline-heavy {
   background-color: var(--clay-material-raised);
-  color: var(--usk-primary-ink, var(--clay-primary));
+  color: var(--usk-primary-ink, var(--clay-text));
   border: 2px solid var(--clay-primary);
   clip-path: var(--clay-chip-clip);
 }
@@ -1229,7 +1233,8 @@
   .clay-badge-danger { background: var(--clay-grain-image), linear-gradient(176deg, var(--clay-material-highlight), transparent 42%), color-mix(in srgb, var(--clay-pigment-danger) 28%, var(--clay-material-raised)); color: var(--clay-material-ink); border-color: color-mix(in srgb, var(--clay-pigment-danger), var(--clay-material-seam) 52%); }
 }
 .clay-nav { gap: 0; padding: .18rem; background: var(--clay-material-inset); border-color: var(--clay-material-seam); border-radius: .48rem .6rem .52rem .56rem; box-shadow: var(--clay-carved-shadow); clip-path: var(--clay-control-clip); filter: var(--clay-edge-filter); }
-.clay-nav-link { min-height: 2.1rem; padding: .42rem .62rem; border-radius: .3rem .38rem .32rem .36rem; clip-path: var(--clay-control-clip); font-weight: 500; text-shadow: var(--clay-label-relief); }
+/** Navigation labels retain full surface ink over the textured clay slab. */
+.clay-nav-link { min-height: 2.1rem; padding: .42rem .62rem; border-radius: .3rem .38rem .32rem .36rem; clip-path: var(--clay-control-clip); font-weight: 500; color: var(--clay-text); text-shadow: var(--clay-label-relief); }
 .clay-nav-link[aria-current="page"], .clay-nav-link.is-active { background: var(--clay-molded-primary); color: var(--clay-pigment-ink); box-shadow: var(--clay-filled-shadow); clip-path: var(--clay-control-clip); filter: var(--clay-edge-filter); }
 
 .clay-alert { padding: .7rem .82rem; background-color: var(--clay-material-raised); background-image: var(--clay-grain-image), linear-gradient(170deg, var(--clay-material-highlight), transparent 42%); background-size: var(--clay-grain-size), auto; border: 1px solid var(--clay-material-seam); border-inline-start-width: .28rem; border-radius: .42rem .55rem .46rem .52rem; box-shadow: var(--clay-relief-shadow); clip-path: var(--clay-control-clip); filter: var(--clay-edge-filter); }

package/styles/cyberpunk.css

@@ -427,7 +427,8 @@
 }
 [data-ui="cyberpunk"] *, [data-ui="cyberpunk"] *::before, [data-ui="cyberpunk"] *::after { box-sizing: border-box; }
 [data-ui="cyberpunk"][data-mode] { background: var(--cyber-theme-bg); background-size: var(--cyber-theme-bg-size); }
-[data-ui="cyberpunk"] a { color: var(--cyber-link); text-decoration-color: rgb(var(--cyber-primary-rgb) / 0.6); text-underline-offset: 0.18em; }
+/** Inline-link ink must not override the foreground paired with an action surface. */
+[data-ui="cyberpunk"] a:where(:not(.cyber-button):not(.cyber-icon-button)) { color: var(--cyber-link); text-decoration-color: rgb(var(--cyber-primary-rgb) / 0.6); text-underline-offset: 0.18em; }
 [data-ui="cyberpunk"] ::selection { background: var(--cyber-primary); color: var(--cyber-on-primary); }
 
 .cyber-page { position: relative; min-height: 100vh; padding: clamp(1rem, 4vw, 3rem); }
@@ -478,7 +479,8 @@
 .cyber-card, .cyber-panel { background: var(--cyber-card-bg); }
 .cyber-toolbar, .cyber-table-wrap { background: var(--cyber-control-bg); }
 /** Semantic variant attributes take precedence over the legacy neutral-control fallback. */
-.cyber-button:where(:not([data-ui-variant])):not(.cyber-button-primary):not(.cyber-button-secondary):not(.cyber-button-danger):not(.cyber-button-warning):not(.cyber-button-ghost), .cyber-icon-button { background: var(--cyber-control-bg); }
+/** Neutral defaults exclude outlined actions so their hover fill and ink remain paired. */
+.cyber-button:where(:not([data-ui-variant])):not(.cyber-button-primary):not(.cyber-button-secondary):not(.cyber-button-danger):not(.cyber-button-warning):not(.cyber-button-ghost):not(.cyber-button-outline-heavy), .cyber-icon-button { background: var(--cyber-control-bg); }
 .cyber-button, .cyber-icon-button, .cyber-badge, .cyber-nav-link { font-family: var(--cyber-font-control); }
 
 /* Spinner geometry follows the cyberpunk preset's clipped neon readouts. */
@@ -580,7 +582,7 @@
 .cyber-button.cyber-button-outline-heavy,
 .cyber-button-outline-heavy {
   background: transparent;
-  color: var(--usk-primary-ink, var(--cyber-primary));
+  color: var(--usk-primary-ink, var(--cyber-text));
   border-style: solid;
   border-width: 2px;
   border-color: var(--cyber-primary);
@@ -1047,7 +1049,7 @@
 .cyber-button:hover,
 .cyber-icon-button:hover {
   border-color: var(--cyber-primary);
-  color: var(--usk-primary-ink, var(--cyber-primary));
+  color: var(--usk-primary-ink, var(--cyber-text));
   box-shadow: 0 0 .75rem rgb(var(--cyber-primary-rgb) / .2);
 }
 
@@ -1618,7 +1620,8 @@
   border-color: transparent;
   background-color: transparent;
   background-image: none;
-  color: var(--usk-primary-ink, var(--cyber-primary));
+  /** Unfilled native controls use readable surface ink rather than neon fill pigment. */
+  color: var(--usk-primary-ink, var(--cyber-text));
   box-shadow: none;
 }
 
@@ -1627,7 +1630,8 @@
   border-color: var(--cyber-danger);
   background-color: rgb(var(--cyber-danger-rgb) / .12);
   background-image: linear-gradient(135deg, rgb(var(--cyber-danger-rgb) / .16), transparent 62%);
-  color: var(--cyber-danger);
+  /** The signal tint is decorative; its label uses the contrasting surface foreground. */
+  color: var(--cyber-text);
   box-shadow: var(--cyber-template-danger-glow);
 }
 

package/styles/data-terminal.css

@@ -438,7 +438,9 @@
 .terminal-card, .terminal-panel { background: var(--terminal-card-bg); }
 .terminal-toolbar, .terminal-table-wrap { background: var(--terminal-control-bg); }
 /** Attribute-selected variants bypass the legacy neutral-only paint fallback. */
-.terminal-button:where(:not([data-ui-variant])):not(.terminal-button-primary):not(.terminal-button-secondary):not(.terminal-button-danger):not(.terminal-button-warning):not(.terminal-button-ghost):not(.is-active):not([aria-pressed="true"]),
+/** Native press state bypasses the neutral fallback just like persistent pressed hooks. */
+/** Neutral defaults exclude outlined actions so their hover fill and ink remain paired. */
+.terminal-button:where(:not([data-ui-variant])):not(.terminal-button-primary):not(.terminal-button-secondary):not(.terminal-button-danger):not(.terminal-button-warning):not(.terminal-button-ghost):not(.terminal-button-outline-heavy):not(.is-active):not([aria-pressed="true"]):not(:active),
 .terminal-icon-button:not(.is-active):not([aria-pressed="true"]) { background: var(--terminal-control-bg); }
 .terminal-button, .terminal-icon-button, .terminal-badge, .terminal-nav-link { font-family: var(--terminal-font-control); }
 
@@ -631,7 +633,7 @@
 .terminal-button.terminal-button-outline-heavy,
 .terminal-button-outline-heavy {
   background: transparent;
-  color: var(--usk-primary-ink, var(--terminal-primary));
+  color: var(--usk-primary-ink, var(--terminal-text));
   border-style: solid;
   border-width: 2px;
   border-color: var(--terminal-primary);

package/styles/editorial-luxe.css

@@ -438,7 +438,8 @@
 .luxe-card, .luxe-panel { background: var(--luxe-card-bg); }
 .luxe-toolbar, .luxe-table-wrap { background: var(--luxe-control-bg); }
 /** Attribute-selected variants bypass the legacy neutral-only paint fallback. */
-.luxe-button:where(:not([data-ui-variant])):not(.luxe-button-primary):not(.luxe-button-secondary):not(.luxe-button-danger):not(.luxe-button-warning):not(.luxe-button-ghost), .luxe-icon-button { background: var(--luxe-control-bg); }
+/** Neutral defaults exclude outlined actions so their hover fill and ink remain paired. */
+.luxe-button:where(:not([data-ui-variant])):not(.luxe-button-primary):not(.luxe-button-secondary):not(.luxe-button-danger):not(.luxe-button-warning):not(.luxe-button-ghost):not(.luxe-button-outline-heavy), .luxe-icon-button { background: var(--luxe-control-bg); }
 .luxe-button, .luxe-icon-button, .luxe-badge, .luxe-nav-link { font-family: var(--luxe-font-control); }
 
 
@@ -630,7 +631,7 @@
 .luxe-button.luxe-button-outline-heavy,
 .luxe-button-outline-heavy {
   background: transparent;
-  color: var(--usk-primary-ink, var(--luxe-primary));
+  color: var(--usk-primary-ink, var(--luxe-text));
   border-style: solid;
   border-width: 2px;
   border-color: var(--luxe-primary);

package/styles/industrial-utility.css

@@ -438,7 +438,8 @@
 .utility-card, .utility-panel { background: var(--utility-card-bg); }
 .utility-toolbar, .utility-table-wrap { background: var(--utility-control-bg); }
 /** Attribute-selected variants bypass the legacy neutral-only paint fallback. */
-.utility-button:where(:not([data-ui-variant])):not(.utility-button-primary):not(.utility-button-secondary):not(.utility-button-danger):not(.utility-button-warning):not(.utility-button-ghost):not(.utility-button-guarded), .utility-icon-button { background: var(--utility-control-bg); }
+/** Neutral defaults exclude outlined actions so their hover fill and ink remain paired. */
+.utility-button:where(:not([data-ui-variant])):not(.utility-button-primary):not(.utility-button-secondary):not(.utility-button-danger):not(.utility-button-warning):not(.utility-button-ghost):not(.utility-button-outline-heavy):not(.utility-button-guarded), .utility-icon-button { background: var(--utility-control-bg); }
 .utility-button, .utility-icon-button, .utility-badge, .utility-nav-link { font-family: var(--utility-font-control); }
 
 
@@ -630,7 +631,7 @@
 .utility-button.utility-button-outline-heavy,
 .utility-button-outline-heavy {
   background: transparent;
-  color: var(--usk-primary-ink, var(--utility-primary));
+  color: var(--usk-primary-ink, var(--utility-text));
   border-style: solid;
   border-width: 2px;
   border-color: var(--utility-primary);
@@ -944,7 +945,8 @@
 @media print {
   [data-ui="industrial-utility"] { background: #fff !important; color: #000 !important; }
   [data-ui="industrial-utility"] * { box-shadow: none !important; text-shadow: none !important; }
-  [data-ui="industrial-utility"] a { color: #000 !important; text-decoration: underline; }
+  /** Inline-link ink must not override the foreground paired with an action surface. */
+[data-ui="industrial-utility"] a { color: #000 !important; text-decoration: underline; }
 }
 }
 
@@ -1096,15 +1098,15 @@
   outline-offset: 2px;
 }
 
-[data-ui="industrial-utility"] a {
+[data-ui="industrial-utility"] a:where(:not(.utility-button):not(.utility-icon-button):not(.utility-nav-link)) {
   color: var(--utility-material-lamp-blue);
   font-weight: 700;
   text-decoration-thickness: 1px;
   text-underline-offset: 3px;
 }
 
-[data-ui="industrial-utility"] a:hover,
-[data-ui="industrial-utility"] a.is-hover {
+[data-ui="industrial-utility"] a:where(:not(.utility-button):not(.utility-icon-button):not(.utility-nav-link)):hover,
+[data-ui="industrial-utility"] a:where(:not(.utility-button):not(.utility-icon-button):not(.utility-nav-link)).is-hover {
   color: var(--utility-material-warning);
 }
 

package/styles/maximalist.css

@@ -440,7 +440,8 @@
 .max-button:hover, .max-icon-button:hover { transform: translate(-2px, -2px); border-color: var(--max-ink); box-shadow: .4rem .4rem 0 rgb(var(--max-secondary-rgb) / .76); }
 .max-button:active, .max-icon-button:active, .max-button[aria-pressed="true"], .max-icon-button[aria-pressed="true"], .max-button.is-active, .max-icon-button.is-active { transform: translate(.12rem, .12rem); box-shadow: .12rem .12rem 0 var(--max-ink); }
 .max-button-primary { background: var(--max-poster-fill); color: var(--max-on-primary); border-color: var(--max-ink); }
-.max-button-primary:hover { background: linear-gradient(110deg, var(--max-primary-hover), var(--max-danger), var(--max-accent)); border-color: var(--max-ink); }
+/** A single foreground can span only gradient stops from its paired color role. */
+.max-button-primary:hover { background: linear-gradient(110deg, var(--max-primary-hover), var(--max-primary)); border-color: var(--max-ink); }
 .max-button-secondary { background: var(--max-secondary); color: var(--max-on-secondary); border-color: var(--max-secondary); }
 .max-button-secondary:hover { background: var(--max-secondary-hover); border-color: var(--max-secondary-hover); }
 .max-button-danger { background: var(--max-danger); color: var(--max-on-danger); border-color: var(--max-ink); }
@@ -452,6 +453,7 @@
 .max-card, .max-panel { background: var(--max-card-bg); }
 .max-toolbar, .max-table-wrap { background: var(--max-control-bg); }
 /** Attribute-selected variants bypass the legacy neutral-only paint fallback. */
+/** Neutral defaults exclude outlined actions so their hover fill and ink remain paired. */
 .max-button:where(:not([data-ui-variant])):not(.max-button-primary):not(.max-button-secondary):not(.max-button-danger):not(.max-button-warning):not(.max-button-ghost):not(.max-button-outline-heavy), .max-icon-button { background: var(--max-control-bg); }
 .max-button, .max-icon-button, .max-badge, .max-nav-link { font-family: var(--max-font-control); }
 

package/styles/minimal-saas.css

@@ -430,7 +430,10 @@
   font: inherit; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none;
   transition: color var(--saas-transition-fast), background var(--saas-transition-fast), border-color var(--saas-transition-fast), box-shadow var(--saas-transition-fast), transform var(--saas-transition-fast);
 }
-.saas-button:hover, .saas-icon-button:hover { transform: none; border-color: rgb(var(--saas-primary-rgb) / .48); background: var(--saas-surface-soft); }
+/** Neutral hover paint must not replace a filled variant's paired background. */
+.saas-button:hover, .saas-icon-button:hover { transform: none; border-color: rgb(var(--saas-primary-rgb) / .48); }
+.saas-button:where(:not(.saas-button-primary):not(.saas-button-danger):not(.saas-button-warning)):hover,
+.saas-icon-button:hover { background: var(--saas-surface-soft); color: var(--saas-text); }
 .saas-button:active, .saas-icon-button:active, .saas-button[aria-pressed="true"], .saas-icon-button[aria-pressed="true"], .saas-button.is-active, .saas-icon-button.is-active { transform: translateY(1px); box-shadow: inset 0 1px 2px rgb(var(--saas-text-rgb) / .12); }
 .saas-button-primary { background: linear-gradient(135deg, var(--saas-primary), var(--saas-brand-2)); color: var(--saas-on-primary); border-color: var(--saas-primary); }
 .saas-button-primary:hover { background: linear-gradient(135deg, var(--saas-brand-2), var(--saas-primary)); border-color: var(--saas-primary-hover); }
@@ -445,7 +448,8 @@
 .saas-card, .saas-panel { background: var(--saas-card-bg); }
 .saas-toolbar, .saas-table-wrap { background: var(--saas-control-bg); }
 /** Attribute-selected variants bypass the legacy neutral-only paint fallback. */
-.saas-button:where(:not([data-ui-variant])):not(.saas-button-primary):not(.saas-button-secondary):not(.saas-button-danger):not(.saas-button-warning):not(.saas-button-ghost), .saas-icon-button { background: var(--saas-control-bg); }
+/** Neutral defaults exclude outlined actions so their hover fill and ink remain paired. */
+.saas-button:where(:not([data-ui-variant])):not(.saas-button-primary):not(.saas-button-secondary):not(.saas-button-danger):not(.saas-button-warning):not(.saas-button-ghost):not(.saas-button-outline-heavy), .saas-icon-button { background: var(--saas-control-bg); }
 .saas-button, .saas-icon-button, .saas-badge, .saas-nav-link { font-family: var(--saas-font-control); }
 
 
@@ -652,7 +656,7 @@
 .saas-button.saas-button-outline-heavy,
 .saas-button-outline-heavy {
   background: transparent;
-  color: var(--usk-primary-ink, var(--saas-primary));
+  color: var(--usk-primary-ink, var(--saas-text));
   border-style: solid;
   border-width: 2px;
   border-color: var(--saas-primary);

package/styles/neo-noir.css

@@ -437,7 +437,8 @@
 /* Theme-responsive component defaults */
 .noir-card, .noir-panel { background: var(--noir-card-bg); }
 .noir-toolbar, .noir-table-wrap { background: var(--noir-control-bg); }
-.noir-button:where(:not(.noir-button-primary):not(.noir-button-secondary):not(.noir-button-danger):not(.noir-button-warning):not(.noir-button-ghost)), .noir-icon-button { background: var(--noir-control-bg); }
+/** Neutral defaults exclude outlined actions so their hover fill and ink remain paired. */
+.noir-button:where(:not(.noir-button-primary):not(.noir-button-secondary):not(.noir-button-danger):not(.noir-button-warning):not(.noir-button-ghost):not(.noir-button-outline-heavy)), .noir-icon-button { background: var(--noir-control-bg); }
 .noir-button, .noir-icon-button, .noir-badge, .noir-nav-link { font-family: var(--noir-font-control); }
 
 
@@ -629,17 +630,20 @@
 .noir-button.noir-button-outline-heavy,
 .noir-button-outline-heavy {
   background: transparent;
-  color: var(--usk-primary-ink, var(--noir-primary));
+  color: var(--usk-primary-ink, var(--noir-text));
   border-style: solid;
   border-width: 2px;
   border-color: var(--noir-primary);
   box-shadow: none;
 }
+/** Outlined hover paints the skewed face together with its on-primary label. */
 .noir-button.noir-button-outline-heavy:hover,
 .noir-button-outline-heavy:hover {
-  background: var(--noir-primary);
+  background: transparent;
   color: var(--noir-on-primary);
   border-color: var(--noir-primary-hover);
+  --noir-action-fill: var(--noir-primary);
+  --noir-action-line: var(--noir-primary-hover);
 }
 
 .noir-badge-seal {
@@ -1300,7 +1304,10 @@
 [data-ui="neo-noir"][data-mode="contrast"] { --noir-grain: none; --noir-corner: none; --noir-border-alpha: 1; }
 /** Warning actions inherit preset geometry and use the paired semantic warning colors. */
 [data-ui="neo-noir"][data-mode] .noir-button.noir-button-warning {
-  background: var(--noir-warning);
+  /** The skewed face owns the warning fill; a rectangular host fill sits behind it. */
+  --noir-action-fill: var(--noir-warning);
+  --noir-action-line: var(--noir-warning);
+  background: transparent;
   color: var(--noir-on-warning);
   border-color: var(--noir-warning);
   text-shadow: none;