ui-style-kit-css 2.4.1 → 2.6.0

package/styles/technical-blueprint.css

@@ -14,6 +14,7 @@
 @import url("./theme-colors.css");
 @import url("./native-elements.css");
 @import url("./content-overflow.css");
+@import url("./clean-defaults.css");
 
 @layer ui-style-kit.technical_blueprint {
 :root {
@@ -200,6 +201,13 @@
   --usk-native-primary: var(--blueprint-primary);
   --usk-native-primary-hover: var(--blueprint-primary-hover);
   --usk-native-on-primary: var(--blueprint-on-primary);
+  --usk-native-secondary: var(--blueprint-secondary);
+  --usk-native-on-secondary: var(--blueprint-on-secondary);
+  --usk-native-accent: var(--blueprint-accent);
+  --usk-native-on-accent: var(--blueprint-on-accent);
+  --usk-native-on-success: var(--blueprint-on-success);
+  --usk-native-on-warning: var(--blueprint-on-warning);
+  --usk-native-on-danger: var(--blueprint-on-danger);
   --usk-native-focus: var(--blueprint-focus);
   --usk-native-success: var(--blueprint-success);
   --usk-native-warning: var(--blueprint-warning);
@@ -310,6 +318,13 @@
   --usk-native-primary: var(--blueprint-primary);
   --usk-native-primary-hover: var(--blueprint-primary-hover);
   --usk-native-on-primary: var(--blueprint-on-primary);
+  --usk-native-secondary: var(--blueprint-secondary);
+  --usk-native-on-secondary: var(--blueprint-on-secondary);
+  --usk-native-accent: var(--blueprint-accent);
+  --usk-native-on-accent: var(--blueprint-on-accent);
+  --usk-native-on-success: var(--blueprint-on-success);
+  --usk-native-on-warning: var(--blueprint-on-warning);
+  --usk-native-on-danger: var(--blueprint-on-danger);
   --usk-native-focus: var(--blueprint-focus);
   --usk-native-success: var(--blueprint-success);
   --usk-native-warning: var(--blueprint-warning);
@@ -1225,7 +1240,7 @@
 .blueprint-stepper::before { content: ""; position: absolute; inset-inline: 12%; inset-block-start: 12px; block-size: 1px; background: var(--blueprint-line-strong); }
 /** Reset native list spacing so marker centers remain on the connector axis. */
 .blueprint-step { position: relative; flex: 1; margin-block: 0; color: var(--blueprint-text-soft); text-align: center; font: 12px/1.4 var(--blueprint-font-mono); }
-.blueprint-step b { display: flex; align-items: center; justify-content: center; inline-size: 24px; block-size: 24px; margin: 0 auto 8px; background: var(--blueprint-bg); border: 1px solid var(--blueprint-line-strong); }
+.blueprint-step b { display: flex; align-items: center; justify-content: center; box-sizing: border-box; inline-size: 24px; block-size: 24px; margin: 0 auto 8px; background: var(--blueprint-bg); border: 1px solid var(--blueprint-line-strong); }
 .blueprint-step.is-complete b { background: var(--blueprint-fill); color: var(--blueprint-fill-ink); border-color: var(--blueprint-primary); }
 .blueprint-step.is-active b { color: var(--usk-primary-ink, var(--blueprint-primary)); border: 2px solid var(--blueprint-primary); }
 .blueprint-alert { display: flex; align-items: center; gap: 8px; min-block-size: 40px; padding: 8px; border: 1px solid var(--blueprint-primary); border-radius: 0; background: transparent; color: var(--blueprint-text-soft); box-shadow: none; font: 14px/1.4 var(--blueprint-font-body); }

package/styles/theme-colors.css

@@ -24,6 +24,9 @@
 }
 
 :where([data-ui][data-mode="dark"], [data-ui][data-mode="contrast"]) {
+  /* Foreground-only semantic accents must never fall back to a fill color. */
+  --usk-primary-ink: rgb(var(--usk-link-rgb));
+  --usk-accent-ink: rgb(var(--usk-link-rgb));
   --usk-border-text-mix: 0%;
   --usk-border-min-alpha: 0;
 }

package/styles/y2k.css

@@ -15,6 +15,7 @@
 @import url("./theme-colors.css");
 @import url("./native-elements.css");
 @import url("./content-overflow.css");
+@import url("./clean-defaults.css");
 
 @layer ui-style-kit.y2k {
 :root {
@@ -222,6 +223,13 @@
   --usk-native-primary: var(--y2k-primary);
   --usk-native-primary-hover: var(--y2k-primary-hover);
   --usk-native-on-primary: var(--y2k-on-primary);
+  --usk-native-secondary: var(--y2k-secondary);
+  --usk-native-on-secondary: var(--y2k-on-secondary);
+  --usk-native-accent: var(--y2k-accent);
+  --usk-native-on-accent: var(--y2k-on-accent);
+  --usk-native-on-success: var(--y2k-on-success);
+  --usk-native-on-warning: var(--y2k-on-warning);
+  --usk-native-on-danger: var(--y2k-on-danger);
   --usk-native-focus: var(--y2k-focus);
   --usk-native-success: var(--y2k-success);
   --usk-native-warning: var(--y2k-warning);
@@ -823,8 +831,8 @@
 
 @layer ui-style-kit.y2k {
 /* Keeps semantic field states above preset-specific material paint. */
-.y2k-input[aria-invalid="true"], .y2k-textarea[aria-invalid="true"], .y2k-select[aria-invalid="true"] { border-color: var(--y2k-danger); box-shadow: 0 0 0 2px rgb(var(--y2k-danger-rgb) / .2); }
-.y2k-input[readonly], .y2k-textarea[readonly] { border-style: dashed; filter: saturate(.72); opacity: .78; }
+[data-ui="y2k"][data-mode] :is(.y2k-input, .y2k-textarea, .y2k-select)[aria-invalid="true"] { border-color: var(--y2k-danger); box-shadow: 0 0 0 2px rgb(var(--y2k-danger-rgb) / .2); }
+[data-ui="y2k"][data-mode] :is(.y2k-input, .y2k-textarea)[readonly] { border-style: dashed; filter: saturate(.72); opacity: .78; }
 /* Restores semantic action paint after identity-specific geometry. */
 .y2k-button-primary { background: linear-gradient(180deg, rgb(var(--y2k-surface-strong-rgb) / .46), transparent 52%), var(--y2k-primary); color: var(--y2k-on-primary); border-color: var(--y2k-primary); }
 .y2k-button-secondary { background: linear-gradient(180deg, rgb(var(--y2k-surface-strong-rgb) / .42), transparent 52%), var(--y2k-secondary); color: var(--y2k-on-secondary); border-color: var(--y2k-secondary); }
@@ -1413,7 +1421,7 @@
   min-block-size: 1.375rem;
   padding: .125rem .375rem;
   color: var(--y2k-text);
-  background: var(--y2k-surface);
+  background-color: var(--y2k-surface);
   border: 1px inset var(--y2k-border);
   border-radius: 0;
   box-shadow: var(--y2k-bevel-recessed);
@@ -1487,3 +1495,17 @@
   outline: 2px dotted #d21212;
   outline-offset: 2px;
 }
+
+/** Keeps unclassed invalid fields visibly semantic after the late bevel reset. */
+[data-ui="y2k"][data-mode] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select)[aria-invalid="true"] {
+  border-color: var(--y2k-danger);
+  box-shadow: var(--y2k-bevel-recessed), 0 0 0 2px rgb(var(--y2k-danger-rgb) / .24);
+}
+
+/** Keeps read-only native fields distinct from invalid and editable controls. */
+[data-ui="y2k"][data-mode] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea)[readonly] {
+  background-color: var(--y2k-surface-soft);
+  border-style: dashed;
+  filter: saturate(.72);
+  opacity: .78;
+}