Skip to content

Chart: compensate for TanStack's tick/legend text opacity to reach 90 Lc contrast #608

Description

@depthark

libs/ui/src/tokens/components/molecules/_chart.css documents that TanStack Charts composites axis tick and legend labels at fillOpacity 0.68 before painting, so the rendered text sits at --color-chart-fg (fg-primary) at 68% over the surface rather than the token's full value, and does not reach the repo's 90 Lc gate on its own.

Fixing this properly means compensating for the library's baked-in opacity (or overriding it via TanStack's theme options), not swapping the --color-chart-fg token itself, which is correct for other uses.

Follow-up:

  • Investigate whether TanStack Charts' scene/theme options expose a way to override fillOpacity/strokeOpacity for tick/legend/axis text.
  • If not overridable, pick a stronger --color-chart-fg value that still reaches 90 Lc after the library's 0.68 composite, and re-validate against resolved values (per the dataviz validator).

Ref: PR #552 review (coderabbitai).

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions