Minify ha-style/Roboto and load asynchronously (#18226)
This commit is contained in:
Steve Repsher
GitHub
parent
a08185a1a5
commit
3b2f6d71f5
|
|
@ -1,4 +1,4 @@
|
|||
import "../../../src/resources/safari-14-attachshadow-patch";
|
||||
import "../../../src/resources/ha-style";
|
||||
import "../../../src/resources/roboto";
|
||||
import "./layout/hc-connect";
|
||||
|
||||
import("../../../src/resources/ha-style");
|
||||
|
|
|
|||
|
|
@ -100,7 +100,9 @@ export class HcMain extends HassElement {
|
|||
|
||||
protected firstUpdated(changedProps) {
|
||||
super.firstUpdated(changedProps);
|
||||
import("../second-load");
|
||||
import("./hc-lovelace");
|
||||
import("../../../../src/resources/ha-style");
|
||||
|
||||
window.addEventListener("location-changed", () => {
|
||||
const panelPath = `/${this._urlPath || "lovelace"}/`;
|
||||
if (location.pathname.startsWith(panelPath)) {
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
import "../../../src/resources/ha-style";
|
||||
import "../../../src/resources/roboto";
|
||||
import "./layout/hc-lovelace";
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import "../../src/resources/ha-style";
|
||||
import "../../src/resources/roboto";
|
||||
import "../../src/resources/safari-14-attachshadow-patch";
|
||||
import "./ha-demo";
|
||||
|
||||
import("../../src/resources/ha-style");
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import "../../src/resources/ha-style";
|
||||
import "../../src/resources/roboto";
|
||||
import "./ha-gallery";
|
||||
|
||||
import("../../src/resources/ha-style");
|
||||
|
||||
document.body.appendChild(document.createElement("ha-gallery"));
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
// Compat needs to be first import
|
||||
import "../../src/resources/compatibility";
|
||||
import { setCancelSyntheticClickEvents } from "@polymer/polymer/lib/utils/settings";
|
||||
import "../../src/resources/roboto";
|
||||
import "../../src/resources/ha-style";
|
||||
import "../../src/resources/safari-14-attachshadow-patch";
|
||||
import "./hassio-main";
|
||||
|
||||
import("../../src/resources/ha-style");
|
||||
|
||||
setCancelSyntheticClickEvents(false);
|
||||
|
||||
const styleEl = document.createElement("style");
|
||||
styleEl.innerHTML = `
|
||||
styleEl.textContent = `
|
||||
body {
|
||||
font-family: Roboto, sans-serif;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@ import {
|
|||
} from "@polymer/polymer/lib/utils/settings";
|
||||
import "@webcomponents/scoped-custom-element-registry/scoped-custom-element-registry.min";
|
||||
import "../layouts/home-assistant";
|
||||
import "../resources/ha-style";
|
||||
import "../resources/roboto";
|
||||
|
||||
import("../resources/ha-style");
|
||||
|
||||
setPassiveTouchGestures(true);
|
||||
setCancelSyntheticClickEvents(false);
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@
|
|||
import "../resources/compatibility";
|
||||
import { setCancelSyntheticClickEvents } from "@polymer/polymer/lib/utils/settings";
|
||||
import "../auth/ha-authorize";
|
||||
import "../resources/ha-style";
|
||||
import "../resources/roboto";
|
||||
import "../resources/safari-14-attachshadow-patch";
|
||||
import "../resources/array.flat.polyfill";
|
||||
|
||||
import("../resources/ha-style");
|
||||
|
||||
setCancelSyntheticClickEvents(false);
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@
|
|||
import "../resources/compatibility";
|
||||
import { setCancelSyntheticClickEvents } from "@polymer/polymer/lib/utils/settings";
|
||||
import "../onboarding/ha-onboarding";
|
||||
import "../resources/ha-style";
|
||||
import "../resources/roboto";
|
||||
import "../resources/safari-14-attachshadow-patch";
|
||||
import "../resources/array.flat.polyfill";
|
||||
|
||||
import("../resources/ha-style");
|
||||
|
||||
setCancelSyntheticClickEvents(false);
|
||||
|
||||
declare global {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { tsParticles } from "tsparticles-engine";
|
||||
import { loadLinksPreset } from "tsparticles-preset-links";
|
||||
import { DEFAULT_PRIMARY_COLOR } from "../resources/ha-style";
|
||||
import { DEFAULT_PRIMARY_COLOR } from "../resources/styles-data";
|
||||
|
||||
loadLinksPreset(tsParticles).then(() => {
|
||||
tsParticles.load("particles", {
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ import { showOptionsFlowDialog } from "../../../dialogs/config-flow/show-dialog-
|
|||
import { showRestartDialog } from "../../../dialogs/restart/show-dialog-restart";
|
||||
import "../../../layouts/hass-subpage";
|
||||
import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
|
||||
import { DEFAULT_PRIMARY_COLOR } from "../../../resources/ha-style";
|
||||
import { DEFAULT_PRIMARY_COLOR } from "../../../resources/styles-data";
|
||||
import { haStyle } from "../../../resources/styles";
|
||||
import type { HomeAssistant } from "../../../types";
|
||||
import { hardwareBrandsUrl } from "../../../util/brands-url";
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ import "../../components/ha-textfield";
|
|||
import {
|
||||
DEFAULT_ACCENT_COLOR,
|
||||
DEFAULT_PRIMARY_COLOR,
|
||||
} from "../../resources/ha-style";
|
||||
} from "../../resources/styles-data";
|
||||
import { HomeAssistant } from "../../types";
|
||||
import { documentationUrl } from "../../util/documentation-url";
|
||||
|
||||
|
|
|
|||
|
|
@ -1,433 +1,442 @@
|
|||
import "@polymer/polymer/lib/elements/custom-style";
|
||||
import { derivedStyles } from "./styles-data";
|
||||
import { css, unsafeCSS } from "lit";
|
||||
import { fontStyles } from "./roboto";
|
||||
import {
|
||||
DEFAULT_ACCENT_COLOR,
|
||||
DEFAULT_PRIMARY_COLOR,
|
||||
derivedStyles,
|
||||
} from "./styles-data";
|
||||
|
||||
export const DEFAULT_PRIMARY_COLOR = "#03a9f4";
|
||||
export const DEFAULT_ACCENT_COLOR = "#ff9800";
|
||||
const mainStyles = css`
|
||||
/*
|
||||
Home Assistant default styles.
|
||||
|
||||
const documentContainer = document.createElement("template");
|
||||
documentContainer.setAttribute("style", "display: none;");
|
||||
In Polymer 2.0, default styles should to be set on the html selector.
|
||||
(Setting all default styles only on body breaks shadyCSS polyfill.)
|
||||
See: https://github.com/home-assistant/home-assistant-polymer/pull/901
|
||||
*/
|
||||
html {
|
||||
font-size: 14px;
|
||||
height: 100vh;
|
||||
|
||||
documentContainer.innerHTML = `<custom-style>
|
||||
<style>
|
||||
/*
|
||||
Home Assistant default styles.
|
||||
/* text */
|
||||
--primary-text-color: #212121;
|
||||
--secondary-text-color: #727272;
|
||||
--text-primary-color: #ffffff;
|
||||
--text-light-primary-color: #212121;
|
||||
--disabled-text-color: #bdbdbd;
|
||||
|
||||
/* main interface colors */
|
||||
--primary-color: ${unsafeCSS(DEFAULT_PRIMARY_COLOR)};
|
||||
--dark-primary-color: #0288d1;
|
||||
--light-primary-color: #b3e5fc;
|
||||
--accent-color: ${unsafeCSS(DEFAULT_ACCENT_COLOR)};
|
||||
--divider-color: rgba(0, 0, 0, 0.12);
|
||||
--outline-color: rgba(0, 0, 0, 0.12);
|
||||
|
||||
--scrollbar-thumb-color: rgb(194, 194, 194);
|
||||
|
||||
--error-color: #db4437;
|
||||
--warning-color: #ffa600;
|
||||
--success-color: #43a047;
|
||||
--info-color: #039be5;
|
||||
|
||||
/* backgrounds */
|
||||
--card-background-color: #ffffff;
|
||||
--primary-background-color: #fafafa;
|
||||
--secondary-background-color: #e5e5e5; /* behind the cards on state */
|
||||
--clear-background-color: #ffffff;
|
||||
|
||||
/* for header */
|
||||
--header-height: 56px;
|
||||
|
||||
/* for label-badge */
|
||||
--label-badge-red: var(--error-color);
|
||||
--label-badge-blue: var(--info-color);
|
||||
--label-badge-green: var(--success-color);
|
||||
--label-badge-yellow: var(--warning-color);
|
||||
--label-badge-grey: #9e9e9e;
|
||||
|
||||
/* states icon */
|
||||
--state-icon-color: #44739e;
|
||||
/* an error state is anything that would be considered an error */
|
||||
/* --state-icon-error-color: #db4437; derived from error-color */
|
||||
|
||||
/* energy */
|
||||
--energy-grid-consumption-color: #488fc2;
|
||||
--energy-grid-return-color: #8353d1;
|
||||
--energy-solar-color: #ff9800;
|
||||
--energy-non-fossil-color: #0f9d58;
|
||||
--energy-battery-out-color: #4db6ac;
|
||||
--energy-battery-in-color: #f06292;
|
||||
--energy-gas-color: #8e021b;
|
||||
--energy-water-color: #00bcd4;
|
||||
|
||||
/* opacity for dark text on a light background */
|
||||
--dark-divider-opacity: 0.12;
|
||||
--dark-disabled-opacity: 0.38; /* or hint text or icon */
|
||||
--dark-secondary-opacity: 0.54;
|
||||
--dark-primary-opacity: 0.87;
|
||||
|
||||
/* opacity for light text on a dark background */
|
||||
--light-divider-opacity: 0.12;
|
||||
--light-disabled-opacity: 0.3; /* or hint text or icon */
|
||||
--light-secondary-opacity: 0.7;
|
||||
--light-primary-opacity: 1;
|
||||
|
||||
/* 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;
|
||||
--rgb-card-background-color: 255, 255, 255;
|
||||
|
||||
/* color */
|
||||
--disabled-color: #bdbdbd;
|
||||
--red-color: #f44336;
|
||||
--pink-color: #e91e63;
|
||||
--purple-color: #926bc7;
|
||||
--deep-purple-color: #6e41ab;
|
||||
--indigo-color: #3f51b5;
|
||||
--blue-color: #2196f3;
|
||||
--light-blue-color: #03a9f4;
|
||||
--cyan-color: #00bcd4;
|
||||
--teal-color: #009688;
|
||||
--green-color: #4caf50;
|
||||
--light-green-color: #8bc34a;
|
||||
--lime-color: #cddc39;
|
||||
--yellow-color: #ffeb3b;
|
||||
--amber-color: #ffc107;
|
||||
--orange-color: #ff9800;
|
||||
--deep-orange-color: #ff6f22;
|
||||
--brown-color: #795548;
|
||||
--light-grey-color: #bdbdbd;
|
||||
--grey-color: #9e9e9e;
|
||||
--dark-grey-color: #606060;
|
||||
--blue-grey-color: #607d8b;
|
||||
--black-color: #000000;
|
||||
--white-color: #ffffff;
|
||||
|
||||
/* state color */
|
||||
--state-active-color: var(--amber-color);
|
||||
--state-inactive-color: var(--grey-color);
|
||||
--state-unavailable-color: var(--disabled-color);
|
||||
|
||||
/* state domain colors */
|
||||
--state-alarm_control_panel-armed_away-color: var(--green-color);
|
||||
--state-alarm_control_panel-armed_custom_bypass-color: var(--green-color);
|
||||
--state-alarm_control_panel-armed_home-color: var(--green-color);
|
||||
--state-alarm_control_panel-armed_night-color: var(--green-color);
|
||||
--state-alarm_control_panel-armed_vacation-color: var(--green-color);
|
||||
--state-alarm_control_panel-arming-color: var(--orange-color);
|
||||
--state-alarm_control_panel-disarming-color: var(--orange-color);
|
||||
--state-alarm_control_panel-pending-color: var(--orange-color);
|
||||
--state-alarm_control_panel-triggered-color: var(--red-color);
|
||||
--state-alert-off-color: var(--orange-color);
|
||||
--state-alert-on-color: var(--red-color);
|
||||
--state-binary_sensor-active-color: var(--amber-color);
|
||||
--state-binary_sensor-battery-on-color: var(--red-color);
|
||||
--state-binary_sensor-carbon_monoxide-on-color: var(--red-color);
|
||||
--state-binary_sensor-gas-on-color: var(--red-color);
|
||||
--state-binary_sensor-heat-on-color: var(--red-color);
|
||||
--state-binary_sensor-lock-on-color: var(--red-color);
|
||||
--state-binary_sensor-moisture-on-color: var(--red-color);
|
||||
--state-binary_sensor-problem-on-color: var(--red-color);
|
||||
--state-binary_sensor-safety-on-color: var(--red-color);
|
||||
--state-binary_sensor-smoke-on-color: var(--red-color);
|
||||
--state-binary_sensor-sound-on-color: var(--red-color);
|
||||
--state-binary_sensor-tamper-on-color: var(--red-color);
|
||||
--state-climate-auto-color: var(--green-color);
|
||||
--state-climate-cool-color: var(--blue-color);
|
||||
--state-climate-dry-color: var(--orange-color);
|
||||
--state-climate-fan_only-color: var(--cyan-color);
|
||||
--state-climate-heat-color: var(--deep-orange-color);
|
||||
--state-climate-heat-cool-color: var(--amber-color);
|
||||
--state-cover-active-color: var(--purple-color);
|
||||
--state-device_tracker-active-color: var(--blue-color);
|
||||
--state-device_tracker-home-color: var(--green-color);
|
||||
--state-fan-active-color: var(--cyan-color);
|
||||
--state-humidifier-on-color: var(--blue-color);
|
||||
--state-lawn_mower-error-color: var(--red-color);
|
||||
--state-lawn_mower-mowing-color: var(--teal-color);
|
||||
--state-light-active-color: var(--amber-color);
|
||||
--state-lock-jammed-color: var(--red-color);
|
||||
--state-lock-locked-color: var(--green-color);
|
||||
--state-lock-pending-color: var(--orange-color);
|
||||
--state-lock-unlocked-color: var(--red-color);
|
||||
--state-media_player-active-color: var(--light-blue-color);
|
||||
--state-person-active-color: var(--blue-color);
|
||||
--state-person-home-color: var(--green-color);
|
||||
--state-plant-active-color: var(--red-color);
|
||||
--state-siren-active-color: var(--red-color);
|
||||
--state-sun-above_horizon-color: var(--amber-color);
|
||||
--state-sun-below_horizon-color: var(--indigo-color);
|
||||
--state-switch-active-color: var(--amber-color);
|
||||
--state-update-active-color: var(--orange-color);
|
||||
--state-vacuum-active-color: var(--teal-color);
|
||||
--state-sensor-battery-high-color: var(--green-color);
|
||||
--state-sensor-battery-low-color: var(--red-color);
|
||||
--state-sensor-battery-medium-color: var(--orange-color);
|
||||
--state-water_heater-eco-color: var(--green-color);
|
||||
--state-water_heater-electric-color: var(--orange-color);
|
||||
--state-water_heater-gas-color: var(--orange-color);
|
||||
--state-water_heater-heat_pump-color: var(--orange-color);
|
||||
--state-water_heater-high_demand-color: var(--deep-orange-color);
|
||||
--state-water_heater-performance-color: var(--deep-orange-color);
|
||||
|
||||
/* history colors */
|
||||
--history-unavailable-color: transparent;
|
||||
--history-unknown-color: var(--dark-grey-color);
|
||||
|
||||
/* input components */
|
||||
--input-idle-line-color: rgba(0, 0, 0, 0.42);
|
||||
--input-hover-line-color: rgba(0, 0, 0, 0.87);
|
||||
--input-disabled-line-color: rgba(0, 0, 0, 0.06);
|
||||
--input-outlined-idle-border-color: rgba(0, 0, 0, 0.38);
|
||||
--input-outlined-hover-border-color: rgba(0, 0, 0, 0.87);
|
||||
--input-outlined-disabled-border-color: rgba(0, 0, 0, 0.06);
|
||||
--input-fill-color: rgb(245, 245, 245);
|
||||
--input-disabled-fill-color: rgb(250, 250, 250);
|
||||
--input-ink-color: rgba(0, 0, 0, 0.87);
|
||||
--input-label-ink-color: rgba(0, 0, 0, 0.6);
|
||||
--input-disabled-ink-color: rgba(0, 0, 0, 0.37);
|
||||
--input-dropdown-icon-color: rgba(0, 0, 0, 0.54);
|
||||
|
||||
/* Vaadin typography */
|
||||
--material-h6-font-size: 1.25rem;
|
||||
--material-small-font-size: 0.875rem;
|
||||
--material-caption-font-size: 0.75rem;
|
||||
--material-button-font-size: 0.875rem;
|
||||
|
||||
/* Paper shadow */
|
||||
--shadow-transition: {
|
||||
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
};
|
||||
|
||||
--shadow-none: {
|
||||
box-shadow: none;
|
||||
};
|
||||
|
||||
/* from http://codepen.io/shyndman/pen/c5394ddf2e8b2a5c9185904b57421cdb */
|
||||
|
||||
--shadow-elevation-2dp: {
|
||||
box-shadow:
|
||||
0 2px 2px 0 rgba(0, 0, 0, 0.14),
|
||||
0 1px 5px 0 rgba(0, 0, 0, 0.12),
|
||||
0 3px 1px -2px rgba(0, 0, 0, 0.2);
|
||||
};
|
||||
|
||||
--shadow-elevation-3dp: {
|
||||
box-shadow:
|
||||
0 3px 4px 0 rgba(0, 0, 0, 0.14),
|
||||
0 1px 8px 0 rgba(0, 0, 0, 0.12),
|
||||
0 3px 3px -2px rgba(0, 0, 0, 0.4);
|
||||
};
|
||||
|
||||
--shadow-elevation-4dp: {
|
||||
box-shadow:
|
||||
0 4px 5px 0 rgba(0, 0, 0, 0.14),
|
||||
0 1px 10px 0 rgba(0, 0, 0, 0.12),
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.4);
|
||||
};
|
||||
|
||||
--shadow-elevation-6dp: {
|
||||
box-shadow:
|
||||
0 6px 10px 0 rgba(0, 0, 0, 0.14),
|
||||
0 1px 18px 0 rgba(0, 0, 0, 0.12),
|
||||
0 3px 5px -1px rgba(0, 0, 0, 0.4);
|
||||
};
|
||||
|
||||
--shadow-elevation-8dp: {
|
||||
box-shadow:
|
||||
0 8px 10px 1px rgba(0, 0, 0, 0.14),
|
||||
0 3px 14px 2px rgba(0, 0, 0, 0.12),
|
||||
0 5px 5px -3px rgba(0, 0, 0, 0.4);
|
||||
};
|
||||
|
||||
--shadow-elevation-12dp: {
|
||||
box-shadow:
|
||||
0 12px 16px 1px rgba(0, 0, 0, 0.14),
|
||||
0 4px 22px 3px rgba(0, 0, 0, 0.12),
|
||||
0 6px 7px -4px rgba(0, 0, 0, 0.4);
|
||||
};
|
||||
|
||||
--shadow-elevation-16dp: {
|
||||
box-shadow:
|
||||
0 16px 24px 2px rgba(0, 0, 0, 0.14),
|
||||
0 6px 30px 5px rgba(0, 0, 0, 0.12),
|
||||
0 8px 10px -5px rgba(0, 0, 0, 0.4);
|
||||
};
|
||||
|
||||
--shadow-elevation-24dp: {
|
||||
box-shadow:
|
||||
0 24px 38px 3px rgba(0, 0, 0, 0.14),
|
||||
0 9px 46px 8px rgba(0, 0, 0, 0.12),
|
||||
0 11px 15px -7px rgba(0, 0, 0, 0.4);
|
||||
};
|
||||
|
||||
/* Paper typography Styles */
|
||||
--paper-font-common-base: {
|
||||
font-family: "Roboto", "Noto", sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
};
|
||||
|
||||
--paper-font-common-code: {
|
||||
font-family: "Roboto Mono", "Consolas", "Menlo", monospace;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
};
|
||||
|
||||
--paper-font-common-expensive-kerning: {
|
||||
text-rendering: optimizeLegibility;
|
||||
};
|
||||
|
||||
--paper-font-common-nowrap: {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
};
|
||||
|
||||
/* Material Font Styles */
|
||||
|
||||
--paper-font-display4: {
|
||||
@apply --paper-font-common-base;
|
||||
@apply --paper-font-common-nowrap;
|
||||
|
||||
font-size: 112px;
|
||||
font-weight: 300;
|
||||
letter-spacing: -0.044em;
|
||||
line-height: 120px;
|
||||
};
|
||||
|
||||
--paper-font-display3: {
|
||||
@apply --paper-font-common-base;
|
||||
@apply --paper-font-common-nowrap;
|
||||
|
||||
font-size: 56px;
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.026em;
|
||||
line-height: 60px;
|
||||
};
|
||||
|
||||
--paper-font-display2: {
|
||||
@apply --paper-font-common-base;
|
||||
|
||||
font-size: 45px;
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.018em;
|
||||
line-height: 48px;
|
||||
};
|
||||
|
||||
--paper-font-display1: {
|
||||
@apply --paper-font-common-base;
|
||||
|
||||
font-size: 34px;
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.01em;
|
||||
line-height: 40px;
|
||||
};
|
||||
|
||||
--paper-font-headline: {
|
||||
@apply --paper-font-common-base;
|
||||
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.012em;
|
||||
line-height: 32px;
|
||||
};
|
||||
|
||||
--paper-font-title: {
|
||||
@apply --paper-font-common-base;
|
||||
@apply --paper-font-common-nowrap;
|
||||
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
line-height: 28px;
|
||||
};
|
||||
|
||||
--paper-font-subhead: {
|
||||
@apply --paper-font-common-base;
|
||||
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
};
|
||||
|
||||
--paper-font-body2: {
|
||||
@apply --paper-font-common-base;
|
||||
|
||||
In Polymer 2.0, default styles should to be set on the html selector.
|
||||
(Setting all default styles only on body breaks shadyCSS polyfill.)
|
||||
See: https://github.com/home-assistant/home-assistant-polymer/pull/901
|
||||
*/
|
||||
html {
|
||||
font-size: 14px;
|
||||
height: 100vh;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
};
|
||||
|
||||
/* text */
|
||||
--primary-text-color: #212121;
|
||||
--secondary-text-color: #727272;
|
||||
--text-primary-color: #ffffff;
|
||||
--text-light-primary-color: #212121;
|
||||
--disabled-text-color: #bdbdbd;
|
||||
--paper-font-body1: {
|
||||
@apply --paper-font-common-base;
|
||||
|
||||
/* main interface colors */
|
||||
--primary-color: ${DEFAULT_PRIMARY_COLOR};
|
||||
--dark-primary-color: #0288d1;
|
||||
--light-primary-color: #b3e5fC;
|
||||
--accent-color: ${DEFAULT_ACCENT_COLOR};
|
||||
--divider-color: rgba(0, 0, 0, .12);
|
||||
--outline-color: rgba(0, 0, 0, .12);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
};
|
||||
|
||||
--scrollbar-thumb-color: rgb(194, 194, 194);
|
||||
--paper-font-caption: {
|
||||
@apply --paper-font-common-base;
|
||||
@apply --paper-font-common-nowrap;
|
||||
|
||||
--error-color: #db4437;
|
||||
--warning-color: #ffa600;
|
||||
--success-color: #43a047;
|
||||
--info-color: #039be5;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.011em;
|
||||
line-height: 20px;
|
||||
};
|
||||
|
||||
/* backgrounds */
|
||||
--card-background-color: #ffffff;
|
||||
--primary-background-color: #fafafa;
|
||||
--secondary-background-color: #e5e5e5; /* behind the cards on state */
|
||||
--clear-background-color: #ffffff;
|
||||
--paper-font-menu: {
|
||||
@apply --paper-font-common-base;
|
||||
@apply --paper-font-common-nowrap;
|
||||
|
||||
/* for header */
|
||||
--header-height: 56px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
};
|
||||
|
||||
/* for label-badge */
|
||||
--label-badge-red: var(--error-color);
|
||||
--label-badge-blue: var(--info-color);
|
||||
--label-badge-green: var(--success-color);
|
||||
--label-badge-yellow: var(--warning-color);
|
||||
--label-badge-grey: #9e9e9e;
|
||||
--paper-font-button: {
|
||||
@apply --paper-font-common-base;
|
||||
@apply --paper-font-common-nowrap;
|
||||
|
||||
/* states icon */
|
||||
--state-icon-color: #44739e;
|
||||
/* an error state is anything that would be considered an error */
|
||||
/* --state-icon-error-color: #db4437; derived from error-color */
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.018em;
|
||||
line-height: 24px;
|
||||
text-transform: uppercase;
|
||||
};
|
||||
|
||||
/* energy */
|
||||
--energy-grid-consumption-color: #488fc2;
|
||||
--energy-grid-return-color: #8353d1;
|
||||
--energy-solar-color: #ff9800;
|
||||
--energy-non-fossil-color: #0f9d58;
|
||||
--energy-battery-out-color: #4db6ac;
|
||||
--energy-battery-in-color: #f06292;
|
||||
--energy-gas-color: #8E021B;
|
||||
--energy-water-color: #00bcd4;
|
||||
--paper-font-code2: {
|
||||
@apply --paper-font-common-code;
|
||||
|
||||
/* opacity for dark text on a light background */
|
||||
--dark-divider-opacity: 0.12;
|
||||
--dark-disabled-opacity: 0.38; /* or hint text or icon */
|
||||
--dark-secondary-opacity: 0.54;
|
||||
--dark-primary-opacity: 0.87;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 20px;
|
||||
};
|
||||
|
||||
/* opacity for light text on a dark background */
|
||||
--light-divider-opacity: 0.12;
|
||||
--light-disabled-opacity: 0.3; /* or hint text or icon */
|
||||
--light-secondary-opacity: 0.7;
|
||||
--light-primary-opacity: 1.0;
|
||||
--paper-font-code1: {
|
||||
@apply --paper-font-common-code;
|
||||
|
||||
/* 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;
|
||||
--rgb-card-background-color: 255, 255, 255;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
};
|
||||
|
||||
/* color */
|
||||
--disabled-color: #bdbdbd;
|
||||
--red-color: #f44336;
|
||||
--pink-color: #e91e63;
|
||||
--purple-color: #926bc7;
|
||||
--deep-purple-color: #6e41ab;
|
||||
--indigo-color: #3f51b5;
|
||||
--blue-color: #2196f3;
|
||||
--light-blue-color: #03a9f4;
|
||||
--cyan-color: #00bcd4;
|
||||
--teal-color: #009688;
|
||||
--green-color: #4caf50;
|
||||
--light-green-color: #8bc34a;
|
||||
--lime-color: #cddc39;
|
||||
--yellow-color: #ffeb3b;
|
||||
--amber-color: #ffc107;
|
||||
--orange-color: #ff9800;
|
||||
--deep-orange-color: #ff6f22;
|
||||
--brown-color: #795548;
|
||||
--light-grey-color: #bdbdbd;
|
||||
--grey-color: #9e9e9e;
|
||||
--dark-grey-color: #606060;
|
||||
--blue-grey-color: #607d8b;
|
||||
--black-color: #000000;
|
||||
--white-color: #ffffff;
|
||||
direction: ltr;
|
||||
--direction: ltr;
|
||||
--float-start: left;
|
||||
--float-end: right;
|
||||
|
||||
/* state color */
|
||||
--state-active-color: var(--amber-color);
|
||||
--state-inactive-color: var(--grey-color);
|
||||
--state-unavailable-color: var(--disabled-color);
|
||||
|
||||
/* state domain colors */
|
||||
--state-alarm_control_panel-armed_away-color: var(--green-color);
|
||||
--state-alarm_control_panel-armed_custom_bypass-color: var(--green-color);
|
||||
--state-alarm_control_panel-armed_home-color: var(--green-color);
|
||||
--state-alarm_control_panel-armed_night-color: var(--green-color);
|
||||
--state-alarm_control_panel-armed_vacation-color: var(--green-color);
|
||||
--state-alarm_control_panel-arming-color: var(--orange-color);
|
||||
--state-alarm_control_panel-disarming-color: var(--orange-color);
|
||||
--state-alarm_control_panel-pending-color: var(--orange-color);
|
||||
--state-alarm_control_panel-triggered-color: var(--red-color);
|
||||
--state-alert-off-color: var(--orange-color);
|
||||
--state-alert-on-color: var(--red-color);
|
||||
--state-binary_sensor-active-color: var(--amber-color);
|
||||
--state-binary_sensor-battery-on-color: var(--red-color);
|
||||
--state-binary_sensor-carbon_monoxide-on-color: var(--red-color);
|
||||
--state-binary_sensor-gas-on-color: var(--red-color);
|
||||
--state-binary_sensor-heat-on-color: var(--red-color);
|
||||
--state-binary_sensor-lock-on-color: var(--red-color);
|
||||
--state-binary_sensor-moisture-on-color: var(--red-color);
|
||||
--state-binary_sensor-problem-on-color: var(--red-color);
|
||||
--state-binary_sensor-safety-on-color: var(--red-color);
|
||||
--state-binary_sensor-smoke-on-color: var(--red-color);
|
||||
--state-binary_sensor-sound-on-color: var(--red-color);
|
||||
--state-binary_sensor-tamper-on-color: var(--red-color);
|
||||
--state-climate-auto-color: var(--green-color);
|
||||
--state-climate-cool-color: var(--blue-color);
|
||||
--state-climate-dry-color: var(--orange-color);
|
||||
--state-climate-fan_only-color: var(--cyan-color);
|
||||
--state-climate-heat-color: var(--deep-orange-color);
|
||||
--state-climate-heat-cool-color: var(--amber-color);
|
||||
--state-cover-active-color: var(--purple-color);
|
||||
--state-device_tracker-active-color: var(--blue-color);
|
||||
--state-device_tracker-home-color: var(--green-color);
|
||||
--state-fan-active-color: var(--cyan-color);
|
||||
--state-humidifier-on-color: var(--blue-color);
|
||||
--state-lawn_mower-error-color: var(--red-color);
|
||||
--state-lawn_mower-mowing-color: var(--teal-color);
|
||||
--state-light-active-color: var(--amber-color);
|
||||
--state-lock-jammed-color: var(--red-color);
|
||||
--state-lock-locked-color: var(--green-color);
|
||||
--state-lock-pending-color: var(--orange-color);
|
||||
--state-lock-unlocked-color: var(--red-color);
|
||||
--state-media_player-active-color: var(--light-blue-color);
|
||||
--state-person-active-color: var(--blue-color);
|
||||
--state-person-home-color: var(--green-color);
|
||||
--state-plant-active-color: var(--red-color);
|
||||
--state-siren-active-color: var(--red-color);
|
||||
--state-sun-above_horizon-color: var(--amber-color);
|
||||
--state-sun-below_horizon-color: var(--indigo-color);
|
||||
--state-switch-active-color: var(--amber-color);
|
||||
--state-update-active-color: var(--orange-color);
|
||||
--state-vacuum-active-color: var(--teal-color);
|
||||
--state-sensor-battery-high-color: var(--green-color);
|
||||
--state-sensor-battery-low-color: var(--red-color);
|
||||
--state-sensor-battery-medium-color: var(--orange-color);
|
||||
--state-water_heater-eco-color: var(--green-color);
|
||||
--state-water_heater-electric-color: var(--orange-color);
|
||||
--state-water_heater-gas-color: var(--orange-color);
|
||||
--state-water_heater-heat_pump-color: var(--orange-color);
|
||||
--state-water_heater-high_demand-color: var(--deep-orange-color);
|
||||
--state-water_heater-performance-color: var(--deep-orange-color);
|
||||
|
||||
/* history colors */
|
||||
--history-unavailable-color: transparent;
|
||||
--history-unknown-color: var(--dark-grey-color);
|
||||
|
||||
/* input components */
|
||||
--input-idle-line-color: rgba(0, 0, 0, 0.42);
|
||||
--input-hover-line-color: rgba(0, 0, 0, 0.87);
|
||||
--input-disabled-line-color: rgba(0, 0, 0, 0.06);
|
||||
--input-outlined-idle-border-color: rgba(0, 0, 0, 0.38);
|
||||
--input-outlined-hover-border-color: rgba(0, 0, 0, 0.87);
|
||||
--input-outlined-disabled-border-color: rgba(0, 0, 0, 0.06);
|
||||
--input-fill-color: rgb(245, 245, 245);
|
||||
--input-disabled-fill-color: rgb(250, 250, 250);
|
||||
--input-ink-color: rgba(0, 0, 0, 0.87);
|
||||
--input-label-ink-color: rgba(0, 0, 0, 0.6);
|
||||
--input-disabled-ink-color: rgba(0, 0, 0, 0.37);
|
||||
--input-dropdown-icon-color: rgba(0, 0, 0, 0.54);
|
||||
|
||||
/* Vaadin typography */
|
||||
--material-h6-font-size: 1.25rem;
|
||||
--material-small-font-size: 0.875rem;
|
||||
--material-caption-font-size: 0.75rem;
|
||||
--material-button-font-size: 0.875rem;
|
||||
|
||||
/* Paper shadow */
|
||||
--shadow-transition: {
|
||||
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
};
|
||||
|
||||
--shadow-none: {
|
||||
box-shadow: none;
|
||||
};
|
||||
|
||||
/* from http://codepen.io/shyndman/pen/c5394ddf2e8b2a5c9185904b57421cdb */
|
||||
|
||||
--shadow-elevation-2dp: {
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
|
||||
0 1px 5px 0 rgba(0, 0, 0, 0.12),
|
||||
0 3px 1px -2px rgba(0, 0, 0, 0.2);
|
||||
};
|
||||
|
||||
--shadow-elevation-3dp: {
|
||||
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14),
|
||||
0 1px 8px 0 rgba(0, 0, 0, 0.12),
|
||||
0 3px 3px -2px rgba(0, 0, 0, 0.4);
|
||||
};
|
||||
|
||||
--shadow-elevation-4dp: {
|
||||
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
|
||||
0 1px 10px 0 rgba(0, 0, 0, 0.12),
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.4);
|
||||
};
|
||||
|
||||
--shadow-elevation-6dp: {
|
||||
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14),
|
||||
0 1px 18px 0 rgba(0, 0, 0, 0.12),
|
||||
0 3px 5px -1px rgba(0, 0, 0, 0.4);
|
||||
};
|
||||
|
||||
--shadow-elevation-8dp: {
|
||||
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14),
|
||||
0 3px 14px 2px rgba(0, 0, 0, 0.12),
|
||||
0 5px 5px -3px rgba(0, 0, 0, 0.4);
|
||||
};
|
||||
|
||||
--shadow-elevation-12dp: {
|
||||
box-shadow: 0 12px 16px 1px rgba(0, 0, 0, 0.14),
|
||||
0 4px 22px 3px rgba(0, 0, 0, 0.12),
|
||||
0 6px 7px -4px rgba(0, 0, 0, 0.4);
|
||||
};
|
||||
|
||||
--shadow-elevation-16dp: {
|
||||
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14),
|
||||
0 6px 30px 5px rgba(0, 0, 0, 0.12),
|
||||
0 8px 10px -5px rgba(0, 0, 0, 0.4);
|
||||
};
|
||||
|
||||
--shadow-elevation-24dp: {
|
||||
box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14),
|
||||
0 9px 46px 8px rgba(0, 0, 0, 0.12),
|
||||
0 11px 15px -7px rgba(0, 0, 0, 0.4);
|
||||
};
|
||||
|
||||
/* Paper typography Styles */
|
||||
--paper-font-common-base: {
|
||||
font-family: 'Roboto', 'Noto', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
};
|
||||
|
||||
--paper-font-common-code: {
|
||||
font-family: 'Roboto Mono', 'Consolas', 'Menlo', monospace;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
};
|
||||
|
||||
--paper-font-common-expensive-kerning: {
|
||||
text-rendering: optimizeLegibility;
|
||||
};
|
||||
|
||||
--paper-font-common-nowrap: {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
};
|
||||
|
||||
/* Material Font Styles */
|
||||
|
||||
--paper-font-display4: {
|
||||
@apply --paper-font-common-base;
|
||||
@apply --paper-font-common-nowrap;
|
||||
|
||||
font-size: 112px;
|
||||
font-weight: 300;
|
||||
letter-spacing: -.044em;
|
||||
line-height: 120px;
|
||||
};
|
||||
|
||||
--paper-font-display3: {
|
||||
@apply --paper-font-common-base;
|
||||
@apply --paper-font-common-nowrap;
|
||||
|
||||
font-size: 56px;
|
||||
font-weight: 400;
|
||||
letter-spacing: -.026em;
|
||||
line-height: 60px;
|
||||
};
|
||||
|
||||
--paper-font-display2: {
|
||||
@apply --paper-font-common-base;
|
||||
|
||||
font-size: 45px;
|
||||
font-weight: 400;
|
||||
letter-spacing: -.018em;
|
||||
line-height: 48px;
|
||||
};
|
||||
|
||||
--paper-font-display1: {
|
||||
@apply --paper-font-common-base;
|
||||
|
||||
font-size: 34px;
|
||||
font-weight: 400;
|
||||
letter-spacing: -.01em;
|
||||
line-height: 40px;
|
||||
};
|
||||
|
||||
--paper-font-headline: {
|
||||
@apply --paper-font-common-base;
|
||||
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
letter-spacing: -.012em;
|
||||
line-height: 32px;
|
||||
};
|
||||
|
||||
--paper-font-title: {
|
||||
@apply --paper-font-common-base;
|
||||
@apply --paper-font-common-nowrap;
|
||||
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
line-height: 28px;
|
||||
};
|
||||
|
||||
--paper-font-subhead: {
|
||||
@apply --paper-font-common-base;
|
||||
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
};
|
||||
|
||||
--paper-font-body2: {
|
||||
@apply --paper-font-common-base;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
};
|
||||
|
||||
--paper-font-body1: {
|
||||
@apply --paper-font-common-base;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
};
|
||||
|
||||
--paper-font-caption: {
|
||||
@apply --paper-font-common-base;
|
||||
@apply --paper-font-common-nowrap;
|
||||
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.011em;
|
||||
line-height: 20px;
|
||||
};
|
||||
|
||||
--paper-font-menu: {
|
||||
@apply --paper-font-common-base;
|
||||
@apply --paper-font-common-nowrap;
|
||||
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
};
|
||||
|
||||
--paper-font-button: {
|
||||
@apply --paper-font-common-base;
|
||||
@apply --paper-font-common-nowrap;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.018em;
|
||||
line-height: 24px;
|
||||
text-transform: uppercase;
|
||||
};
|
||||
|
||||
--paper-font-code2: {
|
||||
@apply --paper-font-common-code;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 20px;
|
||||
};
|
||||
|
||||
--paper-font-code1: {
|
||||
@apply --paper-font-common-code;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
};
|
||||
|
||||
direction: ltr;
|
||||
--direction: ltr;
|
||||
--float-start: left;
|
||||
--float-end: right;
|
||||
|
||||
${Object.entries(derivedStyles)
|
||||
${unsafeCSS(
|
||||
Object.entries(derivedStyles)
|
||||
.map(([key, value]) => `--${key}: ${value};`)
|
||||
.join("")}
|
||||
}
|
||||
</style>
|
||||
</custom-style>`;
|
||||
.join("")
|
||||
)}
|
||||
}
|
||||
`.toString();
|
||||
|
||||
document.head.appendChild(documentContainer.content);
|
||||
const styleElement = document.createElement("style");
|
||||
styleElement.textContent = [mainStyles, fontStyles].join("");
|
||||
document.head.append(styleElement);
|
||||
|
|
|
|||
|
|
@ -1,132 +0,0 @@
|
|||
export {}; // for Babel to treat as a module
|
||||
|
||||
const documentContainer = document.createElement("template");
|
||||
documentContainer.setAttribute("style", "display: none;");
|
||||
|
||||
documentContainer.innerHTML = `<style>
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src:
|
||||
local("Roboto Thin"),
|
||||
local("Roboto-Thin"),
|
||||
url(${__STATIC_PATH__}fonts/roboto/Roboto-Thin.woff2) format("woff2");
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src:
|
||||
local("Roboto Thin Italic"),
|
||||
local("Roboto-ThinItalic"),
|
||||
url(${__STATIC_PATH__}fonts/roboto/Roboto-ThinItalic.woff2) format("woff2");
|
||||
font-weight: 100;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src:
|
||||
local("Roboto Light"),
|
||||
local("Roboto-Light"),
|
||||
url(${__STATIC_PATH__}fonts/roboto/Roboto-Light.woff2) format("woff2");
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src:
|
||||
local("Roboto Light Italic"),
|
||||
local("Roboto-LightItalic"),
|
||||
url(${__STATIC_PATH__}fonts/roboto/Roboto-LightItalic.woff2) format("woff2");
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src:
|
||||
local("Roboto Regular"),
|
||||
local("Roboto-Regular"),
|
||||
url(${__STATIC_PATH__}fonts/roboto/Roboto-Regular.woff2) format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src:
|
||||
local("Roboto Italic"),
|
||||
local("Roboto-Italic"),
|
||||
url(${__STATIC_PATH__}fonts/roboto/Roboto-RegularItalic.woff2) format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src:
|
||||
local("Roboto Medium"),
|
||||
local("Roboto-Medium"),
|
||||
url(${__STATIC_PATH__}fonts/roboto/Roboto-Medium.woff2) format("woff2");
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src:
|
||||
local("Roboto Medium Italic"),
|
||||
local("Roboto-MediumItalic"),
|
||||
url(${__STATIC_PATH__}fonts/roboto/Roboto-MediumItalic.woff2) format("woff2");
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src:
|
||||
local("Roboto Bold"),
|
||||
local("Roboto-Bold"),
|
||||
url(${__STATIC_PATH__}fonts/roboto/Roboto-Bold.woff2) format("woff2");
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src:
|
||||
local("Roboto Bold Italic"),
|
||||
local("Roboto-BoldItalic"),
|
||||
url(${__STATIC_PATH__}fonts/roboto/Roboto-BoldItalic.woff2) format("woff2");
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src:
|
||||
local("Roboto Black"),
|
||||
local("Roboto-Black"),
|
||||
url(${__STATIC_PATH__}fonts/roboto/Roboto-Black.woff2) format("woff2");
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src:
|
||||
local("Roboto Black Italic"),
|
||||
local("Roboto-BlackItalic"),
|
||||
url(${__STATIC_PATH__}fonts/roboto/Roboto-BlackItalic.woff2) format("woff2");
|
||||
font-weight: 900;
|
||||
font-style: italic;
|
||||
}
|
||||
</style>`;
|
||||
|
||||
document.head.appendChild(documentContainer.content);
|
||||
|
||||
/**
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
*/
|
||||
/*
|
||||
FIXME(polymer-modulizer): the above comments were extracted
|
||||
from HTML and may be out of place here. Review them and
|
||||
then delete this comment!
|
||||
*/
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
import { css, unsafeCSS } from "lit";
|
||||
|
||||
export const fontStyles = css`
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src:
|
||||
local("Roboto Thin"),
|
||||
local("Roboto-Thin"),
|
||||
url(${unsafeCSS(__STATIC_PATH__)}fonts/roboto/Roboto-Thin.woff2)
|
||||
format("woff2");
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src:
|
||||
local("Roboto Thin Italic"),
|
||||
local("Roboto-ThinItalic"),
|
||||
url(${unsafeCSS(__STATIC_PATH__)}fonts/roboto/Roboto-ThinItalic.woff2)
|
||||
format("woff2");
|
||||
font-weight: 100;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src:
|
||||
local("Roboto Light"),
|
||||
local("Roboto-Light"),
|
||||
url(${unsafeCSS(__STATIC_PATH__)}fonts/roboto/Roboto-Light.woff2)
|
||||
format("woff2");
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src:
|
||||
local("Roboto Light Italic"),
|
||||
local("Roboto-LightItalic"),
|
||||
url(${unsafeCSS(__STATIC_PATH__)}fonts/roboto/Roboto-LightItalic.woff2)
|
||||
format("woff2");
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src:
|
||||
local("Roboto Regular"),
|
||||
local("Roboto-Regular"),
|
||||
url(${unsafeCSS(__STATIC_PATH__)}fonts/roboto/Roboto-Regular.woff2)
|
||||
format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src:
|
||||
local("Roboto Italic"),
|
||||
local("Roboto-Italic"),
|
||||
url(${unsafeCSS(__STATIC_PATH__)}fonts/roboto/Roboto-RegularItalic.woff2)
|
||||
format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src:
|
||||
local("Roboto Medium"),
|
||||
local("Roboto-Medium"),
|
||||
url(${unsafeCSS(__STATIC_PATH__)}fonts/roboto/Roboto-Medium.woff2)
|
||||
format("woff2");
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src:
|
||||
local("Roboto Medium Italic"),
|
||||
local("Roboto-MediumItalic"),
|
||||
url(${unsafeCSS(__STATIC_PATH__)}fonts/roboto/Roboto-MediumItalic.woff2)
|
||||
format("woff2");
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src:
|
||||
local("Roboto Bold"),
|
||||
local("Roboto-Bold"),
|
||||
url(${unsafeCSS(__STATIC_PATH__)}fonts/roboto/Roboto-Bold.woff2)
|
||||
format("woff2");
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src:
|
||||
local("Roboto Bold Italic"),
|
||||
local("Roboto-BoldItalic"),
|
||||
url(${unsafeCSS(__STATIC_PATH__)}fonts/roboto/Roboto-BoldItalic.woff2)
|
||||
format("woff2");
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src:
|
||||
local("Roboto Black"),
|
||||
local("Roboto-Black"),
|
||||
url(${unsafeCSS(__STATIC_PATH__)}fonts/roboto/Roboto-Black.woff2)
|
||||
format("woff2");
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src:
|
||||
local("Roboto Black Italic"),
|
||||
local("Roboto-BlackItalic"),
|
||||
url(${unsafeCSS(__STATIC_PATH__)}fonts/roboto/Roboto-BlackItalic.woff2)
|
||||
format("woff2");
|
||||
font-weight: 900;
|
||||
font-style: italic;
|
||||
}
|
||||
`.toString();
|
||||
|
|
@ -1,3 +1,6 @@
|
|||
export const DEFAULT_PRIMARY_COLOR = "#03a9f4" as const;
|
||||
export const DEFAULT_ACCENT_COLOR = "#ff9800" as const;
|
||||
|
||||
export const darkStyles = {
|
||||
"primary-background-color": "#111111",
|
||||
"card-background-color": "#1c1c1c",
|
||||
|
|
@ -50,7 +53,7 @@ export const darkStyles = {
|
|||
"map-filter":
|
||||
"invert(.9) hue-rotate(170deg) brightness(1.5) contrast(1.2) saturate(.3)",
|
||||
"disabled-color": "#464646",
|
||||
};
|
||||
} as const;
|
||||
|
||||
export const derivedStyles = {
|
||||
"state-icon-error-color": "var(--error-state-color, var(--error-color))",
|
||||
|
|
@ -146,4 +149,4 @@ export const derivedStyles = {
|
|||
"material-background-color": "var(--card-background-color)",
|
||||
"material-secondary-background-color": "var(--secondary-background-color)",
|
||||
"material-secondary-text-color": "var(--secondary-text-color)",
|
||||
};
|
||||
} as const;
|
||||
|
|
|
|||
Loading…
Reference in New Issue