fix: resolve issues with contrast color

Author: json-derulo

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-material-css-vars-legacy",
-  "version": "5.0.0-next.0",
+  "version": "5.0.0-next.1",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

projects/material-css-vars/package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-material-css-vars-legacy",
-  "version": "5.0.0-next.0",
+  "version": "5.0.0-next.1",
   "description": "Little library to use css variables for @angular/material for legacy components",
   "author": {
     "name": "Daniel Kimmich",

projects/material-css-vars/src/lib/_variables.scss

@@ -248,20 +248,20 @@ $default-light-theme:
     --palette-primary-A200-rgb: rgb(var(--palette-primary-A200)),
     --palette-primary-A400-rgb: rgb(var(--palette-primary-A400)),
     --palette-primary-A700-rgb: rgb(var(--palette-primary-A700)),
-    --palette-primary-contrast-50-rgb: rgba(var(--dark-primary-text)),
-    --palette-primary-contrast-100-rgb: rgba(var(--dark-primary-text)),
-    --palette-primary-contrast-200-rgb: rgba(var(--dark-primary-text)),
-    --palette-primary-contrast-300-rgb: rgba(var(--dark-primary-text)),
-    --palette-primary-contrast-400-rgb: rgba(var(--dark-primary-text)),
-    --palette-primary-contrast-500-rgb: rgba(var(--light-primary-text)),
-    --palette-primary-contrast-600-rgb: rgba(var(--light-primary-text)),
-    --palette-primary-contrast-700-rgb: rgba(var(--light-primary-text)),
-    --palette-primary-contrast-800-rgb: rgba(var(--light-primary-text)),
-    --palette-primary-contrast-900-rgb: rgba(var(--light-primary-text)),
-    --palette-primary-contrast-A100-rgb: rgba(var(--light-primary-text)),
-    --palette-primary-contrast-A200-rgb: rgba(var(--light-primary-text)),
-    --palette-primary-contrast-A400-rgb: rgba(var(--light-primary-text)),
-    --palette-primary-contrast-A700-rgb: rgba(var(--light-primary-text)),
+    --palette-primary-contrast-50-rgb: var(--dark-primary-text),
+    --palette-primary-contrast-100-rgb: var(--dark-primary-text),
+    --palette-primary-contrast-200-rgb: var(--dark-primary-text),
+    --palette-primary-contrast-300-rgb: var(--dark-primary-text),
+    --palette-primary-contrast-400-rgb: var(--dark-primary-text),
+    --palette-primary-contrast-500-rgb: var(--light-primary-text),
+    --palette-primary-contrast-600-rgb: var(--light-primary-text),
+    --palette-primary-contrast-700-rgb: var(--light-primary-text),
+    --palette-primary-contrast-800-rgb: var(--light-primary-text),
+    --palette-primary-contrast-900-rgb: var(--light-primary-text),
+    --palette-primary-contrast-A100-rgb: var(--light-primary-text),
+    --palette-primary-contrast-A200-rgb: var(--light-primary-text),
+    --palette-primary-contrast-A400-rgb: var(--light-primary-text),
+    --palette-primary-contrast-A700-rgb: var(--light-primary-text),
     // ACCENT
     --palette-accent-50-rgb: rgb(var(--palette-accent-50)),
     --palette-accent-100-rgb: rgb(var(--palette-accent-100)),
@@ -280,20 +280,20 @@ $default-light-theme:
     --palette-accent-A400-rgb: rgb(var(--palette-accent-A400)),
     //darker
     --palette-accent-A700-rgb: rgb(var(--palette-accent-A700)),
-    --palette-accent-contrast-50-rgb: rgba(var(--dark-accent-text)),
-    --palette-accent-contrast-100-rgb: rgba(var(--dark-accent-text)),
-    --palette-accent-contrast-200-rgb: rgba(var(--dark-accent-text)),
-    --palette-accent-contrast-300-rgb: rgba(var(--dark-accent-text)),
-    --palette-accent-contrast-400-rgb: rgba(var(--dark-accent-text)),
-    --palette-accent-contrast-500-rgb: rgba(var(--light-accent-text)),
-    --palette-accent-contrast-600-rgb: rgba(var(--light-accent-text)),
-    --palette-accent-contrast-700-rgb: rgba(var(--light-accent-text)),
-    --palette-accent-contrast-800-rgb: rgba(var(--light-accent-text)),
-    --palette-accent-contrast-900-rgb: rgba(var(--light-accent-text)),
-    --palette-accent-contrast-A100-rgb: rgba(var(--light-accent-text)),
-    --palette-accent-contrast-A200-rgb: rgba(var(--light-accent-text)),
-    --palette-accent-contrast-A400-rgb: rgba(var(--light-accent-text)),
-    --palette-accent-contrast-A700-rgb: rgba(var(--light-accent-text)),
+    --palette-accent-contrast-50-rgb: var(--dark-accent-text),
+    --palette-accent-contrast-100-rgb: var(--dark-accent-text),
+    --palette-accent-contrast-200-rgb: var(--dark-accent-text),
+    --palette-accent-contrast-300-rgb: var(--dark-accent-text),
+    --palette-accent-contrast-400-rgb: var(--dark-accent-text),
+    --palette-accent-contrast-500-rgb: var(--light-accent-text),
+    --palette-accent-contrast-600-rgb: var(--light-accent-text),
+    --palette-accent-contrast-700-rgb: var(--light-accent-text),
+    --palette-accent-contrast-800-rgb: var(--light-accent-text),
+    --palette-accent-contrast-900-rgb: var(--light-accent-text),
+    --palette-accent-contrast-A100-rgb: var(--light-accent-text),
+    --palette-accent-contrast-A200-rgb: var(--light-accent-text),
+    --palette-accent-contrast-A400-rgb: var(--light-accent-text),
+    --palette-accent-contrast-A700-rgb: var(--light-accent-text),
     // WARN
     --palette-warn-50-rgb: rgb(var(--palette-warn-50)),
     --palette-warn-100-rgb: rgb(var(--palette-warn-100)),
@@ -309,20 +309,20 @@ $default-light-theme:
     --palette-warn-A200-rgb: rgb(var(--palette-warn-A200)),
     --palette-warn-A400-rgb: rgb(var(--palette-warn-A400)),
     --palette-warn-A700-rgb: rgb(var(--palette-warn-A700)),
-    --palette-warn-contrast-50-rgb: rgba(var(--dark-warn-text)),
-    --palette-warn-contrast-100-rgb: rgba(var(--dark-warn-text)),
-    --palette-warn-contrast-200-rgb: rgba(var(--dark-warn-text)),
-    --palette-warn-contrast-300-rgb: rgba(var(--dark-warn-text)),
-    --palette-warn-contrast-400-rgb: rgba(var(--dark-warn-text)),
-    --palette-warn-contrast-500-rgb: rgba(var(--light-warn-text)),
-    --palette-warn-contrast-600-rgb: rgba(var(--light-warn-text)),
-    --palette-warn-contrast-700-rgb: rgba(var(--light-warn-text)),
-    --palette-warn-contrast-800-rgb: rgba(var(--light-warn-text)),
-    --palette-warn-contrast-900-rgb: rgba(var(--light-warn-text)),
-    --palette-warn-contrast-A100-rgb: rgba(var(--light-warn-text)),
-    --palette-warn-contrast-A200-rgb: rgba(var(--light-warn-text)),
-    --palette-warn-contrast-A400-rgb: rgba(var(--light-warn-text)),
-    --palette-warn-contrast-A700-rgb: rgba(var(--light-warn-text))
+    --palette-warn-contrast-50-rgb: var(--dark-warn-text),
+    --palette-warn-contrast-100-rgb: var(--dark-warn-text),
+    --palette-warn-contrast-200-rgb: var(--dark-warn-text),
+    --palette-warn-contrast-300-rgb: var(--dark-warn-text),
+    --palette-warn-contrast-400-rgb: var(--dark-warn-text),
+    --palette-warn-contrast-500-rgb: var(--light-warn-text),
+    --palette-warn-contrast-600-rgb: var(--light-warn-text),
+    --palette-warn-contrast-700-rgb: var(--light-warn-text),
+    --palette-warn-contrast-800-rgb: var(--light-warn-text),
+    --palette-warn-contrast-900-rgb: var(--light-warn-text),
+    --palette-warn-contrast-A100-rgb: var(--light-warn-text),
+    --palette-warn-contrast-A200-rgb: var(--light-warn-text),
+    --palette-warn-contrast-A400-rgb: var(--light-warn-text),
+    --palette-warn-contrast-A700-rgb: var(--light-warn-text),
 ) !default;
 
 $palette-primary: (

projects/material-css-vars/src/lib/material-css-vars.service.ts

@@ -270,7 +270,7 @@ export class MaterialCssVarsService {
       .map(({contrastColorVar, hue}) => {
         return {
           val: this._getCssVarValue(contrastColorVar),
-          name: `${palettePrefix + MaterialCssVarsService.CONTRAST_PREFIX}${hue}`,
+          name: `${palettePrefix + MaterialCssVarsService.CONTRAST_PREFIX}${hue}-rgb`,
         };
       });
     this._setStyle(updates);