feat(tokens): neutralize light palette (premium direction) + sidebar adapts to theme - #126
Conversation
…bar adapts to theme Lavender light chrome → warm cool-neutrals (Linear/Mercury study), keeping violet --primary as the brand accent. Sidebar stops being fixed-dark and now adapts to the theme (warm-gray panel in light, editorial near-black in dark). - Light: --background #F5F4FA→#FBFAF7, --muted #F1EEFA→#F2F1EC, --border #DDD7EE→rgba(20,18,12,.09) hairline, fg hierarchy de-lavendered. - Sidebar: light warm-gray (#F5F3EE); dark override added (#151126). - Dark base palette and risk/semantic/chart tones unchanged (out of scope). - Mirrored into public/visual/pulso-ds/globals.css + DESIGN.md tables so the three token layers stay in lockstep (check:tokens --strict ✓). - Regenerated tokens/pulso-tokens.css artifact (build:tokens --check ✓). - Persist premium study as traceable norte in design/product-reference/ (dashboard.html + tokens-premium.css + premium-direction.html + README). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 797fd1be64
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
|
|
||
| <meta charset="UTF-8"> | ||
| <title>Crisis Monitor — Dashboard Premium</title> | ||
| <link rel="stylesheet" href="../../tokens-premium.css"> |
There was a problem hiding this comment.
When this page is opened from design/product-reference/, ../../tokens-premium.css resolves to a repo-root tokens-premium.css, but the only committed file from a repo-wide search is design/product-reference/tokens-premium.css. That leaves the dashboard without the --pm-* variables it uses throughout the inline CSS, so the reference renders largely unstyled; the sibling premium-direction.html has the same relative-path problem.
Useful? React with 👍 / 👎.
| </script> | ||
|
|
||
| <div id="tweaks-mount"></div> | ||
| <script type="text/babel" src="tweaks-panel.jsx"></script> |
There was a problem hiding this comment.
This new dashboard loads tweaks-panel.jsx, but a repo-wide search for tweaks-panel.jsx/useTweaks only finds this reference, so opening the page from design/product-reference/ 404s that script and the next Babel block calls window.useTweaks(...) while it is undefined. In that scenario the Tweaks panel crashes before it can render or apply the density/surface/accent controls.
Useful? React with 👍 / 👎.
| --sidebar-accent-foreground: #FFFFFF; | ||
| --sidebar-border: #2A2540; | ||
| --sidebar-ring: color-mix(in oklab, #8A63FF 45%, transparent); | ||
| --sidebar-accent: #EBE9E2; |
There was a problem hiding this comment.
With the light sidebar accent now set to #EBE9E2, the existing visual-sidebar CSS still renders active theme buttons as background: var(--sidebar-accent); color: var(--sidebar-primary-foreground) in public/visual/pulso-ds/pages/_page.css and index.html. Because --sidebar-primary-foreground remains white, those active icons become white on a near-white background in light mode (about 1.2:1 contrast); use the accent foreground token for this state or make the active background the primary color.
Useful? React with 👍 / 👎.
2 participants
Contexto
A migração de tokens no produto (nomes #256 + valores #257) adotou os tokens lavanda que estavam no repo do Pulso. Mas o norte visual são os estudos premium (Linear/Mercury, neutros frios). Esta PR executa os passos 1+2 do plano de adoção premium:
O que muda
Passo 1 — referência versionada
design/product-reference/comdashboard.html(o alvo a espelhar),tokens-premium.css,premium-direction.htmle um README de proveniência. Saem do~/Downloadsvolátil para o repo.Passo 2 — neutralização dos tokens (
src/app/globals.css)Light chrome lavanda → cool-neutrals quentes, mantendo
--primaryvioleta (#6C46F5):--background#F5F4FAlavanda#FBFAF7warm off-white--muted/--secondary/--accent#F1EEFA#F2F1EC--surface-2/--elevated#ECE7F8#EBE9E2--border#DDD7EEsólidorgba(20,18,12,.09)hairline--foreground/--fg#171629indigo#1C1B22neutro--fg-muted#73718A#65646E--fg-subtle#706C88#8C8B94#F5F3EEclaro /#151126escuro#0C0B10fica para depois.public/visual/pulso-ds/globals.css+ tabelas doDESIGN.mdpara as três camadas ficarem em sincronia.tokens/pulso-tokens.cssregenerado.Verificação
bun run check:tokens→ ✓ Tokens consistentes entre as três fontesbun run build:tokens --check→ ✓ tokens/ em dia com a fonte canônicaPróximos passos (não nesta PR)
vendor/pulso/pulso-tokens.css+node scripts/sync-pulso-tokens.mjsno Crisis Monitor.dashboard.html(sidebar → dashboard → sidesheet da Cris), cada etapa um PR.🤖 Generated with Claude Code