ef174af0e1
Implements localization for dashboard, cash register, account, and profile sections Adds localization keys for various UI elements, improving internationalization support Refactors view components to use ILocalizationService for dynamic text rendering Prepares ground for multi-language support with translation-ready markup
317 lines
9 KiB
CSS
317 lines
9 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 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);
|
|
}
|
|
|
|
/* ===========================================
|
|
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: color-mix(in srgb, var(--color-green) 15%, transparent); color: var(--color-green); }
|
|
.status-pending { background: color-mix(in srgb, var(--color-amber) 15%, transparent); color: var(--color-amber); }
|
|
.status-inprogress { background: color-mix(in srgb, var(--color-blue) 15%, transparent); color: var(--color-blue); }
|
|
.status-error { background: color-mix(in srgb, var(--color-red) 15%, transparent); color: var(--color-red); }
|
|
.status-active { background: color-mix(in srgb, var(--color-green) 15%, transparent); color: var(--color-green); }
|
|
.status-inactive { background: var(--color-background); color: var(--color-text-muted); }
|