From 8063a602240f29afef81503914b41f9bff6f0b2a Mon Sep 17 00:00:00 2001 From: Wendelin Date: Thu, 24 Jul 2025 14:50:55 +0200 Subject: [PATCH] Fix extract default primary color --- src/common/color/palette.ts | 3 -- src/common/style/derived-css-vars.ts | 47 +++++++++++++++++++++- src/resources/theme/color/color.globals.ts | 19 +++++---- src/resources/theme/color/core.globals.ts | 3 ++ 4 files changed, 60 insertions(+), 12 deletions(-) diff --git a/src/common/color/palette.ts b/src/common/color/palette.ts index 4a6cafdeec..e68b6d6cfb 100644 --- a/src/common/color/palette.ts +++ b/src/common/color/palette.ts @@ -1,8 +1,5 @@ import { formatHex, oklch, wcagLuminance, type Oklch } from "culori"; -export const DARK_COLOR_STEPS = [5, 10, 20, 30, 40]; -export const LIGHT_COLOR_STEPS = [60, 70, 80, 90, 95]; - const MIN_LUMINANCE = 0.3; const MAX_LUMINANCE = 0.6; diff --git a/src/common/style/derived-css-vars.ts b/src/common/style/derived-css-vars.ts index 3b2add7e1b..14fe45ae78 100644 --- a/src/common/style/derived-css-vars.ts +++ b/src/common/style/derived-css-vars.ts @@ -18,7 +18,43 @@ const _extractCssVars = ( return variables; }; -export const extractVar = (css: CSSResult, varName: string) => { +/** + * Recursively resolves a CSS variable reference from a base variable map. + * + * If the value of the specified variable in `baseVars` is itself a CSS variable reference + * (i.e., starts with `var(`), this function will recursively resolve the reference until + * it finds a concrete value or reaches an undefined variable. + * + * @param varName - The name of the CSS variable to resolve. + * @param baseVars - A record mapping variable names to their values or references. + * @returns The resolved value of the variable, or `undefined` if not found. + */ +const extractVarFromBase = ( + varName: string, + baseVars: Record +): string | undefined => { + if (baseVars[varName] && baseVars[varName].startsWith("var(")) { + const baseVarName = baseVars[varName] + .substring(6, baseVars[varName].length - 1) + .trim(); + return extractVarFromBase(baseVarName, baseVars); + } + return baseVars[varName]; +}; + +/** + * Extracts the value of a CSS custom property (CSS variable) from a given CSSResult object. + * + * @param css - The CSSResult object containing the CSS string to search. + * @param varName - The name of the CSS variable (without the leading '--') to extract. + * @param baseVars - (Optional) A record of base variable names and their values, used to resolve variables that reference other variables via `var()`. + * @returns The value of the CSS variable if found, otherwise an empty string. If the variable references another variable and `baseVars` is provided, attempts to resolve it from `baseVars`. + */ +export const extractVar = ( + css: CSSResult, + varName: string, + baseVars?: Record +) => { const cssString = css.toString(); const search = `--${varName}:`; const startIndex = cssString.indexOf(search); @@ -27,10 +63,17 @@ export const extractVar = (css: CSSResult, varName: string) => { } const endIndex = cssString.indexOf(";", startIndex + search.length); - return cssString + const value = cssString .substring(startIndex + search.length, endIndex) .replaceAll("}", "") .trim(); + + if (baseVars && value.startsWith("var(")) { + const baseVarName = value.substring(6, value.length - 1).trim(); + return extractVarFromBase(baseVarName, baseVars) || value; + } + + return value; }; export const extractVars = (css: CSSResult) => { diff --git a/src/resources/theme/color/color.globals.ts b/src/resources/theme/color/color.globals.ts index 69a741531a..163129d34b 100644 --- a/src/resources/theme/color/color.globals.ts +++ b/src/resources/theme/color/color.globals.ts @@ -3,6 +3,7 @@ import { extractVar, extractVars, } from "../../../common/style/derived-css-vars"; +import { coreColorVariables } from "./core.globals"; export const colorStyles = css` html { @@ -10,20 +11,20 @@ export const colorStyles = css` --primary-text-color: var(--color-text-primary); --secondary-text-color: var(--color-text-secondary); --text-primary-color: #ffffff; - --text-light-primary-color: var(--color-text-disabled); + --text-light-primary-color: #212121; --disabled-text-color: #bdbdbd; /* main interface colors */ - --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); + --primary-color: var(--color-primary-40); + --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-primary-color: 0, 154, 199; --rgb-accent-color: 255, 152, 0; --rgb-primary-text-color: 33, 33, 33; --rgb-secondary-text-color: 114, 114, 114; @@ -360,5 +361,9 @@ export const darkColorStyles = css` `; export const colorVariables = extractVars(colorStyles); -export const DefaultPrimaryColor = extractVar(colorStyles, "primary-color"); +export const DefaultPrimaryColor = extractVar( + colorStyles, + "primary-color", + coreColorVariables +); 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 index 40cb18d3dd..18669ae49d 100644 --- a/src/resources/theme/color/core.globals.ts +++ b/src/resources/theme/color/core.globals.ts @@ -1,4 +1,5 @@ import { css } from "lit"; +import { extractVars } from "../../../common/style/derived-css-vars"; export const coreColorStyles = css` html { @@ -149,3 +150,5 @@ export const coreColorStyles = css` --color-blue-95: #e8f3ff; } `; + +export const coreColorVariables = extractVars(coreColorStyles);