/* * SPDX-License-Identifier: Apache-2.0 * SPDX-FileCopyrightText: 2026 ndaal Gesellschaft für Sicherheit in der Informationstechnik mbH & Co KG, Cologne * SPDX-FileCopyrightText: Author: Pierre Gronau */ /* ndaal design tokens — v1.1.0 * Every colour pair carries its measured contrast ratio in a comment. * Do not add a token without measuring it (assets/check-contrast.py). */ :root { color-scheme: light dark; /* ---- Surfaces (light) ---- */ --ndaal-bg: #FFFFFF; --ndaal-surface: #F8FAFC; --ndaal-surface-raised: #FFFFFF; /* ---- Brand and semantic (light) ---- */ --ndaal-primary: #0A4DA6; /* 8.00:1 on bg, 7.65:1 on surface */ --ndaal-primary-hover: #083D85; /* 10.41:1 / 9.95:1 */ --ndaal-secondary: #475569; /* 7.58:1 / 7.24:1 — meets 1.4.6 AAA */ --ndaal-accent: #047857; /* 5.48:1 / 5.24:1 — replaces #059669 (3.77:1, failed AA) */ --ndaal-warning: #B45309; /* 5.02:1 / 4.80:1 */ --ndaal-danger: #B91C1C; /* 6.47:1 / 6.18:1 */ --ndaal-danger-hover: #991B1B; --ndaal-info: #0369A1; /* 5.93:1 / 5.67:1 */ /* ---- Text (light) ---- */ --ndaal-text-primary: #0F172A; /* 17.85:1 on bg */ --ndaal-text-secondary: #475569; /* 7.58:1 */ --ndaal-text-muted: #64748B; /* 4.76:1 — never for essential information */ --ndaal-text-disabled: #64748B; /* 4.55:1 on surface — use instead of opacity */ --ndaal-text-on-primary: #FFFFFF; /* ---- Borders (light) ---- * interactive: boundary of a control. Must meet 1.4.11 (>= 3:1). * decorative: dividers only. Never a control boundary. */ --ndaal-border-interactive: #84909F; /* 3.25:1 on bg, 3.10:1 on surface */ --ndaal-border-decorative: #CBD5E1; /* 1.48:1 — decorative only */ /* ---- Focus ring (dual, contrast-safe on any surface) ---- */ --ndaal-focus-inner: #0B1220; --ndaal-focus-outer: #FFFFFF; /* ---- Status backgrounds (light) ---- */ --ndaal-status-ok-bg: #F0FDF4; --ndaal-status-ok-fg: #15803D; /* 4.79:1 */ --ndaal-status-info-bg: #EFF6FF; --ndaal-status-info-fg: #0369A1; /* 5.45:1 */ --ndaal-status-warn-bg: #FFF7ED; --ndaal-status-warn-fg: #B45309; /* 4.73:1 */ --ndaal-status-med-bg: #FFFBEB; --ndaal-status-med-fg: #A16207; /* 4.75:1 */ --ndaal-status-crit-bg: #FEF2F2; --ndaal-status-crit-fg: #B91C1C; /* 5.91:1 */ --ndaal-status-neutral-bg: #F8FAFC; --ndaal-status-neutral-fg: #475569; /* 7.24:1 */ /* ---- Typography ---- */ --ndaal-font-sans: 'Roboto', 'Segoe UI', system-ui, -apple-system, sans-serif; --ndaal-font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; --ndaal-text-micro: 0.8125rem; /* 13px — floor */ --ndaal-text-sm: 0.875rem; /* 14px */ --ndaal-text-base: 1rem; /* 16px */ --ndaal-text-lg: 1.125rem; --ndaal-text-xl: 1.25rem; --ndaal-text-2xl: 1.5rem; --ndaal-text-3xl: 2rem; --ndaal-leading-tight: 1.25; --ndaal-leading-base: 1.6; /* ---- Spacing (4px base) ---- */ --ndaal-space-1: 0.25rem; --ndaal-space-2: 0.5rem; --ndaal-space-3: 0.75rem; --ndaal-space-4: 1rem; --ndaal-space-6: 1.5rem; --ndaal-space-8: 2rem; --ndaal-space-12: 3rem; /* ---- Sizing ---- */ --ndaal-target-min: 44px; /* ndaal baseline; WCAG 2.5.8 requires 24px */ --ndaal-container: 80rem; /* 1280px */ --ndaal-sticky-offset: 0px; /* set by the layout; used for scroll-padding (2.4.11) */ /* ---- Radius ---- */ --ndaal-radius-sm: 2px; --ndaal-radius-md: 6px; --ndaal-radius-lg: 12px; /* ---- Elevation ---- */ --ndaal-shadow-sm: 0 1px 2px rgb(15 23 42 / 0.08); --ndaal-shadow-md: 0 4px 12px rgb(15 23 42 / 0.10); --ndaal-backdrop: rgb(11 18 32 / 0.6); /* ---- Layering ---- */ --ndaal-z-base: 0; --ndaal-z-sticky: 100; --ndaal-z-overlay: 200; --ndaal-z-dialog: 300; --ndaal-z-toast: 400; /* ---- Breakpoints (reference values for container queries / JS) ---- */ --ndaal-bp-sm: 40rem; /* 640px */ --ndaal-bp-md: 64rem; /* 1024px */ --ndaal-bp-lg: 80rem; /* 1280px */ /* ---- Motion ---- */ --ndaal-transition-fast: 150ms ease; --ndaal-transition-base: 200ms ease; --ndaal-transition-slow: 300ms ease; } /* ---- Dark theme ---- * Bound to the OS preference and to an explicit [data-theme] override. * Text is #E2E8F0 rather than pure white: #FFFFFF on a near-black surface * produces halation for many readers. */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --ndaal-bg: #0B1220; --ndaal-surface: #131C2E; --ndaal-surface-raised: #1B2740; --ndaal-primary: #7DB3FF; /* 8.71:1 on bg, 7.92:1 on surface */ --ndaal-primary-hover: #A5C9FF; --ndaal-secondary: #CBD5E1; /* 12.61:1 */ --ndaal-accent: #34D399; /* 9.74:1 */ --ndaal-warning: #FBBF24; /* 11.22:1 */ --ndaal-danger: #FCA5A5; /* 9.86:1 */ --ndaal-info: #7DD3FC; /* 11.23:1 */ --ndaal-text-primary: #E2E8F0; /* 15.19:1 */ --ndaal-text-secondary: #CBD5E1; /* 12.61:1 */ --ndaal-text-muted: #94A3B8; /* 7.30:1 */ --ndaal-text-disabled: #94A3B8; /* 6.64:1 on surface */ --ndaal-text-on-primary: #0B1220; --ndaal-border-interactive: #64748B; /* 3.93:1 on bg, 3.58:1 on surface */ --ndaal-border-decorative: #334155; /* 1.81:1 — decorative only */ --ndaal-focus-inner: #FFFFFF; --ndaal-focus-outer: #0B1220; --ndaal-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.5); --ndaal-shadow-md: 0 4px 12px rgb(0 0 0 / 0.6); --ndaal-backdrop: rgb(0 0 0 / 0.7); } } /* Explicit override, same values. Duplicate the block in the build step or use a * preprocessor — kept short here for readability. */ :root[data-theme='dark'] { --ndaal-bg: #0B1220; --ndaal-surface: #131C2E; --ndaal-surface-raised: #1B2740; --ndaal-primary: #7DB3FF; --ndaal-primary-hover: #A5C9FF; --ndaal-secondary: #CBD5E1; --ndaal-accent: #34D399; --ndaal-warning: #FBBF24; --ndaal-danger: #FCA5A5; --ndaal-info: #7DD3FC; --ndaal-text-primary: #E2E8F0; --ndaal-text-secondary: #CBD5E1; --ndaal-text-muted: #94A3B8; --ndaal-text-disabled: #94A3B8; --ndaal-text-on-primary: #0B1220; --ndaal-border-interactive: #64748B; --ndaal-border-decorative: #334155; --ndaal-focus-inner: #FFFFFF; --ndaal-focus-outer: #0B1220; --ndaal-backdrop: rgb(0 0 0 / 0.7); } /* ---- Focus: one rule, globally. Do not restyle per component. ---- */ :focus-visible { outline: 3px solid var(--ndaal-focus-inner); outline-offset: 2px; box-shadow: 0 0 0 6px var(--ndaal-focus-outer); border-radius: var(--ndaal-radius-sm); } /* Focus must not be hidden behind sticky chrome (2.4.11). */ :root { scroll-padding-block-start: var(--ndaal-sticky-offset); } /* ---- Reduced motion: handled centrally. No per-component media queries. ---- */ @media (prefers-reduced-motion: reduce) { :root { --ndaal-transition-fast: 0ms; --ndaal-transition-base: 0ms; --ndaal-transition-slow: 0ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ---- Forced colours / Windows High Contrast ---- */ @media (forced-colors: active) { :focus-visible { outline: 3px solid Highlight; outline-offset: 2px; box-shadow: none; } .ndaal-badge, .ndaal-severity-bar, .ndaal-chip { border: 1px solid CanvasText; forced-color-adjust: none; } } /* ---- German compounds must not force horizontal scrolling (1.4.10) ---- */ :lang(de) .prose, :lang(de) td, :lang(de) th { hyphens: auto; } .prose, td, th, .ndaal-badge, .ndaal-chip { overflow-wrap: break-word; } /* ---- Minimum target size. Inline links in prose are exempt. ---- */ button, [role='button'], input[type='checkbox'], input[type='radio'], select, .ndaal-icon-button { min-inline-size: var(--ndaal-target-min); min-block-size: var(--ndaal-target-min); } .prose a { min-block-size: auto; }