Generate rgb theme vars (#3728)

* Create rgb theme vars

* Check if key is rgb and revert paper

* Update apply_themes_on_element.ts

* paper-card > card

src/common/dom/apply_themes_on_element.ts

@@ -1,3 +1,18 @@
+const hexToRgb = (hex: string): string | null => {
+  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+  const checkHex = hex.replace(shorthandRegex, (_m, r, g, b) => {
+    return r + r + g + g + b + b;
+  });
+
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(checkHex);
+  return result
+    ? `${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(
+        result[3],
+        16
+      )}`
+    : null;
+};
+
 /**
  * Apply a theme to an element by setting the CSS variables on it.
  *
@@ -23,15 +38,27 @@ export default function applyThemesOnElement(
   if (themeName !== "default") {
     const theme = themes.themes[themeName];
     Object.keys(theme).forEach((key) => {
-      const prefixedKey = "--" + key;
+      const prefixedKey = `--${key}`;
       element._themes[prefixedKey] = "";
       styles[prefixedKey] = theme[key];
+      if (key.startsWith("rgb")) {
+        return;
+      }
+      const rgbKey = `--rgb-${key}`;
+      if (theme[rgbKey] === undefined) {
+        return;
+      }
+      element._themes[rgbKey] = "";
+      const rgbValue = hexToRgb(theme[key]);
+      if (rgbValue !== null) {
+        styles[rgbKey] = rgbValue;
+      }
     });
   }
   if (element.updateStyles) {
     element.updateStyles(styles);
   } else if (window.ShadyCSS) {
-    // implement updateStyles() method of Polemer elements
+    // implement updateStyles() method of Polymer elements
     window.ShadyCSS.styleSubtree(/** @type {!HTMLElement} */ (element), styles);
   }
 

src/resources/ha-style.ts

@@ -134,7 +134,7 @@ documentContainer.innerHTML = `<custom-style>
       --mdc-theme-primary: var(--primary-color);
       --mdc-theme-secondary: var(--accent-color);
       --mdc-theme-background: var(--primary-background-color);
-      --mdc-theme-surface: var(--card-background-color);
+      --mdc-theme-surface: var(--paper-card-background-color, var(--card-background-color));
 
       /* mwc text styles */
       --mdc-theme-on-primary: var(--primary-text-color);