Add custom section title color and corner radius theme options#125
Merged
Conversation
The theme picker now exposes a "Custom section title color" toggle. When enabled it reveals a dedicated color wheel (brightness slider, hex input, and 12 preset swatches including black, navy, dark blue, midnight, slate, charcoal, etc.) so section headings can be styled independently of the primary accent. When the toggle is off, `--section-title-color` is unset and section titles continue to fall back to `var(--primary)` — existing themes are visually unchanged. The new field threads through the existing theme pipeline: it is stored in the per-dataset `data.theme` blob, propagates via `PUT /api/theme` (applyToAll or language-siblings), is restored by the dataset load handler, and is applied in both the admin preview and the public read-only CV page. Keys added to all 8 locales. https://claude.ai/code/session_01FWoGdrKqwcp3FjSo9ep57Q
The theme picker gains a "Custom section corner radius" toggle that reveals a 0–32px slider (integer steps, default 16px). The chosen value drives the new `--section-radius` CSS variable that both built-in and custom section boxes now honor via `border-radius: var(--section-radius, var(--radius-lg))` — so when the toggle is off the sections keep their pre-1.41 look. The field threads through the same pipeline as the other theme options: stored in `settings` and the per-dataset `data.theme` blob, validated in `PUT /api/theme` (integer in bounds), propagated via the shared `themeBlob` (applyToAll or language-siblings), restored on dataset load, and applied identically on the admin preview and the public read-only page. Print styles honor the custom radius too. Keys added to all 8 locales; 5 new backend tests cover validation, bulk propagation, language-sibling propagation, and null-clear. https://claude.ai/code/session_01FWoGdrKqwcp3FjSo9ep57Q
Two small theme refinements: - The top `.header` card now scales in proportion to the "Custom section corner radius" slider (1.5× — matches the pre-1.41 24px:16px ratio). New `--header-radius` CSS variable is derived client-side from the existing persisted `sectionRadius` field; `.header` falls back to `--radius-xl` so themes without a custom radius are unchanged. - `--accent` now tracks the user's chosen `gradientEnd` when a custom gradient is active, preserving the default-theme invariant that accent equals the gradient end. Elements that echo the gradient end (the item-card highlight-pulse border, print-mode timeline branch strokes) stay in sync with the rest of the theme. When no custom gradient is set, accent keeps auto-deriving from primary as before. Client-only change — no new persisted fields, no API surface change, no new i18n strings. Mirrored across admin.js and public-readonly for parity on the admin preview and the public read-only CV page. Full test suite still passes (199/199). https://claude.ai/code/session_01FWoGdrKqwcp3FjSo9ep57Q
1.41.1 made --accent follow the user's gradientEnd. The same invariant holds for --primary-dark: in the default theme its formula matches the auto --header-gradient-start, and it drives every item title in the CV (.item-title for Experience job titles, .cert-name for Certifications, .custom-item-title and .custom-bullet-title for custom sections). Currently those titles stay primary-derived even when a custom gradient is set, leaving the CV's body text disconnected from the chosen palette. This change rebinds --primary-dark = gradientStart whenever a custom gradient is active, mirrored across admin.js and public-readonly. When the custom gradient toggle is off, both --primary-dark and --accent revert to their auto-derivation. Client-only — no server, API, or i18n change. 199/199 tests still pass. https://claude.ai/code/session_01FWoGdrKqwcp3FjSo9ep57Q
Per request: stop bumping the patch version. Roll the header-radius scaling and the custom-gradient text-color fix (previously 1.41.1 + 1.41.2) into a single 1.41.0 entry. Code is unchanged; only the version files and CHANGELOG are touched. https://claude.ai/code/session_01FWoGdrKqwcp3FjSo9ep57Q
Two related theme refinements (still under 1.41.0): - Admin toolbar (.toolbar at admin.css:6) and its mobile-menu drawer (admin.css:2280) now paint with linear-gradient(135deg, --header-gradient-start, --header-gradient-end) instead of the literal --primary-dark / --dark variables. In the default theme these resolve to the same colors so the toolbar looks identical. When a custom gradient is set, the toolbar follows the user's start → end the same way the CV header does, instead of mixing a custom start with the default primary-derived dark end. - --primary-dark now follows gradientEnd (not gradientStart) when a custom gradient is active. The gradient end is typically the darker of the two endpoints in user-picked gradients (Ocean Deep, Midnight, Forest, Aurora, etc.), so item titles stay legible body text in the chosen palette. --accent likewise follows gradientEnd. Both revert to primary-derived auto values when the custom gradient toggle is off. 199/199 tests still pass. No version bump per request. https://claude.ai/code/session_01FWoGdrKqwcp3FjSo9ep57Q
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This PR adds two new theme customization options to the theme picker:
Custom section title color: Users can now toggle a color picker to set a custom color for all section headings (About, Experience, Skills, etc.), independent of the primary accent color. A preset swatch palette of 12 carefully chosen dark/neutral colors is provided for quick selection.
Custom section corner radius: Users can toggle a slider (0–32px, integer steps, default 16px) to customize the border-radius of all section boxes. The header radius scales proportionally (1.5×) to maintain visual consistency. When disabled, sections fall back to the pre-1.41
--radius-lgvalue, ensuring backward compatibility.Both options:
data.themeblob alongside existing theme fieldsPUT /api/themepropagation rules (applyToAll flag, language sibling inheritance)--section-title-color,--section-radius,--header-radius)The color picker machinery has been refactored to use a
WHEEL_IDSlookup table, eliminating repetitive conditional logic and making it trivial to add new color wheels in the future.Type of Change
Checklist
Required for all code changes
npm testpasses)package.json,package-lock.json,version.json) — bumped to 1.41.0CHANGELOG.mdhas been updated with a new entry under the correct versionIf adding or changing user-visible strings
data-i18nin HTMLen.jsonand all 7 other locale files (de,fr,nl,es,it,pt,zh)Test Coverage
sectionTitleColorandsectionRadiusvalidationapplyToAll=true(bulk apply to all datasets)applyToAll=falsehttps://claude.ai/code/session_01FWoGdrKqwcp3FjSo9ep57Q