Bring andromeda in line with it's correct colors

Nate Butler created 2 years ago

Change summary

styles/src/themes/andromeda.ts | 59 ++++++++++++++++++++++++++++-------
1 file changed, 47 insertions(+), 12 deletions(-)

Detailed changes

styles/src/themes/andromeda.ts

@@ -1,14 +1,27 @@
 import chroma from "chroma-js"
-import { Meta } from "./common/colorScheme"
+import { Meta, ThemeSyntax } from "./common/colorScheme"
 import { colorRamp, createColorScheme } from "./common/ramps"
 
 const name = "Andromeda"
 
+const color = {
+    text: "#D5CED9",
+    gray: "#5f6167",
+    cyan: "#00e8c6",
+    orange: "#f39c12",
+    yellow: "#FFE66D",
+    pink: "#ff00aa",
+    hotPink: "#f92672",
+    purple: "#c74ded",
+    blue: "#7cb7ff",
+    red: "#ee5d43",
+    green: "#96E072",
+}
+
 const ramps = {
     neutral: chroma
         .scale([
-            "#1E2025",
-            "#23262E",
+            "#24262D",
             "#292E38",
             "#2E323C",
             "#ACA8AE",
@@ -17,17 +30,39 @@ const ramps = {
             "#F7F7F8",
         ])
         .domain([0, 0.15, 0.25, 0.35, 0.7, 0.8, 0.9, 1]),
-    red: colorRamp(chroma("#F92672")),
-    orange: colorRamp(chroma("#F39C12")),
-    yellow: colorRamp(chroma("#FFE66D")),
-    green: colorRamp(chroma("#96E072")),
-    cyan: colorRamp(chroma("#00E8C6")),
-    blue: colorRamp(chroma("#0CA793")),
-    violet: colorRamp(chroma("#8A3FA6")),
-    magenta: colorRamp(chroma("#C74DED")),
+    red: colorRamp(chroma(color.red)),
+    orange: colorRamp(chroma(color.orange)),
+    yellow: colorRamp(chroma(color.yellow)),
+    green: colorRamp(chroma(color.green)),
+    cyan: colorRamp(chroma(color.cyan)),
+    blue: colorRamp(chroma(color.blue)),
+    violet: colorRamp(chroma(color.purple)),
+    magenta: colorRamp(chroma(color.hotPink)),
+}
+
+const syntax: ThemeSyntax = {
+    variable: { color: color.cyan },
+    "variable.special": { color: color.cyan },
+    "punctuation.special": { color: color.red },
+    attribute: { color: color.text },
+    boolean: { color: color.red },
+    comment: { color: color.gray },
+    function: { color: color.yellow },
+    keyword: { color: color.purple },
+    number: { color: color.orange },
+    operator: { color: color.red },
+    primary: { color: color.text },
+    property: { color: color.text },
+    string: { color: color.green },
+    type: { color: color.yellow },
+    title: { color: color.hotPink },
+    linkText: { color: color.red },
+    linkUri: { color: color.purple },
+    "text.literal": { color: color.green },
+    "punctuation.list_marker": { color: color.yellow },
 }
 
-export const dark = createColorScheme(`${name}`, false, ramps)
+export const dark = createColorScheme(`${name}`, false, ramps, syntax)
 
 export const meta: Meta = {
     name,