@rokkit/themes 1.1.8 → 1.1.10

package/package.json

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

package/src/base/button.css

@@ -67,14 +67,14 @@
 
 /* Small */
 [data-button][data-size='sm'] {
-  height: 1.75rem;
+  height: var(--control-h-sm);
   padding-inline: 0.625rem;
   font-size: 0.75rem;
   gap: 0.375rem;
 }
 
 [data-button][data-size='sm'][data-icon-only] {
-  width: 1.75rem;
+  width: var(--control-h-sm);
 }
 
 [data-button][data-size='sm'] [data-item-icon],
@@ -85,7 +85,7 @@
 /* Medium (default) — responds to density */
 [data-button][data-size='md'],
 [data-button]:not([data-size]) {
-  height: calc(var(--density-icon-size) + var(--density-spacing-sm) * 2);
+  height: var(--control-h-md);
   padding-inline: var(--density-spacing-lg);
   font-size: 0.875rem;
   gap: var(--density-spacing-sm);
@@ -93,7 +93,7 @@
 
 [data-button][data-size='md'][data-icon-only],
 [data-button]:not([data-size])[data-icon-only] {
-  width: calc(var(--density-icon-size) + var(--density-spacing-sm) * 2);
+  width: var(--control-h-md);
 }
 
 [data-button][data-size='md'] [data-item-icon],
@@ -105,14 +105,14 @@
 
 /* Large */
 [data-button][data-size='lg'] {
-  height: 2.75rem;
+  height: var(--control-h-lg);
   padding-inline: 1.5rem;
   font-size: 1rem;
   gap: 0.625rem;
 }
 
 [data-button][data-size='lg'][data-icon-only] {
-  width: 2.75rem;
+  width: var(--control-h-lg);
 }
 
 [data-button][data-size='lg'] [data-item-icon],

package/src/base/density.css

@@ -7,6 +7,15 @@
  * Axes: compact → comfortable (default) → cozy
  */
 
+/* Control heights — fixed scale (rem, so they track font-size). Density drives
+   internal spacing/padding/typography, NOT the control height, so same-size
+   controls (button, select, dropdown, menu, toggle, input) always align. */
+:root {
+  --control-h-sm: 1.75rem;
+  --control-h-md: 2.25rem;
+  --control-h-lg: 2.75rem;
+}
+
 :root,
 [data-density='comfortable'] {
   --density-spacing-base: 1rem;

package/src/base/dropdown.css

@@ -47,20 +47,20 @@
 
 /* Size variants */
 [data-dropdown][data-size='sm'] [data-dropdown-trigger] {
-  height: 1.5rem;
+  height: var(--control-h-sm);
   padding-inline: 0.5rem;
   font-size: 0.75rem;
 }
 
 [data-dropdown][data-size='md'] [data-dropdown-trigger],
 [data-dropdown]:not([data-size]) [data-dropdown-trigger] {
-  height: calc(var(--density-icon-size) + var(--density-spacing-xs) * 2);
+  height: var(--control-h-md);
   padding-inline: var(--density-spacing-md);
   font-size: 0.875rem;
 }
 
 [data-dropdown][data-size='lg'] [data-dropdown-trigger] {
-  height: 2.5rem;
+  height: var(--control-h-lg);
   padding-inline: 0.75rem;
   font-size: 1rem;
 }

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/input.css

@@ -169,6 +169,11 @@ button[data-form-reset]:disabled {
 [data-input-root] [data-select] [data-select-trigger] {
   @apply flex-1 self-stretch;
   min-width: 0;
+  /* Fill the field (via self-stretch) instead of imposing the standalone control
+     height — so a control embedded in a form field is the same height as a plain
+     field (the wrapper owns the height). Any control embedded in [data-input-root]
+     should follow this contract. */
+  height: auto;
 }
 
 /* Checkbox icon */
@@ -201,6 +206,10 @@ button[data-form-reset]:disabled {
 /* Input wrapper: horizontal for input + icon */
 [data-input-root] {
   @apply flex flex-row items-center;
+  /* Align to the shared control-height scale so a text field lines up with
+     buttons/selects/etc. at the default (md) size. min-height (not height) so
+     a textarea still grows past one line. */
+  min-height: var(--control-h-md);
 }
 
 /* Input elements fill available width */

package/src/base/menu.css

@@ -48,20 +48,20 @@
 
 /* Size variants */
 [data-menu][data-size='sm'] [data-menu-trigger] {
-  height: 1.5rem;
+  height: var(--control-h-sm);
   padding-inline: 0.5rem;
   font-size: 0.75rem;
 }
 
 [data-menu][data-size='md'] [data-menu-trigger],
 [data-menu]:not([data-size]) [data-menu-trigger] {
-  height: calc(var(--density-icon-size) + var(--density-spacing-xs) * 2);
+  height: var(--control-h-md);
   padding-inline: var(--density-spacing-md);
   font-size: 0.875rem;
 }
 
 [data-menu][data-size='lg'] [data-menu-trigger] {
-  height: 2.5rem;
+  height: var(--control-h-lg);
   padding-inline: 0.75rem;
   font-size: 1rem;
 }

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,9 @@
   white-space: nowrap;
   outline: none;
   vertical-align: middle;
-  background: var(--paper-mute);
-  color: var(--ink);
+  /* Align to the smallest control rung (pills are the compact end of the family);
+     min-height so content can still grow. */
+  min-height: var(--control-h-sm);
 }
 
 [data-pill-icon] {
@@ -37,7 +38,6 @@
   border-radius: 9999px;
   cursor: pointer;
   background: transparent;
-  color: var(--ink-soft);
   opacity: 0.6;
   transition:
     opacity 0.15s ease,
@@ -48,7 +48,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/range.css

@@ -13,7 +13,8 @@
   position: relative;
   display: grid;
   grid-template-rows: auto auto;
-  height: 2.5rem;
+  /* Align to the shared control-height scale (no size prop → md). */
+  height: var(--control-h-md);
   user-select: none;
 }
 

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/select.css

@@ -49,20 +49,20 @@
 
 /* Size variants */
 [data-select][data-size='sm'] [data-select-trigger] {
-  height: 1.75rem;
+  height: var(--control-h-sm);
   padding-inline: 0.5rem;
   font-size: 0.75rem;
 }
 
 [data-select][data-size='md'] [data-select-trigger],
 [data-select]:not([data-size]) [data-select-trigger] {
-  height: 2.25rem;
+  height: var(--control-h-md);
   padding-inline: 0.75rem;
   font-size: 0.875rem;
 }
 
 [data-select][data-size='lg'] [data-select-trigger] {
-  height: 2.75rem;
+  height: var(--control-h-lg);
   padding-inline: 1rem;
   font-size: 1rem;
 }

package/src/base/switch.css

@@ -30,6 +30,22 @@
   cursor: not-allowed;
 }
 
+/* Bounding height aligns to the shared control scale (so a switch lines up with
+   buttons/inputs/etc. in a row); the track/thumb keep their geometry, centered
+   via align-items: center. */
+[data-switch][data-switch-size='sm'] {
+  min-height: var(--control-h-sm);
+}
+
+[data-switch][data-switch-size='md'],
+[data-switch]:not([data-switch-size]) {
+  min-height: var(--control-h-md);
+}
+
+[data-switch][data-switch-size='lg'] {
+  min-height: var(--control-h-lg);
+}
+
 /* =============================================================================
    Track
    ============================================================================= */

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/toggle.css

@@ -65,7 +65,7 @@
 
 /* Small */
 [data-toggle][data-toggle-size='sm'] [data-toggle-option] {
-  height: 1.5rem;
+  height: var(--control-h-sm);
   font-size: 0.75rem;
   gap: 0.25rem;
 }
@@ -85,7 +85,7 @@
 /* Medium (default) */
 [data-toggle][data-toggle-size='md'] [data-toggle-option],
 [data-toggle]:not([data-toggle-size]) [data-toggle-option] {
-  height: 2rem;
+  height: var(--control-h-md);
   font-size: 0.875rem;
   gap: 0.375rem;
 }
@@ -107,7 +107,7 @@
 
 /* Large */
 [data-toggle][data-toggle-size='lg'] [data-toggle-option] {
-  height: 2.5rem;
+  height: var(--control-h-lg);
   font-size: 1rem;
   gap: 0.5rem;
 }
@@ -169,17 +169,17 @@
 
 /* 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;
+  height: var(--control-h-sm);
+  min-width: var(--control-h-sm);
 }
 
 [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;
+  height: var(--control-h-md);
+  min-width: var(--control-h-md);
 }
 
 [data-toggle][data-toggle-variant='button'][data-toggle-size='lg'] {
-  height: 2.5rem;
-  min-width: 2.5rem;
+  height: var(--control-h-lg);
+  min-width: var(--control-h-lg);
 }

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