Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrate Less color variables to CSS custom properties (variables) #8171

Merged
merged 10 commits into from
Mar 29, 2024

Conversation

anselmbradford
Copy link
Member

@anselmbradford anselmbradford commented Feb 27, 2024

Changes

  • Migrate less color variables to CSS custom properties (variables)
  • Update to design-system@0.42.0
  • Update to cfpb-chart-builder@6.5.0

How to test this PR

  1. yarn install && yarn build and the site should be unchanged.

@anselmbradford anselmbradford changed the title Migrate less color variables to CSS custom properties (variables) Migrate Less color variables to CSS custom properties (variables) Feb 27, 2024
@anselmbradford anselmbradford force-pushed the ans_css_props branch 2 times, most recently from e28bf4d to e92c400 Compare March 1, 2024 15:47
@anselmbradford anselmbradford marked this pull request as ready for review March 26, 2024 21:31
Copy link
Member

@wpears wpears left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you also take the @s out of the colorMap in js/routes/on-demand/simple-chart/common-styles.js (it doesn't matter for functionality, just consistency).

Copy link
Member

@wpears wpears left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Probably worth just fully updating the custom styles in apps/form-explainer/css/form-explainer.less, no?

Copy link
Member

@wpears wpears left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome work on this, just two little nits.

@anselmbradford
Copy link
Member Author

Probably worth just fully updating the custom styles in apps/form-explainer/css/form-explainer.less, no?

One caveat with the CSS variables is the Less utilities don't recognize them. So a utility like fade(…) wants a Less color variable to be passed in and will error if the value is a CSS variable. In the future we will be able to do this natively with relative RGB colors, but at the moment Firefox is the only modern browser that does not yet support that.

I've updated the JS and code comment names to be in CSS variable style in 2736de2

@anselmbradford anselmbradford added this pull request to the merge queue Mar 29, 2024
@anselmbradford anselmbradford removed this pull request from the merge queue due to a manual request Mar 29, 2024
@anselmbradford anselmbradford added this pull request to the merge queue Mar 29, 2024
Merged via the queue into main with commit 3205e90 Mar 29, 2024
11 checks passed
@anselmbradford anselmbradford deleted the ans_css_props branch March 29, 2024 22:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants