@rokkit/themes 1.0.0-next.147 → 1.0.0-next.149

package/src/grada-ui/toggle.css

@@ -22,7 +22,8 @@
 
 /* Selected state — gradient */
 [data-style='grada-ui'] [data-toggle-option][data-selected='true'] {
-  background: var(--gd-gradient);
+  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-color: transparent;
   color: white;
   border-radius: 20px;
   @apply shadow-sm;

package/src/grada-ui/toolbar.css

@@ -4,28 +4,28 @@
 
 [data-style='grada-ui'] [data-toolbar] {
   @apply bg-white shadow-sm;
-  border-bottom: 1px solid var(--gd-grey-a);
+  border-bottom: 1px solid rgba(var(--color-surface-z300), 1);
 }
 
 [data-style='grada-ui'] [data-toolbar][data-toolbar-position='top'],
 [data-style='grada-ui'] [data-toolbar]:not([data-toolbar-position]) {
-  border-bottom: 1px solid var(--gd-grey-a);
+  border-bottom: 1px solid rgba(var(--color-surface-z300), 1);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
 }
 
 [data-style='grada-ui'] [data-toolbar][data-toolbar-position='bottom'] {
-  border-top: 1px solid var(--gd-grey-a);
+  border-top: 1px solid rgba(var(--color-surface-z300), 1);
   border-bottom: none;
   box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
 }
 
 [data-style='grada-ui'] [data-toolbar][data-toolbar-position='left'] {
-  border-right: 1px solid var(--gd-grey-a);
+  border-right: 1px solid rgba(var(--color-surface-z300), 1);
   border-bottom: none;
 }
 
 [data-style='grada-ui'] [data-toolbar][data-toolbar-position='right'] {
-  border-left: 1px solid var(--gd-grey-a);
+  border-left: 1px solid rgba(var(--color-surface-z300), 1);
   border-bottom: none;
 }
 
@@ -42,18 +42,20 @@
 [data-style='grada-ui']
   [data-toolbar-item]:focus-visible:not(:disabled):not([data-disabled='true']) {
   @apply bg-surface-z1 text-surface-z9;
-  outline: 2px solid var(--gd-primary);
+  outline: 2px solid rgba(var(--color-primary-500), 1);
   outline-offset: -2px;
 }
 
 /* Active */
 [data-style='grada-ui'] [data-toolbar-item][data-active='true'] {
-  background: var(--gd-gradient);
+  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-color: transparent;
   color: white;
 }
 
 [data-style='grada-ui'] [data-toolbar-item][data-active='true']:hover:not(:disabled) {
-  background: var(--gd-gradient);
+  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-color: transparent;
   filter: brightness(1.08);
   color: white;
 }

package/src/grada-ui/tree.css

@@ -25,15 +25,15 @@
 }
 
 [data-style='grada-ui'] [data-tree-item-content]:focus-visible {
-  outline: 2px solid var(--gd-primary);
+  outline: 2px solid rgba(var(--color-primary-500), 1);
   outline-offset: -2px;
 }
 
 /* Active/selected state */
 [data-style='grada-ui'] [data-tree-item-content][data-active='true'] {
   @apply bg-surface-z1;
-  border-left: 3px solid var(--gd-primary);
-  color: var(--gd-primary);
+  border-left: 3px solid rgba(var(--color-primary-500), 1);
+  color: rgba(var(--color-primary-500), 1);
 }
 
 [data-style='grada-ui'] [data-tree-item-content][data-active='true']:hover:not(:disabled) {
@@ -41,11 +41,11 @@
 }
 
 [data-style='grada-ui'] [data-tree]:focus-within [data-tree-item-content][data-active='true'] {
-  border-left: 3px solid var(--gd-primary);
+  border-left: 3px solid rgba(var(--color-primary-500), 1);
 }
 
 [data-style='grada-ui'] [data-tree]:not(:focus-within) [data-tree-item-content][data-active='true'] {
-  border-left: 3px solid var(--gd-primary);
+  border-left: 3px solid rgba(var(--color-primary-500), 1);
   opacity: 0.8;
 }
 
@@ -59,7 +59,7 @@
 }
 
 [data-style='grada-ui'] [data-tree-item-content][data-active='true'] [data-item-icon] {
-  color: var(--gd-primary);
+  color: rgba(var(--color-primary-500), 1);
 }
 
 [data-style='grada-ui'] [data-tree-item-content] [data-item-description] {
@@ -72,22 +72,23 @@
 }
 
 [data-style='grada-ui'] [data-tree-item-content][data-active='true'] [data-item-badge] {
-  background: var(--gd-gradient);
+  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-color: transparent;
   color: white;
 }
 
 /* Multi-Selection */
 [data-style='grada-ui'] [data-tree-node][data-selected='true'] [data-tree-node-row] {
-  background: color-mix(in srgb, var(--gd-primary) 15%, transparent);
+  background: rgba(var(--color-primary-500), 0.15);
 }
 
 [data-style='grada-ui'] [data-tree-node][data-selected='true'] [data-tree-item-content] {
-  color: var(--gd-primary);
+  color: rgba(var(--color-primary-500), 1);
 }
 
 [data-style='grada-ui']
   [data-tree-node][data-selected='true']
   [data-tree-item-content]
   [data-item-icon] {
-  color: var(--gd-primary);
+  color: rgba(var(--color-primary-500), 1);
 }

package/src/material/button.css

@@ -25,6 +25,11 @@
   @apply bg-none bg-secondary-z4 text-on-secondary shadow-md;
 }
 
+[data-style='material'] [data-button][data-style='default'][data-variant='accent'],
+[data-style='material'] [data-button]:not([data-style])[data-variant='accent'] {
+  @apply bg-none bg-accent-z4 text-on-accent shadow-md;
+}
+
 [data-style='material'] [data-button][data-style='default'][data-variant='danger'],
 [data-style='material'] [data-button]:not([data-style])[data-variant='danger'] {
   @apply bg-none bg-danger-z4 text-on-danger shadow-md;
@@ -47,6 +52,10 @@
   @apply border-secondary-z4 text-secondary-z6 border bg-transparent;
 }
 
+[data-style='material'] [data-button][data-style='outline'][data-variant='accent'] {
+  @apply border-accent-z4 text-accent-z6 border bg-transparent;
+}
+
 [data-style='material'] [data-button][data-style='outline'][data-variant='danger'] {
   @apply border-danger-z4 text-danger-z4 border bg-transparent;
 }
@@ -72,6 +81,10 @@
   @apply text-secondary-z6;
 }
 
+[data-style='material'] [data-button][data-style='ghost'][data-variant='accent'] {
+  @apply text-accent-z6;
+}
+
 [data-style='material'] [data-button][data-style='ghost'][data-variant='danger'] {
   @apply text-danger-z4;
 }
@@ -93,6 +106,10 @@
   @apply from-secondary-z5 to-secondary-z3 text-on-secondary bg-gradient-to-br shadow-md;
 }
 
+[data-style='material'] [data-button][data-style='gradient'][data-variant='accent'] {
+  @apply from-accent-z5 to-accent-z3 text-on-accent bg-gradient-to-br shadow-md;
+}
+
 [data-style='material'] [data-button][data-style='gradient'][data-variant='danger'] {
   @apply from-danger-z5 to-danger-z3 text-on-danger bg-gradient-to-br shadow-md;
 }
@@ -120,6 +137,10 @@
   @apply text-secondary-z6;
 }
 
+[data-style='material'] [data-button][data-style='link'][data-variant='accent'] {
+  @apply text-accent-z6;
+}
+
 [data-style='material'] [data-button][data-style='link'][data-variant='danger'] {
   @apply text-danger-z4;
 }

package/src/material/card.css

@@ -1,4 +1,5 @@
-* Card - Material Theme Styles
+/**
+ * Card - Material Theme Styles
  *
  * Material Design inspired with elevation and shadows.
  */

package/src/material/chart.css

@@ -0,0 +1,38 @@
+/**
+ * Chart - Material Theme Styles
+ */
+
+[data-style='material'] [data-chart-axis-line],
+[data-style='material'] [data-chart-tick] line {
+  @apply stroke-surface-z3;
+}
+
+[data-style='material'] [data-chart-tick-label] {
+  @apply fill-surface-z5;
+}
+
+[data-style='material'] [data-chart-grid-line] {
+  @apply stroke-surface-z3;
+  stroke-opacity: 0.5;
+  stroke-dasharray: 2 4;
+}
+
+[data-style='material'] [data-chart-legend-label] {
+  @apply fill-surface-z5;
+}
+
+[data-style='material'] [data-chart-legend-item]:hover {
+  @apply text-surface-z8;
+}
+
+[data-style='material'] [data-plot-element="bar"][data-dimmed],
+[data-style='material'] [data-plot-element="point"][data-dimmed],
+[data-style='material'] [data-plot-element="arc"][data-dimmed],
+[data-style='material'] [data-plot-element="line"][data-dimmed],
+[data-style='material'] [data-plot-element="area"][data-dimmed] {
+  opacity: 0.15;
+}
+
+[data-style='material'] [data-facet-title] {
+  @apply text-surface-z5;
+}

package/src/material/index.css

@@ -26,3 +26,5 @@
 @import './card.css';
 @import './message.css';
 @import './status-list.css';
+@import './chart.css';
+@import './swatch.css';

package/src/material/input.css

@@ -2,14 +2,9 @@
  * Material Design outlined text field with floating label.
  */
 
-/* Form background: needed so floating label pill matches */
+/* Form background */
 [data-style='material'] [data-form-root] {
   @apply bg-surface-z1;
-  --material-bg: rgba(var(--color-surface-100), 1);
-}
-
-[data-mode='dark'] [data-style='material'] [data-form-root] {
-  --material-bg: rgba(var(--color-surface-900), 1);
 }
 
 /* Field root: relative positioning for floating label */
@@ -17,9 +12,12 @@
   @apply relative gap-0;
 }
 
-/* Input root: outlined border */
-[data-style='material'] [data-input-root] {
+/* Input root: outlined border — force transparent even in dark mode
+ * (prevents body[data-mode="dark"][data-style="rokkit"] bleed on comparison pages) */
+[data-style='material'] [data-input-root],
+[data-mode='dark'] [data-style='material'] [data-input-root] {
   @apply border-surface-z4 flex items-center rounded border bg-transparent p-0 transition-all;
+  background-color: transparent;
   background-image: none;
 }
 
@@ -32,13 +30,21 @@
   background-image: none;
 }
 
-/* Inputs inside wrapper */
+/* Inputs inside wrapper — also target dark-mode to prevent rokkit bleed */
 [data-style='material']
   [data-input-root]
   input:not([type='checkbox'], [type='radio'], [type='color']),
+[data-mode='dark']
+  [data-style='material']
+  [data-input-root]
+  input:not([type='checkbox'], [type='radio'], [type='color']),
 [data-style='material'] [data-input-root] textarea,
-[data-style='material'] [data-input-root] select {
+[data-mode='dark'] [data-style='material'] [data-input-root] textarea,
+[data-style='material'] [data-input-root] select,
+[data-mode='dark'] [data-style='material'] [data-input-root] select {
   @apply text-surface-z9 w-full border-none bg-transparent px-3 py-2.5 transition-all outline-none;
+  background-color: transparent;
+  border-radius: 4px;
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
@@ -63,7 +69,6 @@
   @apply text-surface-z5 pointer-events-none absolute left-3 px-1 text-sm transition-all;
   top: 50%;
   transform: translateY(-50%);
-  background: transparent;
   z-index: 1;
 }
 
@@ -76,11 +81,11 @@
   [data-field-root]:not([data-field-type='checkbox']):not([data-field-empty='true'])
   [data-field]
   > label {
-  @apply text-xs;
+  @apply text-xs bg-surface-z1;
   top: 0;
   transform: translateY(-50%);
-  background: var(--material-bg, rgba(var(--color-surface-100), 1));
   padding-inline: 0.25rem;
+  border-radius: 2px;
 }
 
 [data-style='material']

package/src/material/swatch.css

@@ -0,0 +1,19 @@
+/**
+ * Swatch — Material Theme
+ * Selected: secondary outline ring. Hover/focus: primary outline ring.
+ */
+
+[data-style='material'] [data-swatch-item][data-selected] {
+  background: transparent;
+  @apply outline-secondary-z5;
+}
+
+[data-style='material'] [data-swatch-item]:hover:not(:disabled):not([data-disabled]):not([data-selected]),
+[data-style='material'] [data-swatch-item]:focus-visible:not(:disabled):not([data-disabled]):not([data-selected]) {
+  @apply outline-primary-z4;
+}
+
+[data-style='material'] [data-swatch-item][data-selected]:focus-visible {
+  @apply outline-secondary-z6;
+  outline-offset: 3px;
+}

package/src/material/tabs.css

@@ -9,7 +9,7 @@
    ============================================================================= */
 
 [data-style='material'] [data-tabs-list] {
-  @apply bg-surface-z2 gap-0.5 rounded-t-lg shadow-sm;
+  @apply bg-surface-z2 gap-0.5 rounded-t-lg shadow-sm border-0 px-0;
 }
 
 [data-style='material'] [data-tabs][data-position='after'] [data-tabs-list] {
@@ -21,7 +21,7 @@
    ============================================================================= */
 
 [data-style='material'] [data-tabs-trigger] {
-  @apply text-surface-z6 rounded-t-lg;
+  @apply bg-transparent text-surface-z6 rounded-t-lg;
 }
 
 [data-style='material'] [data-tabs][data-position='after'] [data-tabs-trigger] {

package/src/minimal/button.css

@@ -25,6 +25,11 @@
   @apply bg-none bg-secondary-z4 text-on-secondary border-transparent;
 }
 
+[data-style='minimal'] [data-button][data-style='default'][data-variant='accent'],
+[data-style='minimal'] [data-button]:not([data-style])[data-variant='accent'] {
+  @apply bg-none bg-accent-z4 text-on-accent border-transparent;
+}
+
 [data-style='minimal'] [data-button][data-style='default'][data-variant='danger'],
 [data-style='minimal'] [data-button]:not([data-style])[data-variant='danger'] {
   @apply bg-none bg-danger-z4 text-on-danger border-transparent;
@@ -47,6 +52,10 @@
   @apply border-secondary-z4 text-secondary-z6 border bg-transparent;
 }
 
+[data-style='minimal'] [data-button][data-style='outline'][data-variant='accent'] {
+  @apply border-accent-z4 text-accent-z6 border bg-transparent;
+}
+
 [data-style='minimal'] [data-button][data-style='outline'][data-variant='danger'] {
   @apply border-danger-z4 text-danger-z4 border bg-transparent;
 }
@@ -72,6 +81,10 @@
   @apply text-secondary-z6;
 }
 
+[data-style='minimal'] [data-button][data-style='ghost'][data-variant='accent'] {
+  @apply text-accent-z6;
+}
+
 [data-style='minimal'] [data-button][data-style='ghost'][data-variant='danger'] {
   @apply text-danger-z4;
 }
@@ -93,6 +106,10 @@
   @apply from-secondary-z5 to-secondary-z3 text-on-secondary bg-gradient-to-br;
 }
 
+[data-style='minimal'] [data-button][data-style='gradient'][data-variant='accent'] {
+  @apply from-accent-z5 to-accent-z3 text-on-accent bg-gradient-to-br;
+}
+
 [data-style='minimal'] [data-button][data-style='gradient'][data-variant='danger'] {
   @apply from-danger-z5 to-danger-z3 text-on-danger bg-gradient-to-br;
 }
@@ -119,6 +136,10 @@
   @apply text-secondary-z6;
 }
 
+[data-style='minimal'] [data-button][data-style='link'][data-variant='accent'] {
+  @apply text-accent-z6;
+}
+
 [data-style='minimal'] [data-button][data-style='link'][data-variant='danger'] {
   @apply text-danger-z4;
 }

package/src/minimal/card.css

@@ -1,4 +1,5 @@
-* Card - Minimal Theme Styles
+/**
+ * Card - Minimal Theme Styles
  *
  * Clean, flat styling with subtle borders.
  */

package/src/minimal/chart.css

@@ -0,0 +1,38 @@
+/**
+ * Chart - Minimal Theme Styles
+ */
+
+[data-style='minimal'] [data-chart-axis-line],
+[data-style='minimal'] [data-chart-tick] line {
+  @apply stroke-surface-z3;
+}
+
+[data-style='minimal'] [data-chart-tick-label] {
+  @apply fill-surface-z5;
+}
+
+[data-style='minimal'] [data-chart-grid-line] {
+  @apply stroke-surface-z3;
+  stroke-opacity: 0.5;
+  stroke-dasharray: 2 4;
+}
+
+[data-style='minimal'] [data-chart-legend-label] {
+  @apply fill-surface-z5;
+}
+
+[data-style='minimal'] [data-chart-legend-item]:hover {
+  @apply text-surface-z8;
+}
+
+[data-style='minimal'] [data-plot-element="bar"][data-dimmed],
+[data-style='minimal'] [data-plot-element="point"][data-dimmed],
+[data-style='minimal'] [data-plot-element="arc"][data-dimmed],
+[data-style='minimal'] [data-plot-element="line"][data-dimmed],
+[data-style='minimal'] [data-plot-element="area"][data-dimmed] {
+  opacity: 0.15;
+}
+
+[data-style='minimal'] [data-facet-title] {
+  @apply text-surface-z5;
+}

package/src/minimal/index.css

@@ -26,3 +26,5 @@
 @import './card.css';
 @import './message.css';
 @import './status-list.css';
+@import './chart.css';
+@import './swatch.css';

package/src/minimal/input.css

@@ -4,7 +4,7 @@
 
 /* Input root: transparent background, bottom border only */
 [data-style='minimal'] [data-input-root] {
-  @apply border-surface-z2 relative flex items-center border-b bg-transparent p-0;
+  @apply border-surface-z4 relative flex items-center border-b bg-transparent p-0;
   border-radius: 0;
   background-image: none;
   transition: background-color 150ms ease;
@@ -45,6 +45,7 @@
 [data-style='minimal'] [data-input-root] textarea,
 [data-style='minimal'] [data-input-root] select {
   @apply text-surface-z9 w-full border-none bg-transparent px-1 py-1.5 outline-none;
+  border-radius: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
   transition: color 150ms ease;

package/src/minimal/swatch.css

@@ -0,0 +1,19 @@
+/**
+ * Swatch — Minimal Theme
+ * Selected: secondary outline ring. Hover/focus: primary outline ring.
+ */
+
+[data-style='minimal'] [data-swatch-item][data-selected] {
+  background: transparent;
+  @apply outline-secondary-z5;
+}
+
+[data-style='minimal'] [data-swatch-item]:hover:not(:disabled):not([data-disabled]):not([data-selected]),
+[data-style='minimal'] [data-swatch-item]:focus-visible:not(:disabled):not([data-disabled]):not([data-selected]) {
+  @apply outline-primary-z4;
+}
+
+[data-style='minimal'] [data-swatch-item][data-selected]:focus-visible {
+  @apply outline-secondary-z6;
+  outline-offset: 3px;
+}

package/src/minimal/switch.css

@@ -1,13 +1,16 @@
 /**
  * Switch - Minimal Theme Styles
+ * Flat filled pill — no borders, no shadows, just color transitions.
  */
 
 [data-style='minimal'] [data-switch-track] {
-  @apply bg-none border-surface-z4 border-2 bg-transparent;
+  @apply bg-surface-z4 border-0;
+  background-image: none;
 }
 
-[data-style='minimal'] [data-switch-thumb] {
-  @apply bg-surface-z5;
+[data-style='minimal'] [data-switch] [data-switch-thumb] {
+  --switch-thumb-travel: 1.25rem;
+  @apply bg-surface-z1;
 }
 
 [data-style='minimal'] [data-switch]:focus-visible [data-switch-track] {
@@ -16,11 +19,12 @@
 
 /* On state */
 [data-style='minimal'] [data-switch][aria-checked='true'] [data-switch-track] {
-  @apply bg-none border-primary-z4;
+  @apply bg-primary-z5 border-0;
+  background-image: none;
 }
 
 [data-style='minimal'] [data-switch][aria-checked='true'] [data-switch-thumb] {
-  @apply bg-primary-z4;
+  @apply bg-surface-z1;
 }
 
 [data-style='minimal'] [data-switch-label] {

package/src/minimal/tabs.css

@@ -10,7 +10,7 @@
    ============================================================================= */
 
 [data-style='minimal'] [data-tabs-list] {
-  @apply border-surface-z3 gap-0 border-b;
+  @apply border-surface-z3 gap-0 border-0 border-b px-0;
 }
 
 [data-style='minimal'] [data-tabs][data-position='after'] [data-tabs-list] {
@@ -32,7 +32,7 @@
    ============================================================================= */
 
 [data-style='minimal'] [data-tabs-trigger] {
-  @apply text-surface-z5 border-b-[3px] border-b-transparent;
+  @apply bg-transparent text-surface-z5 border-b-[3px] border-b-transparent;
   font-weight: 400;
   transition: color 150ms ease, border-color 150ms ease;
 }

package/src/minimal/toggle.css

@@ -22,12 +22,12 @@
 
 [data-style='minimal'] [data-toggle-option]:hover:not(:disabled):not([data-disabled='true']),
 [data-style='minimal'] [data-toggle-option]:focus:not(:disabled):not([data-disabled='true']) {
-  @apply bg-none text-surface-z8 border-b-surface-z2 border-b-2;
+  @apply bg-surface-z2 text-surface-z8;
 }
 
-/* Selected state */
+/* Selected state — subtle fill with primary bottom accent */
 [data-style='minimal'] [data-toggle-option][data-selected='true'] {
-  @apply bg-none text-surface-z9 border-b-primary-z4 border-b-2;
+  @apply bg-surface-z3 text-surface-z9 border-b-primary-z5 border-b-2;
 }
 
 /* =============================================================================

package/src/rokkit/button.css

@@ -28,6 +28,12 @@
   @apply from-secondary-z4 to-secondary-z3 border-secondary-z5 text-on-secondary border bg-gradient-to-b;
 }
 
+/* Accent variant */
+[data-style='rokkit'] [data-button][data-style='default'][data-variant='accent'],
+[data-style='rokkit'] [data-button]:not([data-style])[data-variant='accent'] {
+  @apply from-accent-z4 to-accent-z3 border-accent-z5 text-on-accent border bg-gradient-to-b;
+}
+
 /* Danger variant */
 [data-style='rokkit'] [data-button][data-style='default'][data-variant='danger'],
 [data-style='rokkit'] [data-button]:not([data-style])[data-variant='danger'] {
@@ -51,6 +57,10 @@
   @apply border-secondary-z4 text-secondary-z6 border bg-transparent;
 }
 
+[data-style='rokkit'] [data-button][data-style='outline'][data-variant='accent'] {
+  @apply border-accent-z4 text-accent-z6 border bg-transparent;
+}
+
 [data-style='rokkit'] [data-button][data-style='outline'][data-variant='danger'] {
   @apply border-danger-z4 text-danger-z4 border bg-transparent;
 }
@@ -76,6 +86,10 @@
   @apply text-secondary-z6;
 }
 
+[data-style='rokkit'] [data-button][data-style='ghost'][data-variant='accent'] {
+  @apply text-accent-z6;
+}
+
 [data-style='rokkit'] [data-button][data-style='ghost'][data-variant='danger'] {
   @apply text-danger-z4;
 }
@@ -97,6 +111,10 @@
   @apply from-secondary-z5 to-secondary-z3 text-on-secondary bg-gradient-to-br;
 }
 
+[data-style='rokkit'] [data-button][data-style='gradient'][data-variant='accent'] {
+  @apply from-accent-z5 to-accent-z3 text-on-accent bg-gradient-to-br;
+}
+
 [data-style='rokkit'] [data-button][data-style='gradient'][data-variant='danger'] {
   @apply from-danger-z5 to-danger-z3 text-on-danger bg-gradient-to-br;
 }
@@ -123,6 +141,10 @@
   @apply text-secondary-z6;
 }
 
+[data-style='rokkit'] [data-button][data-style='link'][data-variant='accent'] {
+  @apply text-accent-z6;
+}
+
 [data-style='rokkit'] [data-button][data-style='link'][data-variant='danger'] {
   @apply text-danger-z4;
 }
@@ -167,6 +189,13 @@
   @apply from-secondary-z2 to-secondary-z1 bg-gradient-to-b;
 }
 
+[data-style='rokkit']
+  [data-button][data-style='outline']:hover:not(:disabled):not(
+    [data-disabled]
+  )[data-variant='accent'] {
+  @apply from-accent-z2 to-accent-z1 bg-gradient-to-b;
+}
+
 [data-style='rokkit']
   [data-button][data-style='outline']:hover:not(:disabled):not(
     [data-disabled]
@@ -198,6 +227,13 @@
   @apply bg-secondary-z1;
 }
 
+[data-style='rokkit']
+  [data-button][data-style='ghost']:hover:not(:disabled):not(
+    [data-disabled]
+  )[data-variant='accent'] {
+  @apply bg-accent-z1;
+}
+
 [data-style='rokkit']
   [data-button][data-style='ghost']:hover:not(:disabled):not(
     [data-disabled]

package/src/rokkit/card.css

@@ -1,4 +1,5 @@
-* Card - Rokkit Theme Styles
+/**
+ * Card - Rokkit Theme Styles
  *
  * Rich gradients, elevated shadows, and vibrant surface styling.
  */