Updates for V15 MDC controls. Fixed up all contrast colors for controls used in demo. More components may need to be tested.

Author: priveraussi

package-lock.json

@@ -27,48 +27,49 @@
     "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.4",
-    "@angular/cdk": "^15.0.4",
-    "@angular/common": "^15.0.4",
-    "@angular/compiler": "^15.0.4",
-    "@angular/core": "^15.0.4",
-    "@angular/forms": "^15.0.4",
-    "@angular/material": "^15.0.4",
-    "@angular/platform-browser": "^15.0.4",
-    "@angular/platform-browser-dynamic": "^15.0.4",
-    "@angular/router": "^15.0.4",
+    "@angular/animations": "^15.1.2",
+    "@angular/cdk": "^15.1.2",
+    "@angular/common": "^15.1.2",
+    "@angular/compiler": "^15.1.2",
+    "@angular/core": "^15.1.2",
+    "@angular/forms": "^15.1.2",
+    "@angular/material": "^15.1.2",
+    "@angular/platform-browser": "^15.1.2",
+    "@angular/platform-browser-dynamic": "^15.1.2",
+    "@angular/router": "^15.1.2",
     "@ctrl/tinycolor": "^3.5.0",
     "ngx-color-picker": "^13.0.0",
     "rxjs": "~7.8.0",
-    "tslib": "^2.4.1",
+    "tslib": "^2.5.0",
     "zone.js": "~0.12.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^15.0.5",
-    "@angular/cli": "^15.0.5",
-    "@angular/compiler-cli": "^15.0.4",
-    "@angular/language-service": "^15.0.4",
+    "@angular-devkit/build-angular": "^15.1.3",
+    "@angular/cli": "^15.1.3",
+    "@angular/compiler-cli": "^15.1.2",
+    "@angular/language-service": "^15.1.2",
     "@types/jasmine": "^4.3.1",
     "@types/jasminewd2": "^2.0.10",
     "@types/node": "^18.11.18",
     "codelyzer": "^6.0.2",
     "copyfiles": "^2.4.1",
-    "gh-pages": "^4.0.0",
+    "gh-pages": "^5.0.0",
     "jasmine-core": "^4.5.0",
     "jasmine-spec-reporter": "^7.0.0",
     "karma": "^6.4.1",
     "karma-chrome-launcher": "~3.1.1",
     "karma-coverage-istanbul-reporter": "~3.0.3",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "^2.0.0",
-    "ng-packagr": "^15.0.3",
+    "ng-packagr": "^15.1.1",
     "npm-run-all": "^4.1.5",
     "protractor": "~7.0.0",
     "ts-node": "^10.9.1",
     "tslint": "~6.1.3",
-    "typescript": "~4.8.4"
+    "typescript": "~4.9.4"
   }
 }

package.json

@@ -34,17 +34,23 @@
   @return $string;
 }
 
-@function _mat-css-hex-to-rgb($color) {
+@function _mat-css-hex-to-rgb($color, $rgb-wrap: true) {
   @if ($color == null) {
     @return null;
   }
+  @if ($rgb-wrap) {
+    @return rgb(red($color), green($color), blue($color));
+  }
   @return red($color), green($color), blue($color);
 }
 
-@function _mat-css-hex-to-rgba($color) {
+@function _mat-css-hex-to-rgba($color, $rgb-wrap: true) {
   @if ($color == null) {
     @return null;
   }
+  @if ($rgb-wrap) {
+    @return rgba(red($color), green($color), blue($color), alpha($color));
+  }
   @return red($color), green($color), blue($color), alpha($color);
 }
 

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

@@ -1,4 +1,4 @@
-@use '@angular/material'as mat;
+@use '@angular/material' as mat;
 @import '@angular/material/theming';
 @import 'variables';
 @import 'internal-helper';
@@ -16,33 +16,35 @@
 @mixin init-mat-theme($dark-theme-selector, $typography-config: mat.define-typography-config()) {
   @include mat.core();
 
-  $primary: mat.define-palette($mat-css-palette-primary);
-  $accent: mat.define-palette($mat-css-palette-accent);
-  $warn: mat.define-palette($mat-css-palette-warn);
+  $palette-primary: mat.define-palette($mat-css-palette-primary);
+  $palette-accent: mat.define-palette($mat-css-palette-accent);
+  $palette-warn: mat.define-palette($mat-css-palette-warn);
 
-  $theme: mat.define-light-theme((
+  $theme: (
     color: (
-      primary: $primary,
-      accent: $accent,
-      warn: $warn,
+      primary: $palette-primary,
+      accent: $palette-accent,
+      warn: $palette-warn,
+      is-dark: false,
       foreground: $mat-css-palette-foreground,
-      background: $mat-css-palette-background
+      background: $mat-css-palette-background,
     ),
     typography: $typography-config,
-    density: 0
-  ));
+    density: 0,
+  );
 
-  $dark-theme: mat.define-dark-theme((
+  $dark-theme: (
     color: (
-      primary: $primary,
-      accent: $accent,
-      warn: $warn,
+      primary: $palette-primary,
+      accent: $palette-accent,
+      warn: $palette-warn,
+      is-dark: true,
       foreground: $mat-css-palette-foreground-dark,
-      background: $mat-css-palette-background-dark
+      background: $mat-css-palette-background-dark,
     ),
     typography: $typography-config,
-    density: 0
-  ));
+    density: 0,
+  );
 
   // set global variable so passed-in content can use the theme
   $mat-css-theme: $theme !global;