Merge pull request #130 from johannesjo/feature/mdc

MDC fixes

Author: json-derulo

README.md

@@ -183,42 +183,10 @@ $custom-typography: mat.mat-typography-config(
 };
 ```
 
-## Updating to Angular v15
-Angular Material v15 introduces MDC based components, which is basically a re-write for a lot of the available components. If you want to update to Angular v15, you need to update `angular-material-css-vars` to v4+.
+## Legacy components support
+Angular Material v15 introduces MDC based components, which is basically a re-write for a lot of the available components. `angular-material-css-vars` v5+ only supports MDC components.
 
-With Angular v15, you can decide whether to keep using the legacy components, or to switch to the MDC based components.
-
-### Switch to MDC based components
-
-No further action is required, just import the `init-material-css-vars` mixin like before:
-
-```scss
-@use 'angular-material-css-vars/main' as mat-css-main;
-
-@include mat-css-main.init-material-css-vars;
-```
-
-### Keep using the legacy components
-
-Please pass the following configuration to the mixin:
-
-```scss
-@use 'angular-material-css-vars/main' as mat-css-main;
-
-@include mat-css-main.init-material-css-vars($load-legacy-components: true, $load-mdc-components: false);
-```
-
-### Use legacy and MDC based components in parallel
-
-> Warning: this will increase your bundle size significantly
-
-Please pass the following configuration to the mixin:
-
-```scss
-@use 'angular-material-css-vars/main' as mat-css-main;
-
-@include mat-css-main.init-material-css-vars($load-legacy-components: true, $load-mdc-components: true);
-```
+In case you are still using the legacy components, you can use the package [angular-material-css-vars-legacy](https://github.com/json-derulo/angular-material-css-vars-legacy).
 
 ## upgrading to angular v12
 Angular material v12 interoduces some big changes, which leaves you with two options when upgrading to ng12: You can either stay at angular material v11 and angular-material-css-vars v1.2.0 or you can use v2+ which thanks to @pedrojrivera adds full support for the new version.

package-lock.json

@@ -26,49 +26,50 @@
     "minor-release": "npm run minor-release_",
     "major-release_": "run-s lib demo major pub",
     "major-release": "npm run major-release_",
-    "dryBuild": "run-s lib demo"
+    "dryBuild": "run-s lib demo",
+    "update": "npx npm-check-updates -u"
   },
   "dependencies": {
-    "@angular/animations": "^15.0.0",
-    "@angular/cdk": "^15.0.0",
-    "@angular/common": "^15.0.0",
-    "@angular/compiler": "^15.0.0",
-    "@angular/core": "^15.0.0",
-    "@angular/forms": "^15.0.0",
-    "@angular/material": "^15.0.0",
-    "@angular/platform-browser": "^15.0.0",
-    "@angular/platform-browser-dynamic": "^15.0.0",
-    "@angular/router": "^15.0.0",
-    "@ctrl/tinycolor": "^3.4.0",
+    "@angular/animations": "^15.2.8",
+    "@angular/cdk": "^15.2.8",
+    "@angular/common": "^15.2.8",
+    "@angular/compiler": "^15.2.8",
+    "@angular/core": "^15.2.8",
+    "@angular/forms": "^15.2.8",
+    "@angular/material": "^15.2.8",
+    "@angular/platform-browser": "^15.2.8",
+    "@angular/platform-browser-dynamic": "^15.2.8",
+    "@angular/router": "^15.2.8",
+    "@ctrl/tinycolor": "^3.5.0",
     "ngx-color-picker": "^13.0.0",
-    "rxjs": "~7.5.7",
-    "tslib": "^2.3.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.5.0",
     "zone.js": "~0.12.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^15.0.0",
+    "@angular-devkit/build-angular": "^15.2.6",
     "@angular-eslint/builder": "^15.2.1",
     "@angular-eslint/eslint-plugin": "^15.2.1",
     "@angular-eslint/eslint-plugin-template": "^15.2.1",
     "@angular-eslint/schematics": "^15.2.1",
     "@angular-eslint/template-parser": "^15.2.1",
-    "@angular/cli": "^15.0.0",
-    "@angular/compiler-cli": "^15.0.0",
-    "@angular/language-service": "^15.0.0",
+    "@angular/cli": "^15.2.6",
+    "@angular/compiler-cli": "^15.2.8",
+    "@angular/language-service": "^15.2.8",
     "@types/jasmine": "^4.3.0",
     "@typescript-eslint/eslint-plugin": "^5.59.0",
     "@typescript-eslint/parser": "^5.59.0",
     "copyfiles": "^2.1.1",
     "eslint": "^8.39.0",
     "gh-pages": "^4.0.0",
     "jasmine-core": "^4.5.0",
-    "karma": "^6.3.16",
+    "karma": "^6.4.1",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage-istanbul-reporter": "~3.0.2",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "^2.0.0",
-    "ng-packagr": "^15.0.0",
+    "ng-packagr": "^15.1.1",
     "npm-run-all": "^4.1.5",
-    "typescript": "~4.8.0"
+    "typescript": "~4.9.4"
   }
 }

package.json

@@ -1,11 +1,11 @@
 // used to circumvent node sass issue: https://github.com/sass/node-sass/issues/2251
 @function rgb($r, $g: null, $b: null ) {
   @if ($g == null) {
-    @return unquote('#{$r}');
+    @return unquote("#{$r}");
   }
 
   @if ($g and $b) {
-    @return unquote('#{$r}, #{$g}, #{$b}');
+    @return unquote("#{$r}, #{$g}, #{$b}");
   }
 
   @error "wrong number of arguments";
@@ -14,17 +14,17 @@
 // used to circumvent node sass issue: https://github.com/sass/node-sass/issues/2251
 @function rgba($r, $g, $b: null, $a: null ) {
   @if ($b == null) {
-    @return unquote('#{$r}, #{$g}');
+    @return unquote("#{$r}, #{$g}");
   }
 
   @if ($b and $a) {
-    @return unquote('#{$r}, #{$g}, #{$b}, #{$a}');
+    @return unquote("#{$r}, #{$g}, #{$b}, #{$a}");
   }
 
   @error "wrong number of arguments";
 }
 
-@function str-replace($string, $search, $replace: '') {
+@function str-replace($string, $search, $replace: "") {
   $index: str-index($string, $search);
 
   @if $index {
@@ -48,15 +48,15 @@
 
 @function strip-variable($color) {
   $var: $color;
-  @if (str-index($var, 'rgba(')) {
-    $var: str-replace($var, 'rgba(', '');
+  @if (str-index($var, "rgba(")) {
+    $var: str-replace($var, "rgba(", "");
   }
-  @if (str-index($var, 'rgb(')) {
-    $var: str-replace($var, 'rgb(', '');
+  @if (str-index($var, "rgb(")) {
+    $var: str-replace($var, "rgb(", "");
   }
-  @if (str-index($var, 'var(')) {
-    $var: str-replace($var, ')', ''); // remove excess ")"
-    $var: $var + ')';
+  @if (str-index($var, "var(")) {
+    $var: str-replace($var, ")", ""); // remove excess ")"
+    $var: $var + ")";
   }
   @return $var;
 }

projects/material-css-vars/src/lib/_internal-helper.scss

@@ -1,27 +1,19 @@
-@use '@angular/material'as mat;
-@use 'internal-helper' as helper;
-@use '@angular/material/theming' as theming;
-@use 'variables' as variables;
-@use 'public-util';
+@use "@angular/material" as mat;
+@use "variables";
+@use "internal-helper";
+@use "public-util";
 // contains main overwrite of `mat-color` to make it all work
-// needs to come after '~@angular/material/theming'
-@use 'mat-lib-overwrites' as overwrites;
+// needs to come after "@angular/material"
+@use "mat-lib-overwrites";
 
-@mixin init-css-vars($default-theme, $text, $default-foreground, $default-background) {
+@mixin init-css-vars($default-theme, $text) {
   // init css variables
-  @include helper.root($text);
-  @include helper.root($default-theme);
-  @include helper.root($default-foreground);
-  @include helper.root($default-background);
+  @include internal-helper.root($text);
+  @include internal-helper.root($default-theme);
 }
 
-@mixin init-mat-theme($dark-theme-selector, $typography-config: mat.define-typography-config(), $load-mdc-components, $load-legacy-components) {
-  @if $load-mdc-components {
-    @include mat.core();
-  }
-  @if $load-legacy-components {
-    @include mat.legacy-core();
-  }
+@mixin init-mat-theme($dark-theme-selector, $typography-config: mat.define-typography-config()) {
+  @include mat.core();
 
   $primary: mat.define-palette(variables.$palette-primary);
   $accent: mat.define-palette(variables.$palette-accent);
@@ -31,32 +23,27 @@
     color: (
       primary: $primary,
       accent: $accent,
-      warn: $warn
+      warn: $warn,
     ),
     typography: $typography-config,
-    density: 0
+    density: 0,
   ));
 
   $dark-theme: mat.define-dark-theme((
     color: (
       primary: $primary,
       accent: $accent,
-      warn: $warn
+      warn: $warn,
     ),
     typography: $typography-config,
-    density: 0
+    density: 0,
   ));
 
   // set global variable so passed-in content can use the theme
   $mat-css-theme: $theme !global; // stays for backwards-compatibility
 
   // NOTE: light theme is the default theme
-  @if $load-mdc-components {
-    @include mat.all-component-themes($theme);
-  }
-  @if $load-legacy-components {
-    @include mat.all-legacy-component-themes($theme);
-  }
+  @include mat.all-component-themes($theme);
 
   // Fix mat-typography class, see https://github.com/angular/components/issues/26184
   @include mat.typography-hierarchy($theme);
@@ -66,19 +53,14 @@
   @if $dark-theme-selector {
     $mat-css-theme: $dark-theme !global;
     #{$dark-theme-selector} {
-      @if $load-mdc-components {
-        @include mat.all-component-colors($dark-theme);
-      }
-      @if $load-legacy-components {
-        @include mat.all-legacy-component-colors($dark-theme);
-      }
+      @include mat.all-component-colors($dark-theme);
       // add content passed in, which can use the $theme variable to apply the dark theme to
       // other theme mixins needed by the app
       @content($mat-css-theme);
     }
   }
 
-  @include overwrites.other-overwrites;
+  @include mat-lib-overwrites.other-overwrites;
 
   $mat-css-theme: null !global;
 }
@@ -88,13 +70,9 @@
   $dark-theme-selector: variables.$dark-theme-selector,
   $default-theme-text: variables.$text,
   $typography-config: mat.define-typography-config(),
-  $default-foreground: variables.$default-foreground,
-  $default-background: variables.$default-background,
-  $load-mdc-components: true,
-  $load-legacy-components: false,
 ) {
-  @include init-css-vars($default-theme, $default-theme-text, $default-foreground, $default-background);
-  @include init-mat-theme($dark-theme-selector, $typography-config, $load-mdc-components, $load-legacy-components) using ($mat-css-theme) {
+  @include init-css-vars($default-theme, $default-theme-text);
+  @include init-mat-theme($dark-theme-selector, $typography-config) using ($mat-css-theme) {
     @content($mat-css-theme);
   }
 }