Fix extract default primary color

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;
 

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, string>
+): 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<string, string>
+) => {
   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) => {

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");

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);