Skip to content

refactor(link): migrate to semantic tokens and shared focus ring #92

Description

@joshsadam

Problem

Pathogen::Link styles inline navigation with raw neutral-* and primary-* utilities. Hover and text colours do not use --pvc-color-accent, and focus still uses black/white outlines.

Links appear throughout copy-heavy clinical screens, so they should match the same accent and focus rules as Button.

What we will build

Links that use semantic text and accent tokens plus --pvc-color-focus for keyboard focus.

How we will build it

  • Update app/components/pathogen/link.rb LINK_CLASSES.
  • Default text: --pvc-color-text or the nearest strong text role.
  • Hover/accent: --pvc-color-accent / --pvc-color-accent-strong.
  • Focus: focus-visible:outline-[var(--pvc-color-focus)].
  • Radius: prefer --pvc-radius-action if the focus shape needs a tokenized radius.
  • Check link previews and tooltip pairing still work.

Testing

  • Default and hover states in light and dark mode.
  • Focus ring visible and distinct from accent underline.
  • External link aria-label behaviour unchanged.
  • Link component tests pass.
  • pnpm run build:css:check passes if class generation changes the CSS artifact.

Not in scope

  • Button-styled links (Pathogen::Button with tag: :a stays separate).
  • Typography inside links.
  • Broad Lookbook preview cleanup.

Done when

Link matches the Foundations guidance for accent application and focus, with no hard-coded black/white outlines.

Depends on: #88
Design docs: docs/lookbook/design_system/01-design-contract.md.erb (Links, Focus And Keyboard)

Metadata

Metadata

Assignees

No one assigned

    Labels

    accessibilityenhancementNew 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