/** * ========================================================================== * DESIGN TOKENS -- Datanomics Privacy Platform * ========================================================================== * * Single source of truth for all color tokens. Uses semantic naming with * --dp-* prefix (Datanomics Platform). References --pp-* palette variables * so multi-palette system continues to work. * * Import order: * 1. variables.css <-- THIS FILE (tokens) * 2. motion.css (animation/transition timing) * 3. apple-design-tokens.css (spacing, radius, elevation, layout) * 4. color-palettes.css (palette overrides for --pp-*) * 5. app.css (composition, fonts, layout) * 6. dark-mode.css (component dark mode rules) * * Convention: * --dp-surface-* Surface/background tokens * --dp-text-* Text/foreground tokens * --dp-border-* Border tokens * --dp-interactive-* Button/control tokens * --dp-status-* Success/warning/danger/info * --dp-nav-* Sidebar navigation * --dp-navbar-* Top navigation bar * --dp-chart-* Data visualization * * WCAG 2.2 AA: All text-on-background pairs verified. * See docs/design/DESIGN_SYSTEM.md (Part II — Design Tokens) for contrast ratios. */ /* ========================================================================== LIGHT MODE (Default) ========================================================================== */ :root { /* ------------------------------------------------------------------ SURFACE TOKENS Background colors for containers, pages, cards, overlays. Hierarchy: page < primary < elevated (closer to user = whiter) ------------------------------------------------------------------ */ --dp-surface-page: var(--pp-bg-body, #F8FAFB); --dp-surface-primary: var(--pp-bg-surface, #FFFFFF); --dp-surface-secondary: var(--pp-card-header-bg, #F8FAFB); --dp-surface-elevated: var(--pp-bg-surface-elevated, #FFFFFF); --dp-surface-overlay: var(--pp-modal-backdrop, rgba(0, 0, 0, 0.4)); --dp-surface-loading: rgba(255, 255, 255, 0.8); /* Light loading overlay — adapts to dark mode */ --dp-surface-hover: var(--pp-bg-hover, #F1F5F7); --dp-surface-active: var(--pp-bg-active, #E2E8EE); --dp-surface-selected: rgba(var(--pp-primary-rgb, 0, 122, 130), 0.06); --dp-surface-brand-subtle: var(--pp-palette-50, #E6FAFB); --dp-surface-input: rgba(0, 0, 0, 0.04); --dp-surface-input-focus: #FFFFFF; /* ------------------------------------------------------------------ TEXT TOKENS Foreground colors for all text content. primary > secondary > tertiary > disabled ------------------------------------------------------------------ */ --dp-text-primary: var(--pp-text-primary, #1E293B); --dp-text-secondary: var(--pp-text-secondary, #5B6B80); --dp-text-tertiary: var(--pp-text-muted, #94A3B8); /* DECORATIVE/PLACEHOLDER only — intentionally below AA contrast. Do NOT use for readable body text. */ --dp-text-muted: #617086; /* Readable muted text — 4.86:1 on white. Use for timestamps, descriptions, secondary info. Maps to Bootstrap .text-muted */ --dp-text-disabled: #CBD5DF; --dp-text-inverse: #FFFFFF; --dp-text-link: var(--pp-text-link, #007A82); --dp-text-link-hover: var(--pp-primary-hover, #006970); --dp-text-on-primary: #FFFFFF; --dp-text-on-danger: #FFFFFF; --dp-text-on-warning: #1E293B; /* ------------------------------------------------------------------ BORDER TOKENS Strokes, dividers, focus rings. ------------------------------------------------------------------ */ --dp-border-default: var(--pp-border-color, #E2E8EE); --dp-border-subtle: var(--pp-border-color-light, #F1F5F7); --dp-border-strong: var(--pp-border-color-dark, #CBD5DF); --dp-border-focus: rgba(var(--pp-primary-rgb, 0, 122, 130), 0.4); --dp-border-interactive: transparent; --dp-border-interactive-focus: rgba(var(--pp-primary-rgb, 0, 122, 130), 0.4); --dp-border-error: #DC2626; --dp-border-separator: rgba(0, 0, 0, 0.06); /* ------------------------------------------------------------------ INTERACTIVE TOKENS (Buttons, Controls) Primary, secondary, destructive, ghost, accent variants. Each has default, hover, active, and disabled states. ------------------------------------------------------------------ */ /* Primary button */ --dp-interactive-primary: var(--pp-primary, #007A82); --dp-interactive-primary-hover: var(--pp-primary-hover, #006970); --dp-interactive-primary-active: #005A60; --dp-interactive-primary-disabled: #A0E1E3; /* Secondary button (filled white, not outlined -- Apple HIG) */ --dp-interactive-secondary: #FFFFFF; --dp-interactive-secondary-hover: #F1F5F7; /* Destructive button */ --dp-interactive-destructive: #DC2626; --dp-interactive-destructive-hover: #B91C1C; /* Ghost button (transparent, text-only) */ --dp-interactive-ghost: transparent; --dp-interactive-ghost-hover: rgba(0, 0, 0, 0.04); /* Accent / CTA button (Electric Yellow) */ --dp-interactive-accent: #FFCA00; --dp-interactive-accent-hover: #FFD426; /* ------------------------------------------------------------------ STATUS TOKENS Success, warning, danger, info -- each with text, bg, border. Light mode uses deeper hues (600-700) for text contrast on white. ------------------------------------------------------------------ */ /* Success */ --dp-status-success: #15803D; --dp-status-success-bg: #F0FDF4; --dp-status-success-border: #BBF7D0; /* Warning */ --dp-status-warning: #B45309; --dp-status-warning-bg: #FFFBEB; --dp-status-warning-border: #FDE68A; /* Danger */ --dp-status-danger: #B91C1C; --dp-status-danger-bg: #FEF2F2; --dp-status-danger-border: #FECACA; /* Info */ --dp-status-info: #0369A1; --dp-status-info-bg: #F0F9FF; --dp-status-info-border: #BAE6FD; /* ------------------------------------------------------------------ RISK LEVEL TOKENS Privacy-specific risk classifications. Always pair with icon + label (never color-only). ------------------------------------------------------------------ */ --dp-risk-low: #10B981; --dp-risk-medium: #F59E0B; --dp-risk-high: #EF4444; --dp-risk-critical: #DC2626; /* ------------------------------------------------------------------ DATA CLASSIFICATION TOKENS Data sensitivity labels. Use with badge + icon. ------------------------------------------------------------------ */ --dp-classification-public: #94A3B8; --dp-classification-internal: #0284C7; --dp-classification-confidential: #D97706; --dp-classification-restricted: #DC2626; /* ------------------------------------------------------------------ NAVIGATION TOKENS (Sidebar) ------------------------------------------------------------------ */ --dp-nav-bg: var(--pp-sidebar-bg, #FFFFFF); --dp-nav-text: var(--pp-sidebar-text, #1E293B); --dp-nav-text-muted: #94A3B8; --dp-nav-hover: var(--pp-sidebar-hover-bg, #F1F5F7); --dp-nav-active-bg: var(--pp-primary, #007A82); --dp-nav-active-text: #FFFFFF; --dp-nav-divider: #E2E8EE; --dp-nav-section-label: rgba(0, 0, 0, 0.35); /* ------------------------------------------------------------------ NAVBAR TOKENS (Top Bar) ------------------------------------------------------------------ */ --dp-navbar-bg: var(--pp-navbar-bg, #FFFFFF); --dp-navbar-text: var(--pp-navbar-text, #1E293B); --dp-navbar-border: rgba(0, 0, 0, 0.08); /* ------------------------------------------------------------------ DATA VISUALIZATION TOKENS 9-color categorical palette for charts + infrastructure tokens. Palette "Datanomics Data-Viz v2.3" — @ui-ux-designer 2026-07-30, signed off with 3 WARN exceptions (conditional — see the expiry conditions in the allowlist). Separation metric: CIELAB ΔE2000 on min(deuteranopia, protanopia), computed from the 8-bit quantised simulated colour. Bands: FAIL <5 · WARN 5-8 · PASS >=8. All 18 swatches are >=3:1 on both surfaces of their theme (WCAG SC 1.4.11); lowest is slot 2 at 3.41:1 (light) / slot 5 at 3.61:1 (dark). Across the 72 pair measurements: 0 FAIL, 3 WARN, 69 PASS. The 3 signed WARN exceptions are all slot 9 vs slot 4/6, the structurally most constrained slots: dark 4<->9 at ΔE2000 6.1 (weakest pair in the table), light 6<->9 at 7.2, dark 6<->9 at 7.4. Those 3 signatures are CONDITIONAL on: (H) a chart with >9 series folds the tail into 'Other'; slot 9 carries a direct series or tooltip label whenever it is co-plotted with slot 4 or 6 (legend alone is not enough); (G) none of these pairs encodes two semantically opposed values; and — since slot 6 means 'danger' — slot 6 and slot 9 never appear together in a status chart. They VOID AUTOMATICALLY if (a) any chart renders >=9 series at once, or (b) slot 4, 6 or 9 is given a fixed semantic meaning (as universal-consent.css once did with slots 3/4/6/7). On expiry the palette needs a fresh @ui-ux-designer decision before shipping. Do not retune these hex locally. Do not trust these figures over the artefact: every pair (36 per theme x both deficiencies, unconditionally) is regenerated by tools/scripts/check-chart-token-contrast.py into tools/data/chart-token-contrast-allowlist.txt (use --check to verify without rewriting it) — read that file for current numbers, rationales and BOUNDARY flags. These 9 tokens are categorical series colours ONLY — never use them as text colour, and always pair them with a text label/legend (WCAG 1.4.1). Definition layer: literal hex is intentional here; consumers must use var(--dp-chart-N). Slots 4 and 6 coincide with --dp-status-warning/--dp-status-danger by value only — keep them as literal hex, do NOT alias to the status tokens (a categorical series must not change colour whenever the semantic status scale is retuned). Must stay byte-identical to BlazorFrontend/wwwroot/css/variables.css (same 18 values). ------------------------------------------------------------------ */ --dp-chart-1: #176B66; /* Governance Teal */ --dp-chart-2: #5F84B8; /* Steel Blue */ --dp-chart-3: #6B5B95; /* Muted Violet */ --dp-chart-4: #9A650C; /* Muted Amber */ --dp-chart-5: #8F3C17; /* Burnt Sienna */ --dp-chart-6: #B34045; /* Alert Red */ --dp-chart-7: #6F7F92; /* Slate Neutral */ --dp-chart-8: #5E2A44; /* Deep Plum */ --dp-chart-9: #4E6438; /* Olive-Sage, not pure olive: the +b* axis after CVD already holds slots 4/5/6, so slot 9 is shifted toward green */ --dp-chart-grid: #E2E8EE; --dp-chart-axis: #94A3B8; --dp-chart-tooltip-bg: #FFFFFF; --dp-chart-tooltip-border: #E2E8EE; --dp-chart-tooltip-text: #1E293B; /* ECharts-specific tokens (label, empty state, emphasis, datazoom, loading) */ --dp-chart-label: #FFFFFF; --dp-chart-label-outside: var(--dp-text-secondary); --dp-chart-empty-bg: var(--dp-surface-secondary); --dp-chart-empty-text: var(--dp-text-tertiary); --dp-chart-blur-opacity: 0.25; --dp-chart-datazoom-bg: var(--dp-surface-secondary); --dp-chart-datazoom-selected: var(--dp-interactive-primary); --dp-chart-loading-text: var(--dp-text-secondary); --dp-chart-loading-spinner: var(--dp-interactive-primary); --dp-chart-loading-mask-bg: var(--dp-surface-loading); /* ------------------------------------------------------------------ REGULATORY BADGE TOKENS Used for compliance/regulatory framework badges (e.g., NĐ 356/2025). WCAG AA verified: #92400E on #FEF3C7 = 6.4:1 (light mode). Always pair with an icon or text label — never color-only. ------------------------------------------------------------------ */ --dp-badge-regulatory-bg: #FEF3C7; --dp-badge-regulatory-fg: #92400E; --dp-badge-regulatory-border: #FDE68A; /* ------------------------------------------------------------------ AUDIT SEVERITY BADGE TOKENS (Task #6 — PrivacyNotice Audit Log) Info = brand teal (neutral/informational) Notice = ocean blue (slightly more prominent than Info) Warning maps to --dp-status-warning-* (already defined) Error maps to --dp-status-danger-* (already defined) WCAG AA verified: Info: #005B61 on #E6FAFB = 7.1:1 Notice: #0C4A6E on #F0F9FF = 8.0:1 ------------------------------------------------------------------ */ --dp-audit-severity-info-bg: #E6FAFB; --dp-audit-severity-info-fg: #005B61; --dp-audit-severity-info-border: #99E4E8; --dp-audit-severity-notice-bg: #F0F9FF; --dp-audit-severity-notice-fg: #0C4A6E; --dp-audit-severity-notice-border: #BAE6FD; /* ------------------------------------------------------------------ AUDIT DIFF TOKENS (Task #6 — before/after inline diff view) Add = green, Remove = red, Change = amber WCAG AA verified on white background. ------------------------------------------------------------------ */ --dp-audit-diff-add-bg: #F0FDF4; --dp-audit-diff-add-fg: #15803D; --dp-audit-diff-remove-bg: #FEF2F2; --dp-audit-diff-remove-fg: #B91C1C; --dp-audit-diff-change-bg: #FFFBEB; --dp-audit-diff-change-fg: #B45309; /* ------------------------------------------------------------------ SHADOW TOKENS Used for drawer/panel elevation. --dp-shadow-drawer: the full shadow value for slide-in drawers. ------------------------------------------------------------------ */ --dp-shadow-drawer: -4px 0 24px rgba(0, 0, 0, 0.12); /* ------------------------------------------------------------------ SURFACE OVERLAY SUBTLE Very low-opacity overlay for hover/focus states on colored surfaces (e.g. integrity banner re-verify button). Light mode: near-black at 6% — matches system shadow convention. ------------------------------------------------------------------ */ --dp-surface-overlay-subtle: rgba(0, 0, 0, 0.06); } /* ========================================================================== DARK MODE Activated by [data-bs-theme="dark"] on (Bootstrap 5.3+ convention). Surfaces get LIGHTER as they rise toward the user (Apple dark mode). Colors shift to lighter, desaturated variants for reduced eye strain. ========================================================================== */ [data-bs-theme="dark"] { /* --- Surfaces --- */ --dp-surface-page: var(--pp-bg-body, #0F172A); --dp-surface-primary: var(--pp-bg-surface, #1E293B); --dp-surface-secondary: var(--pp-card-header-bg, #334155); --dp-surface-elevated: var(--pp-bg-surface-elevated, #334155); --dp-surface-overlay: var(--pp-modal-backdrop, rgba(0, 0, 0, 0.7)); --dp-surface-loading: rgba(30, 41, 59, 0.85); /* Dark loading overlay — #1E293B at 85% */ --dp-surface-hover: var(--pp-bg-hover, #334155); --dp-surface-active: var(--pp-bg-active, #475569); --dp-surface-selected: rgba(var(--pp-primary-rgb, 51, 214, 219), 0.12); --dp-surface-brand-subtle: rgba(var(--pp-primary-rgb, 51, 214, 219), 0.08); --dp-surface-input: rgba(255, 255, 255, 0.06); --dp-surface-input-focus: var(--pp-bg-surface, #1E293B); /* --- Text --- */ --dp-text-primary: var(--pp-text-primary, #F1F5F7); --dp-text-secondary: var(--pp-text-secondary, #CBD5DF); --dp-text-tertiary: var(--pp-text-muted, #64748B); --dp-text-muted: #94A3B8; /* Readable muted text — 6.0:1 on #1E293B. Bootstrap .text-muted maps here. */ --dp-text-disabled: #475569; --dp-text-inverse: #0F172A; --dp-text-link: var(--pp-text-link, #33D6DB); --dp-text-link-hover: var(--pp-primary-hover, #66E0E4); --dp-text-on-primary: #0F172A; /* Dark text on bright cyan primary — 10.5:1 on #33D6DB */ --dp-text-on-danger: #FFFFFF; --dp-text-on-warning: #1E293B; /* --- Borders --- */ --dp-border-default: var(--pp-border-color, #334155); --dp-border-subtle: var(--pp-border-color-light, #1E293B); --dp-border-strong: var(--pp-border-color-dark, #64748B); --dp-border-focus: rgba(var(--pp-primary-rgb, 51, 214, 219), 0.5); --dp-border-interactive: transparent; --dp-border-interactive-focus: rgba(var(--pp-primary-rgb, 51, 214, 219), 0.5); --dp-border-error: #F87171; --dp-border-separator: rgba(255, 255, 255, 0.06); /* --- Interactive --- */ --dp-interactive-primary: var(--pp-primary, #33D6DB); --dp-interactive-primary-hover: var(--pp-primary-hover, #66E0E4); --dp-interactive-primary-active: #019FA4; --dp-interactive-primary-disabled: #334155; --dp-interactive-secondary: var(--pp-bg-surface, #1E293B); --dp-interactive-secondary-hover: var(--pp-bg-hover, #334155); --dp-interactive-destructive: #DC2626; --dp-interactive-destructive-hover: #B91C1C; --dp-interactive-ghost: transparent; --dp-interactive-ghost-hover: rgba(255, 255, 255, 0.06); --dp-interactive-accent: #FFCA00; --dp-interactive-accent-hover: #FFD426; /* --- Status --- */ --dp-status-success: #4ADE80; --dp-status-success-bg: rgba(74, 222, 128, 0.12); --dp-status-success-border: rgba(74, 222, 128, 0.24); --dp-status-warning: #FBBF24; --dp-status-warning-bg: rgba(251, 191, 36, 0.12); --dp-status-warning-border: rgba(251, 191, 36, 0.24); --dp-status-danger: #F87171; --dp-status-danger-bg: rgba(248, 113, 113, 0.12); --dp-status-danger-border: rgba(248, 113, 113, 0.24); --dp-status-info: #38BDF8; --dp-status-info-bg: rgba(56, 189, 248, 0.12); --dp-status-info-border: rgba(56, 189, 248, 0.24); /* --- Risk --- */ --dp-risk-low: #34D399; --dp-risk-medium: #FBBF24; --dp-risk-high: #F87171; --dp-risk-critical: #EF4444; /* --- Data Classification --- */ --dp-classification-public: #CBD5E1; --dp-classification-internal: #38BDF8; --dp-classification-confidential: #FBBF24; --dp-classification-restricted: #F87171; /* --- Navigation --- */ --dp-nav-bg: var(--pp-sidebar-bg, #1E293B); --dp-nav-text: var(--pp-sidebar-text, #F1F5F7); --dp-nav-text-muted: #64748B; --dp-nav-hover: var(--pp-sidebar-hover-bg, #334155); --dp-nav-active-bg: var(--pp-primary, #33D6DB); --dp-nav-active-text: #0F172A; --dp-nav-divider: #334155; --dp-nav-section-label: rgba(255, 255, 255, 0.35); /* --- Navbar --- */ --dp-navbar-bg: var(--pp-navbar-bg, #1E293B); --dp-navbar-text: var(--pp-navbar-text, #F1F5F7); --dp-navbar-border: rgba(255, 255, 255, 0.08); /* --- Charts / Data Viz — dark half of "Datanomics Data-Viz v2.3" (see light block) --- */ --dp-chart-1: #78B8B1; /* Governance Teal */ --dp-chart-2: #4A87C8; /* Steel Blue */ --dp-chart-3: #A99BC4; /* Muted Violet */ --dp-chart-4: #D6A34B; /* Muted Amber */ --dp-chart-5: #B85C2E; /* Burnt Sienna */ --dp-chart-6: #E77B7E; /* Alert Red */ --dp-chart-7: #C3D2E4; /* Slate Neutral */ --dp-chart-8: #B15C86; /* Muted Magenta */ --dp-chart-9: #8B9C52; /* Muted Olive */ --dp-chart-grid: #334155; --dp-chart-axis: #64748B; --dp-chart-tooltip-bg: #1E293B; --dp-chart-tooltip-border: #475569; --dp-chart-tooltip-text: #F1F5F7; /* ECharts-specific tokens */ --dp-chart-label: #FFFFFF; --dp-chart-label-outside: var(--dp-text-secondary); --dp-chart-empty-bg: var(--dp-surface-secondary); --dp-chart-empty-text: var(--dp-text-tertiary); --dp-chart-blur-opacity: 0.2; --dp-chart-datazoom-bg: var(--dp-surface-secondary); --dp-chart-datazoom-selected: var(--dp-interactive-primary); --dp-chart-loading-text: var(--dp-text-secondary); --dp-chart-loading-spinner: var(--dp-interactive-primary); --dp-chart-loading-mask-bg: var(--dp-surface-loading); /* --- Regulatory Badge (dark mode) --- */ /* WCAG AA verified: #FBBF24 on effective dark badge bg ≈ 6.6:1 */ --dp-badge-regulatory-bg: rgba(251, 191, 36, 0.15); --dp-badge-regulatory-fg: #FBBF24; --dp-badge-regulatory-border: rgba(251, 191, 36, 0.25); /* --- Audit Severity Badges (dark mode) --- */ --dp-audit-severity-info-bg: rgba(51, 214, 219, 0.12); --dp-audit-severity-info-fg: #33D6DB; --dp-audit-severity-info-border: rgba(51, 214, 219, 0.25); --dp-audit-severity-notice-bg: rgba(56, 189, 248, 0.12); --dp-audit-severity-notice-fg: #38BDF8; --dp-audit-severity-notice-border: rgba(56, 189, 248, 0.25); /* --- Audit Diff (dark mode) --- */ --dp-audit-diff-add-bg: rgba(74, 222, 128, 0.10); --dp-audit-diff-add-fg: #4ADE80; --dp-audit-diff-remove-bg: rgba(248, 113, 113, 0.10); --dp-audit-diff-remove-fg: #F87171; --dp-audit-diff-change-bg: rgba(251, 191, 36, 0.10); --dp-audit-diff-change-fg: #FBBF24; /* --- Shadow tokens (dark mode) --- */ --dp-shadow-drawer: -4px 0 24px rgba(0, 0, 0, 0.5); /* --- Surface overlay subtle (dark mode) --- */ --dp-surface-overlay-subtle: rgba(255, 255, 255, 0.08); } /* ========================================================================== BOOTSTRAP BRIDGE (supplementary) The authoritative --bs-* bridge lives in color-palettes.css (loads last). This block ONLY sets Bootstrap 5.3 semantic tokens that the palette bridge does not cover. Do NOT duplicate --bs-primary, --bs-success, etc. here. ========================================================================== */ body { --bs-emphasis-color: var(--dp-text-primary); --bs-secondary-color: var(--dp-text-secondary); --bs-tertiary-color: var(--dp-text-muted); /* Maps Bootstrap .text-muted to readable muted token (not decorative tertiary) */ } /* ========================================================================== HIGH CONTRAST PREFERENCE Stronger borders and increased separation for users who request it. ========================================================================== */ @media (prefers-contrast: more) { :root { --dp-border-default: #94A3B8; --dp-border-subtle: #CBD5DF; --dp-border-separator: rgba(0, 0, 0, 0.15); } [data-bs-theme="dark"] { --dp-border-default: #94A3B8; --dp-border-subtle: #64748B; --dp-border-separator: rgba(255, 255, 255, 0.15); } }