@rokkit/themes 1.0.0-next.99 → 1.0.1

package/src/rokkit/toggle.css

@@ -1,18 +1,48 @@
-.rokkit toggle {
-  @apply flex flex-row items-center gap-3 cursor-pointer;
-  @apply rounded-md border border-neutral-muted p-2;
+/**
+ * Toggle - Rokkit Theme Styles
+ *
+ * Rich gradients and glowing borders.
+ */
+
+/* =============================================================================
+   Toggle Container
+   ============================================================================= */
+
+[data-style='rokkit'] [data-toggle] {
+  @apply from-surface-z3 to-surface-z2 border-surface-z4 rounded-lg border bg-gradient-to-r;
+}
+
+/* =============================================================================
+   Toggle Options
+   ============================================================================= */
+
+[data-style='rokkit'] [data-toggle-option] {
+  @apply text-surface-z6;
 }
 
-.rokkit toggle:hover > icon {
-  @apply text-secondary;
+[data-style='rokkit'] [data-toggle-option]:hover:not(:disabled):not([data-disabled='true']),
+[data-style='rokkit'] [data-toggle-option]:focus:not(:disabled):not([data-disabled='true']) {
+  @apply from-surface-z4 to-surface-z3 text-surface-z8 bg-gradient-to-r;
 }
-.rokkit toggle:focus-within {
-  @apply outline-none ring-2 ring-primary-500;
+
+/* Selected state */
+[data-style='rokkit'] [data-toggle-option][data-selected='true'] {
+  @apply from-primary-z5 to-secondary-z5 text-primary-z9 border-primary-z5 border bg-gradient-to-r shadow-sm;
 }
 
-.rokkit toggle.minimal {
-  @apply py-0 border-none focus-within:ring-0;
+/* =============================================================================
+   Toggle Icon
+   ============================================================================= */
+
+[data-style='rokkit'] [data-toggle-option] [data-toggle-icon] {
+  @apply text-surface-z5;
 }
-.rokkit toggle.minimal icon > i {
-  @apply h-4;
+
+[data-style='rokkit'] [data-toggle-option]:hover:not(:disabled) [data-toggle-icon],
+[data-style='rokkit'] [data-toggle-option]:focus:not(:disabled) [data-toggle-icon] {
+  @apply text-surface-z7;
+}
+
+[data-style='rokkit'] [data-toggle-option][data-selected='true'] [data-toggle-icon] {
+  @apply text-primary-z7;
 }

package/src/rokkit/toolbar.css

@@ -0,0 +1,90 @@
+/**
+ * Toolbar - Rokkit Theme Styles
+ *
+ * Rich gradients and glowing borders.
+ */
+
+/* =============================================================================
+   Toolbar Container
+   ============================================================================= */
+
+[data-style='rokkit'] [data-toolbar] {
+  @apply from-surface-z2 to-surface-z1 bg-gradient-to-b;
+}
+
+/* Position-based borders */
+[data-style='rokkit'] [data-toolbar][data-toolbar-position='top'],
+[data-style='rokkit'] [data-toolbar]:not([data-toolbar-position]) {
+  @apply border-surface-z4 border-b shadow-sm;
+}
+
+[data-style='rokkit'] [data-toolbar][data-toolbar-position='bottom'] {
+  @apply border-surface-z4 border-t shadow-sm;
+}
+
+[data-style='rokkit'] [data-toolbar][data-toolbar-position='left'] {
+  @apply border-surface-z4 border-r shadow-sm;
+}
+
+[data-style='rokkit'] [data-toolbar][data-toolbar-position='right'] {
+  @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
+   ============================================================================= */
+
+[data-style='rokkit'] [data-toolbar-item] {
+  @apply text-surface-z7;
+}
+
+[data-style='rokkit'] [data-toolbar-item]:hover:not(:disabled):not([data-disabled='true']) {
+  @apply from-surface-z3 to-surface-z2 text-surface-z10 bg-gradient-to-b;
+}
+
+[data-style='rokkit'] [data-toolbar-item]:focus-visible:not(:disabled):not([data-disabled='true']) {
+  @apply from-surface-z3 to-surface-z2 text-surface-z10 ring-primary-z4 bg-gradient-to-b ring-2 outline-none;
+}
+
+/* Active/pressed state */
+[data-style='rokkit'] [data-toolbar-item][data-active='true'] {
+  @apply from-primary-z5 to-secondary-z5 text-primary-z9 border-primary-z5 border bg-gradient-to-r;
+}
+
+[data-style='rokkit'] [data-toolbar-item][data-active='true']:hover:not(:disabled) {
+  @apply from-primary-z5 to-primary-z4 text-primary-z10 bg-gradient-to-b;
+}
+
+/* =============================================================================
+   Toolbar Icon
+   ============================================================================= */
+
+[data-style='rokkit'] [data-toolbar-item] [data-toolbar-icon] {
+  @apply text-surface-z6;
+}
+
+[data-style='rokkit'] [data-toolbar-item]:hover:not(:disabled) [data-toolbar-icon] {
+  @apply text-surface-z9;
+}
+
+[data-style='rokkit'] [data-toolbar-item][data-active='true'] [data-toolbar-icon] {
+  @apply text-primary-z7;
+}
+
+/* =============================================================================
+   Separator & Divider
+   ============================================================================= */
+
+[data-style='rokkit'] [data-toolbar-separator] {
+  @apply from-surface-z5 to-surface-z3 bg-gradient-to-b;
+}
+
+[data-style='rokkit'] [data-toolbar-divider] {
+  @apply from-surface-z5 to-surface-z3 bg-gradient-to-r;
+}

package/src/rokkit/tooltip.css

@@ -0,0 +1,7 @@
+/**
+ * Tooltip - Rokkit Theme Styles
+ */
+
+[data-style='rokkit'] [data-tooltip-content] {
+  @apply bg-surface-z8 text-surface-z1;
+}

package/src/rokkit/tree.css

@@ -0,0 +1,149 @@
+/**
+ * Tree - Rokkit Theme Styles
+ *
+ * Rich gradients and glowing borders.
+ */
+
+/* =============================================================================
+   Tree Container
+   ============================================================================= */
+
+[data-style='rokkit'] [data-tree]:focus-within {
+  @apply ring-primary-z4 rounded ring-1;
+}
+
+/* =============================================================================
+   Tree Toggle Button
+   ============================================================================= */
+
+[data-style='rokkit'] [data-tree-toggle-btn] {
+  @apply text-surface-z5;
+}
+
+[data-style='rokkit'] [data-tree-toggle-btn]:hover {
+  @apply from-surface-z3 to-surface-z2 text-surface-z8 bg-gradient-to-b;
+}
+
+/* =============================================================================
+   Tree Item Content
+   ============================================================================= */
+
+[data-style='rokkit'] [data-tree-item-content] {
+  @apply text-surface-z8;
+}
+
+[data-style='rokkit'] [data-tree-item-content]:hover:not(:disabled),
+[data-style='rokkit'] [data-tree-item-content]:focus:not(:disabled) {
+  @apply from-surface-z3 to-surface-z2 text-surface-z10 bg-gradient-to-r outline-none;
+}
+
+/* Focus visible for keyboard navigation */
+[data-style='rokkit'] [data-tree-item-content]:focus-visible {
+  @apply ring-primary-z5 ring-2 outline-none;
+}
+
+/* Active/selected state - when focus is within tree */
+[data-style='rokkit'] [data-tree]:focus-within [data-tree-item-content][data-active='true'] {
+  @apply from-primary-z5 to-secondary-z5 text-primary-z9 border-l-primary-z5 border-l-2 bg-gradient-to-r;
+}
+
+[data-style='rokkit']
+  [data-tree]:focus-within
+  [data-tree-item-content][data-active='true']:hover:not(:disabled) {
+  @apply from-primary-z4 to-primary-z3 bg-gradient-to-r;
+}
+
+/* Active/selected state - when focus is outside tree (muted) */
+[data-style='rokkit'] [data-tree]:not(:focus-within) [data-tree-item-content][data-active='true'] {
+  @apply from-surface-z3 to-surface-z2 text-surface-z9 border-l-surface-z5 border-l-2 bg-gradient-to-r;
+}
+
+/* =============================================================================
+   Item Elements
+   ============================================================================= */
+
+[data-style='rokkit'] [data-tree-item-content] [data-item-icon] {
+  @apply text-surface-z5;
+}
+
+[data-style='rokkit'] [data-tree-item-content]:hover:not(:disabled) [data-item-icon] {
+  @apply text-surface-z7;
+}
+
+[data-style='rokkit']
+  [data-tree]:focus-within
+  [data-tree-item-content][data-active='true']
+  [data-item-icon] {
+  @apply text-primary-z6;
+}
+
+[data-style='rokkit']
+  [data-tree]:not(:focus-within)
+  [data-tree-item-content][data-active='true']
+  [data-item-icon] {
+  @apply text-surface-z6;
+}
+
+/* Item description */
+[data-style='rokkit'] [data-tree-item-content] [data-item-description] {
+  @apply text-surface-z5;
+}
+
+[data-style='rokkit']
+  [data-tree]:focus-within
+  [data-tree-item-content][data-active='true']
+  [data-item-description] {
+  @apply text-primary-z7;
+}
+
+[data-style='rokkit']
+  [data-tree]:not(:focus-within)
+  [data-tree-item-content][data-active='true']
+  [data-item-description] {
+  @apply text-surface-z6;
+}
+
+/* Item badge */
+[data-style='rokkit'] [data-tree-item-content] [data-item-badge] {
+  @apply text-surface-z6 from-surface-z3 to-surface-z2 border-surface-z4 border bg-gradient-to-b;
+}
+
+[data-style='rokkit']
+  [data-tree]:focus-within
+  [data-tree-item-content][data-active='true']
+  [data-item-badge] {
+  @apply text-primary-z8 from-primary-z3 to-primary-z2 border-primary-z4 border bg-gradient-to-b;
+}
+
+[data-style='rokkit']
+  [data-tree]:not(:focus-within)
+  [data-tree-item-content][data-active='true']
+  [data-item-badge] {
+  @apply text-surface-z7 from-surface-z4 to-surface-z3 bg-gradient-to-b;
+}
+
+/* =============================================================================
+   Multi-Selection
+   ============================================================================= */
+
+[data-style='rokkit'] [data-tree-node][data-selected='true'] [data-tree-node-row] {
+  @apply bg-primary-z3;
+}
+
+[data-style='rokkit']
+  [data-tree]:focus-within
+  [data-tree-node][data-selected='true']
+  [data-tree-node-row] {
+  @apply bg-primary-z4;
+}
+
+[data-style='rokkit'] [data-tree-node][data-selected='true'] [data-tree-item-content] {
+  @apply text-primary-z9;
+}
+
+[data-style='rokkit']
+  [data-tree-node][data-selected='true']
+  [data-tree-item-content]
+  [data-item-icon] {
+  @apply text-primary-z6;
+}

package/src/rokkit/upload-progress.css

@@ -0,0 +1,102 @@
+/**
+ * UploadProgress - Rokkit Theme Styles
+ *
+ * Status colors, progress fill, action buttons.
+ */
+
+/* =============================================================================
+   Header
+   ============================================================================= */
+
+[data-style='rokkit'] [data-upload-header] {
+  @apply text-surface-z7;
+}
+
+[data-style='rokkit'] [data-upload-clear] {
+  @apply border-surface-z4 text-surface-z6;
+}
+
+[data-style='rokkit'] [data-upload-clear]:hover {
+  @apply bg-surface-z3 text-surface-z9;
+}
+
+/* =============================================================================
+   File Rows
+   ============================================================================= */
+
+[data-style='rokkit'] [data-upload-file-status] {
+  @apply text-surface-z7;
+}
+
+[data-style='rokkit'] [data-upload-file-status]:hover {
+  @apply bg-surface-z2;
+}
+
+/* =============================================================================
+   File Elements
+   ============================================================================= */
+
+[data-style='rokkit'] [data-upload-file-icon] {
+  @apply text-surface-z5;
+}
+
+[data-style='rokkit'] [data-upload-file-size] {
+  @apply text-surface-z5;
+}
+
+/* =============================================================================
+   Progress Bar
+   ============================================================================= */
+
+[data-style='rokkit'] [data-upload-bar] {
+  @apply bg-surface-z3;
+}
+
+[data-style='rokkit'] [data-upload-fill] {
+  @apply from-primary-z5 to-secondary-z5 bg-gradient-to-r;
+}
+
+/* =============================================================================
+   Status Colors
+   ============================================================================= */
+
+[data-style='rokkit'] [data-upload-file-status][data-status='uploading'] [data-upload-status] {
+  @apply text-primary-z6;
+}
+
+[data-style='rokkit'] [data-upload-file-status][data-status='done'] [data-upload-status] {
+  @apply text-green-500;
+}
+
+[data-style='rokkit'] [data-upload-file-status][data-status='error'] [data-upload-status] {
+  @apply text-red-500;
+}
+
+[data-style='rokkit'] [data-upload-file-status][data-status='pending'] [data-upload-status] {
+  @apply text-surface-z5;
+}
+
+/* Status-based file icon tinting */
+[data-style='rokkit'] [data-upload-file-status][data-status='done'] [data-upload-file-icon] {
+  @apply text-green-500;
+}
+
+[data-style='rokkit'] [data-upload-file-status][data-status='error'] [data-upload-file-icon] {
+  @apply text-red-500;
+}
+
+/* =============================================================================
+   Action Buttons
+   ============================================================================= */
+
+[data-style='rokkit'] [data-upload-actions] button {
+  @apply text-surface-z5;
+}
+
+[data-style='rokkit'] [data-upload-actions] button:hover {
+  @apply bg-surface-z3 text-surface-z9;
+}
+
+[data-style='rokkit'] [data-upload-file-status][data-status='error'] [data-upload-retry]:hover {
+  @apply text-primary-z7;
+}

package/src/rokkit/upload-target.css

@@ -0,0 +1,50 @@
+/**
+ * UploadTarget - Rokkit Theme Styles
+ *
+ * Colors, drag-over highlight, hover/focus rings.
+ */
+
+/* =============================================================================
+   Drop Zone
+   ============================================================================= */
+
+[data-style='rokkit'] [data-upload-target] {
+  @apply border-surface-z4 text-surface-z6;
+}
+
+[data-style='rokkit'] [data-upload-target]:hover:not([data-disabled]) {
+  @apply border-surface-z5 text-surface-z7 bg-surface-z2;
+}
+
+[data-style='rokkit'] [data-upload-target]:focus-visible:not([data-disabled]) {
+  @apply border-primary-z5 ring-primary-z3 ring-2;
+}
+
+/* Drag-over highlight */
+[data-style='rokkit'] [data-upload-target][data-dragging] {
+  @apply border-primary-z5 bg-primary-z2 text-primary-z7;
+}
+
+/* =============================================================================
+   Upload Icon
+   ============================================================================= */
+
+[data-style='rokkit'] [data-upload-target] [data-upload-icon] {
+  @apply text-surface-z5;
+}
+
+[data-style='rokkit'] [data-upload-target][data-dragging] [data-upload-icon] {
+  @apply text-primary-z6;
+}
+
+/* =============================================================================
+   Browse Button
+   ============================================================================= */
+
+[data-style='rokkit'] [data-upload-target] [data-upload-button] {
+  @apply border-surface-z4 text-surface-z7;
+}
+
+[data-style='rokkit'] [data-upload-target] [data-upload-button]:hover:not(:disabled) {
+  @apply bg-surface-z3 text-surface-z9;
+}

package/src/shadcn/button.css

@@ -0,0 +1,175 @@
+/**
+ * Button - shadcn Theme Styles
+ *
+ * Flat, rounded-md buttons. No gradients. Ring-based focus.
+ */
+
+/* =============================================================================
+   Default Style (filled)
+   ============================================================================= */
+
+[data-style='shadcn'] [data-button][data-style='default'][data-variant='default'],
+[data-style='shadcn'] [data-button]:not([data-style])[data-variant='default'],
+[data-style='shadcn'] [data-button][data-style='default']:not([data-variant]),
+[data-style='shadcn'] [data-button]:not([data-style]):not([data-variant]) {
+  @apply bg-surface-z2 border-surface-z3 text-surface-z8 rounded-md border bg-none;
+}
+
+[data-style='shadcn'] [data-button][data-style='default'][data-variant='primary'],
+[data-style='shadcn'] [data-button]:not([data-style])[data-variant='primary'] {
+  @apply bg-primary-z5 text-on-primary rounded-md border-transparent bg-none;
+}
+
+[data-style='shadcn'] [data-button][data-style='default'][data-variant='secondary'],
+[data-style='shadcn'] [data-button]:not([data-style])[data-variant='secondary'] {
+  @apply bg-secondary-z4 text-on-secondary rounded-md border-transparent bg-none;
+}
+
+[data-style='shadcn'] [data-button][data-style='default'][data-variant='accent'],
+[data-style='shadcn'] [data-button]:not([data-style])[data-variant='accent'] {
+  @apply bg-accent-z4 text-on-accent rounded-md border-transparent bg-none;
+}
+
+[data-style='shadcn'] [data-button][data-style='default'][data-variant='danger'],
+[data-style='shadcn'] [data-button]:not([data-style])[data-variant='danger'] {
+  @apply bg-danger-z4 text-on-danger rounded-md border-transparent bg-none;
+}
+
+/* =============================================================================
+   Outline Style
+   ============================================================================= */
+
+[data-style='shadcn'] [data-button][data-style='outline'][data-variant='default'],
+[data-style='shadcn'] [data-button][data-style='outline']:not([data-variant]) {
+  @apply border-surface-z3 text-surface-z7 rounded-md border bg-transparent;
+}
+
+[data-style='shadcn'] [data-button][data-style='outline'][data-variant='primary'] {
+  @apply border-primary-z4 text-primary-z6 rounded-md border bg-transparent;
+}
+
+[data-style='shadcn'] [data-button][data-style='outline'][data-variant='secondary'] {
+  @apply border-secondary-z4 text-secondary-z6 rounded-md border bg-transparent;
+}
+
+[data-style='shadcn'] [data-button][data-style='outline'][data-variant='accent'] {
+  @apply border-accent-z4 text-accent-z6 rounded-md border bg-transparent;
+}
+
+[data-style='shadcn'] [data-button][data-style='outline'][data-variant='danger'] {
+  @apply border-danger-z4 text-danger-z4 rounded-md border bg-transparent;
+}
+
+/* =============================================================================
+   Ghost Style
+   ============================================================================= */
+
+[data-style='shadcn'] [data-button][data-style='ghost'] {
+  @apply rounded-md border-transparent bg-transparent;
+}
+
+[data-style='shadcn'] [data-button][data-style='ghost'][data-variant='default'],
+[data-style='shadcn'] [data-button][data-style='ghost']:not([data-variant]) {
+  @apply text-surface-z7;
+}
+
+[data-style='shadcn'] [data-button][data-style='ghost'][data-variant='primary'] {
+  @apply text-primary-z6;
+}
+
+[data-style='shadcn'] [data-button][data-style='ghost'][data-variant='secondary'] {
+  @apply text-secondary-z6;
+}
+
+[data-style='shadcn'] [data-button][data-style='ghost'][data-variant='accent'] {
+  @apply text-accent-z6;
+}
+
+[data-style='shadcn'] [data-button][data-style='ghost'][data-variant='danger'] {
+  @apply text-danger-z4;
+}
+
+/* =============================================================================
+   Gradient Style (flat fill — no gradients in shadcn)
+   ============================================================================= */
+
+[data-style='shadcn'] [data-button][data-style='gradient'][data-variant='default'],
+[data-style='shadcn'] [data-button][data-style='gradient']:not([data-variant]) {
+  @apply bg-surface-z3 text-surface-z10 rounded-md bg-none;
+}
+
+[data-style='shadcn'] [data-button][data-style='gradient'][data-variant='primary'] {
+  @apply bg-primary-z5 text-on-primary rounded-md bg-none;
+}
+
+[data-style='shadcn'] [data-button][data-style='gradient'][data-variant='secondary'] {
+  @apply bg-secondary-z4 text-on-secondary rounded-md bg-none;
+}
+
+[data-style='shadcn'] [data-button][data-style='gradient'][data-variant='accent'] {
+  @apply bg-accent-z4 text-on-accent rounded-md bg-none;
+}
+
+[data-style='shadcn'] [data-button][data-style='gradient'][data-variant='danger'] {
+  @apply bg-danger-z4 text-on-danger rounded-md bg-none;
+}
+
+/* =============================================================================
+   Link Style
+   ============================================================================= */
+
+[data-style='shadcn'] [data-button][data-style='link'][data-variant='default'],
+[data-style='shadcn'] [data-button][data-style='link']:not([data-variant]) {
+  @apply text-surface-z7;
+}
+
+[data-style='shadcn'] [data-button][data-style='link'][data-variant='primary'] {
+  @apply text-primary-z6;
+}
+
+[data-style='shadcn'] [data-button][data-style='link'][data-variant='secondary'] {
+  @apply text-secondary-z6;
+}
+
+[data-style='shadcn'] [data-button][data-style='link'][data-variant='accent'] {
+  @apply text-accent-z6;
+}
+
+[data-style='shadcn'] [data-button][data-style='link'][data-variant='danger'] {
+  @apply text-danger-z4;
+}
+
+[data-style='shadcn'] [data-button][data-style='link']:hover:not(:disabled):not([data-disabled]) {
+  @apply text-surface-z9;
+}
+
+/* =============================================================================
+   Hover States
+   ============================================================================= */
+
+[data-style='shadcn'] [data-button][data-style='default']:hover:not(:disabled):not([data-disabled]),
+[data-style='shadcn'] [data-button]:not([data-style]):hover:not(:disabled):not([data-disabled]) {
+  @apply bg-surface-z3 border-surface-z4 bg-none;
+}
+
+[data-style='shadcn']
+  [data-button][data-style='outline']:hover:not(:disabled):not([data-disabled]) {
+  @apply bg-surface-z2 border-surface-z4 bg-none;
+}
+
+[data-style='shadcn'] [data-button][data-style='ghost']:hover:not(:disabled):not([data-disabled]) {
+  @apply bg-surface-z2;
+}
+
+[data-style='shadcn']
+  [data-button][data-style='gradient']:hover:not(:disabled):not([data-disabled]) {
+  @apply bg-surface-z4 bg-none;
+}
+
+/* =============================================================================
+   Focus — ring with offset (shadcn signature)
+   ============================================================================= */
+
+[data-style='shadcn'] [data-button]:focus-visible {
+  @apply ring-primary-z4 ring-2 ring-offset-2 outline-none;
+}