WIP

2026-01-10 20:39:17 +01:00 · 2026-01-10 20:39:17 +01:00 · 7fc1ae0650
commit 7fc1ae0650
parent 54b057886c
204 changed files with 4345 additions and 134 deletions
--- a/PlanTempus.Application/wwwroot/css/design-system.css
+++ b/PlanTempus.Application/wwwroot/css/design-system.css
@ -0,0 +1,163 @@
+/**
+ * SWP Design System - CSS Variables
+ *
+ * Dette er den centrale definition af alle design tokens.
+ * Alle farver, fonts og layout-variabler defineres her.
+ */
+
+/* ===========================================
+   COLOR PALETTE - Light Mode (Default)
+   =========================================== */
+:root {
+  /* Surfaces */
+  --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;
+
+  /* Brand Colors */
+  --color-teal: #00897b;
+  --color-teal-light: color-mix(in srgb, var(--color-teal) 10%, transparent);
+
+  /* Semantic Colors */
+  --color-blue: #1976d2;
+  --color-green: #43a047;
+  --color-amber: #f59e0b;
+  --color-red: #e53935;
+  --color-purple: #8b5cf6;
+}
+
+/* ===========================================
+   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)
+   =========================================== */
+: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;
+}
+
+/* ===========================================
+   TYPOGRAPHY
+   =========================================== */
+:root {
+  --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-base: 14px;
+  --font-size-md: 13px;
+  --font-size-lg: 16px;
+  --font-size-xl: 22px;
+
+  /* Line Heights */
+  --line-height-tight: 1.25;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.75;
+}
+
+/* ===========================================
+   SPACING
+   =========================================== */
+:root {
+  --spacing-1: 4px;
+  --spacing-2: 8px;
+  --spacing-3: 12px;
+  --spacing-4: 16px;
+  --spacing-5: 20px;
+  --spacing-6: 24px;
+  --spacing-8: 32px;
+}
+
+/* ===========================================
+   LAYOUT
+   =========================================== */
+:root {
+  --side-menu-width: 240px;
+  --side-menu-width-collapsed: 64px;
+  --topbar-height: 56px;
+  --page-max-width: 1400px;
+  --border-radius: 6px;
+  --border-radius-lg: 8px;
+}
+
+/* ===========================================
+   TRANSITIONS
+   =========================================== */
+:root {
+  --transition-fast: 150ms ease;
+  --transition-normal: 200ms ease;
+  --transition-slow: 300ms ease;
+}
+
+/* ===========================================
+   Z-INDEX LAYERS
+   =========================================== */
+:root {
+  --z-dropdown: 100;
+  --z-sticky: 200;
+  --z-overlay: 900;
+  --z-drawer: 1000;
+  --z-modal: 1100;
+  --z-tooltip: 1200;
+}
+
+/* ===========================================
+   SHADOWS
+   =========================================== */
+:root {
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.15);
+}