Skip to content

refactor(tokens): clean up Tooltip and DataGrid token hygiene #93

Description

@joshsadam

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

  • Tooltip still appears with subtle shadow in light and dark mode.
  • Tooltip arrow alignment unchanged.
  • Data grid frame radius is visually unchanged in light and dark mode.
  • Tooltip component tests and JS controller tests pass if affected.
  • Data grid component tests pass if affected.
  • pnpm run build:css:check passes if class generation changes the CSS artifact.

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)

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requestrubyPull requests that update ruby code

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions