johannesjo / angular-material-css-vars Goto Github PK
View Code? Open in Web Editor NEWLittle library to use css variables with @angular/material
Home Page: https://johannesjo.github.io/angular-material-css-vars/
License: MIT License
Little library to use css variables with @angular/material
Home Page: https://johannesjo.github.io/angular-material-css-vars/
License: MIT License
The input fields don't have proper colors for mat-form-field-underline
.
Look at these images and notice the underline color. (I am not interacting with the input)
After updating 1.1.1 to 1.2.0
Don't know what workflow configuration would mean.
Use any input field inside a mat form field.
This was okay before I updated to 1.2.0
@mixin mat-form-field-legacy-color($config-or-theme) {
.mat-form-field-underline {
background-color: $underline-color;
}
}
background-color: rgba(var(--palette-foreground-divider-dark), var(--palette-foreground-divider-dark-alpha, 0.7));
I'm using angular-material-css-vars in a project, where I'm not able to use the new SASS module system (@use
rule). Since v2 of this library, I cannot import variables.scss
anymore, because it's first line is the following:
@use '~@angular/material'as mat;
Is it possible to revert this change and switch back to the old SASS module system?
tinycolor2 needs to be added as a dev dependency to the root project's package.json
in order to run a npm run lib.build
For reasons I don't understand, sometimes the material team doesn't uses mat-color.
I found the following uses:
@mixin mat-ripple-theme($theme)
@mixin mat-button-theme($theme)
-> .mat-button-focus-overlay
@mixin mat-chips-theme($theme)
-> .mat-chip.mat-standard-chip
> &::after
@mixin mat-radio-theme($theme)
-> .mat-ripple-element
@mixin mat-checkbox-theme($theme)
-> .mat-checkbox .mat-ripple-element
I have no idea how to fix these, temporarily I created the next fix:
.mat-button-focus-overlay,
.mat-checkbox .mat-ripple-element,
.mat-chip.mat-standard-chip::after,
.mat-radio-button .mat-ripple-element {
$foregroundTheme: map-get($mat-css-default-theme, foreground);
$foregroundBaseColor: mat-color($foregroundTheme, base);
background-color: $foregroundBaseColor;
}
and overwrite mat-ripple-theme
@mixin mat-ripple-theme($theme) {
$foreground: map_get($theme, foreground);
$foreground-base: map_get($foreground, base);
.mat-ripple-element {
// If the ripple color is resolves to a color *type*, we can use it directly, otherwise
// (e.g. it resolves to a CSS variable) we fall back to using the color and setting an opacity.
@if (type-of($foreground-base) == color) {
background-color: rgba($foreground-base, $mat-ripple-color-opacity);
}
@else {
background-color: mat-color($foreground, base);
opacity: $mat-ripple-color-opacity;
}
}
}```
Hi,
I updated your library in my project from v1.1.x to v2.1.2 today and unfortunately the mat-css-set-palette-defaults
mixin doesn't work anymore (angular material was updated from v11 to v12, too). I delved into the code to figure out what goes wrong and I found out, that Pedro removed a crucial line of code in his commit: _public-util.scss#136 @include _mat-css-root($new-map)
I'm not a SCSS expert so I don't know if there is some other magic in place, but as far as I can see, this function is basically dead right now.
After "fixing" the function locally I can see now, that the contrast isn't working correctly, which was addressed in Pedros commit, too (e.g. black font on dark blue background). So the solution isn't that easy.
Any idea how to solve this problem?
Some background information:
My app loads the primary and accent color from an API, after the user logs in. So on the login screen I'd like to use the default angular material palettes. After I set the colors with setPrimaryColor()
everything works as expected. My theme.scss:
@use '~@angular/material' as mat;
@import '~angular-material-css-vars/public-util';
@import '~angular-material-css-vars/main';
$mat-css-dark-theme-selector: '.isDarkTheme';
$mat-css-light-theme-selector: '.isLightTheme';
@include init-material-css-vars();
@include mat-css-set-palette-defaults(mat.$indigo-palette, 'primary');
@include mat-css-set-palette-defaults(mat.$pink-palette, 'accent');
@include mat-css-set-palette-defaults(mat.$red-palette, 'warn');
When I first used mat-css-color-and-contrast
I assumed it might take a secondary property for the palette (e.g. warn, accent). Looking at the code there's mixins for each.
To follow with the existing naming convention it might be nice if primary was added.
mat-css-color-and-contrast
=> mat-css-color-and-contrast-primary
Currently it is not possible to render an application that uses MaterialCssVarsService
on the server.
It should be possible to use MaterialCssVarsService
in an SSR application, without the need to wrap the calls in a platform check call.
It seems like #39 would solve this issue. Is it planned to merge that PR? Otherwise, I could create a new PR for this issue.
Hi! I'm new with this library. I wan't to know how I can initialize a fallback or custom style by default, and give for example to the $mat-blue-grey, the value 900 as the selected primary color?
@import '../projects/material-css-vars/src/lib/public-util';
@import '../projects/material-css-vars/src/lib/main';
@include init-material-css-vars();
@include mat-css-set-palette-defaults($mat-blue-grey, 'primary');
@include mat-css-set-palette-defaults($mat-pink, 'accent');
@include mat-css-set-palette-defaults($mat-red, 'warn');
This idea is to get the same color when doing this with Material:
$primary-color: mat-palette($mat-blue-grey, 900);
The same variable is used for card background and drawer backdrop: --palette-background-card
.
Changing this variable also leads to changing drawer bg color (see .mat-drawer-backdrop
class)
Steps to reproduce the behavior:
--palette-background-card
variableDrawer bg color should not change
I forked your code and added a new color algorithm and fixed a bunch of bugs that we found when we were implementing it in our existing project. You can see our changes here:
https://github.com/pedrojrivera/angular-material-css-vars/tree/feature/googlePaletteColors
Thanks!
The message is pretty self explanatory. Let's check comparability and bump version or just don't limit version to 9.999.9.
Package "angular-material-css-vars" has an incompatible peer dependency to "@angular/material" (requires ">=8.1.3 <=9.999.9", would install "10.0.0").
I'm wondering if I have messed something up.
The only way I can import the material-css-vars main file is by using this import
@import 'angular-material-css-vars/src/lib/_main';
Has something changed and the documentation is out of date with the latest version of angular?
The text of a snack bar is not visible in dark mode, because it is not resolved correctly.
The CSS is as follows
.is-dark-theme .mat-snack-bar-container {
color: 0, 0, 0, 0.87;
}
instead of
.is-dark-theme .mat-snack-bar-container {
color: rgba(0, 0, 0, 0.87)
}
angular-material-css-vars: 2.1.0
The text of the snack bar is displayed in dark color (in dark mode).
Currently this library does not provide a changelog (as far as I can see). This makes it hard to find out if there are breaking changes.
For example, I don't know if I need to change anything with the update from version 0.3.9 to 1.1.0.
It would be great if you could add a changelog to clarify this.
You could use this format: https://keepachangelog.com/en/1.0.0/
Is it possible to change mat-font-size, mat-font-family using the same principle? Is it something you guys would consider adding?
https://material.angular.io/guide/typography#material-typography-in-your-custom-css
Why did you remove initialization for $default-theme?
@include _mat-css-root($default-theme);
To make effective the elevation configuration, I rewrite the mat-elevation mixin in this way:
@mixin mat-elevation($zValue, $color: $mat-elevation-color, $opacity: $mat-elevation-opacity) {
@if type-of($zValue) != number or not unitless($zValue) {
@error '$zValue must be a unitless number';
}
@if $zValue < 0 or $zValue > 24 {
@error '$zValue must be between 0 and 24';
}
$color-umbra: $color;
$color-penumbra: $color;
$color-ambient: $color;
@if type-of($color) != color {
$color-umbra: rgba($color, $opacity * 0.2);
$color-penumbra: rgba($color, $opacity * 0.14);
$color-ambient: rgba($color, $opacity * 0.12);
}
box-shadow: #{map-get(_get-umbra-map($color-umbra, $opacity), $zValue)},
#{map-get(_get-penumbra-map($color-penumbra, $opacity), $zValue)},
#{map-get(_get-ambient-map($color-ambient, $opacity), $zValue)};
}
In this way you can change elevation: black
into variables file.
We discovered that the mat-ripple background color on light theme is not displaying correctly.
We discovered the following in the generated styles:
.mat-checkbox .mat-ripple-element {
background-color: var(--palette-foreground-base);
}
We had to override the style to include the rgb() function.
.isLightTheme .mat-checkbox .mat-ripple-element {
background-color: rgb(var(--palette-foreground-base));
}
Updating to Angular 13 breaks sass compilation with the following errors:
Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
โท
1 โ @use '~@angular/material'as mat;
โ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
โต
node_modules/angular-material-css-vars/_main.scss 1:1 @import
apps/dashboard/src/styles.scss 1:9 root stylesheet
./apps/dashboard/src/styles.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
โท
1 โ @use '~@angular/material'as mat;
โ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
โต
node_modules/angular-material-css-vars/_main.scss 1:1 @import
apps/dashboard/src/styles.scss 1:9 root stylesheet
at tryRunOrWebpackError (/Users/max/Demonz/Projects/my-app-name/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/HookWebpackError.js:88:9)
at __webpack_require_module__ (/Users/max/Demonz/Projects/my-app-name/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:4963:12)
at __webpack_require__ (/Users/max/Demonz/Projects/my-app-name/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:4920:18)
at /Users/max/Demonz/Projects/my-app-name/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:4991:20
at symbolIterator (/Users/max/Demonz/Projects/my-app-name/node_modules/neo-async/async.js:3485:9)
at done (/Users/max/Demonz/Projects/my-app-name/node_modules/neo-async/async.js:3527:9)
at Hook.eval [as callAsync] (eval at create (/Users/max/Demonz/Projects/my-app-name/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/max/Demonz/Projects/my-app-name/node_modules/tapable/lib/Hook.js:18:14)
at /Users/max/Demonz/Projects/my-app-name/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:4898:43
at symbolIterator (/Users/max/Demonz/Projects/my-app-name/node_modules/neo-async/async.js:3482:9)
at timesSync (/Users/max/Demonz/Projects/my-app-name/node_modules/neo-async/async.js:2297:7)
at Object.eachLimit (/Users/max/Demonz/Projects/my-app-name/node_modules/neo-async/async.js:3463:5)
at /Users/max/Demonz/Projects/my-app-name/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:4863:16
at symbolIterator (/Users/max/Demonz/Projects/my-app-name/node_modules/neo-async/async.js:3485:9)
at timesSync (/Users/max/Demonz/Projects/my-app-name/node_modules/neo-async/async.js:2297:7)
at Object.eachLimit (/Users/max/Demonz/Projects/my-app-name/node_modules/neo-async/async.js:3463:5)
-- inner error --
Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
โท
1 โ @use '~@angular/material'as mat;
โ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
โต
node_modules/angular-material-css-vars/_main.scss 1:1 @import
apps/dashboard/src/styles.scss 1:9 root stylesheet
at Object.<anonymous> (/Users/max/Demonz/Projects/my-app-name/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[1].use[1]!/Users/max/Demonz/Projects/my-app-name/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[1].use[2]!/Users/max/Demonz/Projects/my-app-name/node_modules/resolve-url-loader/index.js??ruleSet[1].rules[4].rules[1].use[0]!/Users/max/Demonz/Projects/my-app-name/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].rules[1].use[1]!/Users/max/Demonz/Projects/my-app-name/apps/dashboard/src/styles.scss:1:7)
at /Users/max/Demonz/Projects/my-app-name/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:432:11
at Hook.eval [as call] (eval at create (/Users/max/Demonz/Projects/my-app-name/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
at Hook.CALL_DELEGATE [as _call] (/Users/max/Demonz/Projects/my-app-name/node_modules/tapable/lib/Hook.js:14:14)
at /Users/max/Demonz/Projects/my-app-name/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:4965:39
at tryRunOrWebpackError (/Users/max/Demonz/Projects/my-app-name/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/HookWebpackError.js:83:7)
at __webpack_require_module__ (/Users/max/Demonz/Projects/my-app-name/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:4963:12)
at __webpack_require__ (/Users/max/Demonz/Projects/my-app-name/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:4920:18)
at /Users/max/Demonz/Projects/my-app-name/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:4991:20
at symbolIterator (/Users/max/Demonz/Projects/my-app-name/node_modules/neo-async/async.js:3485:9)
at done (/Users/max/Demonz/Projects/my-app-name/node_modules/neo-async/async.js:3527:9)
at Hook.eval [as callAsync] (eval at create (/Users/max/Demonz/Projects/my-app-name/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/max/Demonz/Projects/my-app-name/node_modules/tapable/lib/Hook.js:18:14)
at /Users/max/Demonz/Projects/my-app-name/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:4898:43
at symbolIterator (/Users/max/Demonz/Projects/my-app-name/node_modules/neo-async/async.js:3482:9)
at timesSync (/Users/max/Demonz/Projects/my-app-name/node_modules/neo-async/async.js:2297:7)
Generated code for /Users/max/Demonz/Projects/my-app-name/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[1].use[1]!/Users/max/Demonz/Projects/my-app-name/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[1].use[2]!/Users/max/Demonz/Projects/my-app-name/node_modules/resolve-url-loader/index.js??ruleSet[1].rules[4].rules[1].use[0]!/Users/max/Demonz/Projects/my-app-name/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].rules[1].use[1]!/Users/max/Demonz/Projects/my-app-name/apps/dashboard/src/styles.scss
1 | throw new Error("Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: Can't find stylesheet to import.\n โท\n1 โ @use '~@angular/material'as mat;\n โ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n โต\n node_modules/angular-material-css-vars/_main.scss 1:1 @import\n apps/dashboard/src/styles.scss 1:9 root stylesheet");
Hello there, I have a problem with mixins. I've checked extraction of primary color and it works well, but 'background' and 'foreground' properties are not.
Here's an example. Text in the center should have 'card' background, but generated styles are invalid.
Generated: .custom{background-color:var(--palette-background-card)}
But --palette-background-card
is 255,255,255
instead of rgba(255,255,255)
.
In the default generated files this variable, like many others, called with rgba function: background-color: rgba(var(--palette-background-card))
, but not in mixins.
In this case it's not fully supports ready theme mixins.
In my constructor I want to set the Background of a Dialog:
this.materialCssVarsService.setVariable(MaterialCssVariables.BackgroundDialog, '#AA222255');
But now my Dialog is transparent. F12 gives me:
.mat-dialog-container {
box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
background: rgba(var(--palette-background-dialog), 1);
color: rgba(var(--palette-foreground-text), var(--palette-foreground-text-alpha, 1));
}
Other functions works as it is in documentation described.
For testing i'm using karma and jasmine, and i'm using the MaterialCssVarsService on the app.component.ts.
When i run ng test i get this error:
NullInjectorError: StaticInjectorError(DynamicTestModule)[MaterialCssVarsService -> InjectionToken Mat Css Config]:
StaticInjectorError(Platform: core)[MaterialCssVarsService -> InjectionToken Mat Css Config]:
NullInjectorError: No provider for InjectionToken Mat Css Config!
NullInjectorError: StaticInjectorError(DynamicTestModule)[MaterialCssVarsService -> InjectionToken Mat Css Config]:
StaticInjectorError(Platform: core)[MaterialCssVarsService -> InjectionToken Mat Css Config]:
NullInjectorError: No provider for InjectionToken Mat Css Config!
at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:725:1)
at resolveToken (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:11918:1)
at tryResolveToken (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:11862:1)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:11764:1)
at resolveToken (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:11918:1)
at tryResolveToken (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:11862:1)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:11764:1)
at resolveNgModuleDep (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:20234:1)
at _createClass (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:20281:1)
at _createProviderInstance (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:20251:1)
I've already added MaterialCssVarsService to the providers but i keep getting this error. What should I do? What is this mat css config?
Hi there,
After installing and adding the code as per the documentation page, I tried building the app to make sure the base framework was good before implementing the themes in the components.
Initially I was hit by a Null Injector issue, but it seems that adding "postinstall": "ngcc" and doing an npm install has rid me of this, but I am still seeing an issue where the compiler complains that the mixin app-theme doesn't exist.
Checking the repo I can see it does exist here, but in the node_module compiled library on my machine I can't find it.
After upgrade ng material to 13, material css vars failed to compile. The issue seems related to how angular css is imported without "~".
Hello,
I realy would like to understand the project better, and would love to hear from your feedback.
Can I use this lib to integrate custom material themes for my custom components in my project?
https://material.angular.io/guide/theming-your-components
The problem with the "official" approach is that it breaks the encapsulation, and I think css vars are much easier, so I could just do something like:
@include variables
color: var(PrimaryColor);
Also I think the first sentence is not very clear :D Im not hear to learn about rainbows :O
Feedback? :)
The mat select options that are listed as disabled are not grayed out.
https://i.imgur.com/otDUWoQ.png
https://i.imgur.com/CuqiseH.png
rendered css variables
.mat-option.mat-option-disabled {
color: rgba(var(--palette-foreground-hint-text), 1);
}
in scss
&.mat-option-disabled {
color: mat-color($foreground, hint-text);
}
Why is the mat-color($foreground, hint-text) = rgb(0, 0, 0)?
I don't think I modified the foreground color. Do I need to set it?
Hey, not sure if this is a new feature you want to add, or just something I'm doing the wrong way but I want my app to have more than just 2 themes (dark & light) and some of them I'd like to set a custom background colour for.
This is fine using setVariable() when on a light theme, but if I use a dark theme then all the CSS rules get overriden by the dark-theme selector set which are more specific. I know that I could do something like this inside my style.css (or some theme sheet included therein):
&.dark-theme .background {
background-color: <value>
}
But that still means that all themes that are set to "Dark" are using the same background colour, just not the material default of #202020. Do you have any suggestions?
I was looking at using a work around by having some themes set as light themes and using setVariable to update the background/card/dialog colours to be what I want them to, but this then means that your amazing auto-contrasting code doesn't evaluate it properly and I still get the dark text on the dark background.
Any help would be appreciated, I'd prefer a more programmatic solution than having to put in a bunch of CSS fixes/supporting sheets, etc; but just getting a better understanding of how to implement this would be great :)
Hi, is there an update coming for Angular 9?
I tried to update to Angular 9/Material 9 but got problems with the str-slice method for example.
Is there a way to use a set material style as a "fallback"?
i.e. @import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
there already seems to be some kind of fallback because there is a light blue color that shows before my themeService has time to change it to the correct color. Didn't know if there was a way to override that with default theme
Currently the peer dependencies are defined as followed.
"peerDependencies": {
"@angular/common": ">=8.1.3 <=10.999.9",
"@angular/core": ">=8.1.3 <=10.999.9",
"@angular/material": ">=8.1.3 <=10.999.9"
},
If you are using current version of angular and angular material, this leads to the error message Package "angular-material-css-vars" has an incompatible peer dependency to "@angular/material" (requires ">=8.1.3 <=10.999.9", would install "11.1.0").
We are using angular and angular material in version 11.1.0 and have no problems with the angular-material-css-vars package. Therefore it should be updated to support angular 11 ๐
Alpha variable is missing on disabled-text
Disabled inputs are not graded out
Just disable some input fields
Expecting to have graded out input field when is disabled
I will create PR in order to fix this issue. please merge it when is possible. Thanks
Hi!
Could you update npm package in order to have available the last changes?
Thanks!
Hi. I'm getting the following error:
`ERROR in ./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
background: mix($app-background, rgba($badge-color, 1), (1 - $badge-opacity) * 100%);
^
Argument `$color` of `rgba($color, $alpha)` must be a color
in /Users/git/project/node_modules/@angular/material/_theming.scss (line 1899, column 40)`
I have a feeling it has to do with my angular/angular material version (7.2) - I've tried using an earlier version of the library (0.2.1) and still had no luck. Am I correct in my assumption? Any ideas?
Thanks!
It is not uncommon for applications to have multiple theme mixins, following this guide. Currently, this library doesn't allow you to access the theme generated and pass it into your own mixins.
One way to handle this would be to use the @content feature of sass similar to what's suggested in this stackoverflow and what Material does for MDC mixins.
I'm thinking it would look something like:
initMatTheme(){
// $theme gets created by the mixin so we can use it here
// content we pass in this block will get applied both at the root and within the dark theme selector
my-mixin($theme);
}
Let me know if you think it's a good idea. I may be able to contribute.
Hi,
just wanted to tryout but it doesn't add rgba()
to the styles, I used the tutorial from the README.md.
Trying to figure it out, I tried the demo of this repo:
Example App CSS:
.isDarkTheme .mat-toolbar.mat-primary {
background: rgba(var(--palette-primary-500), 1);
color: rgba(var(--palette-primary-contrast-500), 1);
}
in my app:
.isDarkTheme .mat-toolbar.mat-primary {
background: var(--palette-primary-500);
color: var(--palette-primary-contrast-500);
}
is the release out of date or did I miss something?
I'm successfully using angular-material-css-vars in one of my Anuglar 9 projects and noticed that the package.json still defines
"peerDependencies": {
"@angular/common": "^8.1.3",
"@angular/core": "^8.1.3",
"@angular/material": "^8.1.3"
}
which leads to warnings during npm install:
npm WARN [email protected] requires a peer of @angular/common@^8.1.3 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/core@^8.1.3 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/material@^8.1.3 but none is installed. You must install peer dependencies yourself.
Thanks!
this.materialCssVarsService(MaterialCssVariables.BackgroundAppBar, 'green');
this doesn't work anymore in Angular v.12
'BackgroundStatusBar' = '--palette-background-status-bar',
'BackgroundAppBar' = '--palette-background-app-bar',
'BackgroundBackground' = '--palette-background-background',
'BackgroundHover' = '--palette-background-hover',
'BackgroundHoverAlpha' = '--palette-background-hover-alpha',
'BackgroundCard' = '--palette-background-card',
'BackgroundDialog' = '--palette-background-dialog',
'BackgroundDisabledButton' = '--palette-background-disabled-button',
'BackgroundDisabledButtonAlpha' = '--palette-background-disabled-button-alpha',
'BackgroundRaisedButton' = '--palette-background-raised-button',
'BackgroundFocusedButton' = '--palette-background-focused-button',
'BackgroundSelectedButton' = '--palette-background-selected-button',
'BackgroundSelectedDisabledButton' = '--palette-background-selected-disabled-button',
'BackgroundDisabledButtonToggle' = '--palette-background-disabled-button-toggle',
'BackgroundUnselectedChip' = '--palette-background-unselected-chip',
'BackgroundDisabledListOption' = '--palette-background-disabled-list-option',
It looks like the variable name was repeated instead of using the alpha variable for foreground disabled buttons.
This results in compiled code like this:
color: rgba(0, 0, 0, 0, 0, 0);
color: rgba(var(--palette-foreground-disabled-button), var(--palette-foreground-disabled-button));
Angular 12 was released yesterday. It does seem to cause issues with this package.
The values for various foreground and background colors don't seem to be applied correctly to the Angular Material components anymore:
latest
Configuration like described in the README
Steps to reproduce the behavior:
I've also set up a repo for demonstration:
https://github.com/json-derulo/angular-material-css-vars-angular12
The components look like they did in Angular 11, with the primary / accent / warn color and the border / background colors being applied correctly.
It might have to do either with Ivy, or the new Sass module system, which Angular both mentioned in their blog
Currently, as it stands, this library does not support IE11 as IE11 does not support CSS Variables.
A polyfill should fix this, and it may be more ideal to supply that polyfill with this library.
I like your tool a lot, I was long time searching for something like that!
But when I want to import it to my module, I get this error:
angular-material-css-vars.js:633 Uncaught TypeError: Object(...) is not a function
at angular-material-css-vars.js:633
at Module../node_modules/angular-material-css-vars/fesm5/angular-material-css-vars.js (angular-material-css-vars.js:635)
at __webpack_require__ (bootstrap:83)
at Module../src/app/app.module.ts (app.component.ts:9)
at __webpack_require__ (bootstrap:83)
at Module../src/main.ts (main.ts:1)
at __webpack_require__ (bootstrap:83)
at Object.0 (main.ts:15)
at __webpack_require__ (bootstrap:83)
at checkDeferredModules (bootstrap:45)
I use Angular 7, is it compatible with it?
I receive the following error with a brand new Angular CLI app:
ERROR in ./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/dist/cjs.js??ref--15-3!./src/styles.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: $string: null is not a string.
If I import the public-utils in the styles.scss
it seems to compile
Thank you for your great work, I adopted it and I found a small bug.
Sometimes when Material applies colors (primary, accent or warn) sets the opacity value.
You can check this behavior with SlideToggle, when checked the class .mat-slide-toggle-bar uses accent-500 with 0.54 of opacity.
To fix the problem, when your version of mat-color returns the variable:
@return rgba($color, _mat-css-str-replace($color, ')', '-alpha, 1'));
I replaced the default value with the Material expected value:
$default-opacity: if($opacity == null, 1, $opacity);
@return rgba($color, _mat-css-str-replace($color, ')', "-alpha, #{$default-opacity})"));
Nothing more and this seems to solve all the problems I've found.
I hope this will help you.
First of all, this project is amazing! Thank you.
I have a question. Is it possible to use a custom mat-dark-theme and mat-light-theme.
Before using your project, I was applying material colors the classic Angular way. Because the default Angular Material dark and light themes didn't fit my needs, I created my color themes using a custom mat-dark-theme and mat-light-theme, which had some colors slightly changed.
Can I, using this project, change the colors which are used in mat-dark-theme and mat-light-theme of plug in new dark and light themes?
Thank you.
Hi,
const hex = '#3f51b5';
this.materialCssVarsService.setDarkTheme(true);
this.materialCssVarsService.setPrimaryColor(hex);
this.materialCssVarsService.setVariable(MaterialCssVariables.BackgroundCard,hex);
this.materialCssVarsService.setAccentColor('#333');
I have followed the instructions as linked on the readme, and all works wonderfully in development with ng serve. However, when ng serve --prod is running I receive an error saying, "StaticInjectorError(AppModule)[DynamicColorsModule -> MaterialCssVarsService_1]:
StaticInjectorError(Platform: core)[DynamicColorsModule -> MaterialCssVarsService_1]:
NullInjectorError: No provider for MaterialCssVarsService_1!"
I am using Angular 8
The documentation encourages to use the @import
rule to load the necessary SCSS files from the library. A while ago, the Sass team introduced a new module system with the new @use
rule.
I am able to use this new module system to initialize the library with the following code:
@use "~angular-material-css-vars/main";
@include main.init-material-css-vars();
So far, so good. But see what happens if I need the $mat-css-theme
variable:
@use "~angular-material-css-vars/main";
@include main.init-material-css-vars() {
@include init($mat-css-theme);
}
I'm now getting a SassError: Undefined variable
during build. It seems like the $mat-css-theme
variable like it is declared, is not available in the new module system.
As at some time @import
will be deprecated, this library should be updated to work well with the @use
rule.
Observation. A single Angular Material theme is roughly half the size as this package.
type | Size on Disk | Gzipped |
---|---|---|
Angular Material single theme | 62.9kb | 8.3 kB |
angular-material-css-vars | 144 kB | 15.3 kB |
My guess is the dark and light both are getting built which doubles the size. Are both of these actually necessary?
I've noticed the mapping of css variables is incorrect for the following properties: default, lighter, darker, text, default-contrast, lighter-contrast, darker-contrast. The reason is that the mat-palette()
calls used in init-mat-theme
produces a hue specific variable (--palette-primary-500
) instead of the original named one (--palette-primary-default
for default).
I've got a product which uses material extensively, but we're trying to shift towards css variables. This is how our material theme was configured:
$app-primary: mat-palette($page-primary, 700, 200, 900);
$app-accent: mat-palette($page-accent, 500, 200, 900);
$app-warn: mat-palette($page-error);
$app-material-theme: mat-light-theme($app-primary, $app-accent, $app-warn);
Shifting to css variables using your awesome library was actually really easy.
@include init-material-css-vars() {}
$app-primary: mat-palette($page-primary, 700, 200, 900);
$app-accent: mat-palette($page-accent, 500, 200, 900);
$app-warn: mat-palette($page-error);
@include mat-css-set-palette-defaults($app-primary, 'primary');
@include mat-css-set-palette-defaults($app-accent, 'accent');
@include mat-css-set-palette-defaults($app-warn, 'warn');
Done, except for one issue.
For $app-primary
, the material components now take 500 as default color, instead of the 700 specified in the mat-pallete()
. This is because the actual style in material color: map-get($primary)
is rendered as color: rgb(var(--palette-primary-500))
. This should be color: rgb(var(--palette-primary-default))
.
The reason this happens is how init-mat-theme
makes its themes. It calls mat-palette()
, which executes the following code:
@function mat-palette($base-palette, $default: 500, $lighter: 100, $darker: 700, $text: $default) {
$result: map_merge($base-palette, (
default: map-get($base-palette, $default),
lighter: map-get($base-palette, $lighter),
darker: map-get($base-palette, $darker),
text: map-get($base-palette, $text),
default-contrast: mat-contrast($base-palette, $default),
lighter-contrast: mat-contrast($base-palette, $lighter),
darker-contrast: mat-contrast($base-palette, $darker)
));
...
}
Here, default
is assigned map-get($base-palette, $default)
, which fetches the --palette-primary-500
css variable for primary. This should be --palette-primary-default
.
Because of this bug, any palette with non-default hues will unfortunately not work with your library.
To end on a good note, thanks for making this awesome library. It made my work a hell of a lot easier. You rock! ๐
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.