/*! @xware/design-system v0.1.0 - generiert von build.js, nicht editieren. */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap'); /* === tokens.css === */ /* ───────────────────────────────────────────────────────────────────────── @xware/design-system - Design Tokens (Single Source) Quelle: xander-demo-portal src/css/style.css (Brand-Palette xware-pulse.ch). Tokens sind CSS Custom Properties. Light ist Default (:root). Dark wird ueber das Theme-Attribut [data-theme="dark"] geschaltet ODER, wenn kein Attribut gesetzt ist, automatisch via prefers-color-scheme. Setzen im Konsumenten: -> Auto (folgt OS-Praeferenz) -> erzwungen hell -> erzwungen dunkel ───────────────────────────────────────────────────────────────────────── */ :root { /* Brand */ --primary: #09131D; --primary-hover: #122036; --secondary: #234972; --accent: #97BF0D; --accent-hover: #80a609; --accent-bright: #CCFF1C; /* WCAG-2.1-AA-tauglicher Akzent fuer Text auf hellem Grund (~5.5:1). --accent selbst liefert auf Weiss nur ~2.9:1 und ist Buttons/Brand- Akzenten vorbehalten. */ --accent-text: #5a7507; /* Status */ --success: var(--accent); --success-soft: rgba(151, 191, 13, 0.18); --warning: #e67e22; --danger: #b91c1c; /* Text */ --text: #09131D; --text-muted: #5b6776; --text-on-dark: #ffffff; --text-on-dark-muted: rgba(255, 255, 255, 0.72); /* Flaechen */ --bg: #ffffff; --bg-light: #F7F7F9; --bg-neutral: #E9E9EE; --bg-card: #ffffff; /* Border */ --border: #E5E7EB; --border-strong: #CFDEE6; /* Links */ --link: var(--accent-text); --link-hover: var(--accent-hover); /* Layout + Elevation */ --max-width: 960px; --radius: 10px; --radius-sm: 6px; --space: 1rem; --shadow-card: 0 1px 2px rgba(9, 19, 29, 0.04), 0 4px 12px rgba(9, 19, 29, 0.06); /* Typografie */ --font-base: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* Dark-Tokens als wiederverwendbares Set, damit Attribut- und Auto-Pfad exakt dieselben Werte teilen (keine Drift). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --text: #E4E7EB; --text-muted: #8892B0; --bg: #09131D; --bg-light: #0F1F3B; --bg-neutral: #112240; --bg-card: #0F1F3B; --border: #234972; --border-strong: #2E629D; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 18px rgba(0, 0, 0, 0.35); } } [data-theme="dark"] { --text: #E4E7EB; --text-muted: #8892B0; --bg: #09131D; --bg-light: #0F1F3B; --bg-neutral: #112240; --bg-card: #0F1F3B; --border: #234972; --border-strong: #2E629D; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 18px rgba(0, 0, 0, 0.35); } /* === components/base.css === */ /* base.css - Reset, Typografie, Layout-Container. Generische Primitive, keine app-spezifischen Klassen. */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-base); font-size: 1rem; line-height: 1.6; color: var(--text); background: var(--bg); } h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5em; line-height: 1.25; font-weight: 600; color: var(--text); } h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.25rem; } h4 { font-size: 1.1rem; } p { margin: 0 0 1rem; } a { color: var(--link); text-decoration: none; } a:hover { color: var(--link-hover); text-decoration: underline; } code, pre, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; } code { background: var(--bg-neutral); padding: 0.1em 0.35em; border-radius: var(--radius-sm); } pre { background: var(--bg-neutral); padding: 1rem; border-radius: var(--radius); overflow-x: auto; } hr { border: 0; border-top: 1px solid var(--border); margin: 1.5rem 0; } img { max-width: 100%; height: auto; } /* A11y: Bewegung reduzieren, wenn der Nutzer das auf OS-Ebene wuenscht. Greift global, auch fuer die Transitions in buttons/forms. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } } /* Layout-Container */ .ds-container { width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: 1.25rem; } .ds-stack > * + * { margin-top: var(--space); } .ds-muted { color: var(--text-muted); } /* === components/buttons.css === */ /* buttons.css - generische Button-Primitive (.btn + Varianten). */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; padding: 0.6em 1.2em; border: 1px solid transparent; border-radius: var(--radius-sm); font-family: inherit; font-size: 1rem; font-weight: 600; line-height: 1; cursor: pointer; text-decoration: none; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .btn:hover { text-decoration: none; } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; } /* Primary - Brand-Akzent, Text auf dunkel */ .btn-primary { background: var(--accent); color: var(--primary); } .btn-primary:hover { background: var(--accent-hover); color: var(--text-on-dark); } /* Secondary - Navy */ .btn-secondary { background: var(--secondary); color: var(--text-on-dark); } .btn-secondary:hover { background: var(--primary-hover); } /* Ghost - nur Rahmen */ .btn-ghost { background: transparent; border-color: var(--border-strong); color: var(--text); } .btn-ghost:hover { background: var(--bg-light); } /* Danger */ .btn-danger { background: var(--danger); color: var(--text-on-dark); } .btn-danger:hover { filter: brightness(0.92); } /* Groessen */ .btn-sm { padding: 0.4em 0.8em; font-size: 0.875rem; } .btn-lg { padding: 0.8em 1.6em; font-size: 1.125rem; } /* === components/forms.css === */ /* forms.css - generische Formular-Primitive. */ .ds-field { margin-bottom: 1rem; } .ds-label { display: block; margin-bottom: 0.35rem; font-weight: 600; font-size: 0.9rem; color: var(--text); } .ds-input, .ds-select, .ds-textarea { display: block; width: 100%; padding: 0.6em 0.8em; font-family: inherit; font-size: 1rem; color: var(--text); background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .ds-textarea { min-height: 7rem; resize: vertical; } .ds-input:focus, .ds-select:focus, .ds-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--success-soft); } .ds-input:disabled, .ds-select:disabled, .ds-textarea:disabled { background: var(--bg-neutral); opacity: 0.7; cursor: not-allowed; } .ds-input[aria-invalid="true"], .ds-textarea[aria-invalid="true"] { border-color: var(--danger); } .ds-hint { margin-top: 0.3rem; font-size: 0.85rem; color: var(--text-muted); } .ds-error { margin-top: 0.3rem; font-size: 0.85rem; color: var(--danger); } /* === components/cards.css === */ /* cards.css - generischer Card-Container. */ .ds-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 1.25rem 1.5rem; } .ds-card-header { margin: -1.25rem -1.5rem 1rem; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); font-weight: 600; } .ds-card-footer { margin: 1rem -1.5rem -1.25rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border); } .ds-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; } /* === components/tables.css === */ /* tables.css - generische Tabelle. */ .ds-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; } .ds-table th, .ds-table td { padding: 0.65rem 0.85rem; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; } .ds-table thead th { background: var(--bg-light); font-weight: 600; color: var(--text); border-bottom: 1px solid var(--border-strong); } .ds-table tbody tr:hover { background: var(--bg-light); } .ds-table-striped tbody tr:nth-child(even) { background: var(--bg-light); } /* Horizontal scrollbarer Wrapper fuer schmale Viewports */ .ds-table-wrap { width: 100%; overflow-x: auto; } /* === components/alerts.css === */ /* alerts.css - Callouts / Statusmeldungen. */ .ds-alert { border: 1px solid var(--border-strong); border-left-width: 4px; border-radius: var(--radius-sm); padding: 0.85rem 1rem; background: var(--bg-light); color: var(--text); } .ds-alert + .ds-alert { margin-top: 0.75rem; } .ds-alert-title { font-weight: 600; margin-bottom: 0.2rem; } .ds-alert-success { border-left-color: var(--success); background: var(--success-soft); } .ds-alert-warning { border-left-color: var(--warning); background: rgba(230, 126, 34, 0.12); } .ds-alert-danger { border-left-color: var(--danger); background: rgba(185, 28, 28, 0.10); } .ds-alert-info { border-left-color: var(--secondary); background: rgba(35, 73, 114, 0.10); } /* === components/pills.css === */ /* pills.css - Pills / Badges fuer kurze Status- oder Kategorie-Labels. */ .ds-pill { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.2em 0.7em; border-radius: 999px; font-size: 0.8rem; font-weight: 600; line-height: 1.4; background: var(--bg-neutral); color: var(--text); } .ds-pill-accent { background: var(--success-soft); color: var(--accent-text); } .ds-pill-success { background: var(--success-soft); color: var(--accent-text); } .ds-pill-warning { background: rgba(230, 126, 34, 0.15); color: var(--warning); } .ds-pill-danger { background: rgba(185, 28, 28, 0.12); color: var(--danger); } .ds-pill-info { background: rgba(35, 73, 114, 0.12); color: var(--secondary); }