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

package/src/minimal/input.css

@@ -1,29 +1,53 @@
 /* Minimal Theme - Form field and input styles
- * Underline-based input styling with clean, minimal appearance.
+ * Underline-only inputs with animated expanding focus line.
  */
 
 /* Input root: transparent background, bottom border only */
 [data-style='minimal'] [data-input-root] {
-  @apply border-surface-z3 relative flex items-center border-b bg-transparent p-0 transition-all;
+  @apply border-surface-z2 relative flex items-center border-b bg-transparent p-0;
   border-radius: 0;
   background-image: none;
+  transition: background-color 150ms ease;
 }
 
-/* Override rokkit default gradient on focus */
+/* Hover: very subtle neutral tint */
+[data-style='minimal'] [data-input-root]:hover:not(:focus-within) {
+  @apply bg-surface-z2;
+  background-image: none;
+}
+
+/* Focus: keep transparent — the ::after animated line handles the accent */
 [data-style='minimal'] [data-input-root]:focus-within {
-  @apply border-b-secondary-600 bg-transparent;
+  @apply bg-surface-z1;
   background-image: none;
 }
 
+/* Animated underline — grows left to right on focus */
+[data-style='minimal'] [data-input-root]::after {
+  content: '';
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  width: 0%;
+  height: 2px;
+  @apply bg-secondary-z6;
+  transition: width 0.3s ease;
+}
+
+[data-style='minimal'] [data-input-root]:focus-within::after {
+  width: 100%;
+}
+
 /* Inputs inside wrapper */
 [data-style='minimal']
   [data-input-root]
   input:not([type='checkbox'], [type='radio'], [type='color']),
 [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 transition-all outline-none;
+  @apply text-surface-z9 w-full border-none bg-transparent px-1 py-1.5 outline-none;
   font-size: 0.875rem;
   line-height: 1.25rem;
+  transition: color 150ms ease;
 }
 
 [data-style='minimal'] [data-input-root] textarea {
@@ -49,16 +73,17 @@
 
 /* Labels: smaller, uppercase */
 [data-style='minimal'] [data-field] > label {
-  @apply text-surface-z6 text-xs tracking-wide uppercase;
+  @apply text-surface-z5 text-xs tracking-wide uppercase;
+  transition: color 150ms ease;
 }
 
 [data-style='minimal'] [data-form-root] label {
-  @apply text-surface-z6 text-xs tracking-wide uppercase;
+  @apply text-surface-z5 text-xs tracking-wide uppercase;
 }
 
 /* Focused label: secondary color */
 [data-style='minimal'] [data-field]:has([data-input-root]:focus-within) > label {
-  @apply text-secondary-600;
+  @apply text-secondary-z6;
 }
 
 /* Field root */
@@ -78,22 +103,48 @@
 
 /* Disabled state */
 [data-style='minimal'] [data-field-disabled] [data-input-root] {
-  @apply border-surface-z3 cursor-not-allowed opacity-50;
+  @apply border-surface-z2 cursor-not-allowed opacity-40;
+}
+
+[data-style='minimal'] [data-field-disabled] [data-input-root]::after {
+  display: none;
 }
 
 /* Error state */
 [data-style='minimal'] [data-field-state='fail'] [data-input-root] {
-  @apply border-danger-z4;
+  @apply border-danger-z4 bg-danger-z1;
+}
+
+[data-style='minimal'] [data-field-state='fail'] [data-input-root]:hover:not(:focus-within) {
+  @apply bg-danger-z2;
+}
+
+[data-style='minimal'] [data-field-state='fail'] [data-input-root]::after {
+  @apply bg-danger-z5;
+}
+
+/* Pass state */
+[data-style='minimal'] [data-field-state='pass'] [data-input-root] {
+  @apply bg-success-z1;
+}
+
+[data-style='minimal'] [data-field-state='pass'] [data-input-root]:hover:not(:focus-within) {
+  @apply bg-success-z2;
+}
+
+[data-style='minimal'] [data-field-state='pass'] [data-input-root]::after {
+  @apply bg-success-z5;
+  width: 100%;
 }
 
 /* Description */
 [data-style='minimal'] [data-description] {
-  @apply text-surface-z6 mt-0.5 text-xs;
+  @apply text-surface-z5 mt-0.5 text-xs;
 }
 
 /* Message */
 [data-style='minimal'] [data-message] {
-  @apply text-danger-z6 mt-0.5 text-xs;
+  @apply text-danger-z5 mt-0.5 text-xs;
 }
 
 /* Checkbox */
@@ -104,16 +155,16 @@
 [data-style='minimal']
   [data-checkbox-root][data-variant='custom']:has(input:checked)
   [data-checkbox-icon] {
-  @apply text-secondary-600;
+  @apply text-secondary-z6;
 }
 
 /* Checkbox label: secondary on focus (checkbox has no input-root) */
 [data-style='minimal'] [data-field-type='checkbox'] [data-field]:has(:focus-within) > label {
-  @apply text-secondary-600;
+  @apply text-secondary-z6;
 }
 
 /* Placeholders */
 [data-style='minimal'] [data-input-root] input::placeholder,
 [data-style='minimal'] [data-input-root] textarea::placeholder {
-  @apply text-surface-z4;
+  @apply text-surface-z3;
 }

package/src/minimal/list.css

@@ -32,23 +32,23 @@
 [data-style='minimal']
   [data-list]
   [data-list-item]:focus:not(:disabled):not([data-disabled='true']) {
-  @apply text-surface-z9 border-l-surface-z2 border-l-2 outline-none;
+  @apply bg-none text-surface-z9 border-l-secondary-z4 border-l-2 outline-none;
 }
 
 /* Active state — muted when list not focused */
 [data-style='minimal'] [data-list] [data-list-item][data-active='true'] {
-  @apply text-surface-z8 border-primary-z4 border-l-2;
+  @apply bg-none text-surface-z8 border-primary-z4 border-l-2;
 }
 
 /* Active state — full highlight when list has focus */
 [data-style='minimal'] [data-list]:focus-within [data-list-item][data-active='true'] {
-  @apply text-primary-z7 border-primary-z4 border-l-2;
+  @apply bg-none text-primary-z7 border-primary-z4 border-l-2;
 }
 
 /* Active + hover/focus */
 [data-style='minimal'] [data-list] [data-list-item][data-active='true']:hover:not(:disabled),
 [data-style='minimal'] [data-list] [data-list-item][data-active='true']:focus:not(:disabled) {
-  @apply text-primary-z8;
+  @apply bg-none text-primary-z8;
 }
 
 /* =============================================================================
@@ -77,11 +77,11 @@
 }
 
 [data-style='minimal'] [data-list] [data-list-item] [data-item-badge] {
-  @apply text-surface-z6 border-surface-z4 border bg-transparent;
+  @apply bg-none text-surface-z6 border-surface-z4 border bg-transparent;
 }
 
 [data-style='minimal'] [data-list] [data-list-item][data-active='true'] [data-item-badge] {
-  @apply text-primary-z7 border-primary-z4;
+  @apply bg-none text-primary-z7 border-primary-z4;
 }
 
 /* =============================================================================
@@ -94,7 +94,7 @@
 
 [data-style='minimal'] [data-list] [data-list-group]:hover:not(:disabled),
 [data-style='minimal'] [data-list] [data-list-group]:focus:not(:disabled) {
-  @apply text-surface-z7 border-l-surface-z3 border-l-2;
+  @apply bg-none text-surface-z7 border-l-secondary-z4 border-l-2;
 }
 
 /* =============================================================================
@@ -102,7 +102,7 @@
    ============================================================================= */
 
 [data-style='minimal'] [data-list] [data-list-separator] {
-  @apply bg-surface-z3;
+  @apply bg-none bg-surface-z3;
 }
 
 /* =============================================================================

package/src/minimal/menu.css

@@ -9,11 +9,11 @@
    ============================================================================= */
 
 [data-style='minimal'] [data-menu-trigger] {
-  @apply border-surface-z4 text-surface-z7 border bg-transparent;
+  @apply bg-none border-surface-z4 text-surface-z7 border bg-transparent;
 }
 
 [data-style='minimal'] [data-menu-trigger]:hover:not(:disabled) {
-  @apply text-surface-z9 border-surface-z5;
+  @apply bg-none text-surface-z9 border-surface-z5;
 }
 
 [data-style='minimal'] [data-menu-trigger]:focus-visible {
@@ -21,7 +21,7 @@
 }
 
 [data-style='minimal'] [data-menu][data-open='true'] [data-menu-trigger] {
-  @apply border-surface-z6;
+  @apply bg-none border-surface-z6;
 }
 
 /* Trigger elements */
@@ -42,7 +42,7 @@
    ============================================================================= */
 
 [data-style='minimal'] [data-menu-dropdown] {
-  @apply bg-surface-z1 border-surface-z3 border shadow-sm;
+  @apply bg-none bg-surface-z1 border-surface-z3 border shadow-sm;
 }
 
 /* =============================================================================
@@ -55,7 +55,7 @@
 
 [data-style='minimal'] [data-menu-item]:hover:not(:disabled),
 [data-style='minimal'] [data-menu-item]:focus:not(:disabled) {
-  @apply text-surface-z9 border-l-surface-z2 border-l-2 outline-none;
+  @apply bg-none text-surface-z9 border-l-secondary-z4 border-l-2 outline-none;
 }
 
 /* Item elements */
@@ -84,5 +84,5 @@
    ============================================================================= */
 
 [data-style='minimal'] [data-menu-separator] {
-  @apply bg-surface-z3;
+  @apply bg-none bg-surface-z3;
 }

package/src/minimal/message.css

@@ -0,0 +1,36 @@
+/**
+ * Message - Minimal Theme Styles
+ */
+
+
+[data-style='minimal'] [data-message-root][data-type='error'] {
+  @apply bg-error-z1 border-error-z3 text-error-z8;
+}
+[data-style='minimal'] [data-message-root][data-type='error'] [data-message-icon],
+[data-style='minimal'] [data-message-root][data-type='error'] [data-message-dismiss] {
+  @apply text-error-z5;
+}
+
+[data-style='minimal'] [data-message-root][data-type='warning'] {
+  @apply bg-warning-z1 border-warning-z3 text-warning-z8;
+}
+[data-style='minimal'] [data-message-root][data-type='warning'] [data-message-icon],
+[data-style='minimal'] [data-message-root][data-type='warning'] [data-message-dismiss] {
+  @apply text-warning-z5;
+}
+
+[data-style='minimal'] [data-message-root][data-type='info'] {
+  @apply bg-info-z1 border-info-z3 text-info-z8;
+}
+[data-style='minimal'] [data-message-root][data-type='info'] [data-message-icon],
+[data-style='minimal'] [data-message-root][data-type='info'] [data-message-dismiss] {
+  @apply text-info-z5;
+}
+
+[data-style='minimal'] [data-message-root][data-type='success'] {
+  @apply bg-success-z1 border-success-z3 text-success-z8;
+}
+[data-style='minimal'] [data-message-root][data-type='success'] [data-message-icon],
+[data-style='minimal'] [data-message-root][data-type='success'] [data-message-dismiss] {
+  @apply text-success-z5;
+}

package/src/minimal/range.css

@@ -13,7 +13,7 @@
 }
 
 [data-style='minimal'] [data-range-selected] {
-  @apply bg-primary;
+  @apply bg-none bg-primary;
 }
 
 /* =============================================================================

package/src/minimal/search-filter.css

@@ -37,7 +37,7 @@
    ============================================================================= */
 
 [data-style='minimal'] [data-search-tag] {
-  @apply text-surface-z7 border-surface-z4 border bg-transparent;
+  @apply bg-none text-surface-z7 border-surface-z4 border bg-transparent;
 }
 
 [data-style='minimal'] [data-search-tag-remove] {

package/src/minimal/select.css

@@ -9,11 +9,11 @@
    ============================================================================= */
 
 [data-style='minimal'] [data-select-trigger] {
-  @apply text-surface-z7 border-surface-z4 border bg-transparent;
+  @apply bg-none text-surface-z7 border-surface-z4 border bg-transparent;
 }
 
 [data-style='minimal'] [data-select-trigger]:hover:not(:disabled) {
-  @apply border-surface-z5 text-surface-z8;
+  @apply bg-none border-surface-z5 text-surface-z8;
 }
 
 [data-style='minimal'] [data-select-trigger]:focus-visible {
@@ -21,7 +21,7 @@
 }
 
 [data-style='minimal'] [data-select][data-open='true'] [data-select-trigger] {
-  @apply border-surface-z6;
+  @apply bg-none border-surface-z6;
 }
 
 /* =============================================================================
@@ -49,7 +49,7 @@
    ============================================================================= */
 
 [data-style='minimal'] [data-select-tag] {
-  @apply text-surface-z7 border-surface-z4 border bg-transparent;
+  @apply bg-none text-surface-z7 border-surface-z4 border bg-transparent;
 }
 
 [data-style='minimal'] [data-select-tag-remove] {
@@ -65,7 +65,7 @@
    ============================================================================= */
 
 [data-style='minimal'] [data-select-dropdown] {
-  @apply bg-surface-z1 border-surface-z3 border shadow-sm;
+  @apply bg-none bg-surface-z1 border-surface-z3 border shadow-sm;
 }
 
 /* =============================================================================
@@ -79,19 +79,19 @@
 /* Hover and focus */
 [data-style='minimal'] [data-select-option]:hover:not(:disabled),
 [data-style='minimal'] [data-select-option]:focus:not(:disabled) {
-  @apply text-surface-z9 border-l-surface-z2 border-l-2 outline-none;
+  @apply bg-none text-surface-z9 border-l-secondary-z4 border-l-2 outline-none;
 }
 
 /* Selected state */
 [data-style='minimal'] [data-select-option][data-selected='true'] {
-  @apply text-surface-z8 border-primary-z4 border-l-2;
+  @apply bg-none text-surface-z8 border-primary-z4 border-l-2;
 }
 
 /* Selected state — full highlight when dropdown has focus */
 [data-style='minimal']
   [data-select-dropdown]:focus-within
   [data-select-option][data-selected='true'] {
-  @apply text-primary-z7 border-primary-z4 border-l-2;
+  @apply bg-none text-primary-z7 border-primary-z4 border-l-2;
 }
 
 /* Check mark */
@@ -101,11 +101,11 @@
 
 /* Checkbox */
 [data-style='minimal'] [data-select-checkbox] {
-  @apply border-surface-z5 bg-transparent;
+  @apply bg-none border-surface-z5 bg-transparent;
 }
 
 [data-style='minimal'] [data-select-checkbox][data-checked='true'] {
-  @apply bg-primary-z5 border-primary-z5 text-white;
+  @apply bg-none bg-primary-z5 border-primary-z5 text-white;
 }
 
 /* Item elements */
@@ -142,7 +142,7 @@
    ============================================================================= */
 
 [data-style='minimal'] [data-select-divider] {
-  @apply bg-surface-z3;
+  @apply bg-none bg-surface-z3;
 }
 
 /* =============================================================================

package/src/minimal/status-list.css

@@ -0,0 +1,66 @@
+/**
+ * StatusList - Minimal Theme Styles
+ */
+
+/* ── @rokkit/ui StatusList: icon and text colors by status ── */
+
+[data-style='minimal'] [data-status-item][data-status='pass'] span {
+  @apply text-success-z5;
+}
+[data-style='minimal'] [data-status-item][data-status='fail'] span {
+  @apply text-error-z5;
+}
+[data-style='minimal'] [data-status-item][data-status='warn'] span {
+  @apply text-warning-z5;
+}
+[data-style='minimal'] [data-status-item][data-status='unknown'] span {
+  @apply text-surface-z4;
+}
+
+[data-style='minimal'] [data-status-item][data-status='pass'] {
+  @apply text-success-z7;
+}
+[data-style='minimal'] [data-status-item][data-status='fail'] {
+  @apply text-error-z7;
+}
+[data-style='minimal'] [data-status-item][data-status='warn'] {
+  @apply text-warning-z7;
+}
+[data-style='minimal'] [data-status-item][data-status='unknown'] {
+  @apply text-surface-z5;
+}
+
+/* ── @rokkit/forms StatusList: group headers by severity ── */
+
+[data-style='minimal'] [data-status-group][data-severity='error'] [data-status-header] {
+  @apply text-error-z5;
+}
+[data-style='minimal'] [data-status-group][data-severity='warning'] [data-status-header] {
+  @apply text-warning-z5;
+}
+[data-style='minimal'] [data-status-group][data-severity='info'] [data-status-header] {
+  @apply text-info-z5;
+}
+[data-style='minimal'] [data-status-group][data-severity='success'] [data-status-header] {
+  @apply text-success-z5;
+}
+
+/* ── @rokkit/forms StatusList: item colors ── */
+
+[data-style='minimal'] [data-status-item][data-status='error'] {
+  @apply text-error-z7;
+}
+[data-style='minimal'] [data-status-item][data-status='warning'] {
+  @apply text-warning-z7;
+}
+[data-style='minimal'] [data-status-item][data-status='info'] {
+  @apply text-info-z7;
+}
+[data-style='minimal'] [data-status-item][data-status='success'] {
+  @apply text-success-z7;
+}
+
+/* Count badge */
+[data-style='minimal'] [data-status-count] {
+  @apply bg-none text-surface-z6 font-semibold;
+}

package/src/minimal/switch.css

@@ -3,7 +3,7 @@
  */
 
 [data-style='minimal'] [data-switch-track] {
-  @apply border-surface-z4 border-2 bg-transparent;
+  @apply bg-none border-surface-z4 border-2 bg-transparent;
 }
 
 [data-style='minimal'] [data-switch-thumb] {
@@ -16,7 +16,7 @@
 
 /* On state */
 [data-style='minimal'] [data-switch][aria-checked='true'] [data-switch-track] {
-  @apply border-primary-z4;
+  @apply bg-none border-primary-z4;
 }
 
 [data-style='minimal'] [data-switch][aria-checked='true'] [data-switch-thumb] {

package/src/minimal/table.css

@@ -49,15 +49,15 @@
 }
 
 [data-style='minimal'] [data-table-row]:hover {
-  @apply text-surface-z9;
+  @apply bg-none text-surface-z9;
 }
 
 [data-style='minimal'] [data-table-row]:focus {
-  @apply text-surface-z9 ring-surface-z5 ring-1 outline-none;
+  @apply bg-none text-surface-z9 ring-surface-z5 ring-1 outline-none;
 }
 
 [data-style='minimal'] [data-table-row][data-selected='true'] {
-  @apply text-primary-z8 border-l-primary-z4 border-l-2;
+  @apply bg-none text-primary-z8 border-l-primary-z4 border-l-2;
 }
 
 /* =============================================================================

package/src/minimal/tabs.css

@@ -1,7 +1,8 @@
 /**
  * Tabs - Minimal Theme Styles
  *
- * Clean, understated tabs with subtle bottom-border indicators.
+ * Underline-indicator tabs. Active tab: thick bottom border, bolder text.
+ * No background fill on any state — clean and typographic.
  */
 
 /* =============================================================================
@@ -9,7 +10,7 @@
    ============================================================================= */
 
 [data-style='minimal'] [data-tabs-list] {
-  @apply border-surface-z3 gap-1 border-b;
+  @apply border-surface-z3 gap-0 border-b;
 }
 
 [data-style='minimal'] [data-tabs][data-position='after'] [data-tabs-list] {
@@ -23,24 +24,104 @@
 [data-style='minimal']
   [data-tabs][data-orientation='vertical'][data-position='after']
   [data-tabs-list] {
-  @apply border-r-0 border-l;
+  @apply border-t-0 border-r-0 border-l;
 }
 
 /* =============================================================================
-   Tab Triggers
+   Tab Triggers — default: horizontal/before (bottom border)
    ============================================================================= */
 
 [data-style='minimal'] [data-tabs-trigger] {
-  @apply text-surface-z6 border-b-2 border-b-transparent;
+  @apply text-surface-z5 border-b-[3px] border-b-transparent;
+  font-weight: 400;
+  transition: color 150ms ease, border-color 150ms ease;
 }
 
 [data-style='minimal'] [data-tabs-trigger]:hover:not(:disabled):not([data-disabled]) {
   @apply text-surface-z8 border-b-surface-z4;
 }
 
-/* Selected state */
 [data-style='minimal'] [data-tabs-trigger][data-selected] {
-  @apply text-surface-z9 border-b-primary-z4;
+  @apply bg-none text-surface-z9 border-b-surface-z8;
+  font-weight: 600;
+}
+
+/* Reset rokkit gradients bleeding in */
+[data-style='minimal'] [data-tabs-list]:focus-within [data-tabs-trigger][data-selected] {
+  @apply bg-none;
+}
+
+[data-style='minimal']
+  [data-tabs][data-orientation='vertical']
+  [data-tabs-list]:focus-within
+  [data-tabs-trigger][data-selected] {
+  @apply bg-none;
+}
+
+[data-style='minimal']
+  [data-tabs][data-orientation='vertical'][data-position='after']
+  [data-tabs-list]:focus-within
+  [data-tabs-trigger][data-selected] {
+  @apply bg-none;
+}
+
+/* Horizontal after (tabs below content): top border */
+[data-style='minimal'] [data-tabs][data-position='after'] [data-tabs-trigger] {
+  @apply border-b-0 border-t-[3px] border-t-transparent;
+}
+
+[data-style='minimal']
+  [data-tabs][data-position='after']
+  [data-tabs-trigger]:hover:not(:disabled):not([data-disabled]) {
+  @apply border-t-surface-z4;
+}
+
+[data-style='minimal'] [data-tabs][data-position='after'] [data-tabs-trigger][data-selected] {
+  @apply border-t-surface-z8;
+  font-weight: 600;
+}
+
+[data-style='minimal']
+  [data-tabs][data-position='after']
+  [data-tabs-list]:focus-within
+  [data-tabs-trigger][data-selected] {
+  @apply bg-none;
+}
+
+/* Vertical before (tabs on left): right border */
+[data-style='minimal'] [data-tabs][data-orientation='vertical'] [data-tabs-trigger] {
+  @apply border-b-0 border-r-[3px] border-r-transparent rounded-none rounded-l;
+}
+
+[data-style='minimal']
+  [data-tabs][data-orientation='vertical']
+  [data-tabs-trigger]:hover:not(:disabled):not([data-disabled]) {
+  @apply border-r-surface-z4;
+}
+
+[data-style='minimal'] [data-tabs][data-orientation='vertical'] [data-tabs-trigger][data-selected] {
+  @apply border-r-surface-z8;
+  font-weight: 600;
+}
+
+/* Vertical after (tabs on right): left border */
+[data-style='minimal']
+  [data-tabs][data-orientation='vertical'][data-position='after']
+  [data-tabs-trigger] {
+  @apply border-t-0 border-b-0 border-r-0 border-l-[3px] border-l-transparent rounded-none rounded-r;
+}
+
+[data-style='minimal']
+  [data-tabs][data-orientation='vertical'][data-position='after']
+  [data-tabs-trigger]:hover:not(:disabled):not([data-disabled]) {
+  @apply border-t-0 border-b-0 border-r-0 border-l-surface-z4;
+}
+
+[data-style='minimal']
+  [data-tabs][data-orientation='vertical'][data-position='after']
+  [data-tabs-trigger][data-selected] {
+  @apply border-t-0 border-b-0 border-r-0 border-l-surface-z8;
+  font-weight: 600;
 }
 
 /* =============================================================================
@@ -48,15 +129,15 @@
    ============================================================================= */
 
 [data-style='minimal'] [data-tabs-trigger] [data-tabs-icon] {
-  @apply text-surface-z5;
+  @apply text-surface-z4;
 }
 
 [data-style='minimal'] [data-tabs-trigger]:hover:not(:disabled) [data-tabs-icon] {
-  @apply text-surface-z7;
+  @apply text-surface-z6;
 }
 
 [data-style='minimal'] [data-tabs-trigger][data-selected] [data-tabs-icon] {
-  @apply text-surface-z8;
+  @apply text-surface-z7;
 }
 
 /* =============================================================================

package/src/minimal/toggle.css

@@ -9,7 +9,7 @@
    ============================================================================= */
 
 [data-style='minimal'] [data-toggle] {
-  @apply border-surface-z3 rounded-lg border bg-transparent;
+  @apply bg-none border-surface-z3 rounded-lg border bg-transparent;
 }
 
 /* =============================================================================
@@ -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 text-surface-z8 border-b-surface-z2 border-b-2;
+  @apply bg-none text-surface-z8 border-b-surface-z2 border-b-2;
 }
 
 /* Selected state */
 [data-style='minimal'] [data-toggle-option][data-selected='true'] {
-  @apply text-surface-z9 border-b-primary-z4 border-b-2;
+  @apply bg-none text-surface-z9 border-b-primary-z4 border-b-2;
 }
 
 /* =============================================================================