mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-30 04:36:36 +00:00
Add color palettes
This commit is contained in:
Wendelin
parent
0a33240d7a
commit
5d68c909f8
@ -1,5 +1,5 @@
|
||||
import type { ThemeVars } from "../../data/ws-themes";
|
||||
import { darkColorVariables } from "../../resources/theme/color.globals";
|
||||
import { darkColorVariables } from "../../resources/theme/color";
|
||||
import { derivedStyles } from "../../resources/theme/theme";
|
||||
import type { HomeAssistant } from "../../types";
|
||||
import {
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import { mdiPower } from "@mdi/js";
|
||||
import type { SeriesOption } from "echarts/types/dist/shared";
|
||||
import type { UnsubscribeFunc } from "home-assistant-js-websocket";
|
||||
import type { PropertyValues } from "lit";
|
||||
import { css, html, LitElement, nothing } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import type { SeriesOption } from "echarts/types/dist/shared";
|
||||
import memoizeOne from "memoize-one";
|
||||
import { isComponentLoaded } from "../../../common/config/is_component_loaded";
|
||||
import { round } from "../../../common/number/round";
|
||||
@ -12,9 +12,9 @@ import "../../../components/buttons/ha-progress-button";
|
||||
import "../../../components/chart/ha-chart-base";
|
||||
import "../../../components/ha-alert";
|
||||
import "../../../components/ha-card";
|
||||
import "../../../components/ha-md-list-item";
|
||||
import "../../../components/ha-icon-button";
|
||||
import "../../../components/ha-icon-next";
|
||||
import "../../../components/ha-md-list-item";
|
||||
import "../../../components/ha-settings-row";
|
||||
import type { ConfigEntry } from "../../../data/config_entries";
|
||||
import { subscribeConfigEntries } from "../../../data/config_entries";
|
||||
@ -23,6 +23,7 @@ import type {
|
||||
SystemStatusStreamMessage,
|
||||
} from "../../../data/hardware";
|
||||
import { BOARD_NAMES } from "../../../data/hardware";
|
||||
import { extractApiErrorMessage } from "../../../data/hassio/common";
|
||||
import type { HassioHassOSInfo } from "../../../data/hassio/host";
|
||||
import { fetchHassioHassOsInfo } from "../../../data/hassio/host";
|
||||
import { scanUSBDevices } from "../../../data/usb";
|
||||
@ -30,13 +31,12 @@ 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 { DefaultPrimaryColor } from "../../../resources/theme/color.globals";
|
||||
import type { ECOption } from "../../../resources/echarts";
|
||||
import { haStyle } from "../../../resources/styles";
|
||||
import { DefaultPrimaryColor } from "../../../resources/theme/color/color.globals";
|
||||
import type { HomeAssistant } from "../../../types";
|
||||
import { hardwareBrandsUrl } from "../../../util/brands-url";
|
||||
import { showhardwareAvailableDialog } from "./show-dialog-hardware-available";
|
||||
import { extractApiErrorMessage } from "../../../data/hassio/common";
|
||||
import type { ECOption } from "../../../resources/echarts";
|
||||
|
||||
const DATASAMPLES = 60;
|
||||
|
||||
|
||||
@ -1,18 +1,20 @@
|
||||
import { html, LitElement, css } from "lit";
|
||||
import type { CSSResultGroup } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import type { UnsubscribeFunc } from "home-assistant-js-websocket";
|
||||
import type {
|
||||
CallbackDataParams,
|
||||
TopLevelFormatterParams,
|
||||
} from "echarts/types/dist/shared";
|
||||
import type { UnsubscribeFunc } from "home-assistant-js-websocket";
|
||||
import type { CSSResultGroup } from "lit";
|
||||
import { css, html, LitElement } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import memoizeOne from "memoize-one";
|
||||
import type { HomeAssistant, Route } from "../../../../../types";
|
||||
import { relativeTime } from "../../../../../common/datetime/relative_time";
|
||||
import { navigate } from "../../../../../common/navigate";
|
||||
import { throttle } from "../../../../../common/util/throttle";
|
||||
import "../../../../../components/chart/ha-network-graph";
|
||||
import type {
|
||||
NetworkData,
|
||||
NetworkNode,
|
||||
NetworkLink,
|
||||
NetworkNode,
|
||||
} from "../../../../../components/chart/ha-network-graph";
|
||||
import type {
|
||||
BluetoothDeviceData,
|
||||
@ -24,11 +26,9 @@ import {
|
||||
} from "../../../../../data/bluetooth";
|
||||
import type { DeviceRegistryEntry } from "../../../../../data/device_registry";
|
||||
import "../../../../../layouts/hass-subpage";
|
||||
import { colorVariables } from "../../../../../resources/theme/color.globals";
|
||||
import { navigate } from "../../../../../common/navigate";
|
||||
import { colorVariables } from "../../../../../resources/theme/color/color.globals";
|
||||
import type { HomeAssistant, Route } from "../../../../../types";
|
||||
import { bluetoothAdvertisementMonitorTabs } from "./bluetooth-advertisement-monitor";
|
||||
import { relativeTime } from "../../../../../common/datetime/relative_time";
|
||||
import { throttle } from "../../../../../common/util/throttle";
|
||||
|
||||
const UPDATE_THROTTLE_TIME = 10000;
|
||||
|
||||
|
||||
@ -1,26 +1,26 @@
|
||||
import "@material/mwc-button";
|
||||
import type { CSSResultGroup, PropertyValues } from "lit";
|
||||
import { css, html, LitElement } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { mdiRefresh } from "@mdi/js";
|
||||
import type {
|
||||
CallbackDataParams,
|
||||
TopLevelFormatterParams,
|
||||
} from "echarts/types/dist/shared";
|
||||
import { mdiRefresh } from "@mdi/js";
|
||||
import type { CSSResultGroup, PropertyValues } from "lit";
|
||||
import { css, html, LitElement } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { navigate } from "../../../../../common/navigate";
|
||||
import "../../../../../components/chart/ha-network-graph";
|
||||
import type {
|
||||
NetworkData,
|
||||
NetworkNode,
|
||||
NetworkLink,
|
||||
NetworkNode,
|
||||
} from "../../../../../components/chart/ha-network-graph";
|
||||
import type { ZHADevice } from "../../../../../data/zha";
|
||||
import { fetchDevices, refreshTopology } from "../../../../../data/zha";
|
||||
import "../../../../../layouts/hass-tabs-subpage";
|
||||
import { colorVariables } from "../../../../../resources/theme/color/color.globals";
|
||||
import type { HomeAssistant, Route } from "../../../../../types";
|
||||
import { formatAsPaddedHex } from "./functions";
|
||||
import { zhaTabs } from "./zha-config-dashboard";
|
||||
import { colorVariables } from "../../../../../resources/theme/color.globals";
|
||||
import { navigate } from "../../../../../common/navigate";
|
||||
|
||||
@customElement("zha-network-visualization-page")
|
||||
export class ZHANetworkVisualizationPage extends LitElement {
|
||||
|
||||
@ -1,33 +1,33 @@
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { css, html, LitElement } from "lit";
|
||||
import memoizeOne from "memoize-one";
|
||||
import type {
|
||||
CallbackDataParams,
|
||||
TopLevelFormatterParams,
|
||||
} from "echarts/types/dist/shared";
|
||||
import type { HomeAssistant, Route } from "../../../../../types";
|
||||
import { configTabs } from "./zwave_js-config-router";
|
||||
import { SubscribeMixin } from "../../../../../mixins/subscribe-mixin";
|
||||
import { css, html, LitElement } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import memoizeOne from "memoize-one";
|
||||
import { navigate } from "../../../../../common/navigate";
|
||||
import { debounce } from "../../../../../common/util/debounce";
|
||||
import "../../../../../components/chart/ha-network-graph";
|
||||
import type {
|
||||
NetworkData,
|
||||
NetworkLink,
|
||||
NetworkNode,
|
||||
} from "../../../../../components/chart/ha-network-graph";
|
||||
import "../../../../../components/chart/ha-network-graph";
|
||||
import "../../../../../layouts/hass-tabs-subpage";
|
||||
import type { DeviceRegistryEntry } from "../../../../../data/device_registry";
|
||||
import type {
|
||||
ZWaveJSNodeStatisticsUpdatedMessage,
|
||||
ZWaveJSNodeStatus,
|
||||
} from "../../../../../data/zwave_js";
|
||||
import {
|
||||
fetchZwaveNetworkStatus,
|
||||
NodeStatus,
|
||||
subscribeZwaveNodeStatistics,
|
||||
} from "../../../../../data/zwave_js";
|
||||
import type {
|
||||
ZWaveJSNodeStatisticsUpdatedMessage,
|
||||
ZWaveJSNodeStatus,
|
||||
} from "../../../../../data/zwave_js";
|
||||
import { colorVariables } from "../../../../../resources/theme/color.globals";
|
||||
import type { DeviceRegistryEntry } from "../../../../../data/device_registry";
|
||||
import { debounce } from "../../../../../common/util/debounce";
|
||||
import { navigate } from "../../../../../common/navigate";
|
||||
import "../../../../../layouts/hass-tabs-subpage";
|
||||
import { SubscribeMixin } from "../../../../../mixins/subscribe-mixin";
|
||||
import { colorVariables } from "../../../../../resources/theme/color/color.globals";
|
||||
import type { HomeAssistant, Route } from "../../../../../types";
|
||||
import { configTabs } from "./zwave_js-config-router";
|
||||
|
||||
@customElement("zwave_js-network-visualization")
|
||||
export class ZWaveJSNetworkVisualization extends SubscribeMixin(LitElement) {
|
||||
|
||||
@ -15,7 +15,7 @@ import "../../components/ha-textfield";
|
||||
import {
|
||||
DefaultAccentColor,
|
||||
DefaultPrimaryColor,
|
||||
} from "../../resources/theme/color.globals";
|
||||
} from "../../resources/theme/color/color.globals";
|
||||
import type { HomeAssistant } from "../../types";
|
||||
import { documentationUrl } from "../../util/documentation-url";
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { tsParticles } from "@tsparticles/engine";
|
||||
import { loadLinksPreset } from "@tsparticles/preset-links";
|
||||
import { DefaultPrimaryColor } from "./theme/color.globals";
|
||||
import { DefaultPrimaryColor } from "./theme/color/color.globals";
|
||||
|
||||
loadLinksPreset(tsParticles).then(() => {
|
||||
tsParticles.load({
|
||||
|
||||
@ -1,24 +1,23 @@
|
||||
import { css } from "lit";
|
||||
import {
|
||||
extractDerivedVars,
|
||||
extractVar,
|
||||
extractVars,
|
||||
} from "../../common/style/derived-css-vars";
|
||||
} from "../../../common/style/derived-css-vars";
|
||||
|
||||
export const colorStyles = css`
|
||||
html {
|
||||
/* text */
|
||||
--primary-text-color: #212121;
|
||||
--secondary-text-color: #727272;
|
||||
--primary-text-color: var(--color-text-primary);
|
||||
--secondary-text-color: var(--color-text-secondary);
|
||||
--text-primary-color: #ffffff;
|
||||
--text-light-primary-color: #212121;
|
||||
--text-light-primary-color: var(--color-text-disabled);
|
||||
--disabled-text-color: #bdbdbd;
|
||||
|
||||
/* main interface colors */
|
||||
--primary-color: #03a9f4;
|
||||
--dark-primary-color: #0288d1;
|
||||
--light-primary-color: #b3e5fc;
|
||||
--accent-color: #ff9800;
|
||||
--primary-color: var(--color-primary-50);
|
||||
--dark-primary-color: var(--color-primary-40);
|
||||
--light-primary-color: var(--color-primary-70);
|
||||
--accent-color: var(--color-orange-60);
|
||||
--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);
|
||||
@ -303,7 +302,7 @@ export const colorStyles = css`
|
||||
}
|
||||
`;
|
||||
|
||||
const darkColorStyles = css`
|
||||
export const darkColorStyles = css`
|
||||
html {
|
||||
--primary-background-color: #111111;
|
||||
--card-background-color: #1c1c1c;
|
||||
@ -359,9 +358,7 @@ const darkColorStyles = css`
|
||||
--disabled-color: #464646;
|
||||
}
|
||||
`;
|
||||
export const colorDerivedVariables = extractDerivedVars(colorStyles);
|
||||
export const colorVariables = extractVars(colorStyles);
|
||||
export const darkColorVariables = extractVars(darkColorStyles);
|
||||
|
||||
export const DefaultPrimaryColor = extractVar(colorStyles, "primary-color");
|
||||
export const DefaultAccentColor = extractVar(colorStyles, "accent-color");
|
||||
151
src/resources/theme/color/core.globals.ts
Normal file
151
src/resources/theme/color/core.globals.ts
Normal file
@ -0,0 +1,151 @@
|
||||
import { css } from "lit";
|
||||
|
||||
export const coreColorStyles = css`
|
||||
html {
|
||||
--white: #ffffff;
|
||||
--black: #000000;
|
||||
--transparent-none: rgba(255, 255, 255, 0);
|
||||
|
||||
/* primary */
|
||||
--color-primary-05: #001721;
|
||||
--color-primary-10: #002e3e;
|
||||
--color-primary-20: #004156;
|
||||
--color-primary-30: #006787;
|
||||
--color-primary-40: #009ac7;
|
||||
--color-primary-50: #18bcf2;
|
||||
--color-primary-60: #37c8fd;
|
||||
--color-primary-70: #7bd4fb;
|
||||
--color-primary-80: #b9e6fc;
|
||||
--color-primary-90: #b9e6fc;
|
||||
--color-primary-95: #eff9fe;
|
||||
|
||||
/* neutral */
|
||||
--color-neutral-05: #101219;
|
||||
--color-neutral-10: #1b1d26;
|
||||
--color-neutral-20: #2f323f;
|
||||
--color-neutral-30: #424554;
|
||||
--color-neutral-40: #545868;
|
||||
--color-neutral-50: #717584;
|
||||
--color-neutral-60: #9194a2;
|
||||
--color-neutral-70: #abaeb9;
|
||||
--color-neutral-80: #c7c9d0;
|
||||
--color-neutral-90: #e4e5e9;
|
||||
--color-neutral-95: #f1f2f3;
|
||||
|
||||
/* indigo */
|
||||
--color-indigo-05: #0d0a3a;
|
||||
--color-indigo-10: #181255;
|
||||
--color-indigo-20: #292381;
|
||||
--color-indigo-30: #3933a7;
|
||||
--color-indigo-40: #4945cb;
|
||||
--color-indigo-50: #6163f2;
|
||||
--color-indigo-60: #808aff;
|
||||
--color-indigo-70: #9da9ff;
|
||||
--color-indigo-80: #bcc7ff;
|
||||
--color-indigo-90: #dfe5ff;
|
||||
--color-indigo-95: #f0f2ff;
|
||||
|
||||
/* purple */
|
||||
--color-purple-05: #1e0532;
|
||||
--color-purple-10: #2d0b48;
|
||||
--color-purple-20: #491870;
|
||||
--color-purple-30: #612692;
|
||||
--color-purple-40: #7936b3;
|
||||
--color-purple-50: #9951db;
|
||||
--color-purple-60: #b678f5;
|
||||
--color-purple-70: #ca99ff;
|
||||
--color-purple-80: #ddbdff;
|
||||
--color-purple-90: #eedfff;
|
||||
--color-purple-95: #f7f0ff;
|
||||
|
||||
/* orange */
|
||||
--color-orange-05: #280700;
|
||||
--color-orange-10: #3b0f00;
|
||||
--color-orange-20: #5e1c00;
|
||||
--color-orange-30: #7e2900;
|
||||
--color-orange-40: #9d3800;
|
||||
--color-orange-50: #c94e00;
|
||||
--color-orange-60: #f36d00;
|
||||
--color-orange-70: #ff9342;
|
||||
--color-orange-80: #ffbb89;
|
||||
--color-orange-90: #ffe0c8;
|
||||
--color-orange-95: #fff0e4;
|
||||
|
||||
/* pink */
|
||||
--color-pink-05: #28041a;
|
||||
--color-pink-10: #3c0828;
|
||||
--color-pink-20: #5e1342;
|
||||
--color-pink-30: #7d1e58;
|
||||
--color-pink-40: #9e2a6c;
|
||||
--color-pink-50: #c84382;
|
||||
--color-pink-60: #e66ba3;
|
||||
--color-pink-70: #f78dbf;
|
||||
--color-pink-80: #fcb5d8;
|
||||
--color-pink-90: #feddf0;
|
||||
--color-pink-95: #feeff9;
|
||||
|
||||
/* red */
|
||||
--color-red-05: #2a040b;
|
||||
--color-red-10: #3e0913;
|
||||
--color-red-20: #631323;
|
||||
--color-red-30: #8a132c;
|
||||
--color-red-40: #b30532;
|
||||
--color-red-50: #dc3146;
|
||||
--color-red-60: #f3676c;
|
||||
--color-red-70: #fd8f90;
|
||||
--color-red-80: #ffb8b6;
|
||||
--color-red-90: #ffdedc;
|
||||
--color-red-95: #fff0ef;
|
||||
|
||||
/* yellow */
|
||||
--color-yellow-05: #220c00;
|
||||
--color-yellow-10: #331600;
|
||||
--color-yellow-20: #532600;
|
||||
--color-yellow-30: #6f3601;
|
||||
--color-yellow-40: #8c4602;
|
||||
--color-yellow-50: #b45f04;
|
||||
--color-yellow-60: #da7e00;
|
||||
--color-yellow-70: #ef9d00;
|
||||
--color-yellow-80: #fac22b;
|
||||
--color-yellow-90: #ffe495;
|
||||
--color-yellow-95: #fef3cd;
|
||||
|
||||
/* green */
|
||||
--color-green-05: #031608;
|
||||
--color-green-10: #052310;
|
||||
--color-green-20: #0a3a1d --color-green-30: #0a5027;
|
||||
--color-green-40: #036730;
|
||||
--color-green-50: #00883c;
|
||||
--color-green-60: #00ac49;
|
||||
--color-green-70: #5dc36f;
|
||||
--color-green-80: #93da98;
|
||||
--color-green-90: #c2f2c1;
|
||||
--color-green-95: #e3f9e3;
|
||||
|
||||
/* cyan */
|
||||
--color-cyan-05: #00151b;
|
||||
--color-cyan-10: #002129;
|
||||
--color-cyan-20: #003844;
|
||||
--color-cyan-30: #014c5b;
|
||||
--color-cyan-40: #026274;
|
||||
--color-cyan-50: #078098;
|
||||
--color-cyan-60: #00a3c0;
|
||||
--color-cyan-70: #2fbedc;
|
||||
--color-cyan-80: #7fd6ec;
|
||||
--color-cyan-90: #c5ecf7;
|
||||
--color-cyan-95: #e3f6fb;
|
||||
|
||||
/* blue */
|
||||
--color-blue-05: #000f35;
|
||||
--color-blue-10: #001a4e;
|
||||
--color-blue-20: #002d77;
|
||||
--color-blue-30: #003f9c;
|
||||
--color-blue-40: #0053c0;
|
||||
--color-blue-50: #0071ec;
|
||||
--color-blue-60: #3e96ff;
|
||||
--color-blue-70: #6eb3ff;
|
||||
--color-blue-80: #9fceff;
|
||||
--color-blue-90: #d1e8ff;
|
||||
--color-blue-95: #e8f3ff;
|
||||
}
|
||||
`;
|
||||
26
src/resources/theme/color/index.ts
Normal file
26
src/resources/theme/color/index.ts
Normal file
@ -0,0 +1,26 @@
|
||||
import {
|
||||
extractDerivedVars,
|
||||
extractVars,
|
||||
} from "../../../common/style/derived-css-vars";
|
||||
import { colorStyles, darkColorStyles } from "./color.globals";
|
||||
import { coreColorStyles } from "./core.globals";
|
||||
import {
|
||||
darkSemanticColorStyles,
|
||||
semanticColorStyles,
|
||||
} from "./semantic.globals";
|
||||
|
||||
export const darkColorVariables = {
|
||||
...extractVars(darkColorStyles),
|
||||
...extractVars(darkSemanticColorStyles),
|
||||
};
|
||||
|
||||
export const colorDerivedVariables = {
|
||||
...extractDerivedVars(colorStyles),
|
||||
...extractDerivedVars(semanticColorStyles),
|
||||
};
|
||||
|
||||
export const colorStylesCollection = [
|
||||
coreColorStyles.toString(),
|
||||
semanticColorStyles.toString(),
|
||||
colorStyles.toString(),
|
||||
];
|
||||
353
src/resources/theme/color/semantic.globals.ts
Normal file
353
src/resources/theme/color/semantic.globals.ts
Normal file
@ -0,0 +1,353 @@
|
||||
import { css } from "lit";
|
||||
|
||||
export const semanticColorStyles = css`
|
||||
html {
|
||||
--color-overlay-modal: rgba(0, 0, 0, 0.25);
|
||||
--color-focus: var(--color-orange-60);
|
||||
|
||||
/* surface */
|
||||
--color-surface-lower: var(--color-neutral-90);
|
||||
--color-surface-low: var(--color-neutral-95);
|
||||
--color-surface-default: var(--white);
|
||||
|
||||
/* text */
|
||||
--color-text-primary: var(--color-neutral-05);
|
||||
--color-text-secondary: var(--color-neutral-40);
|
||||
--color-text-disabled: var(--color-neutral-60);
|
||||
--color-text-link: var(--color-primary-40);
|
||||
|
||||
/* text purple */
|
||||
--color-text-purple-type: var(--color-neutral-05);
|
||||
--color-text-purple-property: var(--color-purple-40);
|
||||
--color-text-purple-target: var(--color-primary-40);
|
||||
|
||||
/* border primary */
|
||||
--color-border-quiet: var(--color-primary-80);
|
||||
--color-border-normal: var(--color-primary-70);
|
||||
--color-border-loud: var(--color-primary-40);
|
||||
|
||||
/* border neutral */
|
||||
--color-border-neutral-quiet: var(--color-neutral-80);
|
||||
--color-border-neutral-normal: var(--color-neutral-60);
|
||||
--color-border-neutral-loud: var(--color-neutral-40);
|
||||
|
||||
/* border danger */
|
||||
--color-border-danger-quiet: var(--color-red-80);
|
||||
--color-border-danger-normal: var(--color-red-70);
|
||||
--color-border-danger-loud: var(--color-red-40);
|
||||
|
||||
/* border warning */
|
||||
--color-border-warning-quiet: var(--color-orange-80);
|
||||
--color-border-warning-normal: var(--color-orange-70);
|
||||
--color-border-warning-loud: var(--color-orange-40);
|
||||
|
||||
/* border success */
|
||||
--color-border-success-quiet: var(--color-green-80);
|
||||
--color-border-success-normal: var(--color-green-70);
|
||||
--color-border-success-loud: var(--color-green-40);
|
||||
|
||||
/* border purple */
|
||||
--color-border-purple-quiet: var(--color-purple-80);
|
||||
--color-border-purple-normal: var(--color-purple-70);
|
||||
--color-border-purple-loud: var(--color-purple-40);
|
||||
|
||||
/* fill primary quiet */
|
||||
--color-fill-primary-quiet-resting: var(--color-primary-95);
|
||||
--color-fill-primary-quiet-hover: var(--color-primary-90);
|
||||
--color-fill-primary-quiet-active: var(--color-primary-95);
|
||||
|
||||
/* fill primary normal */
|
||||
--color-fill-primary-normal-resting: var(--color-primary-90);
|
||||
--color-fill-primary-normal-hover: var(--color-primary-80);
|
||||
--color-fill-primary-normal-active: var(--color-primary-90);
|
||||
|
||||
/* fill primary loud */
|
||||
--color-fill-primary-loud-resting: var(--color-primary-40);
|
||||
--color-fill-primary-loud-hover: var(--color-primary-30);
|
||||
--color-fill-primary-loud-active: var(--color-primary-40);
|
||||
|
||||
/* fill neutral quiet */
|
||||
--color-fill-neutral-quiet-resting: var(--color-neutral-95);
|
||||
--color-fill-neutral-quiet-hover: var(--color-neutral-90);
|
||||
--color-fill-neutral-quiet-active: var(--color-neutral-95);
|
||||
|
||||
/* fill neutral normal */
|
||||
--color-fill-neutral-normal-resting: var(--color-neutral-90);
|
||||
--color-fill-neutral-normal-hover: var(--color-neutral-80);
|
||||
--color-fill-neutral-normal-active: var(--color-neutral-90);
|
||||
|
||||
/* fill neutral loud */
|
||||
--color-fill-neutral-loud-resting: var(--color-neutral-40);
|
||||
--color-fill-neutral-loud-hover: var(--color-neutral-30);
|
||||
--color-fill-neutral-loud-active: var(--color-neutral-40);
|
||||
|
||||
/* fill disabled quiet */
|
||||
--color-fill-disabled-quiet-resting: var(--color-neutral-95);
|
||||
|
||||
/* fill disabled normal */
|
||||
--color-fill-disabled-normal-resting: var(--color-neutral-95);
|
||||
|
||||
/* fill disabled loud */
|
||||
--color-fill-disabled-loud-resting: var(--color-neutral-80);
|
||||
|
||||
/* fill danger quiet */
|
||||
--color-fill-danger-quiet-resting: var(--color-red-95);
|
||||
--color-fill-danger-quiet-hover: var(--color-red-90);
|
||||
--color-fill-danger-quiet-active: var(--color-red-95);
|
||||
|
||||
/* fill danger normal */
|
||||
--color-fill-danger-normal-resting: var(--color-red-90);
|
||||
--color-fill-danger-normal-hover: var(--color-red-80);
|
||||
--color-fill-danger-normal-active: var(--color-red-90);
|
||||
|
||||
/* fill danger loud */
|
||||
--color-fill-danger-loud-resting: var(--color-red-50);
|
||||
--color-fill-danger-loud-hover: var(--color-red-40);
|
||||
--color-fill-danger-loud-active: var(--color-red-50);
|
||||
|
||||
/* fill warning quiet */
|
||||
--color-fill-warning-quiet-resting: var(--color-orange-95);
|
||||
--color-fill-warning-quiet-hover: var(--color-orange-90);
|
||||
--color-fill-warning-quiet-active: var(--color-orange-95);
|
||||
|
||||
/* fill warning normal */
|
||||
--color-fill-warning-normal-resting: var(--color-orange-90);
|
||||
--color-fill-warning-normal-hover: var(--color-orange-80);
|
||||
--color-fill-warning-normal-active: var(--color-orange-90);
|
||||
|
||||
/* fill warning loud */
|
||||
--color-fill-warning-loud-resting: var(--color-orange-70);
|
||||
--color-fill-warning-loud-hover: var(--color-orange-50);
|
||||
--color-fill-warning-loud-active: var(--color-orange-70);
|
||||
|
||||
/* fill success quiet */
|
||||
--color-fill-success-quiet-resting: var(--color-green-95);
|
||||
--color-fill-success-quiet-hover: var(--color-green-90);
|
||||
--color-fill-success-quiet-active: var(--color-green-95);
|
||||
|
||||
/* fill success normal */
|
||||
--color-fill-success-normal-resting: var(--color-green-90);
|
||||
--color-fill-success-normal-hover: var(--color-green-80);
|
||||
--color-fill-success-normal-active: var(--color-green-90);
|
||||
|
||||
/* fill success loud */
|
||||
--color-fill-success-loud-resting: var(--color-green-50);
|
||||
--color-fill-success-loud-hover: var(--color-green-40);
|
||||
--color-fill-success-loud-active: var(--color-green-50);
|
||||
|
||||
/* fill purple quiet */
|
||||
--color-fill-purple-quiet-resting: var(--color-purple-95);
|
||||
--color-fill-purple-quiet-hover: var(--color-purple-90);
|
||||
--color-fill-purple-quiet-active: var(--color-purple-95);
|
||||
|
||||
/* fill purple normal */
|
||||
--color-fill-purple-normal-resting: var(--color-purple-90);
|
||||
--color-fill-purple-normal-hover: var(--color-purple-80);
|
||||
--color-fill-purple-normal-active: var(--color-purple-90);
|
||||
|
||||
/* fill purple loud */
|
||||
--color-fill-purple-loud-resting: var(--color-purple-50);
|
||||
--color-fill-purple-loud-hover: var(--color-purple-40);
|
||||
--color-fill-purple-loud-active: var(--color-purple-50);
|
||||
|
||||
/* on primary */
|
||||
--color-on-primary-quiet: var(--color-primary-50);
|
||||
--color-on-primary-normal: var(--color-primary-40);
|
||||
--color-on-primary-loud: var(--white);
|
||||
|
||||
/* on neutral */
|
||||
--color-on-neutral-quiet: var(--color-neutral-50);
|
||||
--color-on-neutral-normal: var(--color-neutral-40);
|
||||
--color-on-neutral-loud: var(--white);
|
||||
|
||||
/* on disabled */
|
||||
--color-on-disabled-quiet: var(--color-neutral-80);
|
||||
--color-on-disabled-normal: var(--color-neutral-70);
|
||||
--color-on-disabled-loud: var(--color-neutral-95);
|
||||
|
||||
/* on danger */
|
||||
--color-on-danger-quiet: var(--color-red-50);
|
||||
--color-on-danger-normal: var(--color-red-40);
|
||||
--color-on-danger-loud: var(--white);
|
||||
|
||||
/* on warning */
|
||||
--color-on-warning-quiet: var(--color-orange-50);
|
||||
--color-on-warning-normal: var(--color-orange-40);
|
||||
--color-on-warning-loud: var(--white);
|
||||
|
||||
/* on success */
|
||||
--color-on-success-quiet: var(--color-green-50);
|
||||
--color-on-success-normal: var(--color-green-40);
|
||||
--color-on-success-loud: var(--white);
|
||||
|
||||
/* on purple */
|
||||
--color-on-purple-quiet: var(--color-purple-30);
|
||||
--color-on-purple-normal: var(--color-purple-40);
|
||||
--color-on-purple-loud: var(--white);
|
||||
|
||||
/* logo */
|
||||
--color-logo-primary: var(--color-primary-50);
|
||||
}
|
||||
`;
|
||||
|
||||
export const darkSemanticColorStyles = css`
|
||||
html {
|
||||
/* surface */
|
||||
--color-surface-lower: var(--black);
|
||||
--color-surface-low: var(--color-neutral-05);
|
||||
--color-surface-default: var(--color-neutral-10);
|
||||
|
||||
/* text */
|
||||
--color-text-primary: var(--white);
|
||||
--color-text-secondary: var(--color-neutral-80);
|
||||
--color-text-link: var(--color-primary-60);
|
||||
|
||||
/* text purple */
|
||||
--color-text-purple-type: var(--white);
|
||||
--color-text-purple-property: var(--color-purple-60);
|
||||
--color-text-purple-target: var(--color-primary-60);
|
||||
|
||||
/* border primary */
|
||||
--color-border-normal: var(--color-primary-50);
|
||||
|
||||
/* border neutral */
|
||||
--color-border-neutral-quiet: var(--color-neutral-40);
|
||||
--color-border-neutral-normal: var(--color-neutral-50);
|
||||
--color-border-neutral-loud: var(--color-neutral-70);
|
||||
|
||||
/* border danger */
|
||||
--color-border-danger-normal: var(--color-red-50);
|
||||
--color-border-danger-loud: var(--color-red-50);
|
||||
|
||||
/* border warning */
|
||||
--color-border-warning-normal: var(--color-orange-50);
|
||||
--color-border-warning-loud: var(--color-orange-50);
|
||||
|
||||
/* border purple */
|
||||
--color-border-purple-normal: var(--color-purple-50);
|
||||
--color-border-purple-loud: var(--color-purple-50);
|
||||
|
||||
/* fill primary quiet */
|
||||
--color-fill-primary-quiet-resting: var(--color-primary-05);
|
||||
--color-fill-primary-quiet-hover: var(--color-primary-10);
|
||||
--color-fill-primary-quiet-active: var(--color-primary-05);
|
||||
|
||||
/* fill primary normal */
|
||||
--color-fill-primary-normal-resting: var(--color-primary-10);
|
||||
--color-fill-primary-normal-hover: var(--color-primary-20);
|
||||
--color-fill-primary-normal-active: var(--color-primary-10);
|
||||
|
||||
/* fill neutral quiet */
|
||||
--color-fill-neutral-quiet-resting: var(--color-neutral-05);
|
||||
--color-fill-neutral-quiet-hover: var(--color-neutral-10);
|
||||
--color-fill-neutral-quiet-active: var(--color-neutral-00);
|
||||
|
||||
/* fill neutral normal */
|
||||
--color-fill-neutral-normal-resting: var(--color-neutral-10);
|
||||
--color-fill-neutral-normal-hover: var(--color-neutral-20);
|
||||
--color-fill-neutral-normal-active: var(--color-neutral-10);
|
||||
|
||||
/* fill disabled quiet */
|
||||
--color-fill-disabled-quiet-resting: var(--color-neutral-10);
|
||||
|
||||
/* fill disabled normal */
|
||||
--color-fill-disabled-normal-resting: var(--color-neutral-20);
|
||||
|
||||
/* fill disabled loud */
|
||||
--color-fill-disabled-loud-resting: var(--color-neutral-30);
|
||||
|
||||
/* fill danger quiet */
|
||||
--color-fill-danger-quiet-resting: var(--color-red-05);
|
||||
--color-fill-danger-quiet-hover: var(--color-red-10);
|
||||
--color-fill-danger-quiet-active: var(--color-red-05);
|
||||
|
||||
/* fill danger normal */
|
||||
--color-fill-danger-normal-resting: var(--color-red-10);
|
||||
--color-fill-danger-normal-hover: var(--color-red-20);
|
||||
--color-fill-danger-normal-active: var(--color-red-10);
|
||||
|
||||
/* fill danger loud */
|
||||
--color-fill-danger-loud-resting: var(--color-red-40);
|
||||
--color-fill-danger-loud-hover: var(--color-red-30);
|
||||
--color-fill-danger-loud-active: var(--color-red-40);
|
||||
|
||||
/* fill warning quiet */
|
||||
--color-fill-warning-quiet-resting: var(--color-orange-05);
|
||||
--color-fill-warning-quiet-hover: var(--color-orange-10);
|
||||
--color-fill-warning-quiet-active: var(--color-orange-05);
|
||||
|
||||
/* fill warning normal */
|
||||
--color-fill-warning-normal-resting: var(--color-orange-10);
|
||||
--color-fill-warning-normal-hover: var(--color-orange-20);
|
||||
--color-fill-warning-normal-active: var(--color-orange-10);
|
||||
|
||||
/* fill warning loud */
|
||||
--color-fill-warning-loud-resting: var(--color-orange-40);
|
||||
--color-fill-warning-loud-hover: var(--color-orange-30);
|
||||
--color-fill-warning-loud-active: var(--color-orange-40);
|
||||
|
||||
/* fill success quiet */
|
||||
--color-fill-success-quiet-resting: var(--color-green-05);
|
||||
--color-fill-success-quiet-hover: var(--color-green-10);
|
||||
--color-fill-success-quiet-active: var(--color-green-05);
|
||||
|
||||
/* fill success normal */
|
||||
--color-fill-success-normal-resting: var(--color-green-10);
|
||||
--color-fill-success-normal-hover: var(--color-green-20);
|
||||
--color-fill-success-normal-active: var(--color-green-10);
|
||||
|
||||
/* fill success loud */
|
||||
--color-fill-success-loud-resting: var(--color-green-40);
|
||||
--color-fill-success-loud-hover: var(--color-green-30);
|
||||
--color-fill-success-loud-active: var(--color-green-40);
|
||||
|
||||
/* fill purple quiet */
|
||||
--color-fill-purple-quiet-resting: var(--color-purple-05);
|
||||
--color-fill-purple-quiet-hover: var(--color-purple-10);
|
||||
--color-fill-purple-quiet-active: var(--color-purple-05);
|
||||
|
||||
/* fill purple normal */
|
||||
--color-fill-purple-normal-resting: var(--color-purple-10);
|
||||
--color-fill-purple-normal-hover: var(--color-purple-20);
|
||||
--color-fill-purple-normal-active: var(--color-purple-10);
|
||||
|
||||
/* fill purple loud */
|
||||
--color-fill-purple-loud-resting: var(--color-purple-40);
|
||||
--color-fill-purple-loud-hover: var(--color-purple-30);
|
||||
--color-fill-purple-loud-active: var(--color-purple-40);
|
||||
|
||||
/* on primary */
|
||||
--color-on-primary-quiet: var(--color-primary-70);
|
||||
--color-on-primary-normal: var(--color-primary-80);
|
||||
|
||||
/* on neutral */
|
||||
--color-on-neutral-quiet: var(--color-neutral-70);
|
||||
--color-on-neutral-normal: var(--color-neutral-60);
|
||||
--color-on-neutral-loud: var(--white);
|
||||
|
||||
/* on disabled */
|
||||
--color-on-disabled-quiet: var(--color-neutral-40);
|
||||
--color-on-disabled-normal: var(--color-neutral-50);
|
||||
--color-on-disabled-loud: var(--color-neutral-50);
|
||||
|
||||
/* on danger */
|
||||
--color-on-danger-quiet: var(--color-red-70);
|
||||
--color-on-danger-normal: var(--color-red-60);
|
||||
--color-on-danger-loud: var(--white);
|
||||
|
||||
/* on warning */
|
||||
--color-on-warning-quiet: var(--color-orange-70);
|
||||
--color-on-warning-normal: var(--color-orange-60);
|
||||
--color-on-warning-loud: var(--white);
|
||||
|
||||
/* on success */
|
||||
--color-on-success-quiet: var(--color-green-70);
|
||||
--color-on-success-normal: var(--color-green-60);
|
||||
--color-on-success-loud: var(--white);
|
||||
|
||||
/* on purple */
|
||||
--color-on-purple-quiet: var(--color-purple-70);
|
||||
--color-on-purple-normal: var(--color-purple-60);
|
||||
--color-on-purple-loud: var(--white);
|
||||
}
|
||||
`;
|
||||
@ -1,5 +1,5 @@
|
||||
import { fontStyles } from "../roboto";
|
||||
import { colorDerivedVariables, colorStyles } from "./color.globals";
|
||||
import { colorDerivedVariables, colorStylesCollection } from "./color";
|
||||
import { mainDerivedVariables, mainStyles } from "./main.globals";
|
||||
import {
|
||||
typographyDerivedVariables,
|
||||
@ -9,7 +9,7 @@ import {
|
||||
export const themeStyles = [
|
||||
mainStyles.toString(),
|
||||
typographyStyles.toString(),
|
||||
colorStyles.toString(),
|
||||
...colorStylesCollection,
|
||||
fontStyles.toString(),
|
||||
].join("");
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user