fix: errors when building theme using CSS variables #15140
Conversation
crisbeto
requested review from
andrewseguin,
devversion,
jelbourn and
mmalerba
as code owners
googlebot
added
the
cla: yes
crisbeto
force-pushed
the
15107/css-variables-check
branch
3 times, most recently
from
9250ab6 to
f665356
Compare
crisbeto
changed the title
| ._demo-css-variables-theme { | ||
| $palette: mat-palette($mat-blue-grey); | ||
| $theme: mat-dark-theme($palette, $palette, $palette); | ||
| @include angular-material-theme(replace-all-values($theme, var(--test-var))); |
There was a problem hiding this comment.
I'm curious how things would actually look with the changes you've made, could we make a similar function that stores off the current values in the map (e.g. --test-var-#{n}: $value) and then updates the map with variables referring to the original value (e.g. var(--test-var-#{n})). That way we could compare how the app looks with the original theme and with the variable alias theme
There was a problem hiding this comment.
We should be able to get it to work, but I'd rather get this in first so we don't continue introducing new failures.
There was a problem hiding this comment.
I suppose it doesn't make things any worse for users
| $badge-opacity: opacity($badge-color); | ||
| background: mix($app-background, rgba($badge-color, 1), (1 - $badge-opacity) * 100%); | ||
|
|
||
| @if (type-of($badge-color) == color and type-of($app-background) == color) { |
There was a problem hiding this comment.
Add a comment along the lines:
// If the given color is actually a color *type*, we _____. If the given background is not
// specifically a color (e.g. a css variable), use it directly.(similar elsewhere)
* Adds an extra theme to the build that will allow us to verify that everything still works if somebody passes in the palette colors as CSS variables. * Fixes a handful of places where Sass would either throw an error or would produce invalid CSS. Fixes angular#15107.
crisbeto
force-pushed
the
15107/css-variables-check
branch
from
f665356 to
c2c57c8
Compare
* Adds an extra theme to the build that will allow us to verify that everything still works if somebody passes in the palette colors as CSS variables. * Fixes a handful of places where Sass would either throw an error or would produce invalid CSS. Fixes #15107.
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Fixes #15107.