refactor: Removes hard coded colors

[michael-s-molina]

SUMMARY

Removes hard coded colors defined in src/components/styles.ts. The colors defined in this file were used only in the Select component so they were migrated to src/components/Select/styles.tsx and adjusted to conform to the theme colors.

Here is the theme color palette and the corresponding mapping:

Here are some screenshots of Select component:

TEST PLAN

You can view the select component inside Storybooks.

ADDITIONAL INFORMATION

• Has associated issue:
• Changes UI
• Requires DB Migration.
• Confirm DB Migration upgrade and downgrade tested.
• Introduces new feature or API
• Removes existing feature or API

[junlincc]

welcome on board Michael! thanks for the first PR!! @michael-s-molina

[codecov-io]

Codecov Report

Merging #11977 (a484e36) into master (cc44a2c) will decrease coverage by 2.63%.
The diff coverage is 85.71%.

@@            Coverage Diff             @@
##           master   #11977      +/-   ##
==========================================
- Coverage   66.26%   63.62%   -2.64%     
==========================================
  Files         941      941              
  Lines       45715    45826     +111     
  Branches     4395     4398       +3     
==========================================
- Hits        30293    29159    -1134     
- Misses      15287    16491    +1204     
- Partials      135      176      +41     

Flag	Coverage Δ
cypress	?
javascript	62.69% <85.71%> (+0.01%)	⬆️
python	64.18% <ø> (-0.08%)	⬇️

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

Impacted Files	Coverage Δ
superset-frontend/src/components/Select/styles.tsx	63.88% <75.00%> (-29.07%)	⬇️
...end/src/components/Select/SupersetStyledSelect.tsx	88.17% <100.00%> (-1.94%)	⬇️
superset-frontend/src/explore/App.jsx	0.00% <0.00%> (-100.00%)	⬇️
superset-frontend/src/dashboard/App.jsx	0.00% <0.00%> (-100.00%)	⬇️
superset-frontend/src/explore/index.jsx	0.00% <0.00%> (-100.00%)	⬇️
superset-frontend/src/dashboard/index.jsx	0.00% <0.00%> (-100.00%)	⬇️
superset-frontend/src/setup/setupColors.js	0.00% <0.00%> (-100.00%)	⬇️
superset-frontend/src/chart/ChartContainer.jsx	0.00% <0.00%> (-100.00%)	⬇️
superset-frontend/src/explore/reducers/index.js	0.00% <0.00%> (-100.00%)	⬇️
...et-frontend/src/dashboard/containers/Dashboard.jsx	0.00% <0.00%> (-100.00%)	⬇️
... and 148 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update cc44a2c...a484e36. Read the comment docs.

[michael-s-molina]

welcome on board Michael! thanks for the first PR!! @michael-s-molina

@junlincc Thanks! I'm very excited to work with you.

[ktmud]

Welcome onboard, @michael-s-molina ! Thanks for working on this.

Could you also add a screenshot of Select component in real action just for sanity check?

[rusackas]

I think the scope of this PR is great, but I'm hoping we can use the theme context via the <ThemeProvider> rather than importing/using the supersetTheme directly from superset-ui

[michael-s-molina]

Welcome onboard, @michael-s-molina ! Thanks for working on this.

Could you also add a screenshot of Select component in real action just for sanity check?

@ktmud Thanks! I added the screenshots as requested.

@rusackas All styles are now coming from <ThemeProvider>.

The Select component uses a combination of style sources (react-select theme, default theme and theme props). If we have the intention on unifying all this then we should do it in another PR because we may need a bunch of refactoring.

[ktmud]

I think current approach makes sense, given how react-select structures its styling. With #11916 in the work, I wouldn't invest too much in the refactoring.

[ktmud]

Tested locally and everything looks great.

[rusackas]

Congrats on the first merge! Welcome to the community!