mirror of
https://github.com/home-assistant/frontend.git
synced 2025-08-02 05:57:54 +00:00
Merge branch 'dev' of github.com:home-assistant/frontend into update-typography
This commit is contained in:
Wendelin
commit
4750a59719
@ -21,7 +21,8 @@
|
||||
"esbenp.prettier-vscode",
|
||||
"runem.lit-plugin",
|
||||
"github.vscode-pull-request-github",
|
||||
"eamodio.gitlens"
|
||||
"eamodio.gitlens",
|
||||
"yeion7.styled-global-variables-autocomplete"
|
||||
],
|
||||
"settings": {
|
||||
"files.eol": "\n",
|
||||
|
||||
3
.vscode/extensions.json
vendored
3
.vscode/extensions.json
vendored
@ -5,6 +5,7 @@
|
||||
"runem.lit-plugin",
|
||||
"github.vscode-pull-request-github",
|
||||
"eamodio.gitlens",
|
||||
"vitest.explorer"
|
||||
"vitest.explorer",
|
||||
"yeion7.styled-global-variables-autocomplete"
|
||||
]
|
||||
}
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
import "./layout/hc-connect";
|
||||
|
||||
import("../../../src/resources/ha-style");
|
||||
import("../../../src/resources/append-ha-style");
|
||||
|
||||
@ -109,7 +109,7 @@ export class HcMain extends HassElement {
|
||||
protected firstUpdated(changedProps) {
|
||||
super.firstUpdated(changedProps);
|
||||
import("./hc-lovelace");
|
||||
import("../../../../src/resources/ha-style");
|
||||
import("../../../../src/resources/append-ha-style");
|
||||
|
||||
window.addEventListener("location-changed", () => {
|
||||
const panelPath = `/${this._urlPath || "lovelace"}/`;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import "./util/is_frontpage";
|
||||
import "./ha-demo";
|
||||
|
||||
import("../../src/resources/ha-style");
|
||||
import("../../src/resources/append-ha-style");
|
||||
|
||||
@ -2,8 +2,7 @@ import type { TodoItem } from "../../../src/data/todo";
|
||||
import { TodoItemStatus } from "../../../src/data/todo";
|
||||
import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
|
||||
|
||||
export const mockTodo = (hass: MockHomeAssistant) => {
|
||||
hass.mockWS("todo/item/list", () => ({
|
||||
const items = {
|
||||
items: [
|
||||
{
|
||||
uid: "12",
|
||||
@ -20,8 +19,19 @@ export const mockTodo = (hass: MockHomeAssistant) => {
|
||||
summary: "Oranges",
|
||||
status: TodoItemStatus.Completed,
|
||||
},
|
||||
{
|
||||
uid: "15",
|
||||
summary: "Beer",
|
||||
},
|
||||
] as TodoItem[],
|
||||
}));
|
||||
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
||||
hass.mockWS("todo/item/subscribe", (_msg, _hass) => () => {});
|
||||
};
|
||||
|
||||
export const mockTodo = (hass: MockHomeAssistant) => {
|
||||
hass.mockWS("todo/item/list", () => items);
|
||||
hass.mockWS("todo/item/move", () => undefined);
|
||||
hass.mockWS("todo/item/subscribe", (_msg, _hass, onChange) => {
|
||||
onChange!(items);
|
||||
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
||||
return () => {};
|
||||
});
|
||||
};
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import type { PropertyValues, TemplateResult } from "lit";
|
||||
import { html, LitElement } from "lit";
|
||||
import { customElement, query } from "lit/decorators";
|
||||
import { mockIcons } from "../../../../demo/src/stubs/icons";
|
||||
import { mockTodo } from "../../../../demo/src/stubs/todo";
|
||||
import { getEntity } from "../../../../src/fake_data/entity";
|
||||
import { provideHass } from "../../../../src/fake_data/provide_hass";
|
||||
import "../../components/demo-cards";
|
||||
import { getEntity } from "../../../../src/fake_data/entity";
|
||||
import { mockTodo } from "../../../../demo/src/stubs/todo";
|
||||
import { mockIcons } from "../../../../demo/src/stubs/icons";
|
||||
|
||||
const ENTITIES = [
|
||||
getEntity("todo", "shopping_list", "2", {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import "./hassio-main";
|
||||
|
||||
import("../../src/resources/ha-style");
|
||||
import("../../src/resources/append-ha-style");
|
||||
|
||||
const styleEl = document.createElement("style");
|
||||
styleEl.textContent = `
|
||||
|
||||
@ -89,8 +89,8 @@
|
||||
"@thomasloven/round-slider": "0.6.0",
|
||||
"@tsparticles/engine": "3.8.1",
|
||||
"@tsparticles/preset-links": "3.2.0",
|
||||
"@vaadin/combo-box": "24.7.3",
|
||||
"@vaadin/vaadin-themable-mixin": "24.7.3",
|
||||
"@vaadin/combo-box": "24.7.4",
|
||||
"@vaadin/vaadin-themable-mixin": "24.7.4",
|
||||
"@vibrant/color": "4.0.0",
|
||||
"@vue/web-component-wrapper": "1.3.0",
|
||||
"@webcomponents/scoped-custom-element-registry": "0.0.10",
|
||||
@ -160,8 +160,8 @@
|
||||
"@octokit/plugin-retry": "7.2.1",
|
||||
"@octokit/rest": "21.1.1",
|
||||
"@rsdoctor/rspack-plugin": "1.0.2",
|
||||
"@rspack/cli": "1.3.6",
|
||||
"@rspack/core": "1.3.6",
|
||||
"@rspack/cli": "1.3.7",
|
||||
"@rspack/core": "1.3.7",
|
||||
"@types/babel__plugin-transform-runtime": "7.9.5",
|
||||
"@types/chromecast-caf-receiver": "6.0.21",
|
||||
"@types/chromecast-caf-sender": "1.0.11",
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import type { ThemeVars } from "../../data/ws-themes";
|
||||
import { darkStyles, derivedStyles } from "../../resources/styles-data";
|
||||
import { darkColorVariables } from "../../resources/theme/color.globals";
|
||||
import { derivedStyles } from "../../resources/theme/theme";
|
||||
import type { HomeAssistant } from "../../types";
|
||||
import {
|
||||
hex2rgb,
|
||||
@ -50,7 +51,7 @@ export const applyThemesOnElement = (
|
||||
|
||||
if (themeToApply && darkMode) {
|
||||
cacheKey = `${cacheKey}__dark`;
|
||||
themeRules = { ...darkStyles };
|
||||
themeRules = { ...darkColorVariables };
|
||||
}
|
||||
|
||||
if (themeToApply === "default") {
|
||||
|
||||
45
src/common/style/derived-css-vars.ts
Normal file
45
src/common/style/derived-css-vars.ts
Normal file
@ -0,0 +1,45 @@
|
||||
import type { CSSResult } from "lit";
|
||||
|
||||
const _extractCssVars = (
|
||||
cssString: string,
|
||||
condition: (string) => boolean = () => true
|
||||
) => {
|
||||
const variables: Record<string, string> = {};
|
||||
|
||||
cssString.split(";").forEach((rawLine) => {
|
||||
const line = rawLine.substring(rawLine.indexOf("--")).trim();
|
||||
if (line.startsWith("--") && condition(line)) {
|
||||
const [name, value] = line.split(":").map((part) => part.trim());
|
||||
variables[name.substring(2, name.length)] = value;
|
||||
}
|
||||
});
|
||||
return variables;
|
||||
};
|
||||
|
||||
export const extractVar = (css: CSSResult, varName: string) => {
|
||||
const cssString = css.toString();
|
||||
const search = `--${varName}:`;
|
||||
const startIndex = cssString.indexOf(search);
|
||||
if (startIndex === -1) {
|
||||
return "";
|
||||
}
|
||||
|
||||
const endIndex = cssString.indexOf(";", startIndex + search.length);
|
||||
return cssString.substring(startIndex + search.length, endIndex).trim();
|
||||
};
|
||||
|
||||
export const extractVars = (css: CSSResult) => {
|
||||
const cssString = css.toString();
|
||||
|
||||
return _extractCssVars(cssString);
|
||||
};
|
||||
|
||||
export const extractDerivedVars = (css: CSSResult) => {
|
||||
const cssString = css.toString();
|
||||
|
||||
if (!cssString.includes("var(")) {
|
||||
return {};
|
||||
}
|
||||
|
||||
return _extractCssVars(cssString, (line) => line.includes("var("));
|
||||
};
|
||||
@ -590,6 +590,10 @@ export class HaChartBase extends LitElement {
|
||||
lineStyle: { color: style.getPropertyValue("--info-color") },
|
||||
crossStyle: { color: style.getPropertyValue("--info-color") },
|
||||
},
|
||||
extraCssText:
|
||||
"direction:" +
|
||||
style.getPropertyValue("--direction") +
|
||||
";margin-inline-start:3px;margin-inline-end:8px;",
|
||||
},
|
||||
timeline: {},
|
||||
};
|
||||
|
||||
@ -135,7 +135,7 @@ export class StateHistoryChartLine extends LitElement {
|
||||
seriesIndex: index,
|
||||
value: lastData,
|
||||
// HTML copied from echarts. May change based on options
|
||||
marker: `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${dataset.color};"></span>`,
|
||||
marker: `<span style="display:inline-block;margin-right:4px;margin-inline-end:4px;margin-inline-start:initial;border-radius:10px;width:10px;height:10px;background-color:${dataset.color};"></span>`,
|
||||
});
|
||||
});
|
||||
const unit = this.unit
|
||||
|
||||
@ -127,7 +127,7 @@ export class StateHistoryChartTimeline extends LitElement {
|
||||
|
||||
private _renderTooltip: TooltipFormatterCallback<TooltipPositionCallbackParams> =
|
||||
(params: TooltipPositionCallbackParams) => {
|
||||
const { value, name, marker, seriesName } = Array.isArray(params)
|
||||
const { value, name, marker, seriesName, color } = Array.isArray(params)
|
||||
? params[0]
|
||||
: params;
|
||||
const title = seriesName
|
||||
@ -138,8 +138,12 @@ export class StateHistoryChartTimeline extends LitElement {
|
||||
"ui.components.history_charts.duration"
|
||||
)}: ${millisecondsToDuration(durationInMs)}`;
|
||||
|
||||
const markerLocalized = !computeRTL(this.hass)
|
||||
? marker
|
||||
: `<span style="direction: rtl;display:inline-block;margin-right:4px;margin-inline-end:4px;border-radius:10px;width:10px;height:10px;background-color:${color};"></span>`;
|
||||
|
||||
const lines = [
|
||||
marker + name,
|
||||
markerLocalized + name,
|
||||
formatDateTimeWithSeconds(
|
||||
new Date(value![1]),
|
||||
this.hass.locale,
|
||||
|
||||
@ -103,7 +103,7 @@ export class HaBadge extends LitElement {
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
.content {
|
||||
font-size: var(--ha-font-size-s);
|
||||
font-size: var(--ha-font-size-badge, var(--ha-font-size-s));
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 16px;
|
||||
@ -111,7 +111,7 @@ export class HaBadge extends LitElement {
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
::slotted([slot="icon"]) {
|
||||
--mdc-icon-size: 18px;
|
||||
--mdc-icon-size: var(--ha-icon-size-badge, 18px);
|
||||
color: var(--badge-color);
|
||||
line-height: 0;
|
||||
margin-left: -4px;
|
||||
|
||||
@ -1,17 +1,54 @@
|
||||
import { css } from "lit";
|
||||
import { CheckListItemBase } from "@material/mwc-list/mwc-check-list-item-base";
|
||||
import { styles as controlStyles } from "@material/mwc-list/mwc-control-list-item.css";
|
||||
import { styles } from "@material/mwc-list/mwc-list-item.css";
|
||||
import { customElement } from "lit/decorators";
|
||||
import { css, html, nothing } from "lit";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
import { classMap } from "lit/directives/class-map";
|
||||
import { fireEvent } from "../common/dom/fire_event";
|
||||
import "./ha-checkbox";
|
||||
|
||||
@customElement("ha-check-list-item")
|
||||
export class HaCheckListItem extends CheckListItemBase {
|
||||
@property({ type: Boolean, attribute: "checkbox-disabled" })
|
||||
checkboxDisabled = false;
|
||||
|
||||
@property({ type: Boolean })
|
||||
indeterminate = false;
|
||||
|
||||
async onChange(event) {
|
||||
super.onChange(event);
|
||||
fireEvent(this, event.type);
|
||||
}
|
||||
|
||||
override render() {
|
||||
const checkboxClasses = {
|
||||
"mdc-deprecated-list-item__graphic": this.left,
|
||||
"mdc-deprecated-list-item__meta": !this.left,
|
||||
};
|
||||
|
||||
const text = this.renderText();
|
||||
const graphic =
|
||||
this.graphic && this.graphic !== "control" && !this.left
|
||||
? this.renderGraphic()
|
||||
: nothing;
|
||||
const meta = this.hasMeta && this.left ? this.renderMeta() : nothing;
|
||||
const ripple = this.renderRipple();
|
||||
|
||||
return html` ${ripple} ${graphic} ${this.left ? "" : text}
|
||||
<span class=${classMap(checkboxClasses)}>
|
||||
<ha-checkbox
|
||||
reducedTouchTarget
|
||||
tabindex=${this.tabindex}
|
||||
.checked=${this.selected}
|
||||
.indeterminate=${this.indeterminate}
|
||||
?disabled=${this.disabled || this.checkboxDisabled}
|
||||
@change=${this.onChange}
|
||||
>
|
||||
</ha-checkbox>
|
||||
</span>
|
||||
${this.left ? text : ""} ${meta}`;
|
||||
}
|
||||
|
||||
static override styles = [
|
||||
styles,
|
||||
controlStyles,
|
||||
|
||||
@ -25,7 +25,7 @@ export enum TodoSortMode {
|
||||
export interface TodoItem {
|
||||
uid: string;
|
||||
summary: string;
|
||||
status: TodoItemStatus;
|
||||
status: TodoItemStatus | null;
|
||||
description?: string | null;
|
||||
due?: string | null;
|
||||
}
|
||||
@ -72,7 +72,7 @@ export const fetchItems = async (
|
||||
export const subscribeItems = (
|
||||
hass: HomeAssistant,
|
||||
entity_id: string,
|
||||
callback: (item) => void
|
||||
callback: (update: TodoItems) => void
|
||||
) =>
|
||||
hass.connection.subscribeMessage<any>(callback, {
|
||||
type: "todo/item/subscribe",
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import "@webcomponents/scoped-custom-element-registry/scoped-custom-element-registry.min";
|
||||
import "../layouts/home-assistant";
|
||||
|
||||
import("../resources/ha-style");
|
||||
import("../resources/append-ha-style");
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
import "../auth/ha-authorize";
|
||||
|
||||
import("../resources/ha-style");
|
||||
import("../resources/append-ha-style");
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import "../onboarding/ha-onboarding";
|
||||
|
||||
import("../resources/ha-style");
|
||||
import("../resources/append-ha-style");
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
|
||||
@ -30,7 +30,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/styles-data";
|
||||
import { DefaultPrimaryColor } from "../../../resources/theme/color.globals";
|
||||
import { haStyle } from "../../../resources/styles";
|
||||
import type { HomeAssistant } from "../../../types";
|
||||
import { hardwareBrandsUrl } from "../../../util/brands-url";
|
||||
@ -42,9 +42,9 @@ const DATASAMPLES = 60;
|
||||
|
||||
const DATA_SET_CONFIG: SeriesOption = {
|
||||
type: "line",
|
||||
color: DEFAULT_PRIMARY_COLOR,
|
||||
color: DefaultPrimaryColor,
|
||||
areaStyle: {
|
||||
color: DEFAULT_PRIMARY_COLOR + "2B",
|
||||
color: DefaultPrimaryColor + "2B",
|
||||
},
|
||||
symbolSize: 0,
|
||||
lineStyle: {
|
||||
|
||||
@ -156,6 +156,19 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
|
||||
return items;
|
||||
}
|
||||
|
||||
private _getUncheckedAndItemsWithoutStatus = memoizeOne(
|
||||
(items?: TodoItem[], sort?: string | undefined): TodoItem[] =>
|
||||
items
|
||||
? this._sortItems(
|
||||
items.filter(
|
||||
(item) =>
|
||||
item.status === TodoItemStatus.NeedsAction || !item.status
|
||||
),
|
||||
sort
|
||||
)
|
||||
: []
|
||||
);
|
||||
|
||||
private _getCheckedItems = memoizeOne(
|
||||
(items?: TodoItem[], sort?: string | undefined): TodoItem[] =>
|
||||
items
|
||||
@ -176,6 +189,16 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
|
||||
: []
|
||||
);
|
||||
|
||||
private _getItemsWithoutStatus = memoizeOne(
|
||||
(items?: TodoItem[], sort?: string | undefined): TodoItem[] =>
|
||||
items
|
||||
? this._sortItems(
|
||||
items.filter((item) => !item.status),
|
||||
sort
|
||||
)
|
||||
: []
|
||||
);
|
||||
|
||||
public willUpdate(
|
||||
changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
|
||||
): void {
|
||||
@ -235,6 +258,18 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
|
||||
this._config.display_order
|
||||
);
|
||||
|
||||
const itemsWithoutStatus = this._getItemsWithoutStatus(
|
||||
this._items,
|
||||
this._config.display_order
|
||||
);
|
||||
|
||||
const reorderableItems = this._reordering
|
||||
? this._getUncheckedAndItemsWithoutStatus(
|
||||
this._items,
|
||||
this._config.display_order
|
||||
)
|
||||
: undefined;
|
||||
|
||||
return html`
|
||||
<ha-card
|
||||
.header=${this._config.title}
|
||||
@ -274,7 +309,24 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
|
||||
@item-moved=${this._itemMoved}
|
||||
>
|
||||
<ha-list wrapFocus multi>
|
||||
${uncheckedItems.length
|
||||
${!uncheckedItems.length && !itemsWithoutStatus.length
|
||||
? html`<p class="empty">
|
||||
${this.hass.localize(
|
||||
"ui.panel.lovelace.cards.todo-list.no_unchecked_items"
|
||||
)}
|
||||
</p>`
|
||||
: this._reordering
|
||||
? html`<div class="header" role="seperator">
|
||||
<h2>
|
||||
${this.hass!.localize(
|
||||
"ui.panel.lovelace.cards.todo-list.reorder_items"
|
||||
)}
|
||||
</h2>
|
||||
${this._renderMenu(this._config, unavailable)}
|
||||
</div>
|
||||
${this._renderItems(reorderableItems ?? [], unavailable)}`
|
||||
: nothing}
|
||||
${!this._reordering && uncheckedItems.length
|
||||
? html`
|
||||
<div class="header" role="seperator">
|
||||
<h2>
|
||||
@ -282,47 +334,35 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
|
||||
"ui.panel.lovelace.cards.todo-list.unchecked_items"
|
||||
)}
|
||||
</h2>
|
||||
${(!this._config.display_order ||
|
||||
this._config.display_order === TodoSortMode.NONE) &&
|
||||
this._todoListSupportsFeature(
|
||||
TodoListEntityFeature.MOVE_TODO_ITEM
|
||||
)
|
||||
? html`<ha-button-menu
|
||||
@closed=${stopPropagation}
|
||||
fixed
|
||||
@action=${this._handlePrimaryMenuAction}
|
||||
>
|
||||
<ha-icon-button
|
||||
slot="trigger"
|
||||
.path=${mdiDotsVertical}
|
||||
></ha-icon-button>
|
||||
<ha-list-item graphic="icon">
|
||||
${this.hass!.localize(
|
||||
this._reordering
|
||||
? "ui.panel.lovelace.cards.todo-list.exit_reorder_items"
|
||||
: "ui.panel.lovelace.cards.todo-list.reorder_items"
|
||||
)}
|
||||
<ha-svg-icon
|
||||
slot="graphic"
|
||||
.path=${mdiSort}
|
||||
.disabled=${unavailable}
|
||||
>
|
||||
</ha-svg-icon>
|
||||
</ha-list-item>
|
||||
</ha-button-menu>`
|
||||
: nothing}
|
||||
${this._renderMenu(this._config, unavailable)}
|
||||
</div>
|
||||
${this._renderItems(uncheckedItems, unavailable)}
|
||||
`
|
||||
: html`<p class="empty">
|
||||
${this.hass.localize(
|
||||
"ui.panel.lovelace.cards.todo-list.no_unchecked_items"
|
||||
: nothing}
|
||||
${!this._reordering && itemsWithoutStatus.length
|
||||
? html`
|
||||
<div>
|
||||
${uncheckedItems.length
|
||||
? html`<div class="divider" role="seperator"></div>`
|
||||
: nothing}
|
||||
<div class="header" role="seperator">
|
||||
<h2>
|
||||
${this.hass!.localize(
|
||||
"ui.panel.lovelace.cards.todo-list.no_status_items"
|
||||
)}
|
||||
</p>`}
|
||||
</h2>
|
||||
${!uncheckedItems.length
|
||||
? this._renderMenu(this._config, unavailable)
|
||||
: nothing}
|
||||
</div>
|
||||
</div>
|
||||
${this._renderItems(itemsWithoutStatus, unavailable)}
|
||||
`
|
||||
: nothing}
|
||||
${!this._config.hide_completed && checkedItems.length
|
||||
? html`
|
||||
<div role="separator">
|
||||
<div class="divider"></div>
|
||||
<div>
|
||||
<div class="divider" role="separator"></div>
|
||||
<div class="header">
|
||||
<h2>
|
||||
${this.hass!.localize(
|
||||
@ -359,13 +399,43 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
|
||||
</div>
|
||||
${this._renderItems(checkedItems, unavailable)}
|
||||
`
|
||||
: ""}
|
||||
: nothing}
|
||||
</ha-list>
|
||||
</ha-sortable>
|
||||
</ha-card>
|
||||
`;
|
||||
}
|
||||
|
||||
private _renderMenu(config: TodoListCardConfig, unavailable: boolean) {
|
||||
return (!config.display_order ||
|
||||
config.display_order === TodoSortMode.NONE) &&
|
||||
this._todoListSupportsFeature(TodoListEntityFeature.MOVE_TODO_ITEM)
|
||||
? html`<ha-button-menu
|
||||
@closed=${stopPropagation}
|
||||
fixed
|
||||
@action=${this._handlePrimaryMenuAction}
|
||||
>
|
||||
<ha-icon-button
|
||||
slot="trigger"
|
||||
.path=${mdiDotsVertical}
|
||||
></ha-icon-button>
|
||||
<ha-list-item graphic="icon">
|
||||
${this.hass!.localize(
|
||||
this._reordering
|
||||
? "ui.panel.lovelace.cards.todo-list.exit_reorder_items"
|
||||
: "ui.panel.lovelace.cards.todo-list.reorder_items"
|
||||
)}
|
||||
<ha-svg-icon
|
||||
slot="graphic"
|
||||
.path=${mdiSort}
|
||||
.disabled=${unavailable}
|
||||
>
|
||||
</ha-svg-icon>
|
||||
</ha-list-item>
|
||||
</ha-button-menu>`
|
||||
: nothing;
|
||||
}
|
||||
|
||||
private _getDueDate(item: TodoItem): Date | undefined {
|
||||
return item.due
|
||||
? item.due.includes("T")
|
||||
@ -397,16 +467,19 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
|
||||
left
|
||||
.hasMeta=${showReorder || showDelete}
|
||||
class="editRow ${classMap({
|
||||
draggable: item.status === TodoItemStatus.NeedsAction,
|
||||
draggable: item.status !== TodoItemStatus.Completed,
|
||||
completed: item.status === TodoItemStatus.Completed,
|
||||
multiline: Boolean(item.description || item.due),
|
||||
})}"
|
||||
.selected=${item.status === TodoItemStatus.Completed}
|
||||
.disabled=${unavailable ||
|
||||
!this._todoListSupportsFeature(
|
||||
.disabled=${unavailable}
|
||||
.checkboxDisabled=${!this._todoListSupportsFeature(
|
||||
TodoListEntityFeature.UPDATE_TODO_ITEM
|
||||
)}
|
||||
.indeterminate=${!item.status}
|
||||
.noninteractive=${!this._todoListSupportsFeature(
|
||||
TodoListEntityFeature.UPDATE_TODO_ITEM
|
||||
)}
|
||||
item-id=${item.uid}
|
||||
.itemId=${item.uid}
|
||||
@change=${this._completeItem}
|
||||
@click=${this._openItem}
|
||||
@ -631,35 +704,53 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
|
||||
this._moveItem(oldIndex, newIndex);
|
||||
}
|
||||
|
||||
private async _moveItem(oldIndex: number, newIndex: number) {
|
||||
// correct index for header
|
||||
oldIndex -= 1;
|
||||
newIndex -= 1;
|
||||
const uncheckedItems = this._getUncheckedItems(this._items);
|
||||
const item = uncheckedItems[oldIndex];
|
||||
let prevItem: TodoItem | undefined;
|
||||
if (newIndex > 0) {
|
||||
if (newIndex < oldIndex) {
|
||||
prevItem = uncheckedItems[newIndex - 1];
|
||||
} else {
|
||||
prevItem = uncheckedItems[newIndex];
|
||||
private _findFirstItem(
|
||||
items: HTMLCollection,
|
||||
start: number,
|
||||
direction: "up" | "down"
|
||||
) {
|
||||
let item: Element | undefined;
|
||||
let index = direction === "up" ? start - 1 : start;
|
||||
while (item?.localName !== "ha-check-list-item") {
|
||||
item = items[index];
|
||||
index = direction === "up" ? index - 1 : index + 1;
|
||||
if (!item) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
return item;
|
||||
}
|
||||
|
||||
private async _moveItem(oldIndex: number, newIndex: number) {
|
||||
await this.updateComplete;
|
||||
|
||||
const list = this.renderRoot.querySelector("ha-list")!;
|
||||
|
||||
const items = list.children;
|
||||
|
||||
const itemId = (items[oldIndex] as any).itemId as string;
|
||||
|
||||
const prevItemId = (
|
||||
this._findFirstItem(
|
||||
items,
|
||||
newIndex,
|
||||
newIndex < oldIndex ? "up" : "down"
|
||||
) as any
|
||||
)?.itemId;
|
||||
|
||||
// Optimistic change
|
||||
const itemIndex = this._items!.findIndex((itm) => itm.uid === item.uid);
|
||||
this._items!.splice(itemIndex, 1);
|
||||
if (newIndex === 0) {
|
||||
const itemIndex = this._items!.findIndex((itm) => itm.uid === itemId);
|
||||
const item = this._items!.splice(itemIndex, 1)[0];
|
||||
|
||||
if (!prevItemId) {
|
||||
this._items!.unshift(item);
|
||||
} else {
|
||||
const prevIndex = this._items!.findIndex(
|
||||
(itm) => itm.uid === prevItem!.uid
|
||||
);
|
||||
const prevIndex = this._items!.findIndex((itm) => itm.uid === prevItemId);
|
||||
this._items!.splice(prevIndex + 1, 0, item);
|
||||
}
|
||||
this._items = [...this._items!];
|
||||
|
||||
await moveItem(this.hass!, this._entityId!, item.uid, prevItem?.uid);
|
||||
await moveItem(this.hass!, this._entityId!, itemId, prevItemId);
|
||||
}
|
||||
|
||||
static styles = css`
|
||||
|
||||
@ -12,9 +12,9 @@ import "../../components/ha-select";
|
||||
import "../../components/ha-settings-row";
|
||||
import "../../components/ha-textfield";
|
||||
import {
|
||||
DEFAULT_ACCENT_COLOR,
|
||||
DEFAULT_PRIMARY_COLOR,
|
||||
} from "../../resources/styles-data";
|
||||
DefaultAccentColor,
|
||||
DefaultPrimaryColor,
|
||||
} from "../../resources/theme/color.globals";
|
||||
import type { HomeAssistant } from "../../types";
|
||||
import { documentationUrl } from "../../util/documentation-url";
|
||||
|
||||
@ -129,8 +129,7 @@ export class HaPickThemeRow extends LitElement {
|
||||
${curTheme === HOME_ASSISTANT_THEME
|
||||
? html`<div class="color-pickers">
|
||||
<ha-textfield
|
||||
.value=${themeSettings?.primaryColor ||
|
||||
DEFAULT_PRIMARY_COLOR}
|
||||
.value=${themeSettings?.primaryColor || DefaultPrimaryColor}
|
||||
type="color"
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.profile.themes.primary_color"
|
||||
@ -139,7 +138,7 @@ export class HaPickThemeRow extends LitElement {
|
||||
@change=${this._handleColorChange}
|
||||
></ha-textfield>
|
||||
<ha-textfield
|
||||
.value=${themeSettings?.accentColor || DEFAULT_ACCENT_COLOR}
|
||||
.value=${themeSettings?.accentColor || DefaultAccentColor}
|
||||
type="color"
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.profile.themes.accent_color"
|
||||
|
||||
5
src/resources/append-ha-style.ts
Normal file
5
src/resources/append-ha-style.ts
Normal file
@ -0,0 +1,5 @@
|
||||
import { themeStyles } from "./theme/theme";
|
||||
|
||||
const styleElement = document.createElement("style");
|
||||
styleElement.textContent = themeStyles;
|
||||
document.head.append(styleElement);
|
||||
@ -1,165 +0,0 @@
|
||||
import { css, unsafeCSS } from "lit";
|
||||
import { fontStyles } from "./roboto";
|
||||
import {
|
||||
DEFAULT_ACCENT_COLOR,
|
||||
DEFAULT_PRIMARY_COLOR,
|
||||
derivedStyles,
|
||||
} from "./styles-data";
|
||||
|
||||
const mainStyles = css`
|
||||
/*
|
||||
Home Assistant default styles.
|
||||
*/
|
||||
html {
|
||||
/* typography */
|
||||
--ha-font-family-body: Roboto, Noto, sans-serif;
|
||||
--ha-font-family-code: monospace;
|
||||
--ha-font-family-longform: ui-sans-serif, system-ui, sans-serif;
|
||||
|
||||
font-size: 14px;
|
||||
--ha-font-size-scale: 1;
|
||||
|
||||
--ha-font-weight-light: 300;
|
||||
--ha-font-weight-normal: 400;
|
||||
--ha-font-weight-semibold: 500;
|
||||
--ha-font-weight-bold: 600;
|
||||
|
||||
--ha-line-height-condensed: 1.2;
|
||||
--ha-line-height-normal: 1.6;
|
||||
--ha-line-height-expanded: 2;
|
||||
|
||||
--ha-font-smoothing: antialiased;
|
||||
|
||||
height: 100vh;
|
||||
|
||||
/* 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);
|
||||
--outline-hover-color: rgba(0, 0, 0, 0.24);
|
||||
|
||||
--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-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;
|
||||
|
||||
/* history colors */
|
||||
--history-unavailable-color: transparent;
|
||||
|
||||
/* 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);
|
||||
|
||||
direction: ltr;
|
||||
--direction: ltr;
|
||||
--float-start: left;
|
||||
--float-end: right;
|
||||
--margin-title-ltr: 0 0 0 24px;
|
||||
--margin-title-rtl: 0 24px 0 0;
|
||||
|
||||
${unsafeCSS(
|
||||
Object.entries(derivedStyles)
|
||||
.map(([key, value]) => `--${key}: ${value};`)
|
||||
.join("")
|
||||
)}
|
||||
}
|
||||
`.toString();
|
||||
|
||||
const styleElement = document.createElement("style");
|
||||
styleElement.textContent = [mainStyles, fontStyles].join("");
|
||||
document.head.append(styleElement);
|
||||
@ -1,6 +1,6 @@
|
||||
import { tsParticles } from "@tsparticles/engine";
|
||||
import { loadLinksPreset } from "@tsparticles/preset-links";
|
||||
import { DEFAULT_PRIMARY_COLOR } from "./styles-data";
|
||||
import { DefaultPrimaryColor } from "./theme/color.globals";
|
||||
|
||||
loadLinksPreset(tsParticles).then(() => {
|
||||
tsParticles.load({
|
||||
@ -25,11 +25,11 @@ loadLinksPreset(tsParticles).then(() => {
|
||||
},
|
||||
particles: {
|
||||
color: {
|
||||
value: DEFAULT_PRIMARY_COLOR,
|
||||
value: DefaultPrimaryColor,
|
||||
},
|
||||
links: {
|
||||
color: {
|
||||
value: DEFAULT_PRIMARY_COLOR,
|
||||
value: DefaultPrimaryColor,
|
||||
},
|
||||
distance: 100,
|
||||
enable: true,
|
||||
|
||||
@ -121,4 +121,4 @@ export const fontStyles = css`
|
||||
font-weight: 900;
|
||||
font-style: italic;
|
||||
}
|
||||
`.toString();
|
||||
`;
|
||||
|
||||
@ -1,255 +0,0 @@
|
||||
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",
|
||||
"secondary-background-color": "#282828",
|
||||
"clear-background-color": "#111111",
|
||||
"primary-text-color": "#e1e1e1",
|
||||
"secondary-text-color": "#9b9b9b",
|
||||
"disabled-text-color": "#6f6f6f",
|
||||
"app-header-text-color": "#e1e1e1",
|
||||
"app-header-background-color": "#101e24",
|
||||
"switch-unchecked-button-color": "#999999",
|
||||
"switch-unchecked-track-color": "#9b9b9b",
|
||||
"divider-color": "rgba(225, 225, 225, .12)",
|
||||
"outline-color": "rgba(225, 225, 225, .12)",
|
||||
"outline-hover-color": "rgba(225, 225, 225, .24)",
|
||||
"mdc-ripple-color": "#AAAAAA",
|
||||
"mdc-linear-progress-buffer-color": "rgba(255, 255, 255, 0.1)",
|
||||
|
||||
"input-idle-line-color": "rgba(255, 255, 255, 0.42)",
|
||||
"input-hover-line-color": "rgba(255, 255, 255, 0.87)",
|
||||
"input-disabled-line-color": "rgba(255, 255, 255, 0.06)",
|
||||
"input-outlined-idle-border-color": "rgba(255, 255, 255, 0.38)",
|
||||
"input-outlined-hover-border-color": "rgba(255, 255, 255, 0.87)",
|
||||
"input-outlined-disabled-border-color": "rgba(255, 255, 255, 0.06)",
|
||||
"input-fill-color": "rgba(255, 255, 255, 0.05)",
|
||||
"input-disabled-fill-color": "rgba(255, 255, 255, 0.02)",
|
||||
"input-ink-color": "rgba(255, 255, 255, 0.87)",
|
||||
"input-label-ink-color": "rgba(255, 255, 255, 0.6)",
|
||||
"input-disabled-ink-color": "rgba(255, 255, 255, 0.37)",
|
||||
"input-dropdown-icon-color": "rgba(255, 255, 255, 0.54)",
|
||||
|
||||
"codemirror-keyword": "#C792EA",
|
||||
"codemirror-operator": "#89DDFF",
|
||||
"codemirror-variable": "#f07178",
|
||||
"codemirror-variable-2": "#EEFFFF",
|
||||
"codemirror-variable-3": "#DECB6B",
|
||||
"codemirror-builtin": "#FFCB6B",
|
||||
"codemirror-atom": "#F78C6C",
|
||||
"codemirror-number": "#FF5370",
|
||||
"codemirror-def": "#82AAFF",
|
||||
"codemirror-string": "#C3E88D",
|
||||
"codemirror-string-2": "#f07178",
|
||||
"codemirror-comment": "#545454",
|
||||
"codemirror-tag": "#FF5370",
|
||||
"codemirror-meta": "#FFCB6B",
|
||||
"codemirror-attribute": "#C792EA",
|
||||
"codemirror-property": "#C792EA",
|
||||
"codemirror-qualifier": "#DECB6B",
|
||||
"codemirror-type": "#DECB6B",
|
||||
"energy-grid-return-color": "#a280db",
|
||||
"map-filter":
|
||||
"invert(.9) hue-rotate(170deg) brightness(1.5) contrast(1.2) saturate(.3)",
|
||||
"disabled-color": "#464646",
|
||||
} as const;
|
||||
|
||||
export const derivedStyles = {
|
||||
/* typography */
|
||||
"ha-font-size-xs": "calc(10px * var(--ha-font-size-scale))",
|
||||
"ha-font-size-s": "calc(12px * var(--ha-font-size-scale))",
|
||||
"ha-font-size-m": "calc(14px * var(--ha-font-size-scale))",
|
||||
"ha-font-size-l": "calc(16px * var(--ha-font-size-scale))",
|
||||
"ha-font-size-xl": "calc(20px * var(--ha-font-size-scale))",
|
||||
"ha-font-size-2xl": "calc(24px * var(--ha-font-size-scale))",
|
||||
"ha-font-size-3xl": "calc(28px * var(--ha-font-size-scale))",
|
||||
"ha-font-size-4xl": "calc(32px * var(--ha-font-size-scale))",
|
||||
"ha-font-size-5xl": "calc(40px * var(--ha-font-size-scale))",
|
||||
|
||||
"ha-font-family-heading": "var(--ha-font-family-body)",
|
||||
"ha-font-weight-body": "var(--ha-font-weight-normal)",
|
||||
"ha-font-weight-heading": "var(--ha-font-weight-bold)",
|
||||
"ha-font-weight-action": "var(--ha-font-weight-semibold)",
|
||||
|
||||
/* Vaadin typography */
|
||||
"material-h6-font-size": "var(--ha-font-size-m)",
|
||||
"material-small-font-size": "var(--ha-font-size-xs)",
|
||||
"material-caption-font-size": "var(--ha-font-size-2xs)",
|
||||
"material-button-font-size": "var(--ha-font-size-xs)",
|
||||
|
||||
/* 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)",
|
||||
|
||||
/* state color */
|
||||
"state-active-color": "var(--amber-color)",
|
||||
"state-inactive-color": "var(--grey-color)",
|
||||
"state-unavailable-color":
|
||||
"var(--state-icon-unavailable-color, var(--disabled-text-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-locking-color": "var(--orange-color)",
|
||||
"state-lock-unlocked-color": "var(--red-color)",
|
||||
"state-lock-unlocking-color": "var(--orange-color)",
|
||||
"state-lock-open-color": "var(--red-color)",
|
||||
"state-lock-opening-color": "var(--orange-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-valve-active-color": "var(--blue-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-unknown-color": "var(--dark-grey-color)",
|
||||
|
||||
"state-icon-error-color": "var(--error-state-color, var(--error-color))",
|
||||
"sidebar-text-color": "var(--primary-text-color)",
|
||||
"sidebar-background-color": "var(--card-background-color)",
|
||||
"sidebar-selected-text-color": "var(--primary-color)",
|
||||
"sidebar-selected-icon-color": "var(--primary-color)",
|
||||
"sidebar-icon-color": "rgba(var(--rgb-primary-text-color), 0.6)",
|
||||
"switch-checked-color": "var(--primary-color)",
|
||||
"switch-checked-button-color":
|
||||
"var(--switch-checked-color, var(--primary-background-color))",
|
||||
"switch-checked-track-color": "var(--switch-checked-color, #000000)",
|
||||
"switch-unchecked-button-color":
|
||||
"var(--switch-unchecked-color, var(--primary-background-color))",
|
||||
"switch-unchecked-track-color": "var(--switch-unchecked-color, #000000)",
|
||||
"slider-color": "var(--primary-color)",
|
||||
"slider-secondary-color": "var(--light-primary-color)",
|
||||
"slider-track-color": "var(--scrollbar-thumb-color)",
|
||||
"label-badge-background-color": "var(--card-background-color)",
|
||||
"label-badge-text-color": "rgba(var(--rgb-primary-text-color), 0.8)",
|
||||
"table-header-background-color": "var(--input-fill-color)",
|
||||
"table-row-background-color": "var(--primary-background-color)",
|
||||
"table-row-alternative-background-color": "var(--secondary-background-color)",
|
||||
"data-table-background-color": "var(--card-background-color)",
|
||||
"markdown-code-background-color": "var(--primary-background-color)",
|
||||
|
||||
// https://github.com/material-components/material-web/blob/master/docs/theming.md
|
||||
"mdc-theme-primary": "var(--primary-color)",
|
||||
"mdc-theme-secondary": "var(--accent-color)",
|
||||
"mdc-theme-background": "var(--primary-background-color)",
|
||||
"mdc-theme-surface": "var(--card-background-color)",
|
||||
"mdc-theme-on-primary": "var(--text-primary-color)",
|
||||
"mdc-theme-on-secondary": "var(--text-primary-color)",
|
||||
"mdc-theme-on-surface": "var(--primary-text-color)",
|
||||
"mdc-theme-text-disabled-on-light": "var(--disabled-text-color)",
|
||||
"mdc-theme-text-primary-on-background": "var(--primary-text-color)",
|
||||
"mdc-theme-text-secondary-on-background": "var(--secondary-text-color)",
|
||||
"mdc-theme-text-hint-on-background": "var(--secondary-text-color)",
|
||||
"mdc-theme-text-icon-on-background": "var(--secondary-text-color)",
|
||||
"mdc-theme-error": "var(--error-color)",
|
||||
"app-header-text-color": "var(--text-primary-color)",
|
||||
"app-header-background-color": "var(--primary-color)",
|
||||
"app-theme-color": "var(--app-header-background-color)",
|
||||
"mdc-checkbox-unchecked-color": "rgba(var(--rgb-primary-text-color), 0.54)",
|
||||
"mdc-checkbox-disabled-color": "var(--disabled-text-color)",
|
||||
"mdc-radio-unchecked-color": "rgba(var(--rgb-primary-text-color), 0.54)",
|
||||
"mdc-radio-disabled-color": "var(--disabled-text-color)",
|
||||
"mdc-tab-text-label-color-default": "var(--primary-text-color)",
|
||||
"mdc-button-disabled-ink-color": "var(--disabled-text-color)",
|
||||
"mdc-button-outline-color": "var(--outline-color)",
|
||||
"mdc-dialog-scroll-divider-color": "var(--divider-color)",
|
||||
"mdc-dialog-heading-ink-color": "var(--primary-text-color)",
|
||||
"mdc-dialog-content-ink-color": "var(--primary-text-color)",
|
||||
|
||||
"mdc-text-field-idle-line-color": "var(--input-idle-line-color)",
|
||||
"mdc-text-field-hover-line-color": "var(--input-hover-line-color)",
|
||||
"mdc-text-field-disabled-line-color": "var(--input-disabled-line-color)",
|
||||
"mdc-text-field-outlined-idle-border-color":
|
||||
"var(--input-outlined-idle-border-color)",
|
||||
"mdc-text-field-outlined-hover-border-color":
|
||||
"var(--input-outlined-hover-border-color)",
|
||||
"mdc-text-field-outlined-disabled-border-color":
|
||||
"var(--input-outlined-disabled-border-color)",
|
||||
"mdc-text-field-fill-color": "var(--input-fill-color)",
|
||||
"mdc-text-field-disabled-fill-color": "var(--input-disabled-fill-color)",
|
||||
"mdc-text-field-ink-color": "var(--input-ink-color)",
|
||||
"mdc-text-field-label-ink-color": "var(--input-label-ink-color)",
|
||||
"mdc-text-field-disabled-ink-color": "var(--input-disabled-ink-color)",
|
||||
|
||||
"mdc-select-idle-line-color": "var(--input-idle-line-color)",
|
||||
"mdc-select-hover-line-color": "var(--input-hover-line-color)",
|
||||
"mdc-select-outlined-idle-border-color":
|
||||
"var(--input-outlined-idle-border-color)",
|
||||
"mdc-select-outlined-hover-border-color":
|
||||
"var(--input-outlined-hover-border-color)",
|
||||
"mdc-select-outlined-disabled-border-color":
|
||||
"var(--input-outlined-disabled-border-color)",
|
||||
"mdc-select-fill-color": "var(--input-fill-color)",
|
||||
"mdc-select-disabled-fill-color": "var(--input-disabled-fill-color)",
|
||||
"mdc-select-ink-color": "var(--input-ink-color)",
|
||||
"mdc-select-label-ink-color": "var(--input-label-ink-color)",
|
||||
"mdc-select-disabled-ink-color": "var(--input-disabled-ink-color)",
|
||||
"mdc-select-dropdown-icon-color": "var(--input-dropdown-icon-color)",
|
||||
"mdc-select-disabled-dropdown-icon-color": "var(--input-disabled-ink-color)",
|
||||
"ha-assist-chip-filled-container-color":
|
||||
"rgba(var(--rgb-primary-text-color),0.15)",
|
||||
"ha-assist-chip-active-container-color":
|
||||
"rgba(var(--rgb-primary-color),0.15)",
|
||||
"chip-background-color": "rgba(var(--rgb-primary-text-color), 0.15)",
|
||||
// Vaadin
|
||||
"material-body-text-color": "var(--primary-text-color)",
|
||||
"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;
|
||||
359
src/resources/theme/color.globals.ts
Normal file
359
src/resources/theme/color.globals.ts
Normal file
@ -0,0 +1,359 @@
|
||||
import { css } from "lit";
|
||||
import {
|
||||
extractDerivedVars,
|
||||
extractVar,
|
||||
extractVars,
|
||||
} from "../../common/style/derived-css-vars";
|
||||
|
||||
export const colorStyles = css`
|
||||
html {
|
||||
/* 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: #03a9f4;
|
||||
--dark-primary-color: #0288d1;
|
||||
--light-primary-color: #b3e5fc;
|
||||
--accent-color: #ff9800;
|
||||
--divider-color: rgba(0, 0, 0, 0.12);
|
||||
--outline-color: rgba(0, 0, 0, 0.12);
|
||||
--outline-hover-color: rgba(0, 0, 0, 0.24);
|
||||
|
||||
/* 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;
|
||||
|
||||
--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 label-badge */
|
||||
--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;
|
||||
|
||||
/* 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;
|
||||
|
||||
/* history colors */
|
||||
--history-unavailable-color: transparent;
|
||||
|
||||
/* 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);
|
||||
|
||||
/* 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);
|
||||
|
||||
/* state color */
|
||||
--state-active-color: var(--amber-color);
|
||||
--state-inactive-color: var(--grey-color);
|
||||
--state-unavailable-color: var(
|
||||
--state-icon-unavailable-color,
|
||||
var(--disabled-text-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-locking-color: var(--orange-color);
|
||||
--state-lock-unlocked-color: var(--red-color);
|
||||
--state-lock-unlocking-color: var(--orange-color);
|
||||
--state-lock-open-color: var(--red-color);
|
||||
--state-lock-opening-color: var(--orange-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-valve-active-color: var(--blue-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-unknown-color: var(--dark-grey-color);
|
||||
|
||||
--state-icon-error-color: var(--error-state-color, var(--error-color));
|
||||
--sidebar-text-color: var(--primary-text-color);
|
||||
--sidebar-background-color: var(--card-background-color);
|
||||
--sidebar-selected-text-color: var(--primary-color);
|
||||
--sidebar-selected-icon-color: var(--primary-color);
|
||||
--sidebar-icon-color: rgba(var(--rgb-primary-text-color), 0.6);
|
||||
--switch-checked-color: var(--primary-color);
|
||||
--switch-checked-button-color: var(
|
||||
--switch-checked-color,
|
||||
var(--primary-background-color)
|
||||
);
|
||||
--switch-checked-track-color: var(--switch-checked-color, #000000);
|
||||
--switch-unchecked-button-color: var(
|
||||
--switch-unchecked-color,
|
||||
var(--primary-background-color)
|
||||
);
|
||||
--switch-unchecked-track-color: var(--switch-unchecked-color, #000000);
|
||||
--slider-color: var(--primary-color);
|
||||
--slider-secondary-color: var(--light-primary-color);
|
||||
--slider-track-color: var(--scrollbar-thumb-color);
|
||||
--label-badge-background-color: var(--card-background-color);
|
||||
--label-badge-text-color: rgba(var(--rgb-primary-text-color), 0.8);
|
||||
--table-header-background-color: var(--input-fill-color);
|
||||
--table-row-background-color: var(--primary-background-color);
|
||||
--table-row-alternative-background-color: var(--secondary-background-color);
|
||||
--data-table-background-color: var(--card-background-color);
|
||||
--markdown-code-background-color: var(--primary-background-color);
|
||||
|
||||
/* https://github.com/material-components/material-web/blob/master/docs/theming.md */
|
||||
--mdc-theme-primary: var(--primary-color);
|
||||
--mdc-theme-secondary: var(--accent-color);
|
||||
--mdc-theme-background: var(--primary-background-color);
|
||||
--mdc-theme-surface: var(--card-background-color);
|
||||
--mdc-theme-on-primary: var(--text-primary-color);
|
||||
--mdc-theme-on-secondary: var(--text-primary-color);
|
||||
--mdc-theme-on-surface: var(--primary-text-color);
|
||||
--mdc-theme-text-disabled-on-light: var(--disabled-text-color);
|
||||
--mdc-theme-text-primary-on-background: var(--primary-text-color);
|
||||
--mdc-theme-text-secondary-on-background: var(--secondary-text-color);
|
||||
--mdc-theme-text-hint-on-background: var(--secondary-text-color);
|
||||
--mdc-theme-text-icon-on-background: var(--secondary-text-color);
|
||||
--mdc-theme-error: var(--error-color);
|
||||
--app-header-text-color: var(--text-primary-color);
|
||||
--app-header-background-color: var(--primary-color);
|
||||
--app-theme-color: var(--app-header-background-color);
|
||||
--mdc-checkbox-unchecked-color: rgba(var(--rgb-primary-text-color), 0.54);
|
||||
--mdc-checkbox-disabled-color: var(--disabled-text-color);
|
||||
--mdc-radio-unchecked-color: rgba(var(--rgb-primary-text-color), 0.54);
|
||||
--mdc-radio-disabled-color: var(--disabled-text-color);
|
||||
--mdc-tab-text-label-color-default: var(--primary-text-color);
|
||||
--mdc-button-disabled-ink-color: var(--disabled-text-color);
|
||||
--mdc-button-outline-color: var(--outline-color);
|
||||
--mdc-dialog-scroll-divider-color: var(--divider-color);
|
||||
--mdc-dialog-heading-ink-color: var(--primary-text-color);
|
||||
--mdc-dialog-content-ink-color: var(--primary-text-color);
|
||||
|
||||
--mdc-text-field-idle-line-color: var(--input-idle-line-color);
|
||||
--mdc-text-field-hover-line-color: var(--input-hover-line-color);
|
||||
--mdc-text-field-disabled-line-color: var(--input-disabled-line-color);
|
||||
--mdc-text-field-outlined-idle-border-color: var(
|
||||
--input-outlined-idle-border-color
|
||||
);
|
||||
--mdc-text-field-outlined-hover-border-color: var(
|
||||
--input-outlined-hover-border-color
|
||||
);
|
||||
--mdc-text-field-outlined-disabled-border-color: var(
|
||||
--input-outlined-disabled-border-color
|
||||
);
|
||||
--mdc-text-field-fill-color: var(--input-fill-color);
|
||||
--mdc-text-field-disabled-fill-color: var(--input-disabled-fill-color);
|
||||
--mdc-text-field-ink-color: var(--input-ink-color);
|
||||
--mdc-text-field-label-ink-color: var(--input-label-ink-color);
|
||||
--mdc-text-field-disabled-ink-color: var(--input-disabled-ink-color);
|
||||
|
||||
--mdc-select-idle-line-color: var(--input-idle-line-color);
|
||||
--mdc-select-hover-line-color: var(--input-hover-line-color);
|
||||
--mdc-select-outlined-idle-border-color: var(
|
||||
--input-outlined-idle-border-color
|
||||
);
|
||||
--mdc-select-outlined-hover-border-color: var(
|
||||
--input-outlined-hover-border-color
|
||||
);
|
||||
--mdc-select-outlined-disabled-border-color: var(
|
||||
--input-outlined-disabled-border-color
|
||||
);
|
||||
--mdc-select-fill-color: var(--input-fill-color);
|
||||
--mdc-select-disabled-fill-color: var(--input-disabled-fill-color);
|
||||
--mdc-select-ink-color: var(--input-ink-color);
|
||||
--mdc-select-label-ink-color: var(--input-label-ink-color);
|
||||
--mdc-select-disabled-ink-color: var(--input-disabled-ink-color);
|
||||
--mdc-select-dropdown-icon-color: var(--input-dropdown-icon-color);
|
||||
--mdc-select-disabled-dropdown-icon-color: var(--input-disabled-ink-color);
|
||||
--ha-assist-chip-filled-container-color: rgba(
|
||||
var(--rgb-primary-text-color),
|
||||
0.15
|
||||
);
|
||||
--ha-assist-chip-active-container-color: rgba(
|
||||
var(--rgb-primary-color),
|
||||
0.15
|
||||
);
|
||||
--chip-background-color: rgba(var(--rgb-primary-text-color), 0.15);
|
||||
|
||||
/* Vaadin */
|
||||
--material-body-text-color: var(--primary-text-color);
|
||||
--material-background-color: var(--card-background-color);
|
||||
--material-secondary-background-color: var(--secondary-background-color);
|
||||
--material-secondary-text-color: var(--secondary-text-color);
|
||||
}
|
||||
`;
|
||||
|
||||
const darkColorStyles = css`
|
||||
--primary-background-color: #111111;
|
||||
--card-background-color: #1c1c1c;
|
||||
--secondary-background-color: #282828;
|
||||
--clear-background-color: #111111;
|
||||
--primary-text-color: #e1e1e1;
|
||||
--secondary-text-color: #9b9b9b;
|
||||
--disabled-text-color: #6f6f6f;
|
||||
--app-header-text-color: #e1e1e1;
|
||||
--app-header-background-color: #101e24;
|
||||
--switch-unchecked-button-color: #999999;
|
||||
--switch-unchecked-track-color: #9b9b9b;
|
||||
--divider-color: rgba(225, 225, 225, 0.12);
|
||||
--outline-color: rgba(225, 225, 225, 0.12);
|
||||
--outline-hover-color: rgba(225, 225, 225, 0.24);
|
||||
--mdc-ripple-color: #aaaaaa;
|
||||
--mdc-linear-progress-buffer-color: rgba(255, 255, 255, 0.1);
|
||||
|
||||
--input-idle-line-color: rgba(255, 255, 255, 0.42);
|
||||
--input-hover-line-color: rgba(255, 255, 255, 0.87);
|
||||
--input-disabled-line-color: rgba(255, 255, 255, 0.06);
|
||||
--input-outlined-idle-border-color: rgba(255, 255, 255, 0.38);
|
||||
--input-outlined-hover-border-color: rgba(255, 255, 255, 0.87);
|
||||
--input-outlined-disabled-border-color: rgba(255, 255, 255, 0.06);
|
||||
--input-fill-color: rgba(255, 255, 255, 0.05);
|
||||
--input-disabled-fill-color: rgba(255, 255, 255, 0.02);
|
||||
--input-ink-color: rgba(255, 255, 255, 0.87);
|
||||
--input-label-ink-color: rgba(255, 255, 255, 0.6);
|
||||
--input-disabled-ink-color: rgba(255, 255, 255, 0.37);
|
||||
--input-dropdown-icon-color: rgba(255, 255, 255, 0.54);
|
||||
|
||||
--codemirror-keyword: #c792ea;
|
||||
--codemirror-operator: #89ddff;
|
||||
--codemirror-variable: #f07178;
|
||||
--codemirror-variable-2: #eeffff;
|
||||
--codemirror-variable-3: #decb6b;
|
||||
--codemirror-builtin: #ffcb6b;
|
||||
--codemirror-atom: #f78c6c;
|
||||
--codemirror-number: #ff5370;
|
||||
--codemirror-def: #82aaff;
|
||||
--codemirror-string: #c3e88d;
|
||||
--codemirror-string-2: #f07178;
|
||||
--codemirror-comment: #545454;
|
||||
--codemirror-tag: #ff5370;
|
||||
--codemirror-meta: #ffcb6b;
|
||||
--codemirror-attribute: #c792ea;
|
||||
--codemirror-property: #c792ea;
|
||||
--codemirror-qualifier: #decb6b;
|
||||
--codemirror-type: #decb6b;
|
||||
--energy-grid-return-color: #a280db;
|
||||
--map-filter: invert(0.9) hue-rotate(170deg) brightness(1.5) contrast(1.2)
|
||||
saturate(0.3);
|
||||
--disabled-color: #464646;
|
||||
`;
|
||||
export const colorDerivedVariables = extractDerivedVars(colorStyles);
|
||||
export const darkColorVariables = extractVars(darkColorStyles);
|
||||
|
||||
export const DefaultPrimaryColor = extractVar(colorStyles, "primary-color");
|
||||
export const DefaultAccentColor = extractVar(colorStyles, "accent-color");
|
||||
38
src/resources/theme/main.globals.ts
Normal file
38
src/resources/theme/main.globals.ts
Normal file
@ -0,0 +1,38 @@
|
||||
import { css } from "lit";
|
||||
import { extractDerivedVars } from "../../common/style/derived-css-vars";
|
||||
|
||||
export const mainStyles = css`
|
||||
html {
|
||||
height: 100vh;
|
||||
|
||||
/* for header */
|
||||
--header-height: 56px;
|
||||
|
||||
/* 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;
|
||||
|
||||
direction: ltr;
|
||||
--direction: ltr;
|
||||
--float-start: left;
|
||||
--float-end: right;
|
||||
--margin-title-ltr: 0 0 0 24px;
|
||||
--margin-title-rtl: 0 24px 0 0;
|
||||
|
||||
/* Vaadin typography */
|
||||
--material-h6-font-size: var(--ha-font-size-m);
|
||||
--material-small-font-size: var(--ha-font-size-xs);
|
||||
--material-caption-font-size: var(--ha-font-size-2xs);
|
||||
--material-button-font-size: var(--ha-font-size-xs);
|
||||
}
|
||||
`;
|
||||
|
||||
export const mainDerivedVariables = extractDerivedVars(mainStyles);
|
||||
20
src/resources/theme/theme.ts
Normal file
20
src/resources/theme/theme.ts
Normal file
@ -0,0 +1,20 @@
|
||||
import { fontStyles } from "../roboto";
|
||||
import { colorDerivedVariables, colorStyles } from "./color.globals";
|
||||
import { mainDerivedVariables, mainStyles } from "./main.globals";
|
||||
import {
|
||||
typographyDerivedVariables,
|
||||
typographyStyles,
|
||||
} from "./typography.globals";
|
||||
|
||||
export const themeStyles = [
|
||||
fontStyles.toString(),
|
||||
mainStyles.toString(),
|
||||
typographyStyles.toString(),
|
||||
colorStyles.toString(),
|
||||
].join("");
|
||||
|
||||
export const derivedStyles = {
|
||||
...mainDerivedVariables,
|
||||
...typographyDerivedVariables,
|
||||
...colorDerivedVariables,
|
||||
};
|
||||
40
src/resources/theme/typography.globals.ts
Normal file
40
src/resources/theme/typography.globals.ts
Normal file
@ -0,0 +1,40 @@
|
||||
import { css } from "lit";
|
||||
import { extractDerivedVars } from "../../common/style/derived-css-vars";
|
||||
|
||||
export const typographyStyles = css`
|
||||
html {
|
||||
--ha-font-family-body: Roboto, Noto, sans-serif;
|
||||
--ha-font-family-code: monospace;
|
||||
--ha-font-family-longform: ui-sans-serif, system-ui, sans-serif;
|
||||
|
||||
font-size: 14px;
|
||||
--ha-font-size-scale: 1;
|
||||
--ha-font-size-xs: calc(10px * var(--ha-font-size-scale));
|
||||
--ha-font-size-s: calc(12px * var(--ha-font-size-scale));
|
||||
--ha-font-size-m: calc(14px * var(--ha-font-size-scale));
|
||||
--ha-font-size-l: calc(16px * var(--ha-font-size-scale));
|
||||
--ha-font-size-xl: calc(20px * var(--ha-font-size-scale));
|
||||
--ha-font-size-2xl: calc(24px * var(--ha-font-size-scale));
|
||||
--ha-font-size-3xl: calc(28px * var(--ha-font-size-scale));
|
||||
--ha-font-size-4xl: calc(32px * var(--ha-font-size-scale));
|
||||
--ha-font-size-5xl: calc(40px * var(--ha-font-size-scale));
|
||||
|
||||
--ha-font-weight-light: 300;
|
||||
--ha-font-weight-normal: 400;
|
||||
--ha-font-weight-semibold: 500;
|
||||
--ha-font-weight-bold: 600;
|
||||
|
||||
--ha-font-family-heading: var(--ha-font-family-body);
|
||||
--ha-font-weight-body: var(--ha-font-weight-normal);
|
||||
--ha-font-weight-heading: var(--ha-font-weight-bold);
|
||||
--ha-font-weight-action: var(--ha-font-weight-semibold);
|
||||
|
||||
--ha-line-height-condensed: 1.2;
|
||||
--ha-line-height-normal: 1.6;
|
||||
--ha-line-height-expanded: 2;
|
||||
|
||||
--ha-font-smoothing: antialiased;
|
||||
}
|
||||
`;
|
||||
|
||||
export const typographyDerivedVariables = extractDerivedVars(typographyStyles);
|
||||
@ -2723,7 +2723,7 @@
|
||||
"more_locations": "Explore more locations",
|
||||
"manage_network_storage": "Manage network storage",
|
||||
"ha_cloud_backup": "{home_assistant_cloud} backup",
|
||||
"ha_cloud_description": "Stores an encrypted backup offsite. Ideal if your local backup can not be used to restore your system. Thats why it stores one backup with a maximum size of 5 GB. The oldest backups are automatically deleted."
|
||||
"ha_cloud_description": "Stores an encrypted backup offsite. This is ideal in case your local backup becomes inaccessible. The cloud stores one backup with a maximum size of 5 GB, and older backups are automatically deleted."
|
||||
},
|
||||
"encryption_key": {
|
||||
"title": "Encryption key",
|
||||
@ -6529,6 +6529,7 @@
|
||||
"unchecked_items": "Active",
|
||||
"no_unchecked_items": "You have no to-do items!",
|
||||
"checked_items": "Completed",
|
||||
"no_status_items": "No status",
|
||||
"clear_items": "Remove completed items",
|
||||
"add_item": "Add item",
|
||||
"today": "Today",
|
||||
|
||||
272
yarn.lock
272
yarn.lock
@ -3872,82 +3872,82 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@rspack/binding-darwin-arm64@npm:1.3.6":
|
||||
version: 1.3.6
|
||||
resolution: "@rspack/binding-darwin-arm64@npm:1.3.6"
|
||||
"@rspack/binding-darwin-arm64@npm:1.3.7":
|
||||
version: 1.3.7
|
||||
resolution: "@rspack/binding-darwin-arm64@npm:1.3.7"
|
||||
conditions: os=darwin & cpu=arm64
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@rspack/binding-darwin-x64@npm:1.3.6":
|
||||
version: 1.3.6
|
||||
resolution: "@rspack/binding-darwin-x64@npm:1.3.6"
|
||||
"@rspack/binding-darwin-x64@npm:1.3.7":
|
||||
version: 1.3.7
|
||||
resolution: "@rspack/binding-darwin-x64@npm:1.3.7"
|
||||
conditions: os=darwin & cpu=x64
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@rspack/binding-linux-arm64-gnu@npm:1.3.6":
|
||||
version: 1.3.6
|
||||
resolution: "@rspack/binding-linux-arm64-gnu@npm:1.3.6"
|
||||
"@rspack/binding-linux-arm64-gnu@npm:1.3.7":
|
||||
version: 1.3.7
|
||||
resolution: "@rspack/binding-linux-arm64-gnu@npm:1.3.7"
|
||||
conditions: os=linux & cpu=arm64 & libc=glibc
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@rspack/binding-linux-arm64-musl@npm:1.3.6":
|
||||
version: 1.3.6
|
||||
resolution: "@rspack/binding-linux-arm64-musl@npm:1.3.6"
|
||||
"@rspack/binding-linux-arm64-musl@npm:1.3.7":
|
||||
version: 1.3.7
|
||||
resolution: "@rspack/binding-linux-arm64-musl@npm:1.3.7"
|
||||
conditions: os=linux & cpu=arm64 & libc=musl
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@rspack/binding-linux-x64-gnu@npm:1.3.6":
|
||||
version: 1.3.6
|
||||
resolution: "@rspack/binding-linux-x64-gnu@npm:1.3.6"
|
||||
"@rspack/binding-linux-x64-gnu@npm:1.3.7":
|
||||
version: 1.3.7
|
||||
resolution: "@rspack/binding-linux-x64-gnu@npm:1.3.7"
|
||||
conditions: os=linux & cpu=x64 & libc=glibc
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@rspack/binding-linux-x64-musl@npm:1.3.6":
|
||||
version: 1.3.6
|
||||
resolution: "@rspack/binding-linux-x64-musl@npm:1.3.6"
|
||||
"@rspack/binding-linux-x64-musl@npm:1.3.7":
|
||||
version: 1.3.7
|
||||
resolution: "@rspack/binding-linux-x64-musl@npm:1.3.7"
|
||||
conditions: os=linux & cpu=x64 & libc=musl
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@rspack/binding-win32-arm64-msvc@npm:1.3.6":
|
||||
version: 1.3.6
|
||||
resolution: "@rspack/binding-win32-arm64-msvc@npm:1.3.6"
|
||||
"@rspack/binding-win32-arm64-msvc@npm:1.3.7":
|
||||
version: 1.3.7
|
||||
resolution: "@rspack/binding-win32-arm64-msvc@npm:1.3.7"
|
||||
conditions: os=win32 & cpu=arm64
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@rspack/binding-win32-ia32-msvc@npm:1.3.6":
|
||||
version: 1.3.6
|
||||
resolution: "@rspack/binding-win32-ia32-msvc@npm:1.3.6"
|
||||
"@rspack/binding-win32-ia32-msvc@npm:1.3.7":
|
||||
version: 1.3.7
|
||||
resolution: "@rspack/binding-win32-ia32-msvc@npm:1.3.7"
|
||||
conditions: os=win32 & cpu=ia32
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@rspack/binding-win32-x64-msvc@npm:1.3.6":
|
||||
version: 1.3.6
|
||||
resolution: "@rspack/binding-win32-x64-msvc@npm:1.3.6"
|
||||
"@rspack/binding-win32-x64-msvc@npm:1.3.7":
|
||||
version: 1.3.7
|
||||
resolution: "@rspack/binding-win32-x64-msvc@npm:1.3.7"
|
||||
conditions: os=win32 & cpu=x64
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@rspack/binding@npm:1.3.6":
|
||||
version: 1.3.6
|
||||
resolution: "@rspack/binding@npm:1.3.6"
|
||||
"@rspack/binding@npm:1.3.7":
|
||||
version: 1.3.7
|
||||
resolution: "@rspack/binding@npm:1.3.7"
|
||||
dependencies:
|
||||
"@rspack/binding-darwin-arm64": "npm:1.3.6"
|
||||
"@rspack/binding-darwin-x64": "npm:1.3.6"
|
||||
"@rspack/binding-linux-arm64-gnu": "npm:1.3.6"
|
||||
"@rspack/binding-linux-arm64-musl": "npm:1.3.6"
|
||||
"@rspack/binding-linux-x64-gnu": "npm:1.3.6"
|
||||
"@rspack/binding-linux-x64-musl": "npm:1.3.6"
|
||||
"@rspack/binding-win32-arm64-msvc": "npm:1.3.6"
|
||||
"@rspack/binding-win32-ia32-msvc": "npm:1.3.6"
|
||||
"@rspack/binding-win32-x64-msvc": "npm:1.3.6"
|
||||
"@rspack/binding-darwin-arm64": "npm:1.3.7"
|
||||
"@rspack/binding-darwin-x64": "npm:1.3.7"
|
||||
"@rspack/binding-linux-arm64-gnu": "npm:1.3.7"
|
||||
"@rspack/binding-linux-arm64-musl": "npm:1.3.7"
|
||||
"@rspack/binding-linux-x64-gnu": "npm:1.3.7"
|
||||
"@rspack/binding-linux-x64-musl": "npm:1.3.7"
|
||||
"@rspack/binding-win32-arm64-msvc": "npm:1.3.7"
|
||||
"@rspack/binding-win32-ia32-msvc": "npm:1.3.7"
|
||||
"@rspack/binding-win32-x64-msvc": "npm:1.3.7"
|
||||
dependenciesMeta:
|
||||
"@rspack/binding-darwin-arm64":
|
||||
optional: true
|
||||
@ -3967,13 +3967,13 @@ __metadata:
|
||||
optional: true
|
||||
"@rspack/binding-win32-x64-msvc":
|
||||
optional: true
|
||||
checksum: 10/fb0886277fed4c672d2dd3f7a501de53a0a7d2741a8d813f7e9782b93a89b79ec1d2d63cb5f78c0971e62e8d71f6109e0ee694a020ed11c1a2405643132694ee
|
||||
checksum: 10/be10f347dda43b04eb2b66cd17a53de89e211b14906dc6506a756037551e5a40df95cf66a91a8e12da63b5b0d0e6835a27853d38f9d0d404be211c0b6c059be3
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@rspack/cli@npm:1.3.6":
|
||||
version: 1.3.6
|
||||
resolution: "@rspack/cli@npm:1.3.6"
|
||||
"@rspack/cli@npm:1.3.7":
|
||||
version: 1.3.7
|
||||
resolution: "@rspack/cli@npm:1.3.7"
|
||||
dependencies:
|
||||
"@discoveryjs/json-ext": "npm:^0.5.7"
|
||||
"@rspack/dev-server": "npm:1.1.1"
|
||||
@ -3987,16 +3987,16 @@ __metadata:
|
||||
"@rspack/core": ^1.0.0-alpha || ^1.x
|
||||
bin:
|
||||
rspack: bin/rspack.js
|
||||
checksum: 10/d016e732e8bf350c15ae710aae1a0925a042a62fad02fd1726357237f231c58b0d96d186cf40454912d0c4067292748adf1acd5f8bc2cc62a0cfab427ac6c51b
|
||||
checksum: 10/d7ad97c49eb71dd0f8f614aa85a63eaa8071307c9af18ce287f3f146310ef937bdc1887445ec227600d578a89cc32d716baaf5dfb47fab5943b3e64f0c6ec82e
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@rspack/core@npm:1.3.6":
|
||||
version: 1.3.6
|
||||
resolution: "@rspack/core@npm:1.3.6"
|
||||
"@rspack/core@npm:1.3.7":
|
||||
version: 1.3.7
|
||||
resolution: "@rspack/core@npm:1.3.7"
|
||||
dependencies:
|
||||
"@module-federation/runtime-tools": "npm:0.13.0"
|
||||
"@rspack/binding": "npm:1.3.6"
|
||||
"@rspack/binding": "npm:1.3.7"
|
||||
"@rspack/lite-tapable": "npm:1.0.1"
|
||||
caniuse-lite: "npm:^1.0.30001715"
|
||||
peerDependencies:
|
||||
@ -4004,7 +4004,7 @@ __metadata:
|
||||
peerDependenciesMeta:
|
||||
"@swc/helpers":
|
||||
optional: true
|
||||
checksum: 10/7964d3f90154dea89b4075836bf9e8361b528e74b74b6bd7c85be25fa485ad385927afd850b334403cda4589ba05d513b635b35bb4652c67b3111fdd82b0ca4e
|
||||
checksum: 10/0a32f9dff39f84aa5300077cef513a783d23c6995effeeafc7783edba3a1ecd1633b7682d1688606ec40ffc45046445904542b96f2cfa8d3fc120eba77a9731f
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
@ -4945,131 +4945,131 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@vaadin/a11y-base@npm:~24.7.3":
|
||||
version: 24.7.3
|
||||
resolution: "@vaadin/a11y-base@npm:24.7.3"
|
||||
"@vaadin/a11y-base@npm:~24.7.4":
|
||||
version: 24.7.4
|
||||
resolution: "@vaadin/a11y-base@npm:24.7.4"
|
||||
dependencies:
|
||||
"@open-wc/dedupe-mixin": "npm:^1.3.0"
|
||||
"@polymer/polymer": "npm:^3.0.0"
|
||||
"@vaadin/component-base": "npm:~24.7.3"
|
||||
"@vaadin/component-base": "npm:~24.7.4"
|
||||
lit: "npm:^3.0.0"
|
||||
checksum: 10/a3d2e68ea3ee48e1974c2e6691ae8d09dae0fb0f19e6180e398e3cecb5e89d8d5fb57187f30a835a3c2b98ae4dffdffab1de00ffa9228c4389de4499cbebb4a5
|
||||
checksum: 10/cee80ce69d408954fb4726ce1b10641fdc067b6a794f44272b29724a31b0cc91301906ee63e3c758aeb0adec08c1f41f408d43c78d893cfc81aa22e101760e4b
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@vaadin/combo-box@npm:24.7.3":
|
||||
version: 24.7.3
|
||||
resolution: "@vaadin/combo-box@npm:24.7.3"
|
||||
"@vaadin/combo-box@npm:24.7.4":
|
||||
version: 24.7.4
|
||||
resolution: "@vaadin/combo-box@npm:24.7.4"
|
||||
dependencies:
|
||||
"@open-wc/dedupe-mixin": "npm:^1.3.0"
|
||||
"@polymer/polymer": "npm:^3.0.0"
|
||||
"@vaadin/a11y-base": "npm:~24.7.3"
|
||||
"@vaadin/component-base": "npm:~24.7.3"
|
||||
"@vaadin/field-base": "npm:~24.7.3"
|
||||
"@vaadin/input-container": "npm:~24.7.3"
|
||||
"@vaadin/item": "npm:~24.7.3"
|
||||
"@vaadin/lit-renderer": "npm:~24.7.3"
|
||||
"@vaadin/overlay": "npm:~24.7.3"
|
||||
"@vaadin/vaadin-lumo-styles": "npm:~24.7.3"
|
||||
"@vaadin/vaadin-material-styles": "npm:~24.7.3"
|
||||
"@vaadin/vaadin-themable-mixin": "npm:~24.7.3"
|
||||
"@vaadin/a11y-base": "npm:~24.7.4"
|
||||
"@vaadin/component-base": "npm:~24.7.4"
|
||||
"@vaadin/field-base": "npm:~24.7.4"
|
||||
"@vaadin/input-container": "npm:~24.7.4"
|
||||
"@vaadin/item": "npm:~24.7.4"
|
||||
"@vaadin/lit-renderer": "npm:~24.7.4"
|
||||
"@vaadin/overlay": "npm:~24.7.4"
|
||||
"@vaadin/vaadin-lumo-styles": "npm:~24.7.4"
|
||||
"@vaadin/vaadin-material-styles": "npm:~24.7.4"
|
||||
"@vaadin/vaadin-themable-mixin": "npm:~24.7.4"
|
||||
lit: "npm:^3.0.0"
|
||||
checksum: 10/fe559fac266a317b49b4a33031e9193c6e8d396592148e04ca36363bf138ed45323716d0bce0d0efe7b1a47feb008c16e0bf24a2fe4e61abd9f7d1fe6144b767
|
||||
checksum: 10/567a06b6be2d0e124a50265bf10688a399c208a7b3ae0e63e1479c9b42c1ff3e1573a50824297973053a5e346a796ece26f94b5a5c82495c6eac8661b03bd5b9
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@vaadin/component-base@npm:~24.7.3":
|
||||
version: 24.7.3
|
||||
resolution: "@vaadin/component-base@npm:24.7.3"
|
||||
"@vaadin/component-base@npm:~24.7.4":
|
||||
version: 24.7.4
|
||||
resolution: "@vaadin/component-base@npm:24.7.4"
|
||||
dependencies:
|
||||
"@open-wc/dedupe-mixin": "npm:^1.3.0"
|
||||
"@polymer/polymer": "npm:^3.0.0"
|
||||
"@vaadin/vaadin-development-mode-detector": "npm:^2.0.0"
|
||||
"@vaadin/vaadin-usage-statistics": "npm:^2.1.0"
|
||||
lit: "npm:^3.0.0"
|
||||
checksum: 10/11540081b0b966a970784edaace6ac16fcc3c651439f37ec19e79440850df381c94f8118b0e447650b8ca8ba56445c30a1f4aefb8d5d009936c1b6ca707fd46c
|
||||
checksum: 10/39b653fa3066b8488aadf45b1a7e77a910f8b17da64e2d49134bf24951d4d90af915bef48ee9440acef23123e9bcf3065e5ace5846e299285632e0e66ed3ae2c
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@vaadin/field-base@npm:~24.7.3":
|
||||
version: 24.7.3
|
||||
resolution: "@vaadin/field-base@npm:24.7.3"
|
||||
"@vaadin/field-base@npm:~24.7.4":
|
||||
version: 24.7.4
|
||||
resolution: "@vaadin/field-base@npm:24.7.4"
|
||||
dependencies:
|
||||
"@open-wc/dedupe-mixin": "npm:^1.3.0"
|
||||
"@polymer/polymer": "npm:^3.0.0"
|
||||
"@vaadin/a11y-base": "npm:~24.7.3"
|
||||
"@vaadin/component-base": "npm:~24.7.3"
|
||||
"@vaadin/a11y-base": "npm:~24.7.4"
|
||||
"@vaadin/component-base": "npm:~24.7.4"
|
||||
lit: "npm:^3.0.0"
|
||||
checksum: 10/97ef6c9eea49962b2c4526eba4dedc24de67ba2df57d469ff82e449488918165e42b5e98fa212dba82e0fe1e9623889b6a22e0db3442e045caec6cee371c12d4
|
||||
checksum: 10/304f46782bd17f03bf07b00d3b0551a4f30fa6c40cb1d948c719741d44b264b2f7e8bd7d9a56dfbc5ddbc3d8beb588b81311be228fa6086beb600212e42e5831
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@vaadin/icon@npm:~24.7.3":
|
||||
version: 24.7.3
|
||||
resolution: "@vaadin/icon@npm:24.7.3"
|
||||
"@vaadin/icon@npm:~24.7.4":
|
||||
version: 24.7.4
|
||||
resolution: "@vaadin/icon@npm:24.7.4"
|
||||
dependencies:
|
||||
"@open-wc/dedupe-mixin": "npm:^1.3.0"
|
||||
"@polymer/polymer": "npm:^3.0.0"
|
||||
"@vaadin/component-base": "npm:~24.7.3"
|
||||
"@vaadin/vaadin-lumo-styles": "npm:~24.7.3"
|
||||
"@vaadin/vaadin-themable-mixin": "npm:~24.7.3"
|
||||
"@vaadin/component-base": "npm:~24.7.4"
|
||||
"@vaadin/vaadin-lumo-styles": "npm:~24.7.4"
|
||||
"@vaadin/vaadin-themable-mixin": "npm:~24.7.4"
|
||||
lit: "npm:^3.0.0"
|
||||
checksum: 10/a3da83bc9effd9eabd7382e4d4fdea1bb412c8fe09bcfc2c17db37184d856c6058e36f5f1bfab25b1c726ed5328a8af338405fc6b5b11b9aff5c6824e282173b
|
||||
checksum: 10/acfb412eef7a2f077348fdbe0567afef8ee82d962264ef7a7b1661cb3a5ae838c3cae3c9edec735ff99e9bfaeb17cd882c854dc1932663c1a252b0bbe1a61324
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@vaadin/input-container@npm:~24.7.3":
|
||||
version: 24.7.3
|
||||
resolution: "@vaadin/input-container@npm:24.7.3"
|
||||
"@vaadin/input-container@npm:~24.7.4":
|
||||
version: 24.7.4
|
||||
resolution: "@vaadin/input-container@npm:24.7.4"
|
||||
dependencies:
|
||||
"@polymer/polymer": "npm:^3.0.0"
|
||||
"@vaadin/component-base": "npm:~24.7.3"
|
||||
"@vaadin/vaadin-lumo-styles": "npm:~24.7.3"
|
||||
"@vaadin/vaadin-material-styles": "npm:~24.7.3"
|
||||
"@vaadin/vaadin-themable-mixin": "npm:~24.7.3"
|
||||
"@vaadin/component-base": "npm:~24.7.4"
|
||||
"@vaadin/vaadin-lumo-styles": "npm:~24.7.4"
|
||||
"@vaadin/vaadin-material-styles": "npm:~24.7.4"
|
||||
"@vaadin/vaadin-themable-mixin": "npm:~24.7.4"
|
||||
lit: "npm:^3.0.0"
|
||||
checksum: 10/61f2293927a22396480bd88f84565651146f485a5d9b73ab8a7607931220d5eccf9f87ce208feb6156e716462b4aeb3d03877f13d4229d62a3c60468686973e7
|
||||
checksum: 10/8ff1da4fe8d8fb9d7542e2a6c3744c104b825e3cc435d14f67c62e6c7993b5561d134c7b4026dd0c2106833a0cf12df2e9ba44e77e96c67a5a3ddb0ff66b4be1
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@vaadin/item@npm:~24.7.3":
|
||||
version: 24.7.3
|
||||
resolution: "@vaadin/item@npm:24.7.3"
|
||||
"@vaadin/item@npm:~24.7.4":
|
||||
version: 24.7.4
|
||||
resolution: "@vaadin/item@npm:24.7.4"
|
||||
dependencies:
|
||||
"@open-wc/dedupe-mixin": "npm:^1.3.0"
|
||||
"@polymer/polymer": "npm:^3.0.0"
|
||||
"@vaadin/a11y-base": "npm:~24.7.3"
|
||||
"@vaadin/component-base": "npm:~24.7.3"
|
||||
"@vaadin/vaadin-lumo-styles": "npm:~24.7.3"
|
||||
"@vaadin/vaadin-material-styles": "npm:~24.7.3"
|
||||
"@vaadin/vaadin-themable-mixin": "npm:~24.7.3"
|
||||
"@vaadin/a11y-base": "npm:~24.7.4"
|
||||
"@vaadin/component-base": "npm:~24.7.4"
|
||||
"@vaadin/vaadin-lumo-styles": "npm:~24.7.4"
|
||||
"@vaadin/vaadin-material-styles": "npm:~24.7.4"
|
||||
"@vaadin/vaadin-themable-mixin": "npm:~24.7.4"
|
||||
lit: "npm:^3.0.0"
|
||||
checksum: 10/bb6d7a9576d8204b20b44d6f672f650c227893869a88dc59fb27f5f5b40b21e172523990d6ff90bbdd2324cca4e62a1d711eb27a0971ea91377d94aa89cc72a6
|
||||
checksum: 10/e14184258f4614b382f7795c1bf3e25bd74c717542812ea1cf2a53849a1cef6ab318dd5482ecb1dc51bd8c4a06aaff6c68dc573ba1c9d30f89dedece70fc1d50
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@vaadin/lit-renderer@npm:~24.7.3":
|
||||
version: 24.7.3
|
||||
resolution: "@vaadin/lit-renderer@npm:24.7.3"
|
||||
"@vaadin/lit-renderer@npm:~24.7.4":
|
||||
version: 24.7.4
|
||||
resolution: "@vaadin/lit-renderer@npm:24.7.4"
|
||||
dependencies:
|
||||
lit: "npm:^3.0.0"
|
||||
checksum: 10/323fb6c79c6857019db94634e218bf9cc9c7e454ea28ae83c9be0ca70b34cc6cf57e0b931167e05c6387cc76fcd69a1e2b6fce04181020c919dcfdd072d4baae
|
||||
checksum: 10/22ada093a3516de1f3701212b52a2b0cfd7d5230b3b73194b651015b9d9a6e9fd3418541baf8478f0b409de7596c17e3876744f1970e80e7af886b3eb2d3d89c
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@vaadin/overlay@npm:~24.7.3":
|
||||
version: 24.7.3
|
||||
resolution: "@vaadin/overlay@npm:24.7.3"
|
||||
"@vaadin/overlay@npm:~24.7.4":
|
||||
version: 24.7.4
|
||||
resolution: "@vaadin/overlay@npm:24.7.4"
|
||||
dependencies:
|
||||
"@open-wc/dedupe-mixin": "npm:^1.3.0"
|
||||
"@polymer/polymer": "npm:^3.0.0"
|
||||
"@vaadin/a11y-base": "npm:~24.7.3"
|
||||
"@vaadin/component-base": "npm:~24.7.3"
|
||||
"@vaadin/vaadin-lumo-styles": "npm:~24.7.3"
|
||||
"@vaadin/vaadin-material-styles": "npm:~24.7.3"
|
||||
"@vaadin/vaadin-themable-mixin": "npm:~24.7.3"
|
||||
"@vaadin/a11y-base": "npm:~24.7.4"
|
||||
"@vaadin/component-base": "npm:~24.7.4"
|
||||
"@vaadin/vaadin-lumo-styles": "npm:~24.7.4"
|
||||
"@vaadin/vaadin-material-styles": "npm:~24.7.4"
|
||||
"@vaadin/vaadin-themable-mixin": "npm:~24.7.4"
|
||||
lit: "npm:^3.0.0"
|
||||
checksum: 10/1a14d94e77ffe68c6d62d5c576b4a6049c2c180b74c9b9114eee5c77f49aacded28ef5a1452938ee7f89151f7db292978156b523ac1c727edf3a464f2eda5b30
|
||||
checksum: 10/f3f185f472577ccd8ac58cfc549e53e45f413c3e39b1e967f19470f391a53e71682de239722357742f67b390579e69127a06d8feccc03da1c80bb1ad37f9341e
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
@ -5080,36 +5080,36 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@vaadin/vaadin-lumo-styles@npm:~24.7.3":
|
||||
version: 24.7.3
|
||||
resolution: "@vaadin/vaadin-lumo-styles@npm:24.7.3"
|
||||
"@vaadin/vaadin-lumo-styles@npm:~24.7.4":
|
||||
version: 24.7.4
|
||||
resolution: "@vaadin/vaadin-lumo-styles@npm:24.7.4"
|
||||
dependencies:
|
||||
"@polymer/polymer": "npm:^3.0.0"
|
||||
"@vaadin/component-base": "npm:~24.7.3"
|
||||
"@vaadin/icon": "npm:~24.7.3"
|
||||
"@vaadin/vaadin-themable-mixin": "npm:~24.7.3"
|
||||
checksum: 10/8a4d14ac3ffe6109c517462e16cb72aebdd7b277c88a96eda6f85925bb9a9d8584753a33e06d64486e2c0d427c339bebaa12cd3b4fe3f9cbb8c19cd716c6c96a
|
||||
"@vaadin/component-base": "npm:~24.7.4"
|
||||
"@vaadin/icon": "npm:~24.7.4"
|
||||
"@vaadin/vaadin-themable-mixin": "npm:~24.7.4"
|
||||
checksum: 10/c068dea090d953c191a1ccfcbad4cbde72d1bc16544f15ff36c6e3b5a8cd4ccdb1a9052c99d599e55dcb0490b0f619f2c3772e376b984f89f619452ebf1ddad8
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@vaadin/vaadin-material-styles@npm:~24.7.3":
|
||||
version: 24.7.3
|
||||
resolution: "@vaadin/vaadin-material-styles@npm:24.7.3"
|
||||
"@vaadin/vaadin-material-styles@npm:~24.7.4":
|
||||
version: 24.7.4
|
||||
resolution: "@vaadin/vaadin-material-styles@npm:24.7.4"
|
||||
dependencies:
|
||||
"@polymer/polymer": "npm:^3.0.0"
|
||||
"@vaadin/component-base": "npm:~24.7.3"
|
||||
"@vaadin/vaadin-themable-mixin": "npm:~24.7.3"
|
||||
checksum: 10/554652d87b41a0090b91c337a495d88e3bca4cdc1daeb2357a413fcb581a761fcba98db00344a5c0df851cb98993758ec03f22f008e38442def4d2378562cf84
|
||||
"@vaadin/component-base": "npm:~24.7.4"
|
||||
"@vaadin/vaadin-themable-mixin": "npm:~24.7.4"
|
||||
checksum: 10/fb5ce1a23edc491ca7baeb7c6c3e1dfbd6c0917073eb9f39fbd1c1a7dd59437df84dc9c21657f06c1df111e6d7c8ada179cb5f5851ae90c7533d1eadf956bd31
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@vaadin/vaadin-themable-mixin@npm:24.7.3, @vaadin/vaadin-themable-mixin@npm:~24.7.3":
|
||||
version: 24.7.3
|
||||
resolution: "@vaadin/vaadin-themable-mixin@npm:24.7.3"
|
||||
"@vaadin/vaadin-themable-mixin@npm:24.7.4, @vaadin/vaadin-themable-mixin@npm:~24.7.4":
|
||||
version: 24.7.4
|
||||
resolution: "@vaadin/vaadin-themable-mixin@npm:24.7.4"
|
||||
dependencies:
|
||||
"@open-wc/dedupe-mixin": "npm:^1.3.0"
|
||||
lit: "npm:^3.0.0"
|
||||
checksum: 10/e176e162fdb374ab4aa5f948f0a4b23f7fa22f617e2fa7b6c73b15df84b57e910d16f2c54add434be30a337313d9a5874945a97c3a86d4989b308a157a8fe4ce
|
||||
checksum: 10/45776bd729530cd38ccd8573ea6b112c46eda2ad6615c9e1cab751609a3063600781cfecb01148c8d8ebfed6beeed10c944a05ca8d05ae4b459d170f15cf6044
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
@ -9272,8 +9272,8 @@ __metadata:
|
||||
"@octokit/rest": "npm:21.1.1"
|
||||
"@replit/codemirror-indentation-markers": "npm:6.5.3"
|
||||
"@rsdoctor/rspack-plugin": "npm:1.0.2"
|
||||
"@rspack/cli": "npm:1.3.6"
|
||||
"@rspack/core": "npm:1.3.6"
|
||||
"@rspack/cli": "npm:1.3.7"
|
||||
"@rspack/core": "npm:1.3.7"
|
||||
"@shoelace-style/shoelace": "npm:2.20.1"
|
||||
"@swc/helpers": "npm:0.5.17"
|
||||
"@thomasloven/round-slider": "npm:0.6.0"
|
||||
@ -9297,8 +9297,8 @@ __metadata:
|
||||
"@types/tar": "npm:6.1.13"
|
||||
"@types/ua-parser-js": "npm:0.7.39"
|
||||
"@types/webspeechapi": "npm:0.0.29"
|
||||
"@vaadin/combo-box": "npm:24.7.3"
|
||||
"@vaadin/vaadin-themable-mixin": "npm:24.7.3"
|
||||
"@vaadin/combo-box": "npm:24.7.4"
|
||||
"@vaadin/vaadin-themable-mixin": "npm:24.7.4"
|
||||
"@vibrant/color": "npm:4.0.0"
|
||||
"@vitest/coverage-v8": "npm:3.1.2"
|
||||
"@vue/web-component-wrapper": "npm:1.3.0"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user