Add syntax overrides for One Light

Nate Butler created 2 years ago

Change summary

styles/src/themes/one-light.ts | 77 +++++++++++++++++++++++++++--------
1 file changed, 58 insertions(+), 19 deletions(-)

Detailed changes

styles/src/themes/one-light.ts

@@ -1,32 +1,71 @@
 import chroma from "chroma-js"
-import { Meta } from "./common/colorScheme"
+import { fontWeights } from "../common";
+import { Meta, ThemeSyntax } from "./common/colorScheme"
 import { colorRamp, createColorScheme } from "./common/ramps"
 
 const name = "One Light"
 
-export const light = createColorScheme(`${name}`, true, {
+const color = {
+    black: "#383A41",
+    grey: "#A2A3A7",
+    red: "#D36050",
+    orange: "#AD6F26",
+    yellow: "#DFC184",
+    green: "#659F58",
+    teal: "#3982B7",
+    blue: "#5B79E3",
+    purple: "#A449AB",
+    magenta: "#994EA6"
+};
+
+const ramps = {
     neutral: chroma
         .scale([
-            "#090a0b",
-            "#202227",
-            "#383a42",
+            "#383A41",
+            "#535456",
             "#696c77",
-            "#a0a1a7",
-            "#e5e5e6",
-            "#f0f0f1",
-            "#fafafa",
+            "#9D9D9F",
+            "#A9A9A9",
+            "#DBDBDC",
+            "#EAEAEB",
+            "#FAFAFA",
         ])
-        .domain([0.05, 0.22, 0.25, 0.45, 0.62, 0.8, 0.9, 1]),
+        .domain([0.05, 0.22, 0.25, 0.45, 0.62, 0.8, 0.9, 1])
+    ,
+    red: colorRamp(chroma(color.red)),
+    orange: colorRamp(chroma(color.orange)),
+    yellow: colorRamp(chroma(color.yellow)),
+    green: colorRamp(chroma(color.green)),
+    cyan: colorRamp(chroma(color.teal)),
+    blue: colorRamp(chroma(color.blue)),
+    violet: colorRamp(chroma(color.purple)),
+    magenta: colorRamp(chroma(color.magenta)),
+};
+
+const syntax: ThemeSyntax = {
+    primary: { color: color.black },
+    "variable.special": { color: color.orange },
+    comment: { color: color.grey },
+    punctuation: { color: color.black },
+    keyword: { color: color.purple },
+    function: { color: color.blue },
+    type: { color: color.teal },
+    variant: { color: color.blue },
+    property: { color: color.red },
+    enum: { color: color.red },
+    operator: { color: color.teal },
+    string: { color: color.green },
+    number: { color: color.orange },
+    boolean: { color: color.orange },
+    title: { color: color.red, weight: fontWeights.normal },
+    "emphasis.strong": {
+        color: color.orange,
+    },
+    linkText: { color: color.blue },
+    linkUri: { color: color.teal },
+}
 
-    red: colorRamp(chroma("#ca1243")),
-    orange: colorRamp(chroma("#d75f00")),
-    yellow: colorRamp(chroma("#c18401")),
-    green: colorRamp(chroma("#50a14f")),
-    cyan: colorRamp(chroma("#0184bc")),
-    blue: colorRamp(chroma("#4078f2")),
-    violet: colorRamp(chroma("#a626a4")),
-    magenta: colorRamp(chroma("#986801")),
-})
+export const light = createColorScheme(name, true, ramps, syntax)
 
 export const meta: Meta = {
     name,