Problem
A few small component styles duplicate token values or use equivalent Tailwind radius names instead of Pathogen role tokens:
- Tooltip shadow is written as a raw value:
shadow-[0_1px_3px_oklch(0_0_0/0.2)], which duplicates --pvc-shadow-overlay.
- Tooltip uses
rounded-lg, which is visually 8px but does not name the panel/overlay radius role.
- Tooltip uses raw
duration-200 instead of the overlay motion token.
- Data grid frame uses
rounded-lg, which is visually 8px and should reference --pvc-radius-panel.
These are mostly hygiene, but they matter because tokenized code keeps the implementation aligned when tokens change.
What we will build
A small token-hygiene pass for Tooltip and DataGrid:
- Tooltip reads from shared overlay shadow, panel radius, and overlay duration tokens.
- DataGrid frame reads from the panel radius token.
How we will build it
- In
app/components/pathogen/tooltip.rb:
- replace the hard-coded shadow class with
shadow-[var(--pvc-shadow-overlay)]
- replace
rounded-lg with rounded-[var(--pvc-radius-panel)]
- replace
duration-200 with duration-[var(--pvc-duration-overlay)]
- keep
bg-neutral-950 and arrow fill as the documented overlay exception
- In
app/components/pathogen/data_grid_component.rb:
- replace outer frame
rounded-lg with rounded-[var(--pvc-radius-panel)]
- keep data-grid scoped colour tokens and dark
neutral-950 body/header inset
- Rebuild/check generated CSS if class extraction changes the artifact.
Testing
Not in scope
- Moving tooltip fill to semantic surface tokens; overlay
neutral-950 stays.
- Migrating data-grid scoped colours to full
--pvc-color-*; scoped grid tokens are fine per docs.
- Virtual scrolling or pagination work.
Done when
Tooltip and DataGrid use shared role tokens for these values, and no duplicated tooltip overlay shadow string remains in component code.
Closes / replaces: #94
Depends on: None.
Design docs: docs/lookbook/design_system/02-tokens.md.erb (Elevation, Component-Specific Tokens, Where Components Are Today); docs/lookbook/design_system/03-dark-mode.md.erb (Dense Data)
Problem
A few small component styles duplicate token values or use equivalent Tailwind radius names instead of Pathogen role tokens:
shadow-[0_1px_3px_oklch(0_0_0/0.2)], which duplicates--pvc-shadow-overlay.rounded-lg, which is visually 8px but does not name the panel/overlay radius role.duration-200instead of the overlay motion token.rounded-lg, which is visually 8px and should reference--pvc-radius-panel.These are mostly hygiene, but they matter because tokenized code keeps the implementation aligned when tokens change.
What we will build
A small token-hygiene pass for Tooltip and DataGrid:
How we will build it
app/components/pathogen/tooltip.rb:shadow-[var(--pvc-shadow-overlay)]rounded-lgwithrounded-[var(--pvc-radius-panel)]duration-200withduration-[var(--pvc-duration-overlay)]bg-neutral-950and arrow fill as the documented overlay exceptionapp/components/pathogen/data_grid_component.rb:rounded-lgwithrounded-[var(--pvc-radius-panel)]neutral-950body/header insetTesting
pnpm run build:css:checkpasses if class generation changes the CSS artifact.Not in scope
neutral-950stays.--pvc-color-*; scoped grid tokens are fine per docs.Done when
Tooltip and DataGrid use shared role tokens for these values, and no duplicated tooltip overlay shadow string remains in component code.
Closes / replaces: #94
Depends on: None.
Design docs:
docs/lookbook/design_system/02-tokens.md.erb(Elevation, Component-Specific Tokens, Where Components Are Today);docs/lookbook/design_system/03-dark-mode.md.erb(Dense Data)