@rokkit/themes 1.1.7 → 1.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/themes",
-  "version": "1.1.7",
+  "version": "1.1.9",
   "description": "Theme styles for @rokkit/ui components",
   "repository": {
     "type": "git",
@@ -103,10 +103,10 @@
   "build": "bun run build.mjs"
 },
 "dependencies": {
-  "@rokkit/core": "1.1.7"
+  "@rokkit/core": "1.1.9"
 },
 "devDependencies": {
-  "@rokkit/unocss": "1.1.7",
+  "@rokkit/unocss": "1.1.9",
   "magic-string": "^0.30.21",
   "unocss": "^66.5.1"
 },

package/src/base/index.css

@@ -53,6 +53,7 @@
 @import './alert-list.css';
 @import './chart.css';
 @import './swatch.css';
+@import './palette-manager.css';
 @import './divider.css';
 @import './stack.css';
 @import './badge.css';

package/src/base/palette-manager.css

@@ -0,0 +1,244 @@
+/**
+ * PaletteManager — Base STRUCTURAL styles only.
+ *
+ * Headless base: this file owns layout/structure (display, flex/grid, gap,
+ * padding, sizing, border-width/style, border-radius, font metrics, cursor,
+ * transition, overflow, etc.). All COLOR (background/text/border-color, focus
+ * ring color, placeholder color) lives in the per-style theme layers
+ * (rokkit / minimal / material / frosted / zen-sumi) via @apply token classes.
+ *
+ * The shade-swatch background uses the component-supplied inline
+ * `--preset-color` variable — that is component-driven, not a theme token, so
+ * it stays here.
+ *
+ * Parts (from PaletteManager.svelte):
+ *   data-palette-manager / data-compact          — root container
+ *   data-palette-presets / -label / -list        — preset section
+ *   data-palette-preset / -swatch / -name         — preset card (--preset-color)
+ *   data-palette-custom / -label / -list / -item  — saved custom palettes
+ *   data-palette-editor                           — role rows wrapper
+ *   data-palette-role / -label / -controls        — single role row
+ *   data-palette-color-select / -color-input      — color pickers
+ *   data-palette-hex-toggle                        — toggle preset/hex entry
+ *   data-palette-shades / -shade (data-shade)      — generated shade ramp
+ *   data-palette-actions / -save / -apply          — footer buttons
+ *   data-palette-*-icon                            — glyph spans
+ */
+
+/* =============================================================================
+   Container
+   ============================================================================= */
+
+[data-palette-manager] {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: var(--radius-md, 0.375rem);
+  font-size: 0.875rem;
+}
+
+[data-palette-manager][data-compact] {
+  gap: 0.625rem;
+  padding: 0.625rem;
+}
+
+/* =============================================================================
+   Section labels (presets / custom)
+   ============================================================================= */
+
+[data-palette-presets-label],
+[data-palette-custom-label] {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* =============================================================================
+   Presets
+   ============================================================================= */
+
+[data-palette-presets-list] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+[data-palette-preset] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.375rem 0.625rem;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: var(--radius-md, 0.375rem);
+  font-size: 0.8125rem;
+  cursor: pointer;
+  transition:
+    background-color 150ms ease,
+    border-color 150ms ease,
+    color 150ms ease;
+}
+
+[data-palette-preset-swatch] {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  border-radius: 9999px;
+  border-width: 1px;
+  border-style: solid;
+  background-color: var(--preset-color, var(--primary));
+}
+
+[data-palette-preset-name] {
+  white-space: nowrap;
+}
+
+/* =============================================================================
+   Custom palettes
+   ============================================================================= */
+
+[data-palette-custom-list] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+[data-palette-custom-item] {
+  padding: 0.375rem 0.625rem;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: var(--radius-md, 0.375rem);
+  font-size: 0.8125rem;
+  cursor: pointer;
+  transition:
+    background-color 150ms ease,
+    border-color 150ms ease,
+    color 150ms ease;
+}
+
+/* =============================================================================
+   Editor / role rows
+   ============================================================================= */
+
+[data-palette-editor] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+}
+
+[data-palette-role] {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+[data-palette-role-label] {
+  flex: 0 0 6rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+}
+
+[data-palette-role-controls] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+/* =============================================================================
+   Color pickers
+   ============================================================================= */
+
+[data-palette-color-select],
+[data-palette-color-input] {
+  padding: 0.3125rem 0.5rem;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: var(--radius-md, 0.375rem);
+  font-size: 0.8125rem;
+  line-height: 1.2;
+}
+
+[data-palette-color-select]:focus-visible,
+[data-palette-color-input]:focus-visible {
+  outline-width: 2px;
+  outline-style: solid;
+  outline-offset: 1px;
+}
+
+[data-palette-hex-toggle] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  padding: 0;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: var(--radius-md, 0.375rem);
+  cursor: pointer;
+  transition:
+    background-color 150ms ease,
+    color 150ms ease;
+}
+
+/* =============================================================================
+   Shade ramp
+   ============================================================================= */
+
+[data-palette-shades] {
+  display: inline-flex;
+  margin-left: auto;
+  border-radius: var(--radius-md, 0.375rem);
+  overflow: hidden;
+  border-width: 1px;
+  border-style: solid;
+}
+
+[data-palette-shade] {
+  width: 1rem;
+  height: 1rem;
+}
+
+/* =============================================================================
+   Actions
+   ============================================================================= */
+
+[data-palette-actions] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+[data-palette-save],
+[data-palette-apply] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.4375rem 0.875rem;
+  border-radius: var(--radius-md, 0.375rem);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition:
+    background-color 150ms ease,
+    border-color 150ms ease,
+    color 150ms ease;
+}
+
+/* Save = secondary / outlined */
+[data-palette-save] {
+  border-width: 1px;
+  border-style: solid;
+}
+
+/* Apply = primary action */
+[data-palette-apply] {
+  border-width: 1px;
+  border-style: solid;
+}

package/src/base/pill.css

@@ -35,9 +35,10 @@
   border-radius: 9999px;
   cursor: pointer;
   background: transparent;
-  color: inherit;
   opacity: 0.6;
-  transition: opacity 0.15s ease;
+  transition:
+    opacity 0.15s ease,
+    color 0.15s ease;
   font-size: 0.75rem;
   flex-shrink: 0;
 }

package/src/base/stepper.css

@@ -52,6 +52,12 @@
   color: var(--paper);
 }
 
+/* Check glyph inside a completed circle follows the circle's color
+   (var(--paper) on a --primary background → correct contrast). */
+[data-stepper-check-icon] {
+  color: inherit;
+}
+
 [data-stepper-step][data-active] [data-stepper-circle] {
   border-color: var(--primary);
   color: var(--primary);

package/src/base/toggle.css

@@ -136,3 +136,50 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+/* =============================================================================
+   Button Variant — single cycling control
+   The `button` variant renders one <button data-toggle-variant="button"> with
+   the icon as a direct child (no [data-toggle-option]). Give it real control
+   structure + sizing here; color lives in the style themes (variant-agnostic).
+   ============================================================================= */
+
+[data-toggle][data-toggle-variant='button'] {
+  justify-content: center;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: 0.375rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 150ms ease;
+  user-select: none;
+}
+
+[data-toggle][data-toggle-variant='button']:focus,
+[data-toggle][data-toggle-variant='button']:focus-visible {
+  outline: none;
+}
+
+[data-toggle][data-toggle-variant='button']:disabled,
+[data-toggle][data-toggle-variant='button'][data-toggle-disabled='true'] {
+  pointer-events: none;
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Square control sized to match the option height scale */
+[data-toggle][data-toggle-variant='button'][data-toggle-size='sm'] {
+  height: 1.5rem;
+  min-width: 1.5rem;
+}
+
+[data-toggle][data-toggle-variant='button'][data-toggle-size='md'],
+[data-toggle][data-toggle-variant='button']:not([data-toggle-size]) {
+  height: 2rem;
+  min-width: 2rem;
+}
+
+[data-toggle][data-toggle-variant='button'][data-toggle-size='lg'] {
+  height: 2.5rem;
+  min-width: 2.5rem;
+}

package/src/frosted/grid.css

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

package/src/frosted/index.css

@@ -18,6 +18,8 @@
 @import './dropdown.css';
 @import './floating-action.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/frosted/palette-manager.css

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

package/src/frosted/pill.css

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

package/src/frosted/progress.css

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

package/src/frosted/rating.css

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

package/src/frosted/table.css

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

package/src/frosted/toggle.css

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

package/src/frosted/tooltip.css

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

package/src/material/grid.css

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

package/src/material/index.css

@@ -18,6 +18,8 @@
 @import './dropdown.css';
 @import './floating-action.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';