STRWEB-103 Refactor away from PostCSS Color Function #133
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
JohnC-80
changed the title
This was referenced Dec 6, 2023
zburke
approved these changes
Dec 7, 2023
There was a problem hiding this comment.
LGTM. Please add a note to the CHANGELOG. In the PR description/commit it would be useful to add a snippet of the context from folio-org/stripes-components/pull/2176 to explain why we need this dependency.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
https://issues.folio.org/browse/STRWEB-103
Corresponds with folio-org/stripes-components#2176
For a long time, we've used
color()viapostcss-color-functionto blend colors. It was part of CSS-color-module 4 for a while, but then was renamed and eventually removed due to conflicts and lack of predictability with existing CSS color models. Standards eventually suggested their owncolor()function that did something completely different from what we were doing and simply used it as a means to switch color models. With the dependency aging (it was abandoned and forked by us at one point just to keep its dependencies updated) We need to take a different direction and find a better-supported way to do blends and adjustment... enter CSS-color-module 5's relative-color syntax.We're adding a plugin for this here, but it's only a polyfill for lack of complete browser support.
The feature added by
postcss-relative-color-syntaxare available in Chrome and Edge - and hopefully soon-to-be-actualized in Firefox and Safari (TP).With it we can do relative color adjustements like brightening, darkening, alpha adjustment, etc. We use this to replace the
blend()functionality that we had in the non-spec pluginpostcss-color-function.Adds and employs the
@csstools/postcss-relative-color-syntaxplugin.