From 5f46679d948f870624454291af8d19d34cd6f9f2 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Fri, 15 May 2020 17:56:47 +0200
Subject: [PATCH] Fix mdc checkbox styling (#5897)

---
 src/components/ha-checkbox.ts | 15 +--------------
 src/resources/styles.ts       |  2 ++
 2 files changed, 3 insertions(+), 14 deletions(-)

diff --git a/src/components/ha-checkbox.ts b/src/components/ha-checkbox.ts
index 4c233f061b..713d62d1d9 100644
--- a/src/components/ha-checkbox.ts
+++ b/src/components/ha-checkbox.ts
@@ -1,7 +1,6 @@
 import "@material/mwc-checkbox";
 import type { Checkbox } from "@material/mwc-checkbox";
-import { style } from "@material/mwc-checkbox/mwc-checkbox-css";
-import { css, CSSResult, customElement } from "lit-element";
+import { customElement } from "lit-element";
 import type { Constructor } from "../types";
 
 const MwcCheckbox = customElements.get("mwc-checkbox") as Constructor<Checkbox>;
@@ -12,18 +11,6 @@ export class HaCheckbox extends MwcCheckbox {
     super.firstUpdated();
     this.style.setProperty("--mdc-theme-secondary", "var(--primary-color)");
   }
-
-  protected static get styles(): CSSResult[] {
-    return [
-      style,
-      css`
-        .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate)
-          ~ .mdc-checkbox__background {
-          border-color: rgba(var(--rgb-primary-text-color), 0.54);
-        }
-      `,
-    ];
-  }
 }
 
 declare global {
diff --git a/src/resources/styles.ts b/src/resources/styles.ts
index 7df001137f..0cfac4ef64 100644
--- a/src/resources/styles.ts
+++ b/src/resources/styles.ts
@@ -48,6 +48,8 @@ export const derivedStyles = {
   "material-body-text-color": "var(--primary-text-color)",
   "material-background-color": "var(--card-background-color)",
   "material-secondary-background-color": "var(--secondary-background-color)",
+  "mdc-checkbox-unchecked-color": "rgba(var(--rgb-primary-text-color), 0.54)",
+  "mdc-checkbox-disabled-color": "var(--disabled-text-color)",
 };
 
 export const haStyle = css`