update(tooltip): Make inverted text readable in dark mode

[Xapphire13]

to: @williaster @hayes @alecklandgraf

Description

When in dark mode, the inverted tooltip text isn't readable. This change fixes that, and also improves the accessibility of the colors for light mode.

In order to make this fix, I needed to have theme mode aware styles or use some other color from the theme; there were no applicable analogs, so I went the route of exposing the current theme mode in the theme. I added a new baseInverse color value to the theme.

Motivation and Context

The colors currently used for the inverted tooltip aren't accessible, causing difficulty for viewers of all eyesights

Testing

• Tested with storybook

Screenshots

Light Mode

Before	After
Notice how the transparency decreases the contrast, making it harder to read

Dark Mode

Before	After
Notice how the text is almost completely unreadable

Checklist

• My code follows the style guide of this project.
• I have updated or added documentation accordingly.
• I have read the CONTRIBUTING document.

[airbnb-bot]

Size Changes

Package	Diff	ESM	Prev ESM	CJS	Prev CJS
core	+0.0%	566.47 KB	566.39 KB	708.52 KB	708.44 KB

Compared to master. File sizes are unminified and ungzipped.

View raw build stats

Previous (master)

{
  "apollo": {
    "esm": 10832,
    "lib": 14147
  },
  "app-shell": {
    "esm": 12906,
    "lib": 19874
  },
  "composer": {
    "esm": 68247,
    "lib": 101805
  },
  "core": {
    "esm": 579985,
    "lib": 725440
  },
  "forms": {
    "esm": 37350,
    "lib": 49298
  },
  "icons": {
    "esm": 156355,
    "lib": 205626
  },
  "layouts": {
    "esm": 15298,
    "lib": 20770
  },
  "metrics": {
    "esm": 5467,
    "lib": 7729
  },
  "test-utils": {
    "esm": 4279,
    "lib": 5937
  }
}

Current

{
  "apollo": {
    "esm": 10832,
    "lib": 14147
  },
  "app-shell": {
    "esm": 12906,
    "lib": 19874
  },
  "composer": {
    "esm": 68247,
    "lib": 101805
  },
  "core": {
    "esm": 580066,
    "lib": 725521
  },
  "forms": {
    "esm": 37350,
    "lib": 49298
  },
  "icons": {
    "esm": 156355,
    "lib": 205626
  },
  "layouts": {
    "esm": 15298,
    "lib": 20770
  },
  "metrics": {
    "esm": 5467,
    "lib": 7729
  },
  "test-utils": {
    "esm": 4279,
    "lib": 5937
  }
}

[alecklandgraf]

@Xapphire13 you need a conventional commit PR title, note these are tied to major,minor,patch releases.

Pull request title requires a conventional changelog prefix. More information: https://github.com/beemojs/conventional-changelog-beemo#commit-message-format

[Xapphire13]

🚀