binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-5772] chore: theme switcher and editor colors enhancements (#8436)

Browse source
This commit is contained in:
Anmol Singh Bhatia 2025-12-23 18:09:26 +05:30 • committed by GitHub
parent 6cd85a7095
commit 2bc7080d24
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 142 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

30
packages/utils/src/theme/constants.ts
View file

@ -112,3 +112,33 @@ export type SaturationCurve = "ease-in-out" | "linear";
* Default saturation curve
*/
export const DEFAULT_SATURATION_CURVE: SaturationCurve = "ease-in-out";
/**
* Editor color backgrounds for light mode
* Used for stickies and editor elements
*/
export const EDITOR_COLORS_LIGHT = {
gray: "#d6d6d8",
peach: "#ffd5d7",
pink: "#fdd4e3",
orange: "#ffe3cd",
green: "#c3f0de",
"light-blue": "#c5eff9",
"dark-blue": "#c9dafb",
purple: "#e3d8fd",
};
/**
* Editor color backgrounds for dark mode
* Used for stickies and editor elements
*/
export const EDITOR_COLORS_DARK = {
gray: "#404144",
peach: "#593032",
pink: "#562e3d",
orange: "#583e2a",
green: "#1d4a3b",
"light-blue": "#1f495c",
"dark-blue": "#223558",
purple: "#3d325a",
};

13
packages/utils/src/theme/theme-application.ts
View file

@ -5,7 +5,7 @@
import { hexToOKLCH, oklchToCSS, getRelativeLuminance, getPerceptualBrightness } from "./color-conversion";
import type { OKLCH } from "./color-conversion";
import { ALPHA_MAPPING } from "./constants";
import { ALPHA_MAPPING, EDITOR_COLORS_LIGHT, EDITOR_COLORS_DARK } from "./constants";
import { generateThemePalettes } from "./palette-generator";
import { getBrandMapping, getNeutralMapping, invertPalette } from "./theme-inversion";
@ -129,6 +129,12 @@ export function applyCustomTheme(brandColor: string, neutralColor: string, mode:
const { textColor, iconColor } = getOnColorTextColors(brandColor, "wcag");
themeElement.style.setProperty(`--text-color-on-color`, oklchToCSS(textColor));
themeElement.style.setProperty(`--text-color-icon-on-color`, oklchToCSS(iconColor));
// Apply editor color backgrounds based on mode
const editorColors = mode === "dark" ? EDITOR_COLORS_DARK : EDITOR_COLORS_LIGHT;
Object.entries(editorColors).forEach(([color, value]) => {
themeElement.style.setProperty(`--editor-colors-${color}-background`, value);
});
}
/**
@ -173,4 +179,9 @@ export function clearCustomTheme(): void {
themeElement.style.removeProperty(`--text-color-on-color`);
themeElement.style.removeProperty(`--text-color-icon-on-color`);
// Clear editor color background overrides
Object.keys(EDITOR_COLORS_LIGHT).forEach((color) => {
themeElement.style.removeProperty(`--editor-colors-${color}-background`);
});
}