@rokkit/themes 1.1.16 → 1.1.18

package/dist/minimal/toggle.css

@@ -0,0 +1,74 @@
+/**
+ * Toggle - Minimal Theme Styles
+ *
+ * Clean, understated toggle with subtle borders.
+ */
+
+/* =============================================================================
+   Toggle Container
+   ============================================================================= */
+
+[data-style='minimal'] [data-toggle] {
+  border-width:1px;border-radius:0.5rem;background-color:transparent;background-image:none;border-color:var(--paper-mute);
+}
+
+/* =============================================================================
+   Toggle Options
+   ============================================================================= */
+
+[data-style='minimal'] [data-toggle-option] {
+  border-width:0px;border-color:transparent;border-style:solid;color:var(--ink-mute);
+}
+
+[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']) {
+  background-color:var(--paper-mute);color:var(--ink-mute);
+}
+
+/* Selected state — subtle fill with primary bottom accent */
+[data-style='minimal'] [data-toggle-option][data-selected='true'] {
+  border-bottom-width:2px;background-color:var(--paper-mute);color:var(--ink);border-bottom-color:var(--primary);
+}
+
+/* =============================================================================
+   Toggle Icon
+   ============================================================================= */
+
+[data-style='minimal'] [data-toggle-option] [data-toggle-icon] {
+  color:var(--ink-mute);
+}
+
+[data-style='minimal'] [data-toggle-option]:hover:not(:disabled) [data-toggle-icon],
+[data-style='minimal'] [data-toggle-option]:focus:not(:disabled) [data-toggle-icon] {
+  color:var(--ink-mute);
+}
+
+[data-style='minimal'] [data-toggle-option][data-selected='true'] [data-toggle-icon] {
+  color:var(--ink-mute);
+}
+
+/* =============================================================================
+   Button Variant — single cycling control (variant-agnostic color)
+   Higher specificity than the [data-toggle] container rule above, so it
+   neutralises the group-pill chrome and gives the single button the same
+   flipping icon treatment an unselected option gets.
+   ============================================================================= */
+
+[data-style='minimal'] [data-toggle][data-toggle-variant='button'] {
+  border-color:transparent;background-color:transparent;color:var(--ink-mute);
+  background-image: none;
+}
+
+[data-style='minimal'] [data-toggle][data-toggle-variant='button']:hover:not(:disabled):not([data-toggle-disabled='true']),
+[data-style='minimal'] [data-toggle][data-toggle-variant='button']:focus-visible:not(:disabled):not([data-toggle-disabled='true']) {
+  background-color:var(--paper-mute);color:var(--ink-mute);
+}
+
+[data-style='minimal'] [data-toggle][data-toggle-variant='button'] [data-toggle-icon] {
+  color:var(--ink-mute);
+}
+
+[data-style='minimal'] [data-toggle][data-toggle-variant='button']:hover:not(:disabled) [data-toggle-icon],
+[data-style='minimal'] [data-toggle][data-toggle-variant='button']:focus-visible:not(:disabled) [data-toggle-icon] {
+  color:var(--ink-mute);
+}

package/dist/minimal/toolbar.css

@@ -0,0 +1,85 @@
+/**
+ * Toolbar - Minimal Theme Styles
+ *
+ * Clean, understated styling with subtle borders.
+ */
+
+/* =============================================================================
+   Toolbar Container
+   ============================================================================= */
+
+[data-style='minimal'] [data-toolbar] {
+  background-color:transparent;background-image:none;
+}
+
+/* Position-based borders */
+[data-style='minimal'] [data-toolbar][data-toolbar-position='top'],
+[data-style='minimal'] [data-toolbar]:not([data-toolbar-position]) {
+  border-bottom-width:1px;border-color:var(--paper-mute);
+}
+
+[data-style='minimal'] [data-toolbar][data-toolbar-position='bottom'] {
+  border-top-width:1px;border-color:var(--paper-mute);
+}
+
+[data-style='minimal'] [data-toolbar][data-toolbar-position='left'] {
+  border-right-width:1px;border-color:var(--paper-mute);
+}
+
+[data-style='minimal'] [data-toolbar][data-toolbar-position='right'] {
+  border-left-width:1px;border-color:var(--paper-mute);
+}
+
+/* =============================================================================
+   Toolbar Items
+   ============================================================================= */
+
+[data-style='minimal'] [data-toolbar-item] {
+  color:var(--ink-soft);
+}
+
+[data-style='minimal'] [data-toolbar-item]:hover:not(:disabled):not([data-disabled='true']) {
+  background-image:none;color:var(--ink);
+}
+
+[data-style='minimal']
+  [data-toolbar-item]:focus-visible:not(:disabled):not([data-disabled='true']) {
+  background-image:none;outline:2px solid transparent;outline-offset:2px;--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);color:var(--ink);--un-ring-color:var(--ink-soft);
+}
+
+/* Active/pressed state */
+[data-style='minimal'] [data-toolbar-item][data-active='true'] {
+  background-image:none;color:var(--primary);
+}
+
+[data-style='minimal'] [data-toolbar-item][data-active='true']:hover:not(:disabled) {
+  background-image:none;color:var(--primary);
+}
+
+/* =============================================================================
+   Toolbar Icon
+   ============================================================================= */
+
+[data-style='minimal'] [data-toolbar-item] [data-toolbar-icon] {
+  color:var(--ink-soft);
+}
+
+[data-style='minimal'] [data-toolbar-item]:hover:not(:disabled) [data-toolbar-icon] {
+  color:var(--ink-mute);
+}
+
+[data-style='minimal'] [data-toolbar-item][data-active='true'] [data-toolbar-icon] {
+  color:var(--primary);
+}
+
+/* =============================================================================
+   Separator & Divider
+   ============================================================================= */
+
+[data-style='minimal'] [data-toolbar-separator] {
+  background-image:none;background-color:var(--paper-mute);
+}
+
+[data-style='minimal'] [data-toolbar-divider] {
+  background-image:none;background-color:var(--paper-mute);
+}

package/dist/minimal/tooltip.css

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

package/dist/minimal/tree.css

@@ -0,0 +1,152 @@
+/**
+ * Tree - Minimal Theme Styles
+ *
+ * Clean, understated tree with subtle borders.
+ */
+
+/* =============================================================================
+   Connector Lines — hairline tone (mode-aware), not currentColor (which
+   renders white in dark mode and greyish in light).
+   ============================================================================= */
+
+[data-style='minimal'] [data-tree]:not([data-line-style='none']) [data-connector-v],
+[data-style='minimal'] [data-tree]:not([data-line-style='none']) [data-connector-h],
+[data-style='minimal'] [data-tree]:not([data-line-style='none']) [data-connector-corner] {
+  border-color:var(--paper-edge);
+}
+
+/* =============================================================================
+   Tree Container
+   ============================================================================= */
+
+[data-style='minimal'] [data-tree]:focus-within {
+  outline:2px solid transparent;outline-offset:2px;
+}
+
+/* =============================================================================
+   Tree Toggle Button
+   ============================================================================= */
+
+[data-style='minimal'] [data-tree-toggle-btn] {
+  color:var(--ink-mute);
+}
+
+[data-style='minimal'] [data-tree-toggle-btn]:hover {
+  background-image:none;color:var(--ink-mute);
+}
+
+/* =============================================================================
+   Tree Item Content
+   ============================================================================= */
+
+[data-style='minimal'] [data-tree-item-content] {
+  color:var(--ink-mute);
+}
+
+[data-style='minimal'] [data-tree-item-content]:hover:not(:disabled),
+[data-style='minimal'] [data-tree-item-content]:focus:not(:disabled) {
+  background-image:none;outline:2px solid transparent;outline-offset:2px;color:var(--ink);
+}
+
+/* Focus visible for keyboard navigation */
+[data-style='minimal'] [data-tree-item-content]:focus-visible {
+  outline:2px solid transparent;outline-offset:2px;--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(--ink-soft);
+}
+
+/* Active/selected state — bolder colored segment at the content's
+   left edge (consistent with the minimal List guide-line aesthetic).
+   The tree's structural indent connector lines stay as-is; this is
+   the leaf-level active indicator. No per-item border. */
+[data-style='minimal'] [data-tree-item-content][data-active='true'] {
+  color:var(--primary);
+  box-shadow: inset 2px 0 0 0 var(--primary);
+}
+
+[data-style='minimal'] [data-tree-item-content][data-active='true']:hover:not(:disabled) {
+  color:var(--primary);
+}
+
+/* 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'] {
+  background-image:none;
+}
+
+[data-style='minimal']
+  [data-tree]:focus-within
+  [data-tree-item-content][data-active='true']:hover:not(:disabled) {
+  background-image:none;
+}
+
+[data-style='minimal'] [data-tree]:not(:focus-within) [data-tree-item-content][data-active='true'] {
+  background-image:none;
+}
+
+/* =============================================================================
+   Item Elements
+   ============================================================================= */
+
+[data-style='minimal'] [data-tree-item-content] [data-item-icon] {
+  color:var(--ink-mute);
+}
+
+[data-style='minimal'] [data-tree-item-content]:hover:not(:disabled) [data-item-icon] {
+  color:var(--ink-mute);
+}
+
+[data-style='minimal'] [data-tree-item-content][data-active='true'] [data-item-icon] {
+  color:var(--primary);
+}
+
+[data-style='minimal'] [data-tree-item-content] [data-item-description] {
+  color:var(--ink-mute);
+}
+
+[data-style='minimal'] [data-tree-item-content][data-active='true'] [data-item-description] {
+  color:var(--primary);
+}
+
+[data-style='minimal'] [data-tree-item-content] [data-item-badge] {
+  border-width:1px;background-color:transparent;background-image:none;color:var(--ink-mute);border-color:var(--paper-edge);
+}
+
+[data-style='minimal'] [data-tree-item-content][data-active='true'] [data-item-badge] {
+  color:var(--primary);border-color:var(--primary);
+}
+
+[data-style='minimal']
+  [data-tree]:focus-within
+  [data-tree-item-content][data-active='true']
+  [data-item-badge] {
+  background-image:none;
+}
+
+[data-style='minimal']
+  [data-tree]:not(:focus-within)
+  [data-tree-item-content][data-active='true']
+  [data-item-badge] {
+  background-image:none;
+}
+
+/* =============================================================================
+   Multi-Selection
+   ============================================================================= */
+
+[data-style='minimal'] [data-tree-node][data-selected='true'] [data-tree-item-content] {
+  color:var(--primary);
+  box-shadow: inset 2px 0 0 0 var(--primary);
+}
+
+[data-style='minimal']
+  [data-tree]:focus-within
+  [data-tree-node][data-selected='true']
+  [data-tree-item-content] {
+  color:var(--primary);
+  box-shadow: inset 2px 0 0 0 var(--primary);
+}
+
+[data-style='minimal']
+  [data-tree-node][data-selected='true']
+  [data-tree-item-content]
+  [data-item-icon] {
+  color:var(--primary);
+}