colin/triqura-ecd
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
1592fdfac66f8e40cf56567be861f1d5f85115b9
triqura-ecd/app/globals.css
colinislit 1592fdfac6 Styling updates en sign-in component 
- Shadcn UI design tokens toevoegen aan globals.css
- Dark mode CSS variabelen voor consistente theming
- AnimatedSignIn component met collage layout
- Theme toggle en Google OAuth placeholder

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-17 15:26:50 +01:00

306 lines
9.2 KiB
CSS
Raw Blame History

@tailwind base;
@tailwind components;
@tailwind utilities;
/* =============================================================================
Mini-ECD Design System
Gebaseerd op ux-stylesheet.md (v2, UX-geoptimaliseerd)
============================================================================= */
:root {
/* Basiskleuren */
--color-bg: #F8FAFC;
--color-surface: #FFFFFF;
--color-surface-secondary: #F1F5F9;
--color-text: #0F172A;
--color-text-secondary: #475569;
--color-border: #E2E8F0;
/* Brand & Primary */
--color-brand: #3B82F6;
--color-brand-hover: #2563EB;
--color-brand-active: #1D4ED8;
--color-brand-subtle: #EFF6FF;
/* Neutral CTA */
--color-neutral: #334155;
--color-neutral-hover: #1F2937;
/* Module-accenten */
--color-module-appointments: #16A34A;
--color-module-appointments-bg: #E8F8EF;
--color-module-appointments-border: #CDECDC;
--color-module-meds: #F59E0B;
--color-module-meds-bg: #FEF6DC;
--color-module-meds-border: #F6E7B6;
--color-module-labs: #F97316;
--color-module-labs-bg: #FFEBDC;
--color-module-labs-border: #FFD2B8;
/* Status & Feedback */
--color-success: #16A34A;
--color-success-subtle: #ECFDF5;
--color-warning: #EAB308;
--color-warning-subtle: #FEFCE8;
--color-error: #DC2626;
--color-error-subtle: #FEF2F2;
--color-info: #3B82F6;
--color-info-subtle: #EFF6FF;
/* Badges (Severity DSM-light) */
--color-badge-low-bg: #E5E7EB;
--color-badge-low-text: #374151;
--color-badge-medium-bg: #FEF3C7;
--color-badge-medium-text: #92400E;
--color-badge-high-bg: #FEE2E2;
--color-badge-high-text: #991B1B;
/* Formulieren */
--color-input-bg: #FFFFFF;
--color-input-text: #0F172A;
--color-input-placeholder: #94A3B8;
--color-input-border: #CBD5E1;
--color-input-border-hover: #94A3B8;
--color-input-focus: #3B82F6;
--color-input-focus-border: #2563EB;
--color-input-disabled-bg: #F1F5F9;
--color-input-disabled-text: #94A3B8;
--color-input-invalid-border: #DC2626;
--color-input-invalid-text: #B91C1C;
/* Shadows */
--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
--shadow-md: 0 2px 6px rgba(15, 23, 42, 0.08);
--shadow-lg: 0 8px 20px rgba(15, 23, 42, 0.10);
/* Fonts (injected by Next.js font loader) */
/* --font-serif, --font-sans, --font-mono are available via className in layout.tsx */
/* Typography Scale (Manifesto) */
--text-hero: clamp(2.5rem, 6vw, 4rem); /* Quote */
--text-h1: clamp(2rem, 5vw, 3rem); /* Section headings */
--text-h2: clamp(1.5rem, 4vw, 2.5rem); /* Subsections */
--text-body: 1.25rem; /* Content */
--text-small: 0.875rem; /* Metadata */
--line-height-tight: 1.2; /* Headings */
--line-height-relaxed: 1.8; /* Body */
--radius: 0.625rem;
--background: oklch(1 0 0);
--foreground: oklch(0.129 0.042 264.695);
--card: oklch(1 0 0);
--card-foreground: oklch(0.129 0.042 264.695);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.129 0.042 264.695);
--primary: oklch(0.208 0.042 265.755);
--primary-foreground: oklch(0.984 0.003 247.858);
--secondary: oklch(0.968 0.007 247.896);
--secondary-foreground: oklch(0.208 0.042 265.755);
--muted: oklch(0.968 0.007 247.896);
--muted-foreground: oklch(0.554 0.046 257.417);
--accent: oklch(0.968 0.007 247.896);
--accent-foreground: oklch(0.208 0.042 265.755);
--destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.929 0.013 255.508);
--input: oklch(0.929 0.013 255.508);
--ring: oklch(0.704 0.04 256.788);
--chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704);
--chart-3: oklch(0.398 0.07 227.392);
--chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08);
--sidebar: oklch(0.984 0.003 247.858);
--sidebar-foreground: oklch(0.129 0.042 264.695);
--sidebar-primary: oklch(0.208 0.042 265.755);
--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
--sidebar-accent: oklch(0.968 0.007 247.896);
--sidebar-accent-foreground: oklch(0.208 0.042 265.755);
--sidebar-border: oklch(0.929 0.013 255.508);
--sidebar-ring: oklch(0.704 0.04 256.788);
}
/* Dark mode (optioneel, MVP gebruikt licht thema) */
.dark {
--color-bg: #0a0a0a;
--color-surface: #1a1a1a;
--color-text: #ededed;
--color-text-secondary: #a1a1a1;
--color-border: #333333;
--background: oklch(0.129 0.042 264.695);
--foreground: oklch(0.984 0.003 247.858);
--card: oklch(0.208 0.042 265.755);
--card-foreground: oklch(0.984 0.003 247.858);
--popover: oklch(0.208 0.042 265.755);
--popover-foreground: oklch(0.984 0.003 247.858);
--primary: oklch(0.929 0.013 255.508);
--primary-foreground: oklch(0.208 0.042 265.755);
--secondary: oklch(0.279 0.041 260.031);
--secondary-foreground: oklch(0.984 0.003 247.858);
--muted: oklch(0.279 0.041 260.031);
--muted-foreground: oklch(0.704 0.04 256.788);
--accent: oklch(0.279 0.041 260.031);
--accent-foreground: oklch(0.984 0.003 247.858);
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.551 0.027 264.364);
--chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439);
--sidebar: oklch(0.208 0.042 265.755);
--sidebar-foreground: oklch(0.984 0.003 247.858);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
--sidebar-accent: oklch(0.279 0.041 260.031);
--sidebar-accent-foreground: oklch(0.984 0.003 247.858);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.551 0.027 264.364);
}
/* Global styles */
body {
font-family: var(--font-sans), system-ui, -apple-system, sans-serif;
}
/* Typography utilities voor manifesto */
.font-serif {
font-family: var(--font-serif), Georgia, serif;
}
.font-sans {
font-family: var(--font-sans), system-ui, -apple-system, sans-serif;
}
.font-mono {
font-family: var(--font-mono), 'Courier New', monospace;
}
/* Focus styles (toegankelijkheid) - WCAG AA compliant */
*:focus-visible {
outline: 2px solid var(--color-brand);
outline-offset: 2px;
outline-width: 2px;
}
/* Skip to main content link (toegankelijkheid) */
.skip-to-main {
position: absolute;
left: -9999px;
z-index: 999;
padding: 1rem;
background: var(--color-bg);
color: var(--color-text);
text-decoration: none;
font-weight: 600;
}
.skip-to-main:focus {
left: 50%;
transform: translateX(-50%);
top: 1rem;
outline: 2px solid var(--color-brand);
outline-offset: 2px;
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* AI source highlighting (gebruikt in Intake editor) */
.ai-source-highlight {
background-color: #fef08a; /* lichtgeel */
border-radius: 2px;
padding: 1px 0;
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground antialiased;
}
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%;
--radius: 0.5rem;
--sidebar-background: 0 0% 98%;
--sidebar-foreground: 240 5.3% 26.1%;
--sidebar-primary: 240 5.9% 10%;
--sidebar-primary-foreground: 0 0% 98%;
--sidebar-accent: 240 4.8% 95.9%;
--sidebar-accent-foreground: 240 5.9% 10%;
--sidebar-border: 220 13% 91%;
--sidebar-ring: 217.2 91.2% 59.8%;
}
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%;
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 212.7 26.8% 83.9%;
--sidebar-background: 240 5.9% 10%;
--sidebar-foreground: 240 4.8% 95.9%;
--sidebar-primary: 224.3 76.3% 48%;
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 240 3.7% 15.9%;
--sidebar-accent-foreground: 240 4.8% 95.9%;
--sidebar-border: 240 3.7% 15.9%;
--sidebar-ring: 217.2 91.2% 59.8%;
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}
Reference in New Issue View Git Blame Copy Permalink