From 5d68c909f8633d9c5d2910fff1e63b0269f7d0bb Mon Sep 17 00:00:00 2001 From: Wendelin Date: Wed, 23 Jul 2025 16:28:13 +0200 Subject: [PATCH] Add color palettes --- src/common/dom/apply_themes_on_element.ts | 2 +- .../config/hardware/ha-config-hardware.ts | 10 +- .../bluetooth-network-visualization.ts | 20 +- .../zha/zha-network-visualization-page.ts | 14 +- .../zwave_js-network-visualization.ts | 32 +- src/panels/profile/ha-pick-theme-row.ts | 2 +- src/resources/particles.ts | 2 +- .../theme/{ => color}/color.globals.ts | 21 +- src/resources/theme/color/core.globals.ts | 151 ++++++++ src/resources/theme/color/index.ts | 26 ++ src/resources/theme/color/semantic.globals.ts | 353 ++++++++++++++++++ src/resources/theme/theme.ts | 4 +- 12 files changed, 582 insertions(+), 55 deletions(-) rename src/resources/theme/{ => color}/color.globals.ts (97%) create mode 100644 src/resources/theme/color/core.globals.ts create mode 100644 src/resources/theme/color/index.ts create mode 100644 src/resources/theme/color/semantic.globals.ts diff --git a/src/common/dom/apply_themes_on_element.ts b/src/common/dom/apply_themes_on_element.ts index fe1eac8d4b..fd6dffe3dd 100644 --- a/src/common/dom/apply_themes_on_element.ts +++ b/src/common/dom/apply_themes_on_element.ts @@ -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 { diff --git a/src/panels/config/hardware/ha-config-hardware.ts b/src/panels/config/hardware/ha-config-hardware.ts index 0b1beadf79..0f5547723f 100644 --- a/src/panels/config/hardware/ha-config-hardware.ts +++ b/src/panels/config/hardware/ha-config-hardware.ts @@ -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; diff --git a/src/panels/config/integrations/integration-panels/bluetooth/bluetooth-network-visualization.ts b/src/panels/config/integrations/integration-panels/bluetooth/bluetooth-network-visualization.ts index ee4e2bb8fd..562e6553a8 100644 --- a/src/panels/config/integrations/integration-panels/bluetooth/bluetooth-network-visualization.ts +++ b/src/panels/config/integrations/integration-panels/bluetooth/bluetooth-network-visualization.ts @@ -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; diff --git a/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts b/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts index dffe1d8c7f..7ad33565ff 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts @@ -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 { diff --git a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-network-visualization.ts b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-network-visualization.ts index 444b2eb0a8..74e08d335d 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-network-visualization.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-network-visualization.ts @@ -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) { diff --git a/src/panels/profile/ha-pick-theme-row.ts b/src/panels/profile/ha-pick-theme-row.ts index 4c8cb11d57..3ec2abccd9 100644 --- a/src/panels/profile/ha-pick-theme-row.ts +++ b/src/panels/profile/ha-pick-theme-row.ts @@ -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"; diff --git a/src/resources/particles.ts b/src/resources/particles.ts index a2ae5912ab..6574be4fef 100644 --- a/src/resources/particles.ts +++ b/src/resources/particles.ts @@ -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({ diff --git a/src/resources/theme/color.globals.ts b/src/resources/theme/color/color.globals.ts similarity index 97% rename from src/resources/theme/color.globals.ts rename to src/resources/theme/color/color.globals.ts index 56ceb72acb..69a741531a 100644 --- a/src/resources/theme/color.globals.ts +++ b/src/resources/theme/color/color.globals.ts @@ -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"); diff --git a/src/resources/theme/color/core.globals.ts b/src/resources/theme/color/core.globals.ts new file mode 100644 index 0000000000..40cb18d3dd --- /dev/null +++ b/src/resources/theme/color/core.globals.ts @@ -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; + } +`; diff --git a/src/resources/theme/color/index.ts b/src/resources/theme/color/index.ts new file mode 100644 index 0000000000..c67135235b --- /dev/null +++ b/src/resources/theme/color/index.ts @@ -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(), +]; diff --git a/src/resources/theme/color/semantic.globals.ts b/src/resources/theme/color/semantic.globals.ts new file mode 100644 index 0000000000..4209d73055 --- /dev/null +++ b/src/resources/theme/color/semantic.globals.ts @@ -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); + } +`; diff --git a/src/resources/theme/theme.ts b/src/resources/theme/theme.ts index defc01a2d7..3890144d5d 100644 --- a/src/resources/theme/theme.ts +++ b/src/resources/theme/theme.ts @@ -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("");