ui-style-kit-css 2.4.1 → 2.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-style-kit-css",
-  "version": "2.4.1",
+  "version": "2.6.0",
   "description": "CSS theme and UI style preset library for accessible websites, dashboards, admin interfaces, and client-facing pages.",
   "style": "dist/ui-style-kit.css",
   "main": "dist/ui-style-kit.css",
@@ -72,6 +72,17 @@
     "./visual/cyberpunk.css": "./dist/visual/cyberpunk.css",
     "./visual/y2k.css": "./dist/visual/y2k.css",
     "./visual/retro-glass.css": "./dist/visual/retro-glass.css",
+    "./presets/minimal-saas.css": "./dist/visual/minimal-saas.css",
+    "./presets/bento.css": "./dist/visual/bento.css",
+    "./presets/maximalist.css": "./dist/visual/maximalist.css",
+    "./presets/bauhaus.css": "./dist/visual/bauhaus.css",
+    "./presets/tactile.css": "./dist/visual/tactile.css",
+    "./presets/neumorphism.css": "./dist/visual/neumorphism.css",
+    "./presets/retrofuturism.css": "./dist/visual/retrofuturism.css",
+    "./presets/brutalism.css": "./dist/visual/brutalism.css",
+    "./presets/cyberpunk.css": "./dist/visual/cyberpunk.css",
+    "./presets/y2k.css": "./dist/visual/y2k.css",
+    "./presets/retro-glass.css": "./dist/visual/retro-glass.css",
     "./dist/ui-style-kit.css": "./dist/ui-style-kit.css",
     "./dist/ui-style-kit.min.css": "./dist/ui-style-kit.min.css",
     "./package.json": "./package.json",
@@ -83,6 +94,14 @@
     "./styles/native-elements.css": "./styles/native-elements.css",
     "./native-elements": "./styles/native-elements.css",
     "./native-elements.css": "./styles/native-elements.css",
+    "./styles/clean-defaults": "./styles/clean-defaults.css",
+    "./styles/clean-defaults.css": "./styles/clean-defaults.css",
+    "./clean-defaults": "./styles/clean-defaults.css",
+    "./clean-defaults.css": "./styles/clean-defaults.css",
+    "./styles/component-composition": "./styles/component-composition.css",
+    "./styles/component-composition.css": "./styles/component-composition.css",
+    "./component-composition": "./styles/component-composition.css",
+    "./component-composition.css": "./styles/component-composition.css",
     "./styles/content-overflow": "./styles/content-overflow.css",
     "./styles/content-overflow.css": "./styles/content-overflow.css",
     "./content-overflow": "./styles/content-overflow.css",
@@ -143,46 +162,55 @@
     "./dist/ui-style-kit.with-bridge.min.css": "./dist/ui-style-kit.with-bridge.min.css",
     "./manifest.json": "./manifest.json",
     "./visual/editorial-luxe.css": "./dist/visual/editorial-luxe.css",
+    "./presets/editorial-luxe.css": "./dist/visual/editorial-luxe.css",
     "./styles/editorial-luxe": "./styles/editorial-luxe.css",
     "./styles/editorial-luxe.css": "./styles/editorial-luxe.css",
     "./editorial-luxe": "./styles/editorial-luxe.css",
     "./editorial-luxe.css": "./styles/editorial-luxe.css",
     "./visual/organic-modern.css": "./dist/visual/organic-modern.css",
+    "./presets/organic-modern.css": "./dist/visual/organic-modern.css",
     "./styles/organic-modern": "./styles/organic-modern.css",
     "./styles/organic-modern.css": "./styles/organic-modern.css",
     "./organic-modern": "./styles/organic-modern.css",
     "./organic-modern.css": "./styles/organic-modern.css",
     "./visual/industrial-utility.css": "./dist/visual/industrial-utility.css",
+    "./presets/industrial-utility.css": "./dist/visual/industrial-utility.css",
     "./styles/industrial-utility": "./styles/industrial-utility.css",
     "./styles/industrial-utility.css": "./styles/industrial-utility.css",
     "./industrial-utility": "./styles/industrial-utility.css",
     "./industrial-utility.css": "./styles/industrial-utility.css",
     "./visual/technical-blueprint.css": "./dist/visual/technical-blueprint.css",
+    "./presets/technical-blueprint.css": "./dist/visual/technical-blueprint.css",
     "./styles/technical-blueprint": "./styles/technical-blueprint.css",
     "./styles/technical-blueprint.css": "./styles/technical-blueprint.css",
     "./technical-blueprint": "./styles/technical-blueprint.css",
     "./technical-blueprint.css": "./styles/technical-blueprint.css",
     "./visual/art-deco.css": "./dist/visual/art-deco.css",
+    "./presets/art-deco.css": "./dist/visual/art-deco.css",
     "./styles/art-deco": "./styles/art-deco.css",
     "./styles/art-deco.css": "./styles/art-deco.css",
     "./art-deco": "./styles/art-deco.css",
     "./art-deco.css": "./styles/art-deco.css",
     "./visual/clay.css": "./dist/visual/clay.css",
+    "./presets/clay.css": "./dist/visual/clay.css",
     "./styles/clay": "./styles/clay.css",
     "./styles/clay.css": "./styles/clay.css",
     "./clay": "./styles/clay.css",
     "./clay.css": "./styles/clay.css",
     "./visual/data-terminal.css": "./dist/visual/data-terminal.css",
+    "./presets/data-terminal.css": "./dist/visual/data-terminal.css",
     "./styles/data-terminal": "./styles/data-terminal.css",
     "./styles/data-terminal.css": "./styles/data-terminal.css",
     "./data-terminal": "./styles/data-terminal.css",
     "./data-terminal.css": "./styles/data-terminal.css",
     "./visual/paper-editorial.css": "./dist/visual/paper-editorial.css",
+    "./presets/paper-editorial.css": "./dist/visual/paper-editorial.css",
     "./styles/paper-editorial": "./styles/paper-editorial.css",
     "./styles/paper-editorial.css": "./styles/paper-editorial.css",
     "./paper-editorial": "./styles/paper-editorial.css",
     "./paper-editorial.css": "./styles/paper-editorial.css",
     "./visual/neo-noir.css": "./dist/visual/neo-noir.css",
+    "./presets/neo-noir.css": "./dist/visual/neo-noir.css",
     "./styles/neo-noir": "./styles/neo-noir.css",
     "./styles/neo-noir.css": "./styles/neo-noir.css",
     "./neo-noir": "./styles/neo-noir.css",
@@ -251,12 +279,12 @@
     "check:ecosystem:minimum": "node scripts/check-ecosystem-packs.mjs --matrix minimum --skip-docs",
     "check:ecosystem:packs": "npm run check:ecosystem:current && npm run check:ecosystem:minimum",
     "test:ecosystem:clean-install": "node --test tests/clean-install-ecosystem-contract.integration.mjs",
-    "release:preflight": "npm run build && node scripts/release-preflight.mjs --layout-repo ../Layout-Style-CSS --interactive-spec interactive-surface-css@1.7.0 --layout-docs-repo ../Layout-Style-CSS",
+    "release:preflight": "npm run build && node scripts/release-preflight.mjs --layout-repo ../Layout-Style-CSS --interactive-repo ../Interactive-Surface-CSS --layout-docs-repo ../Layout-Style-CSS --interactive-docs-repo ../Interactive-Surface-CSS",
     "check": "npm run build && npm run lint && npm run test:unit && npm run check:contrast && npm run check:compat && npm run check:ownership && npm run check:package",
     "pack:dry-run": "npm pack --dry-run --ignore-scripts",
     "prepack": "npm run check",
-    "release:verify": "npm run check && npm run test:e2e && npm run release:preflight -- --candidate-package ui-style-kit-css --skip-clean-install && npm audit --audit-level=moderate && npm run pack:dry-run",
-    "release:verify:full": "npm run check && npm run test:e2e:full && npm run test:axe:full && npm run test:visual:full && npm run test:matrix && npm run release:preflight -- --candidate-package ui-style-kit-css && npm audit --audit-level=moderate && npm run pack:dry-run",
+    "release:verify": "npm run check && npm run test:e2e && npm run release:preflight -- --candidate-package ui-style-kit-css --companion-candidate-root ../Layout-Style-CSS --companion-candidate-root ../Interactive-Surface-CSS --skip-clean-install && npm audit --audit-level=moderate && npm run pack:dry-run",
+    "release:verify:full": "npm run check && npm run test:e2e:full && npm run test:axe:full && npm run test:visual:full && npm run test:matrix && npm run release:preflight -- --candidate-package ui-style-kit-css --companion-candidate-root ../Layout-Style-CSS --companion-candidate-root ../Interactive-Surface-CSS && npm audit --audit-level=moderate && npm run pack:dry-run",
     "prepublishOnly": "npm run release:verify",
     "release:patch": "npm version patch && npm publish",
     "release:minor": "npm version minor && npm publish",

package/styles/art-deco.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.art_deco {
 :root {
@@ -201,6 +202,13 @@
   --usk-native-primary: var(--deco-primary);
   --usk-native-primary-hover: var(--deco-primary-hover);
   --usk-native-on-primary: var(--deco-on-primary);
+  --usk-native-secondary: var(--deco-secondary);
+  --usk-native-on-secondary: var(--deco-on-secondary);
+  --usk-native-accent: var(--deco-accent);
+  --usk-native-on-accent: var(--deco-on-accent);
+  --usk-native-on-success: var(--deco-on-success);
+  --usk-native-on-warning: var(--deco-on-warning);
+  --usk-native-on-danger: var(--deco-on-danger);
   --usk-native-focus: var(--deco-focus);
   --usk-native-success: var(--deco-success);
   --usk-native-warning: var(--deco-warning);
@@ -448,7 +456,7 @@
 .deco-input::placeholder, .deco-textarea::placeholder { color: var(--deco-text-muted); opacity: .82; }
 .deco-input:hover, .deco-textarea:hover, .deco-select:hover { border-color: rgb(var(--deco-primary-rgb) / .58); }
 .deco-input:focus, .deco-textarea:focus, .deco-select:focus { border-color: var(--deco-focus); box-shadow: var(--deco-focus-ring); }
-.deco-help-text { color: var(--deco-text-muted); font-size: .875rem; line-height: 1.45; }
+.deco-help-text { color: var(--deco-text); font-size: .875rem; line-height: 1.45; }
 
 /* Checkbox / Radio */
 .deco-check, .deco-radio { display: inline-flex; align-items: center; gap: var(--deco-space-2); color: var(--deco-text); cursor: pointer; }
@@ -1394,7 +1402,7 @@
 .deco-check input:checked + .deco-check-control::after {
   content: "";
   position: absolute;
-  inset-block-start: 50%;
+  inset-block-start: calc(50% - 1px);
   inset-inline-start: 50%;
   display: block;
   inline-size: .5rem;
@@ -1402,7 +1410,7 @@
   border-block-end: 2px solid currentColor;
   border-inline-start: 2px solid currentColor;
   color: var(--deco-jewel-on);
-  transform: translate(calc(-50% - 5px), calc(-62% - 5px)) rotate(-45deg);
+  transform: translate(-50%, -50%) rotate(-45deg);
   transform-origin: center;
 }
 
@@ -1806,6 +1814,8 @@
   --deco-status-warning: var(--deco-text);
   --deco-status-danger: var(--deco-text);
   --deco-info-rgb: var(--usk-primary-rgb, 0 80 150);
+  --deco-link: var(--deco-text);
+  --usk-native-link: var(--deco-text);
 }
 [data-ui="art-deco"][data-mode] {
   --deco-bg: rgb(var(--deco-bg-rgb));
@@ -1877,7 +1887,8 @@
 .deco-button, .deco-icon-button { position: relative; isolation: isolate; min-height: 36px; min-block-size: 36px; min-inline-size: 0; padding: 8px 14px; border: 0; border-radius: 0; clip-path: none; background: var(--deco-surface); color: var(--deco-text); box-shadow: none; font: 500 12px/1.2 var(--deco-font-control); letter-spacing: 0; text-transform: uppercase; gap: 8px; }
 .deco-button::before, .deco-icon-button::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--deco-metal); border: 0; pointer-events: none; clip-path: polygon(evenodd, 7px 0, calc(100% - 7px) 0, calc(100% - 7px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 7px) calc(100% - 3px), calc(100% - 7px) 100%, 7px 100%, 7px calc(100% - 3px), 0 calc(100% - 3px), 0 3px, 7px 3px, 7px 0, 8px 1px, 8px 4px, 1px 4px, 1px calc(100% - 4px), 8px calc(100% - 4px), 8px calc(100% - 1px), calc(100% - 8px) calc(100% - 1px), calc(100% - 8px) calc(100% - 4px), calc(100% - 1px) calc(100% - 4px), calc(100% - 1px) 4px, calc(100% - 8px) 4px, calc(100% - 8px) 1px, 8px 1px, 7px 0); }
 .deco-button, .deco-icon-button { background-color: transparent; clip-path: var(--deco-step-sm); }
-.deco-button { min-inline-size: 12rem; }
+/** Caps the 12rem Deco action measure when text zoom leaves a narrower flex line. */
+.deco-button { min-inline-size: min(100%, 12rem); max-inline-size: 100%; }
 .deco-button:focus-visible, .deco-icon-button:focus-visible { outline-offset: -6px; }
 .deco-button-primary { background-color: var(--deco-jewel-primary); color: var(--deco-jewel-on); }
 .deco-button-secondary { background-color: var(--deco-jewel-secondary); color: var(--deco-jewel-on); }
@@ -1915,24 +1926,6 @@
 .deco-check, .deco-radio { min-height: 32px; font-size: 12px; gap: 8px; }
 .deco-check input:checked + .deco-check-control, .deco-radio input:checked + .deco-radio-control, .deco-switch input:checked + .deco-switch-track { background: var(--deco-secondary); }
 .deco-check input:checked + .deco-check-control::after { color: var(--deco-on-secondary); }
-/** Keeps prefixed checkbox rasterization centered without generating semantic aliases. */
-:is([class="deco-check"], [class^="deco-check "], [class*=" deco-check "], [class$=" deco-check"]) input:checked + :is([class="deco-check-control"], [class^="deco-check-control "], [class*=" deco-check-control "], [class$=" deco-check-control"])::after { transform: translate(calc(-50% - 5px), calc(-62% + 4px)) rotate(-45deg); }
-
-/**
- * Aligns the stroked checkbox mark with Firefox and WebKit rasterization while
- * preserving Chromium's established pixel center.
- */
-@supports (-moz-appearance: none) {
-  :is([class="deco-check"], [class^="deco-check "], [class*=" deco-check "], [class$=" deco-check"]) input:checked + :is([class="deco-check-control"], [class^="deco-check-control "], [class*=" deco-check-control "], [class$=" deco-check-control"])::after {
-    transform: translate(calc(-50% - 5px), calc(-62% - 5px)) rotate(-45deg);
-  }
-}
-
-@supports (-webkit-hyphens: none) {
-  .deco-check input:checked + .deco-check-control::after {
-    transform: translate(calc(-50% - 5px), calc(-62% + 3px)) rotate(-45deg);
-  }
-}
 .deco-radio input:checked + .deco-radio-control::after { background: var(--deco-on-secondary); }
 .deco-switch { min-height: 32px; }
 .deco-switch-track { width: 40px; height: 22px; inline-size: 40px; block-size: 22px; border-width: 3px; }
@@ -2066,3 +2059,56 @@ dialog.deco-dialog:not([open]) { display: none; }
   font-weight: 800;
   line-height: 1;
 }
+
+/**
+ * Restores the reference action silhouette after shared semantic controls are
+ * promoted. The double metallic keyline and stepped frame remain structural,
+ * while each semantic variant continues to own its accessible paint pairing.
+ */
+[data-ui="art-deco"][data-mode] :is(.deco-button, .deco-icon-button) {
+  border: 3px double var(--deco-metal);
+  border-radius: 0;
+  clip-path: var(--deco-step-sm);
+  box-shadow:
+    inset 0 0 0 1px var(--deco-surface-strong),
+    0 3px 0 var(--deco-metal);
+}
+
+@supports (color: color-mix(in srgb, black, white)) {
+  [data-ui="art-deco"][data-mode] :is(.deco-button, .deco-icon-button) {
+    box-shadow:
+      inset 0 0 0 1px var(--deco-surface-strong),
+      0 3px 0 color-mix(in srgb, var(--deco-metal) 52%, var(--deco-text));
+  }
+}
+
+/**
+ * Uses the system's diamond motif for compact identities while keeping initials,
+ * photographs, and status metadata upright and independently readable.
+ */
+[data-ui="art-deco"][data-mode] .deco-avatar {
+  inline-size: 3rem;
+  block-size: 3rem;
+  overflow: visible;
+  background: var(--deco-jewel-primary);
+  color: var(--deco-jewel-on);
+  border: 3px double var(--deco-metal-bright);
+  border-radius: 0;
+  box-shadow: inset 0 0 0 2px var(--deco-surface-strong);
+  transform: rotate(45deg) scale(.78);
+}
+
+[data-ui="art-deco"][data-mode] .deco-avatar > :where(img, [aria-hidden="true"]) {
+  transform: rotate(-45deg) scale(1.12);
+}
+
+[data-ui="art-deco"][data-mode] .deco-avatar > [role="status"] {
+  inset-block-end: -.15rem;
+  inset-inline-end: -.15rem;
+  color: var(--deco-jewel-on);
+  transform: rotate(-45deg);
+}
+
+[data-ui="art-deco"][data-mode] .deco-avatar-group > * + * {
+  margin-inline-start: .25rem;
+}

package/styles/bauhaus.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");
 
 /** Locally bundled OFL fonts keep workshop typography independent of network access. */
 @font-face { font-family: "Bauhaus Barlow"; src: url("./assets/bauhaus-barlow.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
@@ -214,6 +215,13 @@
   --usk-native-primary: var(--bau-primary);
   --usk-native-primary-hover: var(--bau-primary-hover);
   --usk-native-on-primary: var(--bau-on-primary);
+  --usk-native-secondary: var(--bau-secondary);
+  --usk-native-on-secondary: var(--bau-on-secondary);
+  --usk-native-accent: var(--bau-accent);
+  --usk-native-on-accent: var(--bau-on-accent);
+  --usk-native-on-success: var(--bau-on-success);
+  --usk-native-on-warning: var(--bau-on-warning);
+  --usk-native-on-danger: var(--bau-on-danger);
   --usk-native-focus: var(--bau-focus);
   --usk-native-success: var(--bau-success);
   --usk-native-warning: var(--bau-warning);

package/styles/bento.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");
 
 @font-face {
   font-family: "Bento Manrope";
@@ -211,6 +212,13 @@
   --usk-native-primary: var(--bento-primary);
   --usk-native-primary-hover: var(--bento-primary-hover);
   --usk-native-on-primary: var(--bento-on-primary);
+  --usk-native-secondary: var(--bento-secondary);
+  --usk-native-on-secondary: var(--bento-on-secondary);
+  --usk-native-accent: var(--bento-accent);
+  --usk-native-on-accent: var(--bento-on-accent);
+  --usk-native-on-success: var(--bento-on-success);
+  --usk-native-on-warning: var(--bento-on-warning);
+  --usk-native-on-danger: var(--bento-on-danger);
   --usk-native-focus: var(--bento-focus);
   --usk-native-success: var(--bento-success);
   --usk-native-warning: var(--bento-warning);
@@ -882,8 +890,8 @@
 
 @layer ui-style-kit.bento {
 /* Keeps semantic field states above preset-specific material paint. */
-.bento-input[aria-invalid="true"], .bento-textarea[aria-invalid="true"], .bento-select[aria-invalid="true"] { border-color: var(--bento-danger); box-shadow: 0 0 0 2px rgb(var(--bento-danger-rgb) / .18); }
-.bento-input[readonly], .bento-textarea[readonly] { border-style: dashed; filter: saturate(.72); opacity: .78; }
+[data-ui="bento"][data-mode] :is(.bento-input, .bento-textarea, .bento-select)[aria-invalid="true"] { border-color: var(--bento-danger); box-shadow: 0 0 0 2px rgb(var(--bento-danger-rgb) / .18); }
+[data-ui="bento"][data-mode] :is(.bento-input, .bento-textarea)[readonly] { border-style: dashed; filter: saturate(.72); opacity: .78; }
 }
 
 @layer ui-style-kit.bento {
@@ -1199,7 +1207,7 @@
 [data-ui=bento][data-mode] .bento-sheet[data-mode="dark"] .bento-hero-art.is-dark { display: block; }
 [data-ui=bento][data-mode] .bento-sheet[data-mode="dark"] .bento-hero-art.is-dark { height: 300px; right: -10px; top: 40px; width: 300px; }
 
-[data-ui=bento][data-mode] .bento-button {
+[data-ui=bento][data-mode] :is(.bento-button, .bento-icon-button) {
   align-items: center;
   background: var(--bento-mosaic-panel-soft);
   border: 1px solid var(--bento-mosaic-line);
@@ -1479,10 +1487,10 @@
   --bento-fallback-primary-rgb: 49 87 220;
   --bento-fallback-primary-hover-rgb: 70 99 212;
   --bento-fallback-primary-text-rgb: 255 255 255;
-  --bento-fallback-secondary-rgb: 117 108 228;
+  --bento-fallback-secondary-rgb: 105 94 220;
   --bento-fallback-secondary-hover-rgb: 91 82 201;
   --bento-fallback-secondary-text-rgb: 255 255 255;
-  --bento-fallback-accent-rgb: 117 108 228;
+  --bento-fallback-accent-rgb: 105 94 220;
   --bento-fallback-accent-text-rgb: 255 255 255;
   --bento-fallback-success-rgb: 53 168 103;
   --bento-fallback-success-text-rgb: 0 0 0;
@@ -1520,7 +1528,12 @@
   --bento-fallback-focus-rgb: 122 107 233;
   --bento-success-ink: var(--bento-success);
 }
-[data-ui="bento"][data-mode] {
+/**
+ * Keeps Soft Mosaic reference overrides inside the retained reference sheet.
+ * The canonical Bento and native-element tokens continue to use the public
+ * preset material outside that specimen.
+ */
+[data-ui="bento"][data-mode] .bento-sheet {
   --bento-panel-alpha: 1;
   --bento-panel-soft-alpha: 1;
   --bento-border-alpha: 1;

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

package/styles/clay.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.clay {
 /** Locally bundled rounded headings; body text retains the compact system face. */
@@ -57,7 +58,7 @@
   --clay-fallback-text-rgb: 43 36 25;
   --clay-fallback-text-muted-rgb: 107 97 78;
   --clay-fallback-border-rgb: 215 198 167;
-  --clay-fallback-primary-rgb: 140 106 61;
+  --clay-fallback-primary-rgb: 115 75 32;
   --clay-fallback-primary-hover-rgb: 112 83 47;
   --clay-fallback-primary-text-rgb: 255 255 255;
   --clay-fallback-secondary-rgb: 95 118 85;
@@ -69,7 +70,7 @@
   --clay-fallback-success-text-rgb: 255 255 255;
   --clay-fallback-warning-rgb: 166 107 0;
   --clay-fallback-warning-text-rgb: 0 0 0;
-  --clay-fallback-danger-rgb: 174 74 63;
+  --clay-fallback-danger-rgb: 148 48 42;
   --clay-fallback-danger-text-rgb: 255 255 255;
   --clay-fallback-link-rgb: 112 83 47;
   --clay-fallback-focus-rgb: 201 151 74;
@@ -209,6 +210,13 @@
   --usk-native-primary: var(--clay-primary);
   --usk-native-primary-hover: var(--clay-primary-hover);
   --usk-native-on-primary: var(--clay-on-primary);
+  --usk-native-secondary: var(--clay-secondary);
+  --usk-native-on-secondary: var(--clay-on-secondary);
+  --usk-native-accent: var(--clay-accent);
+  --usk-native-on-accent: var(--clay-on-accent);
+  --usk-native-on-success: var(--clay-on-success);
+  --usk-native-on-warning: var(--clay-on-warning);
+  --usk-native-on-danger: var(--clay-on-danger);
   --usk-native-focus: var(--clay-focus);
   --usk-native-success: var(--clay-success);
   --usk-native-warning: var(--clay-warning);
@@ -828,7 +836,7 @@
   --clay-thumb-material: #fff;
   --clay-pigment-base: #000;
   --clay-pigment-share: 100%;
-  --clay-pigment-ink: #fff;
+  --clay-pigment-ink: #000;
   --clay-tooltip-material: #000;
   --clay-tooltip-ink: #fff;
   --clay-label-relief: none;