@rokkit/themes 1.1.12 → 1.1.14

package/package.json

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

package/src/base/command-palette.css

@@ -0,0 +1,35 @@
+/**
+ * CommandPalette - Base Structural Styles
+ *
+ * Layout, positioning, and sizing only.
+ * No colors, shadows, or visual theming — those belong in theme styles.
+ */
+
+[data-command-backdrop] {
+	@apply fixed inset-0 z-50 flex items-start justify-center;
+	padding-top: 12vh;
+}
+
+[data-command-palette] {
+	@apply flex w-full max-w-xl flex-col gap-1 rounded-lg p-2 shadow-lg;
+}
+
+[data-command-input] {
+	@apply w-full bg-transparent px-3 py-2 outline-none;
+}
+
+[data-command-list] {
+	@apply m-0 flex max-h-80 list-none flex-col gap-0.5 overflow-y-auto p-0;
+}
+
+[data-command-item] {
+	@apply flex cursor-pointer items-center justify-between rounded-md px-3 py-2;
+}
+
+[data-command-empty] {
+	@apply px-3 py-6 text-center text-sm;
+}
+
+[data-command-shortcut] {
+	@apply ml-auto text-xs;
+}

package/src/base/index.css

@@ -61,3 +61,4 @@
 @import './tooltip.css';
 @import './nav-content.css';
 @import './responsive-grid.css';
+@import './command-palette.css';

package/src/frosted/command-palette.css

@@ -0,0 +1,42 @@
+/**
+ * CommandPalette - Frosted Glass Theme Styles
+ *
+ * Translucent panel with deep blur and specular highlights.
+ */
+
+[data-style='frosted'] [data-command-backdrop] {
+	background: rgb(0 0 0 / 0.3);
+	backdrop-filter: blur(2px);
+}
+
+[data-style='frosted'] [data-command-palette] {
+	@apply border backdrop-blur-2xl bg-paper-mute/45;
+	border-color: rgba(255, 255, 255, 0.2);
+	box-shadow:
+		inset 0 1px 0 rgba(255, 255, 255, 0.2),
+		0 16px 48px rgba(0, 0, 0, 0.18);
+}
+
+[data-style='frosted'] [data-command-input] {
+	@apply text-ink placeholder:text-ink-soft;
+}
+
+[data-style='frosted'] [data-command-item] {
+	@apply text-ink-mute;
+}
+
+[data-style='frosted'] [data-command-item][data-active] {
+	@apply bg-primary/80 text-on-primary;
+}
+
+[data-style='frosted'] [data-command-shortcut] {
+	@apply text-ink-soft;
+}
+
+[data-style='frosted'] [data-command-label] {
+	@apply text-ink-soft text-xs font-medium;
+}
+
+[data-style='frosted'] [data-command-empty] {
+	@apply text-ink-soft;
+}

package/src/frosted/index.css

@@ -37,3 +37,4 @@
 @import './progress.css';
 @import './pill.css';
 @import './rating.css';
+@import './command-palette.css';

package/src/material/command-palette.css

@@ -0,0 +1,37 @@
+/**
+ * CommandPalette - Material Theme Styles
+ *
+ * Material Design inspired with elevation and shadows.
+ */
+
+[data-style='material'] [data-command-backdrop] {
+	background: rgb(0 0 0 / 0.35);
+}
+
+[data-style='material'] [data-command-palette] {
+	@apply bg-paper-soft border-paper-mute border shadow-lg;
+}
+
+[data-style='material'] [data-command-input] {
+	@apply text-ink placeholder:text-ink-soft;
+}
+
+[data-style='material'] [data-command-item] {
+	@apply text-ink-mute;
+}
+
+[data-style='material'] [data-command-item][data-active] {
+	@apply bg-primary text-on-primary;
+}
+
+[data-style='material'] [data-command-shortcut] {
+	@apply text-ink-soft;
+}
+
+[data-style='material'] [data-command-label] {
+	@apply text-ink-soft text-xs font-medium;
+}
+
+[data-style='material'] [data-command-empty] {
+	@apply text-ink-soft;
+}

package/src/material/index.css

@@ -37,3 +37,4 @@
 @import './progress.css';
 @import './pill.css';
 @import './rating.css';
+@import './command-palette.css';

package/src/minimal/command-palette.css

@@ -0,0 +1,37 @@
+/**
+ * CommandPalette - Minimal Theme Styles
+ *
+ * Clean, understated styling with subtle borders.
+ */
+
+[data-style='minimal'] [data-command-backdrop] {
+	background: rgb(0 0 0 / 0.25);
+}
+
+[data-style='minimal'] [data-command-palette] {
+	@apply bg-paper-soft border-paper-mute border;
+}
+
+[data-style='minimal'] [data-command-input] {
+	@apply text-ink placeholder:text-ink-soft;
+}
+
+[data-style='minimal'] [data-command-item] {
+	@apply text-ink-mute;
+}
+
+[data-style='minimal'] [data-command-item][data-active] {
+	@apply bg-paper-mute text-ink border-l-accent border-l-2;
+}
+
+[data-style='minimal'] [data-command-shortcut] {
+	@apply text-ink-soft;
+}
+
+[data-style='minimal'] [data-command-label] {
+	@apply text-ink-soft text-xs font-medium;
+}
+
+[data-style='minimal'] [data-command-empty] {
+	@apply text-ink-soft;
+}

package/src/minimal/index.css

@@ -37,3 +37,4 @@
 @import './progress.css';
 @import './pill.css';
 @import './rating.css';
+@import './command-palette.css';

package/src/rokkit/command-palette.css

@@ -0,0 +1,37 @@
+/**
+ * CommandPalette - Rokkit Theme Styles
+ *
+ * Rich gradients and glowing borders.
+ */
+
+[data-style='rokkit'] [data-command-backdrop] {
+	background: rgb(0 0 0 / 0.4);
+}
+
+[data-style='rokkit'] [data-command-palette] {
+	@apply bg-paper-soft border-paper-edge border;
+}
+
+[data-style='rokkit'] [data-command-input] {
+	@apply text-ink placeholder:text-ink-faint;
+}
+
+[data-style='rokkit'] [data-command-item] {
+	@apply text-ink;
+}
+
+[data-style='rokkit'] [data-command-item][data-active] {
+	@apply bg-primary text-on-primary;
+}
+
+[data-style='rokkit'] [data-command-shortcut] {
+	@apply text-ink-mute;
+}
+
+[data-style='rokkit'] [data-command-label] {
+	@apply text-ink-soft text-xs font-medium;
+}
+
+[data-style='rokkit'] [data-command-empty] {
+	@apply text-ink-mute;
+}

package/src/rokkit/index.css

@@ -43,3 +43,4 @@
 @import './badge.css';
 @import './avatar.css';
 @import './tooltip.css';
+@import './command-palette.css';

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

@@ -0,0 +1,39 @@
+/**
+ * CommandPalette - Zen-Sumi Theme Styles
+ *
+ * 禅墨 — Ink on paper. Hairline border, no shadow, restraint as luxury.
+ * Active item: paper-mute surface with primary accent border (no glow).
+ */
+
+[data-style='zen-sumi'] [data-command-backdrop] {
+	background: rgb(0 0 0 / 0.2);
+}
+
+[data-style='zen-sumi'] [data-command-palette] {
+	@apply bg-paper border-paper-mute border;
+	box-shadow: none;
+}
+
+[data-style='zen-sumi'] [data-command-input] {
+	@apply text-ink-mute placeholder:text-paper-edge;
+}
+
+[data-style='zen-sumi'] [data-command-item] {
+	@apply text-ink-soft;
+}
+
+[data-style='zen-sumi'] [data-command-item][data-active] {
+	@apply bg-paper-mute text-ink-mute border-l-primary border-l-2;
+}
+
+[data-style='zen-sumi'] [data-command-shortcut] {
+	@apply text-paper-edge;
+}
+
+[data-style='zen-sumi'] [data-command-label] {
+	@apply text-paper-edge text-xs font-medium;
+}
+
+[data-style='zen-sumi'] [data-command-empty] {
+	@apply text-paper-edge;
+}

package/src/zen-sumi/index.css

@@ -46,6 +46,7 @@
 @import './progress.css';
 @import './pill.css';
 @import './rating.css';
+@import './command-palette.css';
 
 /* =============================================================================
    Layout overrides — Ma (間) generous spacing