Make data table and checkbox themeable (#3712)

Added rgb vars, not sure we want to go that way, but otherwise we will get a lot of styles...

src/components/ha-checkbox.ts

@@ -1,7 +1,8 @@
-import { Constructor, customElement } from "lit-element";
+import { Constructor, customElement, CSSResult, css } from "lit-element";
 import "@material/mwc-checkbox";
 // tslint:disable-next-line
 import { Checkbox } from "@material/mwc-checkbox";
+import { style } from "@material/mwc-checkbox/mwc-checkbox-css";
 // tslint:disable-next-line
 const MwcCheckbox = customElements.get("mwc-checkbox") as Constructor<Checkbox>;
 
@@ -11,6 +12,18 @@ 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 {

src/components/ha-data-table.ts

@@ -14,15 +14,11 @@ import {
   css,
   customElement,
   property,
-  unsafeCSS,
   classMap,
   TemplateResult,
   PropertyValues,
 } from "@material/mwc-base/base-element";
 
-// @ts-ignore
-import styles from "@material/data-table/dist/mdc.data-table.min.css";
-
 import memoizeOne from "memoize-one";
 
 import "./ha-icon";
@@ -416,7 +412,145 @@ export class HaDataTable extends BaseElement {
 
   static get styles(): CSSResult {
     return css`
-      ${unsafeCSS(styles)}
+      /* default mdc styles, colors changed, without checkbox styles */
+
+      .mdc-data-table__content {
+        font-family: Roboto, sans-serif;
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        font-weight: 400;
+        letter-spacing: 0.0178571429em;
+        text-decoration: inherit;
+        text-transform: inherit;
+      }
+
+      .mdc-data-table {
+        background-color: var(--card-background-color);
+        border-radius: 4px;
+        border-width: 1px;
+        border-style: solid;
+        border-color: rgba(var(--rgb-primary-text-color), 0.12);
+        display: inline-flex;
+        flex-direction: column;
+        box-sizing: border-box;
+        overflow-x: auto;
+      }
+
+      .mdc-data-table__row--selected {
+        background-color: rgba(var(--rgb-primary-color), 0.04);
+      }
+
+      .mdc-data-table__row {
+        border-top-color: rgba(var(--rgb-primary-text-color), 0.12);
+      }
+
+      .mdc-data-table__row {
+        border-top-width: 1px;
+        border-top-style: solid;
+      }
+
+      .mdc-data-table__row:not(.mdc-data-table__row--selected):hover {
+        background-color: rgba(var(--rgb-primary-text-color), 0.04);
+      }
+
+      .mdc-data-table__header-cell {
+        color: var(--primary-text-color);
+      }
+
+      .mdc-data-table__cell {
+        color: var(--primary-text-color);
+      }
+
+      .mdc-data-table__header-row {
+        height: 56px;
+      }
+
+      .mdc-data-table__row {
+        height: 52px;
+      }
+
+      .mdc-data-table__cell,
+      .mdc-data-table__header-cell {
+        padding-right: 16px;
+        padding-left: 16px;
+      }
+
+      .mdc-data-table__header-cell--checkbox,
+      .mdc-data-table__cell--checkbox {
+        /* @noflip */
+        padding-left: 16px;
+        /* @noflip */
+        padding-right: 0;
+      }
+      [dir="rtl"] .mdc-data-table__header-cell--checkbox,
+      .mdc-data-table__header-cell--checkbox[dir="rtl"],
+      [dir="rtl"] .mdc-data-table__cell--checkbox,
+      .mdc-data-table__cell--checkbox[dir="rtl"] {
+        /* @noflip */
+        padding-left: 0;
+        /* @noflip */
+        padding-right: 16px;
+      }
+
+      .mdc-data-table__table {
+        width: 100%;
+        border: 0;
+        white-space: nowrap;
+        border-collapse: collapse;
+      }
+
+      .mdc-data-table__cell {
+        font-family: Roboto, sans-serif;
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        font-weight: 400;
+        letter-spacing: 0.0178571429em;
+        text-decoration: inherit;
+        text-transform: inherit;
+      }
+
+      .mdc-data-table__cell--numeric {
+        text-align: right;
+      }
+      [dir="rtl"] .mdc-data-table__cell--numeric,
+      .mdc-data-table__cell--numeric[dir="rtl"] {
+        /* @noflip */
+        text-align: left;
+      }
+
+      .mdc-data-table__header-cell {
+        font-family: Roboto, sans-serif;
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        font-size: 0.875rem;
+        line-height: 1.375rem;
+        font-weight: 500;
+        letter-spacing: 0.0071428571em;
+        text-decoration: inherit;
+        text-transform: inherit;
+        text-align: left;
+      }
+      [dir="rtl"] .mdc-data-table__header-cell,
+      .mdc-data-table__header-cell[dir="rtl"] {
+        /* @noflip */
+        text-align: right;
+      }
+
+      .mdc-data-table__header-cell--numeric {
+        text-align: right;
+      }
+      [dir="rtl"] .mdc-data-table__header-cell--numeric,
+      .mdc-data-table__header-cell--numeric[dir="rtl"] {
+        /* @noflip */
+        text-align: left;
+      }
+
+      /* custom from here */
+
       .mdc-data-table {
         display: block;
       }

src/resources/ha-style.ts

@@ -123,9 +123,23 @@ documentContainer.innerHTML = `<custom-style>
       --paper-slider-container-color: var(--slider-bar-color);
       --ha-paper-slider-pin-font-size: 15px;
 
+      /* rgb */
+      --rgb-primary-color: 3, 169, 244;
+      --rgb-accent-color: 255, 152, 0;
+      --rgb-primary-text-color: 33, 33, 33;
+      --rgb-secondary-text-color: 114, 114, 114;
+      --rgb-text-primary-color: 255, 255, 255;
+
       /* mwc */
       --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);
+
+      /* mwc text styles */
+      --mdc-theme-on-primary: var(--primary-text-color);
+      --mdc-theme-on-secondary: var(--text-primary-color);
+      --mdc-theme-on-surface: var(--primary-text-color);
     }
   </style>