refactor: convert to OKLCH colors, move keyframes into @theme (Phase 3-4)
- Replaced all HSL color indirection with direct OKLCH values in @theme - Moved all keyframes inside @theme block (v4 pattern) - Eliminated hsl(var(--x)) double-indirection across 17 component files - Replaced hsl() inline styles with var(--color-*) theme references - Cleaned up redundant rdp-* utility blocks - Fixed @custom-variant dark syntax to use :where() - Added sidebar/glass/shadow vars as OKLCH in :root Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
@@ -113,31 +113,31 @@ export function FlowAnalyticsPanel({ treeId }: FlowAnalyticsPanelProps) {
|
||||
<AreaChart data={time_series}>
|
||||
<CartesianGrid
|
||||
strokeDasharray="3 3"
|
||||
stroke="hsl(var(--border))"
|
||||
stroke="var(--color-border)"
|
||||
vertical={false}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 11 }}
|
||||
tick={{ fill: 'var(--color-muted-foreground)', fontSize: 11 }}
|
||||
tickLine={false}
|
||||
axisLine={{ stroke: 'hsl(var(--border))' }}
|
||||
axisLine={{ stroke: 'var(--color-border)' }}
|
||||
tickFormatter={(value) => {
|
||||
const d = new Date(String(value))
|
||||
return `${d.getMonth() + 1}/${d.getDate()}`
|
||||
}}
|
||||
/>
|
||||
<YAxis
|
||||
tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 11 }}
|
||||
tick={{ fill: 'var(--color-muted-foreground)', fontSize: 11 }}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
allowDecimals={false}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: 'hsl(var(--card))',
|
||||
border: '1px solid hsl(var(--border))',
|
||||
backgroundColor: 'var(--color-card)',
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: '8px',
|
||||
color: 'hsl(var(--foreground))',
|
||||
color: 'var(--color-foreground)',
|
||||
fontSize: '13px',
|
||||
}}
|
||||
labelFormatter={(value) => {
|
||||
|
||||
@@ -45,7 +45,7 @@ export function OpenSessions({ sessions }: OpenSessionsProps) {
|
||||
{session.stepNumber && session.totalSteps
|
||||
? `Step ${session.stepNumber} of ${session.totalSteps}`
|
||||
: 'In progress'}
|
||||
<span className="mx-1.5 text-[hsl(var(--text-dimmed))]">·</span>
|
||||
<span className="mx-1.5 text-[var(--text-dimmed)]">·</span>
|
||||
<span className="font-label text-[0.625rem]">{session.timeAgo}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -35,7 +35,7 @@ export function QuickStats({ stats }: QuickStatsProps) {
|
||||
{stat.value}
|
||||
</p>
|
||||
{stat.meta && (
|
||||
<p className="mt-0.5 text-[0.6875rem] text-[hsl(var(--text-dimmed))]">{stat.meta}</p>
|
||||
<p className="mt-0.5 text-[0.6875rem] text-[var(--text-dimmed)]">{stat.meta}</p>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
@@ -64,7 +64,7 @@ export function SessionsPanel({ sessions, delay = 200 }: SessionsPanelProps) {
|
||||
</span>
|
||||
|
||||
{/* Time */}
|
||||
<span className="text-right text-[0.6875rem] text-[hsl(var(--text-dimmed))]">
|
||||
<span className="text-right text-[0.6875rem] text-[var(--text-dimmed)]">
|
||||
{session.timeAgo}
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
@@ -33,7 +33,7 @@ export function TreeListItem({
|
||||
return (
|
||||
<div
|
||||
onClick={() => navigate(getTreeNavigatePath(id, treeType))}
|
||||
className="group grid cursor-pointer items-center gap-3 rounded-lg border border-transparent bg-card px-4 py-3 transition-colors hover:border-border hover:bg-[hsl(var(--sidebar-hover))]"
|
||||
className="group grid cursor-pointer items-center gap-3 rounded-lg border border-transparent bg-card px-4 py-3 transition-colors hover:border-border hover:bg-[var(--sidebar-hover)]"
|
||||
style={{ gridTemplateColumns: '40px 1fr 130px 80px 100px 40px' }}
|
||||
>
|
||||
{/* Icon box */}
|
||||
@@ -75,7 +75,7 @@ export function TreeListItem({
|
||||
</div>
|
||||
|
||||
{/* Updated */}
|
||||
<div className="text-right text-[0.6875rem] text-[hsl(var(--text-dimmed))]">
|
||||
<div className="text-right text-[0.6875rem] text-[var(--text-dimmed)]">
|
||||
{timeAgo}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -65,7 +65,7 @@ export function WeeklyCalendar({ events = {} }: WeeklyCalendarProps) {
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto p-1.5 space-y-1">
|
||||
{dayEvents.length === 0 ? (
|
||||
<p className="text-[0.625rem] text-[hsl(var(--text-dimmed))] text-center py-2">No events</p>
|
||||
<p className="text-[0.625rem] text-[var(--text-dimmed)] text-center py-2">No events</p>
|
||||
) : (
|
||||
dayEvents.map(event => (
|
||||
<div
|
||||
|
||||
@@ -113,7 +113,7 @@ export function AppLayout() {
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<nav className="absolute inset-y-0 left-0 w-72 border-r border-border bg-[hsl(var(--sidebar-bg))] shadow-2xl animate-slide-in-left">
|
||||
<nav className="absolute inset-y-0 left-0 w-72 border-r border-border bg-[var(--sidebar-bg)] shadow-2xl animate-slide-in-left">
|
||||
<div className="flex h-14 items-center justify-between border-b border-border px-4">
|
||||
<Link to="/" className="flex items-center gap-2.5">
|
||||
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-brand">
|
||||
@@ -156,8 +156,8 @@ export function AppLayout() {
|
||||
className={cn(
|
||||
'flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors',
|
||||
isActive
|
||||
? 'bg-[hsl(var(--sidebar-active))] text-foreground'
|
||||
: 'text-muted-foreground hover:bg-[hsl(var(--sidebar-hover))] hover:text-foreground'
|
||||
? 'bg-[var(--sidebar-active)] text-foreground'
|
||||
: 'text-muted-foreground hover:bg-[var(--sidebar-hover)] hover:text-foreground'
|
||||
)}
|
||||
>
|
||||
<Icon size={18} />
|
||||
@@ -171,7 +171,7 @@ export function AppLayout() {
|
||||
<div className="mt-3 border-t border-border pt-3">
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-muted-foreground hover:bg-[hsl(var(--sidebar-hover))] hover:text-foreground transition-colors"
|
||||
className="flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-muted-foreground hover:bg-[var(--sidebar-hover)] hover:text-foreground transition-colors"
|
||||
>
|
||||
<LogOut size={18} />
|
||||
Logout
|
||||
|
||||
@@ -41,8 +41,8 @@ export function NavItem({ href, icon: Icon, label, badge, matchPaths, collapsed,
|
||||
className={cn(
|
||||
'group relative flex items-center justify-center rounded-lg p-2 transition-all duration-120',
|
||||
isActive
|
||||
? 'bg-[hsl(var(--sidebar-active))] text-foreground'
|
||||
: 'text-muted-foreground hover:bg-[hsl(var(--sidebar-hover))] hover:text-foreground'
|
||||
? 'bg-[var(--sidebar-active)] text-foreground'
|
||||
: 'text-muted-foreground hover:bg-[var(--sidebar-hover)] hover:text-foreground'
|
||||
)}
|
||||
title={label}
|
||||
>
|
||||
@@ -68,9 +68,9 @@ export function NavItem({ href, icon: Icon, label, badge, matchPaths, collapsed,
|
||||
'group relative flex items-center gap-3 rounded-lg px-3 py-2 text-[0.8125rem] font-medium transition-all duration-120',
|
||||
isActive
|
||||
? isParentDimmed
|
||||
? 'bg-[hsl(var(--sidebar-active))]/50 text-foreground/70'
|
||||
: 'bg-[hsl(var(--sidebar-active))] text-foreground'
|
||||
: 'text-muted-foreground hover:bg-[hsl(var(--sidebar-hover))] hover:text-foreground'
|
||||
? 'bg-[var(--sidebar-active)]/50 text-foreground/70'
|
||||
: 'bg-[var(--sidebar-active)] text-foreground'
|
||||
: 'text-muted-foreground hover:bg-[var(--sidebar-hover)] hover:text-foreground'
|
||||
)}
|
||||
>
|
||||
{/* Active indicator bar */}
|
||||
@@ -110,8 +110,8 @@ export function NavItem({ href, icon: Icon, label, badge, matchPaths, collapsed,
|
||||
className={cn(
|
||||
'flex items-center gap-2 rounded-lg pl-9 pr-3 py-1.5 text-[0.8125rem] font-medium transition-colors',
|
||||
childActive
|
||||
? 'bg-[hsl(var(--sidebar-active))] text-foreground'
|
||||
: 'text-muted-foreground hover:bg-[hsl(var(--sidebar-hover))] hover:text-foreground'
|
||||
? 'bg-[var(--sidebar-active)] text-foreground'
|
||||
: 'text-muted-foreground hover:bg-[var(--sidebar-hover)] hover:text-foreground'
|
||||
)}
|
||||
>
|
||||
<span className="truncate">{child.label}</span>
|
||||
|
||||
@@ -141,7 +141,7 @@ export function Sidebar() {
|
||||
<button
|
||||
onClick={toggleSidebar}
|
||||
className={cn(
|
||||
"flex w-full items-center rounded-lg text-[0.8125rem] font-medium text-muted-foreground hover:bg-[hsl(var(--sidebar-hover))] hover:text-foreground transition-colors",
|
||||
"flex w-full items-center rounded-lg text-[0.8125rem] font-medium text-muted-foreground hover:bg-[var(--sidebar-hover)] hover:text-foreground transition-colors",
|
||||
sidebarCollapsed ? "justify-center p-2.5" : "gap-3 px-3 py-2"
|
||||
)}
|
||||
title={sidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
|
||||
|
||||
@@ -38,8 +38,8 @@ export function CategoryList({ categories, activeId, onSelect }: CategoryListPro
|
||||
className={cn(
|
||||
'flex w-full items-center gap-2.5 rounded-lg px-3 py-1.5 text-sm transition-colors',
|
||||
activeId === cat.id
|
||||
? 'bg-[hsl(var(--sidebar-active))] text-foreground'
|
||||
: 'text-muted-foreground hover:bg-[hsl(var(--sidebar-hover))] hover:text-foreground'
|
||||
? 'bg-[var(--sidebar-active)] text-foreground'
|
||||
: 'text-muted-foreground hover:bg-[var(--sidebar-hover)] hover:text-foreground'
|
||||
)}
|
||||
>
|
||||
<span
|
||||
@@ -47,13 +47,13 @@ export function CategoryList({ categories, activeId, onSelect }: CategoryListPro
|
||||
style={{ backgroundColor: cat.color }}
|
||||
/>
|
||||
<span className="flex-1 truncate text-left">{cat.name}</span>
|
||||
<span className="font-label text-[0.6875rem] text-[hsl(var(--text-dimmed))]">{cat.count}</span>
|
||||
<span className="font-label text-[0.6875rem] text-[var(--text-dimmed)]">{cat.count}</span>
|
||||
</button>
|
||||
))}
|
||||
{hasMore && (
|
||||
<button
|
||||
onClick={() => setExpanded(v => !v)}
|
||||
className="flex w-full items-center gap-2.5 rounded-lg px-3 py-1.5 text-[0.8125rem] text-muted-foreground hover:bg-[hsl(var(--sidebar-hover))] hover:text-foreground transition-colors"
|
||||
className="flex w-full items-center gap-2.5 rounded-lg px-3 py-1.5 text-[0.8125rem] text-muted-foreground hover:bg-[var(--sidebar-hover)] hover:text-foreground transition-colors"
|
||||
>
|
||||
{expanded ? (
|
||||
<>
|
||||
|
||||
@@ -70,7 +70,7 @@ export function PinnedFlowsSection({ flows, onUnpin }: PinnedFlowsSectionProps)
|
||||
}}
|
||||
className={cn(
|
||||
'group flex w-full items-center gap-2.5 rounded-lg px-3 py-1.5 text-[0.8125rem] font-medium transition-colors',
|
||||
'text-muted-foreground hover:bg-[hsl(var(--sidebar-hover))] hover:text-foreground'
|
||||
'text-muted-foreground hover:bg-[var(--sidebar-hover)] hover:text-foreground'
|
||||
)}
|
||||
title={`${flow.tree_name} (right-click to unpin)`}
|
||||
>
|
||||
|
||||
@@ -139,7 +139,7 @@ function FlowCanvasInner({ selectedNodeId, onNodeSelect, onSelectAnswerType, onN
|
||||
proOptions={{ hideAttribution: true }}
|
||||
className="dark bg-accent/30"
|
||||
>
|
||||
<Background variant={BackgroundVariant.Dots} gap={20} size={1.5} color="hsl(var(--muted-foreground) / 0.25)" />
|
||||
<Background variant={BackgroundVariant.Dots} gap={20} size={1.5} color="oklch(0.63 0.02 260 / 0.25)" />
|
||||
<Controls showInteractive={false} className="bg-card! border-border! shadow-lg!" />
|
||||
{minimapVisible && (
|
||||
<MiniMap
|
||||
|
||||
@@ -691,7 +691,7 @@ export function TreeCanvas() {
|
||||
style={{
|
||||
// Subtle dot grid background
|
||||
backgroundImage:
|
||||
'radial-gradient(circle, hsl(var(--border)) 1px, transparent 1px)',
|
||||
'radial-gradient(circle, var(--color-border) 1px, transparent 1px)',
|
||||
backgroundSize: '24px 24px',
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -155,10 +155,10 @@ export function useTreeLayout(): UseTreeLayoutResult {
|
||||
target: child.id,
|
||||
type: 'smoothstep',
|
||||
label: edgeLabel,
|
||||
labelStyle: { fill: 'hsl(var(--muted-foreground))', fontSize: 11 },
|
||||
labelBgStyle: { fill: 'hsl(var(--card))', fillOpacity: 0.9 },
|
||||
labelStyle: { fill: 'var(--color-muted-foreground)', fontSize: 11 },
|
||||
labelBgStyle: { fill: 'var(--color-card)', fillOpacity: 0.9 },
|
||||
labelBgPadding: [4, 2] as [number, number],
|
||||
style: { stroke: 'hsl(var(--border))' },
|
||||
style: { stroke: 'var(--color-border)' },
|
||||
})
|
||||
|
||||
walk(child, node.id)
|
||||
@@ -183,17 +183,17 @@ export function useTreeLayout(): UseTreeLayoutResult {
|
||||
type: 'smoothstep',
|
||||
animated: true,
|
||||
label: ref.label ? truncateLabel(ref.label) : undefined,
|
||||
labelStyle: { fill: 'hsl(var(--primary))', fontSize: 10, fontWeight: 500 },
|
||||
labelBgStyle: { fill: 'hsl(var(--card))', fillOpacity: 0.95 },
|
||||
labelStyle: { fill: 'var(--color-primary)', fontSize: 10, fontWeight: 500 },
|
||||
labelBgStyle: { fill: 'var(--color-card)', fillOpacity: 0.95 },
|
||||
labelBgPadding: [4, 2] as [number, number],
|
||||
style: {
|
||||
stroke: 'hsl(var(--primary))',
|
||||
stroke: 'var(--color-primary)',
|
||||
strokeWidth: 2,
|
||||
strokeDasharray: '6 3',
|
||||
},
|
||||
markerEnd: {
|
||||
type: 'arrowclosed' as const,
|
||||
color: 'hsl(var(--primary))',
|
||||
color: 'var(--color-primary)',
|
||||
width: 16,
|
||||
height: 16,
|
||||
},
|
||||
|
||||
@@ -1,120 +1,224 @@
|
||||
@import 'tailwindcss';
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
|
||||
@theme {
|
||||
--color-brand-gradient-from: #06b6d4;
|
||||
--color-brand-gradient-to: #22d3ee;
|
||||
/* ── Brand tokens ─────────────────────────────────── */
|
||||
--color-brand-gradient-from: oklch(0.65 0.13 195); /* #06b6d4 cyan-500 */
|
||||
--color-brand-gradient-to: oklch(0.74 0.12 195); /* #22d3ee cyan-400 */
|
||||
--color-brand-dark: oklch(0.145 0.013 264); /* #101114 */
|
||||
--color-brand-dark-card: oklch(0.17 0.01 264); /* #14161a */
|
||||
--color-brand-dark-surface: oklch(0.17 0.01 264); /* #14161a */
|
||||
--color-brand-text-primary: oklch(0.98 0.005 264); /* #f8fafc */
|
||||
--color-brand-text-secondary: oklch(0.63 0.02 260); /* #8891a0 */
|
||||
--color-brand-text-muted: oklch(0.45 0.015 260); /* #5a6170 */
|
||||
--color-brand-border: oklch(0.35 0 0 / 0.06);
|
||||
|
||||
--color-brand-dark: #101114;
|
||||
--color-brand-dark-card: #14161a;
|
||||
--color-brand-dark-surface: #14161a;
|
||||
/* ── Semantic color tokens (OKLCH, direct values) ── */
|
||||
--color-background: oklch(0.145 0.013 264); /* dark charcoal #101114 */
|
||||
--color-foreground: oklch(0.98 0.005 264); /* near-white #f8fafc */
|
||||
|
||||
--color-brand-text-primary: #f8fafc;
|
||||
--color-brand-text-secondary: #8891a0;
|
||||
--color-brand-text-muted: #5a6170;
|
||||
--color-card: oklch(0.178 0.008 264); /* #17191d */
|
||||
--color-card-foreground: oklch(0.98 0.005 264);
|
||||
|
||||
--color-brand-border: rgba(255, 255, 255, 0.06);
|
||||
--color-popover: oklch(0.178 0.008 264);
|
||||
--color-popover-foreground: oklch(0.98 0.005 264);
|
||||
|
||||
--color-border: hsl(var(--border));
|
||||
--color-input: hsl(var(--input));
|
||||
--color-ring: hsl(var(--ring));
|
||||
--color-background: hsl(var(--background));
|
||||
--color-foreground: hsl(var(--foreground));
|
||||
--color-primary: oklch(0.65 0.13 195); /* cyan #1ea8c4 */
|
||||
--color-primary-foreground: oklch(0.145 0.013 264); /* dark bg for contrast */
|
||||
|
||||
--color-primary: hsl(var(--primary));
|
||||
--color-primary-foreground: hsl(var(--primary-foreground));
|
||||
--color-secondary: oklch(0.22 0.008 264); /* #212329 */
|
||||
--color-secondary-foreground: oklch(0.98 0.005 264);
|
||||
|
||||
--color-secondary: hsl(var(--secondary));
|
||||
--color-secondary-foreground: hsl(var(--secondary-foreground));
|
||||
--color-muted: oklch(0.22 0.008 264);
|
||||
--color-muted-foreground: oklch(0.63 0.02 260); /* #8891a0 */
|
||||
|
||||
--color-destructive: hsl(var(--destructive));
|
||||
--color-destructive-foreground: hsl(var(--destructive-foreground));
|
||||
--color-accent: oklch(0.22 0.008 264);
|
||||
--color-accent-foreground: oklch(0.98 0.005 264);
|
||||
|
||||
--color-muted: hsl(var(--muted));
|
||||
--color-muted-foreground: hsl(var(--muted-foreground));
|
||||
--color-destructive: oklch(0.55 0.22 15); /* rose #e63359 */
|
||||
--color-destructive-foreground: oklch(0.98 0.005 264);
|
||||
|
||||
--color-accent: hsl(var(--accent));
|
||||
--color-accent-foreground: hsl(var(--accent-foreground));
|
||||
--color-border: oklch(0.22 0.008 264);
|
||||
--color-input: oklch(0.22 0.008 264);
|
||||
--color-ring: oklch(0.65 0.13 195); /* cyan, matches primary */
|
||||
|
||||
--color-popover: hsl(var(--popover));
|
||||
--color-popover-foreground: hsl(var(--popover-foreground));
|
||||
|
||||
--color-card: hsl(var(--card));
|
||||
--color-card-foreground: hsl(var(--card-foreground));
|
||||
|
||||
--radius-lg: var(--radius);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
/* ── Radii ───────────────────────────────────────── */
|
||||
--radius-sm: 0.5rem;
|
||||
--radius-md: 0.625rem;
|
||||
--radius-lg: 0.75rem;
|
||||
--radius-xl: 1rem;
|
||||
|
||||
/* ── Fonts ───────────────────────────────────────── */
|
||||
--font-sans:
|
||||
IBM Plex Sans, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI,
|
||||
'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
|
||||
Roboto, sans-serif;
|
||||
--font-heading: Bricolage Grotesque, system-ui, sans-serif;
|
||||
--font-label: JetBrains Mono, monospace;
|
||||
--font-heading: 'Bricolage Grotesque', system-ui, sans-serif;
|
||||
--font-label: 'JetBrains Mono', monospace;
|
||||
|
||||
/* ── Gradients ───────────────────────────────────── */
|
||||
--background-image-gradient-brand: linear-gradient(
|
||||
135deg,
|
||||
#06b6d4 0%,
|
||||
#22d3ee 100%
|
||||
oklch(0.65 0.13 195) 0%,
|
||||
oklch(0.74 0.12 195) 100%
|
||||
);
|
||||
--background-image-gradient-brand-hover: linear-gradient(
|
||||
135deg,
|
||||
#0891b2 0%,
|
||||
#06b6d4 100%
|
||||
oklch(0.58 0.12 195) 0%,
|
||||
oklch(0.65 0.13 195) 100%
|
||||
);
|
||||
}
|
||||
|
||||
/*
|
||||
The default border color has changed to `currentcolor` in Tailwind CSS v4,
|
||||
so we've added these compatibility styles to make sure everything still
|
||||
looks the same as it did with Tailwind CSS v3.
|
||||
/* ── Animations (keyframes inside @theme) ────────── */
|
||||
--animate-fade-in: fade-in 200ms ease-out;
|
||||
--animate-fade-in-up: fade-in-up 200ms ease-out;
|
||||
--animate-slide-in-left: slide-in-from-left 200ms ease-out;
|
||||
--animate-slide-in-bottom: slide-in-from-bottom 200ms ease-out;
|
||||
--animate-scale-in: scale-in 150ms ease-out;
|
||||
--animate-slide-down: slideDown 400ms ease-out;
|
||||
--animate-slide-in-right: slideInRight 300ms ease-out;
|
||||
--animate-fade-in-right: fadeInRight 400ms ease-out;
|
||||
--animate-breathe-glow: breatheGlow 3s ease-in-out infinite alternate;
|
||||
--animate-bell-wobble: bellWobble 500ms ease-in-out;
|
||||
--animate-fade: fadeIn 300ms ease forwards;
|
||||
|
||||
If we ever want to remove these styles, we need to add an explicit border
|
||||
color utility to any element that depends on these defaults.
|
||||
*/
|
||||
@layer base {
|
||||
*,
|
||||
::after,
|
||||
::before,
|
||||
::backdrop,
|
||||
::file-selector-button {
|
||||
border-color: var(--color-gray-200, currentcolor);
|
||||
@keyframes fade-in {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes fade-in-up {
|
||||
from { opacity: 0; transform: translateY(4px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes slide-in-from-left {
|
||||
from { transform: translateX(-100%); }
|
||||
to { transform: translateX(0); }
|
||||
}
|
||||
|
||||
@keyframes slide-in-from-bottom {
|
||||
from { opacity: 0; transform: translateY(16px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes scale-in {
|
||||
from { opacity: 0; transform: scale(0.95); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
from { transform: translateY(-100%); opacity: 0; }
|
||||
to { transform: translateY(0); opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes slideInRight {
|
||||
from { transform: translateX(100%); }
|
||||
to { transform: translateX(0); }
|
||||
}
|
||||
|
||||
@keyframes fadeInRight {
|
||||
from { transform: translateX(30px); opacity: 0; }
|
||||
to { transform: translateX(0); opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(6px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes breatheGlow {
|
||||
from {
|
||||
box-shadow:
|
||||
0 8px 32px rgba(0, 0, 0, 0.3),
|
||||
0 0 20px oklch(0.65 0.13 195 / 0.04);
|
||||
}
|
||||
to {
|
||||
box-shadow:
|
||||
0 8px 32px rgba(0, 0, 0, 0.3),
|
||||
0 0 30px oklch(0.65 0.13 195 / 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bellWobble {
|
||||
0% { transform: rotate(0deg); }
|
||||
20% { transform: rotate(8deg); }
|
||||
40% { transform: rotate(-6deg); }
|
||||
60% { transform: rotate(4deg); }
|
||||
80% { transform: rotate(-2deg); }
|
||||
100% { transform: rotate(0deg); }
|
||||
}
|
||||
}
|
||||
|
||||
@utility animate-fade-in {
|
||||
animation: fade-in 200ms ease-out;
|
||||
/* ── Root CSS variables (non-theme: glass, shadows, layout) ── */
|
||||
:root {
|
||||
/* App Shell tokens */
|
||||
--sidebar-w: 260px;
|
||||
--sidebar-bg: oklch(0.13 0.013 264);
|
||||
--sidebar-hover: var(--color-secondary);
|
||||
--sidebar-active: oklch(0.65 0.13 195 / 0.10);
|
||||
--text-dimmed: oklch(0.42 0.015 260);
|
||||
|
||||
/* Glass system */
|
||||
--glass-bg: oklch(0.16 0.01 264 / 0.55);
|
||||
--glass-bg-hover: oklch(0.16 0.01 264 / 0.7);
|
||||
--glass-border: oklch(1 0 0 / 0.06);
|
||||
--glass-border-hover: oklch(1 0 0 / 0.12);
|
||||
--glass-blur: blur(16px);
|
||||
--glass-blur-strong: blur(20px);
|
||||
--glass-blur-light: blur(12px);
|
||||
|
||||
/* Shadow system */
|
||||
--shadow-float: 0 8px 32px rgba(0, 0, 0, 0.3);
|
||||
--shadow-float-hover: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px oklch(1 0 0 / 0.08);
|
||||
--shadow-cyan-glow: 0 8px 32px oklch(0.65 0.13 195 / 0.08);
|
||||
|
||||
/* Easing */
|
||||
--ease-out-smooth: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
@utility animate-fade-in-up {
|
||||
animation: fade-in-up 200ms ease-out;
|
||||
}
|
||||
|
||||
@utility animate-slide-in-left {
|
||||
animation: slide-in-from-left 200ms ease-out;
|
||||
}
|
||||
|
||||
@utility animate-slide-in-bottom {
|
||||
animation: slide-in-from-bottom 200ms ease-out;
|
||||
}
|
||||
|
||||
@utility animate-scale-in {
|
||||
animation: scale-in 150ms ease-out;
|
||||
/* ── Base styles ─────────────────────────────────────── */
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--color-border) transparent;
|
||||
}
|
||||
*::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
*::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
*::-webkit-scrollbar-thumb {
|
||||
background-color: var(--color-border);
|
||||
border-radius: 9999px;
|
||||
}
|
||||
*::-webkit-scrollbar-thumb:hover {
|
||||
background-color: var(--color-muted-foreground);
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-background text-foreground font-sans;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: var(--font-heading);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Custom utilities ────────────────────────────────── */
|
||||
@utility btn-press {
|
||||
/* Button press feedback */
|
||||
@apply active:scale-[0.98] transition-transform;
|
||||
}
|
||||
|
||||
@utility text-gradient-brand {
|
||||
/* Brand gradient text */
|
||||
@apply bg-gradient-brand bg-clip-text text-transparent;
|
||||
}
|
||||
|
||||
@utility glass-card {
|
||||
/* Glass card — interactive with hover lift */
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: var(--glass-blur);
|
||||
-webkit-backdrop-filter: var(--glass-blur);
|
||||
@@ -133,7 +237,6 @@
|
||||
}
|
||||
|
||||
@utility glass-card-static {
|
||||
/* Glass card — static, no hover transform */
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: var(--glass-blur);
|
||||
-webkit-backdrop-filter: var(--glass-blur);
|
||||
@@ -143,234 +246,30 @@
|
||||
}
|
||||
|
||||
@utility active-glow {
|
||||
/* Breathing glow for highlighted stat cards */
|
||||
animation: breatheGlow 3s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@utility rdp-custom {
|
||||
@apply text-foreground;
|
||||
|
||||
& .rdp-month {
|
||||
@apply w-full;
|
||||
}
|
||||
|
||||
& .rdp-caption {
|
||||
@apply flex justify-center items-center mb-4;
|
||||
}
|
||||
|
||||
& .rdp-caption_label {
|
||||
@apply text-sm font-medium;
|
||||
}
|
||||
|
||||
& .rdp-nav {
|
||||
@apply flex gap-1;
|
||||
}
|
||||
|
||||
& .rdp-nav_button {
|
||||
@apply h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100;
|
||||
}
|
||||
|
||||
& .rdp-table {
|
||||
@apply w-full border-collapse;
|
||||
}
|
||||
|
||||
& .rdp-head_cell {
|
||||
@apply text-muted-foreground font-normal text-xs;
|
||||
}
|
||||
|
||||
& .rdp-cell {
|
||||
@apply text-center text-sm p-0;
|
||||
}
|
||||
|
||||
& .rdp-day {
|
||||
@apply h-9 w-9 p-0 font-normal hover:bg-accent rounded-md transition-colors;
|
||||
}
|
||||
|
||||
& .rdp-day_selected {
|
||||
@apply bg-primary text-primary-foreground hover:bg-primary/90;
|
||||
}
|
||||
|
||||
& .rdp-day_today {
|
||||
@apply bg-accent text-accent-foreground;
|
||||
}
|
||||
|
||||
& .rdp-day_outside {
|
||||
@apply text-muted-foreground opacity-50;
|
||||
}
|
||||
|
||||
& .rdp-day_disabled {
|
||||
@apply text-muted-foreground opacity-50;
|
||||
}
|
||||
|
||||
& .rdp-day_range_middle {
|
||||
@apply bg-accent text-accent-foreground;
|
||||
}
|
||||
|
||||
& .rdp-day_hidden {
|
||||
@apply invisible;
|
||||
}
|
||||
}
|
||||
@utility rdp-month {
|
||||
.rdp-custom & {
|
||||
@apply w-full;
|
||||
}
|
||||
}
|
||||
@utility rdp-caption {
|
||||
.rdp-custom & {
|
||||
@apply flex justify-center items-center mb-4;
|
||||
}
|
||||
}
|
||||
@utility rdp-caption_label {
|
||||
.rdp-custom & {
|
||||
@apply text-sm font-medium;
|
||||
}
|
||||
}
|
||||
@utility rdp-nav {
|
||||
.rdp-custom & {
|
||||
@apply flex gap-1;
|
||||
}
|
||||
}
|
||||
@utility rdp-nav_button {
|
||||
.rdp-custom & {
|
||||
@apply h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100;
|
||||
}
|
||||
}
|
||||
@utility rdp-table {
|
||||
.rdp-custom & {
|
||||
@apply w-full border-collapse;
|
||||
}
|
||||
}
|
||||
@utility rdp-head_cell {
|
||||
.rdp-custom & {
|
||||
@apply text-muted-foreground font-normal text-xs;
|
||||
}
|
||||
}
|
||||
@utility rdp-cell {
|
||||
.rdp-custom & {
|
||||
@apply text-center text-sm p-0;
|
||||
}
|
||||
}
|
||||
@utility rdp-day {
|
||||
.rdp-custom & {
|
||||
@apply h-9 w-9 p-0 font-normal hover:bg-accent rounded-md transition-colors;
|
||||
}
|
||||
}
|
||||
@utility rdp-day_selected {
|
||||
.rdp-custom & {
|
||||
@apply bg-primary text-primary-foreground hover:bg-primary/90;
|
||||
}
|
||||
}
|
||||
@utility rdp-day_today {
|
||||
.rdp-custom & {
|
||||
@apply bg-accent text-accent-foreground;
|
||||
}
|
||||
}
|
||||
@utility rdp-day_outside {
|
||||
.rdp-custom & {
|
||||
@apply text-muted-foreground opacity-50;
|
||||
}
|
||||
}
|
||||
@utility rdp-day_disabled {
|
||||
.rdp-custom & {
|
||||
@apply text-muted-foreground opacity-50;
|
||||
}
|
||||
}
|
||||
@utility rdp-day_range_middle {
|
||||
.rdp-custom & {
|
||||
@apply bg-accent text-accent-foreground;
|
||||
}
|
||||
}
|
||||
@utility rdp-day_hidden {
|
||||
.rdp-custom & {
|
||||
@apply invisible;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
/* ResolutionFlow Dark Theme — Slate & Ice Modern */
|
||||
--background: 228 12% 7%;
|
||||
--foreground: 210 40% 98%;
|
||||
--card: 220 10% 10%;
|
||||
--card-foreground: 210 40% 98%;
|
||||
--popover: 220 10% 10%;
|
||||
--popover-foreground: 210 40% 98%;
|
||||
--primary: 187 72% 43%;
|
||||
--primary-foreground: 228 12% 7%;
|
||||
--secondary: 220 8% 14%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
--muted: 220 8% 14%;
|
||||
--muted-foreground: 215 10% 58%;
|
||||
--accent: 220 8% 14%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
--destructive: 350 81% 55%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--border: 220 8% 14%;
|
||||
--input: 220 8% 14%;
|
||||
--ring: 187 72% 43%;
|
||||
--radius: 0.75rem;
|
||||
|
||||
/* App Shell tokens */
|
||||
--sidebar-w: 260px;
|
||||
--sidebar-bg: 228 12% 6%;
|
||||
--sidebar-hover: 220 8% 14%;
|
||||
--sidebar-active: 187 72% 43% / 0.10;
|
||||
--border-subtle: 220 8% 12%;
|
||||
--text-dimmed: 218 10% 39%;
|
||||
|
||||
/* Glass system */
|
||||
--glass-bg: rgba(24, 26, 31, 0.55);
|
||||
--glass-bg-hover: rgba(24, 26, 31, 0.7);
|
||||
--glass-border: rgba(255, 255, 255, 0.06);
|
||||
--glass-border-hover: rgba(255, 255, 255, 0.12);
|
||||
--glass-blur: blur(16px);
|
||||
--glass-blur-strong: blur(20px);
|
||||
--glass-blur-light: blur(12px);
|
||||
|
||||
/* Shadow system */
|
||||
--shadow-float: 0 8px 32px rgba(0, 0, 0, 0.3);
|
||||
--shadow-float-hover: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
|
||||
--shadow-cyan-glow: 0 8px 32px rgba(6, 182, 212, 0.08);
|
||||
|
||||
/* Easing */
|
||||
--ease-out-smooth: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: hsl(var(--border)) transparent;
|
||||
}
|
||||
*::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
*::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
*::-webkit-scrollbar-thumb {
|
||||
background-color: hsl(var(--border));
|
||||
border-radius: 9999px;
|
||||
}
|
||||
*::-webkit-scrollbar-thumb:hover {
|
||||
background-color: hsl(var(--muted-foreground));
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: 'Bricolage Grotesque', system-ui, sans-serif;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
& .rdp-month { @apply w-full; }
|
||||
& .rdp-caption { @apply flex justify-center items-center mb-4; }
|
||||
& .rdp-caption_label { @apply text-sm font-medium; }
|
||||
& .rdp-nav { @apply flex gap-1; }
|
||||
& .rdp-nav_button { @apply h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100; }
|
||||
& .rdp-table { @apply w-full border-collapse; }
|
||||
& .rdp-head_cell { @apply text-muted-foreground font-normal text-xs; }
|
||||
& .rdp-cell { @apply text-center text-sm p-0; }
|
||||
& .rdp-day { @apply h-9 w-9 p-0 font-normal hover:bg-accent rounded-md transition-colors; }
|
||||
& .rdp-day_selected { @apply bg-primary text-primary-foreground hover:bg-primary/90; }
|
||||
& .rdp-day_today { @apply bg-accent text-accent-foreground; }
|
||||
& .rdp-day_outside { @apply text-muted-foreground opacity-50; }
|
||||
& .rdp-day_disabled { @apply text-muted-foreground opacity-50; }
|
||||
& .rdp-day_range_middle { @apply bg-accent text-accent-foreground; }
|
||||
& .rdp-day_hidden { @apply invisible; }
|
||||
}
|
||||
|
||||
/* ── Layout utilities ────────────────────────────────── */
|
||||
@layer utilities {
|
||||
/* App Shell Grid Layout */
|
||||
.app-shell {
|
||||
display: grid;
|
||||
grid-template-columns: var(--sidebar-w) 1fr;
|
||||
@@ -399,228 +298,94 @@
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Mobile: single column */
|
||||
@media (max-width: 767px) {
|
||||
.app-shell {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* Staggered fade-in for page sections */
|
||||
/* Staggered fade-in helper */
|
||||
.fade-in {
|
||||
animation: fadeIn 0.3s ease forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(6px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
/* Animations */
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(4px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-in-from-left {
|
||||
from {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-in-from-bottom {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(16px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scale-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
transform: translateY(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInRight {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInRight {
|
||||
from {
|
||||
transform: translateX(30px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes breatheGlow {
|
||||
from {
|
||||
box-shadow:
|
||||
0 8px 32px rgba(0, 0, 0, 0.3),
|
||||
0 0 20px rgba(6, 182, 212, 0.04);
|
||||
}
|
||||
to {
|
||||
box-shadow:
|
||||
0 8px 32px rgba(0, 0, 0, 0.3),
|
||||
0 0 30px rgba(6, 182, 212, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bellWobble {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
20% {
|
||||
transform: rotate(8deg);
|
||||
}
|
||||
40% {
|
||||
transform: rotate(-6deg);
|
||||
}
|
||||
60% {
|
||||
transform: rotate(4deg);
|
||||
}
|
||||
80% {
|
||||
transform: rotate(-2deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
/* Sonner Toast Customization — outside @layer for higher specificity */
|
||||
[data-sonner-toast] {
|
||||
background-color: hsl(var(--card)) !important;
|
||||
color: hsl(var(--card-foreground)) !important;
|
||||
border: 1px solid hsl(var(--border)) !important;
|
||||
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3) !important;
|
||||
border-radius: 0.75rem;
|
||||
font-family: 'IBM Plex Sans', system-ui, sans-serif;
|
||||
}
|
||||
|
||||
[data-sonner-toast] [data-title] {
|
||||
font-family: 'IBM Plex Sans', system-ui, sans-serif;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
[data-sonner-toast][data-type='success'] {
|
||||
border-color: rgba(52, 211, 153, 0.3) !important;
|
||||
}
|
||||
[data-sonner-toast][data-type='success'] [data-icon] {
|
||||
color: #34d399;
|
||||
}
|
||||
|
||||
[data-sonner-toast][data-type='error'] {
|
||||
border-color: rgba(248, 113, 113, 0.3) !important;
|
||||
}
|
||||
[data-sonner-toast][data-type='error'] [data-icon] {
|
||||
color: #f87171;
|
||||
}
|
||||
|
||||
[data-sonner-toast][data-type='info'] {
|
||||
border-color: hsl(var(--border)) !important;
|
||||
}
|
||||
[data-sonner-toast][data-type='info'] [data-icon] {
|
||||
color: hsl(var(--muted-foreground));
|
||||
}
|
||||
|
||||
[data-sonner-toast][data-type='warning'] {
|
||||
border-color: rgba(251, 191, 36, 0.3) !important;
|
||||
}
|
||||
[data-sonner-toast][data-type='warning'] [data-icon] {
|
||||
color: #fbbf24;
|
||||
}
|
||||
|
||||
[data-sonner-toast] [data-close-button] {
|
||||
color: hsl(var(--muted-foreground));
|
||||
border-radius: 0.375rem;
|
||||
transition:
|
||||
color 150ms,
|
||||
background-color 150ms;
|
||||
}
|
||||
[data-sonner-toast] [data-close-button]:hover {
|
||||
background-color: hsl(var(--accent));
|
||||
color: hsl(var(--accent-foreground));
|
||||
}
|
||||
|
||||
/* React Day Picker Customization */
|
||||
/* ── Sonner toast overrides ──────────────────────────── */
|
||||
[data-sonner-toast] {
|
||||
background-color: var(--color-card) !important;
|
||||
color: var(--color-card-foreground) !important;
|
||||
border: 1px solid var(--color-border) !important;
|
||||
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3) !important;
|
||||
border-radius: 0.75rem;
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
|
||||
/* React Flow dark theme overrides */
|
||||
[data-sonner-toast] [data-title] {
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
[data-sonner-toast][data-type='success'] {
|
||||
border-color: oklch(0.76 0.15 163 / 0.3) !important;
|
||||
}
|
||||
[data-sonner-toast][data-type='success'] [data-icon] {
|
||||
color: oklch(0.76 0.15 163);
|
||||
}
|
||||
|
||||
[data-sonner-toast][data-type='error'] {
|
||||
border-color: oklch(0.7 0.16 22 / 0.3) !important;
|
||||
}
|
||||
[data-sonner-toast][data-type='error'] [data-icon] {
|
||||
color: oklch(0.7 0.16 22);
|
||||
}
|
||||
|
||||
[data-sonner-toast][data-type='info'] {
|
||||
border-color: var(--color-border) !important;
|
||||
}
|
||||
[data-sonner-toast][data-type='info'] [data-icon] {
|
||||
color: var(--color-muted-foreground);
|
||||
}
|
||||
|
||||
[data-sonner-toast][data-type='warning'] {
|
||||
border-color: oklch(0.82 0.16 85 / 0.3) !important;
|
||||
}
|
||||
[data-sonner-toast][data-type='warning'] [data-icon] {
|
||||
color: oklch(0.82 0.16 85);
|
||||
}
|
||||
|
||||
[data-sonner-toast] [data-close-button] {
|
||||
color: var(--color-muted-foreground);
|
||||
border-radius: 0.375rem;
|
||||
transition: color 150ms, background-color 150ms;
|
||||
}
|
||||
[data-sonner-toast] [data-close-button]:hover {
|
||||
background-color: var(--color-accent);
|
||||
color: var(--color-accent-foreground);
|
||||
}
|
||||
|
||||
/* ── React Flow dark theme overrides ─────────────────── */
|
||||
.react-flow__background {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.react-flow__controls {
|
||||
background-color: hsl(var(--card)) !important;
|
||||
border: 1px solid hsl(var(--border)) !important;
|
||||
background-color: var(--color-card) !important;
|
||||
border: 1px solid var(--color-border) !important;
|
||||
border-radius: 0.75rem !important;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.react-flow__controls-button {
|
||||
background-color: hsl(var(--card)) !important;
|
||||
border-color: hsl(var(--border)) !important;
|
||||
fill: hsl(var(--muted-foreground)) !important;
|
||||
color: hsl(var(--muted-foreground)) !important;
|
||||
background-color: var(--color-card) !important;
|
||||
border-color: var(--color-border) !important;
|
||||
fill: var(--color-muted-foreground) !important;
|
||||
color: var(--color-muted-foreground) !important;
|
||||
}
|
||||
|
||||
.react-flow__controls-button:hover {
|
||||
background-color: hsl(var(--accent)) !important;
|
||||
fill: hsl(var(--foreground)) !important;
|
||||
background-color: var(--color-accent) !important;
|
||||
fill: var(--color-foreground) !important;
|
||||
}
|
||||
|
||||
.react-flow__controls-button svg {
|
||||
@@ -628,34 +393,32 @@
|
||||
}
|
||||
|
||||
.react-flow__minimap {
|
||||
background-color: hsl(var(--card)) !important;
|
||||
border: 1px solid hsl(var(--border)) !important;
|
||||
background-color: var(--color-card) !important;
|
||||
border: 1px solid var(--color-border) !important;
|
||||
border-radius: 0.75rem !important;
|
||||
}
|
||||
|
||||
.react-flow__edge-path {
|
||||
stroke: hsl(var(--border));
|
||||
stroke: var(--color-border);
|
||||
}
|
||||
|
||||
.react-flow__edge-text {
|
||||
fill: hsl(var(--muted-foreground));
|
||||
fill: var(--color-muted-foreground);
|
||||
}
|
||||
|
||||
.react-flow__edge-textbg {
|
||||
fill: hsl(var(--card));
|
||||
fill: var(--color-card);
|
||||
}
|
||||
|
||||
/* Hide default React Flow attribution */
|
||||
.react-flow__attribution {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Handle styles */
|
||||
.react-flow__handle {
|
||||
background-color: hsl(var(--border));
|
||||
background-color: var(--color-border);
|
||||
}
|
||||
|
||||
/* Accessibility: Reduce motion for users who prefer it */
|
||||
/* ── Accessibility: Reduce motion ────────────────────── */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
|
||||
@@ -134,31 +134,31 @@ export default function MyAnalyticsPage() {
|
||||
<AreaChart data={time_series}>
|
||||
<CartesianGrid
|
||||
strokeDasharray="3 3"
|
||||
stroke="hsl(var(--border))"
|
||||
stroke="var(--color-border)"
|
||||
vertical={false}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }}
|
||||
tick={{ fill: 'var(--color-muted-foreground)', fontSize: 12 }}
|
||||
tickLine={false}
|
||||
axisLine={{ stroke: 'hsl(var(--border))' }}
|
||||
axisLine={{ stroke: 'var(--color-border)' }}
|
||||
tickFormatter={(value: string) => {
|
||||
const d = new Date(value)
|
||||
return `${d.getMonth() + 1}/${d.getDate()}`
|
||||
}}
|
||||
/>
|
||||
<YAxis
|
||||
tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }}
|
||||
tick={{ fill: 'var(--color-muted-foreground)', fontSize: 12 }}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
allowDecimals={false}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: 'hsl(var(--card))',
|
||||
border: '1px solid hsl(var(--border))',
|
||||
backgroundColor: 'var(--color-card)',
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: '8px',
|
||||
color: 'hsl(var(--foreground))',
|
||||
color: 'var(--color-foreground)',
|
||||
fontSize: '13px',
|
||||
}}
|
||||
labelFormatter={(value) => {
|
||||
|
||||
@@ -329,7 +329,7 @@ export default function SurveyPage() {
|
||||
<span className="hidden sm:inline">Resolution<span className="text-gradient-brand">Flow</span></span>
|
||||
</a>
|
||||
<div className="flex flex-1 items-center gap-2 sm:gap-2.5" style={{ maxWidth: '280px' }}>
|
||||
<div className="flex-1 h-[3px] rounded-full overflow-hidden" style={{ background: 'hsl(var(--border))' }}>
|
||||
<div className="flex-1 h-[3px] rounded-full overflow-hidden" style={{ background: 'var(--color-border)' }}>
|
||||
<div className="h-full rounded-full bg-gradient-brand transition-[width] duration-500" style={{ width: `${progressPct}%` }} />
|
||||
</div>
|
||||
<span className="text-[11px] font-label text-muted-foreground whitespace-nowrap tabular-nums">{answeredCount}/{TOTAL_QUESTIONS}</span>
|
||||
@@ -376,7 +376,7 @@ export default function SurveyPage() {
|
||||
key={i}
|
||||
className="flex-1 h-1 sm:h-[3px] rounded-full transition-colors duration-300"
|
||||
style={{
|
||||
background: i < currentSlide ? '#34d399' : i === currentSlide ? 'linear-gradient(90deg, #06b6d4, #22d3ee)' : 'hsl(var(--border))',
|
||||
background: i < currentSlide ? '#34d399' : i === currentSlide ? 'linear-gradient(90deg, #06b6d4, #22d3ee)' : 'var(--color-border)',
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
@@ -551,7 +551,7 @@ function QuestionCard({ question: q, answer, setAnswer }: { question: SurveyQues
|
||||
style={{
|
||||
background: answer === opt ? 'rgba(6, 182, 212, 0.1)' : 'rgba(16, 17, 20, 0.6)',
|
||||
border: `1px solid ${answer === opt ? '#06b6d4' : 'var(--glass-border)'}`,
|
||||
color: answer === opt ? 'hsl(var(--foreground))' : 'hsl(var(--muted-foreground))',
|
||||
color: answer === opt ? 'var(--color-foreground)' : 'var(--color-muted-foreground)',
|
||||
}}
|
||||
>
|
||||
<div className="w-[18px] h-[18px] rounded-full shrink-0 flex items-center justify-center transition-all duration-150 mt-0.5" style={{ border: `2px solid ${answer === opt ? '#06b6d4' : 'var(--glass-border)'}` }}>
|
||||
@@ -578,7 +578,7 @@ function QuestionCard({ question: q, answer, setAnswer }: { question: SurveyQues
|
||||
style={{
|
||||
background: selected ? 'rgba(6, 182, 212, 0.1)' : 'rgba(16, 17, 20, 0.6)',
|
||||
border: `1px solid ${selected ? '#06b6d4' : 'var(--glass-border)'}`,
|
||||
color: selected ? 'hsl(var(--foreground))' : 'hsl(var(--muted-foreground))',
|
||||
color: selected ? 'var(--color-foreground)' : 'var(--color-muted-foreground)',
|
||||
}}
|
||||
>
|
||||
<div className="w-[18px] h-[18px] rounded-[5px] shrink-0 flex items-center justify-center text-[11px] transition-all duration-150 mt-0.5" style={{ border: `2px solid ${selected ? '#06b6d4' : 'var(--glass-border)'}`, background: selected ? '#06b6d4' : 'transparent', color: selected ? 'white' : 'transparent' }}>
|
||||
@@ -633,7 +633,7 @@ function RangeInput({ question: q, value, onChange }: { question: SurveyQuestion
|
||||
onChange={e => onChange(e.target.value + (q.suffix || ''))}
|
||||
className="w-full h-2 sm:h-1 rounded-full appearance-none cursor-pointer touch-none"
|
||||
style={{
|
||||
background: `linear-gradient(to right, #06b6d4 0%, #06b6d4 ${((numVal - (q.min || 0)) / ((q.max || 10) - (q.min || 0))) * 100}%, hsl(var(--border)) ${((numVal - (q.min || 0)) / ((q.max || 10) - (q.min || 0))) * 100}%, hsl(var(--border)) 100%)`,
|
||||
background: `linear-gradient(to right, #06b6d4 0%, #06b6d4 ${((numVal - (q.min || 0)) / ((q.max || 10) - (q.min || 0))) * 100}%, var(--color-border) ${((numVal - (q.min || 0)) / ((q.max || 10) - (q.min || 0))) * 100}%, var(--color-border) 100%)`,
|
||||
}}
|
||||
/>
|
||||
<div className="flex justify-between text-[11px] text-muted-foreground mt-2.5">
|
||||
@@ -733,7 +733,7 @@ function DragRank({ items, onChange }: { items: string[]; onChange: (items: stri
|
||||
border: `1px solid ${overIdx === idx || draggingIdx === idx ? '#06b6d4' : 'var(--glass-border)'}`,
|
||||
opacity: draggingIdx === idx ? 0.5 : 1,
|
||||
cursor: 'grab',
|
||||
color: 'hsl(var(--muted-foreground))',
|
||||
color: 'var(--color-muted-foreground)',
|
||||
}}
|
||||
>
|
||||
<div className="shrink-0 text-brand-text-muted">
|
||||
|
||||
@@ -144,31 +144,31 @@ export default function TeamAnalyticsPage() {
|
||||
<AreaChart data={time_series}>
|
||||
<CartesianGrid
|
||||
strokeDasharray="3 3"
|
||||
stroke="hsl(var(--border))"
|
||||
stroke="var(--color-border)"
|
||||
vertical={false}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }}
|
||||
tick={{ fill: 'var(--color-muted-foreground)', fontSize: 12 }}
|
||||
tickLine={false}
|
||||
axisLine={{ stroke: 'hsl(var(--border))' }}
|
||||
axisLine={{ stroke: 'var(--color-border)' }}
|
||||
tickFormatter={(value: string) => {
|
||||
const d = new Date(value)
|
||||
return `${d.getMonth() + 1}/${d.getDate()}`
|
||||
}}
|
||||
/>
|
||||
<YAxis
|
||||
tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }}
|
||||
tick={{ fill: 'var(--color-muted-foreground)', fontSize: 12 }}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
allowDecimals={false}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: 'hsl(var(--card))',
|
||||
border: '1px solid hsl(var(--border))',
|
||||
backgroundColor: 'var(--color-card)',
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: '8px',
|
||||
color: 'hsl(var(--foreground))',
|
||||
color: 'var(--color-foreground)',
|
||||
fontSize: '13px',
|
||||
}}
|
||||
labelFormatter={(value) => {
|
||||
|
||||
Reference in New Issue
Block a user