fix: text/icon contrast when using label-card

custom-cards · Jul 24, 2023 · 01e199b · 01e199b
1 parent d82e6c7
commit 01e199b
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 14 deletions.
diff --git a/src/button-card.ts b/src/button-card.ts
@@ -343,7 +343,7 @@ class ButtonCard extends LitElement {
         if (state.attributes.rgb_color) {
           color = `rgb(${state.attributes.rgb_color.join(',')})`;
           if (state.attributes.brightness) {
-            color = applyBrightnessToColor(color, (state.attributes.brightness + 245) / 5);
+            color = applyBrightnessToColor(this, color, (state.attributes.brightness + 245) / 5);
           }
         } else if (
           useTemperature &&
@@ -357,10 +357,11 @@ class ButtonCard extends LitElement {
             state.attributes.max_mireds,
           );
           if (state.attributes.brightness) {
-            color = applyBrightnessToColor(color, (state.attributes.brightness + 245) / 5);
+            color = applyBrightnessToColor(this, color, (state.attributes.brightness + 245) / 5);
           }
         } else if (state.attributes.brightness) {
           color = applyBrightnessToColor(
+            this,
             stateColorCss(state, state.state) || this._config!.default_color,
             (state.attributes.brightness + 245) / 5,
           );
@@ -706,7 +707,7 @@ class ButtonCard extends LitElement {
         return this._blankCardColoredHtml(configCardStyle);
       case 'card':
       case 'label-card': {
-        const fontColor = getFontColorBasedOnBackgroundColor(color);
+        const fontColor = getFontColorBasedOnBackgroundColor(this, color);
         cardStyle.color = fontColor;
         lockStyle.color = fontColor;
         cardStyle['background-color'] = color;

diff --git a/src/helpers.ts b/src/helpers.ts
@@ -13,7 +13,7 @@ export function computeEntity(entityId: string): string {
   return entityId.substr(entityId.indexOf('.') + 1);
 }
 
-export function getColorFromVariable(color: string): string {
+export function getColorFromVariable(elt: Element, color: string): string {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const colorArray: string[] = [];
   let result = color;
@@ -26,6 +26,11 @@ export function getColorFromVariable(color: string): string {
     });
 
     colorArray.some((color) => {
+      const card = window.getComputedStyle(elt).getPropertyValue(color);
+      if (card) {
+        result = card;
+        return true;
+      }
       const root = window.getComputedStyle(document.documentElement).getPropertyValue(color);
       if (root) {
         result = root;
@@ -45,18 +50,20 @@ export function getColorFromVariable(color: string): string {
   return result;
 }
 
-export function getFontColorBasedOnBackgroundColor(backgroundColor: string): string {
-  const bgLuminance = new TinyColor(getColorFromVariable(backgroundColor)).getLuminance();
-  const light = new TinyColor({ r: 225, g: 225, b: 225 }).getLuminance();
-  const dark = new TinyColor({ r: 28, g: 28, b: 28 }).getLuminance();
+export function getFontColorBasedOnBackgroundColor(elt: Element, backgroundColor: string): string {
+  const bgLuminance = new TinyColor(getColorFromVariable(elt, backgroundColor)).getLuminance();
+  const light = new TinyColor({ r: 225, g: 225, b: 225 });
+  const lightLuminance = light.getLuminance();
+  const dark = new TinyColor({ r: 28, g: 28, b: 28 });
+  const darkLuminance = dark.getLuminance();
 
   if (bgLuminance === 0) {
-    return 'rgb(225, 225, 225)';
+    return light.toRgbString();
   }
 
-  const whiteContrast = (Math.max(bgLuminance, light) + 0.05) / Math.min(bgLuminance, light + 0.05);
-  const blackContrast = (Math.max(bgLuminance, dark) + 0.05) / Math.min(bgLuminance, dark + 0.05);
-  return whiteContrast > blackContrast ? 'rgb(225, 225, 225)' : 'rgb(28, 28, 28)';
+  const whiteContrast = (Math.max(bgLuminance, lightLuminance) + 0.05) / Math.min(bgLuminance, lightLuminance + 0.05);
+  const blackContrast = (Math.max(bgLuminance, darkLuminance) + 0.05) / Math.min(bgLuminance, darkLuminance + 0.05);
+  return whiteContrast > blackContrast ? light.toRgbString() : dark.toRgbString();
 }
 
 export function getLightColorBasedOnTemperature(current: number, min: number, max: number): string {
@@ -92,8 +99,8 @@ export function buildNameStateConcat(name: string | undefined, stateString: stri
   return nameStateString;
 }
 
-export function applyBrightnessToColor(color: string, brightness: number): string {
-  const colorObj = new TinyColor(getColorFromVariable(color));
+export function applyBrightnessToColor(elt: Element, color: string, brightness: number): string {
+  const colorObj = new TinyColor(getColorFromVariable(elt, color));
   if (colorObj.isValid) {
     const validColor = colorObj.mix('black', 100 - brightness).toString();
     if (validColor) return validColor;