diff --git a/cast/src/receiver/second-load.ts b/cast/src/receiver/second-load.ts
index 39dd115e96..bb691527f6 100644
--- a/cast/src/receiver/second-load.ts
+++ b/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";
diff --git a/demo/src/entrypoint.ts b/demo/src/entrypoint.ts
index e2b8c447ce..5ddbcc0ca4 100644
--- a/demo/src/entrypoint.ts
+++ b/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";
diff --git a/gallery/src/entrypoint.js b/gallery/src/entrypoint.js
index f803a3c6a3..095530ec00 100644
--- a/gallery/src/entrypoint.js
+++ b/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";
diff --git a/gallery/src/ha-gallery.js b/gallery/src/ha-gallery.js
index de8c424e5a..3352048e38 100644
--- a/gallery/src/ha-gallery.js
+++ b/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);
diff --git a/hassio/src/hassio-panel.ts b/hassio/src/hassio-panel.ts
index b5f4770807..1e92ec923b 100644
--- a/hassio/src/hassio-panel.ts
+++ b/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";
 
diff --git a/src/dialogs/config-flow/dialog-data-entry-flow.ts b/src/dialogs/config-flow/dialog-data-entry-flow.ts
index 3ece18035b..8ee7b60587 100644
--- a/src/dialogs/config-flow/dialog-data-entry-flow.ts
+++ b/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";
diff --git a/src/dialogs/config-flow/step-flow-form.ts b/src/dialogs/config-flow/step-flow-form.ts
index 21644637ab..7822a21f6f 100644
--- a/src/dialogs/config-flow/step-flow-form.ts
+++ b/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";
diff --git a/src/dialogs/ha-more-info-dialog.js b/src/dialogs/ha-more-info-dialog.js
index 6f716ada0d..1f80d19aec 100644
--- a/src/dialogs/ha-more-info-dialog.js
+++ b/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";
 
 /*
diff --git a/src/dialogs/ha-store-auth-card.js b/src/dialogs/ha-store-auth-card.js
index 28df7c7249..a3b39c1681 100644
--- a/src/dialogs/ha-store-auth-card.js
+++ b/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() {
diff --git a/src/dialogs/more-info/more-info-controls.js b/src/dialogs/more-info/more-info-controls.js
index bb12335b21..34d5e97ebc 100644
--- a/src/dialogs/more-info/more-info-controls.js
+++ b/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";
diff --git a/src/entrypoints/app.ts b/src/entrypoints/app.ts
index 9be05793ac..2e9f6294e0 100644
--- a/src/entrypoints/app.ts
+++ b/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);
diff --git a/src/layouts/home-assistant.ts b/src/layouts/home-assistant.ts
index c9594d1d54..e38acec094 100644
--- a/src/layouts/home-assistant.ts
+++ b/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 {
diff --git a/src/panels/config/cloud/account/cloud-account.js b/src/panels/config/cloud/account/cloud-account.js
index 5f47122819..b622c8a9ff 100644
--- a/src/panels/config/cloud/account/cloud-account.js
+++ b/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";
diff --git a/src/panels/config/cloud/forgot-password/cloud-forgot-password.js b/src/panels/config/cloud/forgot-password/cloud-forgot-password.js
index 656db3782c..6d82355c14 100644
--- a/src/panels/config/cloud/forgot-password/cloud-forgot-password.js
+++ b/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
diff --git a/src/panels/config/cloud/login/cloud-login.js b/src/panels/config/cloud/login/cloud-login.js
index d90dd01eeb..f8d27ffcd0 100644
--- a/src/panels/config/cloud/login/cloud-login.js
+++ b/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";
 
 /*
diff --git a/src/panels/config/cloud/register/cloud-register.js b/src/panels/config/cloud/register/cloud-register.js
index 90d43735f5..9373b10a16 100644
--- a/src/panels/config/cloud/register/cloud-register.js
+++ b/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";
 
 /*
diff --git a/src/panels/config/core/ha-config-core.js b/src/panels/config/core/ha-config-core.js
index 383d1f5e99..75d59b5aa5 100644
--- a/src/panels/config/core/ha-config-core.js
+++ b/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";
 
diff --git a/src/panels/config/core/ha-config-section-core.js b/src/panels/config/core/ha-config-section-core.js
index 0ce4653489..b73161c709 100644
--- a/src/panels/config/core/ha-config-section-core.js
+++ b/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";
diff --git a/src/panels/config/customize/ha-config-customize.js b/src/panels/config/customize/ha-config-customize.js
index e142dbc2a7..c178afa646 100644
--- a/src/panels/config/customize/ha-config-customize.js
+++ b/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";
diff --git a/src/panels/config/customize/ha-form-customize.js b/src/panels/config/customize/ha-form-customize.js
index 90844f93f4..4c85d7b27f 100644
--- a/src/panels/config/customize/ha-form-customize.js
+++ b/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() {
diff --git a/src/panels/config/ha-entity-config.js b/src/panels/config/ha-entity-config.js
index da870762c0..ed3bed78eb 100644
--- a/src/panels/config/ha-entity-config.js
+++ b/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() {
diff --git a/src/panels/config/server_control/ha-config-section-server-control.js b/src/panels/config/server_control/ha-config-section-server-control.js
index e26a9f76db..97afdccba9 100644
--- a/src/panels/config/server_control/ha-config-section-server-control.js
+++ b/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";
 
 /*
diff --git a/src/panels/config/server_control/ha-config-server-control.js b/src/panels/config/server_control/ha-config-server-control.js
index 8c69bd5e5b..2cd4e8f87e 100644
--- a/src/panels/config/server_control/ha-config-server-control.js
+++ b/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";
 
diff --git a/src/panels/config/zwave/ha-config-zwave.js b/src/panels/config/zwave/ha-config-zwave.js
index f971fe447b..b5ad855e7f 100644
--- a/src/panels/config/zwave/ha-config-zwave.js
+++ b/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";
diff --git a/src/panels/config/zwave/zwave-groups.js b/src/panels/config/zwave/zwave-groups.js
index 165cfbbcfd..9d98ee7df3 100644
--- a/src/panels/config/zwave/zwave-groups.js
+++ b/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() {
diff --git a/src/panels/config/zwave/zwave-log-dialog.js b/src/panels/config/zwave/zwave-log-dialog.js
index 8f2c271c62..f3e16d2c63 100644
--- a/src/panels/config/zwave/zwave-log-dialog.js
+++ b/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() {
diff --git a/src/panels/config/zwave/zwave-log.js b/src/panels/config/zwave/zwave-log.js
index b933bdd7ee..1c05969536 100755
--- a/src/panels/config/zwave/zwave-log.js
+++ b/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;
 
diff --git a/src/panels/config/zwave/zwave-node-protection.js b/src/panels/config/zwave/zwave-node-protection.js
index c980187c5c..b3ff759a64 100644
--- a/src/panels/config/zwave/zwave-node-protection.js
+++ b/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() {
diff --git a/src/panels/config/zwave/zwave-usercodes.js b/src/panels/config/zwave/zwave-usercodes.js
index 2ab33eba5d..316bc5e7f6 100644
--- a/src/panels/config/zwave/zwave-usercodes.js
+++ b/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() {
diff --git a/src/panels/developer-tools/event/developer-tools-event.js b/src/panels/developer-tools/event/developer-tools-event.js
index 2ccf0a9a8f..7b1c9856de 100644
--- a/src/panels/developer-tools/event/developer-tools-event.js
+++ b/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";
 
diff --git a/src/panels/developer-tools/service/developer-tools-service.js b/src/panels/developer-tools/service/developer-tools-service.js
index c34299a020..528022b263 100644
--- a/src/panels/developer-tools/service/developer-tools-service.js
+++ b/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 = {};
diff --git a/src/panels/developer-tools/state/developer-tools-state.js b/src/panels/developer-tools/state/developer-tools-state.js
index 76fecb5d97..5febdc282e 100644
--- a/src/panels/developer-tools/state/developer-tools-state.js
+++ b/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 = {};
diff --git a/src/panels/developer-tools/template/developer-tools-template.js b/src/panels/developer-tools/template/developer-tools-template.js
index 5f7c0ae198..55aba598eb 100644
--- a/src/panels/developer-tools/template/developer-tools-template.js
+++ b/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() {
diff --git a/src/panels/history/ha-panel-history.js b/src/panels/history/ha-panel-history.js
index 464c452722..93e2a8b2ba 100644
--- a/src/panels/history/ha-panel-history.js
+++ b/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
diff --git a/src/panels/iframe/ha-panel-iframe.js b/src/panels/iframe/ha-panel-iframe.js
index ea7826dfc3..b7ebf03359 100644
--- a/src/panels/iframe/ha-panel-iframe.js
+++ b/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() {
diff --git a/src/panels/logbook/ha-panel-logbook.js b/src/panels/logbook/ha-panel-logbook.js
index 9d2c96adba..293092dc0a 100644
--- a/src/panels/logbook/ha-panel-logbook.js
+++ b/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";
 
diff --git a/src/panels/mailbox/ha-dialog-show-audio-message.js b/src/panels/mailbox/ha-dialog-show-audio-message.js
index 64f3de1369..1088141acc 100644
--- a/src/panels/mailbox/ha-dialog-show-audio-message.js
+++ b/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
diff --git a/src/panels/mailbox/ha-panel-mailbox.js b/src/panels/mailbox/ha-panel-mailbox.js
index 4d15814302..922d7d3d0a 100644
--- a/src/panels/mailbox/ha-panel-mailbox.js
+++ b/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;
 
diff --git a/src/panels/map/ha-panel-map.js b/src/panels/map/ha-panel-map.js
index 15850155dc..4490504b65 100644
--- a/src/panels/map/ha-panel-map.js
+++ b/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
diff --git a/src/panels/profile/ha-change-password-card.js b/src/panels/profile/ha-change-password-card.js
index 93fd8aa26e..5c2588baea 100644
--- a/src/panels/profile/ha-change-password-card.js
+++ b/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
diff --git a/src/panels/profile/ha-long-lived-access-tokens-card.js b/src/panels/profile/ha-long-lived-access-tokens-card.js
index e673444926..4b9697de48 100644
--- a/src/panels/profile/ha-long-lived-access-tokens-card.js
+++ b/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";
 
 /*
diff --git a/src/panels/profile/ha-mfa-module-setup-flow.js b/src/panels/profile/ha-mfa-module-setup-flow.js
index d8e050144f..6462dc2716 100644
--- a/src/panels/profile/ha-mfa-module-setup-flow.js
+++ b/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;
 
diff --git a/src/panels/profile/ha-mfa-modules-card.js b/src/panels/profile/ha-mfa-modules-card.js
index 0dfda6b718..f350af6e10 100644
--- a/src/panels/profile/ha-mfa-modules-card.js
+++ b/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;
 
diff --git a/src/panels/profile/ha-panel-profile.ts b/src/panels/profile/ha-panel-profile.ts
index 429f2557f2..f32e10ce47 100644
--- a/src/panels/profile/ha-panel-profile.ts
+++ b/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";
diff --git a/src/panels/shopping-list/ha-panel-shopping-list.js b/src/panels/shopping-list/ha-panel-shopping-list.js
index 791b516864..db11be6cc0 100644
--- a/src/panels/shopping-list/ha-panel-shopping-list.js
+++ b/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
diff --git a/src/resources/ha-style.ts b/src/resources/ha-style.ts
index 2fd3023518..6dfbfe1eed 100644
--- a/src/resources/ha-style.ts
+++ b/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">
-  <template>
-    <style>
-    ${haStyle.cssText}
-    </style>
-  </template>
-</dom-module><dom-module id="ha-style-dialog">
-  <template>
-    <style>
-      ${haStyleDialog.cssText}
-    </style>
-  </template>
-</dom-module>`;
+</custom-style>`;
 
 document.head.appendChild(documentContainer.content);
diff --git a/src/styles/polymer-ha-style-dialog.ts b/src/styles/polymer-ha-style-dialog.ts
new file mode 100644
index 0000000000..04e28b93e1
--- /dev/null
+++ b/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);
diff --git a/src/styles/polymer-ha-style.ts b/src/styles/polymer-ha-style.ts
new file mode 100644
index 0000000000..22d8c38cc6
--- /dev/null
+++ b/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);