@rokkit/themes 1.0.3 → 1.0.5

package/src/zen-sumi/tree.css

@@ -0,0 +1,137 @@
+/**
+ * Tree - Zen-Sumi Theme Styles
+ *
+ * Minimal ink hierarchy. Active: primary accent on icon, subtle text shift.
+ * No bg fill on active — ink is in typography weight + icon color only.
+ */
+
+/* =============================================================================
+   Tree Container
+   ============================================================================= */
+
+[data-style='zen-sumi'] [data-tree]:focus-within {
+  @apply outline-none;
+}
+
+/* =============================================================================
+   Tree Toggle Button
+   ============================================================================= */
+
+[data-style='zen-sumi'] [data-tree-toggle-btn] {
+  @apply text-surface-z4;
+}
+
+[data-style='zen-sumi'] [data-tree-toggle-btn]:hover {
+  @apply text-ink-z4 bg-none;
+}
+
+/* =============================================================================
+   Tree Item Content
+   ============================================================================= */
+
+[data-style='zen-sumi'] [data-tree-item-content] {
+  @apply text-ink-z3;
+}
+
+[data-style='zen-sumi'] [data-tree-item-content]:hover:not(:disabled),
+[data-style='zen-sumi'] [data-tree-item-content]:focus:not(:disabled) {
+  @apply bg-surface-z2 text-ink-z1 bg-none outline-none;
+}
+
+/* Focus visible for keyboard navigation */
+[data-style='zen-sumi'] [data-tree-item-content]:focus-visible {
+  @apply outline-none;
+  box-shadow: inset 0 0 0 1px var(--color-surface-z4);
+}
+
+/* Active/selected state */
+[data-style='zen-sumi'] [data-tree-item-content][data-active='true'] {
+  @apply text-ink-z1 bg-surface-z2 bg-none;
+}
+
+[data-style='zen-sumi'] [data-tree-item-content][data-active='true']:hover:not(:disabled) {
+  @apply bg-surface-z3 bg-none;
+}
+
+/* Reset rokkit gradients */
+[data-style='zen-sumi'] [data-tree]:focus-within [data-tree-item-content][data-active='true'] {
+  @apply bg-none;
+}
+
+[data-style='zen-sumi']
+  [data-tree]:focus-within
+  [data-tree-item-content][data-active='true']:hover:not(:disabled) {
+  @apply bg-none;
+}
+
+[data-style='zen-sumi'] [data-tree]:not(:focus-within) [data-tree-item-content][data-active='true'] {
+  @apply bg-none;
+}
+
+/* =============================================================================
+   Item Elements
+   ============================================================================= */
+
+[data-style='zen-sumi'] [data-tree-item-content] [data-item-icon] {
+  @apply text-ink-z5;
+}
+
+[data-style='zen-sumi'] [data-tree-item-content]:hover:not(:disabled) [data-item-icon] {
+  @apply text-ink-z4;
+}
+
+[data-style='zen-sumi'] [data-tree-item-content][data-active='true'] [data-item-icon] {
+  @apply text-primary-z5;
+}
+
+[data-style='zen-sumi'] [data-tree-item-content] [data-item-description] {
+  @apply text-ink-z5;
+}
+
+[data-style='zen-sumi'] [data-tree-item-content][data-active='true'] [data-item-description] {
+  @apply text-ink-z4;
+}
+
+[data-style='zen-sumi'] [data-tree-item-content] [data-item-badge] {
+  @apply text-ink-z4 border-surface-z3 border bg-transparent bg-none;
+}
+
+[data-style='zen-sumi'] [data-tree-item-content][data-active='true'] [data-item-badge] {
+  @apply text-ink-z2 border-surface-z4 bg-none;
+}
+
+[data-style='zen-sumi']
+  [data-tree]:focus-within
+  [data-tree-item-content][data-active='true']
+  [data-item-badge] {
+  @apply bg-none;
+}
+
+[data-style='zen-sumi']
+  [data-tree]:not(:focus-within)
+  [data-tree-item-content][data-active='true']
+  [data-item-badge] {
+  @apply bg-none;
+}
+
+/* =============================================================================
+   Multi-Selection
+   ============================================================================= */
+
+[data-style='zen-sumi'] [data-tree-node][data-selected='true'] [data-tree-item-content] {
+  @apply text-primary-z6 border-primary-z3 border-l-2;
+}
+
+[data-style='zen-sumi']
+  [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='zen-sumi']
+  [data-tree-node][data-selected='true']
+  [data-tree-item-content]
+  [data-item-icon] {
+  @apply text-primary-z5;
+}