added randomize with few hues option

RodrigoLuglio · Sep 20, 2024 · 93dbb38 · 93dbb38
1 parent beb5b3b
commit 93dbb38
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 12 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -51,7 +51,7 @@ const ThemeGenerator = () => {
   return (
     <div className="container mx-auto p-4">
       <h1 className="text-2xl font-bold mb-4">VS Code Theme Generator</h1>
-      <div className="flex gap-10">
+      <div className="flex flex-wrap lg:flex-nowrap gap-10">
         <div className="flex flex-col gap-4 w-full lg:w-7/12">
           <div className="flex gap-10 items-end">
             <ThemeControls />

diff --git a/src/components/ThemeControls.tsx b/src/components/ThemeControls.tsx
@@ -181,7 +181,7 @@ const ThemeControls: React.FC = () => {
                   <Button
                     className="w-full text-xs"
                     size="sm"
-                    onClick={() => handleRandomize(true)}
+                    onClick={() => handleRandomize(false)}
                   >
                     Randomize Full
                   </Button>
@@ -200,7 +200,7 @@ const ThemeControls: React.FC = () => {
                   <Button
                     className="w-full text-xs"
                     size="sm"
-                    onClick={() => handleRandomize(false)}
+                    onClick={() => handleRandomize(true)}
                   >
                     Randomize with Few Colors
                   </Button>

diff --git a/src/lib/utils/themeColors.ts b/src/lib/utils/themeColors.ts
@@ -201,16 +201,21 @@ export function generateThemeColors(
   const ac1Hue = Color(colors.AC1).hue()
   const ac2Hue = Color(colors.AC2).hue()
 
-  const ac1AdditionalHues = generateSchemeColors(ac1Hue, scheme)
-  const ac2AdditionalHues = generateSchemeColors(ac2Hue, scheme)
-  console.log('AC1 additional hues: ', ac1AdditionalHues)
-  console.log('AC2 additional hues: ', ac2AdditionalHues)
+  let updatedSchemeHues = [...schemeHues]
+
+  if (!few) {
+    const ac1AdditionalHues = generateSchemeColors(ac1Hue, scheme)
+    const ac2AdditionalHues = generateSchemeColors(ac2Hue, scheme)
+    console.log('AC1 additional hues: ', ac1AdditionalHues)
+    console.log('AC2 additional hues: ', ac2AdditionalHues)
+
+    updatedSchemeHues = [
+      ...schemeHues,
+      ...ac1AdditionalHues,
+      ...ac2AdditionalHues,
+    ]
+  }
 
-  const updatedSchemeHues = [
-    ...schemeHues,
-    ...ac1AdditionalHues,
-    ...ac2AdditionalHues,
-  ]
   console.log('ALL SCHEME HUES: ', updatedSchemeHues)
 
   return { colors, schemeHues: updatedSchemeHues, scheme }