Move legacy styles to their own files (#6033)

cast/src/receiver/second-load.ts

@@ -1,3 +1,4 @@
 import "web-animations-js/web-animations-next-lite.min";
 import "../../../src/resources/roboto";
+import "../../../src/resources/ha-style";
 import "./layout/hc-lovelace";

demo/src/entrypoint.ts

@@ -1,4 +1,3 @@
-import "@polymer/paper-styles/typography";
 import "@polymer/polymer/lib/elements/dom-if";
 import "@polymer/polymer/lib/elements/dom-repeat";
 import "../../src/resources/ha-style";

gallery/src/entrypoint.js

@@ -1,4 +1,3 @@
-import "@polymer/paper-styles/typography";
 import "@polymer/polymer/lib/elements/dom-if";
 import "@polymer/polymer/lib/elements/dom-repeat";
 import "../../src/resources/ha-style";

gallery/src/ha-gallery.js

@@ -10,6 +10,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "../../src/components/ha-card";
 import "../../src/managers/notification-manager";
+import "../../src/styles/polymer-ha-style";
 
 // eslint-disable-next-line no-undef
 const DEMOS = require.context("./demos", true, /^(.*\.(ts$))[^.]*$/im);

hassio/src/hassio-panel.ts

@@ -12,7 +12,6 @@ import {
   HassioSupervisorInfo,
 } from "../../src/data/hassio/supervisor";
 import type { PageNavigation } from "../../src/layouts/hass-tabs-subpage";
-import "../../src/resources/ha-style";
 import { HomeAssistant, Route } from "../../src/types";
 import "./hassio-panel-router";
 

src/dialogs/config-flow/dialog-data-entry-flow.ts

@@ -28,7 +28,6 @@ import {
   subscribeDeviceRegistry,
 } from "../../data/device_registry";
 import { PolymerChangedEvent } from "../../polymer-types";
-import "../../resources/ha-style";
 import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import { DataEntryFlowDialogParams } from "./show-dialog-data-entry-flow";

src/dialogs/config-flow/step-flow-form.ts

@@ -16,7 +16,6 @@ import "../../components/ha-form/ha-form";
 import type { HaFormSchema } from "../../components/ha-form/ha-form";
 import "../../components/ha-markdown";
 import type { DataEntryFlowStepForm } from "../../data/data_entry_flow";
-import "../../resources/ha-style";
 import type { HomeAssistant } from "../../types";
 import type { FlowConfig } from "./show-dialog-data-entry-flow";
 import { configFlowContentStyles } from "./styles";

src/dialogs/ha-more-info-dialog.js

@@ -5,7 +5,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import { computeStateDomain } from "../common/entity/compute_state_domain";
 import DialogMixin from "../mixins/dialog-mixin";
-import "../resources/ha-style";
+import "../styles/polymer-ha-style-dialog";
 import "./more-info/more-info-controls";
 
 /*

src/dialogs/ha-store-auth-card.js

@@ -4,7 +4,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import { enableWrite } from "../common/auth/token_storage";
 import LocalizeMixin from "../mixins/localize-mixin";
-import "../resources/ha-style";
+import "../styles/polymer-ha-style";
 
 class HaStoreAuth extends LocalizeMixin(PolymerElement) {
   static get template() {

src/dialogs/more-info/more-info-controls.js

@@ -17,7 +17,7 @@ import "../../data/ha-state-history-data";
 import { EventsMixin } from "../../mixins/events-mixin";
 import LocalizeMixin from "../../mixins/localize-mixin";
 import { showEntityEditorDialog } from "../../panels/config/entities/show-dialog-entity-editor";
-import "../../resources/ha-style";
+import "../../styles/polymer-ha-style-dialog";
 import "../../state-summary/state-card-content";
 import { showConfirmationDialog } from "../generic/show-dialog-box";
 import "./controls/more-info-content";

src/entrypoints/app.ts

@@ -1,10 +1,8 @@
-// Load polyfill first so HTML imports start resolving
-/* eslint-disable import/first */
-import "@polymer/paper-styles/typography";
 import { setPassiveTouchGestures } from "@polymer/polymer/lib/utils/settings";
+import "../resources/roboto";
+import "../resources/ha-style";
 import "../layouts/home-assistant";
 import "../resources/html-import/polyfill";
-import "../resources/roboto";
 import "../util/legacy-support";
 
 setPassiveTouchGestures(true);

src/layouts/home-assistant.ts

@@ -3,7 +3,6 @@ import { html, property, PropertyValues } from "lit-element";
 import { navigate } from "../common/navigate";
 import { getStorageDefaultPanelUrlPath } from "../data/panel";
 import "../resources/custom-card-support";
-import "../resources/ha-style";
 import { HassElement } from "../state/hass-element";
 import { HomeAssistant, Route } from "../types";
 import {

src/panels/config/cloud/account/cloud-account.js

@@ -10,7 +10,7 @@ import { fetchCloudSubscriptionInfo } from "../../../../data/cloud";
 import "../../../../layouts/hass-subpage";
 import { EventsMixin } from "../../../../mixins/events-mixin";
 import LocalizeMixin from "../../../../mixins/localize-mixin";
-import "../../../../resources/ha-style";
+import "../../../../styles/polymer-ha-style";
 import "../../ha-config-section";
 import "./cloud-alexa-pref";
 import "./cloud-google-pref";

src/panels/config/cloud/forgot-password/cloud-forgot-password.js

@@ -7,7 +7,7 @@ import "../../../../components/ha-card";
 import "../../../../layouts/hass-subpage";
 import { EventsMixin } from "../../../../mixins/events-mixin";
 import LocalizeMixin from "../../../../mixins/localize-mixin";
-import "../../../../resources/ha-style";
+import "../../../../styles/polymer-ha-style";
 
 /*
  * @appliesMixin EventsMixin

src/panels/config/cloud/login/cloud-login.js

@@ -14,7 +14,7 @@ import "../../../../layouts/hass-subpage";
 import { EventsMixin } from "../../../../mixins/events-mixin";
 import LocalizeMixin from "../../../../mixins/localize-mixin";
 import NavigateMixin from "../../../../mixins/navigate-mixin";
-import "../../../../resources/ha-style";
+import "../../../../styles/polymer-ha-style";
 import "../../ha-config-section";
 
 /*

src/panels/config/cloud/register/cloud-register.js

@@ -7,7 +7,7 @@ import "../../../../components/ha-card";
 import "../../../../layouts/hass-subpage";
 import { EventsMixin } from "../../../../mixins/events-mixin";
 import LocalizeMixin from "../../../../mixins/localize-mixin";
-import "../../../../resources/ha-style";
+import "../../../../styles/polymer-ha-style";
 import "../../ha-config-section";
 
 /*

src/panels/config/core/ha-config-core.js

@@ -6,7 +6,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "../../../layouts/hass-tabs-subpage";
 import LocalizeMixin from "../../../mixins/localize-mixin";
-import "../../../resources/ha-style";
+import "../../../styles/polymer-ha-style";
 import { configSections } from "../ha-panel-config";
 import "./ha-config-section-core";
 

src/panels/config/core/ha-config-section-core.js

@@ -7,7 +7,7 @@ import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import "../../../components/buttons/ha-call-service-button";
 import "../../../components/ha-card";
 import LocalizeMixin from "../../../mixins/localize-mixin";
-import "../../../resources/ha-style";
+import "../../../styles/polymer-ha-style";
 import "../ha-config-section";
 import "./ha-config-core-form";
 import "./ha-config-name-form";

src/panels/config/customize/ha-config-customize.js

@@ -6,7 +6,7 @@ import { computeStateName } from "../../../common/entity/compute_state_name";
 import { sortStatesByName } from "../../../common/entity/states_sort_by_name";
 import "../../../layouts/hass-tabs-subpage";
 import LocalizeMixin from "../../../mixins/localize-mixin";
-import "../../../resources/ha-style";
+import "../../../styles/polymer-ha-style";
 import "../ha-config-section";
 import "../ha-entity-config";
 import { configSections } from "../ha-panel-config";

src/panels/config/customize/ha-form-customize.js

@@ -8,6 +8,8 @@ import { computeStateDomain } from "../../../common/entity/compute_state_domain"
 import LocalizeMixin from "../../../mixins/localize-mixin";
 import hassAttributeUtil from "../../../util/hass-attributes-util";
 import "./ha-form-customize-attributes";
+import "../ha-form-style";
+import "../../../styles/polymer-ha-style";
 
 class HaFormCustomize extends LocalizeMixin(PolymerElement) {
   static get template() {

src/panels/config/ha-entity-config.js

@@ -8,6 +8,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import { computeStateName } from "../../common/entity/compute_state_name";
 import "../../components/ha-card";
+import "../../styles/polymer-ha-style";
 
 class HaEntityConfig extends PolymerElement {
   static get template() {

src/panels/config/server_control/ha-config-section-server-control.js

@@ -7,7 +7,7 @@ import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import "../../../components/buttons/ha-call-service-button";
 import "../../../components/ha-card";
 import LocalizeMixin from "../../../mixins/localize-mixin";
-import "../../../resources/ha-style";
+import "../../../styles/polymer-ha-style";
 import "../ha-config-section";
 
 /*

src/panels/config/server_control/ha-config-server-control.js

@@ -5,7 +5,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "../../../layouts/hass-tabs-subpage";
 import LocalizeMixin from "../../../mixins/localize-mixin";
-import "../../../resources/ha-style";
+import "../../../styles/polymer-ha-style";
 import { configSections } from "../ha-panel-config";
 import "./ha-config-section-server-control";
 

src/panels/config/zwave/ha-config-zwave.js

@@ -19,7 +19,7 @@ import "../../../components/ha-service-description";
 import "../../../layouts/ha-app-layout";
 import { EventsMixin } from "../../../mixins/events-mixin";
 import LocalizeMixin from "../../../mixins/localize-mixin";
-import "../../../resources/ha-style";
+import "../../../styles/polymer-ha-style";
 import "../ha-config-section";
 import "../ha-form-style";
 import "./zwave-groups";

src/panels/config/zwave/zwave-groups.js

@@ -7,6 +7,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import "../../../components/buttons/ha-call-service-button";
 import "../../../components/ha-card";
+import "../../../styles/polymer-ha-style";
 
 class ZwaveGroups extends PolymerElement {
   static get template() {

src/panels/config/zwave/zwave-log-dialog.js

@@ -4,7 +4,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "../../../components/dialog/ha-paper-dialog";
 import { EventsMixin } from "../../../mixins/events-mixin";
-import "../../../resources/ha-style";
+import "../../../styles/polymer-ha-style-dialog";
 
 class ZwaveLogDialog extends EventsMixin(PolymerElement) {
   static get template() {

src/panels/config/zwave/zwave-log.js

@@ -9,6 +9,7 @@ import "../../../components/ha-card";
 import { EventsMixin } from "../../../mixins/events-mixin";
 import LocalizeMixin from "../../../mixins/localize-mixin";
 import "../ha-config-section";
+import "../../../styles/polymer-ha-style";
 
 let registeredDialog = false;
 

src/panels/config/zwave/zwave-node-protection.js

@@ -7,6 +7,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "../../../components/buttons/ha-call-api-button";
 import "../../../components/ha-card";
+import "../../../styles/polymer-ha-style";
 
 class ZwaveNodeProtection extends PolymerElement {
   static get template() {

src/panels/config/zwave/zwave-usercodes.js

@@ -7,6 +7,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "../../../components/buttons/ha-call-service-button";
 import "../../../components/ha-card";
+import "../../../styles/polymer-ha-style";
 
 class ZwaveUsercodes extends PolymerElement {
   static get template() {

src/panels/developer-tools/event/developer-tools-event.js

@@ -9,7 +9,7 @@ import "../../../components/ha-code-editor";
 import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
 import { EventsMixin } from "../../../mixins/events-mixin";
 import LocalizeMixin from "../../../mixins/localize-mixin";
-import "../../../resources/ha-style";
+import "../../../styles/polymer-ha-style";
 import "./event-subscribe-card";
 import "./events-list";
 

src/panels/developer-tools/service/developer-tools-service.js

@@ -9,7 +9,7 @@ import "../../../components/ha-service-picker";
 import { ENTITY_COMPONENT_DOMAINS } from "../../../data/entity";
 import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
 import LocalizeMixin from "../../../mixins/localize-mixin";
-import "../../../resources/ha-style";
+import "../../../styles/polymer-ha-style";
 import "../../../util/app-localstorage-document";
 
 const ERROR_SENTINEL = {};

src/panels/developer-tools/state/developer-tools-state.js

@@ -12,7 +12,7 @@ import "../../../components/ha-code-editor";
 import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
 import { EventsMixin } from "../../../mixins/events-mixin";
 import LocalizeMixin from "../../../mixins/localize-mixin";
-import "../../../resources/ha-style";
+import "../../../styles/polymer-ha-style";
 import { mdiInformationOutline } from "@mdi/js";
 
 const ERROR_SENTINEL = {};

src/panels/developer-tools/template/developer-tools-template.js

@@ -6,7 +6,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "../../../components/ha-code-editor";
 import LocalizeMixin from "../../../mixins/localize-mixin";
-import "../../../resources/ha-style";
+import "../../../styles/polymer-ha-style";
 
 class HaPanelDevTemplate extends LocalizeMixin(PolymerElement) {
   static get template() {

src/panels/history/ha-panel-history.js

@@ -16,7 +16,7 @@ import "../../components/state-history-charts";
 import "../../data/ha-state-history-data";
 import LocalizeMixin from "../../mixins/localize-mixin";
 import "../../resources/ha-date-picker-style";
-import "../../resources/ha-style";
+import "../../styles/polymer-ha-style";
 
 /*
  * @appliesMixin LocalizeMixin

src/panels/iframe/ha-panel-iframe.js

@@ -3,7 +3,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "../../components/ha-menu-button";
-import "../../resources/ha-style";
+import "../../styles/polymer-ha-style";
 
 class HaPanelIframe extends PolymerElement {
   static get template() {

src/panels/logbook/ha-panel-logbook.js

@@ -14,7 +14,7 @@ import "../../components/entity/ha-entity-picker";
 import "../../components/ha-menu-button";
 import LocalizeMixin from "../../mixins/localize-mixin";
 import "../../resources/ha-date-picker-style";
-import "../../resources/ha-style";
+import "../../styles/polymer-ha-style";
 import "./ha-logbook";
 import "./ha-logbook-data";
 

src/panels/mailbox/ha-dialog-show-audio-message.js

@@ -5,7 +5,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "../../components/dialog/ha-paper-dialog";
 import LocalizeMixin from "../../mixins/localize-mixin";
-import "../../resources/ha-style";
+import "../../styles/polymer-ha-style-dialog";
 
 /*
  * @appliesMixin LocalizeMixin

src/panels/mailbox/ha-panel-mailbox.js

@@ -15,7 +15,7 @@ import "../../components/ha-card";
 import "../../components/ha-menu-button";
 import { EventsMixin } from "../../mixins/events-mixin";
 import LocalizeMixin from "../../mixins/localize-mixin";
-import "../../resources/ha-style";
+import "../../styles/polymer-ha-style";
 
 let registeredDialog = false;
 

src/panels/map/ha-panel-map.js

@@ -11,6 +11,7 @@ import "../../components/ha-menu-button";
 import { defaultRadiusColor } from "../../data/zone";
 import LocalizeMixin from "../../mixins/localize-mixin";
 import "./ha-entity-marker";
+import "../../styles/polymer-ha-style";
 
 /*
  * @appliesMixin LocalizeMixin

src/panels/profile/ha-change-password-card.js

@@ -6,7 +6,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "../../components/ha-card";
 import LocalizeMixin from "../../mixins/localize-mixin";
-import "../../resources/ha-style";
+import "../../styles/polymer-ha-style";
 
 /*
  * @appliesMixin LocalizeMixin

src/panels/profile/ha-long-lived-access-tokens-card.js

@@ -12,7 +12,7 @@ import {
 } from "../../dialogs/generic/show-dialog-box";
 import { EventsMixin } from "../../mixins/events-mixin";
 import LocalizeMixin from "../../mixins/localize-mixin";
-import "../../resources/ha-style";
+import "../../styles/polymer-ha-style";
 import "./ha-settings-row";
 
 /*

src/panels/profile/ha-mfa-module-setup-flow.js

@@ -9,7 +9,7 @@ import "../../components/ha-form/ha-form";
 import "../../components/ha-markdown";
 import { EventsMixin } from "../../mixins/events-mixin";
 import LocalizeMixin from "../../mixins/localize-mixin";
-import "../../resources/ha-style";
+import "../../styles/polymer-ha-style-dialog";
 
 let instance = 0;
 

src/panels/profile/ha-mfa-modules-card.js

@@ -8,7 +8,7 @@ import "../../components/ha-card";
 import { EventsMixin } from "../../mixins/events-mixin";
 import LocalizeMixin from "../../mixins/localize-mixin";
 import { showConfirmationDialog } from "../../dialogs/generic/show-dialog-box";
-import "../../resources/ha-style";
+import "../../styles/polymer-ha-style";
 
 let registeredDialog = false;
 

src/panels/profile/ha-panel-profile.ts

@@ -22,7 +22,6 @@ import {
   getOptimisticFrontendUserDataCollection,
 } from "../../data/frontend";
 import { showConfirmationDialog } from "../../dialogs/generic/show-dialog-box";
-import "../../resources/ha-style";
 import { haStyle } from "../../resources/styles";
 import { HomeAssistant } from "../../types";
 import "./ha-advanced-mode-row";

src/panels/shopping-list/ha-panel-shopping-list.js

@@ -17,6 +17,7 @@ import "../../components/ha-card";
 import "../../components/ha-menu-button";
 import { showVoiceCommandDialog } from "../../dialogs/voice-command-dialog/show-ha-voice-command-dialog";
 import LocalizeMixin from "../../mixins/localize-mixin";
+import "../../styles/polymer-ha-style";
 
 /*
  * @appliesMixin LocalizeMixin

src/resources/ha-style.ts

@@ -1,6 +1,6 @@
 import "@polymer/paper-styles/paper-styles";
 import "@polymer/polymer/lib/elements/custom-style";
-import { derivedStyles, haStyle, haStyleDialog } from "./styles";
+import { derivedStyles } from "./styles";
 
 const documentContainer = document.createElement("template");
 documentContainer.setAttribute("style", "display: none;");
@@ -98,35 +98,21 @@ documentContainer.innerHTML = `<custom-style>
         .map(([key, value]) => `--${key}: ${value};`)
         .join("")}
     }
-  </style>
 
-  <style shady-unscoped="">
     /*
       prevent clipping of positioned elements in a small scrollable
       force smooth scrolling if can scroll
       use non-shady selectors so this only targets iOS 9
       conditional mixin set in ha-style-dialog does not work with shadyCSS
     */
-    paper-dialog-scrollable:not(.can-scroll) &gt; .scrollable {
+    paper-dialog-scrollable:not(.can-scroll) > .scrollable {
       -webkit-overflow-scrolling: auto !important;
     }
 
-    paper-dialog-scrollable.can-scroll &gt; .scrollable {
+    paper-dialog-scrollable.can-scroll > .scrollable {
       -webkit-overflow-scrolling: touch !important;
     }
   </style>
-</custom-style><dom-module id="ha-style">
+</custom-style>`;
-  <template>
-    <style>
-    ${haStyle.cssText}
-    </style>
-  </template>
-</dom-module><dom-module id="ha-style-dialog">
-  <template>
-    <style>
-      ${haStyleDialog.cssText}
-    </style>
-  </template>
-</dom-module>`;
 
 document.head.appendChild(documentContainer.content);

src/styles/polymer-ha-style-dialog.ts

@@ -0,0 +1,15 @@
+import "@polymer/polymer/lib/elements/dom-module";
+import { haStyleDialog } from "../resources/styles";
+
+const documentContainer = document.createElement("template");
+documentContainer.setAttribute("style", "display: none;");
+
+documentContainer.innerHTML = `<dom-module id="ha-style-dialog">
+<template>
+  <style>
+    ${haStyleDialog.cssText}
+  </style>
+</template>
+</dom-module>`;
+
+document.head.appendChild(documentContainer.content);

src/styles/polymer-ha-style.ts

@@ -0,0 +1,15 @@
+import "@polymer/polymer/lib/elements/dom-module";
+import { haStyle } from "../resources/styles";
+
+const documentContainer = document.createElement("template");
+documentContainer.setAttribute("style", "display: none;");
+
+documentContainer.innerHTML = `<dom-module id="ha-style">
+  <template>
+    <style>
+    ${haStyle.cssText}
+    </style>
+  </template>
+</dom-module>`;
+
+document.head.appendChild(documentContainer.content);