@rokkit/themes 1.1.7 → 1.1.9

package/src/material/palette-manager.css

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

package/src/material/pill.css

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

package/src/material/progress.css

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

package/src/material/rating.css

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

package/src/material/table.css

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

package/src/material/toggle.css

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

package/src/material/tooltip.css

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

package/src/minimal/grid.css

@@ -0,0 +1,26 @@
+/**
+ * Grid - Minimal Theme Styles
+ *
+ * Tile borders, hover/focus effects, selection highlight.
+ */
+
+[data-style='minimal'] [data-grid-item] {
+  @apply border-paper-edge text-ink-mute;
+}
+
+[data-style='minimal'] [data-grid-item]:hover:not(:disabled):not([data-disabled]),
+[data-style='minimal'] [data-grid-item]:focus:not(:disabled):not([data-disabled]) {
+  @apply border-ink-soft bg-paper-mute text-ink;
+}
+
+[data-style='minimal'] [data-grid-item][data-active] {
+  @apply border-primary text-primary;
+}
+
+[data-style='minimal'] [data-grid-item] [data-item-icon] {
+  @apply text-ink-soft;
+}
+
+[data-style='minimal'] [data-grid-item][data-active] [data-item-icon] {
+  @apply text-primary;
+}

package/src/minimal/index.css

@@ -18,6 +18,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';
@@ -31,3 +33,7 @@
 @import './step-indicator.css';
 @import './chart.css';
 @import './swatch.css';
+@import './palette-manager.css';
+@import './progress.css';
+@import './pill.css';
+@import './rating.css';

package/src/minimal/palette-manager.css

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

package/src/minimal/pill.css

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

package/src/minimal/progress.css

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

package/src/minimal/rating.css

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

package/src/minimal/table.css

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

package/src/minimal/toggle.css

@@ -46,3 +46,29 @@
 [data-style='minimal'] [data-toggle-option][data-selected='true'] [data-toggle-icon] {
   @apply text-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'] {
+  @apply border-transparent bg-transparent text-ink-soft;
+  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']) {
+  @apply bg-paper-mute text-ink-mute;
+}
+
+[data-style='minimal'] [data-toggle][data-toggle-variant='button'] [data-toggle-icon] {
+  @apply text-ink-soft;
+}
+
+[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] {
+  @apply text-ink-mute;
+}

package/src/minimal/tooltip.css

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

package/src/rokkit/index.css

@@ -35,6 +35,10 @@
 @import './step-indicator.css';
 @import './chart.css';
 @import './swatch.css';
+@import './palette-manager.css';
+@import './progress.css';
+@import './pill.css';
+@import './rating.css';
 @import './divider.css';
 @import './badge.css';
 @import './avatar.css';

package/src/rokkit/palette-manager.css

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

package/src/rokkit/pill.css

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

package/src/rokkit/progress.css

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

package/src/rokkit/rating.css

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

package/src/rokkit/table.css

@@ -60,6 +60,16 @@
   @apply from-primary to-accent text-primary bg-gradient-to-r;
 }
 
+/* Keyboard-focused row + synthesised TreeTable group row */
+[data-style='rokkit'] [data-table] tr[data-table-row][data-focused] {
+  @apply bg-paper-mute;
+}
+
+[data-style='rokkit'] [data-table] tr[data-table-row][data-group] {
+  @apply bg-paper-soft text-ink;
+  font-weight: 500;
+}
+
 /* =============================================================================
    Striped
    ============================================================================= */

package/src/rokkit/toggle.css

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

package/src/zen-sumi/grid.css

@@ -0,0 +1,26 @@
+/**
+ * Grid - Zen-Sumi Theme Styles
+ *
+ * Tile borders, hover/focus effects, selection highlight.
+ */
+
+[data-style='zen-sumi'] [data-grid-item] {
+  @apply border-paper-edge text-ink-mute;
+}
+
+[data-style='zen-sumi'] [data-grid-item]:hover:not(:disabled):not([data-disabled]),
+[data-style='zen-sumi'] [data-grid-item]:focus:not(:disabled):not([data-disabled]) {
+  @apply border-ink-soft bg-paper-mute text-ink;
+}
+
+[data-style='zen-sumi'] [data-grid-item][data-active] {
+  @apply border-primary text-primary;
+}
+
+[data-style='zen-sumi'] [data-grid-item] [data-item-icon] {
+  @apply text-ink-soft;
+}
+
+[data-style='zen-sumi'] [data-grid-item][data-active] [data-item-icon] {
+  @apply text-primary;
+}