chore: Tailwind CSS v3 → v4 migration (#99)
* chore: run Tailwind v4 upgrade tool (Phase 1) - Upgraded tailwindcss v3 → v4.2.1, postcss plugin to @tailwindcss/postcss - Deleted tailwind.config.js, migrated theme to CSS @theme block in index.css - Replaced @tailwind directives with @import 'tailwindcss' - Added @custom-variant dark, @utility blocks for custom utilities - Updated class names across 128 files (shadow-sm → shadow-xs, etc.) - Removed autoprefixer (built into v4) - Added migration plan doc Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * chore: switch from @tailwindcss/postcss to @tailwindcss/vite (Phase 2) - Replaced @tailwindcss/postcss with @tailwindcss/vite plugin - Deleted postcss.config.js (no longer needed) - Tailwind now runs as a native Vite plugin for faster HMR Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * 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> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit was merged in pull request #99.
This commit is contained in:
chihlasm
@@ -1,63 +1,187 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@import 'tailwindcss';
|
||||
|
||||
@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;
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
|
||||
/* 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%;
|
||||
@theme {
|
||||
/* ── 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);
|
||||
|
||||
/* 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);
|
||||
/* ── 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 */
|
||||
|
||||
/* 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);
|
||||
--color-card: oklch(0.178 0.008 264); /* #17191d */
|
||||
--color-card-foreground: oklch(0.98 0.005 264);
|
||||
|
||||
/* Easing */
|
||||
--ease-out-smooth: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--color-popover: oklch(0.178 0.008 264);
|
||||
--color-popover-foreground: oklch(0.98 0.005 264);
|
||||
|
||||
--color-primary: oklch(0.65 0.13 195); /* cyan #1ea8c4 */
|
||||
--color-primary-foreground: oklch(0.145 0.013 264); /* dark bg for contrast */
|
||||
|
||||
--color-secondary: oklch(0.22 0.008 264); /* #212329 */
|
||||
--color-secondary-foreground: oklch(0.98 0.005 264);
|
||||
|
||||
--color-muted: oklch(0.22 0.008 264);
|
||||
--color-muted-foreground: oklch(0.63 0.02 260); /* #8891a0 */
|
||||
|
||||
--color-accent: oklch(0.22 0.008 264);
|
||||
--color-accent-foreground: oklch(0.98 0.005 264);
|
||||
|
||||
--color-destructive: oklch(0.55 0.22 15); /* rose #e63359 */
|
||||
--color-destructive-foreground: oklch(0.98 0.005 264);
|
||||
|
||||
--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 */
|
||||
|
||||
/* ── 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',
|
||||
Roboto, sans-serif;
|
||||
--font-heading: 'Bricolage Grotesque', system-ui, sans-serif;
|
||||
--font-label: 'JetBrains Mono', monospace;
|
||||
|
||||
/* ── Gradients ───────────────────────────────────── */
|
||||
--background-image-gradient-brand: linear-gradient(
|
||||
135deg,
|
||||
oklch(0.65 0.13 195) 0%,
|
||||
oklch(0.74 0.12 195) 100%
|
||||
);
|
||||
--background-image-gradient-brand-hover: linear-gradient(
|
||||
135deg,
|
||||
oklch(0.58 0.12 195) 0%,
|
||||
oklch(0.65 0.13 195) 100%
|
||||
);
|
||||
|
||||
/* ── 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;
|
||||
|
||||
@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); }
|
||||
}
|
||||
}
|
||||
|
||||
/* ── 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);
|
||||
}
|
||||
|
||||
/* ── Base styles ─────────────────────────────────────── */
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: hsl(var(--border)) transparent;
|
||||
scrollbar-color: var(--color-border) transparent;
|
||||
}
|
||||
*::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
@@ -67,333 +191,201 @@
|
||||
background: transparent;
|
||||
}
|
||||
*::-webkit-scrollbar-thumb {
|
||||
background-color: hsl(var(--border));
|
||||
background-color: var(--color-border);
|
||||
border-radius: 9999px;
|
||||
}
|
||||
*::-webkit-scrollbar-thumb:hover {
|
||||
background-color: hsl(var(--muted-foreground));
|
||||
background-color: var(--color-muted-foreground);
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
@apply bg-background text-foreground font-sans;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: 'Bricolage Grotesque', system-ui, sans-serif;
|
||||
font-family: var(--font-heading);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
}
|
||||
|
||||
/* App Shell Grid Layout */
|
||||
.app-shell {
|
||||
display: grid;
|
||||
grid-template-columns: var(--sidebar-w) 1fr;
|
||||
grid-template-rows: 56px 1fr;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
transition: grid-template-columns 200ms ease;
|
||||
/* ── Custom utilities ────────────────────────────────── */
|
||||
@utility btn-press {
|
||||
@apply active:scale-[0.98] transition-transform;
|
||||
}
|
||||
|
||||
.app-shell--collapsed {
|
||||
grid-template-columns: 56px 1fr;
|
||||
@utility text-gradient-brand {
|
||||
@apply bg-gradient-brand bg-clip-text text-transparent;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Mobile: single column */
|
||||
@media (max-width: 767px) {
|
||||
.app-shell {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* Staggered fade-in for page sections */
|
||||
.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 {
|
||||
.animate-fade-in {
|
||||
animation: fade-in 200ms ease-out;
|
||||
}
|
||||
|
||||
.animate-fade-in-up {
|
||||
animation: fade-in-up 200ms ease-out;
|
||||
}
|
||||
|
||||
.animate-slide-in-left {
|
||||
animation: slide-in-from-left 200ms ease-out;
|
||||
}
|
||||
|
||||
.animate-slide-in-bottom {
|
||||
animation: slide-in-from-bottom 200ms ease-out;
|
||||
}
|
||||
|
||||
.animate-scale-in {
|
||||
animation: scale-in 150ms ease-out;
|
||||
}
|
||||
|
||||
/* Button press feedback */
|
||||
.btn-press {
|
||||
@apply active:scale-[0.98] transition-transform;
|
||||
}
|
||||
|
||||
/* Brand gradient text */
|
||||
.text-gradient-brand {
|
||||
@apply bg-gradient-brand bg-clip-text text-transparent;
|
||||
}
|
||||
|
||||
/* Glass card — interactive with hover lift */
|
||||
.glass-card {
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: var(--glass-blur);
|
||||
-webkit-backdrop-filter: var(--glass-blur);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: 16px;
|
||||
box-shadow: var(--shadow-float);
|
||||
transition: transform 200ms var(--ease-out-smooth),
|
||||
border-color 200ms var(--ease-out-smooth),
|
||||
box-shadow 200ms var(--ease-out-smooth);
|
||||
}
|
||||
.glass-card:hover {
|
||||
@utility glass-card {
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: var(--glass-blur);
|
||||
-webkit-backdrop-filter: var(--glass-blur);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: 16px;
|
||||
box-shadow: var(--shadow-float);
|
||||
transition:
|
||||
transform 200ms var(--ease-out-smooth),
|
||||
border-color 200ms var(--ease-out-smooth),
|
||||
box-shadow 200ms var(--ease-out-smooth);
|
||||
&:hover {
|
||||
transform: scale(1.02);
|
||||
border-color: var(--glass-border-hover);
|
||||
box-shadow: var(--shadow-float-hover);
|
||||
}
|
||||
}
|
||||
|
||||
/* Glass card — static, no hover transform */
|
||||
.glass-card-static {
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: var(--glass-blur);
|
||||
-webkit-backdrop-filter: var(--glass-blur);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: 16px;
|
||||
box-shadow: var(--shadow-float);
|
||||
@utility glass-card-static {
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: var(--glass-blur);
|
||||
-webkit-backdrop-filter: var(--glass-blur);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: 16px;
|
||||
box-shadow: var(--shadow-float);
|
||||
}
|
||||
|
||||
@utility active-glow {
|
||||
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; }
|
||||
}
|
||||
|
||||
/* ── Layout utilities ────────────────────────────────── */
|
||||
@layer utilities {
|
||||
.app-shell {
|
||||
display: grid;
|
||||
grid-template-columns: var(--sidebar-w) 1fr;
|
||||
grid-template-rows: 56px 1fr;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
transition: grid-template-columns 200ms ease;
|
||||
}
|
||||
|
||||
/* Breathing glow for highlighted stat cards */
|
||||
.active-glow {
|
||||
animation: breatheGlow 3s ease-in-out infinite alternate;
|
||||
.app-shell--collapsed {
|
||||
grid-template-columns: 56px 1fr;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.app-shell {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* Staggered fade-in helper */
|
||||
.fade-in {
|
||||
animation: fadeIn 0.3s ease forwards;
|
||||
}
|
||||
}
|
||||
|
||||
/* Sonner Toast Customization — outside @layer for higher specificity */
|
||||
/* ── Sonner toast overrides ──────────────────────────── */
|
||||
[data-sonner-toast] {
|
||||
background-color: hsl(var(--card)) !important;
|
||||
color: hsl(var(--card-foreground)) !important;
|
||||
border: 1px solid hsl(var(--border)) !important;
|
||||
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: 'IBM Plex Sans', system-ui, sans-serif;
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
|
||||
[data-sonner-toast] [data-title] {
|
||||
font-family: 'IBM Plex Sans', system-ui, sans-serif;
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
[data-sonner-toast][data-type="success"] {
|
||||
border-color: rgba(52, 211, 153, 0.3) !important;
|
||||
[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: #34d399;
|
||||
[data-sonner-toast][data-type='success'] [data-icon] {
|
||||
color: oklch(0.76 0.15 163);
|
||||
}
|
||||
|
||||
[data-sonner-toast][data-type="error"] {
|
||||
border-color: rgba(248, 113, 113, 0.3) !important;
|
||||
[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: #f87171;
|
||||
[data-sonner-toast][data-type='error'] [data-icon] {
|
||||
color: oklch(0.7 0.16 22);
|
||||
}
|
||||
|
||||
[data-sonner-toast][data-type="info"] {
|
||||
border-color: hsl(var(--border)) !important;
|
||||
[data-sonner-toast][data-type='info'] {
|
||||
border-color: var(--color-border) !important;
|
||||
}
|
||||
[data-sonner-toast][data-type="info"] [data-icon] {
|
||||
color: hsl(var(--muted-foreground));
|
||||
[data-sonner-toast][data-type='info'] [data-icon] {
|
||||
color: var(--color-muted-foreground);
|
||||
}
|
||||
|
||||
[data-sonner-toast][data-type="warning"] {
|
||||
border-color: rgba(251, 191, 36, 0.3) !important;
|
||||
[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: #fbbf24;
|
||||
[data-sonner-toast][data-type='warning'] [data-icon] {
|
||||
color: oklch(0.82 0.16 85);
|
||||
}
|
||||
|
||||
[data-sonner-toast] [data-close-button] {
|
||||
color: hsl(var(--muted-foreground));
|
||||
color: var(--color-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));
|
||||
background-color: var(--color-accent);
|
||||
color: var(--color-accent-foreground);
|
||||
}
|
||||
|
||||
/* React Day Picker Customization */
|
||||
@layer components {
|
||||
.rdp-custom {
|
||||
@apply text-foreground;
|
||||
}
|
||||
|
||||
.rdp-custom .rdp-month {
|
||||
@apply w-full;
|
||||
}
|
||||
|
||||
.rdp-custom .rdp-caption {
|
||||
@apply flex justify-center items-center mb-4;
|
||||
}
|
||||
|
||||
.rdp-custom .rdp-caption_label {
|
||||
@apply text-sm font-medium;
|
||||
}
|
||||
|
||||
.rdp-custom .rdp-nav {
|
||||
@apply flex gap-1;
|
||||
}
|
||||
|
||||
.rdp-custom .rdp-nav_button {
|
||||
@apply h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100;
|
||||
}
|
||||
|
||||
.rdp-custom .rdp-table {
|
||||
@apply w-full border-collapse;
|
||||
}
|
||||
|
||||
.rdp-custom .rdp-head_cell {
|
||||
@apply text-muted-foreground font-normal text-xs;
|
||||
}
|
||||
|
||||
.rdp-custom .rdp-cell {
|
||||
@apply text-center text-sm p-0;
|
||||
}
|
||||
|
||||
.rdp-custom .rdp-day {
|
||||
@apply h-9 w-9 p-0 font-normal hover:bg-accent rounded-md transition-colors;
|
||||
}
|
||||
|
||||
.rdp-custom .rdp-day_selected {
|
||||
@apply bg-primary text-primary-foreground hover:bg-primary/90;
|
||||
}
|
||||
|
||||
.rdp-custom .rdp-day_today {
|
||||
@apply bg-accent text-accent-foreground;
|
||||
}
|
||||
|
||||
.rdp-custom .rdp-day_outside {
|
||||
@apply text-muted-foreground opacity-50;
|
||||
}
|
||||
|
||||
.rdp-custom .rdp-day_disabled {
|
||||
@apply text-muted-foreground opacity-50;
|
||||
}
|
||||
|
||||
.rdp-custom .rdp-day_range_middle {
|
||||
@apply bg-accent text-accent-foreground;
|
||||
}
|
||||
|
||||
.rdp-custom .rdp-day_hidden {
|
||||
@apply invisible;
|
||||
}
|
||||
}
|
||||
|
||||
/* React Flow dark theme overrides */
|
||||
/* ── 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 {
|
||||
@@ -401,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,
|
||||
|
||||
Reference in New Issue
Block a user