jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-08-04 15:07:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve neutral color palette (#26381)

Browse Source 
Improve neutral, add docs, removed unused var.
This commit is contained in:
Wendelin 2025-08-04 14:24:42 +02:00 committed by GitHub
parent 5de8d07ce0
commit 99a91e1019
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 23 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/resources/theme/color/core.globals.ts
View File

@ -1,6 +1,13 @@
import { css } from "lit"; import { css } from "lit";
import { extractVars } from "../../../common/style/derived-css-vars"; import { extractVars } from "../../../common/style/derived-css-vars";
/*
* Core color tokens are the foundational color values used throughout the design system.
* These tokens represent raw, brand-independent colors such as grayscale shades, base hues, and accent tones.
* Core tokens shouldn't be tied to any specific UI purpose or role. Instead, they serve as building blocks from which semantic tokens are derived.
* Changes to core tokens will cascade into semantic tokens that reference them, enabling flexible theming and consistent design language.
* Please note that these core tokens are not intended to be used directly in components or styles.
*/
export const coreColorStyles = css` export const coreColorStyles = css`
html { html {
--white: #ffffff; --white: #ffffff;
@ -21,17 +28,17 @@ export const coreColorStyles = css`
--color-primary-95: #eff9fe; --color-primary-95: #eff9fe;
/* neutral */ /* neutral */
--color-neutral-05: #101219; --color-neutral-05: #141414;
--color-neutral-10: #1b1d26; --color-neutral-10: #202020;
--color-neutral-20: #2f323f; --color-neutral-20: #363636;
--color-neutral-30: #424554; --color-neutral-30: #4a4a4a;
--color-neutral-40: #545868; --color-neutral-40: #5e5e5e;
--color-neutral-50: #717584; --color-neutral-50: #7a7a7a;
--color-neutral-60: #9194a2; --color-neutral-60: #989898;
--color-neutral-70: #abaeb9; --color-neutral-70: #b1b1b1;
--color-neutral-80: #c7c9d0; --color-neutral-80: #b1b1b1;
--color-neutral-90: #e4e5e9; --color-neutral-90: #e6e6e6;
--color-neutral-95: #f1f2f3; --color-neutral-95: #f3f3f3;
/* orange */ /* orange */
--color-orange-05: #280700; --color-orange-05: #280700;

8
src/resources/theme/color/semantic.globals.ts
View File

@ -1,5 +1,10 @@
import { css } from "lit"; import { css } from "lit";
/*
* Semantic color tokens are abstractions built on top of core color tokens to represent colors based on their usage or purpose.
* These tokens are named according to their semantic role in the UI (e.g., "primary," "success," "error"), making it easier to maintain consistency and scalability in design.
* Semantic tokens use core tokens to reference the actual color values. This separation allows for adjustments in color schemes without affecting the semantic meaning or intent.
*/
export const semanticColorStyles = css` export const semanticColorStyles = css`
html { html {
--color-overlay-modal: rgba(0, 0, 0, 0.25); --color-overlay-modal: rgba(0, 0, 0, 0.25);
@ -153,9 +158,6 @@ export const semanticColorStyles = css`
--color-on-success-quiet: var(--color-green-50); --color-on-success-quiet: var(--color-green-50);
--color-on-success-normal: var(--color-green-40); --color-on-success-normal: var(--color-green-40);
--color-on-success-loud: var(--white); --color-on-success-loud: var(--white);
/* logo */
--color-logo-primary: var(--color-primary-50);
} }
`; `;