@rokkit/themes 1.1.8 → 1.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/themes",
-  "version": "1.1.8",
+  "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.8"
+  "@rokkit/core": "1.1.9"
 },
 "devDependencies": {
-  "@rokkit/unocss": "1.1.8",
+  "@rokkit/unocss": "1.1.9",
   "magic-string": "^0.30.21",
   "unocss": "^66.5.1"
 },

package/src/base/grid.css

@@ -91,38 +91,3 @@
 [data-grid][data-size='lg'] [data-grid-item] [data-item-icon] {
   font-size: 2rem;
 }
-
-/* =============================================================================
-   Default Colors (flipping named tokens — applies to every style)
-   Mirrors rokkit/grid.css using raw var(--token) so non-rokkit styles
-   inherit tile borders, hover/focus, active selection, and icon tinting.
-   ============================================================================= */
-
-[data-grid-item] {
-  border-color: var(--paper-edge);
-  color: var(--ink-mute);
-}
-
-[data-grid-item]:hover:not(:disabled):not([data-disabled]),
-[data-grid-item]:focus:not(:disabled):not([data-disabled]) {
-  border-color: var(--ink-soft);
-  background: var(--paper-mute);
-  color: var(--ink);
-}
-
-[data-grid-item][data-active] {
-  border-color: var(--primary);
-  color: var(--primary);
-}
-
-[data-grid-item] [data-item-icon] {
-  color: var(--ink-soft);
-}
-
-[data-grid-item]:hover:not(:disabled):not([data-disabled]) [data-item-icon] {
-  color: var(--ink-mute);
-}
-
-[data-grid-item][data-active] [data-item-icon] {
-  color: var(--primary);
-}

package/src/base/palette-manager.css

@@ -1,9 +1,15 @@
 /**
- * PaletteManager — Base structural styles + flipping default colors.
+ * PaletteManager — Base STRUCTURAL styles only.
  *
- * Uses raw var(--token) named tokens (complete colors that flip under
- * [data-mode="dark"]) so the component is usable in every theme without a
- * dedicated theme layer. Structure first, readable colors second.
+ * 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
@@ -28,10 +34,9 @@
   flex-direction: column;
   gap: 1rem;
   padding: 1rem;
-  border: 1px solid var(--paper-edge);
+  border-width: 1px;
+  border-style: solid;
   border-radius: var(--radius-md, 0.375rem);
-  background-color: var(--paper);
-  color: var(--ink);
   font-size: 0.875rem;
 }
 
@@ -52,7 +57,6 @@
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  color: var(--ink-mute);
 }
 
 /* =============================================================================
@@ -70,10 +74,9 @@
   align-items: center;
   gap: 0.5rem;
   padding: 0.375rem 0.625rem;
-  border: 1px solid var(--paper-edge);
+  border-width: 1px;
+  border-style: solid;
   border-radius: var(--radius-md, 0.375rem);
-  background-color: var(--paper-soft);
-  color: var(--ink);
   font-size: 0.8125rem;
   cursor: pointer;
   transition:
@@ -82,21 +85,13 @@
     color 150ms ease;
 }
 
-[data-palette-preset]:hover {
-  background-color: var(--paper-mute);
-}
-
-[data-palette-preset][data-active] {
-  border-color: var(--primary);
-  color: var(--primary);
-}
-
 [data-palette-preset-swatch] {
   width: 1rem;
   height: 1rem;
   flex-shrink: 0;
   border-radius: 9999px;
-  border: 1px solid var(--paper-edge);
+  border-width: 1px;
+  border-style: solid;
   background-color: var(--preset-color, var(--primary));
 }
 
@@ -116,10 +111,9 @@
 
 [data-palette-custom-item] {
   padding: 0.375rem 0.625rem;
-  border: 1px solid var(--paper-edge);
+  border-width: 1px;
+  border-style: solid;
   border-radius: var(--radius-md, 0.375rem);
-  background-color: var(--paper-soft);
-  color: var(--ink-mute);
   font-size: 0.8125rem;
   cursor: pointer;
   transition:
@@ -128,16 +122,6 @@
     color 150ms ease;
 }
 
-[data-palette-custom-item]:hover {
-  background-color: var(--paper-mute);
-  color: var(--ink);
-}
-
-[data-palette-custom-item][data-active] {
-  border-color: var(--primary);
-  color: var(--primary);
-}
-
 /* =============================================================================
    Editor / role rows
    ============================================================================= */
@@ -158,7 +142,6 @@
   flex: 0 0 6rem;
   font-size: 0.8125rem;
   font-weight: 500;
-  color: var(--ink);
 }
 
 [data-palette-role-controls] {
@@ -174,23 +157,18 @@
 [data-palette-color-select],
 [data-palette-color-input] {
   padding: 0.3125rem 0.5rem;
-  border: 1px solid var(--paper-edge);
+  border-width: 1px;
+  border-style: solid;
   border-radius: var(--radius-md, 0.375rem);
-  background-color: var(--paper-soft);
-  color: var(--ink);
   font-size: 0.8125rem;
   line-height: 1.2;
 }
 
-[data-palette-color-input]::placeholder {
-  color: var(--ink-faint);
-}
-
 [data-palette-color-select]:focus-visible,
 [data-palette-color-input]:focus-visible {
-  outline: 2px solid var(--primary);
+  outline-width: 2px;
+  outline-style: solid;
   outline-offset: 1px;
-  border-color: var(--primary);
 }
 
 [data-palette-hex-toggle] {
@@ -200,21 +178,15 @@
   width: 1.75rem;
   height: 1.75rem;
   padding: 0;
-  border: 1px solid var(--paper-edge);
+  border-width: 1px;
+  border-style: solid;
   border-radius: var(--radius-md, 0.375rem);
-  background-color: var(--paper-soft);
-  color: var(--ink-mute);
   cursor: pointer;
   transition:
     background-color 150ms ease,
     color 150ms ease;
 }
 
-[data-palette-hex-toggle]:hover {
-  background-color: var(--paper-mute);
-  color: var(--ink);
-}
-
 /* =============================================================================
    Shade ramp
    ============================================================================= */
@@ -224,7 +196,8 @@
   margin-left: auto;
   border-radius: var(--radius-md, 0.375rem);
   overflow: hidden;
-  border: 1px solid var(--paper-edge);
+  border-width: 1px;
+  border-style: solid;
 }
 
 [data-palette-shade] {
@@ -260,32 +233,12 @@
 
 /* Save = secondary / outlined */
 [data-palette-save] {
-  border: 1px solid var(--paper-edge);
-  background-color: var(--paper-soft);
-  color: var(--ink-mute);
-}
-
-[data-palette-save]:hover {
-  background-color: var(--paper-mute);
-  color: var(--ink);
+  border-width: 1px;
+  border-style: solid;
 }
 
 /* Apply = primary action */
 [data-palette-apply] {
-  border: 1px solid var(--primary);
-  background-color: var(--primary);
-  color: var(--on-primary);
-}
-
-[data-palette-apply]:hover {
-  background-color: var(--primary-soft);
-  border-color: var(--primary-soft);
-}
-
-/* Icon glyphs follow their button's text color */
-[data-palette-presets-icon],
-[data-palette-hex-icon],
-[data-palette-save-icon],
-[data-palette-check-icon] {
-  color: inherit;
+  border-width: 1px;
+  border-style: solid;
 }

package/src/base/pill.css

@@ -11,8 +11,6 @@
   white-space: nowrap;
   outline: none;
   vertical-align: middle;
-  background: var(--paper-mute);
-  color: var(--ink);
 }
 
 [data-pill-icon] {
@@ -37,7 +35,6 @@
   border-radius: 9999px;
   cursor: pointer;
   background: transparent;
-  color: var(--ink-soft);
   opacity: 0.6;
   transition:
     opacity 0.15s ease,
@@ -48,7 +45,6 @@
 
 [data-pill-remove]:hover {
   opacity: 1;
-  color: var(--ink);
 }
 
 [data-pill-remove]:disabled {

package/src/base/progress.css

@@ -6,14 +6,12 @@
   height: 0.5rem;
   border-radius: 9999px;
   overflow: hidden;
-  background: var(--paper-mute);
 }
 
 [data-progress-bar] {
   height: 100%;
   border-radius: 9999px;
   transition: width 0.3s ease;
-  background: var(--primary);
 }
 
 [data-progress][data-indeterminate] [data-progress-bar] {

package/src/base/rating.css

@@ -40,11 +40,3 @@
 [data-rating-item][data-filled] {
   opacity: 1;
 }
-
-[data-rating-icon] {
-  color: var(--ink-faint);
-}
-
-[data-rating-item][data-filled] [data-rating-icon] {
-  color: var(--warning);
-}

package/src/base/table.css

@@ -92,21 +92,6 @@
   outline: none;
 }
 
-/* Default state colors (flipping named tokens — applies to every style).
-   data-focused = keyboard-focused row (Table + TreeTable emit it as a bare
-   attribute). data-group = synthesised group row in TreeTable. Scoped under
-   [data-table] so the bare attribute selectors don't bleed into other
-   components. Selected/hover remain owned by per-style theme CSS. */
-[data-table] tr[data-table-row][data-focused] {
-  background: var(--paper-mute);
-}
-
-[data-table] tr[data-table-row][data-group] {
-  background: var(--paper-soft);
-  color: var(--ink);
-  font-weight: 500;
-}
-
 /* =============================================================================
    Cells
    ============================================================================= */

package/src/base/tooltip.css

@@ -62,15 +62,3 @@
   visibility: visible;
   opacity: 1;
 }
-
-/* =============================================================================
-   Default Colors (flipping named tokens — applies to every style)
-   Tooltips are inverse: dark bubble on light text. Mirrors rokkit/tooltip.css
-   using raw var(--token). The component renders no arrow element, so only the
-   bubble (data-tooltip-content) is colored.
-   ============================================================================= */
-
-[data-tooltip-content] {
-  background: var(--ink);
-  color: var(--paper);
-}

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/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';