@rokkit/themes 1.0.3 → 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.3",
+  "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.3"
+  "@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/density.css

@@ -19,7 +19,7 @@
   --density-line-height: 1.5;
   --density-icon-size: 1.25rem;
   --density-border-width: 1px;
-  --density-radius-base: var(--radius-md, 0.375rem);
+  --density-radius-base: var(--radius-md);
 }
 
 [data-density='compact'] {
@@ -33,7 +33,7 @@
   --density-line-height: 1.375;
   --density-icon-size: 1rem;
   --density-border-width: 1px;
-  --density-radius-base: var(--radius-sm, 0.25rem);
+  --density-radius-base: var(--radius-sm);
 }
 
 [data-density='cozy'] {
@@ -47,5 +47,5 @@
   --density-line-height: 1.75;
   --density-icon-size: 1.5rem;
   --density-border-width: 1px;
-  --density-radius-base: var(--radius-lg, 0.5rem);
+  --density-radius-base: var(--radius-lg);
 }

package/src/base/gradient-border.css

@@ -0,0 +1,32 @@
+/**
+ * Gradient Border Wrapper — Base Structural CSS
+ *
+ * Usage:
+ *   <div data-gradient-border>
+ *     <div data-gradient-border-inner>content</div>
+ *   </div>
+ *
+ * Themes set the gradient on [data-gradient-border] background.
+ * Non-gradient themes set background: transparent and use regular border.
+ */
+
+[data-gradient-border] {
+  padding: var(--density-border-width, 1px);
+  border-radius: var(--density-radius-base, var(--radius-md));
+  background: var(--gradient-border-bg, transparent);
+}
+
+[data-gradient-border-inner] {
+  border-radius: calc(var(--density-radius-base, var(--radius-md)) - var(--density-border-width, 1px));
+  background: var(--gradient-border-inner-bg, inherit);
+}
+
+/* Fallback: when no gradient, use a standard border */
+[data-gradient-border]:not([style*='--gradient-border-bg']) {
+  padding: 0;
+  border: var(--density-border-width, 1px) solid var(--gradient-border-color, currentColor);
+}
+
+[data-gradient-border]:not([style*='--gradient-border-bg']) [data-gradient-border-inner] {
+  border-radius: var(--density-radius-base, var(--radius-md));
+}

package/src/base/index.css

@@ -7,6 +7,9 @@
 
 @import './typography.css';
 @import './density.css';
+@import './radius.css';
+@import './layout.css';
+@import './gradient-border.css';
 @import './button.css';
 @import './item.css';
 @import './menu.css';

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/item.css

@@ -13,6 +13,19 @@
   flex-shrink: 0;
 }
 
+
+/* =============================================================================
+   Item Icon — Literal (kanji, emoji, text)
+   ============================================================================= */
+
+[data-item-icon-literal] {
+  flex-shrink: 0;
+  width: var(--density-icon-size, 1.25rem);
+  text-align: center;
+  line-height: 1;
+  font-size: var(--density-icon-size, 1.25rem);
+}
+
 /* =============================================================================
    Item Avatar
    ============================================================================= */

package/src/base/layout.css

@@ -0,0 +1,17 @@
+/**
+ * Layout Tokens — App-Level Spacing
+ *
+ * Structural layout dimensions for app shells.
+ * Override per-app by redefining these custom properties.
+ */
+
+:root {
+  --layout-sidebar-width: 240px;
+  --layout-sidebar-collapsed: 64px;
+  --layout-header-height: 56px;
+  --layout-content-max-width: 1280px;
+  --layout-section-gap: 2rem;
+  --layout-section-padding: 1.5rem;
+  --layout-content-padding: 2rem;
+  --layout-card-gap: 1rem;
+}

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/radius.css

@@ -0,0 +1,41 @@
+/**
+ * Roundedness Axis — CSS Custom Property Scale
+ *
+ * Decoupled from density. Place data-radius on any container;
+ * descendants inherit automatically.
+ *
+ * Presets: sharp → soft (default) → rounded → pill
+ */
+
+:root,
+[data-radius='soft'] {
+  --radius-sm: 0.125rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.625rem;
+  --radius-xl: 0.75rem;
+  --radius-full: 9999px;
+}
+
+[data-radius='sharp'] {
+  --radius-sm: 0;
+  --radius-md: 0;
+  --radius-lg: 0;
+  --radius-xl: 0;
+  --radius-full: 9999px;
+}
+
+[data-radius='rounded'] {
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-full: 9999px;
+}
+
+[data-radius='pill'] {
+  --radius-sm: 9999px;
+  --radius-md: 9999px;
+  --radius-lg: 9999px;
+  --radius-xl: 9999px;
+  --radius-full: 9999px;
+}

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