Update meter to support semantic variables#6913
Conversation
|
Thanks for the PR! 🎉 We've deployed an automatic preview for this PR - you can see your changes here:
Note The build needs to finish before your changes are deployed. |
| } | ||
|
|
||
| .d2l-meter-linear-full-bar { | ||
| background-color: var(--d2l-color-gypsum); |
There was a problem hiding this comment.
If you haven't already, I think it would be worth discussing this mapping with Jeff since this isn't really an interactive element.
|
|
||
| .d2l-meter-linear-inner-bar { | ||
| background-color: var(--d2l-color-celestine); | ||
| background-color: var(--d2l-theme-brand-color-primary-default); |
There was a problem hiding this comment.
Would be worth confirming this mapping - we don't have a semantic variable for this type of thing (progress, level of a meter).
| } | ||
| .d2l-meter-full-bar { | ||
| stroke: var(--d2l-color-gypsum); | ||
| stroke: var(--d2l-theme-border-color-subtle); |
There was a problem hiding this comment.
This is effectively being used as a background color, so this doesn't seem right to me. --d2l-theme-background-color-interactive-secondary-default maps to gypsum, but that doesn't seem right either, since this isn't really an interactive element.
| stroke: rgba(255, 255, 255, 0.5); | ||
| } | ||
| .d2l-meter-progress-bar { | ||
| stroke: var(--d2l-color-celestine); |
There was a problem hiding this comment.
Ditto with this one. Might be ok, but we should confirm that we want this to be the brand color.
2 participants
GAUD-9473
Note: Like menu, the meter components supports a "theme", by forcing light colors using
foreground-light. Like in the menu changes, this PR does not address this colors.