/* ============================================================================= SynapCTX design tokens — the single vocabulary every web surface speaks. ============================================================================= Extracted from console.synapctx.com's stylesheet, which is where they grew. A surface that references these names looks like SynapCTX; one that invents its own does not, however the bytes reach the browser. ONE DARK LAYER. Dark values hang off `:root[data-theme="dark"]` and nowhere else. There used to be two stacked layers — a ported ParliTrack layer keyed on `body.dark-theme` and the SynapCTX layer keyed on the attribute — and they had drifted into disagreeing about 12 tokens, the brand blue among them. That disagreement was LIVE and visible: `--md-sys-color-primary` was #8AB4F8 on and #9ecaff on , so a rule reading the token directly and a rule going through a :root-level alias rendered two different blues in the same dark page. Measured on the deployed console: the filled button painted #9ecaff while body inherited #8AB4F8. Custom properties are substituted where they are DECLARED, so an alias declared at :root can never see a body-scoped override — that is the whole mechanism, and it makes a split palette unfixable by hand. The attribute layer won the merge because it already defined the shell that everything sits on (background #0e1116, the surface scale, the elevation scale, the graph palette) and because every :root-baked alias already resolved to it, so the most visible components did not move. CONSEQUENCE FOR EVERY CONSUMER: set `data-theme` on and nothing else. Do not add a body class. `light`, `dark` and `system` are the values; setting it on means it applies before exists, so there is no flash and no DOMContentLoaded dance. The OS-preference context is a GENERATED MIRROR of the same declarations, gated `:root:not([data-theme="light"])` so an explicit light choice still wins. The duplication exists because CSS cannot set an attribute; it is safe only because TestBothDarkContextsDeclareTheSameTokens fails when the two drift. A token's VALUE may change here. A token's NAME is a contract with every consumer — renaming one is a breaking change, so treat it as one. ============================================================================= */ :root { /* --- Primary --- */ --md-sys-color-primary: #1976D2; --md-sys-color-on-primary: #FFFFFF; --md-sys-color-primary-container: #E3F2FD; --md-sys-color-on-primary-container: #0D47A1; --md-sys-color-primary-rgb: 25, 118, 210; /* --- Secondary --- */ --md-sys-color-secondary: #5F6368; --md-sys-color-on-secondary: #FFFFFF; --md-sys-color-secondary-container: #F1F3F4; --md-sys-color-on-secondary-container: #3C4043; /* --- Tertiary (success / positive) --- */ --md-sys-color-tertiary: #4CAF50; --md-sys-color-on-tertiary: #FFFFFF; --md-sys-color-tertiary-container: #D7F8DA; --md-sys-color-on-tertiary-container: #003909; /* --- Error --- */ --md-sys-color-error: #BA1A1A; --md-sys-color-on-error: #FFFFFF; --md-sys-color-error-container: #FFDAD6; --md-sys-color-on-error-container: #410002; /* --- Warning --- */ --md-sys-color-warning: #FF9800; --md-sys-color-on-warning: #FFFFFF; --md-sys-color-warning-container: #FFF3E0; --md-sys-color-on-warning-container: #4E2700; /* --- Success (semantic alias of tertiary) --- */ --md-sys-color-success: #4CAF50; --md-sys-color-success-container: #D7F8DA; --md-sys-color-on-success-container: #003909; /* --- Surface --- */ --md-sys-color-surface: #FFFFFF; --md-sys-color-on-surface: #1C1B1F; --md-sys-color-surface-variant: #F5F5F5; --md-sys-color-on-surface-variant: #49454F; --md-sys-color-surface-container-lowest: #FFFFFF; /* #FAFBFE, not the Material baseline's #F7F2FA. That value is LAVENDER (green is its lowest channel) and it was the only purple surface in a blue-branded system — a console rule using it even commented "slight gray tint", which is what its author expected and not what they got. This matches surface-1 deliberately: two near-identical near-whites is worse than one shared value. */ --md-sys-color-surface-container-low: #FAFBFE; --md-sys-color-surface-container: #FFFFFF; --md-sys-color-surface-container-high: #F8F9FA; --md-sys-color-surface-container-highest: #F1F3F4; /* --- Inverse --- */ --md-sys-color-inverse-surface: #313033; /* #F5F6F8, not the baseline's #F4EFF4 — same lavender problem as surface-container-low. This is the text colour on the inverse surface, which the marketing site uses for CODE BLOCKS, so the tint showed up on the most scrutinised text on the page. */ --md-sys-color-inverse-on-surface: #F5F6F8; /* --- Outline --- */ --md-sys-color-outline: #79757F; --md-sys-color-outline-variant: #CAC4D0; /* --- Shadow --- */ --md-sys-color-shadow: #000000; --md-sys-color-shadow-opacity-light: 0.15; --md-sys-color-shadow-opacity-medium: 0.3; --md-sys-color-shadow-opacity-heavy: 0.45; /* ================================================================= 2. TYPOGRAPHY SCALE - Material Design 3 (complete) ================================================================= Every *-font-family here resolves to --font-sans, the ONE stack in this file (section 0 loads the face as "Roboto Flex"). These tokens shipped from the MD3 reference as a bare `'Roboto'` with no generic fallback — a family this app never serves, so every component that referenced a typescale family (tabs, textareas, selects, filter selects) resolved to whatever the OS happened to have: a static Roboto with different metrics on a machine that ships one, the UA default serif on a machine that does not. Meanwhile everything inheriting from body looked right, which is why this presented as "the tabs use the wrong font" rather than as a missing font. Fix it HERE, never at the call site: patching one component at a time is what left the tabs broken after the buttons and textareas were fixed. ================================================================= */ /* --- Display --- */ --md-sys-typescale-display-large-font-family: var(--font-sans); --md-sys-typescale-display-large-font-family-name: var(--font-sans); --md-sys-typescale-display-large-font-size: 57px; --md-sys-typescale-display-large-font-weight: 400; --md-sys-typescale-display-large-line-height: 64px; --md-sys-typescale-display-medium-font-family-name: var(--font-sans); --md-sys-typescale-display-medium-font-size: 45px; --md-sys-typescale-display-medium-font-weight: 400; --md-sys-typescale-display-medium-line-height: 52px; --md-sys-typescale-display-small-font-family-name: var(--font-sans); --md-sys-typescale-display-small-font-size: 36px; --md-sys-typescale-display-small-font-weight: 400; --md-sys-typescale-display-small-line-height: 44px; /* --- Headline --- */ --md-sys-typescale-headline-large-font-family: var(--font-sans); --md-sys-typescale-headline-large-font-family-name: var(--font-sans); --md-sys-typescale-headline-large-font-size: 32px; --md-sys-typescale-headline-large-font-weight: 400; --md-sys-typescale-headline-large-line-height: 40px; --md-sys-typescale-headline-medium-font-family-name: var(--font-sans); --md-sys-typescale-headline-medium-font-size: 28px; --md-sys-typescale-headline-medium-font-weight: 400; --md-sys-typescale-headline-medium-line-height: 36px; --md-sys-typescale-headline-small-font-family: var(--font-sans); --md-sys-typescale-headline-small-font-family-name: var(--font-sans); --md-sys-typescale-headline-small-font-size: 24px; --md-sys-typescale-headline-small-font-weight: 400; --md-sys-typescale-headline-small-line-height: 32px; --md-sys-typescale-headline-small-size: 24px; /* --- Title --- */ --md-sys-typescale-title-large-font-family: var(--font-sans); --md-sys-typescale-title-large-font-family-name: var(--font-sans); --md-sys-typescale-title-large-font-size: 22px; --md-sys-typescale-title-large-font-weight: 400; --md-sys-typescale-title-large-line-height: 28px; --md-sys-typescale-title-large-size: 22px; --md-sys-typescale-title-large-weight: 400; --md-sys-typescale-title-medium-font-family: var(--font-sans); --md-sys-typescale-title-medium-font-family-name: var(--font-sans); --md-sys-typescale-title-medium-font-size: 16px; --md-sys-typescale-title-medium-font-weight: 500; --md-sys-typescale-title-medium-line-height: 24px; --md-sys-typescale-title-medium-size: 16px; --md-sys-typescale-title-small-font-family-name: var(--font-sans); --md-sys-typescale-title-small-font-size: 14px; --md-sys-typescale-title-small-font-weight: 500; --md-sys-typescale-title-small-line-height: 20px; --md-sys-typescale-title-small-size: 14px; /* --- Body --- */ --md-sys-typescale-body-large-font-family: var(--font-sans); --md-sys-typescale-body-large-font-family-name: var(--font-sans); --md-sys-typescale-body-large-font-size: 16px; --md-sys-typescale-body-large-font-weight: 400; --md-sys-typescale-body-large-line-height: 24px; --md-sys-typescale-body-large-size: 16px; --md-sys-typescale-body-medium-font-family: var(--font-sans); --md-sys-typescale-body-medium-font-family-name: var(--font-sans); --md-sys-typescale-body-medium-font: 400 14px/20px var(--font-sans); --md-sys-typescale-body-medium-font-size: 14px; --md-sys-typescale-body-medium-font-weight: 400; --md-sys-typescale-body-medium-line-height: 20px; --md-sys-typescale-body-medium-size: 14px; --md-sys-typescale-body-small-font-family: var(--font-sans); --md-sys-typescale-body-small-font-family-name: var(--font-sans); --md-sys-typescale-body-small-font-size: 12px; --md-sys-typescale-body-small-font-weight: 400; --md-sys-typescale-body-small-line-height: 16px; --md-sys-typescale-body-small-size: 12px; /* --- Label --- */ --md-sys-typescale-label-large-font-family: var(--font-sans); --md-sys-typescale-label-large-font-family-name: var(--font-sans); --md-sys-typescale-label-large-font-size: 14px; --md-sys-typescale-label-large-font-weight: 500; --md-sys-typescale-label-large-line-height: 20px; --md-sys-typescale-label-large-size: 14px; /* Short-name aliases consumed by ported ParliTrack components (sct-tab, etc.) that reference `-weight`/`-family` rather than the `-font-*` names. Missing `-weight` left tabs rendering at the browser default weight. */ --md-sys-typescale-label-large-weight: 500; --md-sys-typescale-label-medium-font-family-name: var(--font-sans); --md-sys-typescale-label-medium-font-size: 12px; --md-sys-typescale-label-medium-font-weight: 500; --md-sys-typescale-label-medium-line-height: 16px; --md-sys-typescale-label-medium-size: 12px; --md-sys-typescale-label-small-font-family-name: var(--font-sans); --md-sys-typescale-label-small-font-size: 11px; --md-sys-typescale-label-small-font-weight: 500; --md-sys-typescale-label-small-line-height: 16px; --md-sys-typescale-label-small-size: 11px; /* ================================================================= 3. ELEVATION - Material Design 3 ================================================================= */ --md-sys-elevation-level0: 0px 0px 0px 0px rgba(0, 0, 0, 0); --md-sys-elevation-level1: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30); --md-sys-elevation-level2: 0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30); --md-sys-elevation-level3: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.30); --md-sys-elevation-level4: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px 0px rgba(0, 0, 0, 0.30); --md-sys-elevation-level5: 0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px 0px rgba(0, 0, 0, 0.30); /* Shorthand aliases (used by some components) */ --md-sys-elevation-2: 0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30); --md-sys-elevation-3: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.30); /* ================================================================= 4. SPACING SCALE ================================================================= */ --md-spacing-xxs: 2px; --md-spacing-xs: 4px; --md-spacing-sm: 8px; --md-spacing-md: 16px; --md-spacing-lg: 24px; --md-spacing-xl: 32px; --md-spacing-2xl: 48px; /* ================================================================= 5. SHAPE / BORDER-RADIUS ================================================================= */ --md-shape-corner-xs: 4px; --md-shape-corner-sm: 8px; --md-shape-corner-md: 12px; --md-shape-corner-lg: 16px; --md-shape-corner-xl: 28px; --md-shape-corner-full: 50%; /* Legacy / alternate aliases (referenced across components) */ --md-shape-corner-extra-small: 4px; --md-shape-corner-small: 8px; --md-sys-shape-corner-extra-small: 4px; --md-sys-shape-corner-small: 8px; --md-sys-shape-corner-medium: 12px; --md-sys-shape-corner-md: 12px; --md-sys-shape-corner-large: 16px; --md-sys-shape-corner-full: 50%; /* ================================================================= 6. APPLICATION-SPECIFIC TOKENS ================================================================= */ --text-size-multiplier: 1; /* overridden by body.sct-text-size-* below */ --nav-drawer-width: 280px; --nav-drawer-width-collapsed: 72px; /* ================================================================= 7. SEMANTIC ALIASES - sct-* namespace Maps MD3 primitives to ParliTrack-specific semantics. Changing a theme only requires editing this section. ================================================================= */ --sct-color-primary: var(--md-sys-color-primary); --sct-color-on-primary: var(--md-sys-color-on-primary); --sct-color-surface: var(--md-sys-color-surface); --sct-color-on-surface: var(--md-sys-color-on-surface); --sct-color-error: var(--md-sys-color-error); --sct-color-warning: var(--md-sys-color-warning); --sct-color-success: var(--md-sys-color-success); --sct-shadow-1: var(--md-sys-elevation-level1); --sct-shadow-2: var(--md-sys-elevation-level2); --sct-shadow-3: var(--md-sys-elevation-level3); --sct-shadow-4: var(--md-sys-elevation-level4); --sct-shadow-5: var(--md-sys-elevation-level5); --sct-radius-sm: var(--md-shape-corner-sm); --sct-radius-md: var(--md-shape-corner-md); --sct-radius-lg: var(--md-shape-corner-lg); --sct-radius-full: var(--md-shape-corner-full); --sct-font-family: var(--md-sys-typescale-body-large-font-family); --sct-font-size-base: var(--md-sys-typescale-body-medium-font-size); --sct-line-height-base: var(--md-sys-typescale-body-medium-line-height); /* ================================================================= 8. STATUS / BADGE SEMANTIC COLORS Tonal surface + on-surface pairs for status indicators, badges, and notification levels. Container values use 12 % opacity so they tint the underlying surface naturally. ================================================================= */ --sct-status-info: #1976D2; --sct-status-info-container: rgba(33, 150, 243, 0.12); --sct-status-warning: #F57C00; --sct-status-warning-container: rgba(255, 152, 0, 0.12); --sct-status-error: #D32F2F; --sct-status-error-container: rgba(244, 67, 54, 0.12); --sct-status-success: #388E3C; --sct-status-success-container: rgba(76, 175, 80, 0.12); --sct-status-critical: #B71C1C; --sct-status-critical-container: rgba(183, 28, 28, 0.12); --sct-status-debug: #7B1FA2; --sct-status-debug-container: rgba(156, 39, 176, 0.12); --sct-status-neutral: #455A64; --sct-status-neutral-container: rgba(69, 90, 100, 0.12); --sct-status-muted: #616161; --sct-status-muted-container: rgba(158, 158, 158, 0.12); /* ================================================================= 9. INTERACTIVE STATE OVERLAYS Semi-transparent layers for hover / press / drag feedback. ================================================================= */ --sct-state-hover: rgba(60, 64, 67, 0.08); --sct-state-pressed: rgba(60, 64, 67, 0.12); --sct-state-dragged: rgba(60, 64, 67, 0.16); --sct-state-focus-ring: var(--md-sys-color-primary); /* ================================================================= 10. BUTTON TOKENS ================================================================= */ --sct-color-primary-hover: #1557b0; --sct-color-primary-pressed: #1345a0; --sct-color-error-hover: #c62828; --sct-color-error-pressed: #b71c1c; /* Canonical button surfaces. EVERY .sct-button variant reads these four pairs and nothing else, so a theme re-points the token (see the two dark blocks at the end of this file) instead of each variant being restated per theme — which is how dark mode drifted out of step in the first place. Light values here map to the MD3 roles, so light is unchanged. */ --sct-button-filled-bg: var(--md-sys-color-primary); --sct-button-filled-fg: var(--md-sys-color-on-primary); --sct-button-filled-bg-hover: var(--sct-color-primary-hover); --sct-button-filled-bg-active: var(--sct-color-primary-pressed); --sct-button-danger-bg: var(--md-sys-color-error); --sct-button-danger-fg: var(--md-sys-color-on-error); --sct-button-danger-bg-hover: var(--sct-color-error-hover); --sct-button-danger-bg-active: var(--sct-color-error-pressed); --sct-shadow-button-hover: 0px 1px 3px rgba(0, 0, 0, 0.12); --sct-shadow-button-pressed: 0px 1px 2px rgba(0, 0, 0, 0.16); /* ================================================================= 11. BORDER TOKENS ================================================================= */ --sct-border-subtle: rgba(60, 64, 67, 0.15); --sct-border-subtle-hover: rgba(60, 64, 67, 0.2); --sct-border-subtle-active: rgba(60, 64, 67, 0.25); /* ================================================================= 12. SCRIM / OVERLAY TOKENS ================================================================= */ --sct-scrim: rgba(0, 0, 0, 0.3); --sct-scrim-modal: rgba(0, 0, 0, 0.5); --sct-spinner-track: rgba(255, 255, 255, 0.3); /* ================================================================= 13. SNACKBAR TOKENS (inverted surface pattern) ================================================================= */ --sct-snackbar-surface: #323232; --sct-snackbar-on-surface: #ffffff; --sct-snackbar-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.1); --sct-snackbar-action-hover: rgba(255, 255, 255, 0.08); --sct-snackbar-action-focus: rgba(255, 255, 255, 0.12); --sct-snackbar-action-active: rgba(255, 255, 255, 0.16); --sct-snackbar-progress: rgba(255, 255, 255, 0.15); --sct-snackbar-progress-hover: rgba(255, 255, 255, 0.25); /* ================================================================= 14. GRAPH STATUS COLORS (GCP semantic palette) ================================================================= */ --sct-graph-completed: #34a853; --sct-graph-completed-container: #e6f4ea; --sct-graph-completed-border: #81c995; --sct-graph-running: #1a73e8; --sct-graph-running-container: #e8f0fe; --sct-graph-running-border: #8ab4f8; --sct-graph-failed: #ea4335; --sct-graph-failed-container: #fce8e6; --sct-graph-failed-border: #f28b82; --sct-graph-pending: #fbbc04; --sct-graph-pending-container: #fef7e0; --sct-graph-pending-border: #fdd663; --sct-graph-paused: #9334e6; --sct-graph-paused-container: #f3e8fd; --sct-graph-paused-border: #c58af9; --sct-graph-cancelled: #9aa0a6; --sct-graph-cancelled-container: #f1f3f4; --sct-graph-cancelled-border: #bdc1c6; /* ================================================================= 15. SHADOW TOKENS ================================================================= */ --sct-shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.05); --sct-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08); --sct-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1); --sct-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15); --sct-shadow-xl: 0 4px 16px rgba(0, 0, 0, 0.15); --sct-shadow-tooltip: var(--sct-shadow-lg); --sct-shadow-control: var(--sct-shadow-sm); --sct-shadow-dropdown: var(--sct-shadow-lg); --sct-shadow-dropdown-up: 0 -4px 12px rgba(0, 0, 0, 0.15); --sct-shadow-panel: -2px 0 8px rgba(0, 0, 0, 0.15); --sct-shadow-popover: 0 2px 8px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1); --sct-shadow-card: 0 1px 3px rgba(60, 64, 67, 0.15), 0 1px 2px rgba(60, 64, 67, 0.1); --sct-shadow-card-hover: 0 4px 8px rgba(60, 64, 67, 0.2), 0 2px 4px rgba(60, 64, 67, 0.1); --sct-shadow-card-expanded: 0 8px 16px rgba(60, 64, 67, 0.15), 0 4px 8px rgba(60, 64, 67, 0.1); /* ================================================================= 16. SYNTAX HIGHLIGHTING TOKENS ================================================================= */ --sct-syntax-string: #2E7D32; --sct-syntax-number: #E65100; --sct-syntax-boolean: #7B1FA2; --sct-syntax-anchor: #00838F; --sct-syntax-tag: #5D4037; /* ================================================================= 17. EXTENDED COLORS ================================================================= */ --md-extended-color-green: #2e7d32; --md-extended-color-green-container: rgba(46, 125, 50, 0.12); --md-extended-color-yellow: #F57C00; --md-extended-color-yellow-container: #FFF3E0; /* ================================================================= 18. CONNECTION STATUS TOKENS ================================================================= */ --sct-state-hover-subtle: rgba(60, 64, 67, 0.04); --sct-shadow-action-hover: 0 2px 8px rgba(0, 0, 0, 0.15); } body.sct-text-size-small { --text-size-multiplier: 0.875; } body.sct-text-size-standard { --text-size-multiplier: 1; } body.sct-text-size-large { --text-size-multiplier: 1.125; } :root[data-theme="dark"] { /* Primary */ --md-sys-color-primary: #8AB4F8; --md-sys-color-on-primary: #003258; --md-sys-color-primary-container: #004A77; --md-sys-color-on-primary-container: #D1E4FF; --md-sys-color-primary-rgb: 138, 180, 248; /* Secondary */ --md-sys-color-secondary: #9AA0A6; --md-sys-color-on-secondary: #202124; --md-sys-color-secondary-container: #3C4043; --md-sys-color-on-secondary-container: #E8EAED; /* Tertiary / Success */ --md-sys-color-tertiary: #81C784; --md-sys-color-on-tertiary: #003909; --md-sys-color-tertiary-container: #003909; --md-sys-color-on-tertiary-container: #B3E5B4; --md-sys-color-success: #81C784; --md-sys-color-success-container: #003909; --md-sys-color-on-success-container: #B3E5B4; /* Error */ --md-sys-color-error: #FFB4AB; --md-sys-color-on-error: #690005; --md-sys-color-error-container: #93000A; --md-sys-color-on-error-container: #FFDAD6; /* Warning */ --md-sys-color-warning: #FFB74D; --md-sys-color-on-warning: #3E2700; --md-sys-color-warning-container: #4E2700; --md-sys-color-on-warning-container: #FFE0B2; /* Surface */ --md-sys-color-surface: #10131A; --md-sys-color-on-surface: #E6E0E9; --md-sys-color-surface-variant: #49454F; --md-sys-color-on-surface-variant: #CAC4D0; --md-sys-color-surface-container-lowest: #0D0D0D; --md-sys-color-surface-container-low: #171717; --md-sys-color-surface-container: #1D1B20; --md-sys-color-surface-container-high: #272025; --md-sys-color-surface-container-highest: #322F35; /* Inverse */ --md-sys-color-inverse-surface: #E6E0E9; --md-sys-color-inverse-on-surface: #313033; /* Outline */ --md-sys-color-outline: #938F99; --md-sys-color-outline-variant: #49454F; /* Shadow */ --md-sys-color-shadow: #000000; --md-sys-color-shadow-opacity-light: 0.08; --md-sys-color-shadow-opacity-medium: 0.2; --md-sys-color-shadow-opacity-heavy: 0.35; /* Status / Badge */ --sct-status-info: #8AB4F8; --sct-status-info-container: rgba(138, 180, 248, 0.16); --sct-status-warning: #FFB74D; --sct-status-warning-container: rgba(255, 183, 77, 0.16); --sct-status-error: #FFB4AB; --sct-status-error-container: rgba(255, 180, 171, 0.16); --sct-status-success: #81C784; --sct-status-success-container: rgba(129, 199, 132, 0.16); --sct-status-critical: #EF9A9A; --sct-status-critical-container: rgba(239, 154, 154, 0.16); --sct-status-debug: #CE93D8; --sct-status-debug-container: rgba(206, 147, 216, 0.16); --sct-status-neutral: #90A4AE; --sct-status-neutral-container: rgba(144, 164, 174, 0.16); --sct-status-muted: #9E9E9E; --sct-status-muted-container: rgba(158, 158, 158, 0.16); /* Interactive State Overlays */ --sct-state-hover: rgba(255, 255, 255, 0.08); --sct-state-pressed: rgba(255, 255, 255, 0.12); --sct-state-dragged: rgba(255, 255, 255, 0.16); /* Button */ --sct-color-primary-hover: #5C97E8; --sct-color-primary-pressed: #4A88E0; --sct-color-error-hover: #ef5350; --sct-color-error-pressed: #e53935; --sct-shadow-button-hover: 0px 1px 3px rgba(0, 0, 0, 0.24); --sct-shadow-button-pressed: 0px 1px 2px rgba(0, 0, 0, 0.28); /* Border */ --sct-border-subtle: rgba(255, 255, 255, 0.2); --sct-border-subtle-hover: rgba(255, 255, 255, 0.3); --sct-border-subtle-active: rgba(255, 255, 255, 0.4); /* Scrim / Overlay */ --sct-scrim: rgba(0, 0, 0, 0.5); --sct-scrim-modal: rgba(0, 0, 0, 0.7); --sct-spinner-track: rgba(255, 255, 255, 0.2); /* Snackbar (inverted in dark) */ --sct-snackbar-surface: #adcbff; --sct-snackbar-on-surface: #000000; --sct-snackbar-shadow: 0 4px 12px rgba(227, 242, 253, 0.25), 0 2px 6px rgba(227, 242, 253, 0.15); --sct-snackbar-action-hover: rgba(0, 0, 0, 0.08); --sct-snackbar-action-focus: rgba(0, 0, 0, 0.12); --sct-snackbar-action-active: rgba(0, 0, 0, 0.16); --sct-snackbar-progress: rgba(0, 0, 0, 0.2); --sct-snackbar-progress-hover: rgba(0, 0, 0, 0.3); /* Graph Status (adjusted for dark backgrounds) */ --sct-graph-completed: #81C995; --sct-graph-completed-container: rgba(129, 201, 149, 0.16); --sct-graph-completed-border: #4e9a63; --sct-graph-running: #8AB4F8; --sct-graph-running-container: rgba(138, 180, 248, 0.16); --sct-graph-running-border: #5C8FD6; --sct-graph-failed: #F28B82; --sct-graph-failed-container: rgba(242, 139, 130, 0.16); --sct-graph-failed-border: #D06660; --sct-graph-pending: #FDD663; --sct-graph-pending-container: rgba(253, 214, 99, 0.16); --sct-graph-pending-border: #D4B044; --sct-graph-paused: #C58AF9; --sct-graph-paused-container: rgba(197, 138, 249, 0.16); --sct-graph-paused-border: #9B62D0; --sct-graph-cancelled: #9AA0A6; --sct-graph-cancelled-container: rgba(154, 160, 166, 0.16); --sct-graph-cancelled-border: #6E7479; /* Shadows */ --sct-shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.1); --sct-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.16); --sct-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.2); --sct-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.3); --sct-shadow-xl: 0 4px 16px rgba(0, 0, 0, 0.3); --sct-shadow-tooltip: var(--sct-shadow-lg); --sct-shadow-control: var(--sct-shadow-sm); --sct-shadow-dropdown: var(--sct-shadow-lg); --sct-shadow-dropdown-up: 0 -4px 12px rgba(0, 0, 0, 0.3); --sct-shadow-panel: -2px 0 8px rgba(0, 0, 0, 0.3); --sct-shadow-popover: 0 2px 8px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2); --sct-shadow-card: 0 2px 4px rgba(0, 0, 0, 0.3); --sct-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.4); --sct-shadow-card-expanded: 0 8px 24px rgba(0, 0, 0, 0.5); --sct-shadow-action-hover: 0 2px 8px rgba(0, 0, 0, 0.3); /* Connection Status */ --sct-state-hover-subtle: rgba(232, 234, 237, 0.08); /* Syntax Highlighting */ --sct-syntax-string: #A5D6A7; --sct-syntax-number: #FFCC80; --sct-syntax-boolean: #CE93D8; --sct-syntax-anchor: #80DEEA; --sct-syntax-tag: #BCAAA4; /* Extended Colors */ --md-extended-color-green: #81C784; --md-extended-color-green-container: rgba(129, 199, 132, 0.16); --md-extended-color-yellow: #FFB74D; --md-extended-color-yellow-container: rgba(255, 183, 77, 0.16); } /* High contrast AND the OS preferring dark, with no explicit choice. Spelled as its own compound query because plain CSS cannot nest one @media inside another, and this combination was previously unreachable: the dark half hung off a body class that nothing sets any more. */ :root { /* --- MD3 color: primary --- */ --md-sys-color-primary: #1976d2; --md-sys-color-on-primary: #ffffff; --md-sys-color-primary-container: #e3f2fd; --md-sys-color-on-primary-container: #0d47a1; /* --- surface / background --- */ --md-sys-color-background: #f6f8fc; --md-sys-color-surface: #ffffff; --md-sys-color-surface-1: #fafbfe; --md-sys-color-surface-2: #f1f4f9; --md-sys-color-on-surface: #1a1c1e; --md-sys-color-on-surface-variant: #44474e; /* MUTED IS STILL BODY TEXT, so it carries the full 4.5:1 obligation. This was #74777f, which measured 4.48:1 on plain white and 4.06:1 on surface-2 — failing AA on every surface in this theme while looking perfectly reasonable. The dark value had the same defect (3.46-4.05). Both are now the dimmest colour that clears 4.5:1 on the LIGHTEST surface of their theme, with margin: 4.63-5.11 here. Dim it again and it fails, silently, because nothing in a browser warns about contrast. */ --md-sys-color-on-surface-muted: #6b6e75; --md-sys-color-outline: #c3c7cf; --md-sys-color-outline-variant: #e2e5ec; /* --- semantic status --- */ --md-sys-color-success: #17784a; --md-sys-color-success-container: #e3f3ea; --md-sys-color-warning: #85570a; --md-sys-color-warning-container: #fcf1da; --md-sys-color-error: #b32330; --md-sys-color-error-container: #fbe8ea; /* --- elevation (MD3 levels) --- */ --md-sys-elevation-1: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.05); --md-sys-elevation-2: 0 1px 2px rgba(16, 24, 40, 0.06), 0 2px 6px rgba(16, 24, 40, 0.08); --md-sys-elevation-3: 0 4px 8px rgba(16, 24, 40, 0.08), 0 6px 20px rgba(16, 24, 40, 0.12); /* --- shape --- */ --md-shape-xs: 6px; --md-shape-sm: 8px; --md-shape-md: 12px; --md-shape-lg: 16px; --md-shape-full: 999px; /* --- spacing scale --- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; /* Vertical rhythm between top-level page SECTIONS (a section header and the block before it). One knob so every page separates its sections the same way — see the ".sx-main > * + .page-head:has(h2)" rule in section 4. */ --section-gap: var(--sp-10); /* --- state layers --- */ --sctx-state-hover: rgba(25, 118, 210, 0.08); --sctx-state-active: rgba(25, 118, 210, 0.12); /* --- semantic aliases (the theme surface — retarget these to re-skin) --- */ --bg: var(--md-sys-color-background); --surface: var(--md-sys-color-surface); --surface-1: var(--md-sys-color-surface-1); --surface-2: var(--md-sys-color-surface-2); --border: var(--md-sys-color-outline-variant); --border-strong: var(--md-sys-color-outline); --ink: var(--md-sys-color-on-surface); --ink-2: var(--md-sys-color-on-surface-variant); --ink-3: var(--md-sys-color-on-surface-muted); --accent: var(--md-sys-color-primary); --accent-soft: var(--md-sys-color-primary-container); --accent-on: var(--md-sys-color-on-primary-container); --accent-ink: var(--md-sys-color-on-primary); --good: var(--md-sys-color-success); --good-bg: var(--md-sys-color-success-container); --warn: var(--md-sys-color-warning); --warn-bg: var(--md-sys-color-warning-container); --bad: var(--md-sys-color-error); --bad-bg: var(--md-sys-color-error-container); --muted-bg: var(--surface-2); --shadow: var(--md-sys-elevation-1); --shadow-2: var(--md-sys-elevation-2); --shadow-3: var(--md-sys-elevation-3); /* --- font --- */ --font-sans: "Roboto Flex", "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif; /* --- shell metrics --- */ --nav-w: 248px; --nav-w-collapsed: 72px; --header-h: 56px; /* Slimmer sub-header row: the side-nav project switcher and the content page-header share this height so their bottom borders form one line. */ --subheader-h: 44px; /* --- categorical graph palette (dataviz six-checks, light surface #ffffff); hue order is the CVD-safety mechanism — keep it fixed. --- */ --g1: #2a78d6; --g2: #1baf7a; --g3: #eda100; --g4: #4a3aa7; --g5: #e34948; --g6: #eb6834; } :root[data-theme="dark"] { --md-sys-color-primary: #9ecaff; --md-sys-color-on-primary: #00325a; --md-sys-color-primary-container: #1b3a5c; --md-sys-color-on-primary-container: #d4e6ff; --md-sys-color-background: #0e1116; --md-sys-color-surface: #171b21; --md-sys-color-surface-1: #1c2129; --md-sys-color-surface-2: #222833; --md-sys-color-on-surface: #e4e7ec; --md-sys-color-on-surface-variant: #aeb4bf; --md-sys-color-on-surface-muted: #8891a0; --md-sys-color-outline: #444b57; --md-sys-color-outline-variant: #2a303a; --md-sys-color-success: #5fce93; --md-sys-color-success-container: #17301f; --md-sys-color-warning: #e3b969; --md-sys-color-warning-container: #322a16; --md-sys-color-error: #f28b94; --md-sys-color-error-container: #371d21; --md-sys-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.4); --md-sys-elevation-2: 0 2px 8px rgba(0, 0, 0, 0.45); --md-sys-elevation-3: 0 8px 24px rgba(0, 0, 0, 0.55); --sctx-state-hover: rgba(158, 202, 255, 0.1); --sctx-state-active: rgba(158, 202, 255, 0.16); /* Buttons in dark: a TONAL fill (light blue plate, dark navy label), the way Google Cloud's own dark console renders a primary action — 7.7:1 on the label. Hover/pressed BRIGHTEN: the light-mode --sct-color-primary-* steps darken, and reusing them here made a hovered primary go dim behind its dark label, i.e. hover read as disabled. Same story for destructive. These are the ONLY dark button declarations — the variant rules above are theme-agnostic because they only ever read these tokens. */ --sct-button-filled-bg: #9ecaff; --sct-button-filled-fg: #00325a; --sct-button-filled-bg-hover: #bcdaff; --sct-button-filled-bg-active: #8ab9f0; --sct-button-danger-bg: #f28b94; --sct-button-danger-fg: #4a0a10; --sct-button-danger-bg-hover: #f8a8af; --sct-button-danger-bg-active: #e07a83; /* same six hues re-stepped for the dark surface (validated separately) */ --g1: #3987e5; --g2: #199e70; --g3: #c98500; --g4: #9085e9; --g5: #e66767; --g6: #d95926; } :root[data-theme="dark"] { --md-sys-color-surface: #171b21; --md-sys-color-surface-container-lowest: #12151b; --md-sys-color-surface-container-low: #1c2129; --md-sys-color-surface-container: #1c2129; --md-sys-color-surface-container-high: #222833; --md-sys-color-surface-container-highest: #2a3140; --md-sys-color-outline: #444b57; --md-sys-color-outline-variant: #2a303a; } @media (prefers-color-scheme: dark) { /* GENERATED MIRROR of the :root[data-theme="dark"] declarations above. Duplicated because CSS cannot set an attribute, so the explicit choice and the OS preference are two different contexts that need the same values. ui-design-system's TestBothDarkContextsDeclareTheSameTokens fails if they drift, which is the only thing that makes the duplication safe. */ :root:not([data-theme="light"]) { /* Primary */ --md-sys-color-primary: #8AB4F8; --md-sys-color-on-primary: #003258; --md-sys-color-primary-container: #004A77; --md-sys-color-on-primary-container: #D1E4FF; --md-sys-color-primary-rgb: 138, 180, 248; /* Secondary */ --md-sys-color-secondary: #9AA0A6; --md-sys-color-on-secondary: #202124; --md-sys-color-secondary-container: #3C4043; --md-sys-color-on-secondary-container: #E8EAED; /* Tertiary / Success */ --md-sys-color-tertiary: #81C784; --md-sys-color-on-tertiary: #003909; --md-sys-color-tertiary-container: #003909; --md-sys-color-on-tertiary-container: #B3E5B4; --md-sys-color-success: #81C784; --md-sys-color-success-container: #003909; --md-sys-color-on-success-container: #B3E5B4; /* Error */ --md-sys-color-error: #FFB4AB; --md-sys-color-on-error: #690005; --md-sys-color-error-container: #93000A; --md-sys-color-on-error-container: #FFDAD6; /* Warning */ --md-sys-color-warning: #FFB74D; --md-sys-color-on-warning: #3E2700; --md-sys-color-warning-container: #4E2700; --md-sys-color-on-warning-container: #FFE0B2; /* Surface */ --md-sys-color-surface: #10131A; --md-sys-color-on-surface: #E6E0E9; --md-sys-color-surface-variant: #49454F; --md-sys-color-on-surface-variant: #CAC4D0; --md-sys-color-surface-container-lowest: #0D0D0D; --md-sys-color-surface-container-low: #171717; --md-sys-color-surface-container: #1D1B20; --md-sys-color-surface-container-high: #272025; --md-sys-color-surface-container-highest: #322F35; /* Inverse */ --md-sys-color-inverse-surface: #E6E0E9; --md-sys-color-inverse-on-surface: #313033; /* Outline */ --md-sys-color-outline: #938F99; --md-sys-color-outline-variant: #49454F; /* Shadow */ --md-sys-color-shadow: #000000; --md-sys-color-shadow-opacity-light: 0.08; --md-sys-color-shadow-opacity-medium: 0.2; --md-sys-color-shadow-opacity-heavy: 0.35; /* Status / Badge */ --sct-status-info: #8AB4F8; --sct-status-info-container: rgba(138, 180, 248, 0.16); --sct-status-warning: #FFB74D; --sct-status-warning-container: rgba(255, 183, 77, 0.16); --sct-status-error: #FFB4AB; --sct-status-error-container: rgba(255, 180, 171, 0.16); --sct-status-success: #81C784; --sct-status-success-container: rgba(129, 199, 132, 0.16); --sct-status-critical: #EF9A9A; --sct-status-critical-container: rgba(239, 154, 154, 0.16); --sct-status-debug: #CE93D8; --sct-status-debug-container: rgba(206, 147, 216, 0.16); --sct-status-neutral: #90A4AE; --sct-status-neutral-container: rgba(144, 164, 174, 0.16); --sct-status-muted: #9E9E9E; --sct-status-muted-container: rgba(158, 158, 158, 0.16); /* Interactive State Overlays */ --sct-state-hover: rgba(255, 255, 255, 0.08); --sct-state-pressed: rgba(255, 255, 255, 0.12); --sct-state-dragged: rgba(255, 255, 255, 0.16); /* Button */ --sct-color-primary-hover: #5C97E8; --sct-color-primary-pressed: #4A88E0; --sct-color-error-hover: #ef5350; --sct-color-error-pressed: #e53935; --sct-shadow-button-hover: 0px 1px 3px rgba(0, 0, 0, 0.24); --sct-shadow-button-pressed: 0px 1px 2px rgba(0, 0, 0, 0.28); /* Border */ --sct-border-subtle: rgba(255, 255, 255, 0.2); --sct-border-subtle-hover: rgba(255, 255, 255, 0.3); --sct-border-subtle-active: rgba(255, 255, 255, 0.4); /* Scrim / Overlay */ --sct-scrim: rgba(0, 0, 0, 0.5); --sct-scrim-modal: rgba(0, 0, 0, 0.7); --sct-spinner-track: rgba(255, 255, 255, 0.2); /* Snackbar (inverted in dark) */ --sct-snackbar-surface: #adcbff; --sct-snackbar-on-surface: #000000; --sct-snackbar-shadow: 0 4px 12px rgba(227, 242, 253, 0.25), 0 2px 6px rgba(227, 242, 253, 0.15); --sct-snackbar-action-hover: rgba(0, 0, 0, 0.08); --sct-snackbar-action-focus: rgba(0, 0, 0, 0.12); --sct-snackbar-action-active: rgba(0, 0, 0, 0.16); --sct-snackbar-progress: rgba(0, 0, 0, 0.2); --sct-snackbar-progress-hover: rgba(0, 0, 0, 0.3); /* Graph Status (adjusted for dark backgrounds) */ --sct-graph-completed: #81C995; --sct-graph-completed-container: rgba(129, 201, 149, 0.16); --sct-graph-completed-border: #4e9a63; --sct-graph-running: #8AB4F8; --sct-graph-running-container: rgba(138, 180, 248, 0.16); --sct-graph-running-border: #5C8FD6; --sct-graph-failed: #F28B82; --sct-graph-failed-container: rgba(242, 139, 130, 0.16); --sct-graph-failed-border: #D06660; --sct-graph-pending: #FDD663; --sct-graph-pending-container: rgba(253, 214, 99, 0.16); --sct-graph-pending-border: #D4B044; --sct-graph-paused: #C58AF9; --sct-graph-paused-container: rgba(197, 138, 249, 0.16); --sct-graph-paused-border: #9B62D0; --sct-graph-cancelled: #9AA0A6; --sct-graph-cancelled-container: rgba(154, 160, 166, 0.16); --sct-graph-cancelled-border: #6E7479; /* Shadows */ --sct-shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.1); --sct-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.16); --sct-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.2); --sct-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.3); --sct-shadow-xl: 0 4px 16px rgba(0, 0, 0, 0.3); --sct-shadow-tooltip: var(--sct-shadow-lg); --sct-shadow-control: var(--sct-shadow-sm); --sct-shadow-dropdown: var(--sct-shadow-lg); --sct-shadow-dropdown-up: 0 -4px 12px rgba(0, 0, 0, 0.3); --sct-shadow-panel: -2px 0 8px rgba(0, 0, 0, 0.3); --sct-shadow-popover: 0 2px 8px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2); --sct-shadow-card: 0 2px 4px rgba(0, 0, 0, 0.3); --sct-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.4); --sct-shadow-card-expanded: 0 8px 24px rgba(0, 0, 0, 0.5); --sct-shadow-action-hover: 0 2px 8px rgba(0, 0, 0, 0.3); /* Connection Status */ --sct-state-hover-subtle: rgba(232, 234, 237, 0.08); /* Syntax Highlighting */ --sct-syntax-string: #A5D6A7; --sct-syntax-number: #FFCC80; --sct-syntax-boolean: #CE93D8; --sct-syntax-anchor: #80DEEA; --sct-syntax-tag: #BCAAA4; /* Extended Colors */ --md-extended-color-green: #81C784; --md-extended-color-green-container: rgba(129, 199, 132, 0.16); --md-extended-color-yellow: #FFB74D; --md-extended-color-yellow-container: rgba(255, 183, 77, 0.16); --md-sys-color-primary: #9ecaff; --md-sys-color-on-primary: #00325a; --md-sys-color-primary-container: #1b3a5c; --md-sys-color-on-primary-container: #d4e6ff; --md-sys-color-background: #0e1116; --md-sys-color-surface: #171b21; --md-sys-color-surface-1: #1c2129; --md-sys-color-surface-2: #222833; --md-sys-color-on-surface: #e4e7ec; --md-sys-color-on-surface-variant: #aeb4bf; --md-sys-color-on-surface-muted: #8891a0; --md-sys-color-outline: #444b57; --md-sys-color-outline-variant: #2a303a; --md-sys-color-success: #5fce93; --md-sys-color-success-container: #17301f; --md-sys-color-warning: #e3b969; --md-sys-color-warning-container: #322a16; --md-sys-color-error: #f28b94; --md-sys-color-error-container: #371d21; --md-sys-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.4); --md-sys-elevation-2: 0 2px 8px rgba(0, 0, 0, 0.45); --md-sys-elevation-3: 0 8px 24px rgba(0, 0, 0, 0.55); --sctx-state-hover: rgba(158, 202, 255, 0.1); --sctx-state-active: rgba(158, 202, 255, 0.16); /* Buttons in dark: a TONAL fill (light blue plate, dark navy label), the way Google Cloud's own dark console renders a primary action — 7.7:1 on the label. Hover/pressed BRIGHTEN: the light-mode --sct-color-primary-* steps darken, and reusing them here made a hovered primary go dim behind its dark label, i.e. hover read as disabled. Same story for destructive. These are the ONLY dark button declarations — the variant rules above are theme-agnostic because they only ever read these tokens. */ --sct-button-filled-bg: #9ecaff; --sct-button-filled-fg: #00325a; --sct-button-filled-bg-hover: #bcdaff; --sct-button-filled-bg-active: #8ab9f0; --sct-button-danger-bg: #f28b94; --sct-button-danger-fg: #4a0a10; --sct-button-danger-bg-hover: #f8a8af; --sct-button-danger-bg-active: #e07a83; /* same six hues re-stepped for the dark surface (validated separately) */ --g1: #3987e5; --g2: #199e70; --g3: #c98500; --g4: #9085e9; --g5: #e66767; --g6: #d95926; --md-sys-color-surface: #171b21; --md-sys-color-surface-container-lowest: #12151b; --md-sys-color-surface-container-low: #1c2129; --md-sys-color-surface-container: #1c2129; --md-sys-color-surface-container-high: #222833; --md-sys-color-surface-container-highest: #2a3140; --md-sys-color-outline: #444b57; --md-sys-color-outline-variant: #2a303a; } } /* ============================================================================= HIGH CONTRAST — LAST IN THE FILE ON PURPOSE. ============================================================================= These blocks used to sit mid-file, which made every one of them DEAD. A media query adds no specificity, so a later plain `:root` or `:root[data-theme="dark"]` declaration of the same token simply won on source order — and there are later blocks declaring `outline`. The result: a visitor asking their OS for high contrast got the ordinary outline colours, silently, in both themes. Nothing here can be moved earlier without reintroducing that. Anything added after these blocks must not redeclare a token they set. ============================================================================= */ @media (prefers-contrast: high) { :root { --md-sys-color-outline: #000000; --md-sys-color-outline-variant: #666666; } :root[data-theme="dark"] { --md-sys-color-outline: #FFFFFF; --md-sys-color-outline-variant: #AAAAAA; } } @media (prefers-contrast: high) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --md-sys-color-outline: #FFFFFF; --md-sys-color-outline-variant: #AAAAAA; } }