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

package/src/minimal/toolbar.css

@@ -9,7 +9,7 @@
    ============================================================================= */
 
 [data-style='minimal'] [data-toolbar] {
-  @apply bg-transparent;
+  @apply bg-none bg-transparent;
 }
 
 /* Position-based borders */
@@ -39,21 +39,21 @@
 }
 
 [data-style='minimal'] [data-toolbar-item]:hover:not(:disabled):not([data-disabled='true']) {
-  @apply text-surface-z9;
+  @apply bg-none text-surface-z9;
 }
 
 [data-style='minimal']
   [data-toolbar-item]:focus-visible:not(:disabled):not([data-disabled='true']) {
-  @apply text-surface-z9 ring-surface-z5 ring-1 outline-none;
+  @apply bg-none text-surface-z9 ring-surface-z5 ring-1 outline-none;
 }
 
 /* Active/pressed state */
 [data-style='minimal'] [data-toolbar-item][data-active='true'] {
-  @apply text-primary-z7;
+  @apply bg-none text-primary-z7;
 }
 
 [data-style='minimal'] [data-toolbar-item][data-active='true']:hover:not(:disabled) {
-  @apply text-primary-z8;
+  @apply bg-none text-primary-z8;
 }
 
 /* =============================================================================
@@ -77,9 +77,9 @@
    ============================================================================= */
 
 [data-style='minimal'] [data-toolbar-separator] {
-  @apply bg-surface-z3;
+  @apply bg-none bg-surface-z3;
 }
 
 [data-style='minimal'] [data-toolbar-divider] {
-  @apply bg-surface-z3;
+  @apply bg-none bg-surface-z3;
 }

package/src/minimal/tree.css

@@ -21,7 +21,7 @@
 }
 
 [data-style='minimal'] [data-tree-toggle-btn]:hover {
-  @apply text-surface-z6;
+  @apply bg-none text-surface-z6;
 }
 
 /* =============================================================================
@@ -34,7 +34,7 @@
 
 [data-style='minimal'] [data-tree-item-content]:hover:not(:disabled),
 [data-style='minimal'] [data-tree-item-content]:focus:not(:disabled) {
-  @apply text-surface-z9 outline-none;
+  @apply bg-none text-surface-z9 outline-none;
 }
 
 /* Focus visible for keyboard navigation */
@@ -51,6 +51,19 @@
   @apply text-primary-z8;
 }
 
+/* Reset rokkit gradients bleeding in from body[data-style='rokkit'] ancestor */
+[data-style='minimal'] [data-tree]:focus-within [data-tree-item-content][data-active='true'] {
+  @apply bg-none;
+}
+
+[data-style='minimal'] [data-tree]:focus-within [data-tree-item-content][data-active='true']:hover:not(:disabled) {
+  @apply bg-none;
+}
+
+[data-style='minimal'] [data-tree]:not(:focus-within) [data-tree-item-content][data-active='true'] {
+  @apply bg-none;
+}
+
 /* =============================================================================
    Item Elements
    ============================================================================= */
@@ -76,13 +89,21 @@
 }
 
 [data-style='minimal'] [data-tree-item-content] [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-tree-item-content][data-active='true'] [data-item-badge] {
   @apply text-primary-z7 border-primary-z4;
 }
 
+[data-style='minimal'] [data-tree]:focus-within [data-tree-item-content][data-active='true'] [data-item-badge] {
+  @apply bg-none;
+}
+
+[data-style='minimal'] [data-tree]:not(:focus-within) [data-tree-item-content][data-active='true'] [data-item-badge] {
+  @apply bg-none;
+}
+
 /* =============================================================================
    Multi-Selection
    ============================================================================= */

package/src/rokkit/card.css

@@ -62,3 +62,40 @@
   @apply cursor-not-allowed opacity-50;
   transform: none;
 }
+
+/* =============================================================================
+   Variants
+   ============================================================================= */
+
+/* Primary — gradient from primary to secondary */
+[data-style='rokkit'] [data-card][data-variant='primary'] {
+  @apply from-primary-z5 to-secondary-z5 border-primary-z6 text-on-primary bg-gradient-to-br shadow-lg;
+}
+
+[data-style='rokkit'] [data-card][data-variant='primary'] [data-card-header],
+[data-style='rokkit'] [data-card][data-variant='primary'] [data-card-footer] {
+  @apply border-primary-z4/40;
+}
+
+[data-style='rokkit'] [data-card][data-variant='primary'] [data-card-body] {
+  @apply text-on-primary/80;
+}
+
+/* Secondary — muted secondary surface */
+[data-style='rokkit'] [data-card][data-variant='secondary'] {
+  @apply from-secondary-z4 to-secondary-z3 border-secondary-z5 text-on-secondary bg-gradient-to-b shadow;
+}
+
+[data-style='rokkit'] [data-card][data-variant='secondary'] [data-card-header],
+[data-style='rokkit'] [data-card][data-variant='secondary'] [data-card-footer] {
+  @apply border-secondary-z4/40;
+}
+
+[data-style='rokkit'] [data-card][data-variant='secondary'] [data-card-body] {
+  @apply text-on-secondary/80;
+}
+
+/* Tertiary — elevated surface, no color accent */
+[data-style='rokkit'] [data-card][data-variant='tertiary'] {
+  @apply from-surface-z3 to-surface-z2 border-surface-z4 text-surface-z7 bg-gradient-to-b shadow;
+}

package/src/rokkit/dropdown.css

@@ -0,0 +1,70 @@
+/**
+ * Dropdown - Rokkit Theme Styles
+ *
+ * Rich gradients and glowing borders.
+ */
+
+/* =============================================================================
+   Trigger
+   ============================================================================= */
+
+[data-style='rokkit'] [data-dropdown-trigger] {
+  @apply from-surface-z3 to-surface-z2 border-surface-z4 text-surface-z8 border bg-gradient-to-b;
+}
+
+[data-style='rokkit'] [data-dropdown-trigger]:hover:not(:disabled) {
+  @apply from-surface-z4 to-surface-z3 text-surface-z10 border-surface-z5 bg-gradient-to-b;
+}
+
+[data-style='rokkit'] [data-dropdown-trigger]:focus-visible {
+  @apply outline-none;
+}
+
+[data-style='rokkit'] [data-dropdown][data-open='true'] [data-dropdown-trigger] {
+  @apply from-primary-z5 to-secondary-z5 border-primary-z5 bg-gradient-to-b;
+}
+
+[data-style='rokkit'] [data-dropdown-trigger] [data-dropdown-icon] {
+  @apply text-surface-z5;
+}
+
+[data-style='rokkit'] [data-dropdown-trigger]:hover:not(:disabled) [data-dropdown-icon] {
+  @apply text-surface-z7;
+}
+
+[data-style='rokkit'] [data-dropdown-trigger] [data-dropdown-arrow] {
+  @apply text-surface-z5;
+}
+
+/* =============================================================================
+   Panel
+   ============================================================================= */
+
+[data-style='rokkit'] [data-dropdown-panel] {
+  @apply from-surface-z2 to-surface-z1 border-surface-z4 border bg-gradient-to-b shadow-md;
+}
+
+/* =============================================================================
+   Options
+   ============================================================================= */
+
+[data-style='rokkit'] [data-dropdown-option] {
+  @apply text-surface-z8;
+}
+
+[data-style='rokkit'] [data-dropdown-option]:hover:not(:disabled),
+[data-style='rokkit'] [data-dropdown-option]:focus:not(:disabled) {
+  @apply from-surface-z3 to-surface-z2 text-surface-z10 bg-gradient-to-r outline-none;
+}
+
+[data-style='rokkit'] [data-dropdown-option][data-active='true'] {
+  @apply from-primary-z5 to-secondary-z5 text-primary-z9 bg-gradient-to-r;
+}
+
+/* =============================================================================
+   Separator
+   ============================================================================= */
+
+[data-style='rokkit'] [data-dropdown-separator] {
+  @apply via-surface-z4 bg-gradient-to-r from-transparent to-transparent;
+}

package/src/rokkit/index.css

@@ -15,6 +15,7 @@
 @import './connector.css';
 @import './select.css';
 @import './menu.css';
+@import './dropdown.css';
 @import './floating-action.css';
 @import './input.css';
 @import './table.css';
@@ -26,3 +27,6 @@
 @import './upload-target.css';
 @import './upload-progress.css';
 @import './toc.css';
+@import './card.css';
+@import './message.css';
+@import './status-list.css';

package/src/rokkit/message.css

@@ -0,0 +1,44 @@
+/**
+ * Message - Rokkit Theme Styles
+ */
+
+/* Type colors */
+[data-style='rokkit'] [data-message-root][data-type='error'] {
+  @apply bg-error-z1 border-error-z4 text-error-z8;
+}
+[data-style='rokkit'] [data-message-root][data-type='error'] [data-message-icon] {
+  @apply text-error-z6;
+}
+[data-style='rokkit'] [data-message-root][data-type='error'] [data-message-dismiss] {
+  @apply text-error-z6;
+}
+
+[data-style='rokkit'] [data-message-root][data-type='warning'] {
+  @apply bg-warning-z1 border-warning-z4 text-warning-z8;
+}
+[data-style='rokkit'] [data-message-root][data-type='warning'] [data-message-icon] {
+  @apply text-warning-z6;
+}
+[data-style='rokkit'] [data-message-root][data-type='warning'] [data-message-dismiss] {
+  @apply text-warning-z6;
+}
+
+[data-style='rokkit'] [data-message-root][data-type='info'] {
+  @apply bg-info-z1 border-info-z4 text-info-z8;
+}
+[data-style='rokkit'] [data-message-root][data-type='info'] [data-message-icon] {
+  @apply text-info-z6;
+}
+[data-style='rokkit'] [data-message-root][data-type='info'] [data-message-dismiss] {
+  @apply text-info-z6;
+}
+
+[data-style='rokkit'] [data-message-root][data-type='success'] {
+  @apply bg-success-z1 border-success-z4 text-success-z8;
+}
+[data-style='rokkit'] [data-message-root][data-type='success'] [data-message-icon] {
+  @apply text-success-z6;
+}
+[data-style='rokkit'] [data-message-root][data-type='success'] [data-message-dismiss] {
+  @apply text-success-z6;
+}

package/src/rokkit/status-list.css

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

package/src/rokkit/tabs.css

@@ -23,7 +23,7 @@
 [data-style='rokkit']
   [data-tabs][data-orientation='vertical'][data-position='after']
   [data-tabs-list] {
-  @apply border-r-0 border-l-2;
+  @apply border-t-0 border-r-0 border-l-2;
 }
 
 [data-style='rokkit'] [data-tabs-list]:focus-within {
@@ -42,6 +42,30 @@
   @apply rounded-t-none rounded-b;
 }
 
+[data-style='rokkit'] [data-tabs][data-orientation='vertical'] [data-tabs-trigger] {
+  @apply rounded-none rounded-l;
+}
+
+[data-style='rokkit']
+  [data-tabs][data-orientation='vertical']
+  [data-tabs-list]:focus-within
+  [data-tabs-trigger][data-selected] {
+  @apply bg-gradient-to-r;
+}
+
+[data-style='rokkit']
+  [data-tabs][data-orientation='vertical'][data-position='after']
+  [data-tabs-trigger] {
+  @apply rounded-none rounded-r;
+}
+
+[data-style='rokkit']
+  [data-tabs][data-orientation='vertical'][data-position='after']
+  [data-tabs-list]:focus-within
+  [data-tabs-trigger][data-selected] {
+  @apply bg-gradient-to-l;
+}
+
 [data-style='rokkit'] [data-tabs-trigger]:hover:not(:disabled):not([data-disabled]) {
   @apply bg-surface-z2 text-surface-z8;
 }

package/src/rokkit/toolbar.css

@@ -30,6 +30,12 @@
   @apply border-surface-z4 border-l shadow-sm;
 }
 
+/* Compact item spacing for small toolbars */
+[data-style='rokkit'] [data-toolbar][data-toolbar-size='sm'],
+[data-style='rokkit'] [data-toolbar][data-size='sm'] {
+  gap: 1px;
+}
+
 /* =============================================================================
    Toolbar Items
    ============================================================================= */