Add pink and rose theme presets - #16
Merged
Merged
Conversation
Register a light pink and dark rose palette in the existing CSS-variable theme system so users can pick them from Appearance and the sidebar switcher, matching the purple/violet preset pattern. Co-authored-by: Severin Pereto <cookieofcode@gmail.com>
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.
Summary
Adds a user-selectable pink theme (light) and a matching rose theme (dark) to the existing named-palette system. Existing themes are unchanged.
Why
Product asked for a pink theme. The app uses fixed-mode named palettes rather than a palette-plus-light/dark toggle, so both modes are covered as two presets — the same pattern as Purple / Violet.
How to preview
localStorageundertorqvoice-theme. To force it in DevTools:localStorage.setItem('torqvoice-theme','pink')or'rose', then reload.Where tokens live
src/lib/themes.ts(THEMES,ThemeId)src/app/globals.css—.theme-pinkand.theme-rose, layered onlight/darklike the other presetssrc/app/layout.tsxinline script (pink:'light',rose:'dark')src/components/theme-picker.tsxand the sidebar theme submenu — both iterateTHEMES, so no extra UI surfacemessages/*/settings.json→appearance.themes.pink/appearance.themes.rosePublic
/share/*and/portalpages stay force-light; that path is unchanged. Destructive stays the shared red token so alerts stay distinct from the pink primary.Approximate WCAG contrast: pink body 17.1:1, muted 5.7:1, primary button 6.0:1; rose body 15.8:1, muted 5.9:1, primary button 8.4:1. Destructive stays the shared red (~5.3:1 / 5.1:1).
Tests
src/__tests__/lib/themes.test.tschecks the new IDs, mode classes (light theme-pink,dark theme-rose), that the layout FOUC map stays aligned withTHEMES, and that every preset has a.theme-*block inglobals.css. Theme registry + translation-parity: 493 tests passed.Pink theme on Settings Appearance
Rose theme on Settings Appearance
Pink theme on Work Orders
Rose theme on Work Orders
To show artifacts inline, enable in settings.