feat: Theming Iris Grid

[bmingles]

• Created new base theme for Iris grid and mapped existing styles to it
• Added color palettes to styleguide
• IrisGrid now creates and resolves css variables when creating the default theme

Testing

• Easiest way to see the new color palettes is in the styleguide.
• Iris Grid should look as it did before except for a few cases where the new color palette doesn't exactly align with the old one. aka. a color may have a subtle change in saturation but there shouldn't be any changes to the visual color.

Current mapping of Bootstrap gray palette to new --dh-color-gray vars based on Don's POC. The Bootstrap variables will get updated in a future PR to pull from the new vars, but this is how things line up right now:

BREAKING CHANGE: Enterprise will need ThemeProvider for the css variables to be available

[codecov]

Codecov Report

Attention: 25 lines in your changes are missing coverage. Please review.

Comparison is base (cf1b368) 46.45% compared to head (14df256) 46.47%.

❗ Current head 14df256 differs from pull request most recent head 4e2d70e. Consider uploading reports for the commit 4e2d70e to get more accurate results

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1568      +/-   ##
==========================================
+ Coverage   46.45%   46.47%   +0.01%     
==========================================
  Files         571      572       +1     
  Lines       36030    36060      +30     
  Branches     9020     9026       +6     
==========================================
+ Hits        16738    16759      +21     
- Misses      19240    19249       +9     
  Partials       52       52              

Flag	Coverage Δ
unit	46.47% <54.54%> (+0.01%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files	Coverage Δ
packages/code-studio/src/styleguide/Colors.tsx	100.00% <ø> (ø)
packages/code-studio/src/styleguide/StyleGuide.tsx	100.00% <ø> (ø)
packages/iris-grid/src/IrisGridTheme.ts	100.00% <100.00%> (ø)
packages/utils/src/ColorUtils.ts	100.00% <100.00%> (ø)
packages/iris-grid/src/IrisGrid.tsx	26.96% <83.33%> (+0.12%)	⬆️
...ackages/code-studio/src/styleguide/ThemeColors.tsx	40.00% <40.00%> (ø)

... and 6 files with indirect coverage changes

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[mofojed]

Not sure why some of the grid tests are failing - looks like the colour isn't matching up. Double check that the correct colour is being used, if it is a new colour then update the snapshots (though I'm confused why can open a simple table passes but rollup/goto don't).

[mofojed]

Many of the variables above are no longer used (e.g. $selection-color).
Also the new selection color doesn't match the old color; I think that may be intentional? Confirm with @dsmmcken , but that's one reason the goto row tests are failing.

[bmingles]

I deleted the unused vars. Will check with Don on the selection color diff.

[mofojed]

These don't match what they were before:

  tree-line-color: $gray-500; 
  tree-marker-color: $gray-300;
  tree-marker-hover-color: $gray-100;

If that's intentional, then need to update snapshots. Seems odd we're going in the reverse on the gray scale though (the scale may not be the same anymore? Dunno).

[bmingles]

Spectrum numbers ascending 1-100 darkest to lightest. Here's how Don mapped the colors in his POC (left side old, right side new)

[bmingles]

I've updated the tree variables to be closer to the original for now. Seems to have fixed these tests