@rokkit/themes 1.0.0-next.99 → 1.0.2

package/src/minimal/tabs.css

@@ -1,44 +1,151 @@
-.minimal tabs:focus {
-  @apply outline-none;
+/**
+ * Tabs - Minimal Theme Styles
+ *
+ * Underline-indicator tabs. Active tab: thick bottom border, bolder text.
+ * No background fill on any state — clean and typographic.
+ */
+
+/* =============================================================================
+   Tab List
+   ============================================================================= */
+
+[data-style='minimal'] [data-tabs-list] {
+  @apply border-surface-z3 gap-0 border-0 border-b px-0;
+}
+
+[data-style='minimal'] [data-tabs][data-position='after'] [data-tabs-list] {
+  @apply border-t border-b-0;
+}
+
+[data-style='minimal'] [data-tabs][data-orientation='vertical'] [data-tabs-list] {
+  @apply border-r border-b-0;
+}
+
+[data-style='minimal']
+  [data-tabs][data-orientation='vertical'][data-position='after']
+  [data-tabs-list] {
+  @apply border-t-0 border-r-0 border-l;
+}
+
+/* =============================================================================
+   Tab Triggers — default: horizontal/before (bottom border)
+   ============================================================================= */
+
+[data-style='minimal'] [data-tabs-trigger] {
+  @apply text-surface-z5 border-b-[3px] border-b-transparent bg-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;
+}
+
+[data-style='minimal'] [data-tabs-trigger][data-selected] {
+  @apply text-surface-z9 border-b-surface-z8 bg-none;
+  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;
 }
-.minimal tabs {
-  @apply box-border px-2 gap-2 border-b-2 border-neutral-subtle cursor-pointer select-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;
 }
-.minimal tabs .tab {
-  @apply leading-8 text-base px-2;
+
+/* Horizontal after (tabs below content): top border */
+[data-style='minimal'] [data-tabs][data-position='after'] [data-tabs-trigger] {
+  @apply border-t-[3px] border-b-0 border-t-transparent;
 }
-.minimal tabs .tab icon[role='img'] {
-  @apply w-6 h-6;
+
+[data-style='minimal']
+  [data-tabs][data-position='after']
+  [data-tabs-trigger]:hover:not(:disabled):not([data-disabled]) {
+  @apply border-t-surface-z4;
 }
-.minimal tabs .tab icon[role='button'] {
-  @apply w-4 h-4;
+
+[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 rounded-none rounded-l border-r-[3px] border-b-0 border-r-transparent;
 }
-.minimal tabs.is-below {
-  @apply border-b-none border-t-2;
+
+[data-style='minimal']
+  [data-tabs][data-orientation='vertical']
+  [data-tabs-trigger]:hover:not(:disabled):not([data-disabled]) {
+  @apply border-r-surface-z4;
 }
-.minimal tabs > p {
-  @apply pr-4;
+
+[data-style='minimal'] [data-tabs][data-orientation='vertical'] [data-tabs-trigger][data-selected] {
+  @apply border-r-surface-z8;
+  font-weight: 600;
 }
-.minimal tabs .tab {
-  @apply flex relative gap-1 items-center;
+
+/* Vertical after (tabs on right): left border */
+[data-style='minimal']
+  [data-tabs][data-orientation='vertical'][data-position='after']
+  [data-tabs-trigger] {
+  @apply rounded-none rounded-r border-t-0 border-r-0 border-b-0 border-l-[3px] border-l-transparent;
 }
-.minimal tabs .tab > img {
-  @apply w-5 h-5;
+
+[data-style='minimal']
+  [data-tabs][data-orientation='vertical'][data-position='after']
+  [data-tabs-trigger]:hover:not(:disabled):not([data-disabled]) {
+  @apply border-l-surface-z4 border-t-0 border-r-0 border-b-0;
 }
 
-.minimal tabs .tab[aria-selected='true'] {
-  @apply -mb-2px border-b-2 border-secondary-600;
+[data-style='minimal']
+  [data-tabs][data-orientation='vertical'][data-position='after']
+  [data-tabs-trigger][data-selected] {
+  @apply border-l-surface-z8 border-t-0 border-r-0 border-b-0;
+  font-weight: 600;
 }
-.minimal tabs.is-below .tab {
-  @apply pt-2px;
+
+/* =============================================================================
+   Tab Icon
+   ============================================================================= */
+
+[data-style='minimal'] [data-tabs-trigger] [data-tabs-icon] {
+  @apply text-surface-z4;
 }
-.minimal tabs.is-below .tab[aria-selected='true'] {
-  @apply mb-0 -mt-2px border-b-none border-t-2 border-b-secondary-600;
+
+[data-style='minimal'] [data-tabs-trigger]:hover:not(:disabled) [data-tabs-icon] {
+  @apply text-surface-z6;
 }
 
-.minimal .small tabs .tab {
-  @apply text-sm leading-8 px-2;
+[data-style='minimal'] [data-tabs-trigger][data-selected] [data-tabs-icon] {
+  @apply text-surface-z7;
 }
-.minimal .small tabs tab > img {
-  @apply w-5 h-5;
+
+/* =============================================================================
+   Tab Panel
+   ============================================================================= */
+
+[data-style='minimal'] [data-tabs-content] {
+  @apply text-surface-z8;
 }

package/src/minimal/timeline.css

@@ -0,0 +1,45 @@
+/**
+ * Timeline - Minimal Theme Styles
+ *
+ * Clean, understated styling with subtle borders.
+ */
+
+/* =============================================================================
+   Circle
+   ============================================================================= */
+
+[data-style='minimal'] [data-timeline-circle] {
+  @apply border-surface-z4 text-surface-z6;
+}
+
+[data-style='minimal'] [data-timeline-item][data-completed] [data-timeline-circle] {
+  @apply border-primary text-primary;
+}
+
+[data-style='minimal'] [data-timeline-item][data-active] [data-timeline-circle] {
+  @apply border-primary text-primary border-b-2;
+}
+
+/* =============================================================================
+   Connector
+   ============================================================================= */
+
+[data-style='minimal'] [data-timeline-connector] {
+  @apply bg-surface-z3;
+}
+
+[data-style='minimal'] [data-timeline-item][data-completed] [data-timeline-connector] {
+  @apply bg-primary;
+}
+
+/* =============================================================================
+   Body
+   ============================================================================= */
+
+[data-style='minimal'] [data-timeline-title] {
+  @apply text-surface-z8;
+}
+
+[data-style='minimal'] [data-timeline-description] {
+  @apply text-surface-z6;
+}

package/src/minimal/toc.css

@@ -0,0 +1,18 @@
+/* TableOfContents — Minimal theme */
+
+[data-style='minimal'] [data-toc] [data-toc-label] {
+  @apply text-surface-z5;
+}
+
+[data-style='minimal'] [data-toc] [data-toc-item] {
+  @apply text-surface-z6;
+}
+
+[data-style='minimal'] [data-toc] [data-toc-item]:hover,
+[data-style='minimal'] [data-toc] [data-toc-item][data-toc-focused] {
+  @apply text-surface-z9 outline-none;
+}
+
+[data-style='minimal'] [data-toc] [data-toc-item][data-toc-active] {
+  @apply text-primary-z7 border-l-primary-z4;
+}

package/src/minimal/toggle.css

@@ -0,0 +1,48 @@
+/**
+ * Toggle - Minimal Theme Styles
+ *
+ * Clean, understated toggle with subtle borders.
+ */
+
+/* =============================================================================
+   Toggle Container
+   ============================================================================= */
+
+[data-style='minimal'] [data-toggle] {
+  @apply border-surface-z3 rounded-lg border bg-transparent bg-none;
+}
+
+/* =============================================================================
+   Toggle Options
+   ============================================================================= */
+
+[data-style='minimal'] [data-toggle-option] {
+  @apply text-surface-z6 border-0 border-solid border-transparent;
+}
+
+[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-surface-z2 text-surface-z8;
+}
+
+/* Selected state — subtle fill with primary bottom accent */
+[data-style='minimal'] [data-toggle-option][data-selected='true'] {
+  @apply bg-surface-z3 text-surface-z9 border-b-primary-z5 border-b-2;
+}
+
+/* =============================================================================
+   Toggle Icon
+   ============================================================================= */
+
+[data-style='minimal'] [data-toggle-option] [data-toggle-icon] {
+  @apply text-surface-z5;
+}
+
+[data-style='minimal'] [data-toggle-option]:hover:not(:disabled) [data-toggle-icon],
+[data-style='minimal'] [data-toggle-option]:focus:not(:disabled) [data-toggle-icon] {
+  @apply text-surface-z7;
+}
+
+[data-style='minimal'] [data-toggle-option][data-selected='true'] [data-toggle-icon] {
+  @apply text-surface-z8;
+}

package/src/minimal/toolbar.css

@@ -0,0 +1,85 @@
+/**
+ * Toolbar - Minimal Theme Styles
+ *
+ * Clean, understated styling with subtle borders.
+ */
+
+/* =============================================================================
+   Toolbar Container
+   ============================================================================= */
+
+[data-style='minimal'] [data-toolbar] {
+  @apply bg-transparent bg-none;
+}
+
+/* Position-based borders */
+[data-style='minimal'] [data-toolbar][data-toolbar-position='top'],
+[data-style='minimal'] [data-toolbar]:not([data-toolbar-position]) {
+  @apply border-surface-z3 border-b;
+}
+
+[data-style='minimal'] [data-toolbar][data-toolbar-position='bottom'] {
+  @apply border-surface-z3 border-t;
+}
+
+[data-style='minimal'] [data-toolbar][data-toolbar-position='left'] {
+  @apply border-surface-z3 border-r;
+}
+
+[data-style='minimal'] [data-toolbar][data-toolbar-position='right'] {
+  @apply border-surface-z3 border-l;
+}
+
+/* =============================================================================
+   Toolbar Items
+   ============================================================================= */
+
+[data-style='minimal'] [data-toolbar-item] {
+  @apply text-surface-z6;
+}
+
+[data-style='minimal'] [data-toolbar-item]:hover:not(:disabled):not([data-disabled='true']) {
+  @apply text-surface-z9 bg-none;
+}
+
+[data-style='minimal']
+  [data-toolbar-item]:focus-visible:not(:disabled):not([data-disabled='true']) {
+  @apply text-surface-z9 ring-surface-z5 bg-none ring-1 outline-none;
+}
+
+/* Active/pressed state */
+[data-style='minimal'] [data-toolbar-item][data-active='true'] {
+  @apply text-primary-z7 bg-none;
+}
+
+[data-style='minimal'] [data-toolbar-item][data-active='true']:hover:not(:disabled) {
+  @apply text-primary-z8 bg-none;
+}
+
+/* =============================================================================
+   Toolbar Icon
+   ============================================================================= */
+
+[data-style='minimal'] [data-toolbar-item] [data-toolbar-icon] {
+  @apply text-surface-z5;
+}
+
+[data-style='minimal'] [data-toolbar-item]:hover:not(:disabled) [data-toolbar-icon] {
+  @apply text-surface-z8;
+}
+
+[data-style='minimal'] [data-toolbar-item][data-active='true'] [data-toolbar-icon] {
+  @apply text-primary-z6;
+}
+
+/* =============================================================================
+   Separator & Divider
+   ============================================================================= */
+
+[data-style='minimal'] [data-toolbar-separator] {
+  @apply bg-surface-z3 bg-none;
+}
+
+[data-style='minimal'] [data-toolbar-divider] {
+  @apply bg-surface-z3 bg-none;
+}

package/src/minimal/tree.css

@@ -0,0 +1,135 @@
+/**
+ * Tree - Minimal Theme Styles
+ *
+ * Clean, understated tree with subtle borders.
+ */
+
+/* =============================================================================
+   Tree Container
+   ============================================================================= */
+
+[data-style='minimal'] [data-tree]:focus-within {
+  @apply outline-none;
+}
+
+/* =============================================================================
+   Tree Toggle Button
+   ============================================================================= */
+
+[data-style='minimal'] [data-tree-toggle-btn] {
+  @apply text-surface-z4;
+}
+
+[data-style='minimal'] [data-tree-toggle-btn]:hover {
+  @apply text-surface-z6 bg-none;
+}
+
+/* =============================================================================
+   Tree Item Content
+   ============================================================================= */
+
+[data-style='minimal'] [data-tree-item-content] {
+  @apply text-surface-z7;
+}
+
+[data-style='minimal'] [data-tree-item-content]:hover:not(:disabled),
+[data-style='minimal'] [data-tree-item-content]:focus:not(:disabled) {
+  @apply text-surface-z9 bg-none outline-none;
+}
+
+/* Focus visible for keyboard navigation */
+[data-style='minimal'] [data-tree-item-content]:focus-visible {
+  @apply ring-surface-z5 ring-1 outline-none;
+}
+
+/* Active/selected state */
+[data-style='minimal'] [data-tree-item-content][data-active='true'] {
+  @apply text-primary-z7 border-primary-z4 border-l-2;
+}
+
+[data-style='minimal'] [data-tree-item-content][data-active='true']:hover:not(:disabled) {
+  @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
+   ============================================================================= */
+
+[data-style='minimal'] [data-tree-item-content] [data-item-icon] {
+  @apply text-surface-z5;
+}
+
+[data-style='minimal'] [data-tree-item-content]:hover:not(:disabled) [data-item-icon] {
+  @apply text-surface-z6;
+}
+
+[data-style='minimal'] [data-tree-item-content][data-active='true'] [data-item-icon] {
+  @apply text-primary-z5;
+}
+
+[data-style='minimal'] [data-tree-item-content] [data-item-description] {
+  @apply text-surface-z5;
+}
+
+[data-style='minimal'] [data-tree-item-content][data-active='true'] [data-item-description] {
+  @apply text-primary-z6;
+}
+
+[data-style='minimal'] [data-tree-item-content] [data-item-badge] {
+  @apply text-surface-z6 border-surface-z4 border bg-transparent bg-none;
+}
+
+[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
+   ============================================================================= */
+
+[data-style='minimal'] [data-tree-node][data-selected='true'] [data-tree-item-content] {
+  @apply text-primary-z7 border-primary-z3 border-l-2;
+}
+
+[data-style='minimal']
+  [data-tree]:focus-within
+  [data-tree-node][data-selected='true']
+  [data-tree-item-content] {
+  @apply text-primary-z7 border-primary-z4 border-l-2;
+}
+
+[data-style='minimal']
+  [data-tree-node][data-selected='true']
+  [data-tree-item-content]
+  [data-item-icon] {
+  @apply text-primary-z5;
+}

package/src/palette.css

@@ -1,25 +1,7 @@
 @layer base {
   :root {
     --scroll-width: 0.5rem;
-  }
-  /* light theme colors */
-  .light {
-    @apply rokkit-mode-light;
-  }
-  @media (prefers-color-scheme: dark) {
-    body:not(.light) {
-      @apply rokkit-mode-dark;
-    }
-  }
-
-  /* dark theme colors */
-  .dark {
-    @apply rokkit-mode-dark;
-  }
-
-  @media (prefers-color-scheme: light) {
-    body:not(.dark) {
-      @apply rokkit-mode-light;
-    }
+    --tab-size: 2;
+    @apply skin-default;
   }
 }

package/src/rokkit/avatar.css

@@ -0,0 +1,29 @@
+/**
+ * Avatar - Rokkit Theme Styles
+ */
+
+[data-style='rokkit'] [data-avatar] {
+  @apply bg-surface-z4 text-surface-z8;
+}
+
+/* Status dot colors */
+[data-style='rokkit'] [data-avatar-status][data-status='online'] {
+  @apply bg-success-z5;
+}
+
+[data-style='rokkit'] [data-avatar-status][data-status='offline'] {
+  @apply bg-surface-z5;
+}
+
+[data-style='rokkit'] [data-avatar-status][data-status='away'] {
+  @apply bg-warning-z5;
+}
+
+[data-style='rokkit'] [data-avatar-status][data-status='busy'] {
+  @apply bg-error-z5;
+}
+
+/* Status dot border matches surrounding background — uses surface-z1 as a neutral */
+[data-style='rokkit'] [data-avatar-status] {
+  @apply border-surface-z1;
+}

package/src/rokkit/badge.css

@@ -0,0 +1,29 @@
+/**
+ * Badge - Rokkit Theme Styles
+ */
+
+/* Default variant */
+[data-style='rokkit'] [data-badge][data-variant='default'],
+[data-style='rokkit'] [data-badge]:not([data-variant]) {
+  @apply bg-surface-z5 text-surface-z1;
+}
+
+/* Primary */
+[data-style='rokkit'] [data-badge][data-variant='primary'] {
+  @apply bg-primary-z5 text-on-primary;
+}
+
+/* Success */
+[data-style='rokkit'] [data-badge][data-variant='success'] {
+  @apply bg-success-z5 text-on-success;
+}
+
+/* Warning */
+[data-style='rokkit'] [data-badge][data-variant='warning'] {
+  @apply bg-warning-z5 text-on-warning;
+}
+
+/* Error */
+[data-style='rokkit'] [data-badge][data-variant='error'] {
+  @apply bg-error-z5 text-on-error;
+}