@rokkit/themes 1.0.0-next.16 → 1.0.0-next.161

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

@@ -0,0 +1,7 @@
+@layer base {
+  :root {
+    --scroll-width: 0.5rem;
+    --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;
+}

package/src/rokkit/button.css

@@ -0,0 +1,290 @@
+/**
+ * Button - Rokkit Theme Styles
+ *
+ * Rich gradients and glowing borders.
+ */
+
+/* =============================================================================
+   Default Style (filled)
+   ============================================================================= */
+
+/* Default variant */
+[data-style='rokkit'] [data-button][data-style='default'][data-variant='default'],
+[data-style='rokkit'] [data-button]:not([data-style])[data-variant='default'],
+[data-style='rokkit'] [data-button][data-style='default']:not([data-variant]),
+[data-style='rokkit'] [data-button]:not([data-style]):not([data-variant]) {
+  @apply from-surface-z3 to-surface-z2 border-surface-z4 text-surface-z8 border bg-gradient-to-r;
+}
+
+/* Primary variant */
+[data-style='rokkit'] [data-button][data-style='default'][data-variant='primary'],
+[data-style='rokkit'] [data-button]:not([data-style])[data-variant='primary'] {
+  @apply from-primary-z5 to-secondary-z5 border-primary-z5 text-on-primary border bg-gradient-to-r;
+}
+
+/* Secondary variant */
+[data-style='rokkit'] [data-button][data-style='default'][data-variant='secondary'],
+[data-style='rokkit'] [data-button]:not([data-style])[data-variant='secondary'] {
+  @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'] {
+  @apply from-danger-z4 to-danger-z3 border-danger-z5 text-on-danger border bg-gradient-to-b;
+}
+
+/* =============================================================================
+   Outline Style
+   ============================================================================= */
+
+[data-style='rokkit'] [data-button][data-style='outline'][data-variant='default'],
+[data-style='rokkit'] [data-button][data-style='outline']:not([data-variant]) {
+  @apply border-surface-z4 text-surface-z7 border bg-transparent;
+}
+
+[data-style='rokkit'] [data-button][data-style='outline'][data-variant='primary'] {
+  @apply border-primary-z4 text-primary-z6 border bg-transparent;
+}
+
+[data-style='rokkit'] [data-button][data-style='outline'][data-variant='secondary'] {
+  @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;
+}
+
+/* =============================================================================
+   Ghost Style
+   ============================================================================= */
+
+[data-style='rokkit'] [data-button][data-style='ghost'] {
+  @apply border-transparent bg-transparent;
+}
+
+[data-style='rokkit'] [data-button][data-style='ghost'][data-variant='default'],
+[data-style='rokkit'] [data-button][data-style='ghost']:not([data-variant]) {
+  @apply text-surface-z7;
+}
+
+[data-style='rokkit'] [data-button][data-style='ghost'][data-variant='primary'] {
+  @apply text-primary-z6;
+}
+
+[data-style='rokkit'] [data-button][data-style='ghost'][data-variant='secondary'] {
+  @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;
+}
+
+/* =============================================================================
+   Gradient Style
+   ============================================================================= */
+
+[data-style='rokkit'] [data-button][data-style='gradient'][data-variant='default'],
+[data-style='rokkit'] [data-button][data-style='gradient']:not([data-variant]) {
+  @apply from-surface-z4 to-surface-z2 text-surface-z10 bg-gradient-to-br;
+}
+
+[data-style='rokkit'] [data-button][data-style='gradient'][data-variant='primary'] {
+  @apply from-primary-z5 to-primary-z3 text-on-primary bg-gradient-to-br;
+}
+
+[data-style='rokkit'] [data-button][data-style='gradient'][data-variant='secondary'] {
+  @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;
+}
+
+[data-style='rokkit']
+  [data-button][data-style='gradient']:hover:not(:disabled):not([data-disabled]) {
+  filter: brightness(1.1);
+}
+
+/* =============================================================================
+   Link Style
+   ============================================================================= */
+
+[data-style='rokkit'] [data-button][data-style='link'][data-variant='default'],
+[data-style='rokkit'] [data-button][data-style='link']:not([data-variant]) {
+  @apply text-surface-z7;
+}
+
+[data-style='rokkit'] [data-button][data-style='link'][data-variant='primary'] {
+  @apply text-primary-z6;
+}
+
+[data-style='rokkit'] [data-button][data-style='link'][data-variant='secondary'] {
+  @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;
+}
+
+[data-style='rokkit'] [data-button][data-style='link']:hover:not(:disabled):not([data-disabled]) {
+  @apply text-primary-z7;
+}
+
+/* =============================================================================
+   Hover States
+   ============================================================================= */
+
+/* Default style hover */
+[data-style='rokkit'] [data-button][data-style='default']:hover:not(:disabled):not([data-disabled]),
+[data-style='rokkit'] [data-button]:not([data-style]):hover:not(:disabled):not([data-disabled]) {
+  @apply opacity-90;
+}
+
+/* Outline style hover */
+[data-style='rokkit']
+  [data-button][data-style='outline']:hover:not(:disabled):not(
+    [data-disabled]
+  )[data-variant='default'],
+[data-style='rokkit']
+  [data-button][data-style='outline']:hover:not(:disabled):not([data-disabled]):not(
+    [data-variant]
+  ) {
+  @apply from-surface-z2 to-surface-z1 bg-gradient-to-b;
+}
+
+[data-style='rokkit']
+  [data-button][data-style='outline']:hover:not(:disabled):not(
+    [data-disabled]
+  )[data-variant='primary'] {
+  @apply from-primary-z2 to-primary-z1 bg-gradient-to-b;
+}
+
+[data-style='rokkit']
+  [data-button][data-style='outline']:hover:not(:disabled):not(
+    [data-disabled]
+  )[data-variant='secondary'] {
+  @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]
+  )[data-variant='danger'] {
+  @apply from-danger-z2 to-danger-z1 bg-gradient-to-b;
+}
+
+/* Ghost style hover */
+[data-style='rokkit']
+  [data-button][data-style='ghost']:hover:not(:disabled):not(
+    [data-disabled]
+  )[data-variant='default'],
+[data-style='rokkit']
+  [data-button][data-style='ghost']:hover:not(:disabled):not([data-disabled]):not([data-variant]) {
+  @apply bg-surface-z2;
+}
+
+[data-style='rokkit']
+  [data-button][data-style='ghost']:hover:not(:disabled):not(
+    [data-disabled]
+  )[data-variant='primary'] {
+  @apply bg-primary-z1;
+}
+
+[data-style='rokkit']
+  [data-button][data-style='ghost']:hover:not(:disabled):not(
+    [data-disabled]
+  )[data-variant='secondary'] {
+  @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]
+  )[data-variant='danger'] {
+  @apply bg-danger-z1;
+}
+
+/* =============================================================================
+   Active/Pressed State
+   ============================================================================= */
+
+[data-style='rokkit'] [data-button]:active:not(:disabled):not([data-disabled]) {
+  @apply scale-95;
+  animation: button-pop 0.25s ease-out;
+}
+
+/* =============================================================================
+   Focus
+   ============================================================================= */
+
+[data-style='rokkit'] [data-button]:focus-visible {
+  @apply ring-primary-z4 ring-2 outline-none;
+}
+
+/* =============================================================================
+   Icon Colors
+   ============================================================================= */
+
+[data-style='rokkit'] [data-button] [data-item-icon],
+[data-style='rokkit'] [data-button] [data-button-icon-right] {
+  color: inherit;
+  opacity: 0.8;
+}
+
+[data-style='rokkit'] [data-button]:hover [data-item-icon],
+[data-style='rokkit'] [data-button]:hover [data-button-icon-right] {
+  opacity: 1;
+}
+
+/* =============================================================================
+   Button Group
+   ============================================================================= */
+
+[data-style='rokkit'] [data-button-group] {
+  @apply gap-px;
+}
+
+[data-style='rokkit'] [data-button-group] [data-button]:first-child {
+  @apply rounded-l-lg rounded-r-none;
+}
+
+[data-style='rokkit'] [data-button-group] [data-button]:last-child {
+  @apply rounded-l-none rounded-r-lg;
+}