Fine tuning some colors and schemes

RodrigoLuglio · Sep 19, 2024 · 2a44bc4 · 2a44bc4
1 parent d36207b
commit 2a44bc4
Show file tree

Hide file tree

Showing 8 changed files with 524 additions and 239 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -27,7 +27,8 @@
     --chart-3: 197 37% 24%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
-    --radius: 0.5rem}
+    --radius: 0.5rem;
+  }
   .dark {
     --background: 222.2 84% 4.9%;
     --foreground: 210 40% 98%;
@@ -52,7 +53,8 @@
     --chart-2: 160 60% 45%;
     --chart-3: 30 80% 55%;
     --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%}
+    --chart-5: 340 75% 55%;
+  }
 }
 @layer base {
   * {

diff --git a/src/components/ThemeControls.tsx b/src/components/ThemeControls.tsx
@@ -1,24 +1,24 @@
-import React from "react";
-import { ColorScheme } from "@/lib/utils/colorUtils";
-import { useTheme } from "@/contexts/ThemeContext";
+import React, { use, useEffect } from 'react'
+import { ColorScheme } from '@/lib/utils/colorUtils'
+import { useTheme } from '@/contexts/ThemeContext'
 
-import { Button } from "@/components/ui/button";
-import { Checkbox } from "@/components/ui/checkbox";
-import { Slider } from "@/components/ui/slider";
+import { Button } from '@/components/ui/button'
+import { Checkbox } from '@/components/ui/checkbox'
+import { Slider } from '@/components/ui/slider'
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select";
+} from '@/components/ui/select'
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { cn } from "@/lib/utils";
+} from '@/components/ui/tooltip'
+import { cn } from '@/lib/utils'
 
 const ThemeControls: React.FC = () => {
   const {
@@ -35,24 +35,28 @@ const ThemeControls: React.FC = () => {
     generateColors,
     lockedColors,
     regenerateAnsiColors,
-  } = useTheme();
+  } = useTheme()
+
+  useEffect(() => {
+    handleRandomize()
+  }, [])
 
   const handleRandomize = () => {
-    const newBaseHue = Math.floor(Math.random() * 360);
-    const newUiSaturation = Math.floor(Math.random() * 100);
-    const newSyntaxSaturation = Math.floor(Math.random() * 100);
+    const newBaseHue = Math.floor(Math.random() * 360)
+    const newUiSaturation = Math.floor(Math.random() * 100)
+    const newSyntaxSaturation = Math.floor(Math.random() * 100)
     const schemeValues = Object.values(ColorScheme).filter(
-      (value) => typeof value === "number"
-    ) as number[];
+      (value) => typeof value === 'number'
+    ) as number[]
     const newScheme = schemeValues[
       Math.floor(Math.random() * schemeValues.length)
-    ] as ColorScheme;
+    ] as ColorScheme
 
     // Update the state values immediately
-    setBaseHue(newBaseHue);
-    setUiSaturation(newUiSaturation);
-    setSyntaxSaturation(newSyntaxSaturation);
-    setScheme(newScheme);
+    setBaseHue(newBaseHue)
+    setUiSaturation(newUiSaturation)
+    setSyntaxSaturation(newSyntaxSaturation)
+    setScheme(newScheme)
 
     // Then generate colors with these new values
     generateColors({
@@ -63,14 +67,15 @@ const ThemeControls: React.FC = () => {
       scheme: newScheme,
       lockedColors: Array.from(lockedColors),
       forceRegenerate: true,
-    });
-  };
+    })
+  }
 
   const handleRegenerateUnlockedColors = () => {
     // Add small random variations to the current values
-    const hueVariation = Math.floor(Math.random() * 30) - 15; // -15 to +15
-    const saturationVariation = Math.floor(Math.random() * 20) - 10; // -10 to +10
+    const hueVariation = Math.floor(Math.random() * 30) - 15 // -15 to +15
+    const saturationVariation = Math.floor(Math.random() * 20) - 10 // -10 to +10
 
+    console.log('Scheme Regenerate: ', scheme)
     generateColors({
       isDark,
       baseHue: (baseHue + hueVariation + 360) % 360, // Ensure it stays within 0-359
@@ -85,23 +90,23 @@ const ThemeControls: React.FC = () => {
       scheme,
       lockedColors: Array.from(lockedColors),
       forceRegenerate: true, // Add this flag to force regeneration
-    });
-  };
+    })
+  }
 
   const getSaturationGradient = (baseHue: number) => `
     linear-gradient(to right, 
       hsl(${baseHue}, 0%, 50%), 
       hsl(${baseHue}, 100%, 50%)
     )
-  `;
+  `
 
   const handleSchemeChange = (newScheme: ColorScheme) => {
-    setScheme(newScheme);
+    setScheme(newScheme)
     generateColors({
       scheme: newScheme,
       forceRegenerate: true,
-    });
-  };
+    })
+  }
 
   return (
     <TooltipProvider>
@@ -302,7 +307,7 @@ const ThemeControls: React.FC = () => {
         </Tooltip>
       </div>
     </TooltipProvider>
-  );
-};
+  )
+}
 
-export default ThemeControls;
+export default ThemeControls
diff --git a/src/contexts/ThemeContext.tsx b/src/contexts/ThemeContext.tsx
@@ -6,7 +6,11 @@ import React, {
   useRef,
   useEffect,
 } from 'react'
-import { ColorScheme, ThemeGenerationOptions } from '@/lib/utils/colorUtils'
+import {
+  ColorScheme,
+  generateSchemeColors,
+  ThemeGenerationOptions,
+} from '@/lib/utils/colorUtils'
 import {
   ColorAliases,
   generateThemeColors,
@@ -19,7 +23,6 @@ import {
 } from '@/lib/utils/syntaxColors'
 import { AnsiColors, generateAnsiColors } from '@/lib/utils/ansiColors'
 import { initialColors, initialSyntaxColors } from '@/lib/utils/exportTheme'
-import { generateAdditionalHues } from '@/lib/utils/colorUtils'
 
 interface ThemeContextType {
   isDark: boolean
@@ -104,8 +107,6 @@ export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({
           const {
             colors: newColors,
             schemeHues: newSchemeHues,
-            ac1Hue,
-            ac2Hue,
             scheme: newScheme,
           } = generateThemeColors(
             fullOptions,
@@ -114,23 +115,15 @@ export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({
             ) as Partial<ColorAliases>,
             options.forceRegenerate
           )
-
-          // Generate additional hues based on AC1 and AC2, respecting the color scheme
-          const ac1AdditionalHues = generateAdditionalHues(ac1Hue, newScheme)
-          const ac2AdditionalHues = generateAdditionalHues(ac2Hue, newScheme)
-
-          // Extend schemeHues with hues derived from AC1 and AC2
-          const extendedSchemeHues = [
-            ...newSchemeHues,
-            ac1Hue,
-            ...ac1AdditionalHues,
-            ac2Hue,
-            ...ac2AdditionalHues,
-          ]
+          console.log('Scheme returned from generateThemeColors: ', newScheme)
+          console.log(
+            'Scheme hues returned from generateThemeColors: ',
+            newSchemeHues
+          )
 
           const newSyntaxColors = generateSyntaxColors(
             newColors.BG1,
-            extendedSchemeHues,
+            newSchemeHues,
             fullOptions.syntaxSaturation,
             Object.fromEntries(
               Object.entries(syntaxColors).filter(([key]) =>