@rokkit/themes 1.1.15 → 1.1.17

package/dist/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 {
+  border-radius:0.25rem;--un-ring-width:1px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-color:var(--primary);
+}
+
+/* =============================================================================
+   Tree Toggle Button
+   ============================================================================= */
+
+[data-style='rokkit'] [data-tree-toggle-btn] {
+  color:var(--ink-soft);
+}
+
+[data-style='rokkit'] [data-tree-toggle-btn]:hover {
+  --un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));color:var(--ink-mute);
+}
+
+/* =============================================================================
+   Tree Item Content
+   ============================================================================= */
+
+[data-style='rokkit'] [data-tree-item-content] {
+  color:var(--ink-mute);
+}
+
+[data-style='rokkit'] [data-tree-item-content]:hover:not(:disabled),
+[data-style='rokkit'] [data-tree-item-content]:focus:not(:disabled) {
+  --un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));outline:2px solid transparent;outline-offset:2px;color:var(--ink);
+}
+
+/* Focus visible for keyboard navigation */
+[data-style='rokkit'] [data-tree-item-content]:focus-visible {
+  outline:2px solid transparent;outline-offset:2px;--un-ring-width:2px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-color:var(--primary);
+}
+
+/* Active/selected state - when focus is within tree */
+[data-style='rokkit'] [data-tree]:focus-within [data-tree-item-content][data-active='true'] {
+  border-left-width:2px;--un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-primary) calc(1 * 100%), transparent) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:color-mix(in srgb, var(--color-accent) calc(1 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));color:var(--primary);border-left-color:var(--primary);
+}
+
+[data-style='rokkit']
+  [data-tree]:focus-within
+  [data-tree-item-content][data-active='true']:hover:not(:disabled) {
+  --un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-primary) calc(1 * 100%), transparent) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:color-mix(in srgb, var(--color-primary) calc(1 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));
+}
+
+/* Active/selected state - when focus is outside tree (muted) */
+[data-style='rokkit'] [data-tree]:not(:focus-within) [data-tree-item-content][data-active='true'] {
+  border-left-width:2px;--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));color:var(--ink);border-left-color:var(--ink-soft);
+}
+
+/* =============================================================================
+   Item Elements
+   ============================================================================= */
+
+[data-style='rokkit'] [data-tree-item-content] [data-item-icon] {
+  color:var(--ink-soft);
+}
+
+[data-style='rokkit'] [data-tree-item-content]:hover:not(:disabled) [data-item-icon] {
+  color:var(--ink-mute);
+}
+
+[data-style='rokkit']
+  [data-tree]:focus-within
+  [data-tree-item-content][data-active='true']
+  [data-item-icon] {
+  color:var(--primary);
+}
+
+[data-style='rokkit']
+  [data-tree]:not(:focus-within)
+  [data-tree-item-content][data-active='true']
+  [data-item-icon] {
+  color:var(--ink-soft);
+}
+
+/* Item description */
+[data-style='rokkit'] [data-tree-item-content] [data-item-description] {
+  color:var(--ink-soft);
+}
+
+[data-style='rokkit']
+  [data-tree]:focus-within
+  [data-tree-item-content][data-active='true']
+  [data-item-description] {
+  color:var(--primary);
+}
+
+[data-style='rokkit']
+  [data-tree]:not(:focus-within)
+  [data-tree-item-content][data-active='true']
+  [data-item-description] {
+  color:var(--ink-soft);
+}
+
+/* Item badge */
+[data-style='rokkit'] [data-tree-item-content] [data-item-badge] {
+  border-width:1px;--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));color:var(--ink-soft);border-color:var(--paper-edge);
+}
+
+[data-style='rokkit']
+  [data-tree]:focus-within
+  [data-tree-item-content][data-active='true']
+  [data-item-badge] {
+  border-width:1px;--un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-primary) calc(1 * 100%), transparent) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:color-mix(in srgb, var(--color-primary) calc(1 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));color:var(--primary);border-color:var(--primary);
+}
+
+[data-style='rokkit']
+  [data-tree]:not(:focus-within)
+  [data-tree-item-content][data-active='true']
+  [data-item-badge] {
+  --un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));color:var(--ink-mute);
+}
+
+/* =============================================================================
+   Multi-Selection
+   ============================================================================= */
+
+[data-style='rokkit'] [data-tree-node][data-selected='true'] [data-tree-node-row] {
+  background-color:var(--primary);
+}
+
+[data-style='rokkit']
+  [data-tree]:focus-within
+  [data-tree-node][data-selected='true']
+  [data-tree-node-row] {
+  background-color:var(--primary);
+}
+
+[data-style='rokkit'] [data-tree-node][data-selected='true'] [data-tree-item-content] {
+  color:var(--primary);
+}
+
+[data-style='rokkit']
+  [data-tree-node][data-selected='true']
+  [data-tree-item-content]
+  [data-item-icon] {
+  color:var(--primary);
+}

package/dist/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] {
+  color:var(--ink-mute);
+}
+
+[data-style='rokkit'] [data-upload-clear] {
+  border-color:var(--paper-edge);color:var(--ink-soft);
+}
+
+[data-style='rokkit'] [data-upload-clear]:hover {
+  background-color:var(--paper-mute);color:var(--ink);
+}
+
+/* =============================================================================
+   File Rows
+   ============================================================================= */
+
+[data-style='rokkit'] [data-upload-file-status] {
+  color:var(--ink-mute);
+}
+
+[data-style='rokkit'] [data-upload-file-status]:hover {
+  background-color:var(--paper-mute);
+}
+
+/* =============================================================================
+   File Elements
+   ============================================================================= */
+
+[data-style='rokkit'] [data-upload-file-icon] {
+  color:var(--ink-soft);
+}
+
+[data-style='rokkit'] [data-upload-file-size] {
+  color:var(--ink-soft);
+}
+
+/* =============================================================================
+   Progress Bar
+   ============================================================================= */
+
+[data-style='rokkit'] [data-upload-bar] {
+  background-color:var(--paper-mute);
+}
+
+[data-style='rokkit'] [data-upload-fill] {
+  --un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-primary) calc(1 * 100%), transparent) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:color-mix(in srgb, var(--color-accent) calc(1 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));
+}
+
+/* =============================================================================
+   Status Colors
+   ============================================================================= */
+
+[data-style='rokkit'] [data-upload-file-status][data-status='uploading'] [data-upload-status] {
+  color:var(--primary);
+}
+
+[data-style='rokkit'] [data-upload-file-status][data-status='done'] [data-upload-status] {
+  color:var(--success);
+}
+
+[data-style='rokkit'] [data-upload-file-status][data-status='error'] [data-upload-status] {
+  color:var(--danger);
+}
+
+[data-style='rokkit'] [data-upload-file-status][data-status='pending'] [data-upload-status] {
+  color:var(--ink-soft);
+}
+
+/* Status-based file icon tinting */
+[data-style='rokkit'] [data-upload-file-status][data-status='done'] [data-upload-file-icon] {
+  color:var(--success);
+}
+
+[data-style='rokkit'] [data-upload-file-status][data-status='error'] [data-upload-file-icon] {
+  color:var(--danger);
+}
+
+/* =============================================================================
+   Action Buttons
+   ============================================================================= */
+
+[data-style='rokkit'] [data-upload-actions] button {
+  color:var(--ink-soft);
+}
+
+[data-style='rokkit'] [data-upload-actions] button:hover {
+  background-color:var(--paper-mute);color:var(--ink);
+}
+
+[data-style='rokkit'] [data-upload-file-status][data-status='error'] [data-upload-retry]:hover {
+  color:var(--primary);
+}

package/dist/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] {
+  border-color:var(--paper-edge);color:var(--ink-soft);
+}
+
+[data-style='rokkit'] [data-upload-target]:hover:not([data-disabled]) {
+  border-color:var(--ink-soft);color:var(--ink-mute);background-color:var(--paper-mute);
+}
+
+[data-style='rokkit'] [data-upload-target]:focus-visible:not([data-disabled]) {
+  --un-ring-width:2px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);border-color:var(--primary);--un-ring-color:var(--primary);
+}
+
+/* Drag-over highlight */
+[data-style='rokkit'] [data-upload-target][data-dragging] {
+  border-color:var(--primary);background-color:var(--primary);color:var(--primary);
+}
+
+/* =============================================================================
+   Upload Icon
+   ============================================================================= */
+
+[data-style='rokkit'] [data-upload-target] [data-upload-icon] {
+  color:var(--ink-soft);
+}
+
+[data-style='rokkit'] [data-upload-target][data-dragging] [data-upload-icon] {
+  color:var(--primary);
+}
+
+/* =============================================================================
+   Browse Button
+   ============================================================================= */
+
+[data-style='rokkit'] [data-upload-target] [data-upload-button] {
+  border-color:var(--paper-edge);color:var(--ink-mute);
+}
+
+[data-style='rokkit'] [data-upload-target] [data-upload-button]:hover:not(:disabled) {
+  background-color:var(--paper-mute);color:var(--ink);
+}