diff --git a/src/components/ha-checkbox.ts b/src/components/ha-checkbox.ts index 99c294f4f7..c4ef540352 100644 --- a/src/components/ha-checkbox.ts +++ b/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; @@ -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 { diff --git a/src/components/ha-data-table.ts b/src/components/ha-data-table.ts index df5ae384c8..770c60eea4 100644 --- a/src/components/ha-data-table.ts +++ b/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; } diff --git a/src/resources/ha-style.ts b/src/resources/ha-style.ts index d171a11c76..51e3752dab 100644 --- a/src/resources/ha-style.ts +++ b/src/resources/ha-style.ts @@ -123,9 +123,23 @@ documentContainer.innerHTML = ` --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); }