@rokkit/themes 1.1.15 → 1.1.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/themes",
-  "version": "1.1.15",
+  "version": "1.1.17",
   "description": "Theme styles for @rokkit/ui components",
   "repository": {
     "type": "git",
@@ -10,103 +10,105 @@
   "main": "./src/index.js",
   "exports": {
     ".": {
-      "style": "./src/index.css",
+      "style": "./dist/index.css",
       "import": "./src/index.js",
       "default": "./src/index.js"
     },
     "./styles": {
-    "style": "./src/index.css",
-    "default": "./src/index.css"
+    "style": "./dist/index.css",
+    "default": "./dist/index.css"
   },
   "./base.css": {
-  "style": "./src/base/index.css",
-  "default": "./src/base/index.css"
+  "style": "./dist/base.css",
+  "default": "./dist/base.css"
 },
 "./rokkit.css": {
-"style": "./src/rokkit/index.css",
-"default": "./src/rokkit/index.css"
+"style": "./dist/rokkit.css",
+"default": "./dist/rokkit.css"
 },
 "./minimal.css": {
-"style": "./src/minimal/index.css",
-"default": "./src/minimal/index.css"
+"style": "./dist/minimal.css",
+"default": "./dist/minimal.css"
 },
 "./material.css": {
-"style": "./src/material/index.css",
-"default": "./src/material/index.css"
+"style": "./dist/material.css",
+"default": "./dist/material.css"
 },
 "./frosted.css": {
-"style": "./src/frosted/index.css",
-"default": "./src/frosted/index.css"
+"style": "./dist/frosted.css",
+"default": "./dist/frosted.css"
 },
 "./zen-sumi.css": {
-"style": "./src/zen-sumi/index.css",
-"default": "./src/zen-sumi/index.css"
+"style": "./dist/zen-sumi.css",
+"default": "./dist/zen-sumi.css"
 },
 "./base": {
-"style": "./src/base/index.css",
-"default": "./src/base/index.css"
+"style": "./dist/base.css",
+"default": "./dist/base.css"
 },
 "./base/*": {
-"style": "./src/base/*.css",
-"default": "./src/base/*.css"
+"style": "./dist/base/*.css",
+"default": "./dist/base/*.css"
 },
 "./rokkit": {
-"style": "./src/rokkit/index.css",
-"default": "./src/rokkit/index.css"
+"style": "./dist/rokkit.css",
+"default": "./dist/rokkit.css"
 },
 "./rokkit/*": {
-"style": "./src/rokkit/*.css",
-"default": "./src/rokkit/*.css"
+"style": "./dist/rokkit/*.css",
+"default": "./dist/rokkit/*.css"
 },
 "./minimal": {
-"style": "./src/minimal/index.css",
-"default": "./src/minimal/index.css"
+"style": "./dist/minimal.css",
+"default": "./dist/minimal.css"
 },
 "./minimal/*": {
-"style": "./src/minimal/*.css",
-"default": "./src/minimal/*.css"
+"style": "./dist/minimal/*.css",
+"default": "./dist/minimal/*.css"
 },
 "./material": {
-"style": "./src/material/index.css",
-"default": "./src/material/index.css"
+"style": "./dist/material.css",
+"default": "./dist/material.css"
 },
 "./material/*": {
-"style": "./src/material/*.css",
-"default": "./src/material/*.css"
+"style": "./dist/material/*.css",
+"default": "./dist/material/*.css"
 },
 "./frosted": {
-"style": "./src/frosted/index.css",
-"default": "./src/frosted/index.css"
+"style": "./dist/frosted.css",
+"default": "./dist/frosted.css"
 },
 "./frosted/*": {
-"style": "./src/frosted/*.css",
-"default": "./src/frosted/*.css"
+"style": "./dist/frosted/*.css",
+"default": "./dist/frosted/*.css"
 },
 "./zen-sumi": {
-"style": "./src/zen-sumi/index.css",
-"default": "./src/zen-sumi/index.css"
+"style": "./dist/zen-sumi.css",
+"default": "./dist/zen-sumi.css"
 },
 "./zen-sumi/*": {
-"style": "./src/zen-sumi/*.css",
-"default": "./src/zen-sumi/*.css"
+"style": "./dist/zen-sumi/*.css",
+"default": "./dist/zen-sumi/*.css"
 }
 },
 "files": [
   "src",
+  "dist",
   "build.mjs",
   "README.md",
   "LICENSE"
 ],
 "scripts": {
-  "prepublishOnly": "cp ../../LICENSE .",
+  "prepare": "bun run build.mjs",
+  "prepublishOnly": "bun run build.mjs && cp ../../LICENSE .",
   "postpublish": "rm -f LICENSE",
   "build": "bun run build.mjs"
 },
 "dependencies": {
-  "@rokkit/core": "1.1.15"
+  "@rokkit/core": "1.1.17"
 },
 "devDependencies": {
-  "@rokkit/unocss": "1.1.15",
+  "@rokkit/unocss": "1.1.17",
   "magic-string": "^0.30.21",
   "unocss": "^66.5.1"
 },

package/src/frosted/button.css

@@ -13,7 +13,8 @@
 [data-style='frosted'] [data-button]:not([data-style])[data-variant='default'],
 [data-style='frosted'] [data-button][data-style='default']:not([data-variant]),
 [data-style='frosted'] [data-button]:not([data-style]):not([data-variant]) {
-  @apply text-ink border backdrop-blur-xl bg-paper-edge/28;
+  @apply text-ink border backdrop-blur-xl;
+  background-color: color-mix(in oklch, var(--paper-edge) 28%, transparent);
   border-color: rgba(255, 255, 255, 0.22);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.2),
@@ -122,7 +123,15 @@
 
 [data-style='frosted'] [data-button][data-style='gradient'][data-variant='default'],
 [data-style='frosted'] [data-button][data-style='gradient']:not([data-variant]) {
-  @apply from-paper-mute/70 to-paper-soft/50 text-ink bg-gradient-to-br backdrop-blur-xl;
+  /* paper-* are named-token shortcuts, not wind3 colors, so they silently drop as
+     gradient stops under @apply (unlike primary/accent/danger below). Write the
+     translucent gradient directly. See rokkit/button.css for the same workaround. */
+  background: linear-gradient(
+    to bottom right,
+    color-mix(in oklch, var(--paper-mute) 70%, transparent),
+    color-mix(in oklch, var(--paper-soft) 50%, transparent)
+  );
+  @apply text-ink backdrop-blur-xl;
   border-color: rgba(255, 255, 255, 0.2);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
 }
@@ -191,7 +200,7 @@
 
 [data-style='frosted'] [data-button][data-style='default']:hover:not(:disabled):not([data-disabled]),
 [data-style='frosted'] [data-button]:not([data-style]):hover:not(:disabled):not([data-disabled]) {
-  @apply bg-paper-edge/38;
+  background-color: color-mix(in oklch, var(--paper-edge) 38%, transparent);
   border-color: rgba(255, 255, 255, 0.3);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.28),

package/src/frosted/card.css

@@ -10,7 +10,8 @@
    ============================================================================= */
 
 [data-style='frosted'] [data-card] {
-  @apply text-ink border shadow-lg backdrop-blur-xl bg-paper-mute/30;
+  @apply text-ink border shadow-lg backdrop-blur-xl;
+  background-color: color-mix(in oklch, var(--paper-mute) 30%, transparent);
   border-color: rgba(255, 255, 255, 0.18);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.22),
@@ -27,7 +28,7 @@
 }
 
 [data-style='frosted'] [data-card][data-card-interactive]:hover {
-  @apply bg-paper-mute/42;
+  background-color: color-mix(in oklch, var(--paper-mute) 42%, transparent);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.28),
     0 16px 40px rgba(0, 0, 0, 0.14);
@@ -121,6 +122,7 @@
 
 /* Tertiary — barely-there frosted glass */
 [data-style='frosted'] [data-card][data-variant='tertiary'] {
-  @apply text-ink-mute border backdrop-blur-xl bg-paper-mute/16;
+  @apply text-ink-mute border backdrop-blur-xl;
+  background-color: color-mix(in oklch, var(--paper-mute) 16%, transparent);
   border-color: rgba(255, 255, 255, 0.12);
 }

package/src/frosted/command-palette.css

@@ -10,7 +10,8 @@
 }
 
 [data-style='frosted'] [data-command-palette] {
-	@apply border backdrop-blur-2xl bg-paper-mute/45;
+	@apply border backdrop-blur-2xl;
+	background-color: color-mix(in oklch, var(--paper-mute) 45%, transparent);
 	border-color: rgba(255, 255, 255, 0.2);
 	box-shadow:
 		inset 0 1px 0 rgba(255, 255, 255, 0.2),

package/src/frosted/dropdown.css

@@ -5,13 +5,15 @@
  */
 
 [data-style='frosted'] [data-dropdown-trigger] {
-  @apply text-ink-mute border bg-none backdrop-blur-xl bg-paper-mute/25;
+  @apply text-ink-mute border bg-none backdrop-blur-xl;
+  background-color: color-mix(in oklch, var(--paper-mute) 25%, transparent);
   border-color: rgba(255, 255, 255, 0.2);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
 }
 
 [data-style='frosted'] [data-dropdown-trigger]:hover:not(:disabled) {
-  @apply text-ink bg-none bg-paper-mute/36;
+  @apply text-ink bg-none;
+  background-color: color-mix(in oklch, var(--paper-mute) 36%, transparent);
   border-color: rgba(255, 255, 255, 0.28);
 }
 
@@ -34,7 +36,8 @@
 }
 
 [data-style='frosted'] [data-dropdown-panel] {
-  @apply border bg-none shadow-xl backdrop-blur-2xl bg-paper-mute/45;
+  @apply border bg-none shadow-xl backdrop-blur-2xl;
+  background-color: color-mix(in oklch, var(--paper-mute) 45%, transparent);
   border-color: rgba(255, 255, 255, 0.2);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.2),

package/src/frosted/floating-action.css

@@ -18,11 +18,12 @@
 }
 
 [data-style='frosted'] [data-fab-trigger]:focus-visible {
-  @apply ring-ink-soft/40 ring-2 outline-none;
+  @apply ring-2 outline-none;
+  --un-ring-color: color-mix(in oklch, var(--ink-soft) 40%, transparent);
 }
 
 [data-style='frosted'] [data-fab][data-open='true'] [data-fab-trigger] {
-  @apply bg-ink-soft/80;
+  background-color: color-mix(in oklch, var(--ink-soft) 80%, transparent);
   transform: rotate(45deg);
 }
 
@@ -31,15 +32,19 @@
    ============================================================================= */
 
 [data-style='frosted'] [data-fab-item] {
-  @apply text-ink bg-paper-soft/70 border-ink-soft/20 border shadow-md backdrop-blur-md;
+  @apply text-ink border shadow-md backdrop-blur-md;
+  background-color: color-mix(in oklch, var(--paper-soft) 70%, transparent);
+  border-color: color-mix(in oklch, var(--ink-soft) 20%, transparent);
 }
 
 [data-style='frosted'] [data-fab-item]:hover:not(:disabled) {
-  @apply text-ink bg-paper-mute/80 shadow-lg;
+  @apply text-ink shadow-lg;
+  background-color: color-mix(in oklch, var(--paper-mute) 80%, transparent);
 }
 
 [data-style='frosted'] [data-fab-item]:focus-visible {
-  @apply ring-ink-soft/40 ring-2 outline-none;
+  @apply ring-2 outline-none;
+  --un-ring-color: color-mix(in oklch, var(--ink-soft) 40%, transparent);
 }
 
 /* Item icon */

package/src/frosted/floating-navigation.css

@@ -9,7 +9,9 @@
    ============================================================================= */
 
 [data-style='frosted'] [data-floating-nav] {
-  @apply bg-paper-soft/70 border-ink-soft/20 border shadow-xl backdrop-blur-xl;
+  @apply border shadow-xl backdrop-blur-xl;
+  background-color: color-mix(in oklch, var(--paper-soft) 70%, transparent);
+  border-color: color-mix(in oklch, var(--ink-soft) 20%, transparent);
 }
 
 /* =============================================================================
@@ -41,7 +43,8 @@
 }
 
 [data-style='frosted'] [data-floating-nav-item]:hover {
-  @apply text-ink bg-paper-mute/50;
+  @apply text-ink;
+  background-color: color-mix(in oklch, var(--paper-mute) 50%, transparent);
 }
 
 [data-style='frosted'] [data-floating-nav-item][data-active] {
@@ -49,7 +52,8 @@
 }
 
 [data-style='frosted'] [data-floating-nav-item]:focus-visible {
-  @apply ring-ink-soft/40 ring-2 outline-none;
+  @apply ring-2 outline-none;
+  --un-ring-color: color-mix(in oklch, var(--ink-soft) 40%, transparent);
 }
 
 /* Icon */

package/src/frosted/input.css

@@ -28,14 +28,15 @@
 
 /* Separator */
 [data-style='frosted'] [data-form-separator] {
-  @apply border-ink-soft/20;
+  border-color: color-mix(in oklch, var(--ink-soft) 20%, transparent);
 }
 
 /* Input root: frosted glass container — p-0.5 gives a small gap between border and content.
  * No backdrop-blur here: it creates a stacking context that traps select dropdowns.
  * The semi-transparent background + specular border provides the liquid glass look. */
 [data-style='frosted'] [data-input-root] {
-  @apply flex items-center rounded-md border p-0.5 transition-all bg-paper-mute/22;
+  @apply flex items-center rounded-md border p-0.5 transition-all;
+  background-color: color-mix(in oklch, var(--paper-mute) 22%, transparent);
   background-image: none;
   border-color: rgba(255, 255, 255, 0.2);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
@@ -46,7 +47,7 @@
 }
 
 [data-style='frosted'] [data-input-root]:focus-within {
-  @apply bg-paper-mute/28;
+  background-color: color-mix(in oklch, var(--paper-mute) 28%, transparent);
   background-image: none;
   border-color: rgba(255, 255, 255, 0.35);
   box-shadow:

package/src/frosted/list.css

@@ -9,7 +9,8 @@
    ============================================================================= */
 
 [data-style='frosted'] [data-list]:focus-within {
-  @apply ring-ink-soft/40 rounded ring-1;
+  @apply rounded ring-1;
+  --un-ring-color: color-mix(in oklch, var(--ink-soft) 40%, transparent);
 }
 
 /* =============================================================================
@@ -28,12 +29,14 @@
 /* Hover and focus (keyboard navigation) */
 [data-style='frosted'] [data-list] [data-list-item]:hover:not(:disabled):not([data-disabled='true']),
 [data-style='frosted'] [data-list] [data-list-item]:focus:not(:disabled):not([data-disabled='true']) {
-  @apply bg-paper-mute/15 text-ink bg-none outline-none;
+  @apply text-ink bg-none outline-none;
+  background-color: color-mix(in oklch, var(--paper-mute) 15%, transparent);
 }
 
 /* Active state — muted when list not focused */
 [data-style='frosted'] [data-list] [data-list-item][data-active='true'] {
-  @apply bg-paper-mute/15 text-primary bg-none;
+  @apply text-primary bg-none;
+  background-color: color-mix(in oklch, var(--paper-mute) 15%, transparent);
 }
 
 /* Active state — full highlight when list has focus */
@@ -98,7 +101,8 @@
 }
 
 [data-style='frosted'] [data-list] [data-list-item] [data-item-badge] {
-  @apply bg-paper-mute/15 text-ink-soft bg-none;
+  @apply text-ink-soft bg-none;
+  background-color: color-mix(in oklch, var(--paper-mute) 15%, transparent);
 }
 
 [data-style='frosted'] [data-list] [data-list-item][data-active='true'] [data-item-badge] {
@@ -115,7 +119,8 @@
 
 [data-style='frosted'] [data-list] [data-list-group]:hover:not(:disabled),
 [data-style='frosted'] [data-list] [data-list-group]:focus:not(:disabled) {
-  @apply bg-paper-mute/25 text-ink-mute bg-none;
+  @apply text-ink-mute bg-none;
+  background-color: color-mix(in oklch, var(--paper-mute) 25%, transparent);
 }
 
 /* =============================================================================
@@ -123,7 +128,8 @@
    ============================================================================= */
 
 [data-style='frosted'] [data-list] [data-list-separator] {
-  @apply bg-ink-soft/20 bg-none;
+  @apply bg-none;
+  background-color: color-mix(in oklch, var(--ink-soft) 20%, transparent);
 }
 
 /* =============================================================================

package/src/frosted/menu.css

@@ -9,13 +9,15 @@
    ============================================================================= */
 
 [data-style='frosted'] [data-menu-trigger] {
-  @apply text-ink-mute border bg-none backdrop-blur-xl bg-paper-mute/25;
+  @apply text-ink-mute border bg-none backdrop-blur-xl;
+  background-color: color-mix(in oklch, var(--paper-mute) 25%, transparent);
   border-color: rgba(255, 255, 255, 0.2);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
 }
 
 [data-style='frosted'] [data-menu-trigger]:hover:not(:disabled) {
-  @apply text-ink bg-none bg-paper-mute/36;
+  @apply text-ink bg-none;
+  background-color: color-mix(in oklch, var(--paper-mute) 36%, transparent);
   border-color: rgba(255, 255, 255, 0.28);
 }
 
@@ -47,7 +49,8 @@
    ============================================================================= */
 
 [data-style='frosted'] [data-menu-dropdown] {
-  @apply border bg-none shadow-xl backdrop-blur-2xl bg-paper-mute/45;
+  @apply border bg-none shadow-xl backdrop-blur-2xl;
+  background-color: color-mix(in oklch, var(--paper-mute) 45%, transparent);
   border-color: rgba(255, 255, 255, 0.2);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.2),

package/src/frosted/message.css

@@ -3,7 +3,8 @@
  */
 
 [data-style='frosted'] [data-message-root][data-type='error'] {
-  @apply bg-error-soft/50 border-error/40 text-error backdrop-blur-sm;
+  @apply border-error/40 text-error backdrop-blur-sm;
+  background-color: color-mix(in oklch, var(--error-soft) 50%, transparent);
 }
 [data-style='frosted'] [data-message-root][data-type='error'] [data-message-icon],
 [data-style='frosted'] [data-message-root][data-type='error'] [data-message-dismiss] {
@@ -11,7 +12,8 @@
 }
 
 [data-style='frosted'] [data-message-root][data-type='warning'] {
-  @apply bg-warning-soft/50 border-warning/40 text-warning backdrop-blur-sm;
+  @apply border-warning/40 text-warning backdrop-blur-sm;
+  background-color: color-mix(in oklch, var(--warning-soft) 50%, transparent);
 }
 [data-style='frosted'] [data-message-root][data-type='warning'] [data-message-icon],
 [data-style='frosted'] [data-message-root][data-type='warning'] [data-message-dismiss] {
@@ -19,7 +21,8 @@
 }
 
 [data-style='frosted'] [data-message-root][data-type='info'] {
-  @apply bg-info-soft/50 border-info/40 text-info backdrop-blur-sm;
+  @apply border-info/40 text-info backdrop-blur-sm;
+  background-color: color-mix(in oklch, var(--info-soft) 50%, transparent);
 }
 [data-style='frosted'] [data-message-root][data-type='info'] [data-message-icon],
 [data-style='frosted'] [data-message-root][data-type='info'] [data-message-dismiss] {
@@ -27,7 +30,8 @@
 }
 
 [data-style='frosted'] [data-message-root][data-type='success'] {
-  @apply bg-success-soft/50 border-success/40 text-success backdrop-blur-sm;
+  @apply border-success/40 text-success backdrop-blur-sm;
+  background-color: color-mix(in oklch, var(--success-soft) 50%, transparent);
 }
 [data-style='frosted'] [data-message-root][data-type='success'] [data-message-icon],
 [data-style='frosted'] [data-message-root][data-type='success'] [data-message-dismiss] {

package/src/frosted/range.css

@@ -9,7 +9,9 @@
    ============================================================================= */
 
 [data-style='frosted'] [data-range-bar] {
-  @apply bg-paper-mute/50 border-ink-soft/20 border;
+  @apply border;
+  background-color: color-mix(in oklch, var(--paper-mute) 50%, transparent);
+  border-color: color-mix(in oklch, var(--ink-soft) 20%, transparent);
 }
 
 [data-style='frosted'] [data-range-selected] {
@@ -41,7 +43,7 @@
 }
 
 [data-style='frosted'] [data-tick-bar] {
-  @apply border-ink-soft/40;
+  border-color: color-mix(in oklch, var(--ink-soft) 40%, transparent);
 }
 
 [data-style='frosted'] [data-tick-label] {
@@ -53,9 +55,10 @@
    ============================================================================= */
 
 [data-style='frosted'] [data-range][data-disabled] [data-range-thumb] {
-  @apply bg-paper-edge/50 border-paper-edge/30;
+  background-color: color-mix(in oklch, var(--paper-edge) 50%, transparent);
+  border-color: color-mix(in oklch, var(--paper-edge) 30%, transparent);
 }
 
 [data-style='frosted'] [data-range][data-disabled] [data-range-selected] {
-  @apply bg-paper-edge/30;
+  background-color: color-mix(in oklch, var(--paper-edge) 30%, transparent);
 }

package/src/frosted/search-filter.css

@@ -9,11 +9,14 @@
    ============================================================================= */
 
 [data-style='frosted'] [data-search-input] {
-  @apply text-ink-mute border-ink-soft/20 bg-paper-soft/50 border backdrop-blur-md;
+  @apply text-ink-mute border backdrop-blur-md;
+  border-color: color-mix(in oklch, var(--ink-soft) 20%, transparent);
+  background-color: color-mix(in oklch, var(--paper-soft) 50%, transparent);
 }
 
 [data-style='frosted'] [data-search-input]:focus {
-  @apply border-primary/50 ring-ink-soft/30 ring-1;
+  @apply border-primary/50 ring-1;
+  --un-ring-color: color-mix(in oklch, var(--ink-soft) 30%, transparent);
 }
 
 [data-style='frosted'] [data-search-input]::placeholder {
@@ -37,7 +40,8 @@
    ============================================================================= */
 
 [data-style='frosted'] [data-search-tag] {
-  @apply text-ink-mute bg-paper-mute/15;
+  @apply text-ink-mute;
+  background-color: color-mix(in oklch, var(--paper-mute) 15%, transparent);
 }
 
 [data-style='frosted'] [data-search-tag-remove] {

package/src/frosted/select.css

@@ -17,15 +17,20 @@
    ============================================================================= */
 
 [data-style='frosted'] [data-select-trigger] {
-  @apply text-ink-mute bg-paper-soft/70 border-ink-soft/20 border backdrop-blur-md;
+  @apply text-ink-mute border backdrop-blur-md;
+  background-color: color-mix(in oklch, var(--paper-soft) 70%, transparent);
+  border-color: color-mix(in oklch, var(--ink-soft) 20%, transparent);
 }
 
 [data-style='frosted'] [data-select-trigger]:hover:not(:disabled) {
-  @apply text-ink bg-paper-mute/80 border-ink-soft/30;
+  @apply text-ink;
+  background-color: color-mix(in oklch, var(--paper-mute) 80%, transparent);
+  border-color: color-mix(in oklch, var(--ink-soft) 30%, transparent);
 }
 
 [data-style='frosted'] [data-select-trigger]:focus-visible {
-  @apply ring-ink-soft/40 ring-1 outline-none;
+  @apply ring-1 outline-none;
+  --un-ring-color: color-mix(in oklch, var(--ink-soft) 40%, transparent);
 }
 
 [data-style='frosted'] [data-select][data-open='true'] [data-select-trigger] {
@@ -57,7 +62,8 @@
    ============================================================================= */
 
 [data-style='frosted'] [data-select-tag] {
-  @apply text-ink-mute bg-paper-mute/15;
+  @apply text-ink-mute;
+  background-color: color-mix(in oklch, var(--paper-mute) 15%, transparent);
 }
 
 [data-style='frosted'] [data-select-tag-remove] {
@@ -73,7 +79,9 @@
    ============================================================================= */
 
 [data-style='frosted'] [data-select-dropdown] {
-  @apply bg-paper-mute/50 border-ink-soft/20 border shadow-lg backdrop-blur-lg;
+  @apply border shadow-lg backdrop-blur-lg;
+  background-color: color-mix(in oklch, var(--paper-mute) 50%, transparent);
+  border-color: color-mix(in oklch, var(--ink-soft) 20%, transparent);
 }
 
 /* =============================================================================
@@ -86,11 +94,13 @@
 
 [data-style='frosted'] [data-select-option]:hover:not(:disabled),
 [data-style='frosted'] [data-select-option]:focus:not(:disabled) {
-  @apply text-ink bg-paper-mute/80;
+  @apply text-ink;
+  background-color: color-mix(in oklch, var(--paper-mute) 80%, transparent);
 }
 
 [data-style='frosted'] [data-select-option]:focus-visible {
-  @apply ring-ink-soft/40 ring-1 outline-none ring-inset;
+  @apply ring-1 outline-none ring-inset;
+  --un-ring-color: color-mix(in oklch, var(--ink-soft) 40%, transparent);
 }
 
 [data-style='frosted'] [data-select-option][data-selected='true'] {
@@ -109,7 +119,8 @@
 
 /* Checkbox */
 [data-style='frosted'] [data-select-checkbox] {
-  @apply border-ink-soft/40 bg-paper-soft/70;
+  border-color: color-mix(in oklch, var(--ink-soft) 40%, transparent);
+  background-color: color-mix(in oklch, var(--paper-soft) 70%, transparent);
 }
 
 [data-style='frosted'] [data-select-checkbox][data-checked='true'] {
@@ -150,7 +161,7 @@
    ============================================================================= */
 
 [data-style='frosted'] [data-select-divider] {
-  @apply bg-ink-soft/20;
+  background-color: color-mix(in oklch, var(--ink-soft) 20%, transparent);
 }
 
 /* =============================================================================
@@ -158,15 +169,18 @@
    ============================================================================= */
 
 [data-style='frosted'] [data-select-filter] {
-  @apply bg-paper-mute/30;
+  background-color: color-mix(in oklch, var(--paper-mute) 30%, transparent);
 }
 
 [data-style='frosted'] [data-select-filter-input] {
-  @apply text-ink-mute border-ink-soft/20 bg-paper-soft/50 border;
+  @apply text-ink-mute border;
+  border-color: color-mix(in oklch, var(--ink-soft) 20%, transparent);
+  background-color: color-mix(in oklch, var(--paper-soft) 50%, transparent);
 }
 
 [data-style='frosted'] [data-select-filter-input]:focus {
-  @apply border-primary/50 ring-ink-soft/30 ring-1;
+  @apply border-primary/50 ring-1;
+  --un-ring-color: color-mix(in oklch, var(--ink-soft) 30%, transparent);
 }
 
 [data-style='frosted'] [data-select-filter-input]::placeholder {

package/src/frosted/status-list.css

@@ -62,5 +62,6 @@
 
 /* Count badge */
 [data-style='frosted'] [data-status-count] {
-  @apply bg-paper-mute/60 text-ink-mute font-semibold backdrop-blur-sm;
+  @apply text-ink-mute font-semibold backdrop-blur-sm;
+  background-color: color-mix(in oklch, var(--paper-mute) 60%, transparent);
 }