ui-style-kit-css 2.6.1 → 2.7.1

package/styles/paper-editorial.css

@@ -251,7 +251,7 @@
   --usk-native-range-track-shadow: 2px 2px 0 rgb(0 0 0 / .16);
   --usk-native-range-progress-background: var(--paper-primary);
   --usk-native-range-thumb-size: 1.15rem;
-  --usk-native-range-thumb-background: var(--paper-surface-strong);
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-range-thumb-border: 1px solid var(--paper-border);
   --usk-native-range-thumb-radius: 50%;
   --usk-native-range-thumb-shadow: 2px 2px 0 rgb(0 0 0 / .16);
@@ -437,7 +437,9 @@
 /* Theme-responsive component defaults */
 .paper-card, .paper-panel { background: var(--paper-card-bg); }
 .paper-toolbar, .paper-table-wrap { background: var(--paper-control-bg); }
-.paper-button: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); }
+/** Attribute-selected variants bypass the legacy neutral-only paint fallback. */
+/** 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); }
 
 
@@ -629,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);
@@ -863,7 +865,7 @@
   --usk-native-range-track-shadow: 0 1px 0 rgb(var(--paper-text-rgb) / .22);
   --usk-native-range-progress-background: var(--paper-primary);
   --usk-native-range-thumb-size: 1rem;
-  --usk-native-range-thumb-background: var(--paper-surface-strong);
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-range-thumb-border: 2px solid var(--paper-primary);
   --usk-native-range-thumb-radius: .02rem;
   --usk-native-range-thumb-shadow: .08rem .08rem 0 rgb(var(--paper-text-rgb) / .28);
@@ -941,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; }
 }
 }
 
@@ -1069,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,
@@ -1699,6 +1702,41 @@ dialog.paper-dialog:not([open]) { display: none; }
 .paper-switch input:checked + .paper-switch-track .paper-switch-thumb { background: var(--paper-sheet-on-blue); }
 .paper-switch input:has(+ .paper-switch-track) { position: absolute; opacity: 0; pointer-events: none; }
 .paper-switch input:not(:has(+ .paper-switch-track)) { pointer-events: auto; }
+/** Message symbols have their own lane, centered against the complete text block. */
+.paper-alert {
+  position: relative;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-items: center;
+  gap: .25rem .5rem;
+  padding-inline-start: 2.75rem;
+}
+.paper-alert::before {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: .75rem;
+  display: grid;
+  place-items: center;
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
+  min-inline-size: 0;
+  min-block-size: 0;
+  margin: 0;
+  padding: 0;
+  font: 700 1.25rem/1 "Segoe UI Symbol", Arial, sans-serif;
+  transform: translateY(-50%);
+}
+.paper-alert > :is(p, strong, span, div) {
+  min-inline-size: 0;
+  width: auto;
+  margin: 0;
+}
+.paper-alert:has(> button) { grid-template-columns: minmax(0, 1fr) auto; }
+.paper-alert > button {
+  align-self: center;
+  margin: 0;
+}
+
 .paper-spinner, .paper-loading-spinner, [data-ui="paper-editorial"] :where(.ui-spinner,.loading-spinner,[data-loading-spinner]) {
   inline-size: 24px; block-size: 24px; min-width: 24px; padding: 0; border: 2px solid var(--paper-sheet-rule-soft); border-right-color: var(--paper-sheet-blue); border-radius: 50%; background: none; box-shadow: none; clip-path: none; animation: paper-sheet-spin .75s linear infinite;
 }

package/styles/retro-glass.css

@@ -290,7 +290,7 @@
   --usk-native-range-track-shadow: inset 0 1px rgb(255 255 255 / .55);
   --usk-native-range-progress-background: var(--rg-primary);
   --usk-native-range-thumb-size: 1.35rem;
-  --usk-native-range-thumb-background: var(--rg-surface-strong);
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-range-thumb-border: 1px solid var(--rg-border);
   --usk-native-range-thumb-radius: 50%;
   --usk-native-range-thumb-shadow: inset 0 1px rgb(255 255 255 / .55);
@@ -484,7 +484,9 @@
 /* Theme-responsive component defaults */
 .rg-card, .rg-panel { background: var(--rg-card-bg); }
 .rg-toolbar, .rg-table-wrap { background: var(--rg-control-bg); }
-.rg-button: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); }
+/** Attribute-selected variants bypass the legacy neutral-only paint fallback. */
+/** 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. */
@@ -606,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);
@@ -806,7 +808,7 @@
   --usk-native-range-track-shadow: inset 0 2px 4px rgb(var(--rg-text-rgb) / .22);
   --usk-native-range-progress-background: linear-gradient(180deg, var(--rg-primary-hover), var(--rg-primary));
   --usk-native-range-thumb-size: 1.2rem;
-  --usk-native-range-thumb-background: radial-gradient(circle at 42% 32%, var(--rg-glass-highlight), transparent 28%), var(--rg-control-material);
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-range-thumb-border: 1px solid var(--rg-border);
   --usk-native-range-thumb-radius: 50%;
   --usk-native-range-thumb-shadow: inset 0 1px 0 var(--rg-surface-strong), 0 2px 4px rgb(var(--rg-text-rgb) / .28);
@@ -994,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.
@@ -1095,7 +1099,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; }
@@ -1185,3 +1190,8 @@
   font-weight: 800;
   line-height: 1;
 }
+
+@layer ui-style-kit.retro_glass {
+/** Console content scrolls inside its frame instead of expanding a narrow parent. */
+.rg-console { box-sizing: border-box; min-inline-size: 0; max-inline-size: 100%; margin-inline: 0; overflow-x: auto; }
+}

package/styles/retrofuturism.css

@@ -251,7 +251,7 @@
   --usk-native-range-track-shadow: 0 0 10px var(--retro-primary);
   --usk-native-range-progress-background: var(--retro-primary);
   --usk-native-range-thumb-size: 1.55rem;
-  --usk-native-range-thumb-background: var(--retro-surface-strong);
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-range-thumb-border: 1px solid var(--retro-border);
   --usk-native-range-thumb-radius: 50%;
   --usk-native-range-thumb-shadow: 0 0 10px var(--retro-primary);
@@ -438,7 +438,9 @@
 /* Theme-responsive component defaults */
 .retro-card, .retro-panel { background: var(--retro-card-bg); }
 .retro-toolbar, .retro-table-wrap { background: var(--retro-control-bg); }
-.retro-button: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); }
+/** Attribute-selected variants bypass the legacy neutral-only paint fallback. */
+/** 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); }
 
 
@@ -637,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);
@@ -920,7 +922,7 @@
   --usk-native-range-track-shadow: var(--retro-recess-shadow);
   --usk-native-range-progress-background: var(--retro-calibration-track);
   --usk-native-range-thumb-size: 1.25rem;
-  --usk-native-range-thumb-background: var(--retro-metal-rim);
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-range-thumb-border: 3px double var(--retro-metal-edge);
   --usk-native-range-thumb-radius: 50%;
   --usk-native-range-thumb-shadow: var(--retro-control-shadow);
@@ -1316,9 +1318,10 @@
 }
 
 .retro-icon-medallion {
-  background: var(--retro-metal-rim);
+  /* Keep chrome on the rim and give the central glyph a paired, stable surface. */
+  background: linear-gradient(var(--retro-surface), var(--retro-surface)) padding-box, var(--retro-metal-rim) border-box;
   color: var(--retro-text);
-  border: 3px double var(--retro-metal-edge);
+  border: 3px double transparent;
   box-shadow: var(--retro-control-shadow);
 }
 
@@ -1334,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

@@ -257,7 +257,7 @@
   --usk-native-range-track-shadow: var(--tactile-deep-inset-shadow);
   --usk-native-range-progress-background: var(--tactile-action-solid);
   --usk-native-range-thumb-size: 1.55rem;
-  --usk-native-range-thumb-background: var(--tactile-thumb-bg);
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-range-thumb-border: 1px solid var(--tactile-keyline);
   --usk-native-range-thumb-radius: .22rem;
   --usk-native-range-thumb-shadow: var(--tactile-button-shadow);
@@ -467,7 +467,9 @@
 /* Theme-responsive component defaults */
 .tactile-card, .tactile-panel { background: var(--tactile-card-bg); }
 .tactile-toolbar, .tactile-table-wrap { background: var(--tactile-card-bg); }
-.tactile-button: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); }
+/** Attribute-selected variants bypass the legacy neutral-only paint fallback. */
+/** 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); }
 
 
@@ -663,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);
@@ -1059,7 +1061,14 @@
 
 /* Busy indicators preserve the bevel and pressed-depth cues of tactile controls. */
 .tactile-button[aria-busy="true"]::after, .tactile-icon-button[aria-busy="true"]::after, [data-ui="tactile"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"])::after {
-  border: .12em solid currentColor; border-radius: 50%; background: linear-gradient(145deg, rgb(255 255 255 / .35), transparent 48%); box-shadow: inset .1em .1em .18em rgb(0 0 0 / .3), inset -.08em -.08em .15em rgb(255 255 255 / .32), 0 .08em .16em rgb(0 0 0 / .22); clip-path: circle(50%); animation: tactile-spin .88s cubic-bezier(.2, .8, .2, 1) infinite;
+  border: .14em solid currentColor;
+  border-block-start-color: transparent;
+  border-inline-start-color: transparent;
+  border-radius: 50%;
+  background: none;
+  box-shadow: 0 .08em .16em rgb(0 0 0 / .22);
+  clip-path: none;
+  animation: tactile-spin .88s linear infinite;
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -1361,7 +1370,7 @@
   --usk-native-range-track-radius: .16rem;
   --usk-native-range-track-shadow: var(--tactile-deep-inset-shadow);
   --usk-native-range-thumb-size: 1.35rem;
-  --usk-native-range-thumb-background: var(--tactile-thumb-bg);
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-range-thumb-border: 1px solid var(--tactile-keyline);
   --usk-native-range-thumb-radius: .16rem;
   --usk-native-range-thumb-shadow: var(--tactile-button-shadow);
@@ -1544,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);
   }
@@ -1557,7 +1567,8 @@
 
 .tactile-button-ghost {
   background: transparent;
-  color: var(--usk-primary-ink, var(--tactile-primary));
+  /* Unfilled controls and their busy arcs need surface ink, not a copper fill. */
+  color: var(--usk-primary-ink, var(--tactile-link));
   border-color: transparent;
   box-shadow: none;
 }
@@ -1696,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);
@@ -1804,7 +1816,8 @@
 .tactile-icon-medallion,
 .tactile-badge-seal {
   background: var(--tactile-sidebar-bg);
-  color: var(--tactile-brass);
+  /* The theme may invert this material; its paired ink follows that inversion. */
+  color: var(--tactile-sidebar-fg);
   border-color: rgb(var(--tactile-keyline-rgb) / .82);
   box-shadow: var(--tactile-button-shadow);
 }

package/styles/technical-blueprint.css

@@ -250,7 +250,8 @@
   --usk-native-range-track-shadow: 0 -.34rem 0 -.31rem var(--blueprint-primary);
   --usk-native-range-progress-background: linear-gradient(90deg, var(--blueprint-primary), var(--blueprint-focus));
   --usk-native-range-thumb-size: 1.02rem;
-  --usk-native-range-thumb-background: var(--blueprint-surface);
+  /** A split marker stays colored against the ruled blueprint track. */
+  --usk-native-range-thumb-background: linear-gradient(135deg, var(--blueprint-primary) 0 55%, var(--blueprint-surface) 55%);
   --usk-native-range-thumb-border: 1px double var(--blueprint-primary);
   --usk-native-range-thumb-radius: 0;
   --usk-native-range-thumb-shadow: 0 0 0 2px var(--blueprint-surface), 0 0 0 3px var(--blueprint-primary);
@@ -367,7 +368,7 @@
   --usk-native-range-track-shadow: 0 0 0 1px var(--blueprint-primary);
   --usk-native-range-progress-background: var(--blueprint-primary);
   --usk-native-range-thumb-size: 1.2rem;
-  --usk-native-range-thumb-background: var(--blueprint-surface-strong);
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-range-thumb-border: 1px solid var(--blueprint-border);
   --usk-native-range-thumb-radius: 50%;
   --usk-native-range-thumb-shadow: 0 0 0 1px var(--blueprint-primary);
@@ -554,7 +555,9 @@
 /* Theme-responsive component defaults */
 .blueprint-card, .blueprint-panel { background: var(--blueprint-card-bg); }
 .blueprint-toolbar, .blueprint-table-wrap { background: var(--blueprint-control-bg); }
-.blueprint-button: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); }
+/** Attribute-selected variants bypass the legacy neutral-only paint fallback. */
+/** 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); }
 
 
@@ -746,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);
@@ -890,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: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; }
@@ -984,7 +988,8 @@
   --usk-native-range-track-shadow: 0 -.34rem 0 -.31rem var(--blueprint-primary);
   --usk-native-range-progress-background: linear-gradient(90deg, var(--blueprint-primary), var(--blueprint-focus));
   --usk-native-range-thumb-size: 1.02rem;
-  --usk-native-range-thumb-background: var(--blueprint-surface);
+  /** A split marker stays colored against the ruled blueprint track. */
+  --usk-native-range-thumb-background: linear-gradient(135deg, var(--blueprint-primary) 0 55%, var(--blueprint-surface) 55%);
   --usk-native-range-thumb-border: 1px double var(--blueprint-primary);
   --usk-native-range-thumb-radius: 0;
   --usk-native-range-thumb-shadow: 0 0 0 2px var(--blueprint-surface), 0 0 0 3px var(--blueprint-primary);
@@ -1100,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;
@@ -1168,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

@@ -272,7 +272,7 @@
   --usk-native-range-track-shadow: inset 0 3px rgb(255 255 255 / .55);
   --usk-native-range-progress-background: var(--y2k-primary);
   --usk-native-range-thumb-size: 1.55rem;
-  --usk-native-range-thumb-background: var(--y2k-surface-strong);
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-range-thumb-border: 1px solid var(--y2k-border);
   --usk-native-range-thumb-radius: 50%;
   --usk-native-range-thumb-shadow: inset 0 3px rgb(255 255 255 / .55);
@@ -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); }
@@ -466,7 +467,9 @@
 /* Theme-responsive component defaults */
 .y2k-card, .y2k-panel { background: var(--y2k-card-bg); }
 .y2k-toolbar, .y2k-table-wrap { background: var(--y2k-control-bg); }
-.y2k-button: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); }
+/** Attribute-selected variants bypass the legacy neutral-only paint fallback. */
+/** 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. */
@@ -567,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);
@@ -768,7 +771,7 @@
   --usk-native-range-track-shadow: inset 1px 1px 0 rgb(var(--y2k-text-rgb) / .28);
   --usk-native-range-progress-background: repeating-linear-gradient(90deg, var(--y2k-primary) 0 .4rem, var(--y2k-surface) .4rem .48rem);
   --usk-native-range-thumb-size: 1.12rem;
-  --usk-native-range-thumb-background: linear-gradient(135deg, var(--y2k-surface-strong), var(--y2k-surface-soft));
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-range-thumb-border: 1px outset var(--y2k-border);
   --usk-native-range-thumb-radius: 0;
   --usk-native-range-thumb-shadow: 1px 1px 0 rgb(var(--y2k-text-rgb) / .24);
@@ -898,7 +901,7 @@
   --usk-native-range-track-shadow: var(--y2k-bevel-recessed);
   --usk-native-range-progress-background: repeating-linear-gradient(90deg, var(--y2k-primary) 0 .5rem, var(--y2k-surface) .5rem .5625rem);
   --usk-native-range-thumb-size: .875rem;
-  --usk-native-range-thumb-background: var(--y2k-surface);
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-range-thumb-border: 1px outset var(--y2k-border);
   --usk-native-range-thumb-radius: 0;
   --usk-native-range-thumb-shadow: var(--y2k-bevel-raised);
@@ -925,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;
@@ -1097,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);
 }
@@ -1117,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);
@@ -1130,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);
 }
 
 /**
@@ -1156,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;
@@ -1379,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;