feat: allow themes to use any srgb color for definitions #1756
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
Themes were previously limited to HSL raw value colors such that transparency could be created using HSLA. This made theme creation somewhat annoying and limiting. This change adopts color-mix (requires chrome 111, firefox 113 -- both older than 6 months) to create any necessary transparency. - replaces hsl raw values with hex (allows skipping color normalization) - replace hsla usage with color-mix - fix miss-named legend-color - created utils that use color-mix for easier specification - move utils.scss to be auto-imported with custom.scss - re-wrote color normilzation and resolving to resolve color-mix based colors - changed iris grid theme context to not accept a paritial Breaking change: IrisGridThemeContext no longer accepts a paritial theme. By guaranteeing the provider is a full theme we can resolve the CSS variables and normailze the colors only once per theme load globally, rather than having to do it once per grid.
bmingles
reviewed
Jan 31, 2024
| ): T { | ||
| const perfStart = performance.now(); | ||
|
|
||
| // Add a temporary div to attach temp css variables to | ||
| const tmpPropEl = document.createElement('div'); | ||
| targetElement.appendChild(tmpPropEl); | ||
|
|
||
| const varExpressions = [...extractDistinctCssVariableExpressions(record)]; |
There was a problem hiding this comment.
Is this still able to resolve strings containing multiple expressions?
var(--bbb1) var(--bbb2)
There was a problem hiding this comment.
Yes.
const el = document.createElement('div');
el.style.setProperty("--a", "#aaa");
el.style.setProperty("--b", "#bbb");
el.style.setProperty("--c", "var(--a) var(--b)");
document.body.appendChild(el);
window.getComputedStyle(el).getPropertyValue("--c");
// '#aaa #bbb'
Codecov ReportAttention:
Additional details and impacted files@@ Coverage Diff @@
## main #1756 +/- ##
==========================================
+ Coverage 46.03% 46.06% +0.03%
==========================================
Files 626 626
Lines 37576 37593 +17
Branches 9447 9458 +11
==========================================
+ Hits 17298 17318 +20
+ Misses 20223 20220 -3
Partials 55 55
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. |
bmingles
reviewed
Jan 31, 2024
…e, it used to be 0.09 in the old theme)
bmingles
reviewed
Jan 31, 2024
bmingles
reviewed
Jan 31, 2024
tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row6-text-firefox-linux.png
Show resolved
Hide resolved
bmingles
approved these changes
Jan 31, 2024
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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.
Themes were previously limited to HSL raw value colors such that transparency could be created using HSLA. This made theme creation somewhat annoying and limiting. This change adopts color-mix (requires chrome 111, firefox 113 -- both older than 6 months) to create any necessary transparency.
Style changes:
BREAKING CHANGE: