/* Design tokens resolved from Tesla firmware 2026.8.3 styles + skin .conf tables. Three themes flow through `[data-tesla-theme]` on : night — default, fully dark MCU UI day — light surface, dark text (inverted) darkDay — twilight: still dark but slightly lighter chrome and slightly de-saturated text. Firmware uses this as the transitional palette between day and night. Most tokens are colour overrides. Overlay-strength tokens (--t-c-overlay-N) replace the dozens of hardcoded `rgba(255,255,255, .03|.04|.06|.08|.10|.12|.15|.20)` literals used as button/hover/row backgrounds — those become invisible on light backgrounds, so they HAVE to flip with the theme. */ :root { /* Bottom-sheet height in dvh, kept in sync with state.sheet_pct from app.rs. Overlays that float ABOVE the sheet (current-location, supercharger queue, weather player, right-strip pill) read this to reposition as the user drags. */ --sheet-h: 55; /* ── Sizing engine: the ONE place all dimensions originate ─────── This is a web app, not a fixed-resolution firmware screen, so nothing is sized in fixed px. Every font / icon / spacing / row token below is ` * `, where: --ui-scale device scale, written at runtime by the viewport probe in index.html (load + resize + visualViewport). 1.0 ≈ a ~1280×720 logical viewport; floors on phones, caps at 1.0 so big screens give more MAP, not cartoon chrome. --ui-user-scale user "Display size" setting (applied to from app.rs). Scales everything. --ui-text-scale user "Text size" setting. Scales fonts only, on top of the others (accessibility). The numbers are the firmware proportions (Tesla [Text] ramp: Body1=24 Body2=22 Caption1=18 Caption2=14, etc.) — used as unitless design ratios, never as fixed pixels. Change a setting or resize and the whole UI rescales from here; no rule downstream hardcodes a size. Defaults are 1.0 so the UI is sane even before the probe runs (JS-off / tests). */ --ui-scale: 1; --ui-user-scale: 1; --ui-text-scale: 1; --ui-content-scale: calc(var(--ui-scale) * var(--ui-user-scale)); --ui-font-scale: calc(var(--ui-scale) * var(--ui-user-scale) * var(--ui-text-scale)); /* Typography */ --t-font: "Inter", "Helvetica Neue", system-ui, -apple-system, Arial, sans-serif; --t-font-mono: "Inter", ui-monospace, "SF Mono", Menlo, monospace; /* Firmware [Text] ramp aliases — pinned to the exact firmware proportions (styles-common.conf [Text]: Body1=24 Body2=22 Caption1=18 Caption2=14). Decoupled from the generic --t-fs-* ramp so they can't drift off the firmware value. Every selector binding these rescales through --ui-font-scale. */ --t-size-body1: calc(var(--ui-font-scale) * 24px); --t-size-body2: calc(var(--ui-font-scale) * 22px); --t-size-caption1: calc(var(--ui-font-scale) * 18px); --t-size-caption2: calc(var(--ui-font-scale) * 14px); --t-size-first-turn: var(--t-fs-2xlarge); --t-weight-light: 300; --t-weight-normal: 400; --t-weight-medium: 500; --t-weight-bold: 700; /* ── Night palette (default — in-car UI runs dark) ─────────────── */ --t-c-text-primary: rgba(255,255,255,0.90); --t-c-text-secondary: rgba(255,255,255,0.60); --t-c-text-tertiary: rgba(255,255,255,0.50); --t-c-text-disabled: rgba(255,255,255,0.40); --t-c-text-highlight: #FFFFFF; --t-c-bg-primary: #161616; --t-c-bg-secondary: #1B1B1B; /* Firmware-canonical Background/nav_primary = blur_primary night = #272727 with B3 (70%) alpha. Defined in firmware_extract/styles/skin-common.conf:115. */ --t-c-bg-nav-primary: rgba(39, 39, 39, 0.70); /* Background/nav_noblur_primary night = #272727 with E0 (87.8%) alpha. Used by BackgroundStyle for non-blurred panels. */ --t-c-bg-nav-noblur-primary: rgba(39, 39, 39, 0.878); --t-c-bg-transparent-primary: rgba(255,255,255,0.10); --t-c-bg-transparent-secondary: rgba(255,255,255,0.05); --t-c-bg-divider: rgba(255,255,255,0.08); --t-c-rest-area-first: #1D452D; --t-c-rest-area-second: #142E1E; --t-c-route-selected-duration: #FFFFFF; --t-c-route-alt-duration: #414143; --t-c-route-selected-desc: rgba(255,255,255,0.60); --t-c-route-alt-desc: rgba(65,65,67,0.60); --t-c-route-selected-toll: #116CD8; --t-c-route-alt-toll: #B4B4B4; /* nav_v2/arrival_info — distinct grey used by ArrivalTimeLabel + TimeToDestinationLabel + DistanceToDestinationLabel inside SplitTurnListBottomView. Resolved from skin-common.conf:1113. night = #7E7E7E, day = #4D4D4D. NOT Text/secondary. */ --t-c-nav-arrival-info: #7E7E7E; /* nav_v2/battery_percent_calculating — the muted "—" treatment applied when arrival ETA is still being recomputed. */ --t-c-nav-pct-calculating: rgba(255,255,255,0.30); /* Accent colours — same in all themes. */ --t-c-blue: #116CD8; --t-c-blue-bright: #3E6AE1; --t-c-red: #E82127; --t-c-green: #4FC563; --t-c-yellow: #F4C534; --t-c-orange: #FF7A29; /* Hover shade of the primary blue button (invariant accent). */ --t-c-blue-hover: #5378D6; /* Rating-star gold — conventional fixed amber, theme-invariant. */ --t-c-star: #FFC107; /* Darkened amber for warning notification banners that carry white text (#F4C534 is too bright for white-on-accent). */ --t-c-amber: #B8860B; --t-c-charger-tesla: #E82127; --t-c-charger-ccs: #1A6BC2; --t-c-charger-chademo: #5A7BFF; --t-c-charger-l2: #4FC563; /* ── Semantic status tier ──────────────────────────────────────── One source per *meaning* so status chips/dots/badges/diffs stop drifting into ad-hoc shades. Each semantic has three forms: --t-c- strong/solid (dots, strong fills) — aliases the brand accent so it stays firmware-canonical. --t-c--bg pale chip fill (accent at ~18%, explicit rgba — NOT color-mix(), MCU chromium version is unknown). --t-c--fg label text that reads on the pale chip in BOTH themes (a mid-tone, so it's theme-invariant). Accent SOLID/BG/FG are invariant; the chip sits on a theme surface but the tint+mid-tone keep contrast either way. */ --t-c-success: var(--t-c-green); --t-c-success-bg: rgba(79,197,99,0.18); --t-c-success-fg: #2EA043; --t-c-warning: var(--t-c-yellow); --t-c-warning-bg: rgba(244,197,52,0.18); --t-c-warning-fg: #B08A14; --t-c-error: var(--t-c-red); --t-c-error-bg: rgba(232,33,39,0.18); --t-c-error-fg: #E74C3C; --t-c-info: var(--t-c-blue-bright); --t-c-info-bg: rgba(62,106,225,0.12); --t-c-info-fg: #6BA9F2; --t-c-caution: var(--t-c-orange); --t-c-caution-bg: rgba(255,122,41,0.18); --t-c-caution-fg: #FFB144; /* Ink that sits ON a light accent surface (e.g. the yellow active button) — must be dark, not the white used on blue/red accents. */ --t-c-on-light: var(--t-c-pure-black); /* List / map pin brand colours. */ --t-c-pin-home: var(--t-c-blue); --t-c-pin-work: #6F4FC5; /* Notification-banner backgrounds — muted dark fills, one per firmware notification kind, carrying white on-accent text (legible in every theme, so theme-invariant). Named here so no banner colour lives as a magic literal in tesla.css. */ --t-c-banner-red: #7B2C2C; --t-c-banner-blue: #385D8A; --t-c-banner-indigo: #4A5D8A; --t-c-banner-slate: #3A4A6A; --t-c-banner-amber: #6C4F24; --t-c-banner-orange: #8A4A2C; --t-c-banner-green: #3A6A3A; --t-c-banner-neutral: #4A4A4A; --t-c-banner-alert: #B83232; --t-r-card: calc(var(--ui-content-scale) * 10px); --t-r-button: calc(var(--ui-content-scale) * 6px); --t-r-pill: calc(var(--ui-content-scale) * 999px); --t-trans-quick: 120ms cubic-bezier(0.25, 0.46, 0.45, 0.94); --t-trans-normal: 220ms cubic-bezier(0.25, 0.46, 0.45, 0.94); --t-shadow-card: 0 calc(var(--ui-content-scale) * 4px) calc(var(--ui-content-scale) * 16px) rgba(0,0,0,0.4); --t-shadow-deep: 0 calc(var(--ui-content-scale) * 8px) calc(var(--ui-content-scale) * 32px) rgba(0,0,0,0.6); /* ── Theme-aware overlays ────────────────────────────────────── Used wherever a translucent surface fill or hover stripe is drawn over the pill background. Night = white-on-dark, day = black-on-light, darkDay = brighter white-on-dark. */ --t-c-overlay-1: rgba(255,255,255,0.03); --t-c-overlay-2: rgba(255,255,255,0.04); --t-c-overlay-3: rgba(255,255,255,0.06); --t-c-overlay-4: rgba(255,255,255,0.08); --t-c-overlay-5: rgba(255,255,255,0.10); --t-c-overlay-6: rgba(255,255,255,0.12); --t-c-overlay-7: rgba(255,255,255,0.15); --t-c-overlay-8: rgba(255,255,255,0.20); --t-c-overlay-border: rgba(255,255,255,0.06); --t-c-overlay-border-strong: rgba(255,255,255,0.08); --t-c-overlay-knob: rgba(255,255,255,0.35); --t-pill-bg: rgba(39, 39, 39, 0.70); /* Firmware Background/blurred_button_transparent_primary night = #FFFFFF:33 (20%) — used for ACTIVE state of round InfoWindow action buttons (.t-action-btn--active) which sit on the blurred panel. */ --t-pill-highlight: rgba(255, 255, 255, 0.20); /* Firmware Background/blurred_button_transparent_secondary night = #FFFFFF:14 (8%) — passive hover state. */ --t-pill-hover: rgba(255, 255, 255, 0.08); /* Right-strip ACTIVE button background — firmware uses a dedicated `maps/v2/map_controls/control_bg.png` 9-slice PNG, NOT a flat overlay. Verified by Pillow center-pixel sampling: night ≈ #161616 at 90% alpha (a darker SOLID gray than the pill bg). The CSS url() approach stretches the PNG over the button so the rounded corners + antialiased edges come from the PNG. */ --t-mc-control-bg-url: url("/static/tesla_assets/night_maps/v2/map_controls/control_bg.png"); /* Right-strip button size — firmware MapControlSize Height:80. */ --t-row-h: calc(var(--ui-content-scale) * 80px); /* ── Universal spacing scale ───────────────────────────────────── Every widget reaches for one of these instead of a hardcoded px. Ratios are the firmware spacing steps; --ui-content-scale does the rescaling so phones, MCUs and desktops all stay proportional. */ --t-s-xxs: calc(var(--ui-content-scale) * 4px); --t-s-xs: calc(var(--ui-content-scale) * 6px); --t-s-sm: calc(var(--ui-content-scale) * 10px); --t-s-md: calc(var(--ui-content-scale) * 14px); --t-s-lg: calc(var(--ui-content-scale) * 20px); --t-s-xl: calc(var(--ui-content-scale) * 28px); --t-s-2xl: calc(var(--ui-content-scale) * 40px); /* Icon size scale. */ --t-icon-sm: calc(var(--ui-content-scale) * 24px); --t-icon-md: calc(var(--ui-content-scale) * 32px); --t-icon-lg: calc(var(--ui-content-scale) * 44px); /* Card-row scale — firmware NavCard rows are 80. */ --t-card-row-h: calc(var(--ui-content-scale) * 80px); /* Font-size scale. Ratios are firmware logical px; --ui-font-scale (device × display × text settings) does all the rescaling. The four firmware [Text] steps map to: small=Caption2(14)→13 here as a sub-caption, base=16, medium=Caption1(18), large=20, xlarge= Body1(24-ish), 2xlarge=H3(36), display=H2(48-ish), hero=H1(60). */ --t-fs-tiny: calc(var(--ui-font-scale) * 10px); --t-fs-mini: calc(var(--ui-font-scale) * 12px); --t-fs-small: calc(var(--ui-font-scale) * 13px); --t-fs-base: calc(var(--ui-font-scale) * 15px); --t-fs-medium: calc(var(--ui-font-scale) * 18px); --t-fs-large: calc(var(--ui-font-scale) * 20px); --t-fs-xlarge: calc(var(--ui-font-scale) * 28px); --t-fs-2xlarge: calc(var(--ui-font-scale) * 36px); --t-fs-display: calc(var(--ui-font-scale) * 56px); --t-fs-hero: calc(var(--ui-font-scale) * 64px); /* "Pure" colours that DON'T flip with theme — used for tinted chips that sit on a coloured background (blue/red/green) so the foreground must remain white regardless of light/dark mode. */ --t-c-on-accent: #FFFFFF; --t-c-pure-white: #FFFFFF; --t-c-pure-black: #000000; /* Theme-flipping shadow strengths. Night uses heavier blacks; day uses lighter, smaller drops; darkDay sits between. */ --t-shadow-soft: 0 calc(var(--ui-content-scale) * 2px) calc(var(--ui-content-scale) * 6px) rgba(0,0,0,0.40); --t-shadow-mid: 0 calc(var(--ui-content-scale) * 4px) calc(var(--ui-content-scale) * 12px) rgba(0,0,0,0.42); --t-shadow-strong: 0 calc(var(--ui-content-scale) * 8px) calc(var(--ui-content-scale) * 24px) rgba(0,0,0,0.55); --t-shadow-popup: 0 calc(var(--ui-content-scale) * 16px) calc(var(--ui-content-scale) * 32px) rgba(0,0,0,0.55); /* Dimmer overlay used as a modal backdrop scrim. Flips with theme. */ --t-c-scrim: rgba(0,0,0,0.55); } [data-tesla-theme="day"] { --t-shadow-soft: 0 calc(var(--ui-content-scale) * 2px) calc(var(--ui-content-scale) * 6px) rgba(0,0,0,0.18); --t-shadow-mid: 0 calc(var(--ui-content-scale) * 4px) calc(var(--ui-content-scale) * 12px) rgba(0,0,0,0.20); --t-shadow-strong: 0 calc(var(--ui-content-scale) * 8px) calc(var(--ui-content-scale) * 24px) rgba(0,0,0,0.28); --t-shadow-popup: 0 calc(var(--ui-content-scale) * 16px) calc(var(--ui-content-scale) * 32px) rgba(0,0,0,0.28); --t-c-scrim: rgba(0,0,0,0.35); } [data-tesla-theme="darkDay"] { --t-shadow-soft: 0 calc(var(--ui-content-scale) * 2px) calc(var(--ui-content-scale) * 6px) rgba(0,0,0,0.30); --t-shadow-mid: 0 calc(var(--ui-content-scale) * 4px) calc(var(--ui-content-scale) * 12px) rgba(0,0,0,0.32); --t-shadow-strong: 0 calc(var(--ui-content-scale) * 8px) calc(var(--ui-content-scale) * 24px) rgba(0,0,0,0.42); --t-shadow-popup: 0 calc(var(--ui-content-scale) * 16px) calc(var(--ui-content-scale) * 32px) rgba(0,0,0,0.42); --t-c-scrim: rgba(0,0,0,0.45); } /* ── Day theme ─────────────────────────────────────────────────── */ [data-tesla-theme="day"] { --t-c-text-primary: rgba(0,0,0,0.85); --t-c-text-secondary: rgba(0,0,0,0.55); --t-c-text-tertiary: rgba(0,0,0,0.40); --t-c-text-disabled: rgba(0,0,0,0.30); --t-c-text-highlight: #000000; --t-c-bg-primary: #EDEDEF; --t-c-bg-secondary: #F9F9FB; /* Firmware Background/blur_primary day = #FFFFFF:B3 (70% alpha). */ --t-c-bg-nav-primary: rgba(255, 255, 255, 0.70); --t-c-bg-nav-noblur-primary: rgba(255, 255, 255, 0.878); --t-c-bg-transparent-primary: rgba(0,0,0,0.08); --t-c-bg-transparent-secondary: rgba(0,0,0,0.04); --t-c-bg-divider: rgba(0,0,0,0.10); --t-c-rest-area-first: #348254; --t-c-rest-area-second: #55976F; --t-c-route-selected-duration: #161616; --t-c-route-alt-duration: #999999; --t-c-route-selected-desc: rgba(0,0,0,0.55); --t-c-route-alt-desc: rgba(120,120,120,0.60); --t-c-nav-arrival-info: #4D4D4D; --t-c-nav-pct-calculating: rgba(0,0,0,0.30); --t-c-overlay-1: rgba(0,0,0,0.03); --t-c-overlay-2: rgba(0,0,0,0.04); --t-c-overlay-3: rgba(0,0,0,0.06); --t-c-overlay-4: rgba(0,0,0,0.08); --t-c-overlay-5: rgba(0,0,0,0.10); --t-c-overlay-6: rgba(0,0,0,0.12); --t-c-overlay-7: rgba(0,0,0,0.15); --t-c-overlay-8: rgba(0,0,0,0.20); --t-c-overlay-border: rgba(0,0,0,0.10); --t-c-overlay-border-strong: rgba(0,0,0,0.14); --t-c-overlay-knob: rgba(0,0,0,0.30); /* Alias for firmware Background/blur_primary day. Kept as a separate token name for backward compat with consumers that still reference --t-pill-bg, but the value is identical to --t-c-bg-nav-primary so the right-strip and search-pill / InfoWindow chrome share the same color across all themes. */ --t-pill-bg: rgba(255, 255, 255, 0.70); /* Firmware blurred_button_transparent_primary day = #FFFFFF:CC (80%) — used for round InfoWindow action buttons in day theme. */ --t-pill-highlight: rgba(255, 255, 255, 0.80); --t-pill-hover: rgba(255, 255, 255, 0.40); /* Day variant of the right-strip active background PNG. Center pixel ≈ #EDEDED at 85% alpha — a near-opaque off-white square. */ --t-mc-control-bg-url: url("/static/tesla_assets/day_maps/v2/map_controls/control_bg.png"); --t-shadow-card: 0 calc(var(--ui-content-scale) * 4px) calc(var(--ui-content-scale) * 16px) rgba(0,0,0,0.18); --t-shadow-deep: 0 calc(var(--ui-content-scale) * 8px) calc(var(--ui-content-scale) * 32px) rgba(0,0,0,0.25); } /* ── DarkDay theme — between night and day (twilight) ───────────── */ [data-tesla-theme="darkDay"] { /* Same text/bg model as night, slightly lighter chrome. */ --t-c-text-primary: rgba(255,255,255,0.95); --t-c-text-secondary: rgba(255,255,255,0.65); --t-c-text-tertiary: rgba(255,255,255,0.50); --t-c-text-disabled: rgba(255,255,255,0.40); --t-c-bg-primary: #1E1E20; --t-c-bg-secondary: #25252A; /* Firmware Background/blur_primary darkday = #2B2B2B:CC (80%). */ --t-c-bg-nav-primary: rgba(43, 43, 43, 0.80); --t-c-bg-nav-noblur-primary: rgba(43, 43, 43, 0.918); --t-c-overlay-1: rgba(255,255,255,0.05); --t-c-overlay-2: rgba(255,255,255,0.07); --t-c-overlay-3: rgba(255,255,255,0.09); --t-c-overlay-4: rgba(255,255,255,0.11); --t-c-overlay-5: rgba(255,255,255,0.14); --t-c-overlay-6: rgba(255,255,255,0.17); --t-c-overlay-7: rgba(255,255,255,0.20); --t-c-overlay-8: rgba(255,255,255,0.25); --t-c-overlay-border: rgba(255,255,255,0.10); --t-c-overlay-border-strong: rgba(255,255,255,0.14); /* Firmware Background/blur_primary darkday = #2B2B2B:CC. */ --t-pill-bg: rgba(43, 43, 43, 0.80); /* No darkday variant in firmware skin-common.conf:153-158; falls back to the night blurred_button_* values. */ --t-pill-highlight: rgba(255, 255, 255, 0.20); --t-pill-hover: rgba(255, 255, 255, 0.08); /* DarkDay control_bg.png — center pixel ≈ #202020 at 90% alpha. */ --t-mc-control-bg-url: url("/static/tesla_assets/darkDay_maps/v2/map_controls/control_bg.png"); }