Update calendar components to use semantic palette#6724
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. |
components/colors/colors.js
Outdated
| --d2l-theme-text-color-interactive-hover: var(--d2l-theme-brand-color-primary-hover); | ||
| --d2l-theme-text-color-static-faint: var(--d2l-color-galena); | ||
| --d2l-theme-text-color-static-inverted: #ffffff; | ||
| --d2l-theme-text-color-static-opaque: rgba(32, 33, 34, 0.5); /* --d2l-theme-text-color-static-standard at 50% opacity, remove once color-mix is widely supported */ |
There was a problem hiding this comment.
This variable is used in other places where we need to make text opaque but can't set opacity (e.g. disabled tooltips).
There was a problem hiding this comment.
Assuming they add this to the palette and re-extract from Figma, the script will convert the value to 8-char HEX color.
components/calendar/calendar.js
Outdated
There was a problem hiding this comment.
Looks like this should be updated as well.
components/calendar/calendar.js
Outdated
| background-color: white; | ||
| color: rgba(73, 76, 78, 0.5); | ||
| background-color: var(--d2l-theme-background-color-base); | ||
| color: var(--d2l-theme-text-color-static-opaque); |
There was a problem hiding this comment.
Let's be sure to add this to the document under d2l-calendar. (like we did for count-badge)
| } | ||
| } | ||
|
|
||
| @supports (color: color-mix(in srgb, black 50%, transparent)) { |
There was a problem hiding this comment.
Is this needed if we are setting them above?
There was a problem hiding this comment.
This is the change that would stay after color-mix is supported since it uses semantic variables directly. The other definitions is made for old browser support(although those browsers will probably go away next version update)
2 participants
GAUD-9456