@rokkit/themes 1.0.3 → 1.0.5

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:

package/src/frosted/list.css

@@ -64,6 +64,31 @@
   @apply text-primary-z6;
 }
 
+/* Literal / kanji icons */
+[data-style='frosted'] [data-list] [data-list-item] [data-item-icon-literal] {
+  @apply text-surface-z5;
+}
+
+[data-style='frosted'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon-literal],
+[data-style='frosted'] [data-list] [data-list-item]:focus:not(:disabled) [data-item-icon-literal] {
+  @apply text-surface-z7;
+}
+
+[data-style='frosted'] [data-list] [data-list-item][data-active='true'] [data-item-icon-literal] {
+  @apply text-primary-z6;
+}
+
+[data-style='frosted']
+  [data-list]:focus-within
+  [data-list-item][data-active='true']
+  [data-item-icon-literal],
+[data-style='frosted']
+  [data-list]
+  [data-list-item][data-active='true']:hover:not(:disabled)
+  [data-item-icon-literal] {
+  @apply text-primary-z8;
+}
+
 [data-style='frosted'] [data-list] [data-list-item] [data-item-description] {
   @apply text-surface-z5;
 }

package/src/frosted/menu.css

@@ -9,15 +9,13 @@
    ============================================================================= */
 
 [data-style='frosted'] [data-menu-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-menu-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);
 }
 
@@ -27,8 +25,7 @@
 }
 
 [data-style='frosted'] [data-menu][data-open='true'] [data-menu-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);
 }
 
@@ -50,8 +47,7 @@
    ============================================================================= */
 
 [data-style='frosted'] [data-menu-dropdown] {
-  @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),

package/src/frosted/range.css

@@ -25,11 +25,11 @@
 }
 
 [data-style='frosted'] [data-range-thumb][data-sliding] {
-  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 20%, transparent);
+  @apply ring-4 ring-primary-z5/20;
 }
 
 [data-style='frosted'] [data-range-thumb]:focus-visible {
-  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 20%, transparent);
+  @apply ring-4 ring-primary-z5/20;
 }
 
 /* =============================================================================

package/src/frosted/select.css

@@ -113,7 +113,7 @@
 }
 
 [data-style='frosted'] [data-select-checkbox][data-checked='true'] {
-  @apply bg-primary-z5 border-primary-z5 text-white;
+  @apply bg-primary-z5 border-primary-z5 text-on-primary;
 }
 
 /* Item elements */

package/src/frosted/step-indicator.css

@@ -7,8 +7,7 @@
 }
 
 [data-style='frosted'] [data-step-item][data-step-state='current'] [data-step-number] {
-  @apply bg-surface-z2/60 border-primary-z4/70 text-primary-z7 bg-none backdrop-blur-sm;
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-500, #6366f1) 15%, transparent);
+  @apply bg-surface-z2/60 border-primary-z4/70 text-primary-z7 bg-none backdrop-blur-sm ring-3 ring-primary-z5/15;
 }
 
 [data-style='frosted'] [data-step-item][data-step-state='upcoming'] [data-step-number] {

package/src/frosted/switch.css

@@ -5,8 +5,7 @@
  */
 
 [data-style='frosted'] [data-switch-track] {
-  @apply border backdrop-blur-lg;
-  background: color-mix(in srgb, var(--color-surface-z4, #888) 25%, transparent);
+  @apply border backdrop-blur-lg bg-surface-z4/25;
   border-color: rgba(255, 255, 255, 0.2);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
 }
@@ -26,7 +25,7 @@
 
 /* On state */
 [data-style='frosted'] [data-switch][aria-checked='true'] [data-switch-track] {
-  background: color-mix(in srgb, var(--color-primary-500, #6366f1) 55%, transparent);
+  @apply bg-primary-z5/55;
   border-color: rgba(255, 255, 255, 0.28);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
 }

package/src/frosted/timeline.css

@@ -17,8 +17,7 @@
 }
 
 [data-style='frosted'] [data-timeline-item][data-active] [data-timeline-circle] {
-  @apply border-primary/60 text-primary;
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
+  @apply border-primary/60 text-primary ring-3 ring-primary-z5/15;
 }
 
 /* =============================================================================

package/src/index.css

@@ -9,6 +9,7 @@
  * - minimal: Use data-style="minimal" wrapper (clean + subtle)
  * - material: Use data-style="material" wrapper (elevation + shadows)
  * - frosted: Use data-style="frosted" wrapper (frosted glass + blur)
+ * - zen-sumi: Use data-style="zen-sumi" wrapper (ink on paper)
  */
 
 @import './base/index.css';
@@ -16,3 +17,4 @@
 @import './minimal/index.css';
 @import './material/index.css';
 @import './frosted/index.css';
+@import './zen-sumi/index.css';

package/src/index.js

@@ -3,7 +3,6 @@ import { Theme } from '@rokkit/core'
 export {
 	Theme,
 	themeRules,
-	shadesOf,
 	semanticShortcuts,
 	contrastShortcuts,
 	iconShortcuts,

package/src/material/floating-action.css

@@ -9,7 +9,7 @@
    ============================================================================= */
 
 [data-style='material'] [data-fab-trigger] {
-  @apply bg-primary-z5 bg-none text-white shadow-lg;
+  @apply bg-primary-z5 bg-none text-on-primary shadow-lg;
 }
 
 [data-style='material'] [data-fab-trigger]:hover:not(:disabled) {
@@ -60,5 +60,5 @@
    ============================================================================= */
 
 [data-style='material'] [data-fab-backdrop] {
-  background: rgba(0, 0, 0, 0.5);
+  @apply bg-surface-z10/50;
 }

package/src/material/list.css

@@ -68,6 +68,20 @@
   @apply text-primary-z6;
 }
 
+/* Literal / kanji icons */
+[data-style='material'] [data-list] [data-list-item] [data-item-icon-literal] {
+  @apply text-surface-z5;
+}
+
+[data-style='material'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon-literal],
+[data-style='material'] [data-list] [data-list-item]:focus:not(:disabled) [data-item-icon-literal] {
+  @apply text-surface-z7;
+}
+
+[data-style='material'] [data-list] [data-list-item][data-active='true'] [data-item-icon-literal] {
+  @apply text-primary-z6;
+}
+
 [data-style='material'] [data-list] [data-list-item] [data-item-description] {
   @apply text-surface-z5;
 }

package/src/material/range.css

@@ -26,11 +26,11 @@
 
 [data-style='material'] [data-range-thumb][data-sliding] {
   @apply shadow-lg;
-  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 25%, transparent);
+  @apply ring-4 ring-primary-z5/25;
 }
 
 [data-style='material'] [data-range-thumb]:focus-visible {
-  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 25%, transparent);
+  @apply ring-4 ring-primary-z5/25;
 }
 
 /* =============================================================================

package/src/material/select.css

@@ -112,7 +112,7 @@
 }
 
 [data-style='material'] [data-select-checkbox][data-checked='true'] {
-  @apply bg-primary-z5 border-primary-z5 bg-none text-white;
+  @apply bg-primary-z5 border-primary-z5 bg-none text-on-primary;
 }
 
 /* Item elements */

package/src/material/step-indicator.css

@@ -7,8 +7,7 @@
 }
 
 [data-style='material'] [data-step-item][data-step-state='current'] [data-step-number] {
-  @apply bg-surface-z2 border-primary-z5 text-primary-z7 bg-none;
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-500, #6366f1) 15%, transparent);
+  @apply bg-surface-z2 border-primary-z5 text-primary-z7 bg-none ring-3 ring-primary-z5/15;
 }
 
 [data-style='material'] [data-step-item][data-step-state='upcoming'] [data-step-number] {

package/src/material/switch.css

@@ -20,7 +20,7 @@
 }
 
 [data-style='material'] [data-switch][aria-checked='true'] [data-switch-thumb] {
-  @apply bg-white shadow-lg;
+  @apply bg-surface-z0 shadow-lg;
 }
 
 [data-style='material'] [data-switch-label] {

package/src/material/tabs.css

@@ -34,7 +34,7 @@
 
 /* Selected state */
 [data-style='material'] [data-tabs-trigger][data-selected] {
-  @apply bg-primary-z5 text-white shadow-md;
+  @apply bg-primary-z5 text-on-primary shadow-md;
 }
 
 /* Reset rokkit gradients bleeding in from body[data-style='rokkit'] ancestor */
@@ -76,7 +76,7 @@
 }
 
 [data-style='material'] [data-tabs-trigger][data-selected] [data-tabs-icon] {
-  @apply text-white;
+  @apply text-on-primary;
 }
 
 /* =============================================================================

package/src/material/timeline.css

@@ -17,8 +17,7 @@
 }
 
 [data-style='material'] [data-timeline-item][data-active] [data-timeline-circle] {
-  @apply border-primary text-primary;
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent);
+  @apply border-primary text-primary ring-3 ring-primary-z5/25;
 }
 
 /* =============================================================================

package/src/material/toggle.css

@@ -27,7 +27,7 @@
 
 /* Selected state */
 [data-style='material'] [data-toggle-option][data-selected='true'] {
-  @apply bg-primary-z5 bg-none text-white shadow-md;
+  @apply bg-primary-z5 bg-none text-on-primary shadow-md;
 }
 
 /* =============================================================================
@@ -44,5 +44,5 @@
 }
 
 [data-style='material'] [data-toggle-option][data-selected='true'] [data-toggle-icon] {
-  @apply text-white;
+  @apply text-on-primary;
 }

package/src/minimal/floating-action.css

@@ -59,5 +59,5 @@
    ============================================================================= */
 
 [data-style='minimal'] [data-fab-backdrop] {
-  background: rgba(0, 0, 0, 0.2);
+  @apply bg-surface-z10/20;
 }

package/src/minimal/list.css

@@ -69,6 +69,20 @@
   @apply text-secondary-z5;
 }
 
+/* Literal / kanji icons */
+[data-style='minimal'] [data-list] [data-list-item] [data-item-icon-literal] {
+  @apply text-surface-z5;
+}
+
+[data-style='minimal'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon-literal],
+[data-style='minimal'] [data-list] [data-list-item]:focus:not(:disabled) [data-item-icon-literal] {
+  @apply text-surface-z6;
+}
+
+[data-style='minimal'] [data-list] [data-list-item][data-active='true'] [data-item-icon-literal] {
+  @apply text-secondary-z5;
+}
+
 [data-style='minimal'] [data-list] [data-list-item] [data-item-description] {
   @apply text-surface-z5;
 }

package/src/minimal/select.css

@@ -105,22 +105,10 @@
 }
 
 [data-style='minimal'] [data-select-checkbox][data-checked='true'] {
-  @apply bg-primary-z5 border-primary-z5 bg-none text-white;
+  @apply bg-primary-z5 border-primary-z5 bg-none text-on-primary;
 }
 
 /* Item elements */
-/*[data-style='minimal'] [data-select-option] [data-item-icon] {
-  @apply text-surface-z5;
-}
-
-[data-style='minimal'] [data-select-option]:hover:not(:disabled) [data-item-icon] {
-  @apply text-surface-z6;
-}
-
-[data-style='minimal'] [data-select-option][data-selected='true'] [data-item-icon] {
-  @apply text-secondary-z7;
-}*/
-
 [data-style='minimal'] [data-select-option] [data-item-description] {
   @apply text-surface-z5;
 }

package/src/rokkit/floating-action.css

@@ -9,16 +9,16 @@
    ============================================================================= */
 
 [data-style='rokkit'] [data-fab-trigger] {
-  @apply from-primary-z5 to-secondary-z5 ring-primary-600 bg-gradient-to-r text-white shadow-lg ring-1;
+  @apply from-primary-z5 to-secondary-z5 ring-primary-z6 bg-gradient-to-r text-on-primary shadow-lg ring-1;
 }
 
 [data-style='rokkit'] [data-fab-trigger]:hover:not(:disabled) {
-  @apply from-primary-400 to-primary-500 ring-primary-500 bg-gradient-to-b shadow-xl ring-1;
+  @apply from-primary-z4 to-primary-z5 ring-primary-z5 bg-gradient-to-b shadow-xl ring-1;
   transform: scale(1.05);
 }
 
 [data-style='rokkit'] [data-fab-trigger]:focus-visible {
-  @apply ring-primary-400 shadow-lg ring-3 outline-none;
+  @apply ring-primary-z4 shadow-lg ring-3 outline-none;
 }
 
 [data-style='rokkit'] [data-fab][data-open='true'] [data-fab-trigger] {
@@ -44,7 +44,7 @@
 }
 
 [data-style='rokkit'] [data-fab-item]:focus-visible {
-  @apply ring-primary-400 shadow-md ring-2 outline-none;
+  @apply ring-primary-z4 shadow-md ring-2 outline-none;
 }
 
 /* Item icon */
@@ -61,5 +61,5 @@
    ============================================================================= */
 
 [data-style='rokkit'] [data-fab-backdrop] {
-  background: rgba(0, 0, 0, 0.4);
+  @apply bg-surface-z10/40;
 }

package/src/rokkit/floating-navigation.css

@@ -49,7 +49,7 @@
 }
 
 [data-style='rokkit'] [data-floating-nav-item]:focus-visible {
-  @apply ring-primary-400 ring-2 outline-none;
+  @apply ring-primary-z4 ring-2 outline-none;
 }
 
 /* Icon */

package/src/rokkit/index.css

@@ -34,7 +34,6 @@
 @import './chart.css';
 @import './swatch.css';
 @import './divider.css';
-@import './stack.css';
 @import './badge.css';
 @import './avatar.css';
 @import './tooltip.css';

package/src/rokkit/input.css

@@ -35,7 +35,7 @@
 }
 
 [data-style='rokkit'] [data-input-root]:focus-within {
-  @apply from-primary-500 to-secondary-500 border-transparent bg-gradient-to-r;
+  @apply from-primary-z5 to-secondary-z5 border-transparent bg-gradient-to-r;
 }
 
 /* Standard inputs inside wrapper */

package/src/rokkit/list.css

@@ -77,6 +77,31 @@
   @apply text-on-primary;
 }
 
+/* Literal / kanji icons */
+[data-style='rokkit'] [data-list] [data-list-item] [data-item-icon-literal] {
+  @apply text-surface-z5;
+}
+
+[data-style='rokkit'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon-literal],
+[data-style='rokkit'] [data-list] [data-list-item]:focus:not(:disabled) [data-item-icon-literal] {
+  @apply text-surface-z7;
+}
+
+[data-style='rokkit'] [data-list] [data-list-item][data-active='true'] [data-item-icon-literal] {
+  @apply text-primary-z6;
+}
+
+[data-style='rokkit']
+  [data-list]:focus-within
+  [data-list-item][data-active='true']
+  [data-item-icon-literal],
+[data-style='rokkit']
+  [data-list]
+  [data-list-item][data-active='true']:hover:not(:disabled)
+  [data-item-icon-literal] {
+  @apply text-on-primary;
+}
+
 /* Item description */
 [data-style='rokkit'] [data-list] [data-list-item] [data-item-description] {
   @apply text-surface-z5;

package/src/rokkit/range.css

@@ -26,11 +26,11 @@
 
 [data-style='rokkit'] [data-range-thumb][data-sliding] {
   @apply shadow-xl;
-  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-secondary) 30%, transparent);
+  @apply ring-4 ring-secondary-z5/30;
 }
 
 [data-style='rokkit'] [data-range-thumb]:focus-visible {
-  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-secondary) 30%, transparent);
+  @apply ring-4 ring-secondary-z5/30;
 }
 
 /* =============================================================================

package/src/rokkit/select.css

@@ -110,7 +110,7 @@
 }
 
 [data-style='rokkit'] [data-select-checkbox][data-checked='true'] {
-  @apply from-primary-z6 to-primary-z5 border-primary-z6 bg-gradient-to-b text-white;
+  @apply from-primary-z6 to-primary-z5 border-primary-z6 bg-gradient-to-b text-on-primary;
 }
 
 /* Item elements */

package/src/rokkit/step-indicator.css

@@ -7,8 +7,7 @@
 }
 
 [data-style='rokkit'] [data-step-item][data-step-state='current'] [data-step-number] {
-  @apply bg-surface-z2 border-primary-z5 text-primary-z7;
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-500, #6366f1) 20%, transparent);
+  @apply bg-surface-z2 border-primary-z5 text-primary-z7 ring-3 ring-primary-z5/20;
 }
 
 [data-style='rokkit'] [data-step-item][data-step-state='upcoming'] [data-step-number] {

package/src/rokkit/swatch.css

@@ -4,7 +4,7 @@
  */
 
 [data-style='rokkit'] [data-swatch-item][data-selected] {
-  @apply from-primary-500 to-secondary-500 bg-gradient-to-br;
+  @apply from-primary-z5 to-secondary-z5 bg-gradient-to-br;
 }
 
 [data-style='rokkit']

package/src/rokkit/switch.css

@@ -21,7 +21,7 @@
 }
 
 [data-style='rokkit'] [data-switch][aria-checked='true'] [data-switch-thumb] {
-  @apply bg-white shadow-md;
+  @apply bg-surface-z0 shadow-md;
 }
 
 [data-style='rokkit'] [data-switch-label] {

package/src/rokkit/timeline.css

@@ -17,8 +17,7 @@
 }
 
 [data-style='rokkit'] [data-timeline-item][data-active] [data-timeline-circle] {
-  @apply border-primary text-primary;
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
+  @apply border-primary text-primary ring-3 ring-primary-z5/20;
 }
 
 /* =============================================================================