/* HRTFinator theme tokens. * * Every value here is transcribed from the live app theme, not invented: * colours + fonts %LOCALAPPDATA%/HRTFinator/theme_settings.json * button geometry libs/ui-widgets/src/HRTFWidgets.cpp (toolButton/smallButton) * button heights libs/ui-widgets/include/ui-widgets/HRTFWidgets.h (ButtonH) * window chrome app/src/WindowChrome.cpp (makeWindowChromeLayout) * Apply-bar fills app/src/tabs/SystemEQ/SystemEQTab.cpp (eqFill/corrFill) * * Retheming the site is meant to be this file only. Names mirror the C++ * Theme struct field names so the two can be diffed by eye. */ :root { /* Smaller website preview using the current native theme's role sizes. * CSS font rendering differs from the native atlas; this is a visual * adjustment, not a change to the application's theme or OS scaling. */ --ui-scale: 0.8; /* ── Backgrounds ─────────────────────────────────────────────────────── */ --bg-window: #1D1D1D; --bg-panel: #252525; --bg-panel-alt: #1E1E1E; --bg-input: #282828; --dropdown-bg: #272727; --section-header-bg: #1E1E1E; /* sectionLabel(SectionLabelDesc{true, width}) in HRTFWidgets.cpp. */ --subheader-bg: #1E1E1E; --subheader-text: #AAAAAA; --subheader-tracking: calc(1.5px * var(--ui-scale)); /* Half of max(body line height + 8, short button height + 6). */ --subheader-height: calc(13px * var(--ui-scale)); --graph-bg: #1B1B1B; --graph-padding-bg: #1C1C1C; /* ── Accent ──────────────────────────────────────────────────────────── */ --accent: #008BE7; /* ── Tab bar ─────────────────────────────────────────────────────────── */ /* Not persisted in theme_settings.json; these are Theme.h's defaults. * tabGradientStyle is 3 (flat) at strength 1.0 in the active theme, and * gradientFill's flat case resolves to colorA — so a tab is a flat * tabColorA, and tabBarBg only shows if the tabs don't span the bar. */ --tab-bar-bg: #161616; --tab-fill: #2A2A2A; --tab-active-text: #DCDCDC; --tab-inactive-text: #5A5A5A; --tab-hover-overlay: rgba(255, 255, 255, 0.05); --tab-pressed-overlay: rgba(255, 255, 255, 0.10); --size-tab: calc(22px * var(--ui-scale)); /* fonts.tab, bold */ /* ── Text ────────────────────────────────────────────────────────────── */ /* textPrimary/textSecondary are not persisted in theme_settings.json; * these are Theme::defaultDark()'s values from libs/theme/Theme.h. */ --text-primary: #DCDCDC; --text-secondary: #8C8C8C; --text-disabled: #4B4B4B; /* fonts.sectionHeader.color, the only font role carrying an explicit * colour in the active theme. */ --section-header-fg: #707070; /* toolButton's text colour while active (HRTFWidgets.cpp:935). */ --text-on-fill: #EBF5F5; /* ── Outlines ────────────────────────────────────────────────────────── */ --outline: #565656; --outline-thickness: 1px; --window-outline: #565656; --window-outline-thickness: 1px; /* ── Apply-section fills (SystemEQ) ──────────────────────────────────── */ /* The green EQ toggle and blue Corr toggle, plus Apply's own blue. * Hover/held variants are the app's brighten(fill, 1.18) / (fill, 0.90). */ /* Outlines are brighten(fill, 1.5) — the edge treatment a filled button * takes, so the outline reads brighter than its own interior rather than * disappearing into it the way a flat grey edge does on a saturated fill. * Hover brightens edge and fill together. */ --eq-fill: #0D6B3B; --eq-fill-hover: #0F7E46; --eq-fill-held: #0C6035; --eq-edge: #13A058; --eq-edge-hover: #17BD68; --corr-fill: #055794; --corr-fill-hover: #0666AF; --corr-fill-held: #054E85; --corr-edge: #0782DE; --corr-edge-hover: #089AFF; --apply-fill: #056EC7; --apply-fill-hover: #0682EB; --apply-fill-held: #0463B3; /* ── Measurement row (gradientListItem, installed) ───────────────────── */ /* MeasurementsTab.cpp's installed colours, colorA rgb(44,120,68) and * colorB rgb(18,48,28), through gradientFill style 0 at the theme's * listGradientStrength 0.4 and listGradientFadeStart 0.4: colorB under * the label, sweeping to mix(colorB, colorA, 0.4) at the right edge. * Hover brightens colorA by 1.12 and colorB by 1.04. */ --row-installed-dark: #12301C; --row-installed-bright: #1C4D2C; --row-installed-dark-hover: #13321D; --row-installed-bright-hover: #1F5430; --row-fade-start: 40%; --row-hover-overlay: rgba(255, 255, 255, 0.04); --row-height-two-line: calc(46px * var(--ui-scale)); /* gradientListItemHeight(true) */ /* Neutral button interior: brighten(bgInput, 0.55) — a darkening. */ --btn-neutral-fill: #161616; --btn-neutral-fill-hover: #1A1A1A; /* ── Typography ──────────────────────────────────────────────────────── */ /* Noto Sans for text, Cascadia Code for numeric/meta, matching the * active theme's font roles. Both are stacks: the app resolves a family * name to a TTF and falls back if absent, and so does the browser. */ --font-body: "Noto Sans", "Segoe UI", system-ui, sans-serif; --font-mono: "Cascadia Code", "Cascadia Mono", Consolas, ui-monospace, monospace; --size-body: calc(18px * var(--ui-scale)); /* fonts.body */ --size-small: calc(17px * var(--ui-scale)); /* fonts.small */ --size-button: calc(15px * var(--ui-scale)); /* fonts.button */ --size-header: calc(22px * var(--ui-scale)); /* fonts.header */ --size-large: calc(22px * var(--ui-scale)); /* fonts.large */ --size-window-title: calc(22px * var(--ui-scale)); /* fonts.windowTitle */ --size-section-header: calc(16px * var(--ui-scale)); --size-list-meta: calc(14px * var(--ui-scale)); /* fonts.listMeta */ /* Every text role in the active theme is bold except body/large and the * two Cascadia graph roles. */ --weight-normal: 400; --weight-bold: 700; /* ── Metrics ─────────────────────────────────────────────────────────── */ /* borderRadius is 0.0 in the theme; only buttons round, at 3px. */ --radius-panel: 0; --radius-button: 3px; --panel-padding: 8px; /* Theme::panelPadding */ --item-spacing: 4px; /* Theme::itemSpacing */ /* Page-level spacing. The app has no equivalent — its panels butt against * the window — so these are the site's own, kept as multiples of * panelPadding rather than invented from nothing. */ --content-gap: 24px; /* 3 x panelPadding */ --content-pad-y: 32px; /* 4 x panelPadding */ --content-pad-x: 24px; /* A tab's content column, measured off the reference storefront. */ --column-width: 1160px; --tile-width: 420px; /* Rows are a uniform height so a tile and the screenshot beside it agree, * and so the two product rows match each other. */ --row-height: 300px; /* WindowChrome.cpp uses a 34px header; thicker here by request. */ --titlebar-height: calc(44px * var(--ui-scale)); --window-button-width: 46px; --statusbar-height: calc(26px * var(--ui-scale)); --tabbar-height: calc(36px * var(--ui-scale)); --tab-indicator-height: 2px; --button-height-short: calc(20px * var(--ui-scale)); /* ButtonH::Short */ --button-height-tool: calc(23px * var(--ui-scale)); --button-height-tall: calc(26px * var(--ui-scale)); --button-height-cta: calc(34px * var(--ui-scale)); /* systemEqRuntimeTransitionMs from the active theme. Everything that * moves on this site moves in this long or not at all. */ --transition: 60ms; }