@rokkit/themes 1.0.4 → 1.1.0

package/src/base/input.css

@@ -12,12 +12,14 @@
 
 /* Separator between form fields */
 [data-form-separator] {
-  @apply border-surface-z2 my-1 border-t;
+  border-top-color: var(--paper-mute);
+  @apply my-1 border-t;
 }
 
 /* Form group (fieldset for nested objects) */
 [data-form-group] {
-  @apply border-surface-z2 m-0 flex flex-col gap-3 border-l border-none p-0 pl-3;
+  border-left-color: var(--paper-mute);
+  @apply m-0 flex flex-col gap-3 border-l border-none p-0 pl-3;
 }
 
 [data-form-group-label] {
@@ -46,7 +48,8 @@
 }
 
 [data-severity='error'] [data-validation-count] {
-  @apply bg-error-z1 text-error-z7;
+  background-color: var(--error-soft);
+  color: var(--error);
 }
 
 [data-severity='warning'] > [data-validation-group-header] {
@@ -54,7 +57,8 @@
 }
 
 [data-severity='warning'] [data-validation-count] {
-  @apply bg-warning-z1 text-warning-z7;
+  background-color: var(--warning-soft);
+  color: var(--warning);
 }
 
 [data-severity='info'] > [data-validation-group-header] {
@@ -62,7 +66,8 @@
 }
 
 [data-severity='info'] [data-validation-count] {
-  @apply bg-info-z1 text-info-z7;
+  background-color: var(--info-soft);
+  color: var(--info);
 }
 
 [data-severity='success'] > [data-validation-group-header] {
@@ -70,7 +75,8 @@
 }
 
 [data-severity='success'] [data-validation-count] {
-  @apply bg-success-z1 text-success-z7;
+  background-color: var(--success-soft);
+  color: var(--success);
 }
 
 [data-validation-item] {
@@ -78,7 +84,11 @@
 }
 
 button[data-validation-item] {
-  @apply hover:bg-surface-z1 cursor-pointer border-none bg-transparent;
+  @apply cursor-pointer border-none bg-transparent;
+}
+
+button[data-validation-item]:hover {
+  background-color: var(--paper-soft);
 }
 
 /* Form actions (submit/reset buttons) */
@@ -88,11 +98,21 @@ button[data-validation-item] {
 
 button[data-form-submit],
 button[data-form-reset] {
-  @apply border-surface-z3 bg-surface-z1 hover:bg-surface-z2 cursor-pointer rounded border px-4 py-1.5 text-sm transition-colors;
+  border-color: var(--paper-mute);
+  background-color: var(--paper-soft);
+  @apply cursor-pointer rounded border px-4 py-1.5 text-sm transition-colors;
+}
+
+button[data-form-submit]:hover,
+button[data-form-reset]:hover {
+  background-color: var(--paper-mute);
 }
 
 button[data-form-submit] {
-  @apply bg-primary text-on-primary border-primary hover:opacity-90;
+  background-color: var(--primary);
+  color: var(--on-primary);
+  border-color: var(--primary);
+  @apply hover:opacity-90;
 }
 
 button[data-form-submit]:disabled,
@@ -122,6 +142,24 @@ button[data-form-reset]:disabled {
   @apply flex-row items-center justify-between gap-2;
 }
 
+/* Inline layout variant — opt in per field via the `variant='inline'`
+   prop on InputField (or the equivalent `variant` field on a
+   FormRenderer layout element). Label sits in a fixed leading column,
+   the input takes the remaining row. Useful for control-panel
+   contexts (playground knobs, settings dialogs, tweak editors) where
+   the form-page rhythm reads as overkill. */
+[data-field-root][data-field-layout='inline'] > [data-field] {
+  @apply flex-row items-center gap-3;
+}
+
+[data-field-root][data-field-layout='inline'] > [data-field] > label {
+  @apply flex-none w-32 text-xs;
+}
+
+[data-field-root][data-field-layout='inline'] > [data-field] > :not(label) {
+  @apply flex-1 min-w-0;
+}
+
 /* Select: stretch to fill input wrapper — display:flex eliminates inline-block gap */
 [data-input-root] [data-select] {
   @apply flex-1 self-stretch;
@@ -192,13 +230,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 +248,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 +288,8 @@ input[type='radio'] {
 }
 
 input[type='radio']:checked {
-  border-color: rgba(var(--color-primary-500), 1);
+  border-color: var(--primary);
+  color: var(--primary);
 }
 
 input[type='radio']:checked::before {
@@ -255,7 +298,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);
+	border-right: 1px solid var(--paper-mute);
 }
 
 [data-nav-content][data-orientation='vertical'] [data-nav-content-nav] {
-	border-bottom: 1px solid var(--color-surface-z3, #e0e0e0);
+	border-bottom: 1px solid var(--paper-mute);
 }
 
 [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);
+		border-bottom: 1px solid var(--paper-mute);
 	}
 }

package/src/base/stepper.css

@@ -47,32 +47,32 @@
 }
 
 [data-stepper-step][data-completed] [data-stepper-circle] {
-  background-color: var(--color-primary-500, #3b82f6);
-  border-color: var(--color-primary-500, #3b82f6);
-  color: white;
+  background-color: var(--primary);
+  border-color: var(--primary);
+  color: var(--paper);
 }
 
 [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);
+  border-color: var(--primary);
+  color: var(--primary);
+  @apply ring-primary/20 ring-3;
 }
 
 /* ─── Connector line ─── */
 
 [data-stepper-connector] {
+  background-color: var(--paper-mute);
   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);
+  background-color: var(--primary);
 }
 
 /* Vertical orientation connectors */
@@ -104,10 +104,12 @@
 }
 
 [data-stepper-dot] {
+  border-color: var(--paper-edge);
   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 +124,14 @@
 }
 
 [data-stepper-dot][data-completed] {
-  background-color: var(--color-primary-500, #3b82f6);
-  border-color: var(--color-primary-500, #3b82f6);
+  background-color: var(--primary);
+  border-color: var(--primary);
 }
 
 [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);
+  background-color: var(--primary);
+  border-color: var(--primary);
+  @apply ring-primary/25 ring-2;
 }
 
 /* ─── Content area ─── */

package/src/base/tabs.css

@@ -45,9 +45,15 @@
 
 [data-tabs][data-orientation='vertical'] [data-tabs-list] {
   flex-direction: column;
+  /* In vertical mode the list is a flex item perpendicular to the
+   * row-direction parent. Stretching it gives `justify-content` a
+   * height to distribute — without this the column collapses to
+   * fit-content and `align=center / end` have no spare space to
+   * move the tabs into. */
+  align-self: stretch;
 }
 
-/* Alignment */
+/* Alignment — main-axis distribution within the list */
 [data-tabs][data-align='center'] [data-tabs-list] {
   justify-content: center;
 }
@@ -66,7 +72,14 @@
   gap: 0.375rem;
   padding: 0.5rem 0.75rem;
   cursor: pointer;
-  border: none;
+  /* `border: none` expands to `border-width: medium` (= 3px) which leaks
+   * a 3px ring on every side as soon as a theme sets `border-style: solid`.
+   * Spell the safe baseline out: zero width on all sides, solid style so
+   * any `border-{side}-[Npx]` from a theme renders without needing to
+   * re-declare the style. */
+  border-width: 0;
+  border-style: solid;
+  border-color: currentcolor;
   background: transparent;
   font-weight: 500;
   font-size: 0.875rem;

package/src/base/typography.css

@@ -2,25 +2,37 @@
  * Typography & Shape Tokens
  *
  * CSS custom properties for font families and border-radius scale.
- * Override these in your application stylesheet to customize typography and shape.
+ *
+ * Canonical names match the named-token vocabulary's semantic intent:
+ *   --font-display — heading / display typeface
+ *   --font-ui      — body / UI typeface
+ *   --font-mono    — code, eyebrows, kbd shortcuts
+ *
+ * Legacy aliases `--font-heading` and `--font-sans` are emitted as
+ * `var(--font-display)` and `var(--font-ui)` for backward compatibility
+ * with any consumer that still reads the old names. Both stay in sync.
+ *
+ * Override these in your application stylesheet or via the preset's
+ * `typography: { display, ui, mono }` config to customize.
  *
  * @example
  * :root {
- *   --font-sans: 'Inter', system-ui, sans-serif;
- *   --font-mono: 'JetBrains Mono', monospace;
- *   --font-heading: 'Cal Sans', 'Inter', sans-serif;
- *
- *   --radius-sm: 0;        --* sharp corners *--
- *   --radius-md: 0;
- *   --radius-lg: 0;
+ *   --font-display: 'Fraunces', serif;
+ *   --font-ui:      'Inter', system-ui, sans-serif;
+ *   --font-mono:    'JetBrains Mono', monospace;
  * }
  */
 
-:root {
-  /* Font families */
-  --font-sans: 'Open Sans', -apple-system, system-ui, 'Segoe UI', ui-serif, sans-serif;
-  --font-mono: 'Victor Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
-  --font-heading: 'Open Sans', sans-serif;
+/* Defaults wrapped in :where() so specificity is 0 — any explicit :root
+   declaration (from the preset emit, an app stylesheet, or another theme)
+   wins without needing extra weight. Without :where(), this file would
+   override later preset emissions since both are :root, same specificity,
+   and the source order has this CSS loading after the preset preflight. */
+:where(:root) {
+  /* Font families — canonical names */
+  --font-display: 'Open Sans', sans-serif;
+  --font-ui:      'Open Sans', -apple-system, system-ui, 'Segoe UI', ui-serif, sans-serif;
+  --font-mono:    'Victor Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
 
   /* Border-radius scale */
   --radius-sm: 0.25rem;
@@ -29,3 +41,10 @@
   --radius-xl: 0.75rem;
   --radius-full: 9999px;
 }
+
+/* Legacy aliases — outside the :where() so they ALWAYS reflect whichever
+   --font-display / --font-ui value won in the cascade (default or preset). */
+:root {
+  --font-heading: var(--font-display);
+  --font-sans:    var(--font-ui);
+}

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-ink border backdrop-blur-xl bg-paper-edge/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/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-primary border backdrop-blur-xl bg-accent/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/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/60;
   border-color: rgba(255, 255, 255, 0.25);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.25),
@@ -67,28 +62,28 @@
 
 [data-style='frosted'] [data-button][data-style='outline'][data-variant='default'],
 [data-style='frosted'] [data-button][data-style='outline']:not([data-variant]) {
-  @apply text-surface-z8 border bg-transparent;
+  @apply text-ink-mute border bg-transparent;
   border-color: rgba(255, 255, 255, 0.28);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
 }
 
 [data-style='frosted'] [data-button][data-style='outline'][data-variant='primary'] {
-  @apply text-primary-z6 border bg-transparent;
+  @apply text-primary border bg-transparent;
   border-color: rgba(255, 255, 255, 0.28);
 }
 
 [data-style='frosted'] [data-button][data-style='outline'][data-variant='secondary'] {
-  @apply text-secondary-z6 border bg-transparent;
+  @apply text-accent border bg-transparent;
   border-color: rgba(255, 255, 255, 0.28);
 }
 
 [data-style='frosted'] [data-button][data-style='outline'][data-variant='accent'] {
-  @apply text-accent-z6 border bg-transparent;
+  @apply text-accent border bg-transparent;
   border-color: rgba(255, 255, 255, 0.28);
 }
 
 [data-style='frosted'] [data-button][data-style='outline'][data-variant='danger'] {
-  @apply text-danger-z4 border bg-transparent;
+  @apply text-danger border bg-transparent;
   border-color: rgba(255, 255, 255, 0.28);
 }
 
@@ -102,23 +97,23 @@
 
 [data-style='frosted'] [data-button][data-style='ghost'][data-variant='default'],
 [data-style='frosted'] [data-button][data-style='ghost']:not([data-variant]) {
-  @apply text-surface-z8;
+  @apply text-ink-mute;
 }
 
 [data-style='frosted'] [data-button][data-style='ghost'][data-variant='primary'] {
-  @apply text-primary-z6;
+  @apply text-primary;
 }
 
 [data-style='frosted'] [data-button][data-style='ghost'][data-variant='secondary'] {
-  @apply text-secondary-z6;
+  @apply text-accent;
 }
 
 [data-style='frosted'] [data-button][data-style='ghost'][data-variant='accent'] {
-  @apply text-accent-z6;
+  @apply text-accent;
 }
 
 [data-style='frosted'] [data-button][data-style='ghost'][data-variant='danger'] {
-  @apply text-danger-z4;
+  @apply text-danger;
 }
 
 /* =============================================================================
@@ -127,31 +122,31 @@
 
 [data-style='frosted'] [data-button][data-style='gradient'][data-variant='default'],
 [data-style='frosted'] [data-button][data-style='gradient']:not([data-variant]) {
-  @apply from-surface-z3/70 to-surface-z1/50 text-surface-z10 bg-gradient-to-br backdrop-blur-xl;
+  @apply from-paper-mute/70 to-paper-soft/50 text-ink bg-gradient-to-br backdrop-blur-xl;
   border-color: rgba(255, 255, 255, 0.2);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
 }
 
 [data-style='frosted'] [data-button][data-style='gradient'][data-variant='primary'] {
-  @apply from-primary-z5/80 to-primary-z3/60 text-on-primary bg-gradient-to-br backdrop-blur-xl;
+  @apply from-primary/80 to-primary/60 text-on-primary bg-gradient-to-br backdrop-blur-xl;
   border-color: rgba(255, 255, 255, 0.25);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
 }
 
 [data-style='frosted'] [data-button][data-style='gradient'][data-variant='secondary'] {
-  @apply from-secondary-z5/80 to-secondary-z3/60 text-on-secondary bg-gradient-to-br backdrop-blur-xl;
+  @apply from-accent/80 to-accent/60 text-on-primary bg-gradient-to-br backdrop-blur-xl;
   border-color: rgba(255, 255, 255, 0.25);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
 }
 
 [data-style='frosted'] [data-button][data-style='gradient'][data-variant='accent'] {
-  @apply from-accent-z5/80 to-accent-z3/60 text-on-accent bg-gradient-to-br backdrop-blur-xl;
+  @apply from-accent/80 to-accent/60 text-on-accent bg-gradient-to-br backdrop-blur-xl;
   border-color: rgba(255, 255, 255, 0.25);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
 }
 
 [data-style='frosted'] [data-button][data-style='gradient'][data-variant='danger'] {
-  @apply from-danger-z5/80 to-danger-z3/60 text-on-danger bg-gradient-to-br backdrop-blur-xl;
+  @apply from-danger/80 to-danger/60 text-on-danger bg-gradient-to-br backdrop-blur-xl;
   border-color: rgba(255, 255, 255, 0.25);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
 }
@@ -167,27 +162,27 @@
 
 [data-style='frosted'] [data-button][data-style='link'][data-variant='default'],
 [data-style='frosted'] [data-button][data-style='link']:not([data-variant]) {
-  @apply text-surface-z8;
+  @apply text-ink-mute;
 }
 
 [data-style='frosted'] [data-button][data-style='link'][data-variant='primary'] {
-  @apply text-primary-z6;
+  @apply text-primary;
 }
 
 [data-style='frosted'] [data-button][data-style='link'][data-variant='secondary'] {
-  @apply text-secondary-z6;
+  @apply text-accent;
 }
 
 [data-style='frosted'] [data-button][data-style='link'][data-variant='accent'] {
-  @apply text-accent-z6;
+  @apply text-accent;
 }
 
 [data-style='frosted'] [data-button][data-style='link'][data-variant='danger'] {
-  @apply text-danger-z4;
+  @apply text-danger;
 }
 
 [data-style='frosted'] [data-button][data-style='link']:hover:not(:disabled):not([data-disabled]) {
-  @apply text-primary-z7;
+  @apply text-primary;
 }
 
 /* =============================================================================
@@ -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-paper-edge/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-ink border shadow-lg backdrop-blur-xl bg-paper-mute/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-paper-mute/42;
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.28),
     0 16px 40px rgba(0, 0, 0, 0.14);
@@ -51,11 +50,11 @@
 }
 
 [data-style='frosted'] [data-card-body] {
-  @apply text-surface-z8;
+  @apply text-ink-mute;
 }
 
 [data-style='frosted'] [data-card-footer] {
-  @apply text-surface-z7;
+  @apply text-ink-mute;
   border-top: 1px solid rgba(255, 255, 255, 0.12);
 }
 
@@ -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/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-primary border shadow-lg backdrop-blur-xl bg-accent/45;
   border-color: rgba(255, 255, 255, 0.22);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.28),
@@ -119,12 +116,11 @@
 }
 
 [data-style='frosted'] [data-card][data-variant='secondary'] [data-card-body] {
-  @apply text-on-secondary/80;
+  @apply text-on-primary/80;
 }
 
 /* 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-ink-mute border backdrop-blur-xl bg-paper-mute/16;
   border-color: rgba(255, 255, 255, 0.12);
 }

package/src/frosted/chart.css

@@ -4,25 +4,25 @@
 
 [data-style='frosted'] [data-chart-axis-line],
 [data-style='frosted'] [data-chart-tick] line {
-  @apply stroke-surface-z3;
+  @apply stroke-paper-mute;
 }
 
 [data-style='frosted'] [data-chart-tick-label] {
-  @apply fill-surface-z5;
+  @apply fill-ink-soft;
 }
 
 [data-style='frosted'] [data-chart-grid-line] {
-  @apply stroke-surface-z3;
+  @apply stroke-paper-mute;
   stroke-opacity: 0.5;
   stroke-dasharray: 2 4;
 }
 
 [data-style='frosted'] [data-chart-legend-label] {
-  @apply fill-surface-z5;
+  @apply fill-ink-soft;
 }
 
 [data-style='frosted'] [data-chart-legend-item]:hover {
-  @apply text-surface-z8;
+  @apply text-ink-mute;
 }
 
 [data-style='frosted'] [data-plot-element='bar'][data-dimmed],
@@ -34,5 +34,5 @@
 }
 
 [data-style='frosted'] [data-facet-title] {
-  @apply text-surface-z5;
+  @apply text-ink-soft;
 }