Git Product home page Git Product logo

angular-material-css-vars's People

Contributors

adrigm avatar austenstone avatar cgatian avatar daskus1 avatar dependabot[bot] avatar dflor003 avatar fstrelczuk avatar johannesjo avatar json-derulo avatar literalpie avatar negue avatar priveraussi avatar vpetrusevici avatar wlada avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

angular-material-css-vars's Issues

mat-form-field-underline color

๐Ÿ‘ป Brief Description

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)

Before
image

After
image

๐Ÿฅž Action version

After updating 1.1.1 to 1.2.0

๐ŸŽฉ workflow configuration

Don't know what workflow configuration would mean.

Steps To Reproduce

Use any input field inside a mat form field.

๐Ÿš“ Expected behavior

Expected
image

See Angular Material Input

โž• Additional context

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));

v2 - variables.scss not usable with the old SASS module system

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?

Problems with foreground base color

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;
    }
  }
}```

"@mixin mat-css-set-palette-defaults" does not work anymore

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');

nit: mat-css-color-and-contrast name

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

Support SSR

Problem Statement

Currently it is not possible to render an application that uses MaterialCssVarsService on the server.

Possible Solution

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.

Fallback

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);

Drawer background color variable

๐Ÿ‘ป Brief Description

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

Steps to reproduce the behavior:

  1. Add mat-card and mat-sidenav components
  2. Open drawer
  3. Change --palette-background-card variable
  4. Observe card and drawer bg

๐Ÿš“ Expected behavior

Drawer bg color should not change

Material 10 is Considered Incompatible

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").

SCSS Import

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?

Color of mat-snack-bar not resolved correctly in dark mode

๐Ÿ—ฃ๏ธ Foreword

The text of a snack bar is not visible in dark mode, because it is not resolved correctly.

๐Ÿ‘ป Brief Description

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)
}

๐Ÿฅž Action version

angular-material-css-vars: 2.1.0

๐Ÿš“ Expected behavior

The text of the snack bar is displayed in dark color (in dark mode).

Provide migration instructions

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/

mat-elevation doesn't uses mat-color

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.

mat-ripple background-color bug

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));
}

Broken on Angular Material 13

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");

Mixins are not fully supported

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.

right use of materialCssVarsService.setVariable

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.

Angular testing: No provider for InjectionToken Mat Css Config

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?

no mixin named app-theme

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.

Angular 13 Support

After upgrade ng material to 13, material css vars failed to compile. The issue seems related to how angular css is imported without "~".

Styling custom components

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? :)

Disabled mat-select not colored grey by default

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?

Changing background & surface colours

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 :)

Angular 9/Material 9

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.

Fallback material style

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

Angular 11 is considered incompatible

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 ๐Ÿ˜€

Disabled inputs are not graded out

๐Ÿ‘ป Brief Description

Alpha variable is missing on disabled-text

๐Ÿฅž Action version

Disabled inputs are not graded out

Steps To Reproduce

Just disable some input fields

๐Ÿš“ Expected behavior

Expecting to have graded out input field when is disabled

โž• Additional context

I will create PR in order to fix this issue. please merge it when is possible. Thanks

Update NPM Package

Hi!

Could you update npm package in order to have available the last changes?

Thanks!

Compatibility with angular 7.x

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!

initMatTheme does not allow for other mixins to be called with themes

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.

vars not using rgba() in package release

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?

Bump peer dependencies for angular 9

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!

setVariable doesn't do anything.

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',

Repeated var instead of alpha var breaks disabled buttons

It looks like the variable name was repeated instead of using the alpha variable for foreground disabled buttons.

disabled-button: rgba(var(--palette-foreground-disabled-button), var(--palette-foreground-disabled-button)),
disabled-button: rgba(var(--palette-foreground-disabled-button-dark), var(--palette-foreground-disabled-button-dark)),

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 - Colors not correctly applied to components

๐Ÿ—ฃ๏ธ Foreword

Angular 12 was released yesterday. It does seem to cause issues with this package.

๐Ÿ‘ป Brief Description

The values for various foreground and background colors don't seem to be applied correctly to the Angular Material components anymore:

image

๐Ÿฅž Action version

latest

๐ŸŽฉ workflow configuration

Configuration like described in the README

Steps To Reproduce

Steps to reproduce the behavior:

  1. Update to Angular 12
  2. Serve the project

I've also set up a repo for demonstration:

https://github.com/json-derulo/angular-material-css-vars-angular12

๐Ÿš“ Expected behavior

The components look like they did in Angular 11, with the primary / accent / warn color and the border / background colors being applied correctly.

โž• Additional context

It might have to do either with Ivy, or the new Sass module system, which Angular both mentioned in their blog

rgba missing?

My vars show up but they are missing rgba in front of them?
image

IE11 Support

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.

Import Modul Error -> TypeError: Object(...) is not a function

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?

Error unless public-util imported

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

Fix mat-color overwrite opacity

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.

Is it possible to use a custom mat-dark-theme and mat-light-theme?

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.

Set font-style && font-sizes similar to custom theme color using the library.

Hi,

  • Do we have any option to apply the font-styles dynamically similar to apply theme color dynamically ?
       const hex = '#3f51b5';
       this.materialCssVarsService.setDarkTheme(true);
       this.materialCssVarsService.setPrimaryColor(hex);
       this.materialCssVarsService.setVariable(MaterialCssVariables.BackgroundCard,hex);
       this.materialCssVarsService.setAccentColor('#333');

Issue when building for production with AOT compiler

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

SCSS @use rule support

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.

Exclude dark theme styles

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?

Bug: css variables mapping doesn't work for additional properties (default, lighter, darker)

Summary

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).

In detail

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! ๐Ÿ‘

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.