ui-style-kit-css 2.5.0 → 2.6.0

package/styles/components.css

@@ -1375,9 +1375,9 @@
 :where(.saas-chip-primary, .saas-chip-secondary, .saas-chip-success, .saas-chip-warning, .saas-chip-danger, .bento-chip-primary, .bento-chip-secondary, .bento-chip-success, .bento-chip-warning, .bento-chip-danger, .max-chip-primary, .max-chip-secondary, .max-chip-success, .max-chip-warning, .max-chip-danger, .bau-chip-primary, .bau-chip-secondary, .bau-chip-success, .bau-chip-warning, .bau-chip-danger, .tactile-chip-primary, .tactile-chip-secondary, .tactile-chip-success, .tactile-chip-warning, .tactile-chip-danger, .neo-chip-primary, .neo-chip-secondary, .neo-chip-success, .neo-chip-warning, .neo-chip-danger, .retro-chip-primary, .retro-chip-secondary, .retro-chip-success, .retro-chip-warning, .retro-chip-danger, .brutal-chip-primary, .brutal-chip-secondary, .brutal-chip-success, .brutal-chip-warning, .brutal-chip-danger, .cyber-chip-primary, .cyber-chip-secondary, .cyber-chip-success, .cyber-chip-warning, .cyber-chip-danger, .y2k-chip-primary, .y2k-chip-secondary, .y2k-chip-success, .y2k-chip-warning, .y2k-chip-danger, .rg-chip-primary, .rg-chip-secondary, .rg-chip-success, .rg-chip-warning, .rg-chip-danger, .luxe-chip-primary, .luxe-chip-secondary, .luxe-chip-success, .luxe-chip-warning, .luxe-chip-danger, .organic-chip-primary, .organic-chip-secondary, .organic-chip-success, .organic-chip-warning, .organic-chip-danger, .utility-chip-primary, .utility-chip-secondary, .utility-chip-success, .utility-chip-warning, .utility-chip-danger, .blueprint-chip-primary, .blueprint-chip-secondary, .blueprint-chip-success, .blueprint-chip-warning, .blueprint-chip-danger, .deco-chip-primary, .deco-chip-secondary, .deco-chip-success, .deco-chip-warning, .deco-chip-danger, .clay-chip-primary, .clay-chip-secondary, .clay-chip-success, .clay-chip-warning, .clay-chip-danger, .terminal-chip-primary, .terminal-chip-secondary, .terminal-chip-success, .terminal-chip-warning, .terminal-chip-danger, .paper-chip-primary, .paper-chip-secondary, .paper-chip-success, .paper-chip-warning, .paper-chip-danger, .noir-chip-primary, .noir-chip-secondary, .noir-chip-success, .noir-chip-warning, .noir-chip-danger) { color: var(--usk-native-text); border-color: currentColor; }
 :where(.saas-chip-primary, .bento-chip-primary, .max-chip-primary, .bau-chip-primary, .tactile-chip-primary, .neo-chip-primary, .retro-chip-primary, .brutal-chip-primary, .cyber-chip-primary, .y2k-chip-primary, .rg-chip-primary, .luxe-chip-primary, .organic-chip-primary, .utility-chip-primary, .blueprint-chip-primary, .deco-chip-primary, .clay-chip-primary, .terminal-chip-primary, .paper-chip-primary, .noir-chip-primary) { color: var(--usk-primary-ink, var(--usk-native-primary)); }
 :where(.saas-chip-secondary, .bento-chip-secondary, .max-chip-secondary, .bau-chip-secondary, .tactile-chip-secondary, .neo-chip-secondary, .retro-chip-secondary, .brutal-chip-secondary, .cyber-chip-secondary, .y2k-chip-secondary, .rg-chip-secondary, .luxe-chip-secondary, .organic-chip-secondary, .utility-chip-secondary, .blueprint-chip-secondary, .deco-chip-secondary, .clay-chip-secondary, .terminal-chip-secondary, .paper-chip-secondary, .noir-chip-secondary) { color: var(--usk-secondary-ink, var(--usk-native-text-muted)); }
-:where(.saas-chip-success, .bento-chip-success, .max-chip-success, .bau-chip-success, .tactile-chip-success, .neo-chip-success, .retro-chip-success, .brutal-chip-success, .cyber-chip-success, .y2k-chip-success, .rg-chip-success, .luxe-chip-success, .organic-chip-success, .utility-chip-success, .blueprint-chip-success, .deco-chip-success, .clay-chip-success, .terminal-chip-success, .paper-chip-success, .noir-chip-success) { color: var(--usk-success-ink, var(--usk-native-success)); }
-:where(.saas-chip-warning, .bento-chip-warning, .max-chip-warning, .bau-chip-warning, .tactile-chip-warning, .neo-chip-warning, .retro-chip-warning, .brutal-chip-warning, .cyber-chip-warning, .y2k-chip-warning, .rg-chip-warning, .luxe-chip-warning, .organic-chip-warning, .utility-chip-warning, .blueprint-chip-warning, .deco-chip-warning, .clay-chip-warning, .terminal-chip-warning, .paper-chip-warning, .noir-chip-warning) { color: var(--usk-warning-ink, var(--usk-native-warning)); }
-:where(.saas-chip-danger, .bento-chip-danger, .max-chip-danger, .bau-chip-danger, .tactile-chip-danger, .neo-chip-danger, .retro-chip-danger, .brutal-chip-danger, .cyber-chip-danger, .y2k-chip-danger, .rg-chip-danger, .luxe-chip-danger, .organic-chip-danger, .utility-chip-danger, .blueprint-chip-danger, .deco-chip-danger, .clay-chip-danger, .terminal-chip-danger, .paper-chip-danger, .noir-chip-danger) { color: var(--usk-danger-ink, var(--usk-native-danger)); }
+:where(.saas-chip-success, .bento-chip-success, .max-chip-success, .bau-chip-success, .tactile-chip-success, .neo-chip-success, .retro-chip-success, .brutal-chip-success, .cyber-chip-success, .y2k-chip-success, .rg-chip-success, .luxe-chip-success, .organic-chip-success, .utility-chip-success, .blueprint-chip-success, .deco-chip-success, .clay-chip-success, .terminal-chip-success, .paper-chip-success, .noir-chip-success) { color: var(--usk-success-ink, var(--usk-native-text)); border-color: var(--usk-native-success); }
+:where(.saas-chip-warning, .bento-chip-warning, .max-chip-warning, .bau-chip-warning, .tactile-chip-warning, .neo-chip-warning, .retro-chip-warning, .brutal-chip-warning, .cyber-chip-warning, .y2k-chip-warning, .rg-chip-warning, .luxe-chip-warning, .organic-chip-warning, .utility-chip-warning, .blueprint-chip-warning, .deco-chip-warning, .clay-chip-warning, .terminal-chip-warning, .paper-chip-warning, .noir-chip-warning) { color: var(--usk-warning-ink, var(--usk-native-text)); border-color: var(--usk-native-warning); }
+:where(.saas-chip-danger, .bento-chip-danger, .max-chip-danger, .bau-chip-danger, .tactile-chip-danger, .neo-chip-danger, .retro-chip-danger, .brutal-chip-danger, .cyber-chip-danger, .y2k-chip-danger, .rg-chip-danger, .luxe-chip-danger, .organic-chip-danger, .utility-chip-danger, .blueprint-chip-danger, .deco-chip-danger, .clay-chip-danger, .terminal-chip-danger, .paper-chip-danger, .noir-chip-danger) { color: var(--usk-danger-ink, var(--usk-native-text)); border-color: var(--usk-native-danger); }
 
 :where(.saas-avatar, .bento-avatar, .max-avatar, .bau-avatar, .tactile-avatar, .neo-avatar, .retro-avatar, .brutal-avatar, .cyber-avatar, .y2k-avatar, .rg-avatar, .luxe-avatar, .organic-avatar, .utility-avatar, .blueprint-avatar, .deco-avatar, .clay-avatar, .terminal-avatar, .paper-avatar, .noir-avatar) { position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; inline-size: 2.5rem; block-size: 2.5rem; color: var(--usk-native-on-primary); background: var(--usk-native-primary); border: var(--usk-native-border-width) solid var(--usk-native-border); border-radius: 50%; font-weight: 750; overflow: hidden; }
 :where(.saas-avatar > img, .bento-avatar > img, .max-avatar > img, .bau-avatar > img, .tactile-avatar > img, .neo-avatar > img, .retro-avatar > img, .brutal-avatar > img, .cyber-avatar > img, .y2k-avatar > img, .rg-avatar > img, .luxe-avatar > img, .organic-avatar > img, .utility-avatar > img, .blueprint-avatar > img, .deco-avatar > img, .clay-avatar > img, .terminal-avatar > img, .paper-avatar > img, .noir-avatar > img) { inline-size: 100%; block-size: 100%; object-fit: cover; }

package/styles/cyberpunk.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.cyberpunk {
 :root {
@@ -214,6 +215,13 @@
   --usk-native-primary: var(--cyber-primary);
   --usk-native-primary-hover: var(--cyber-primary-hover);
   --usk-native-on-primary: var(--cyber-on-primary);
+  --usk-native-secondary: var(--cyber-secondary);
+  --usk-native-on-secondary: var(--cyber-on-secondary);
+  --usk-native-accent: var(--cyber-accent);
+  --usk-native-on-accent: var(--cyber-on-accent);
+  --usk-native-on-success: var(--cyber-on-success);
+  --usk-native-on-warning: var(--cyber-on-warning);
+  --usk-native-on-danger: var(--cyber-on-danger);
   --usk-native-focus: var(--cyber-focus);
   --usk-native-success: var(--cyber-success);
   --usk-native-warning: var(--cyber-warning);

package/styles/data-terminal.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.data_terminal {
 :root {
@@ -201,6 +202,13 @@
   --usk-native-primary: var(--terminal-primary);
   --usk-native-primary-hover: var(--terminal-primary-hover);
   --usk-native-on-primary: var(--terminal-on-primary);
+  --usk-native-secondary: var(--terminal-secondary);
+  --usk-native-on-secondary: var(--terminal-on-secondary);
+  --usk-native-accent: var(--terminal-accent);
+  --usk-native-on-accent: var(--terminal-on-accent);
+  --usk-native-on-success: var(--terminal-on-success);
+  --usk-native-on-warning: var(--terminal-on-warning);
+  --usk-native-on-danger: var(--terminal-on-danger);
   --usk-native-focus: var(--terminal-focus);
   --usk-native-success: var(--terminal-success);
   --usk-native-warning: var(--terminal-warning);

package/styles/editorial-luxe.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.editorial_luxe {
 :root {
@@ -201,6 +202,13 @@
   --usk-native-primary: var(--luxe-primary);
   --usk-native-primary-hover: var(--luxe-primary-hover);
   --usk-native-on-primary: var(--luxe-on-primary);
+  --usk-native-secondary: var(--luxe-secondary);
+  --usk-native-on-secondary: var(--luxe-on-secondary);
+  --usk-native-accent: var(--luxe-accent);
+  --usk-native-on-accent: var(--luxe-on-accent);
+  --usk-native-on-success: var(--luxe-on-success);
+  --usk-native-on-warning: var(--luxe-on-warning);
+  --usk-native-on-danger: var(--luxe-on-danger);
   --usk-native-focus: var(--luxe-focus);
   --usk-native-success: var(--luxe-success);
   --usk-native-warning: var(--luxe-warning);

package/styles/industrial-utility.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.industrial_utility {
 :root {
@@ -201,6 +202,13 @@
   --usk-native-primary: var(--utility-primary);
   --usk-native-primary-hover: var(--utility-primary-hover);
   --usk-native-on-primary: var(--utility-on-primary);
+  --usk-native-secondary: var(--utility-secondary);
+  --usk-native-on-secondary: var(--utility-on-secondary);
+  --usk-native-accent: var(--utility-accent);
+  --usk-native-on-accent: var(--utility-on-accent);
+  --usk-native-on-success: var(--utility-on-success);
+  --usk-native-on-warning: var(--utility-on-warning);
+  --usk-native-on-danger: var(--utility-on-danger);
   --usk-native-focus: var(--utility-focus);
   --usk-native-success: var(--utility-success);
   --usk-native-warning: var(--utility-warning);

package/styles/interactive-surface-theme.css

@@ -9,35 +9,35 @@
 :where([data-ui][data-mode]) .interactive-surface {
   --interactive-surface-border-width: 1px;
   /* Preserve the adapter's opaque paint while semantic surfaces may retain preset alpha. */
-  --interactive-surface-bg: rgb(var(--usk-surface-strong-rgb, var(--usk-surface-rgb, 255 255 255)));
-  --interactive-surface-fg: var(--ui-color-text, rgb(var(--usk-text-rgb, 18 18 18)));
-  --interactive-surface-border-color: rgb(var(--usk-border-rgb, 128 128 128) / .72);
-  --interactive-surface-focus-ring-color: var(--ui-focus-color, rgb(var(--usk-focus-rgb, var(--usk-primary-rgb, 72 120 255))));
-  --interactive-surface-radius: .85rem;
+  --interactive-surface-bg: var(--usk-native-surface-strong, rgb(var(--usk-surface-strong-rgb, var(--usk-surface-rgb, 255 255 255))));
+  --interactive-surface-fg: var(--usk-native-text, var(--ui-color-text, rgb(var(--usk-text-rgb, 18 18 18))));
+  --interactive-surface-border-color: var(--usk-native-border, rgb(var(--usk-border-rgb, 128 128 128) / .72));
+  --interactive-surface-focus-ring-color: var(--usk-native-focus, var(--ui-focus-color, rgb(var(--usk-focus-rgb, var(--usk-primary-rgb, 72 120 255)))));
+  --interactive-surface-radius: var(--usk-native-radius, .85rem);
   --interactive-surface-light-icon-color: rgb(var(--usk-warning-rgb, var(--usk-accent-rgb, 255 190 72)));
   --interactive-surface-dark-icon-color: rgb(var(--usk-text-rgb, 18 18 18));
   --interactive-surface-accessibility-icon-color: var(--interactive-surface-focus-ring-color);
   --interactive-surface-light-icon-color-dark: var(--interactive-surface-light-icon-color);
   --interactive-surface-dark-icon-color-dark: var(--interactive-surface-dark-icon-color);
   --interactive-surface-accessibility-icon-color-dark: var(--interactive-surface-accessibility-icon-color);
-  --interactive-surface-variant-primary-bg: var(--ui-color-primary, rgb(var(--usk-primary-rgb, 72 120 255)));
-  --interactive-surface-variant-primary-fg: var(--ui-color-on-primary, rgb(var(--usk-primary-text-rgb, var(--usk-bg-rgb, 255 255 255))));
-  --interactive-surface-variant-primary-border-color: rgb(var(--usk-primary-rgb, 72 120 255));
-  --interactive-surface-variant-secondary-bg: rgb(var(--usk-secondary-rgb, var(--usk-surface-soft-rgb, 96 112 128)));
-  --interactive-surface-variant-secondary-fg: rgb(var(--usk-secondary-text-rgb, var(--usk-text-rgb, 18 18 18)));
-  --interactive-surface-variant-secondary-border-color: rgb(var(--usk-secondary-rgb, 96 112 128));
-  --interactive-surface-variant-accent-bg: rgb(var(--usk-accent-rgb, var(--usk-primary-rgb, 72 120 255)));
-  --interactive-surface-variant-accent-fg: rgb(var(--usk-accent-text-rgb, var(--usk-bg-rgb, 255 255 255)));
-  --interactive-surface-variant-accent-border-color: rgb(var(--usk-accent-rgb, var(--usk-primary-rgb, 72 120 255)));
-  --interactive-surface-variant-subtle-bg: rgb(var(--usk-surface-soft-rgb, var(--usk-surface-rgb, 244 244 244)));
-  --interactive-surface-variant-subtle-fg: var(--ui-color-text, rgb(var(--usk-text-rgb, 18 18 18)));
-  --interactive-surface-variant-subtle-border-color: rgb(var(--usk-border-rgb, 128 128 128) / .64);
-  --interactive-surface-variant-warning-bg: rgb(var(--usk-warning-rgb, 255 190 72));
-  --interactive-surface-variant-warning-fg: rgb(var(--usk-warning-text-rgb, var(--usk-bg-rgb, 18 18 18)));
-  --interactive-surface-variant-warning-border-color: rgb(var(--usk-warning-rgb, 255 190 72));
-  --interactive-surface-variant-danger-bg: rgb(var(--usk-danger-rgb, 210 72 72));
-  --interactive-surface-variant-danger-fg: rgb(var(--usk-danger-text-rgb, 255 255 255));
-  --interactive-surface-variant-danger-border-color: rgb(var(--usk-danger-rgb, 210 72 72));
+  --interactive-surface-variant-primary-bg: var(--usk-native-primary, var(--ui-color-primary, rgb(var(--usk-primary-rgb, 72 120 255))));
+  --interactive-surface-variant-primary-fg: var(--usk-native-on-primary, var(--ui-color-on-primary, rgb(var(--usk-primary-text-rgb, var(--usk-bg-rgb, 255 255 255)))));
+  --interactive-surface-variant-primary-border-color: var(--usk-native-primary, rgb(var(--usk-primary-rgb, 72 120 255)));
+  --interactive-surface-variant-secondary-bg: var(--usk-native-secondary, rgb(var(--usk-secondary-rgb, var(--usk-surface-soft-rgb, 96 112 128))));
+  --interactive-surface-variant-secondary-fg: var(--usk-native-on-secondary, rgb(var(--usk-secondary-text-rgb, var(--usk-text-rgb, 18 18 18))));
+  --interactive-surface-variant-secondary-border-color: var(--usk-native-secondary, rgb(var(--usk-secondary-rgb, 96 112 128)));
+  --interactive-surface-variant-accent-bg: var(--usk-native-accent, rgb(var(--usk-accent-rgb, var(--usk-primary-rgb, 72 120 255))));
+  --interactive-surface-variant-accent-fg: var(--usk-native-on-accent, rgb(var(--usk-accent-text-rgb, var(--usk-bg-rgb, 255 255 255))));
+  --interactive-surface-variant-accent-border-color: var(--usk-native-accent, rgb(var(--usk-accent-rgb, var(--usk-primary-rgb, 72 120 255))));
+  --interactive-surface-variant-subtle-bg: var(--usk-native-surface-soft, rgb(var(--usk-surface-soft-rgb, var(--usk-surface-rgb, 244 244 244))));
+  --interactive-surface-variant-subtle-fg: var(--usk-native-text, var(--ui-color-text, rgb(var(--usk-text-rgb, 18 18 18))));
+  --interactive-surface-variant-subtle-border-color: var(--usk-native-border, rgb(var(--usk-border-rgb, 128 128 128) / .64));
+  --interactive-surface-variant-warning-bg: var(--usk-native-warning, rgb(var(--usk-warning-rgb, 255 190 72)));
+  --interactive-surface-variant-warning-fg: var(--usk-native-on-warning, rgb(var(--usk-warning-text-rgb, var(--usk-bg-rgb, 18 18 18))));
+  --interactive-surface-variant-warning-border-color: var(--usk-native-warning, rgb(var(--usk-warning-rgb, 255 190 72)));
+  --interactive-surface-variant-danger-bg: var(--usk-native-danger, rgb(var(--usk-danger-rgb, 210 72 72)));
+  --interactive-surface-variant-danger-fg: var(--usk-native-on-danger, rgb(var(--usk-danger-text-rgb, 255 255 255)));
+  --interactive-surface-variant-danger-border-color: var(--usk-native-danger, rgb(var(--usk-danger-rgb, 210 72 72)));
   --interactive-surface-level-1-bg: var(--interactive-surface-variant-subtle-bg);
   --interactive-surface-level-1-border-color: var(--interactive-surface-variant-subtle-border-color);
   --interactive-surface-level-1-shadow: 0 1px 2px rgb(var(--usk-bg-rgb, 0 0 0) / .18);

package/styles/maximalist.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.maximalist {
 :root {
@@ -201,6 +202,13 @@
   --usk-native-primary: var(--max-primary);
   --usk-native-primary-hover: var(--max-primary-hover);
   --usk-native-on-primary: var(--max-on-primary);
+  --usk-native-secondary: var(--max-secondary);
+  --usk-native-on-secondary: var(--max-on-secondary);
+  --usk-native-accent: var(--max-accent);
+  --usk-native-on-accent: var(--max-on-accent);
+  --usk-native-on-success: var(--max-on-success);
+  --usk-native-on-warning: var(--max-on-warning);
+  --usk-native-on-danger: var(--max-on-danger);
   --usk-native-focus: var(--max-focus);
   --usk-native-success: var(--max-success);
   --usk-native-warning: var(--max-warning);

package/styles/minimal-saas.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.minimal_saas {
 :root {
@@ -204,6 +205,13 @@
   --usk-native-primary: var(--saas-primary);
   --usk-native-primary-hover: var(--saas-primary-hover);
   --usk-native-on-primary: var(--saas-on-primary);
+  --usk-native-secondary: var(--saas-secondary);
+  --usk-native-on-secondary: var(--saas-on-secondary);
+  --usk-native-accent: var(--saas-accent);
+  --usk-native-on-accent: var(--saas-on-accent);
+  --usk-native-on-success: var(--saas-on-success);
+  --usk-native-on-warning: var(--saas-on-warning);
+  --usk-native-on-danger: var(--saas-on-danger);
   --usk-native-focus: var(--saas-focus);
   --usk-native-success: var(--saas-success);
   --usk-native-warning: var(--saas-warning);

package/styles/native-elements.css

@@ -20,10 +20,17 @@
   --usk-native-primary: rgb(var(--usk-primary-rgb));
   --usk-native-primary-hover: rgb(var(--usk-primary-hover-rgb));
   --usk-native-on-primary: rgb(var(--usk-primary-text-rgb));
+  --usk-native-secondary: rgb(var(--usk-secondary-rgb));
+  --usk-native-on-secondary: rgb(var(--usk-secondary-text-rgb));
+  --usk-native-accent: rgb(var(--usk-accent-rgb));
+  --usk-native-on-accent: rgb(var(--usk-accent-text-rgb));
   --usk-native-focus: rgb(var(--usk-focus-rgb));
   --usk-native-success: rgb(var(--usk-success-rgb));
+  --usk-native-on-success: rgb(var(--usk-success-text-rgb));
   --usk-native-warning: rgb(var(--usk-warning-rgb));
+  --usk-native-on-warning: rgb(var(--usk-warning-text-rgb));
   --usk-native-danger: rgb(var(--usk-danger-rgb));
+  --usk-native-on-danger: rgb(var(--usk-danger-text-rgb));
   --usk-native-link: rgb(var(--usk-link-rgb));
   --usk-native-font-body: inherit;
   --usk-native-font-heading: inherit;

package/styles/neo-noir.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.neo_noir {
 :root {
@@ -201,6 +202,13 @@
   --usk-native-primary: var(--noir-primary);
   --usk-native-primary-hover: var(--noir-primary-hover);
   --usk-native-on-primary: var(--noir-on-primary);
+  --usk-native-secondary: var(--noir-secondary);
+  --usk-native-on-secondary: var(--noir-on-secondary);
+  --usk-native-accent: var(--noir-accent);
+  --usk-native-on-accent: var(--noir-on-accent);
+  --usk-native-on-success: var(--noir-on-success);
+  --usk-native-on-warning: var(--noir-on-warning);
+  --usk-native-on-danger: var(--noir-on-danger);
   --usk-native-focus: var(--noir-focus);
   --usk-native-success: var(--noir-success);
   --usk-native-warning: var(--noir-warning);

package/styles/neumorphism.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.neumorphism {
 :root {
@@ -203,6 +204,13 @@
   --usk-native-primary: var(--neo-primary);
   --usk-native-primary-hover: var(--neo-primary-hover);
   --usk-native-on-primary: var(--neo-on-primary);
+  --usk-native-secondary: var(--neo-secondary);
+  --usk-native-on-secondary: var(--neo-on-secondary);
+  --usk-native-accent: var(--neo-accent);
+  --usk-native-on-accent: var(--neo-on-accent);
+  --usk-native-on-success: var(--neo-on-success);
+  --usk-native-on-warning: var(--neo-on-warning);
+  --usk-native-on-danger: var(--neo-on-danger);
   --usk-native-focus: var(--neo-focus);
   --usk-native-success: var(--neo-success);
   --usk-native-warning: var(--neo-warning);

package/styles/organic-modern.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.organic_modern {
 :root {
@@ -202,6 +203,13 @@
   --usk-native-primary: var(--organic-primary);
   --usk-native-primary-hover: var(--organic-primary-hover);
   --usk-native-on-primary: var(--organic-on-primary);
+  --usk-native-secondary: var(--organic-secondary);
+  --usk-native-on-secondary: var(--organic-on-secondary);
+  --usk-native-accent: var(--organic-accent);
+  --usk-native-on-accent: var(--organic-on-accent);
+  --usk-native-on-success: var(--organic-on-success);
+  --usk-native-on-warning: var(--organic-on-warning);
+  --usk-native-on-danger: var(--organic-on-danger);
   --usk-native-focus: var(--organic-focus);
   --usk-native-success: var(--organic-success);
   --usk-native-warning: var(--organic-warning);

package/styles/paper-editorial.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.paper_editorial {
 :root {
@@ -201,6 +202,13 @@
   --usk-native-primary: var(--paper-primary);
   --usk-native-primary-hover: var(--paper-primary-hover);
   --usk-native-on-primary: var(--paper-on-primary);
+  --usk-native-secondary: var(--paper-secondary);
+  --usk-native-on-secondary: var(--paper-on-secondary);
+  --usk-native-accent: var(--paper-accent);
+  --usk-native-on-accent: var(--paper-on-accent);
+  --usk-native-on-success: var(--paper-on-success);
+  --usk-native-on-warning: var(--paper-on-warning);
+  --usk-native-on-danger: var(--paper-on-danger);
   --usk-native-focus: var(--paper-focus);
   --usk-native-success: var(--paper-success);
   --usk-native-warning: var(--paper-warning);

package/styles/retro-glass.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.retro_glass {
 :root {
@@ -236,6 +237,13 @@
   --usk-native-primary: var(--rg-primary);
   --usk-native-primary-hover: var(--rg-primary-hover);
   --usk-native-on-primary: var(--rg-on-primary);
+  --usk-native-secondary: var(--rg-secondary);
+  --usk-native-on-secondary: var(--rg-on-secondary);
+  --usk-native-accent: var(--rg-accent);
+  --usk-native-on-accent: var(--rg-on-accent);
+  --usk-native-on-success: var(--rg-on-success);
+  --usk-native-on-warning: var(--rg-on-warning);
+  --usk-native-on-danger: var(--rg-on-danger);
   --usk-native-focus: var(--rg-focus);
   --usk-native-success: var(--rg-success);
   --usk-native-warning: var(--rg-warning);

package/styles/retrofuturism.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.retrofuturism {
 :root {
@@ -201,6 +202,13 @@
   --usk-native-primary: var(--retro-primary);
   --usk-native-primary-hover: var(--retro-primary-hover);
   --usk-native-on-primary: var(--retro-on-primary);
+  --usk-native-secondary: var(--retro-secondary);
+  --usk-native-on-secondary: var(--retro-on-secondary);
+  --usk-native-accent: var(--retro-accent);
+  --usk-native-on-accent: var(--retro-on-accent);
+  --usk-native-on-success: var(--retro-on-success);
+  --usk-native-on-warning: var(--retro-on-warning);
+  --usk-native-on-danger: var(--retro-on-danger);
   --usk-native-focus: var(--retro-focus);
   --usk-native-success: var(--retro-success);
   --usk-native-warning: var(--retro-warning);

package/styles/tactile.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.tactile {
 :root {
@@ -207,6 +208,13 @@
   --usk-native-primary: var(--tactile-primary);
   --usk-native-primary-hover: var(--tactile-primary-hover);
   --usk-native-on-primary: var(--tactile-on-primary);
+  --usk-native-secondary: var(--tactile-secondary);
+  --usk-native-on-secondary: var(--tactile-on-secondary);
+  --usk-native-accent: var(--tactile-accent);
+  --usk-native-on-accent: var(--tactile-on-accent);
+  --usk-native-on-success: var(--tactile-on-success);
+  --usk-native-on-warning: var(--tactile-on-warning);
+  --usk-native-on-danger: var(--tactile-on-danger);
   --usk-native-focus: var(--tactile-focus);
   --usk-native-success: var(--tactile-success);
   --usk-native-warning: var(--tactile-warning);

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);