ui-style-kit-css 2.7.0 → 2.7.2

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/native-elements.css

@@ -856,3 +856,22 @@
   }
 }
 }
+
+/** Native select affordances survive component background shorthands in the preset layer. */
+@layer ui-style-kit.presets {
+/** Keep functional chrome above native defaults while leaving component surface colors intact. */
+[data-ui][data-mode] :where(select:not([multiple])) {
+  padding-inline-end: var(--usk-native-select-padding-inline-end);
+  background-image: var(--usk-native-select-indicator-image);
+  background-repeat: no-repeat;
+  background-position: var(--usk-native-select-indicator-position);
+  background-size: var(--usk-native-select-indicator-size);
+}
+}
+
+/** Preset density may tune other edges, but text must retain the native indicator gutter. */
+@layer ui-style-kit.clean_defaults {
+[data-ui][data-mode] :where(select:not([multiple])) {
+  padding-inline-end: var(--usk-native-select-padding-inline-end);
+}
+}

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 {
@@ -1088,7 +1092,8 @@
   color: var(--noir-text); background: var(--noir-control-bg); border: 1px solid var(--noir-border);
   border-radius: 0; clip-path: none; box-shadow: none; font: 11px/1.4 var(--noir-font-mono);
 }
-.noir-select { appearance: auto; background-image: none; padding-right: .5rem; }
+/** Preserve the preset's browser-owned arrow when shared semantic fallback chrome is present. */
+.noir-select, [data-ui="neo-noir"][data-mode] .noir-select { appearance: auto; background-image: none; padding-right: .5rem; }
 .noir-input:focus, .noir-textarea:focus, .noir-select:focus, .noir-field-row[data-noir-state="focus"] :is(input,textarea) { border-color: var(--noir-focus); box-shadow: none; outline: 2px solid var(--noir-focus); outline-offset: 1px; }
 .noir-input[aria-invalid="true"], .noir-textarea[aria-invalid="true"] { border-color: var(--noir-danger); color: var(--noir-danger); box-shadow: none; }
 .noir-field-row[data-noir-state="success"] input { border-color: var(--noir-success); color: var(--noir-success); }
@@ -1300,7 +1305,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;

package/styles/neumorphism.css

@@ -442,7 +442,8 @@
 .neo-card, .neo-panel { background: var(--neo-card-bg); }
 .neo-toolbar, .neo-table-wrap { background: var(--neo-control-bg); }
 /** Attribute-selected variants bypass the legacy neutral-only paint fallback. */
-.neo-button:where(:not([data-ui-variant])):not(.neo-button-primary):not(.neo-button-secondary):not(.neo-button-danger):not(.neo-button-warning):not(.neo-button-ghost), .neo-icon-button { background: var(--neo-control-bg); }
+/** Neutral defaults exclude outlined actions so their hover fill and ink remain paired. */
+.neo-button:where(:not([data-ui-variant])):not(.neo-button-primary):not(.neo-button-secondary):not(.neo-button-danger):not(.neo-button-warning):not(.neo-button-ghost):not(.neo-button-outline-heavy), .neo-icon-button { background: var(--neo-control-bg); }
 .neo-button, .neo-icon-button, .neo-badge, .neo-nav-link { font-family: var(--neo-font-control); }
 
 
@@ -520,7 +521,8 @@
 .neo-table { width: 100%; border-collapse: collapse; }
 .neo-table th, .neo-table td { padding: .95rem 1rem; text-align: left; border-bottom: 1px solid var(--neo-border); }
 .neo-table th { color: var(--neo-text); font-size: .82rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; background: rgb(var(--neo-primary-rgb) / .08); }
-.neo-table td { color: var(--neo-text-muted); }
+/** Table values use surface text because the inset material can reduce muted-ink contrast. */
+.neo-table td { color: var(--neo-text); }
 .neo-table tr:hover td { background: rgb(var(--neo-primary-rgb) / .045); }
 
 /* =========================================================
@@ -801,7 +803,8 @@
 .neo-button-primary,
 .neo-button-secondary,
 .neo-button-danger {
-  background-image: linear-gradient(155deg, rgb(255 255 255 / .28), transparent 52%, rgb(0 0 0 / .08));
+  /** Keep the molded highlight at the edges, outside the central label lane. */
+  background-image: linear-gradient(155deg, rgb(255 255 255 / .28), transparent 20%, transparent 80%, rgb(0 0 0 / .08));
 }
 
 .neo-button-primary {
@@ -842,8 +845,10 @@
   box-shadow: inset .28rem .28rem .58rem rgb(0 0 0 / .34), inset -.22rem -.22rem .5rem rgb(255 255 255 / .22);
 }
 
+/** Neutral defaults exclude outlined actions so their hover fill and ink remain paired. */
+
 .neo-button-ghost,
-.neo-button:where(:not([data-ui-variant])):not(.neo-button-primary):not(.neo-button-secondary):not(.neo-button-danger):not(.neo-button-warning):not(.neo-button-ghost),
+.neo-button:where(:not([data-ui-variant])):not(.neo-button-primary):not(.neo-button-secondary):not(.neo-button-danger):not(.neo-button-warning):not(.neo-button-ghost):not(.neo-button-outline-heavy),
 .neo-icon-button {
   background-color: var(--neo-material-raised);
   background-image: linear-gradient(145deg, var(--neo-material-top-light), transparent 52%);
@@ -863,7 +868,7 @@
 .neo-button-outline-heavy {
   background-color: var(--neo-material-raised);
   background-image: linear-gradient(145deg, var(--neo-material-top-light), transparent 52%);
-  color: var(--usk-primary-ink, var(--neo-primary));
+  color: var(--usk-primary-ink, var(--neo-text));
   border: 1px solid var(--neo-material-edge);
   border-radius: var(--neo-radius-md);
   box-shadow: var(--neo-button-shadow);

package/styles/organic-modern.css

@@ -630,7 +630,7 @@
 .organic-button.organic-button-outline-heavy,
 .organic-button-outline-heavy {
   background: transparent;
-  color: var(--usk-primary-ink, var(--organic-primary));
+  color: var(--usk-primary-ink, var(--organic-text));
   border-style: solid;
   border-width: 2px;
   border-color: var(--organic-primary);

package/styles/paper-editorial.css

@@ -438,7 +438,8 @@
 .paper-card, .paper-panel { background: var(--paper-card-bg); }
 .paper-toolbar, .paper-table-wrap { background: var(--paper-control-bg); }
 /** Attribute-selected variants bypass the legacy neutral-only paint fallback. */
-.paper-button:where(:not([data-ui-variant])):not(.paper-button-primary):not(.paper-button-secondary):not(.paper-button-danger):not(.paper-button-warning):not(.paper-button-ghost), .paper-icon-button { background: var(--paper-control-bg); }
+/** Neutral defaults exclude outlined actions so their hover fill and ink remain paired. */
+.paper-button:where(:not([data-ui-variant])):not(.paper-button-primary):not(.paper-button-secondary):not(.paper-button-danger):not(.paper-button-warning):not(.paper-button-ghost):not(.paper-button-outline-heavy), .paper-icon-button { background: var(--paper-control-bg); }
 .paper-button, .paper-icon-button, .paper-badge, .paper-nav-link { font-family: var(--paper-font-control); }
 
 
@@ -630,7 +631,7 @@
 .paper-button.paper-button-outline-heavy,
 .paper-button-outline-heavy {
   background: transparent;
-  color: var(--usk-primary-ink, var(--paper-primary));
+  color: var(--usk-primary-ink, var(--paper-text));
   border-style: solid;
   border-width: 2px;
   border-color: var(--paper-primary);
@@ -942,7 +943,8 @@
 @media print {
   [data-ui="paper-editorial"] { background: #fff !important; color: #000 !important; }
   [data-ui="paper-editorial"] * { box-shadow: none !important; text-shadow: none !important; }
-  [data-ui="paper-editorial"] a { color: #000 !important; text-decoration: underline; }
+  /** Inline-link ink must not override the foreground paired with an action surface. */
+[data-ui="paper-editorial"] a { color: #000 !important; text-decoration: underline; }
 }
 }
 
@@ -1070,13 +1072,13 @@
 
 :where([data-ui="paper-editorial"]) :where(button,input,select,textarea) { font: inherit; }
 
-[data-ui="paper-editorial"] a {
+[data-ui="paper-editorial"] a:where(:not(.paper-button):not(.paper-icon-button):not(.paper-nav-link)) {
   color: var(--paper-sheet-blue);
   text-decoration-thickness: 1px;
   text-underline-offset: 3px;
 }
 
-[data-ui="paper-editorial"] a:hover { color: var(--paper-sheet-oxblood); }
+[data-ui="paper-editorial"] a:where(:not(.paper-button):not(.paper-icon-button):not(.paper-nav-link)):hover { color: var(--paper-sheet-oxblood); }
 
 .paper-kicker,
 .paper-label,

package/styles/retro-glass.css

@@ -485,7 +485,8 @@
 .rg-card, .rg-panel { background: var(--rg-card-bg); }
 .rg-toolbar, .rg-table-wrap { background: var(--rg-control-bg); }
 /** Attribute-selected variants bypass the legacy neutral-only paint fallback. */
-.rg-button:where(:not([data-ui-variant])):not(.rg-button-primary):not(.rg-button-secondary):not(.rg-button-danger):not(.rg-button-warning):not(.rg-button-ghost), .rg-icon-button { background: var(--rg-control-bg); }
+/** Neutral defaults exclude outlined actions so their hover fill and ink remain paired. */
+.rg-button:where(:not([data-ui-variant])):not(.rg-button-primary):not(.rg-button-secondary):not(.rg-button-danger):not(.rg-button-warning):not(.rg-button-ghost):not(.rg-button-outline-heavy), .rg-icon-button { background: var(--rg-control-bg); }
 .rg-button, .rg-icon-button, .rg-badge, .rg-nav-link { font-family: var(--rg-font-control); }
 
 /** All loader APIs share a complete circular track with one rotating accent. */
@@ -607,7 +608,7 @@
 .rg-button.rg-button-outline-heavy,
 .rg-button-outline-heavy {
   background: transparent;
-  color: var(--usk-primary-ink, var(--rg-primary));
+  color: var(--usk-primary-ink, var(--rg-text));
   border-style: solid;
   border-width: 2px;
   border-color: var(--rg-primary);
@@ -995,7 +996,9 @@
 .rg-icon-button { inline-size: var(--rg-control-height); padding: 8px; aspect-ratio: 1; }
 .rg-button-primary { background: var(--rg-gloss); color: var(--rg-gloss-ink); border-color: var(--rg-primary); }
 .rg-button-secondary { background: var(--rg-control-material); color: var(--rg-text); border-color: var(--rg-line-strong); }
-.rg-button-danger { background: var(--rg-danger-gloss); color: rgb(var(--usk-danger-text-rgb, 255 255 255)); border-color: var(--rg-danger); }
+/** Danger gloss retains its semantic foreground pair and confines reflection to the upper edge. */
+.rg-button-danger { background: linear-gradient(180deg, rgb(255 255 255 / .4), transparent 12%), var(--rg-danger); color: var(--rg-on-danger); border-color: var(--rg-danger); }
+.rg-button-primary:hover { background: var(--rg-gloss); color: var(--rg-gloss-ink); }
 /**
  * Lets explicit runtime foreground edits win without changing the default
  * Retro Glass danger gloss treatment used by the reference specimen.
@@ -1007,7 +1010,8 @@
 .rg-button:disabled, .rg-icon-button:disabled, .rg-button.is-disabled { opacity: .4; filter: saturate(.45); cursor: not-allowed; box-shadow: none; }
 .rg-field { display: block; min-inline-size: 0; }
 .rg-input, .rg-select, .rg-textarea { inline-size: 100%; min-block-size: var(--rg-control-height); padding: 8px 11px; background: var(--rg-glass-inset); color: var(--rg-text); border: 1px solid var(--rg-line-strong); border-radius: var(--rg-radius-sm); box-shadow: inset 0 1px 3px var(--rg-recess), 0 1px 0 var(--rg-highlight); font: 14px/1.3 var(--rg-font-body); }
-.rg-select { padding-inline-end: 32px; background-image: var(--usk-native-select-indicator-image), linear-gradient(180deg, rgb(0 0 0 / .12), transparent 18%); background-size: var(--usk-native-select-indicator-size), auto; background-position: var(--usk-native-select-indicator-position), center; background-repeat: no-repeat; }
+/** Native and semantic selects retain the same indicator above the recessed glass material. */
+.rg-select, [data-ui="retro-glass"][data-mode] :where(select:not([multiple])) { padding-inline-end: 32px; background-image: var(--usk-native-select-indicator-image), linear-gradient(180deg, rgb(0 0 0 / .12), transparent 18%); background-size: var(--usk-native-select-indicator-size), auto; background-position: var(--usk-native-select-indicator-position), center; background-repeat: no-repeat; }
 .rg-textarea { min-block-size: 64px; resize: vertical; }
 .rg-input::placeholder, .rg-textarea::placeholder { color: var(--rg-muted); opacity: 1; }
 .rg-input-wrap { display: flex; align-items: center; position: relative; }
@@ -1096,7 +1100,8 @@
 .rg-tab:hover, .rg-tab.is-active, .rg-tab[aria-selected="true"] { background: linear-gradient(rgb(var(--rg-primary-rgb) / .2), rgb(var(--rg-primary-rgb) / .2)), var(--rg-surface-input); border-bottom-color: var(--rg-primary); color: var(--rg-text); }
 .rg-pagination-page { min-inline-size: 36px; padding: 8px; font-size: 12px; }
 .rg-nav { padding: 0; background: transparent; border: 0; box-shadow: none; gap: 6px; }
-.rg-nav-link { min-block-size: var(--rg-control-height); padding: 8px 12px; background: var(--rg-control-material); border: 1px solid var(--rg-line-strong); border-radius: var(--rg-radius-sm); color: var(--rg-text-soft); text-shadow: none; letter-spacing: 0; }
+/** Chrome reflections need full surface ink for ordinary navigation labels. */
+.rg-nav-link { min-block-size: var(--rg-control-height); padding: 8px 12px; background: var(--rg-control-material); border: 1px solid var(--rg-line-strong); border-radius: var(--rg-radius-sm); color: var(--rg-text); text-shadow: none; letter-spacing: 0; }
 .rg-nav-link:hover { color: var(--rg-text); background: var(--rg-control-material); }
 .rg-nav-link.is-active, .rg-nav-link[aria-current="page"] { background: var(--rg-gloss); color: var(--rg-gloss-ink); box-shadow: inset 0 1px 0 var(--rg-highlight); }
 .rg-table-wrap { background: transparent; border: 0; box-shadow: none; }

package/styles/retrofuturism.css

@@ -439,7 +439,8 @@
 .retro-card, .retro-panel { background: var(--retro-card-bg); }
 .retro-toolbar, .retro-table-wrap { background: var(--retro-control-bg); }
 /** Attribute-selected variants bypass the legacy neutral-only paint fallback. */
-.retro-button:where(:not([data-ui-variant])):not(.retro-button-primary):not(.retro-button-secondary):not(.retro-button-danger):not(.retro-button-warning):not(.retro-button-ghost), .retro-icon-button { background: var(--retro-control-bg); }
+/** Neutral defaults exclude outlined actions so their hover fill and ink remain paired. */
+.retro-button:where(:not([data-ui-variant])):not(.retro-button-primary):not(.retro-button-secondary):not(.retro-button-danger):not(.retro-button-warning):not(.retro-button-ghost):not(.retro-button-outline-heavy), .retro-icon-button { background: var(--retro-control-bg); }
 .retro-button, .retro-icon-button, .retro-badge, .retro-nav-link { font-family: var(--retro-font-control); }
 
 
@@ -638,7 +639,7 @@
 .retro-button.retro-button-outline-heavy,
 .retro-button-outline-heavy {
   background: transparent;
-  color: var(--usk-primary-ink, var(--retro-primary));
+  color: var(--usk-primary-ink, var(--retro-text));
   border-style: solid;
   border-width: 2px;
   border-color: var(--retro-primary);
@@ -1336,7 +1337,7 @@
 
 .retro-button.retro-button-outline-heavy, .retro-button-outline-heavy {
   background: var(--retro-enamel-bg);
-  color: var(--usk-primary-ink, var(--retro-primary));
+  color: var(--usk-primary-ink, var(--retro-text));
   border: 4px double var(--retro-metal-edge);
   border-radius: var(--retro-radius-pill);
   clip-path: inset(0 round var(--retro-radius-pill));

package/styles/tactile.css

@@ -468,7 +468,8 @@
 .tactile-card, .tactile-panel { background: var(--tactile-card-bg); }
 .tactile-toolbar, .tactile-table-wrap { background: var(--tactile-card-bg); }
 /** Attribute-selected variants bypass the legacy neutral-only paint fallback. */
-.tactile-button:where(:not([data-ui-variant])):not(.tactile-button-primary):not(.tactile-button-secondary):not(.tactile-button-danger):not(.tactile-button-warning):not(.tactile-button-ghost), .tactile-icon-button { background: var(--tactile-control-bg); }
+/** Neutral defaults exclude outlined actions so their hover fill and ink remain paired. */
+.tactile-button:where(:not([data-ui-variant])):not(.tactile-button-primary):not(.tactile-button-secondary):not(.tactile-button-danger):not(.tactile-button-warning):not(.tactile-button-ghost):not(.tactile-button-outline-heavy), .tactile-icon-button { background: var(--tactile-control-bg); }
 .tactile-button, .tactile-icon-button, .tactile-badge, .tactile-nav-link { font-family: var(--tactile-font-control); }
 
 
@@ -664,7 +665,7 @@
 .tactile-button.tactile-button-outline-heavy,
 .tactile-button-outline-heavy {
   background: transparent;
-  color: var(--usk-primary-ink, var(--tactile-primary));
+  color: var(--usk-primary-ink, var(--tactile-text));
   border-style: solid;
   border-width: 2px;
   border-color: var(--tactile-primary);
@@ -1552,7 +1553,8 @@
 /** Enhances supported browsers with the reference's light-to-dark enamel ramp. */
 @supports (color: color-mix(in srgb, black, white)) {
   .tactile-button-primary {
-    background: linear-gradient(180deg, color-mix(in srgb, var(--tactile-primary), white 16%), var(--tactile-primary) 48%, color-mix(in srgb, var(--tactile-primary), black 18%));
+    /** Both enamel stops retain the same tested primary foreground pair. */
+    background: linear-gradient(180deg, var(--tactile-primary-hover), var(--tactile-primary) 48%, var(--tactile-primary));
     border-color: color-mix(in srgb, var(--tactile-primary), black 34%);
     box-shadow: inset 0 1px 0 rgb(255 255 255 / .42), inset 0 -2px 0 rgb(0 0 0 / .25), 0 1px 2px rgb(var(--tactile-material-shadow-rgb) / .3);
   }
@@ -1705,7 +1707,8 @@
 
 .tactile-nav-link[aria-current="page"],
 .tactile-nav-link.is-active {
-  color: var(--tactile-brass);
+  /** The copper rail carries selection; text retains the sidebar's paired foreground. */
+  color: var(--tactile-sidebar-fg);
   background: rgb(var(--tactile-sidebar-text-rgb) / .06);
   border-color: rgb(var(--tactile-sidebar-text-rgb) / .18);
   box-shadow: inset .18rem 0 0 var(--tactile-copper), inset .08rem .08rem .18rem rgb(0 0 0 / .38);

package/styles/technical-blueprint.css

@@ -556,7 +556,8 @@
 .blueprint-card, .blueprint-panel { background: var(--blueprint-card-bg); }
 .blueprint-toolbar, .blueprint-table-wrap { background: var(--blueprint-control-bg); }
 /** Attribute-selected variants bypass the legacy neutral-only paint fallback. */
-.blueprint-button:where(:not([data-ui-variant])):not(.blueprint-button-primary):not(.blueprint-button-secondary):not(.blueprint-button-danger):not(.blueprint-button-warning):not(.blueprint-button-ghost), .blueprint-icon-button { background: var(--blueprint-control-bg); }
+/** Neutral defaults exclude outlined actions so their hover fill and ink remain paired. */
+.blueprint-button:where(:not([data-ui-variant])):not(.blueprint-button-primary):not(.blueprint-button-secondary):not(.blueprint-button-danger):not(.blueprint-button-warning):not(.blueprint-button-ghost):not(.blueprint-button-outline-heavy), .blueprint-icon-button { background: var(--blueprint-control-bg); }
 .blueprint-button, .blueprint-icon-button, .blueprint-badge, .blueprint-nav-link { font-family: var(--blueprint-font-control); }
 
 
@@ -748,7 +749,7 @@
 .blueprint-button.blueprint-button-outline-heavy,
 .blueprint-button-outline-heavy {
   background: transparent;
-  color: var(--usk-primary-ink, var(--blueprint-primary));
+  color: var(--usk-primary-ink, var(--blueprint-text));
   border-style: solid;
   border-width: 2px;
   border-color: var(--blueprint-primary);
@@ -892,7 +893,8 @@
 .blueprint-surface, .blueprint-card, .blueprint-panel, .blueprint-toolbar, .blueprint-table-wrap { border-radius: 0; box-shadow: inset 0 0 0 1px rgb(var(--blueprint-primary-rgb) / .12); }
 .blueprint-card, .blueprint-panel, .blueprint-toolbar { background-image: linear-gradient(90deg, transparent calc(100% - .55rem), rgb(var(--blueprint-primary-rgb) / .3) calc(100% - .55rem), rgb(var(--blueprint-primary-rgb) / .3) calc(100% - .48rem), transparent calc(100% - .48rem)); }
 .blueprint-button, .blueprint-icon-button { border-radius: 0; box-shadow: none; font-family: var(--blueprint-font-control); text-transform: uppercase; letter-spacing: .06em; }
-.blueprint-button:where(:not([data-ui-variant])):not(.blueprint-button-primary):not(.blueprint-button-secondary):not(.blueprint-button-danger):not(.blueprint-button-warning) { background: transparent; }
+/** Flat neutral paint yields to outlined CTA hover fills. */
+.blueprint-button:where(:not([data-ui-variant])):not(.blueprint-button-primary):not(.blueprint-button-secondary):not(.blueprint-button-danger):not(.blueprint-button-warning):not(.blueprint-button-outline-heavy) { background: transparent; }
 .blueprint-nav { border-radius: 0; box-shadow: none; }
 .blueprint-nav-link { border-radius: 0; font-family: var(--blueprint-font-control); font-size: .75rem; text-transform: uppercase; }
 .blueprint-input, .blueprint-textarea, .blueprint-select, .blueprint-badge, .blueprint-alert, .blueprint-metric, .blueprint-well, .blueprint-inset { border-radius: 0; }
@@ -1103,7 +1105,7 @@
   --blueprint-fallback-border-rgb: 20 95 147;
   --blueprint-fallback-primary-rgb: 7 95 157;
   --blueprint-fallback-primary-hover-rgb: 6 76 124;
-  --blueprint-fallback-danger-rgb: 201 49 44;
+  --blueprint-fallback-danger-rgb: 197 45 40;
   --blueprint-fallback-success-rgb: 24 111 64;
   --blueprint-fallback-warning-rgb: 132 76 0;
   --blueprint-fallback-warning-text-rgb: 255 255 255;
@@ -1171,6 +1173,8 @@
 }
 .blueprint-icon-button { inline-size: 36px; padding: 8px; aspect-ratio: 1; }
 .blueprint-button-primary { background: var(--blueprint-fill); color: var(--blueprint-fill-ink); border-color: var(--blueprint-primary); }
+/** The hover fill uses the primary role, so its label must use that role's foreground. */
+.blueprint-button-primary:hover { color: var(--blueprint-on-primary); }
 .blueprint-button-secondary { background: transparent; color: var(--blueprint-secondary); border-color: var(--blueprint-secondary); }
 .blueprint-button-ghost { border-style: dashed; color: var(--blueprint-text-soft); }
 .blueprint-button-danger { background: transparent; border-color: var(--blueprint-danger); color: var(--blueprint-danger); }

package/styles/y2k.css

@@ -433,7 +433,8 @@
 }
 [data-ui="y2k"] *, [data-ui="y2k"] *::before, [data-ui="y2k"] *::after { box-sizing: border-box; }
 [data-ui="y2k"][data-mode] { background: var(--y2k-theme-bg); background-size: var(--y2k-theme-bg-size); }
-[data-ui="y2k"] a { color: var(--y2k-link); text-decoration-thickness: 0.11em; text-underline-offset: 0.18em; } [data-ui="y2k"] ::selection { background: var(--y2k-primary); color: var(--y2k-on-primary); }
+/** Inline-link ink must not override the foreground paired with an action surface. */
+[data-ui="y2k"] a:where(:not(.y2k-button):not(.y2k-icon-button)) { color: var(--y2k-link); text-decoration-thickness: 0.11em; text-underline-offset: 0.18em; } [data-ui="y2k"] ::selection { background: var(--y2k-primary); color: var(--y2k-on-primary); }
 
 .y2k-page { min-height: 100vh; padding: clamp(1rem, 4vw, 3rem); background-image: radial-gradient(rgb(var(--y2k-border-rgb) / var(--y2k-grid-alpha)) 1px, transparent 1px); background-size: 22px 22px; }
 .y2k-container { width: min(100% - 2rem, 1200px); margin-inline: auto; } .y2k-stack { display: flex; flex-direction: column; gap: var(--y2k-space-4); } .y2k-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--y2k-space-3); } .y2k-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--y2k-space-5); } .y2k-section { padding: clamp(1.25rem, 4vw, 2.5rem); }
@@ -467,7 +468,8 @@
 .y2k-card, .y2k-panel { background: var(--y2k-card-bg); }
 .y2k-toolbar, .y2k-table-wrap { background: var(--y2k-control-bg); }
 /** Attribute-selected variants bypass the legacy neutral-only paint fallback. */
-.y2k-button:where(:not([data-ui-variant])):not(.y2k-button-primary):not(.y2k-button-secondary):not(.y2k-button-danger):not(.y2k-button-warning):not(.y2k-button-ghost), .y2k-icon-button { background: var(--y2k-control-bg); }
+/** Neutral defaults exclude outlined actions so their hover fill and ink remain paired. */
+.y2k-button:where(:not([data-ui-variant])):not(.y2k-button-primary):not(.y2k-button-secondary):not(.y2k-button-danger):not(.y2k-button-warning):not(.y2k-button-ghost):not(.y2k-button-outline-heavy), .y2k-icon-button { background: var(--y2k-control-bg); }
 .y2k-button, .y2k-icon-button, .y2k-badge, .y2k-nav-link { font-family: var(--y2k-font-control); }
 
 /* Spinner geometry follows the y2k preset's glossy plastic controls. */
@@ -568,7 +570,7 @@
 .y2k-button.y2k-button-outline-heavy,
 .y2k-button-outline-heavy {
   background: transparent;
-  color: var(--usk-primary-ink, var(--y2k-primary));
+  color: var(--usk-primary-ink, var(--y2k-text));
   border-style: solid;
   border-width: 2px;
   border-color: var(--y2k-primary);
@@ -926,7 +928,7 @@
   font: 400 11px/1.2 Tahoma, Verdana, Arial, sans-serif;
 }
 
-[data-ui="y2k"] a {
+[data-ui="y2k"] a:where(:not(.y2k-button):not(.y2k-icon-button)) {
   color: var(--y2k-link);
   text-decoration: underline;
   text-decoration-thickness: auto;
@@ -1098,10 +1100,11 @@
   padding: 0;
 }
 
-.y2k-button:hover,
+/** Hovered neutral controls retain the foreground paired with their neutral surface. */
+.y2k-button:where(:not(.y2k-button-primary):not(.y2k-button-danger):not(.y2k-button-warning)):hover,
 .y2k-icon-button:hover {
-  background: var(--y2k-primary-hover);
-  color: var(--y2k-on-primary);
+  background: var(--y2k-surface-soft);
+  color: var(--y2k-text);
   transform: none;
   box-shadow: var(--y2k-bevel-raised);
 }
@@ -1118,11 +1121,17 @@
 }
 
 .y2k-button-primary {
-  background: linear-gradient(180deg, rgb(255 255 255 / .2), transparent 48%), var(--y2k-primary);
+  /** Keep the raised bevel's reflection outside the label lane. */
+  background: linear-gradient(180deg, rgb(255 255 255 / .2), transparent 20%), var(--y2k-primary);
   color: var(--y2k-on-primary);
   border-color: var(--y2k-border);
 }
 
+.y2k-button-primary:hover {
+  background: var(--y2k-primary-hover);
+  color: var(--y2k-on-primary);
+}
+
 .y2k-button-secondary {
   background: var(--y2k-surface-soft);
   color: var(--y2k-text);
@@ -1131,8 +1140,9 @@
 
 .y2k-button-danger {
   background: var(--y2k-surface-soft);
-  color: var(--y2k-danger);
-  border-color: var(--y2k-border);
+  /** The outline carries the danger signal while surface ink keeps its label readable. */
+  color: var(--y2k-text);
+  border-color: var(--y2k-danger);
 }
 
 /**
@@ -1157,12 +1167,16 @@
 .y2k-button.y2k-button-outline-heavy {
   min-inline-size: 0;
   min-block-size: 1.375rem;
-  background: var(--y2k-surface-soft);
   border: 1px outset var(--y2k-border);
   border-radius: 0;
   box-shadow: var(--y2k-bevel-raised);
   clip-path: none;
 }
+/** Compact CTA geometry preserves a primary action's filled paint and paired ink. */
+.y2k-button-cut:where(:not(.y2k-button-primary)),
+.y2k-button.y2k-button-cut:where(:not(.y2k-button-primary)),
+.y2k-button-outline-heavy,
+.y2k-button.y2k-button-outline-heavy { background: var(--y2k-surface-soft); }
 
 .y2k-field {
   gap: .125rem;
@@ -1380,6 +1394,11 @@
   text-align: center;
 }
 
+/** The two-line seal needs its own frame; compact icon dimensions clip its labels. */
+.y2k-badge-seal { inline-size: 4rem; min-inline-size: 4rem; block-size: 4rem; }
+/** Native inline spacing must not consume the compact seal's label tracks. */
+.y2k-badge-seal > strong, .y2k-badge-seal > small { margin: 0; padding: 0; white-space: nowrap; }
+
 .y2k-feature-item > .y2k-icon-medallion,
 .y2k-callout-bar > .y2k-icon-medallion {
   min-inline-size: 2.75rem;