@rokkit/themes 1.0.4 → 1.0.5

package/README.md

@@ -16,19 +16,14 @@ bun add @rokkit/themes
 
 Available themes:
 
-| Theme        | Description                                                          |
-| ------------ | -------------------------------------------------------------------- |
-| `rokkit`     | Default — gradients and glowing borders                              |
-| `minimal`    | Clean and subtle                                                     |
-| `material`   | Elevation and shadows                                                |
-| `frosted`    | Frosted glass and blur                                               |
-| `shadcn`     | Flat borders and ring focus                                          |
-| `daisy-ui`   | Rounded-full and bold fills                                          |
-| `bits-ui`    | Rounded-lg and shadow-sm                                             |
-| `carbon`     | Square corners and bottom-border inputs                              |
-| `ant-design` | Thin borders and dense layout                                        |
-| `grada-ui`   | Coral/purple gradient identity                                       |
-| `base`       | Structural styles only (layout and positioning, no visual treatment) |
+| Theme      | Description                                                          |
+| ---------- | -------------------------------------------------------------------- |
+| `rokkit`   | Default — gradients and glowing borders                              |
+| `minimal`  | Clean and subtle                                                     |
+| `material` | Elevation and shadows                                                |
+| `frosted`  | Frosted glass and blur                                               |
+| `zen-sumi` | Ink on paper — no shadows, no gradients                              |
+| `base`     | Structural styles only (layout and positioning, no visual treatment) |
 
 ## Usage
 
@@ -54,6 +49,8 @@ import '@rokkit/themes'
 @import '@rokkit/themes/material.css';
 /* or */
 @import '@rokkit/themes/frosted.css';
+/* or */
+@import '@rokkit/themes/zen-sumi.css';
 ```
 
 ### Base structural styles only
@@ -108,12 +105,7 @@ src/
   minimal/     -- Clean + subtle theme
   material/    -- Elevation + shadows theme
   frosted/     -- Frosted glass + blur theme
-  shadcn/      -- Flat borders + ring focus theme
-  daisy-ui/    -- Rounded-full + bold fills theme
-  bits-ui/     -- Rounded-lg + shadow-sm theme
-  carbon/      -- Square + bottom-border inputs theme
-  ant-design/  -- Thin borders + dense layout theme
-  grada-ui/    -- Coral/purple gradient identity theme
+  zen-sumi/    -- Ink on paper theme (no shadows, no gradients)
   index.css    -- Full bundle entry point
 ```
 

package/build.mjs

@@ -49,14 +49,7 @@ const uno = await createGenerator({
     ...theme.getShortcuts('warning'),
     ...theme.getShortcuts('danger'),
     ...theme.getShortcuts('error'),
-    ...theme.getShortcuts('info'),
-    [/^text-on-primary(\/\d+)?$/, ([, end]) => `text-surface-50${end || ''}`],
-    [/^text-on-secondary(\/\d+)?$/, ([, end]) => `text-surface-50${end || ''}`],
-    [/^text-on-info(\/\d+)?$/, ([, end]) => `text-surface-50${end || ''}`],
-    [/^text-on-success(\/\d+)?$/, ([, end]) => `text-surface-50${end || ''}`],
-    [/^text-on-warning(\/\d+)?$/, ([, end]) => `text-surface-50${end || ''}`],
-    [/^text-on-error(\/\d+)?$/, ([, end]) => `text-surface-50${end || ''}`],
-    [/^text-on-surface(\/\d+)?$/, ([, end]) => `text-surface-50${end || ''}`]
+    ...theme.getShortcuts('info')
   ],
   theme: {
     colors: theme.getColorRules()
@@ -190,7 +183,7 @@ async function buildFile(inputPath, outputName, label) {
   const fullCSS = resolveImports(inputPath)
   const compiled = await processCSS(fullCSS, outputName)
   const fixed = fixModeSelectors(compiled)
-  writeFileSync(join(distDir, outputName), fixed, 'utf-8')
+  writeFileSync(join(distDir, outputName), fixed, 'utf-8') // nosemgrep: javascript.lang.security.audit.path-traversal.path-join-resolve-traversal.path-join-resolve-traversal — outputName is derived from a hardcoded string array, not user input
   console.log(`✓ dist/${outputName} (${label})`)
 }
 
@@ -213,12 +206,7 @@ async function build() {
     ['minimal', 'clean + subtle'],
     ['material', 'elevation + shadows'],
     ['frosted', 'frosted glass + blur'],
-    ['grada-ui', 'coral/purple gradient identity'],
-    ['shadcn', 'flat borders + ring focus'],
-    ['daisy-ui', 'rounded-full + bold fills'],
-    ['bits-ui', 'rounded-lg + shadow-sm'],
-    ['carbon', 'square + bottom-border inputs'],
-    ['ant-design', 'thin borders + dense layout']
+    ['zen-sumi', 'ink on paper — no shadows, no gradients']
   ]) {
     await buildFile(join(srcDir, name, 'index.css'), `${name}.css`, label)
   }
@@ -230,13 +218,9 @@ async function build() {
     'minimal',
     'material',
     'frosted',
-    'grada-ui',
-    'shadcn',
-    'daisy-ui',
-    'bits-ui',
-    'carbon',
-    'ant-design'
+    'zen-sumi'
   ]
+  // nosemgrep: javascript.lang.security.audit.path-traversal.path-join-resolve-traversal.path-join-resolve-traversal — name is from a hardcoded string array, not user input
   const bundleParts = allThemes.map((name) => readFileSync(join(distDir, `${name}.css`), 'utf-8'))
   writeFileSync(join(distDir, 'index.css'), bundleParts.join('\n'), 'utf-8')
   console.log('✓ dist/index.css (full bundle)')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/themes",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Theme styles for @rokkit/ui components",
   "repository": {
     "type": "git",
@@ -18,97 +18,29 @@
     "style": "./src/index.css",
     "default": "./src/index.css"
   },
-  "./dist": {
-  "style": "./dist/index.css",
-  "default": "./dist/index.css"
-},
-"./dist/base": {
-"style": "./dist/base.css",
-"default": "./dist/base.css"
-},
-"./dist/rokkit": {
-"style": "./dist/rokkit.css",
-"default": "./dist/rokkit.css"
-},
-"./dist/minimal": {
-"style": "./dist/minimal.css",
-"default": "./dist/minimal.css"
-},
-"./dist/material": {
-"style": "./dist/material.css",
-"default": "./dist/material.css"
-},
-"./dist/frosted": {
-"style": "./dist/frosted.css",
-"default": "./dist/frosted.css"
-},
-"./dist/grada-ui": {
-"style": "./dist/grada-ui.css",
-"default": "./dist/grada-ui.css"
-},
-"./dist/daisy-ui": {
-"style": "./dist/daisy-ui.css",
-"default": "./dist/daisy-ui.css"
-},
-"./dist/shadcn": {
-"style": "./dist/shadcn.css",
-"default": "./dist/shadcn.css"
-},
-"./dist/bits-ui": {
-"style": "./dist/bits-ui.css",
-"default": "./dist/bits-ui.css"
-},
-"./dist/carbon": {
-"style": "./dist/carbon.css",
-"default": "./dist/carbon.css"
-},
-"./dist/ant-design": {
-"style": "./dist/ant-design.css",
-"default": "./dist/ant-design.css"
-},
-"./base.css": {
-"style": "./dist/base.css",
-"default": "./dist/base.css"
+  "./base.css": {
+  "style": "./src/base/index.css",
+  "default": "./src/base/index.css"
 },
 "./rokkit.css": {
-"style": "./dist/rokkit.css",
-"default": "./dist/rokkit.css"
+"style": "./src/rokkit/index.css",
+"default": "./src/rokkit/index.css"
 },
 "./minimal.css": {
-"style": "./dist/minimal.css",
-"default": "./dist/minimal.css"
+"style": "./src/minimal/index.css",
+"default": "./src/minimal/index.css"
 },
 "./material.css": {
-"style": "./dist/material.css",
-"default": "./dist/material.css"
+"style": "./src/material/index.css",
+"default": "./src/material/index.css"
 },
 "./frosted.css": {
-"style": "./dist/frosted.css",
-"default": "./dist/frosted.css"
-},
-"./grada-ui.css": {
-"style": "./dist/grada-ui.css",
-"default": "./dist/grada-ui.css"
-},
-"./daisy-ui.css": {
-"style": "./dist/daisy-ui.css",
-"default": "./dist/daisy-ui.css"
-},
-"./shadcn.css": {
-"style": "./dist/shadcn.css",
-"default": "./dist/shadcn.css"
-},
-"./bits-ui.css": {
-"style": "./dist/bits-ui.css",
-"default": "./dist/bits-ui.css"
-},
-"./carbon.css": {
-"style": "./dist/carbon.css",
-"default": "./dist/carbon.css"
+"style": "./src/frosted/index.css",
+"default": "./src/frosted/index.css"
 },
-"./ant-design.css": {
-"style": "./dist/ant-design.css",
-"default": "./dist/ant-design.css"
+"./zen-sumi.css": {
+"style": "./src/zen-sumi/index.css",
+"default": "./src/zen-sumi/index.css"
 },
 "./base": {
 "style": "./src/base/index.css",
@@ -150,69 +82,28 @@
 "style": "./src/frosted/*.css",
 "default": "./src/frosted/*.css"
 },
-"./grada-ui": {
-"style": "./src/grada-ui/index.css",
-"default": "./src/grada-ui/index.css"
-},
-"./grada-ui/*": {
-"style": "./src/grada-ui/*.css",
-"default": "./src/grada-ui/*.css"
-},
-"./daisy-ui": {
-"style": "./src/daisy-ui/index.css",
-"default": "./src/daisy-ui/index.css"
-},
-"./daisy-ui/*": {
-"style": "./src/daisy-ui/*.css",
-"default": "./src/daisy-ui/*.css"
-},
-"./shadcn": {
-"style": "./src/shadcn/index.css",
-"default": "./src/shadcn/index.css"
-},
-"./shadcn/*": {
-"style": "./src/shadcn/*.css",
-"default": "./src/shadcn/*.css"
-},
-"./bits-ui": {
-"style": "./src/bits-ui/index.css",
-"default": "./src/bits-ui/index.css"
-},
-"./bits-ui/*": {
-"style": "./src/bits-ui/*.css",
-"default": "./src/bits-ui/*.css"
-},
-"./carbon": {
-"style": "./src/carbon/index.css",
-"default": "./src/carbon/index.css"
-},
-"./carbon/*": {
-"style": "./src/carbon/*.css",
-"default": "./src/carbon/*.css"
-},
-"./ant-design": {
-"style": "./src/ant-design/index.css",
-"default": "./src/ant-design/index.css"
+"./zen-sumi": {
+"style": "./src/zen-sumi/index.css",
+"default": "./src/zen-sumi/index.css"
 },
-"./ant-design/*": {
-"style": "./src/ant-design/*.css",
-"default": "./src/ant-design/*.css"
+"./zen-sumi/*": {
+"style": "./src/zen-sumi/*.css",
+"default": "./src/zen-sumi/*.css"
 }
 },
 "files": [
   "src",
-  "dist",
   "build.mjs",
   "README.md",
   "LICENSE"
 ],
 "scripts": {
-  "prepublishOnly": "cp ../../LICENSE . && bun run build.mjs",
+  "prepublishOnly": "cp ../../LICENSE .",
   "postpublish": "rm -f LICENSE",
   "build": "bun run build.mjs"
 },
 "dependencies": {
-  "@rokkit/core": "1.0.4"
+  "@rokkit/core": "1.0.5"
 },
 "devDependencies": {
   "magic-string": "^0.30.21",

package/src/base/carousel.css

@@ -71,8 +71,7 @@
   border: none;
   border-radius: 9999px;
   cursor: pointer;
-  background: rgba(0, 0, 0, 0.3);
-  color: white;
+  @apply bg-surface-z10/30 text-surface-z0;
   font-size: 1.25rem;
   z-index: 1;
   opacity: 0.7;

package/src/base/input.css

@@ -192,13 +192,17 @@ button[data-form-reset]:disabled {
   @apply focus:outline-none;
 }
 
-/* Range slider thumb */
+/* Range slider thumb — theme layer sets --range-thumb via @apply on [data-range-thumb] */
+input[type='range'] {
+  --range-thumb: var(--color-primary);
+}
+
 input[type='range']::-webkit-slider-thumb {
   appearance: none;
   height: 16px;
   width: 16px;
   border-radius: 50%;
-  background: rgba(var(--color-primary-500));
+  background: var(--range-thumb);
   cursor: pointer;
 }
 
@@ -206,7 +210,7 @@ input[type='range']::-moz-range-thumb {
   height: 16px;
   width: 16px;
   border-radius: 50%;
-  background: rgba(var(--color-primary-500));
+  background: var(--range-thumb);
   cursor: pointer;
   border: none;
 }
@@ -246,7 +250,7 @@ input[type='radio'] {
 }
 
 input[type='radio']:checked {
-  border-color: rgba(var(--color-primary-500), 1);
+  @apply border-primary-z5 text-primary-z5;
 }
 
 input[type='radio']:checked::before {
@@ -255,7 +259,7 @@ input[type='radio']:checked::before {
   width: 0.5rem;
   height: 0.5rem;
   border-radius: 50%;
-  background: rgba(var(--color-primary-500), 1);
+  background: currentColor;
   position: absolute;
   top: 50%;
   left: 50%;

package/src/base/nav-content.css

@@ -21,11 +21,11 @@
 
 [data-nav-content][data-orientation='horizontal'] [data-nav-content-nav] {
 	width: var(--nav-size, 280px);
-	border-right: 1px solid var(--color-surface-z3, #e0e0e0);
+	@apply border-r border-surface-z3;
 }
 
 [data-nav-content][data-orientation='vertical'] [data-nav-content-nav] {
-	border-bottom: 1px solid var(--color-surface-z3, #e0e0e0);
+	@apply border-b border-surface-z3;
 }
 
 [data-nav-content-main] {
@@ -43,6 +43,6 @@
 	[data-nav-content][data-collapsible][data-orientation='horizontal'] [data-nav-content-nav] {
 		width: 100%;
 		border-right: none;
-		border-bottom: 1px solid var(--color-surface-z3, #e0e0e0);
+		@apply border-b border-surface-z3;
 	}
 }

package/src/base/stepper.css

@@ -47,32 +47,28 @@
 }
 
 [data-stepper-step][data-completed] [data-stepper-circle] {
-  background-color: var(--color-primary-500, #3b82f6);
-  border-color: var(--color-primary-500, #3b82f6);
-  color: white;
+  @apply bg-primary-z5 border-primary-z5 text-surface-z0;
 }
 
 [data-stepper-step][data-active] [data-stepper-circle] {
-  border-color: var(--color-primary-500, #3b82f6);
-  color: var(--color-primary-500, #3b82f6);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-500, #3b82f6) 20%, transparent);
+  @apply border-primary-z5 text-primary-z5 ring-primary-z5/20 ring-3;
 }
 
 /* ─── Connector line ─── */
 
 [data-stepper-connector] {
+  @apply bg-surface-z3;
   flex: 1;
   height: 2px;
   min-width: 2rem;
   align-self: center;
   /* Vertically center with the circle (half of 2.5rem) */
   margin-top: 1.25rem;
-  background-color: var(--color-surface-300, #d1d5db);
   transition: background-color 0.2s ease;
 }
 
 [data-stepper-connector][data-completed] {
-  background-color: var(--color-primary-500, #3b82f6);
+  @apply bg-primary-z5;
 }
 
 /* Vertical orientation connectors */
@@ -104,10 +100,12 @@
 }
 
 [data-stepper-dot] {
+  @apply border-surface-z4;
   width: 0.5rem;
   height: 0.5rem;
   border-radius: 9999px;
-  border: 1px solid var(--color-surface-400, #9ca3af);
+  border-width: 1px;
+  border-style: solid;
   background: transparent;
   cursor: pointer;
   padding: 0;
@@ -122,14 +120,11 @@
 }
 
 [data-stepper-dot][data-completed] {
-  background-color: var(--color-primary-500, #3b82f6);
-  border-color: var(--color-primary-500, #3b82f6);
+  @apply bg-primary-z5 border-primary-z5;
 }
 
 [data-stepper-dot][data-active] {
-  border-color: var(--color-primary-500, #3b82f6);
-  background-color: var(--color-primary-500, #3b82f6);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary-500, #3b82f6) 25%, transparent);
+  @apply bg-primary-z5 border-primary-z5 ring-primary-z5/25 ring-2;
 }
 
 /* ─── Content area ─── */

package/src/frosted/button.css

@@ -13,8 +13,7 @@
 [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-surface-z9 border backdrop-blur-xl;
-  background: color-mix(in srgb, var(--color-surface-z4, #888) 28%, transparent);
+  @apply text-surface-z9 border backdrop-blur-xl bg-surface-z4/28;
   border-color: rgba(255, 255, 255, 0.22);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.2),
@@ -23,8 +22,7 @@
 
 [data-style='frosted'] [data-button][data-style='default'][data-variant='primary'],
 [data-style='frosted'] [data-button]:not([data-style])[data-variant='primary'] {
-  @apply text-on-primary border backdrop-blur-xl;
-  background: color-mix(in srgb, var(--color-primary-500, #6366f1) 60%, transparent);
+  @apply text-on-primary border backdrop-blur-xl bg-primary-z5/60;
   border-color: rgba(255, 255, 255, 0.25);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.25),
@@ -33,8 +31,7 @@
 
 [data-style='frosted'] [data-button][data-style='default'][data-variant='secondary'],
 [data-style='frosted'] [data-button]:not([data-style])[data-variant='secondary'] {
-  @apply text-on-secondary border backdrop-blur-xl;
-  background: color-mix(in srgb, var(--color-secondary-500, #ec4899) 60%, transparent);
+  @apply text-on-secondary border backdrop-blur-xl bg-secondary-z5/60;
   border-color: rgba(255, 255, 255, 0.25);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.25),
@@ -43,8 +40,7 @@
 
 [data-style='frosted'] [data-button][data-style='default'][data-variant='accent'],
 [data-style='frosted'] [data-button]:not([data-style])[data-variant='accent'] {
-  @apply text-on-accent border backdrop-blur-xl;
-  background: color-mix(in srgb, var(--color-accent-500, #f59e0b) 60%, transparent);
+  @apply text-on-accent border backdrop-blur-xl bg-accent-z5/60;
   border-color: rgba(255, 255, 255, 0.25);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.25),
@@ -53,8 +49,7 @@
 
 [data-style='frosted'] [data-button][data-style='default'][data-variant='danger'],
 [data-style='frosted'] [data-button]:not([data-style])[data-variant='danger'] {
-  @apply text-on-danger border backdrop-blur-xl;
-  background: color-mix(in srgb, var(--color-danger-500, #ef4444) 60%, transparent);
+  @apply text-on-danger border backdrop-blur-xl bg-danger-z5/60;
   border-color: rgba(255, 255, 255, 0.25);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.25),
@@ -196,7 +191,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]) {
-  background: color-mix(in srgb, var(--color-surface-z4, #888) 38%, transparent);
+  @apply bg-surface-z4/38;
   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,8 +10,7 @@
    ============================================================================= */
 
 [data-style='frosted'] [data-card] {
-  @apply text-surface-z9 border shadow-lg backdrop-blur-xl;
-  background: color-mix(in srgb, var(--color-surface-z3, #888) 30%, transparent);
+  @apply text-surface-z9 border shadow-lg backdrop-blur-xl bg-surface-z3/30;
   border-color: rgba(255, 255, 255, 0.18);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.22),
@@ -28,7 +27,7 @@
 }
 
 [data-style='frosted'] [data-card][data-card-interactive]:hover {
-  background: color-mix(in srgb, var(--color-surface-z3, #888) 42%, transparent);
+  @apply bg-surface-z3/42;
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.28),
     0 16px 40px rgba(0, 0, 0, 0.14);
@@ -86,8 +85,7 @@
 
 /* Primary — tinted primary glass */
 [data-style='frosted'] [data-card][data-variant='primary'] {
-  @apply text-on-primary border shadow-lg backdrop-blur-xl;
-  background: color-mix(in srgb, var(--color-primary-500, #6366f1) 45%, transparent);
+  @apply text-on-primary border shadow-lg backdrop-blur-xl bg-primary-z5/45;
   border-color: rgba(255, 255, 255, 0.22);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.28),
@@ -105,8 +103,7 @@
 
 /* Secondary — tinted secondary glass */
 [data-style='frosted'] [data-card][data-variant='secondary'] {
-  @apply text-on-secondary border shadow-lg backdrop-blur-xl;
-  background: color-mix(in srgb, var(--color-secondary-500, #ec4899) 45%, transparent);
+  @apply text-on-secondary border shadow-lg backdrop-blur-xl bg-secondary-z5/45;
   border-color: rgba(255, 255, 255, 0.22);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.28),
@@ -124,7 +121,6 @@
 
 /* Tertiary — barely-there frosted glass */
 [data-style='frosted'] [data-card][data-variant='tertiary'] {
-  @apply text-surface-z7 border backdrop-blur-xl;
-  background: color-mix(in srgb, var(--color-surface-z3, #888) 16%, transparent);
+  @apply text-surface-z7 border backdrop-blur-xl bg-surface-z3/16;
   border-color: rgba(255, 255, 255, 0.12);
 }

package/src/frosted/dropdown.css

@@ -5,15 +5,13 @@
  */
 
 [data-style='frosted'] [data-dropdown-trigger] {
-  @apply text-surface-z8 border bg-none backdrop-blur-xl;
-  background: color-mix(in srgb, var(--color-surface-z3, #888) 25%, transparent);
+  @apply text-surface-z8 border bg-none backdrop-blur-xl bg-surface-z3/25;
   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-surface-z10 bg-none;
-  background: color-mix(in srgb, var(--color-surface-z3, #888) 36%, transparent);
+  @apply text-surface-z10 bg-none bg-surface-z3/36;
   border-color: rgba(255, 255, 255, 0.28);
 }
 
@@ -23,8 +21,7 @@
 }
 
 [data-style='frosted'] [data-dropdown][data-open='true'] [data-dropdown-trigger] {
-  @apply bg-none;
-  background: color-mix(in srgb, var(--color-primary-500, #6366f1) 35%, transparent);
+  @apply bg-none bg-primary-z5/35;
   border-color: rgba(255, 255, 255, 0.3);
 }
 
@@ -37,8 +34,7 @@
 }
 
 [data-style='frosted'] [data-dropdown-panel] {
-  @apply border bg-none shadow-xl backdrop-blur-2xl;
-  background: color-mix(in srgb, var(--color-surface-z2, #888) 45%, transparent);
+  @apply border bg-none shadow-xl backdrop-blur-2xl bg-surface-z2/45;
   border-color: rgba(255, 255, 255, 0.2);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.2),
@@ -56,8 +52,7 @@
 }
 
 [data-style='frosted'] [data-dropdown-option][data-active='true'] {
-  @apply text-surface-z10 bg-none;
-  background: color-mix(in srgb, var(--color-primary-500, #6366f1) 22%, transparent);
+  @apply text-surface-z10 bg-none bg-primary-z5/22;
 }
 
 [data-style='frosted'] [data-dropdown-separator] {

package/src/frosted/floating-action.css

@@ -9,7 +9,7 @@
    ============================================================================= */
 
 [data-style='frosted'] [data-fab-trigger] {
-  @apply bg-primary-z5/80 text-white shadow-lg backdrop-blur-md;
+  @apply bg-primary-z5/80 text-on-primary shadow-lg backdrop-blur-md;
 }
 
 [data-style='frosted'] [data-fab-trigger]:hover:not(:disabled) {
@@ -56,6 +56,6 @@
    ============================================================================= */
 
 [data-style='frosted'] [data-fab-backdrop] {
-  background: rgba(0, 0, 0, 0.3);
+  @apply bg-surface-z10/30;
   backdrop-filter: blur(4px);
 }

package/src/frosted/input.css

@@ -35,8 +35,7 @@
  * 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;
-  background: color-mix(in srgb, var(--color-surface-z3, #888) 22%, transparent);
+  @apply flex items-center rounded-md border p-0.5 transition-all bg-surface-z3/22;
   background-image: none;
   border-color: rgba(255, 255, 255, 0.2);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
@@ -47,7 +46,7 @@
 }
 
 [data-style='frosted'] [data-input-root]:focus-within {
-  background: color-mix(in srgb, var(--color-surface-z3, #888) 28%, transparent);
+  @apply bg-surface-z3/28;
   background-image: none;
   border-color: rgba(255, 255, 255, 0.35);
   box-shadow: