angular-material-css-vars - npm Package Compare versions

Comparing version 4.1.0 to 4.2.0

package.json

 {
   "name": "angular-material-css-vars",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "description": "Little library to use css variables for @angular/material",
@@ -5,0 +5,0 @@ "author": "johannesjo <[e-mail]> (http://super-productivity.com)",

README.md

@@ -15,3 +15,3 @@ <p align="center"><img alt="logo" src="logo.png"></p>
     ```scss
-    @import 'angular-material-css-vars/main';
+    @use 'angular-material-css-vars/main' as mat-css;
  
@@ -23,3 +23,3 @@ // optional
     // init theme
-    @include init-material-css-vars() {
+    @include mat-css.init-material-css-vars() using($mat-css-theme) {
       // If your app has any theme mixins, call them here. 
@@ -74,14 +74,14 @@ // $mat-css-theme gets set to an appropriate value before this content is called.
 ```scss
-@import 'angular-material-css-vars/public-util';
+@use 'angular-material-css-vars/public-util' as mat-css-utilities;
 
 .with-color {
-  border-color: mat-css-color-primary(300);
+  border-color: mat-css-utilities.mat-css-color-primary(300);
 }
 
 .color-and-contrast {
-  @include mat-css-color-and-contrast(300);
+  @include mat-css-utilities.mat-css-color-and-contrast(300);
 }
 
 .with-bg {
-  @include mat-css-bg(300);
+  @include mat-css-utilities.mat-css-bg(300);
 }
@@ -95,2 +95,6 @@ ```
 ```scss
+...
+@use 'angular-material-css-vars/main' as mat-css;
+...
+
 // $mat-css-default-light-theme: ... ;
@@ -101,3 +105,3 @@ // $mat-css-text: ... ;
 
-@include init-material-css-vars();
+@include mat-css.init-material-css-vars();
 
@@ -107,9 +111,9 @@ ```
 ```scss
+@use 'angular-material-css-vars/public-util' as mat-css-utilities;
+
 // probably best put in a common variables file and imported before the mixins
 $mat-css-dark-theme-selector: '.isDarkThemeCUSTOM';
 
-@import 'angular-material-css-vars/public-util';
-
 .my-component {
-  @include mat-css-dark-theme {
+  @include mat-css-utilities.mat-css-dark-theme {
     // dark theme styles ...  
@@ -127,25 +131,28 @@ }
 ```scss
-@import 'angular-material-css-vars/public-util';
-@import 'angular-material-css-vars/main';
+@use 'angular-material-css-vars/public-util' as mat-css-utilities;
+@use 'angular-material-css-vars/main' as mat-css-main;
+@use '@angular/material/theming' as mat-theming;
 
-@include init-material-css-vars();
+@include mat-css-main.init-material-css-vars();
 
-@include mat-css-set-palette-defaults($mat-light-blue, 'primary');
-@include mat-css-set-palette-defaults($mat-pink, 'accent');
-@include mat-css-set-palette-defaults($mat-red, 'warn');
+@include mat-css-utilities.mat-css-set-palette-defaults(mat-theming.$mat-light-blue, 'primary');
+@include mat-css-utilities.mat-css-set-palette-defaults(mat-theming.$mat-pink, 'accent');
+@include mat-css-utilities.mat-css-set-palette-defaults(mat-theming.$mat-red, 'warn');
 ```
 The other is to include your own variables for [$mat-css-default-light-theme](https://github.com/johannesjo/angular-material-css-vars/blob/master/projects/material-css-vars/src/lib/_variables.scss).
 ```scss
-@import 'angular-material-css-vars/main';
+@use 'angular-material-css-vars/main' as mat-css-main;
+@use 'angular-material-css-vars/variables' as mat-css-vars;
+@use 'angular-material-css-vars/public-util' as mat-css-utilities;
 
 $mat-css-default-light-theme: map-merge(
   // if you don't want to enter ALL the properties
-  $mat-css-default-light-theme,
+    mat-css-vars.$default-light-theme,
   (
-  --palette-primary-50: _mat-css-hex-to-rgb(#e1f5fe),
-  --palette-primary-100: _mat-css-hex-to-rgb(#b3e5fc),
-  --palette-primary-200: _mat-css-hex-to-rgb(#81d4fa),
-  --palette-primary-300: _mat-css-hex-to-rgb(#4fc3f7),
-  --palette-primary-400: _mat-css-hex-to-rgb(#29b6f6),
-  --palette-primary-500: _mat-css-hex-to-rgb(#03a9f4),
+  --palette-primary-50: mat-css-utilities.hex-to-rgb(#e1f5fe),
+  --palette-primary-100: mat-css-utilities.hex-to-rgb(#b3e5fc),
+  --palette-primary-200: mat-css-utilities.hex-to-rgb(#81d4fa),
+  --palette-primary-300: mat-css-utilities.hex-to-rgb(#4fc3f7),
+  --palette-primary-400: mat-css-utilities.hex-to-rgb(#29b6f6),
+  --palette-primary-500: mat-css-utilities.hex-to-rgb(#03a9f4),
   // ...
@@ -155,3 +162,3 @@ )
 
-@include init-material-css-vars();
+@include mat-css-main.init-material-css-vars();
 
@@ -171,10 +178,14 @@ ```
 ```scss
+@use 'angular-material-css-vars/main' as mat-css-main;
+@use '@angular/material' as mat;
+@use '@angular/material/theming' as mat-theming;
+
 // example
-$custom-typography: mat-typography-config(
+$custom-typography: mat.mat-typography-config(
   $font-family: 'Roboto, monospace',
-  $headline: mat-typography-level(32px, 48px, 700),
-  $body-1: mat-typography-level(16px, 24px, 500)
+  $headline: mat-theming.mat-typography-level(32px, 48px, 700),
+  $body-1: mat-theming.mat-typography-level(16px, 24px, 500)
 );
 
-@include init-material-css-vars($typography-config: $custom-typography) {
+@include mat-css-main.init-material-css-vars($typography-config: $custom-typography) using($mat-css-theme) {
   @include app-theme($mat-css-theme);
@@ -194,5 +205,5 @@ };
 ```scss
-@import "angular-material-css-vars/main";
+@use 'angular-material-css-vars/main' as mat-css-main;
 
-@include init-material-css-vars;
+@include mat-css-main.init-material-css-vars;
 ```
@@ -205,5 +216,5 @@
 ```scss
-@import "angular-material-css-vars/main";
+@use 'angular-material-css-vars/main' as mat-css-main;
 
-@include init-material-css-vars($load-legacy-components: true, $load-mdc-components: false);
+@include mat-css-main.init-material-css-vars($load-legacy-components: true, $load-mdc-components: false);
 ```
@@ -218,5 +229,5 @@
 ```scss
-@import "angular-material-css-vars/main";
+@use 'angular-material-css-vars/main' as mat-css-main;
 
-@include init-material-css-vars($load-legacy-components: true, $load-mdc-components: true);
+@include mat-css-main.init-material-css-vars($load-legacy-components: true, $load-mdc-components: true);
 ```
@@ -223,0 +234,0 @@

No alert changes

Improved metrics

Total package byte prevSize

305271

0.36%

Number of package files

27

3.85%

Number of lines in readme file

238

4.85%

No dependency changes