5e2cab9bd5
Improves CSS organization by adopting PostCSS nesting syntax Enhances responsiveness with refined media query implementations Reduces code repetition and improves maintainability of stylesheets Modernizes CSS structure across multiple component stylesheets
372 lines
12 KiB
CSS
372 lines
12 KiB
CSS
/**
|
|
* SWP Design System - Unified Design Tokens
|
|
*
|
|
* Konsolideret fra Calendar POC og PlanTempus Application
|
|
* Brug disse tokens konsistent på tværs af alle projekter.
|
|
*/
|
|
|
|
/* ===========================================
|
|
COLOR PALETTE - Light Mode (Default)
|
|
=========================================== */
|
|
:root {
|
|
/* -------- Surfaces & Backgrounds -------- */
|
|
--color-surface: #fff;
|
|
--color-background: #f5f5f5;
|
|
--color-background-hover: #f0f0f0;
|
|
--color-background-alt: #fafafa;
|
|
|
|
/* -------- Borders -------- */
|
|
--color-border: #e0e0e0;
|
|
--color-border-light: #f0f0f0;
|
|
|
|
/* -------- Text -------- */
|
|
--color-text: #333;
|
|
--color-text-secondary: #666;
|
|
--color-text-muted: #999;
|
|
|
|
/* -------- Primary Brand -------- */
|
|
--color-primary: #1976d2;
|
|
--color-teal: #00897b;
|
|
--color-teal-light: color-mix(in srgb, var(--color-teal) 10%, transparent);
|
|
|
|
/* -------- Semantic / Status -------- */
|
|
--color-blue: #1976d2;
|
|
--color-green: #43a047;
|
|
--color-amber: #f59e0b;
|
|
--color-red: #e53935;
|
|
--color-purple: #8b5cf6;
|
|
|
|
/* -------- Team/Resource -------- */
|
|
--color-team-bg: #e3f2fd;
|
|
--color-team-text: #1565c0;
|
|
|
|
/* -------- Grid Lines -------- */
|
|
--color-hour-line: rgba(0, 0, 0, 0.2);
|
|
--color-grid-line-light: rgba(0, 0, 0, 0.05);
|
|
--color-unavailable: rgba(0, 0, 0, 0.02);
|
|
}
|
|
|
|
/* ===========================================
|
|
COLOR OVERLAYS - Semantic Overlay System
|
|
=========================================== */
|
|
:root {
|
|
/* -------- Overlay Percentages -------- */
|
|
--overlay-subtle: 5%;
|
|
--overlay-medium: 10%;
|
|
--overlay-strong: 15%;
|
|
--overlay-border: 30%;
|
|
|
|
/* -------- Teal Overlays -------- */
|
|
--bg-teal-subtle: color-mix(in srgb, var(--color-teal) var(--overlay-subtle), transparent);
|
|
--bg-teal-medium: color-mix(in srgb, var(--color-teal) var(--overlay-medium), transparent);
|
|
--bg-teal-strong: color-mix(in srgb, var(--color-teal) var(--overlay-strong), transparent);
|
|
--border-teal: color-mix(in srgb, var(--color-teal) var(--overlay-border), transparent);
|
|
|
|
/* -------- Green Overlays -------- */
|
|
--bg-green-subtle: color-mix(in srgb, var(--color-green) var(--overlay-subtle), transparent);
|
|
--bg-green-medium: color-mix(in srgb, var(--color-green) var(--overlay-medium), transparent);
|
|
--bg-green-strong: color-mix(in srgb, var(--color-green) var(--overlay-strong), transparent);
|
|
--border-green: color-mix(in srgb, var(--color-green) var(--overlay-border), transparent);
|
|
|
|
/* -------- Amber Overlays -------- */
|
|
--bg-amber-subtle: color-mix(in srgb, var(--color-amber) var(--overlay-subtle), transparent);
|
|
--bg-amber-medium: color-mix(in srgb, var(--color-amber) var(--overlay-medium), transparent);
|
|
--bg-amber-strong: color-mix(in srgb, var(--color-amber) var(--overlay-strong), transparent);
|
|
--border-amber: color-mix(in srgb, var(--color-amber) var(--overlay-border), transparent);
|
|
|
|
/* -------- Red Overlays -------- */
|
|
--bg-red-subtle: color-mix(in srgb, var(--color-red) var(--overlay-subtle), transparent);
|
|
--bg-red-medium: color-mix(in srgb, var(--color-red) var(--overlay-medium), transparent);
|
|
--bg-red-strong: color-mix(in srgb, var(--color-red) var(--overlay-strong), transparent);
|
|
--border-red: color-mix(in srgb, var(--color-red) var(--overlay-border), transparent);
|
|
|
|
/* -------- Blue Overlays -------- */
|
|
--bg-blue-subtle: color-mix(in srgb, var(--color-blue) var(--overlay-subtle), transparent);
|
|
--bg-blue-medium: color-mix(in srgb, var(--color-blue) var(--overlay-medium), transparent);
|
|
--bg-blue-strong: color-mix(in srgb, var(--color-blue) var(--overlay-strong), transparent);
|
|
--border-blue: color-mix(in srgb, var(--color-blue) var(--overlay-border), transparent);
|
|
|
|
/* -------- Purple Overlays -------- */
|
|
--bg-purple-subtle: color-mix(in srgb, var(--color-purple) var(--overlay-subtle), transparent);
|
|
--bg-purple-medium: color-mix(in srgb, var(--color-purple) var(--overlay-medium), transparent);
|
|
--bg-purple-strong: color-mix(in srgb, var(--color-purple) var(--overlay-strong), transparent);
|
|
--border-purple: color-mix(in srgb, var(--color-purple) var(--overlay-border), transparent);
|
|
|
|
/* -------- Gradient Tokens -------- */
|
|
--gradient-enterprise: linear-gradient(135deg, var(--color-surface) 0%, color-mix(in srgb, var(--color-purple) 5%, var(--color-surface)) 100%);
|
|
}
|
|
|
|
/* ===========================================
|
|
COLOR PALETTE - Dark Mode (System)
|
|
=========================================== */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root:not(.light-mode) {
|
|
--color-surface: #1e1e1e;
|
|
--color-background: #121212;
|
|
--color-background-hover: #2a2a2a;
|
|
--color-background-alt: #1a1a1a;
|
|
|
|
--color-border: #333;
|
|
--color-border-light: #2a2a2a;
|
|
|
|
--color-text: #e0e0e0;
|
|
--color-text-secondary: #999;
|
|
--color-text-muted: #666;
|
|
|
|
--color-teal: #26a69a;
|
|
--color-blue: #42a5f5;
|
|
--color-green: #66bb6a;
|
|
--color-amber: #ffb74d;
|
|
--color-red: #ef5350;
|
|
--color-purple: #a78bfa;
|
|
}
|
|
}
|
|
|
|
/* ===========================================
|
|
COLOR PALETTE - Dark Mode (Manual Toggle)
|
|
=========================================== */
|
|
:root.dark-mode {
|
|
--color-surface: #1e1e1e;
|
|
--color-background: #121212;
|
|
--color-background-hover: #2a2a2a;
|
|
--color-background-alt: #1a1a1a;
|
|
|
|
--color-border: #333;
|
|
--color-border-light: #2a2a2a;
|
|
|
|
--color-text: #e0e0e0;
|
|
--color-text-secondary: #999;
|
|
--color-text-muted: #666;
|
|
|
|
--color-teal: #26a69a;
|
|
--color-blue: #42a5f5;
|
|
--color-green: #66bb6a;
|
|
--color-amber: #ffb74d;
|
|
--color-red: #ef5350;
|
|
--color-purple: #a78bfa;
|
|
}
|
|
|
|
/* ===========================================
|
|
EVENT COLOR PALETTE (18 Colors)
|
|
=========================================== */
|
|
:root {
|
|
--b-color-red: #e53935;
|
|
--b-color-pink: #d81b60;
|
|
--b-color-magenta: #c200c2;
|
|
--b-color-purple: #8e24aa;
|
|
--b-color-violet: #5e35b1;
|
|
--b-color-deep-purple: #4527a0;
|
|
--b-color-indigo: #3949ab;
|
|
--b-color-blue: #1e88e5;
|
|
--b-color-light-blue: #03a9f4;
|
|
--b-color-cyan: #3bc9db;
|
|
--b-color-teal: #00897b;
|
|
--b-color-green: #43a047;
|
|
--b-color-light-green: #8bc34a;
|
|
--b-color-lime: #c0ca33;
|
|
--b-color-yellow: #fdd835;
|
|
--b-color-amber: #ffb300;
|
|
--b-color-orange: #fb8c00;
|
|
--b-color-deep-orange: #f4511e;
|
|
|
|
/* For color-mix calculations */
|
|
--b-mix: #fff;
|
|
}
|
|
|
|
/* ===========================================
|
|
TYPOGRAPHY
|
|
=========================================== */
|
|
:root {
|
|
/* -------- Font Families -------- */
|
|
--font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
--font-mono: 'JetBrains Mono', monospace;
|
|
|
|
/* -------- Font Sizes -------- */
|
|
--font-size-xs: 11px;
|
|
--font-size-sm: 12px;
|
|
--font-size-md: 13px;
|
|
--font-size-base: 14px;
|
|
--font-size-lg: 16px;
|
|
--font-size-xl: 18px;
|
|
--font-size-2xl: 20px;
|
|
--font-size-3xl: 22px;
|
|
|
|
/* -------- Font Weights -------- */
|
|
--font-weight-light: 300;
|
|
--font-weight-regular: 400;
|
|
--font-weight-medium: 500;
|
|
--font-weight-semibold: 600;
|
|
--font-weight-bold: 700;
|
|
|
|
/* -------- Line Heights -------- */
|
|
--line-height-tight: 1.25;
|
|
--line-height-snug: 1.3;
|
|
--line-height-normal: 1.5;
|
|
--line-height-relaxed: 1.6;
|
|
}
|
|
|
|
/* ===========================================
|
|
SPACING
|
|
=========================================== */
|
|
:root {
|
|
--spacing-0: 0;
|
|
--spacing-1: 2px;
|
|
--spacing-2: 4px;
|
|
--spacing-3: 6px;
|
|
--spacing-4: 8px;
|
|
--spacing-5: 10px;
|
|
--spacing-6: 12px;
|
|
--spacing-7: 14px;
|
|
--spacing-8: 16px;
|
|
--spacing-10: 20px;
|
|
--spacing-12: 24px;
|
|
--spacing-16: 32px;
|
|
--spacing-24: 48px;
|
|
}
|
|
|
|
/* ===========================================
|
|
LAYOUT
|
|
=========================================== */
|
|
:root {
|
|
/* -------- Sidebars & Navigation -------- */
|
|
--side-menu-width: 240px;
|
|
--side-menu-width-collapsed: 64px;
|
|
--topbar-height: 56px;
|
|
|
|
/* -------- Content Containers -------- */
|
|
--page-max-width: 1400px;
|
|
--container-max-width-sm: 900px;
|
|
--container-max-width-md: 1200px;
|
|
--container-max-width-lg: 1400px;
|
|
|
|
/* -------- Card Spacing -------- */
|
|
--card-padding: 12px;
|
|
--card-gap: 24px;
|
|
--section-gap: 24px;
|
|
--page-padding: 24px;
|
|
|
|
/* -------- Calendar Grid -------- */
|
|
--hour-height: 64px;
|
|
--time-axis-width: 60px;
|
|
--grid-columns: 7;
|
|
--day-column-min-width: 200px;
|
|
--day-start-hour: 6;
|
|
--day-end-hour: 18;
|
|
--header-height: 70px;
|
|
}
|
|
|
|
/* ===========================================
|
|
BORDERS & RADIUS
|
|
=========================================== */
|
|
:root {
|
|
/* -------- Border Radius -------- */
|
|
--radius-sm: 3px;
|
|
--radius-md: 4px;
|
|
--radius-lg: 6px;
|
|
--radius-xl: 8px;
|
|
--radius-2xl: 12px;
|
|
--radius-pill: 20px;
|
|
--radius-full: 50%;
|
|
|
|
/* Legacy aliases */
|
|
--border-radius: 6px;
|
|
--border-radius-lg: 8px;
|
|
}
|
|
|
|
/* ===========================================
|
|
SHADOWS
|
|
=========================================== */
|
|
:root {
|
|
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
|
|
--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
--shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.15);
|
|
--shadow-xl: 0 4px 20px rgba(0, 0, 0, 0.15);
|
|
|
|
/* Specific use-cases */
|
|
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08);
|
|
--shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
--shadow-drawer: 0 4px 20px rgba(0, 0, 0, 0.1);
|
|
--shadow-dragging: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
|
|
/* Focus ring shadows */
|
|
--shadow-focus-teal: 0 0 0 3px var(--bg-teal-strong);
|
|
--shadow-focus-blue: 0 0 0 3px var(--bg-blue-strong);
|
|
--shadow-focus-red: 0 0 0 3px var(--bg-red-strong);
|
|
}
|
|
|
|
/* ===========================================
|
|
TRANSITIONS
|
|
=========================================== */
|
|
:root {
|
|
--transition-fast: 150ms ease;
|
|
--transition-normal: 200ms ease;
|
|
--transition-slow: 300ms ease;
|
|
|
|
/* Specific timing functions */
|
|
--ease-out: ease-out;
|
|
--ease-in-out: ease-in-out;
|
|
--ease-spring: cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
/* ===========================================
|
|
Z-INDEX LAYERS
|
|
=========================================== */
|
|
:root {
|
|
--z-base: 1;
|
|
--z-grid: 2;
|
|
--z-event: 10;
|
|
--z-event-hover: 20;
|
|
--z-resize-handle: 25;
|
|
--z-dropdown: 100;
|
|
--z-sticky: 200;
|
|
--z-overlay: 900;
|
|
--z-drawer: 1000;
|
|
--z-modal: 1100;
|
|
--z-tooltip: 1200;
|
|
--z-dragging: 999999;
|
|
}
|
|
|
|
/* ===========================================
|
|
BREAKPOINTS (as CSS custom properties)
|
|
For reference - use @media queries in CSS
|
|
=========================================== */
|
|
/*
|
|
--breakpoint-sm: 600px;
|
|
--breakpoint-md: 768px;
|
|
--breakpoint-lg: 1024px;
|
|
--breakpoint-xl: 1100px;
|
|
--breakpoint-2xl: 1400px;
|
|
*/
|
|
|
|
/* ===========================================
|
|
UTILITY CLASSES - Event Colors
|
|
=========================================== */
|
|
.is-red { --b-primary: var(--b-color-red); }
|
|
.is-pink { --b-primary: var(--b-color-pink); }
|
|
.is-magenta { --b-primary: var(--b-color-magenta); }
|
|
.is-purple { --b-primary: var(--b-color-purple); }
|
|
.is-violet { --b-primary: var(--b-color-violet); }
|
|
.is-deep-purple { --b-primary: var(--b-color-deep-purple); }
|
|
.is-indigo { --b-primary: var(--b-color-indigo); }
|
|
.is-blue { --b-primary: var(--b-color-blue); }
|
|
.is-light-blue { --b-primary: var(--b-color-light-blue); }
|
|
.is-cyan { --b-primary: var(--b-color-cyan); }
|
|
.is-teal { --b-primary: var(--b-color-teal); }
|
|
.is-green { --b-primary: var(--b-color-green); }
|
|
.is-light-green { --b-primary: var(--b-color-light-green); }
|
|
.is-lime { --b-primary: var(--b-color-lime); }
|
|
.is-yellow { --b-primary: var(--b-color-yellow); }
|
|
.is-amber { --b-primary: var(--b-color-amber); }
|
|
.is-orange { --b-primary: var(--b-color-orange); }
|
|
.is-deep-orange { --b-primary: var(--b-color-deep-orange); }
|
|
|
|
/* ===========================================
|
|
UTILITY CLASSES - Status Badges
|
|
=========================================== */
|
|
.status-confirmed { background: var(--bg-green-strong); color: var(--color-green); }
|
|
.status-pending { background: var(--bg-amber-strong); color: var(--color-amber); }
|
|
.status-inprogress { background: var(--bg-blue-strong); color: var(--color-blue); }
|
|
.status-error { background: var(--bg-red-strong); color: var(--color-red); }
|
|
.status-active { background: var(--bg-green-strong); color: var(--color-green); }
|
|
.status-inactive { background: var(--color-background); color: var(--color-text-muted); }
|