@rokkit/themes 1.1.7 → 1.1.9

package/src/zen-sumi/index.css

@@ -27,6 +27,8 @@
 @import './floating-action.css';
 @import './input.css';
 @import './table.css';
+@import './grid.css';
+@import './tooltip.css';
 @import './search-filter.css';
 @import './range.css';
 @import './timeline.css';
@@ -40,6 +42,10 @@
 @import './step-indicator.css';
 @import './chart.css';
 @import './swatch.css';
+@import './palette-manager.css';
+@import './progress.css';
+@import './pill.css';
+@import './rating.css';
 
 /* =============================================================================
    Layout overrides — Ma (間) generous spacing

package/src/zen-sumi/palette-manager.css

@@ -0,0 +1,97 @@
+/**
+ * PaletteManager — Zen-Sumi Theme
+ * Color layer for the headless base structure in base/palette-manager.css.
+ */
+
+/* Container */
+[data-style='zen-sumi'] [data-palette-manager] {
+  @apply bg-paper text-ink border-paper-edge;
+}
+
+/* Section labels */
+[data-style='zen-sumi'] [data-palette-presets-label],
+[data-style='zen-sumi'] [data-palette-custom-label] {
+  @apply text-ink-mute;
+}
+
+/* Presets */
+[data-style='zen-sumi'] [data-palette-preset] {
+  @apply bg-paper-soft text-ink border-paper-edge;
+}
+
+[data-style='zen-sumi'] [data-palette-preset]:hover {
+  @apply bg-paper-mute;
+}
+
+[data-style='zen-sumi'] [data-palette-preset][data-active] {
+  @apply text-primary border-primary;
+}
+
+[data-style='zen-sumi'] [data-palette-preset-swatch] {
+  @apply border-paper-edge;
+}
+
+/* Custom palettes */
+[data-style='zen-sumi'] [data-palette-custom-item] {
+  @apply bg-paper-soft text-ink-mute border-paper-edge;
+}
+
+[data-style='zen-sumi'] [data-palette-custom-item]:hover {
+  @apply bg-paper-mute text-ink;
+}
+
+[data-style='zen-sumi'] [data-palette-custom-item][data-active] {
+  @apply text-primary border-primary;
+}
+
+/* Role rows */
+[data-style='zen-sumi'] [data-palette-role-label] {
+  @apply text-ink;
+}
+
+/* Color pickers */
+[data-style='zen-sumi'] [data-palette-color-select],
+[data-style='zen-sumi'] [data-palette-color-input] {
+  @apply bg-paper-soft text-ink border-paper-edge;
+}
+
+[data-style='zen-sumi'] [data-palette-color-input]::placeholder {
+  @apply text-ink-faint;
+}
+
+[data-style='zen-sumi'] [data-palette-color-select]:focus-visible,
+[data-style='zen-sumi'] [data-palette-color-input]:focus-visible {
+  @apply outline-focus-ring border-focus-ring;
+}
+
+/* Hex toggle */
+[data-style='zen-sumi'] [data-palette-hex-toggle] {
+  @apply bg-paper-soft text-ink-mute border-paper-edge;
+}
+
+[data-style='zen-sumi'] [data-palette-hex-toggle]:hover {
+  @apply bg-paper-mute text-ink;
+}
+
+/* Shade ramp */
+[data-style='zen-sumi'] [data-palette-shades] {
+  @apply border-paper-edge;
+}
+
+/* Actions — Save = secondary / outlined */
+[data-style='zen-sumi'] [data-palette-save] {
+  @apply bg-paper-soft text-ink-mute border-paper-edge;
+}
+
+[data-style='zen-sumi'] [data-palette-save]:hover {
+  @apply bg-paper-mute text-ink;
+}
+
+/* Actions — Apply = primary */
+[data-style='zen-sumi'] [data-palette-apply] {
+  @apply bg-primary text-on-primary border-primary;
+}
+
+[data-style='zen-sumi'] [data-palette-apply]:hover {
+  @apply bg-accent border-accent;
+}

package/src/zen-sumi/pill.css

@@ -0,0 +1,17 @@
+/**
+ * Pill - Zen-Sumi Theme Styles
+ *
+ * Muted surface chip with soft remove affordance.
+ */
+
+[data-style='zen-sumi'] [data-pill] {
+  @apply bg-paper-mute text-ink;
+}
+
+[data-style='zen-sumi'] [data-pill-remove] {
+  @apply text-ink-soft;
+}
+
+[data-style='zen-sumi'] [data-pill-remove]:hover:not(:disabled) {
+  @apply text-ink;
+}

package/src/zen-sumi/progress.css

@@ -0,0 +1,13 @@
+/**
+ * ProgressBar - Zen-Sumi Theme Styles
+ *
+ * Default track + primary fill colors.
+ */
+
+[data-style='zen-sumi'] [data-progress] {
+  @apply bg-paper-mute;
+}
+
+[data-style='zen-sumi'] [data-progress-bar] {
+  @apply bg-primary;
+}

package/src/zen-sumi/rating.css

@@ -0,0 +1,13 @@
+/**
+ * Rating - Zen-Sumi Theme Styles
+ *
+ * Faint empty icons, warning-toned filled icons.
+ */
+
+[data-style='zen-sumi'] [data-rating-icon] {
+  @apply text-ink-faint;
+}
+
+[data-style='zen-sumi'] [data-rating-item][data-filled] [data-rating-icon] {
+  @apply text-warning;
+}

package/src/zen-sumi/table.css

@@ -68,6 +68,16 @@
   @apply text-primary border-l-primary border-l-2 bg-none;
 }
 
+/* Keyboard-focused row + synthesised TreeTable group row */
+[data-style='zen-sumi'] [data-table] tr[data-table-row][data-focused] {
+  @apply bg-paper-mute;
+}
+
+[data-style='zen-sumi'] [data-table] tr[data-table-row][data-group] {
+  @apply bg-paper-soft text-ink;
+  font-weight: 500;
+}
+
 /* =============================================================================
    Striped
    ============================================================================= */

package/src/zen-sumi/toggle.css

@@ -57,3 +57,29 @@
 [data-style='zen-sumi'] [data-toggle-option][data-selected='true'] [data-toggle-icon] {
   @apply text-on-primary;
 }
+
+/* =============================================================================
+   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='zen-sumi'] [data-toggle][data-toggle-variant='button'] {
+  @apply border-transparent bg-transparent text-ink-soft;
+  background-image: none;
+}
+
+[data-style='zen-sumi'] [data-toggle][data-toggle-variant='button']:hover:not(:disabled):not([data-toggle-disabled='true']),
+[data-style='zen-sumi'] [data-toggle][data-toggle-variant='button']:focus-visible:not(:disabled):not([data-toggle-disabled='true']) {
+  @apply bg-paper-mute text-ink-mute;
+}
+
+[data-style='zen-sumi'] [data-toggle][data-toggle-variant='button'] [data-toggle-icon] {
+  @apply text-ink-soft;
+}
+
+[data-style='zen-sumi'] [data-toggle][data-toggle-variant='button']:hover:not(:disabled) [data-toggle-icon],
+[data-style='zen-sumi'] [data-toggle][data-toggle-variant='button']:focus-visible:not(:disabled) [data-toggle-icon] {
+  @apply text-ink-mute;
+}

package/src/zen-sumi/tooltip.css

@@ -0,0 +1,7 @@
+/**
+ * Tooltip - Zen-Sumi Theme Styles
+ */
+
+[data-style='zen-sumi'] [data-tooltip-content] {
+  @apply bg-ink text-paper;
+}