@rokkit/themes 1.1.16 → 1.1.18

package/dist/zen-sumi/toolbar.css

@@ -0,0 +1,86 @@
+/**
+ * Toolbar - Zen-Sumi Theme Styles
+ *
+ * Transparent base with hairline border by position.
+ * Items: surface-z6 → surface-z9 on hover. Active: primary-z5.
+ */
+
+/* =============================================================================
+   Toolbar Container
+   ============================================================================= */
+
+[data-style='zen-sumi'] [data-toolbar] {
+  background-color:transparent;background-image:none;
+}
+
+[data-style='zen-sumi'] [data-toolbar][data-toolbar-position='top'],
+[data-style='zen-sumi'] [data-toolbar]:not([data-toolbar-position]) {
+  border-bottom-width:1px;border-color:var(--paper-mute);
+}
+
+[data-style='zen-sumi'] [data-toolbar][data-toolbar-position='bottom'] {
+  border-top-width:1px;border-color:var(--paper-mute);
+}
+
+[data-style='zen-sumi'] [data-toolbar][data-toolbar-position='left'] {
+  border-right-width:1px;border-color:var(--paper-mute);
+}
+
+[data-style='zen-sumi'] [data-toolbar][data-toolbar-position='right'] {
+  border-left-width:1px;border-color:var(--paper-mute);
+}
+
+/* =============================================================================
+   Toolbar Items
+   ============================================================================= */
+
+[data-style='zen-sumi'] [data-toolbar-item] {
+  color:var(--ink-soft);
+}
+
+[data-style='zen-sumi'] [data-toolbar-item]:hover:not(:disabled):not([data-disabled='true']) {
+  background-image:none;background-color:var(--paper-mute);color:var(--ink-mute);
+}
+
+[data-style='zen-sumi']
+  [data-toolbar-item]:focus-visible:not(:disabled):not([data-disabled='true']) {
+  background-image:none;outline:2px solid transparent;outline-offset:2px;color:var(--ink-mute);
+  box-shadow: inset 0 0 0 1px var(--color-surface-z4);
+}
+
+/* Active/pressed state */
+[data-style='zen-sumi'] [data-toolbar-item][data-active='true'] {
+  background-image:none;color:var(--primary);
+}
+
+[data-style='zen-sumi'] [data-toolbar-item][data-active='true']:hover:not(:disabled) {
+  background-image:none;color:var(--primary);
+}
+
+/* =============================================================================
+   Toolbar Icon
+   ============================================================================= */
+
+[data-style='zen-sumi'] [data-toolbar-item] [data-toolbar-icon] {
+  color:var(--paper-edge);
+}
+
+[data-style='zen-sumi'] [data-toolbar-item]:hover:not(:disabled) [data-toolbar-icon] {
+  color:var(--ink-mute);
+}
+
+[data-style='zen-sumi'] [data-toolbar-item][data-active='true'] [data-toolbar-icon] {
+  color:var(--primary);
+}
+
+/* =============================================================================
+   Separator & Divider
+   ============================================================================= */
+
+[data-style='zen-sumi'] [data-toolbar-separator] {
+  background-image:none;background-color:var(--paper-mute);
+}
+
+[data-style='zen-sumi'] [data-toolbar-divider] {
+  background-image:none;background-color:var(--paper-mute);
+}

package/dist/zen-sumi/tooltip.css

@@ -0,0 +1,7 @@
+/**
+ * Tooltip - Zen-Sumi Theme Styles
+ */
+
+[data-style='zen-sumi'] [data-tooltip-content] {
+  background-color:var(--ink);color:var(--paper);
+}

package/dist/zen-sumi/tree.css

@@ -0,0 +1,148 @@
+/**
+ * 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.
+ */
+
+/* =============================================================================
+   Connector Lines — hairline tone (mode-aware), not currentColor (which
+   renders white in dark mode and greyish in light).
+   ============================================================================= */
+
+[data-style='zen-sumi'] [data-tree]:not([data-line-style='none']) [data-connector-v],
+[data-style='zen-sumi'] [data-tree]:not([data-line-style='none']) [data-connector-h],
+[data-style='zen-sumi'] [data-tree]:not([data-line-style='none']) [data-connector-corner] {
+  border-color:var(--paper-edge);
+}
+
+/* =============================================================================
+   Tree Container
+   ============================================================================= */
+
+[data-style='zen-sumi'] [data-tree]:focus-within {
+  outline:2px solid transparent;outline-offset:2px;
+}
+
+/* =============================================================================
+   Tree Toggle Button
+   ============================================================================= */
+
+[data-style='zen-sumi'] [data-tree-toggle-btn] {
+  color:var(--ink-mute);
+}
+
+[data-style='zen-sumi'] [data-tree-toggle-btn]:hover {
+  background-image:none;color:var(--ink-mute);
+}
+
+/* =============================================================================
+   Tree Item Content
+   ============================================================================= */
+
+[data-style='zen-sumi'] [data-tree-item-content] {
+  color:var(--ink-mute);
+}
+
+[data-style='zen-sumi'] [data-tree-item-content]:hover:not(:disabled),
+[data-style='zen-sumi'] [data-tree-item-content]:focus:not(:disabled) {
+  background-image:none;outline:2px solid transparent;outline-offset:2px;background-color:var(--paper-mute);color:var(--ink-mute);
+}
+
+/* Focus visible for keyboard navigation */
+[data-style='zen-sumi'] [data-tree-item-content]:focus-visible {
+  outline:2px solid transparent;outline-offset:2px;
+  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'] {
+  background-image:none;color:var(--ink-mute);background-color:var(--paper-mute);
+}
+
+[data-style='zen-sumi'] [data-tree-item-content][data-active='true']:hover:not(:disabled) {
+  background-image:none;background-color:var(--paper-mute);
+}
+
+/* Reset rokkit gradients */
+[data-style='zen-sumi'] [data-tree]:focus-within [data-tree-item-content][data-active='true'] {
+  background-image:none;
+}
+
+[data-style='zen-sumi']
+  [data-tree]:focus-within
+  [data-tree-item-content][data-active='true']:hover:not(:disabled) {
+  background-image:none;
+}
+
+[data-style='zen-sumi'] [data-tree]:not(:focus-within) [data-tree-item-content][data-active='true'] {
+  background-image:none;
+}
+
+/* =============================================================================
+   Item Elements
+   ============================================================================= */
+
+[data-style='zen-sumi'] [data-tree-item-content] [data-item-icon] {
+  color:var(--ink-mute);
+}
+
+[data-style='zen-sumi'] [data-tree-item-content]:hover:not(:disabled) [data-item-icon] {
+  color:var(--ink-mute);
+}
+
+[data-style='zen-sumi'] [data-tree-item-content][data-active='true'] [data-item-icon] {
+  color:var(--primary);
+}
+
+[data-style='zen-sumi'] [data-tree-item-content] [data-item-description] {
+  color:var(--ink-mute);
+}
+
+[data-style='zen-sumi'] [data-tree-item-content][data-active='true'] [data-item-description] {
+  color:var(--ink-mute);
+}
+
+[data-style='zen-sumi'] [data-tree-item-content] [data-item-badge] {
+  border-width:1px;background-color:transparent;background-image:none;color:var(--ink-mute);border-color:var(--paper-mute);
+}
+
+[data-style='zen-sumi'] [data-tree-item-content][data-active='true'] [data-item-badge] {
+  background-image:none;color:var(--ink-mute);border-color:var(--paper-edge);
+}
+
+[data-style='zen-sumi']
+  [data-tree]:focus-within
+  [data-tree-item-content][data-active='true']
+  [data-item-badge] {
+  background-image:none;
+}
+
+[data-style='zen-sumi']
+  [data-tree]:not(:focus-within)
+  [data-tree-item-content][data-active='true']
+  [data-item-badge] {
+  background-image:none;
+}
+
+/* =============================================================================
+   Multi-Selection
+   ============================================================================= */
+
+[data-style='zen-sumi'] [data-tree-node][data-selected='true'] [data-tree-item-content] {
+  border-left-width:2px;color:var(--primary);border-color:var(--primary);
+}
+
+[data-style='zen-sumi']
+  [data-tree]:focus-within
+  [data-tree-node][data-selected='true']
+  [data-tree-item-content] {
+  border-left-width:2px;color:var(--primary);border-color:var(--primary);
+}
+
+[data-style='zen-sumi']
+  [data-tree-node][data-selected='true']
+  [data-tree-item-content]
+  [data-item-icon] {
+  color:var(--primary);
+}