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

packages/propel/src/icons/actions/index.ts

@@ -8,3 +8,4 @@ export * from "./filter-applied-icon";
 export * from "./search-icon";
 export * from "./preferences-icon";
 export * from "./copy-link";
+export * from "./upgrade-icon";

packages/propel/src/icons/actions/upgrade-icon.tsx

@@ -0,0 +1,15 @@
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function UpgradeIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1ZM5.00457 7.55003L7.55003 5.00457C7.79853 4.75605 8.20147 4.75605 8.44997 5.00457L10.9954 7.55003C11.2439 7.79853 11.2439 8.20147 10.9954 8.44997C10.7469 8.69847 10.344 8.69847 10.0955 8.44997L8.63636 6.99085V10.5455C8.63636 10.8969 8.35146 11.1818 8 11.1818C7.64854 11.1818 7.36364 10.8969 7.36364 10.5455V6.99085L5.90452 8.44997C5.65601 8.69847 5.25309 8.69847 5.00457 8.44997C4.75605 8.20147 4.75605 7.79853 5.00457 7.55003Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}

packages/propel/src/icons/constants.tsx

@@ -9,6 +9,7 @@ export const ActionsIconsMap = [
   { icon: <Icon name="action.search" />, title: "SearchIcon" },
   { icon: <Icon name="action.preferences" />, title: "PreferencesIcon" },
   { icon: <Icon name="action.copy-link" />, title: "CopyLinkIcon" },
+  { icon: <Icon name="action.upgrade" />, title: "UpgradeIcon" },
 ];
 
 export const ArrowsIconsMap = [

packages/propel/src/icons/registry.ts

@@ -5,6 +5,7 @@ import {
   FilterIcon,
   PreferencesIcon,
   SearchIcon,
+  UpgradeIcon,
 } from "./actions";
 import { AddIcon } from "./actions/add-icon";
 import { CloseIcon } from "./actions/close-icon";
@@ -134,6 +135,7 @@ export const ICON_REGISTRY = {
   "action.search": SearchIcon,
   "action.preferences": PreferencesIcon,
   "action.copy-link": CopyLinkIcon,
+  "action.upgrade": UpgradeIcon,
 
   // Arrow icons
   "arrow.chevron-down": ChevronDownIcon,

packages/utils/src/theme/constants.ts

@@ -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",
+};

packages/utils/src/theme/theme-application.ts

@@ -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`);
+  });
 }