feat(poweruser): command/shortcut registries, Buzzbee tokens, palette 2.0
- Command registry with 27 commands across 5 categories - Shortcut registry with 18 shortcuts + remapping support - useShortcutManager hook with collision detection - Command history store (last 20 commands) - Command palette 2.0: fuzzy search, >/#/@ prefixes, NLP preview - Interactive shortcut remapping in Settings - Buzzbee design token migration (light + dark) - Compact density with real CSS tokens - Motion duration variables
This commit is contained in:
+72
-82
@@ -7,79 +7,101 @@
|
||||
/* Typography */
|
||||
--font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||||
"Helvetica Neue", Arial, sans-serif;
|
||||
--font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", "Source Code Pro", Menlo,
|
||||
Consolas, "DejaVu Sans Mono", monospace;
|
||||
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "Cascadia Code", "Source Code Pro",
|
||||
Menlo, Consolas, "DejaVu Sans Mono", monospace;
|
||||
|
||||
/* Density — compact is the new default */
|
||||
--density-scale: 0.85;
|
||||
/* Control heights & sizing */
|
||||
--control-height: 40px;
|
||||
--control-height-sm: 32px;
|
||||
--control-height-lg: 48px;
|
||||
--size: 16px;
|
||||
--size-sm: 12px;
|
||||
--size-md: 20px;
|
||||
--size-lg: 24px;
|
||||
--size-xl: 32px;
|
||||
--size-xxl: 48px;
|
||||
|
||||
/* Light mode — clean, near-white with subtle warmth */
|
||||
--background: 0 0% 99%;
|
||||
--foreground: 222 47% 5%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222 47% 5%;
|
||||
/* Motion */
|
||||
--duration-fast: 0.1s;
|
||||
--duration-normal: 0.2s;
|
||||
--duration-slow: 0.3s;
|
||||
--ease-default: cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
|
||||
/* Light mode — Buzzbee palette */
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 0 0% 6.7%;
|
||||
--card: 220 13% 97%;
|
||||
--card-foreground: 0 0% 6.7%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222 47% 5%;
|
||||
--primary: 222 47% 11%;
|
||||
--primary-foreground: 0 0% 98%;
|
||||
--secondary: 220 14% 96%;
|
||||
--secondary-foreground: 222 47% 11%;
|
||||
--muted: 220 14% 96%;
|
||||
--muted-foreground: 220 9% 46%;
|
||||
--accent: 220 14% 96%;
|
||||
--accent-foreground: 222 47% 11%;
|
||||
--popover-foreground: 0 0% 6.7%;
|
||||
--primary: 217 91% 60%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--secondary: 210 40% 96%;
|
||||
--secondary-foreground: 0 0% 18%;
|
||||
--muted: 210 40% 96%;
|
||||
--muted-foreground: 220 9% 45%;
|
||||
--accent: 210 100% 95%;
|
||||
--accent-foreground: 222 100% 27%;
|
||||
--destructive: 0 84% 60%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--border: 220 13% 91%;
|
||||
--input: 220 13% 91%;
|
||||
--ring: 217 91% 60%;
|
||||
--radius: 0.375rem;
|
||||
--destructive-foreground: 0 0% 100%;
|
||||
--border: 214 32% 88%;
|
||||
--input: 214 32% 88%;
|
||||
--ring: 210 100% 75%;
|
||||
--radius: 0.5rem;
|
||||
|
||||
/* Interactive accent — pinned vibrant blue */
|
||||
--accent-hsl: 217 91% 60%;
|
||||
|
||||
/* Shell surfaces */
|
||||
--sidebar-bg: 0 0% 100%;
|
||||
--sidebar-border: 220 13% 91%;
|
||||
--topbar-bg: 0 0% 99%;
|
||||
--sidebar-border: 214 32% 88%;
|
||||
--topbar-bg: 0 0% 100%;
|
||||
}
|
||||
|
||||
/* Density modes */
|
||||
.density-compact {
|
||||
--density-scale: 0.85;
|
||||
--control-height: 28px;
|
||||
--control-height-sm: 21px;
|
||||
--control-height-lg: 35px;
|
||||
--size: 12px;
|
||||
--size-sm: 8px;
|
||||
--size-md: 16px;
|
||||
--size-lg: 16px;
|
||||
--size-xl: 24px;
|
||||
--size-xxl: 32px;
|
||||
}
|
||||
|
||||
.density-spacious {
|
||||
--density-scale: 1.15;
|
||||
}
|
||||
|
||||
/* Dark mode — deep navy with elevated surfaces */
|
||||
/* Dark mode — Buzzbee dark palette */
|
||||
.dark {
|
||||
--background: 222 47% 5%;
|
||||
--foreground: 210 40% 98%;
|
||||
--card: 222 40% 8%;
|
||||
--card-foreground: 210 40% 98%;
|
||||
--popover: 222 40% 8%;
|
||||
--popover-foreground: 210 40% 98%;
|
||||
--primary: 210 40% 98%;
|
||||
--primary-foreground: 222 47% 11%;
|
||||
--secondary: 217 33% 14%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
--muted: 217 33% 14%;
|
||||
--muted-foreground: 215 20% 65%;
|
||||
--accent: 217 33% 14%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
--destructive: 0 63% 31%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--border: 217 33% 17%;
|
||||
--input: 217 33% 17%;
|
||||
--ring: 217 91% 60%;
|
||||
--accent-hsl: 217 91% 60%;
|
||||
--background: 0 0% 8%;
|
||||
--foreground: 0 0% 86%;
|
||||
--card: 0 0% 11%;
|
||||
--card-foreground: 0 0% 86%;
|
||||
--popover: 0 0% 15%;
|
||||
--popover-foreground: 0 0% 86%;
|
||||
--primary: 212 70% 55%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--secondary: 0 0% 19%;
|
||||
--secondary-foreground: 0 0% 86%;
|
||||
--muted: 0 0% 19%;
|
||||
--muted-foreground: 0 0% 49%;
|
||||
--accent: 216 47% 13%;
|
||||
--accent-foreground: 205 80% 85%;
|
||||
--destructive: 0 60% 63%;
|
||||
--destructive-foreground: 0 0% 100%;
|
||||
--border: 0 0% 24%;
|
||||
--input: 0 0% 24%;
|
||||
--ring: 212 60% 50%;
|
||||
--accent-hsl: 212 70% 55%;
|
||||
|
||||
/* Shell surfaces — slightly elevated from background */
|
||||
--sidebar-bg: 222 42% 7%;
|
||||
--sidebar-border: 217 33% 17%;
|
||||
--topbar-bg: 222 47% 5%;
|
||||
--sidebar-bg: 0 0% 11%;
|
||||
--sidebar-border: 0 0% 24%;
|
||||
--topbar-bg: 0 0% 8%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -103,35 +125,3 @@
|
||||
transition-duration: 0.001s !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
/* Density: multiply vertical rhythm inside <main> */
|
||||
.density-compact main .space-y-1 > :not([hidden]) ~ :not([hidden]),
|
||||
.density-spacious main .space-y-1 > :not([hidden]) ~ :not([hidden]) {
|
||||
margin-top: calc(0.25rem * var(--density-scale));
|
||||
}
|
||||
.density-compact main .space-y-2 > :not([hidden]) ~ :not([hidden]),
|
||||
.density-spacious main .space-y-2 > :not([hidden]) ~ :not([hidden]) {
|
||||
margin-top: calc(0.5rem * var(--density-scale));
|
||||
}
|
||||
.density-compact main .space-y-3 > :not([hidden]) ~ :not([hidden]),
|
||||
.density-spacious main .space-y-3 > :not([hidden]) ~ :not([hidden]) {
|
||||
margin-top: calc(0.75rem * var(--density-scale));
|
||||
}
|
||||
.density-compact main .space-y-4 > :not([hidden]) ~ :not([hidden]),
|
||||
.density-spacious main .space-y-4 > :not([hidden]) ~ :not([hidden]) {
|
||||
margin-top: calc(1rem * var(--density-scale));
|
||||
}
|
||||
.density-compact main .space-y-5 > :not([hidden]) ~ :not([hidden]),
|
||||
.density-spacious main .space-y-5 > :not([hidden]) ~ :not([hidden]) {
|
||||
margin-top: calc(1.25rem * var(--density-scale));
|
||||
}
|
||||
.density-compact main .space-y-6 > :not([hidden]) ~ :not([hidden]),
|
||||
.density-spacious main .space-y-6 > :not([hidden]) ~ :not([hidden]) {
|
||||
margin-top: calc(1.5rem * var(--density-scale));
|
||||
}
|
||||
.density-compact main .space-y-8 > :not([hidden]) ~ :not([hidden]),
|
||||
.density-spacious main .space-y-8 > :not([hidden]) ~ :not([hidden]) {
|
||||
margin-top: calc(2rem * var(--density-scale));
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user