bot-hermes
ddcb707190
- Task board uses per-project workflow state columns with status fallback when no project is selected; adds calendar view tab - Chip-based filter bar (search, project, state, priority, due date) with quick-add bar and slide-over task detail panel - Project detail switches to left-nav layout with progress summary and per-section counts; projects list gains search, status filter, and richer cards - Sidebar gains expandable active-projects sub-nav; calendar unified view gains project filter - API: task due_after/due_before filters, GET /tasks/grouped, GET /projects/:id/stats, calendar unified project_id filter - Apply Buzzbee design tokens; remove accidentally committed apps/web/node_modules self-symlink
132 lines
3.4 KiB
CSS
132 lines
3.4 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
/* Typography */
|
|
--font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
|
"Helvetica Neue", Arial, sans-serif;
|
|
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "Cascadia Code", "Source Code Pro",
|
|
Menlo, Consolas, "DejaVu Sans Mono", monospace;
|
|
|
|
/* Control heights & sizing — Buzzbee 32px control grid */
|
|
--control-height: 32px;
|
|
--control-height-sm: 24px;
|
|
--control-height-lg: 40px;
|
|
--size: 16px;
|
|
--size-sm: 12px;
|
|
--size-md: 20px;
|
|
--size-lg: 24px;
|
|
--size-xl: 32px;
|
|
--size-xxl: 48px;
|
|
|
|
/* 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 (#1677ff accent, #01bec6 teal) */
|
|
--background: 0 0% 100%;
|
|
--foreground: 0 0% 6.7%;
|
|
--card: 220 14% 97%;
|
|
--card-foreground: 0 0% 6.7%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 0 0% 6.7%;
|
|
--primary: 216 100% 54%;
|
|
--primary-foreground: 0 0% 100%;
|
|
--secondary: 220 14% 97%;
|
|
--secondary-foreground: 0 0% 18%;
|
|
--muted: 220 14% 97%;
|
|
--muted-foreground: 220 9% 45%;
|
|
--accent: 214 100% 95%;
|
|
--accent-foreground: 224 100% 27%;
|
|
--destructive: 0 84% 60%;
|
|
--destructive-foreground: 0 0% 100%;
|
|
--border: 214 24% 87%;
|
|
--input: 214 24% 87%;
|
|
--ring: 213 100% 77%;
|
|
--radius: 0.5rem;
|
|
|
|
/* Interactive accent — Buzzbee primary #1677ff */
|
|
--accent-hsl: 216 100% 54%;
|
|
--brand-teal: 184 99% 39%;
|
|
--brand-primary-bg: 214 100% 95%;
|
|
--brand-primary-border: 213 100% 77%;
|
|
--brand-focus-ring: 0 0 0 3px #e6f4ff;
|
|
|
|
/* Shell surfaces */
|
|
--sidebar-bg: 0 0% 100%;
|
|
--sidebar-border: 214 32% 88%;
|
|
--topbar-bg: 0 0% 100%;
|
|
}
|
|
|
|
/* Density modes */
|
|
.density-compact {
|
|
--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 — Buzzbee dark palette */
|
|
.dark {
|
|
--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: 0 0% 11%;
|
|
--sidebar-border: 0 0% 24%;
|
|
--topbar-bg: 0 0% 8%;
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
font-family: var(--font-sans);
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
}
|
|
|
|
/* Reduced motion */
|
|
.reduce-motion *,
|
|
.reduce-motion *::before,
|
|
.reduce-motion *::after {
|
|
animation-duration: 0.001s !important;
|
|
transition-duration: 0.001s !important;
|
|
animation-iteration-count: 1 !important;
|
|
}
|