Improvement on color generation - color schemes

src/contexts/ThemeContext.tsx

@@ -42,8 +42,8 @@ interface ThemeContextType {
     }
   ) => void;
   updateColorsWithSaturation: (
-    uiSaturation: number,
-    syntaxSaturation: number
+    newUiSaturation: number,
+    newSyntaxSaturation: number
   ) => void;
   toggleColorLock: (colorKey: string) => void;
   setActiveColor: (colorKey: string | null) => void;
@@ -161,27 +161,23 @@ export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({
 
   const updateColorsWithSaturation = useCallback(
     (newUiSaturation: number, newSyntaxSaturation: number) => {
-      const { colors: newColors, schemeHues: newSchemeHues } =
-        updateThemeColorsWithSaturation(
-          colors,
-          newUiSaturation,
-          isDark,
-          baseHue,
-          scheme
-        );
+      const newColors = updateThemeColorsWithSaturation(
+        colors,
+        newUiSaturation,
+        lockedColors
+      );
 
       const newSyntaxColors = updateSyntaxColorsWithSaturation(
         syntaxColors,
         newSyntaxSaturation,
         newColors.BG1,
-        newSchemeHues
+        lockedColors
       );
 
       setColors(newColors);
       setSyntaxColors(newSyntaxColors);
-      setSchemeHues(newSchemeHues);
     },
-    [isDark, baseHue, scheme, colors, syntaxColors]
+    [colors, syntaxColors, lockedColors]
   );
 
   const setUiSaturation = useCallback(

src/lib/utils/syntaxColors.ts

@@ -124,8 +124,8 @@ export function generateSyntaxColors(
     modifier: lockedColors.modifier || generateColor(1, 1, 5),
     other: lockedColors.other || generateColor(3, 1.1, -1),
     language: lockedColors.language || generateColor(0, 1.2, -7),
-    control: lockedColors.control || generateColor(2, 1.15, -5),
-    controlFlow: lockedColors.controlFlow || generateColor(2, 1.1, -3),
+    control: lockedColors.control || generateColor(2, 1.15, -10),
+    controlFlow: lockedColors.controlFlow || generateColor(2, 1.1, -5),
     controlImport: lockedColors.controlImport || generateColor(2, 1.05, -7),
     tag: lockedColors.tag || generateColor(1, 1.1, 5),
     tagPunctuation: lockedColors.tagPunctuation || generateColor(1, 1, 3),
@@ -180,12 +180,76 @@ export function updateSyntaxColorsWithSaturation(
   currentColors: SyntaxColors,
   newSyntaxSaturation: number,
   backgroundColor: string,
-  schemeHues: number[]
+  lockedColors: Set<string>
 ): SyntaxColors {
-  return generateSyntaxColors(
-    backgroundColor,
-    schemeHues,
-    newSyntaxSaturation,
-    currentColors
-  );
+  const updateColorSaturation = (
+    color: string,
+    saturationMultiplier: number
+  ) => {
+    const hsl = Color(color).hsl();
+    const newSaturation = Math.min(
+      100,
+      newSyntaxSaturation * saturationMultiplier
+    );
+    return Color.hsl(hsl.hue(), newSaturation, hsl.lightness()).hex();
+  };
+
+  const updatedColors: SyntaxColors = { ...currentColors };
+
+  const saturationMultipliers = {
+    keyword: 1.1,
+    comment: 0.5,
+    function: 1.05,
+    functionCall: 1,
+    variable: 0.9,
+    variableDeclaration: 0.95,
+    variableProperty: 0.85,
+    type: 1.05,
+    typeParameter: 1,
+    constant: 1.15,
+    class: 1.1,
+    parameter: 0.9,
+    property: 0.95,
+    operator: 0.7,
+    storage: 1.05,
+    punctuation: 0.5,
+    punctuationQuote: 0.45,
+    punctuationBrace: 0.55,
+    punctuationComma: 0.4,
+    selector: 1.05,
+    modifier: 1,
+    other: 1.1,
+    language: 1.2,
+    control: 1.15,
+    controlFlow: 1.1,
+    controlImport: 1.05,
+    tag: 1.1,
+    tagPunctuation: 1,
+    attribute: 0.95,
+    support: 1.15,
+    unit: 1.1,
+    datetime: 1.05,
+  };
+
+  Object.keys(updatedColors).forEach((key) => {
+    if (!lockedColors.has(key)) {
+      updatedColors[key as keyof SyntaxColors] = updateColorSaturation(
+        currentColors[key as keyof SyntaxColors],
+        saturationMultipliers[key as keyof typeof saturationMultipliers]
+      );
+    }
+  });
+
+  // Ensure readability
+  Object.keys(updatedColors).forEach((key) => {
+    if (!lockedColors.has(key)) {
+      updatedColors[key as keyof SyntaxColors] = ensureReadability(
+        updatedColors[key as keyof SyntaxColors],
+        backgroundColor,
+        5.5
+      );
+    }
+  });
+
+  return updatedColors;
 }

src/lib/utils/themeColors.ts

@@ -186,50 +186,46 @@ export function generateThemeColors(
 export function updateThemeColorsWithSaturation(
   currentColors: ColorAliases,
   newUiSaturation: number,
-  isDark: boolean,
-  baseHue: number,
-  scheme: ColorScheme
-): { colors: ColorAliases; schemeHues: number[] } {
-  const updateColorSaturation = (color: string, saturation: number) => {
+  lockedColors: Set<string>
+): ColorAliases {
+  const updateColorSaturation = (
+    color: string,
+    saturationMultiplier: number
+  ) => {
     const hsl = Color(color).hsl();
-    return Color.hsl(hsl.hue(), saturation, hsl.lightness()).hex();
+    const newSaturation = Math.min(100, newUiSaturation * saturationMultiplier);
+    return Color.hsl(hsl.hue(), newSaturation, hsl.lightness()).hex();
   };
 
-  const schemeHues = generateSchemeColors(baseHue, scheme);
+  const updatedColors: ColorAliases = { ...currentColors };
 
-  const updatedColors: ColorAliases = {
-    BG1: updateColorSaturation(currentColors.BG1, newUiSaturation * 0.1),
-    BG2: updateColorSaturation(currentColors.BG2, newUiSaturation * 0.15),
-    BG3: updateColorSaturation(currentColors.BG3, newUiSaturation * 0.2),
-    FG1: updateColorSaturation(currentColors.FG1, newUiSaturation * 0.05),
-    FG2: updateColorSaturation(currentColors.FG2, newUiSaturation * 0.1),
-    FG3: updateColorSaturation(currentColors.FG3, newUiSaturation * 0.05),
-    AC1: updateColorSaturation(currentColors.AC1, newUiSaturation * 1.2),
-    AC2: updateColorSaturation(currentColors.AC2, newUiSaturation * 1.1),
-    BORDER: updateColorSaturation(currentColors.BORDER, newUiSaturation * 0.2),
-    INFO: updateColorSaturation(currentColors.INFO, newUiSaturation * 0.2),
-    ERROR: updateColorSaturation(currentColors.ERROR, newUiSaturation * 1.2),
-    WARNING: updateColorSaturation(
-      currentColors.WARNING,
-      newUiSaturation * 1.1
-    ),
-    SUCCESS: updateColorSaturation(
-      currentColors.SUCCESS,
-      newUiSaturation * 0.9
-    ),
-    lineHighlight: updateColorSaturation(
-      currentColors.lineHighlight,
-      newUiSaturation * 0.3
-    ),
-    selection: updateColorSaturation(
-      currentColors.selection,
-      newUiSaturation * 0.4
-    ),
-    findMatch: updateColorSaturation(
-      currentColors.findMatch,
-      newUiSaturation * 0.6
-    ),
+  const saturationMultipliers = {
+    BG1: 0.1,
+    BG2: 0.15,
+    BG3: 0.2,
+    FG1: 0.05,
+    FG2: 0.1,
+    FG3: 0.05,
+    AC1: 1.2,
+    AC2: 1.1,
+    BORDER: 0.2,
+    INFO: 0.2,
+    ERROR: 1.2,
+    WARNING: 1.1,
+    SUCCESS: 0.9,
+    lineHighlight: 0.3,
+    selection: 0.4,
+    findMatch: 0.6,
   };
 
-  return { colors: updatedColors, schemeHues };
+  Object.keys(updatedColors).forEach((key) => {
+    if (!lockedColors.has(key)) {
+      updatedColors[key as keyof ColorAliases] = updateColorSaturation(
+        currentColors[key as keyof ColorAliases],
+        saturationMultipliers[key as keyof typeof saturationMultipliers]
+      );
+    }
+  });
+
+  return updatedColors;
 }