fixed the subtokens color variation

RodrigoLuglio · Sep 4, 2024 · 0c40c79 · 0c40c79
1 parent 9a53ed3
commit 0c40c79
Show file tree

Hide file tree

Showing 2 changed files with 114 additions and 112 deletions.
diff --git a/next.config.mjs b/next.config.mjs
@@ -1,7 +1,9 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   output: "export",
-  basePath: "/vscode-theme-generator",
+  // basePath: "/vscode-theme-generator",
+  basePath:
+    process.env.NODE_ENV === "production" ? "/vscode-theme-generator" : "",
   images: {
     unoptimized: true,
   },

diff --git a/src/lib/utils/syntaxColors.ts b/src/lib/utils/syntaxColors.ts
@@ -14,8 +14,15 @@ export interface SyntaxColors {
   stringEscape: string;
   comment: string;
   function: string;
+  functionDeclaration: string;
+  functionCall: string;
   variable: string;
+  variableDeclaration: string;
+  variableProperty: string;
   type: string;
+  typeDeclaration: string;
+  typeParameter: string;
+  typeAnnotation: string;
   constant: string;
   class: string;
   number: string;
@@ -46,13 +53,6 @@ export interface SyntaxColors {
   list: string;
   quote: string;
   raw: string;
-  functionDeclaration: string;
-  functionCall: string;
-  variableDeclaration: string;
-  variableProperty: string;
-  typeDeclaration: string;
-  typeParameter: string;
-  typeAnnotation: string;
 }
 
 export function generateSyntaxColors(
@@ -102,51 +102,100 @@ export function generateSyntaxColors(
     stringQuoted:
       lockedColors.stringQuoted ||
       generateColor(
-        (schemeHues[1] + 5) % 360,
+        (schemeHues[1] + 2) % 360,
         syntaxSaturation * 0.95,
-        isDark ? 78 : 42
+        isDark ? 77 : 43
       ),
     stringTemplate:
       lockedColors.stringTemplate ||
       generateColor(
-        (schemeHues[1] + 10) % 360,
-        syntaxSaturation * 1.0,
-        isDark ? 72 : 48
+        (schemeHues[1] - 2) % 360,
+        syntaxSaturation * 0.97,
+        isDark ? 73 : 47
       ),
     stringRegex:
       lockedColors.stringRegex ||
       generateColor(
-        (schemeHues[1] + 15) % 360,
-        syntaxSaturation * 1.05,
-        isDark ? 70 : 50
+        (schemeHues[1] + 4) % 360,
+        syntaxSaturation * 0.93,
+        isDark ? 72 : 48
       ),
     stringEscape:
       lockedColors.stringEscape ||
       generateColor(
-        (schemeHues[1] + 20) % 360,
-        syntaxSaturation * 1.1,
-        isDark ? 68 : 52
+        (schemeHues[1] - 4) % 360,
+        syntaxSaturation * 1.05,
+        isDark ? 70 : 50
       ),
     comment:
       lockedColors.comment ||
       generateColor(schemeHues[2], syntaxSaturation * 0.5, isDark ? 60 : 55),
     function:
       lockedColors.function ||
       generateColor(schemeHues[3], syntaxSaturation, isDark ? 80 : 35),
+    functionDeclaration:
+      lockedColors.functionDeclaration ||
+      generateColor(
+        (schemeHues[3] + 2) % 360,
+        syntaxSaturation * 1.02,
+        isDark ? 81 : 34
+      ),
+    functionCall:
+      lockedColors.functionCall ||
+      generateColor(
+        (schemeHues[3] - 2) % 360,
+        syntaxSaturation * 0.98,
+        isDark ? 79 : 36
+      ),
     variable:
       lockedColors.variable ||
       generateColor(
         (schemeHues[0] + 30) % 360,
         syntaxSaturation * 0.8,
         isDark ? 75 : 40
       ),
+    variableDeclaration:
+      lockedColors.variableDeclaration ||
+      generateColor(
+        (schemeHues[0] + 2) % 360,
+        syntaxSaturation * 0.82,
+        isDark ? 76 : 39
+      ),
+    variableProperty:
+      lockedColors.variableProperty ||
+      generateColor(
+        (schemeHues[0] - 2) % 360,
+        syntaxSaturation * 0.78,
+        isDark ? 74 : 41
+      ),
     type:
       lockedColors.type ||
       generateColor(
         (schemeHues[1] + 30) % 360,
         syntaxSaturation,
         isDark ? 70 : 45
       ),
+    typeDeclaration:
+      lockedColors.typeDeclaration ||
+      generateColor(
+        (schemeHues[1] + 2) % 360,
+        syntaxSaturation * 1.02,
+        isDark ? 71 : 44
+      ),
+    typeParameter:
+      lockedColors.typeParameter ||
+      generateColor(
+        (schemeHues[1] - 2) % 360,
+        syntaxSaturation * 0.98,
+        isDark ? 69 : 46
+      ),
+    typeAnnotation:
+      lockedColors.typeAnnotation ||
+      generateColor(
+        (schemeHues[1] + 4) % 360,
+        syntaxSaturation * 0.96,
+        isDark ? 68 : 47
+      ),
     constant:
       lockedColors.constant ||
       generateColor(
@@ -224,30 +273,30 @@ export function generateSyntaxColors(
     controlReturn:
       lockedColors.controlReturn ||
       generateColor(
-        (schemeHues[0] + 125) % 360,
-        syntaxSaturation * 1.15,
-        isDark ? 70 : 45
+        (schemeHues[0] + 2) % 360,
+        syntaxSaturation * 1.05,
+        isDark ? 66 : 49
       ),
     controlAsyncAwait:
       lockedColors.controlAsyncAwait ||
       generateColor(
-        (schemeHues[0] + 115) % 360,
-        syntaxSaturation * 1.25,
-        isDark ? 60 : 55
+        (schemeHues[0] - 2) % 360,
+        syntaxSaturation * 1.1,
+        isDark ? 64 : 51
       ),
     controlConditional:
       lockedColors.controlConditional ||
       generateColor(
-        (schemeHues[0] + 110) % 360,
-        syntaxSaturation * 1.3,
-        isDark ? 62 : 53
+        (schemeHues[0] + 4) % 360,
+        syntaxSaturation * 1.15,
+        isDark ? 63 : 52
       ),
     controlLoop:
       lockedColors.controlLoop ||
       generateColor(
-        (schemeHues[0] + 135) % 360,
-        syntaxSaturation * 1.18,
-        isDark ? 68 : 47
+        (schemeHues[0] - 4) % 360,
+        syntaxSaturation * 1.08,
+        isDark ? 67 : 48
       ),
     decorator:
       lockedColors.decorator ||
@@ -347,55 +396,6 @@ export function generateSyntaxColors(
         syntaxSaturation * 1.2,
         isDark ? 65 : 50
       ),
-    functionDeclaration:
-      lockedColors.functionDeclaration ||
-      generateColor(
-        (schemeHues[3] + 210) % 360,
-        syntaxSaturation * 0.9,
-        isDark ? 75 : 40
-      ),
-    functionCall:
-      lockedColors.functionCall ||
-      generateColor(
-        (schemeHues[0] + 240) % 360,
-        syntaxSaturation * 1.0,
-        isDark ? 70 : 45
-      ),
-    variableDeclaration:
-      lockedColors.variableDeclaration ||
-      generateColor(
-        (schemeHues[1] + 240) % 360,
-        syntaxSaturation * 1.1,
-        isDark ? 65 : 50
-      ),
-    variableProperty:
-      lockedColors.variableProperty ||
-      generateColor(
-        (schemeHues[2] + 240) % 360,
-        syntaxSaturation * 1.2,
-        isDark ? 60 : 55
-      ),
-    typeDeclaration:
-      lockedColors.typeDeclaration ||
-      generateColor(
-        (schemeHues[3] + 240) % 360,
-        syntaxSaturation * 0.9,
-        isDark ? 75 : 40
-      ),
-    typeParameter:
-      lockedColors.typeParameter ||
-      generateColor(
-        (schemeHues[0] + 270) % 360,
-        syntaxSaturation * 1.0,
-        isDark ? 70 : 45
-      ),
-    typeAnnotation:
-      lockedColors.typeAnnotation ||
-      generateColor(
-        (schemeHues[1] + 270) % 360,
-        syntaxSaturation * 1.1,
-        isDark ? 65 : 50
-      ),
   };
 
   Object.keys(syntaxColors).forEach((key) => {
@@ -457,11 +457,39 @@ export function updateSyntaxColorsWithSaturation(
       currentColors.function,
       newSyntaxSaturation
     ),
+    functionDeclaration: updateColorSaturation(
+      currentColors.functionDeclaration,
+      newSyntaxSaturation * 1.02
+    ),
+    functionCall: updateColorSaturation(
+      currentColors.functionCall,
+      newSyntaxSaturation * 0.98
+    ),
     variable: updateColorSaturation(
       currentColors.variable,
       newSyntaxSaturation * 0.8
     ),
+    variableDeclaration: updateColorSaturation(
+      currentColors.variableDeclaration,
+      newSyntaxSaturation * 0.82
+    ),
+    variableProperty: updateColorSaturation(
+      currentColors.variableProperty,
+      newSyntaxSaturation * 0.78
+    ),
     type: updateColorSaturation(currentColors.type, newSyntaxSaturation),
+    typeDeclaration: updateColorSaturation(
+      currentColors.typeDeclaration,
+      newSyntaxSaturation * 1.02
+    ),
+    typeParameter: updateColorSaturation(
+      currentColors.typeParameter,
+      newSyntaxSaturation * 0.98
+    ),
+    typeAnnotation: updateColorSaturation(
+      currentColors.typeAnnotation,
+      newSyntaxSaturation * 0.96
+    ),
     constant: updateColorSaturation(
       currentColors.constant,
       newSyntaxSaturation * 1.1
@@ -509,19 +537,19 @@ export function updateSyntaxColorsWithSaturation(
     ),
     controlReturn: updateColorSaturation(
       currentColors.controlReturn,
-      newSyntaxSaturation * 1.15
+      newSyntaxSaturation * 1.05
     ),
     controlAsyncAwait: updateColorSaturation(
       currentColors.controlAsyncAwait,
-      newSyntaxSaturation * 1.25
+      newSyntaxSaturation * 1.1
     ),
     controlConditional: updateColorSaturation(
       currentColors.controlConditional,
-      newSyntaxSaturation * 1.3
+      newSyntaxSaturation * 1.15
     ),
     controlLoop: updateColorSaturation(
       currentColors.controlLoop,
-      newSyntaxSaturation * 1.18
+      newSyntaxSaturation * 1.08
     ),
     decorator: updateColorSaturation(
       currentColors.decorator,
@@ -563,33 +591,5 @@ export function updateSyntaxColorsWithSaturation(
       newSyntaxSaturation * 1.0
     ),
     raw: updateColorSaturation(currentColors.raw, newSyntaxSaturation * 1.1),
-    functionDeclaration: updateColorSaturation(
-      currentColors.functionDeclaration,
-      newSyntaxSaturation * 0.9
-    ),
-    functionCall: updateColorSaturation(
-      currentColors.functionCall,
-      newSyntaxSaturation * 1.0
-    ),
-    variableDeclaration: updateColorSaturation(
-      currentColors.variableDeclaration,
-      newSyntaxSaturation * 1.1
-    ),
-    variableProperty: updateColorSaturation(
-      currentColors.variableProperty,
-      newSyntaxSaturation * 1.2
-    ),
-    typeDeclaration: updateColorSaturation(
-      currentColors.typeDeclaration,
-      newSyntaxSaturation * 0.9
-    ),
-    typeParameter: updateColorSaturation(
-      currentColors.typeParameter,
-      newSyntaxSaturation * 1.0
-    ),
-    typeAnnotation: updateColorSaturation(
-      currentColors.typeAnnotation,
-      newSyntaxSaturation * 1.1
-    ),
   };
 }