saas-js / saas-ui

The React component library for startups, built with Chakra UI.
https://saas-ui.dev
MIT License
1.36k stars 131 forks source link

Chart Tooltip Doesn't Allow for Theming #257

Closed benmcginnis closed 2 months ago

benmcginnis commented 2 months ago

Description

We have a custom tooltip theme that uses a dark background, but because the tooltip explicitly sets the "muted" token for the color of the metric name via a prop, we can't easily override the theming, leading to unreadable text.

See screenshot: image (8)

Can this be refactored into a theme setting rather than using a style prop?

Version number of charts is 0.11.3

Link to Reproduction

No response

Steps to reproduce

  1. Go to '...'
  2. Click on '...'
  3. Scroll down to '...'
  4. See error

Saas UI Version

2.8.8

Chakra UI Version

2.8.2

Browser

Arc 1.59 (Chromium 128)

Operating System

Additional Information

No response

linear[bot] commented 2 months ago

SUI-533 Chart Tooltip Doesn't Allow for Theming

Pagebakers commented 2 months ago

Will change this to use a css variable color="var(--tooltip-fg-muted, var(--chakra-colors-muted))" that you can overwrite in the theme.

https://github.com/saas-js/saas-ui/commit/3eed6487c55db00167e96dd1aa3b2a1f682b11d8