Format

Nate Butler created 2 years ago

Change summary

styles/src/styleTree/editor.ts          | 27 ++++++++++-----
styles/src/themes/common/colorScheme.ts | 46 +++++++++++++-------------
styles/src/themes/common/ramps.ts       |  6 +-
styles/src/themes/one-dark.ts           |  6 +-
styles/src/themes/one-light.ts          | 11 ++---
5 files changed, 52 insertions(+), 44 deletions(-)

Detailed changes

styles/src/styleTree/editor.ts

@@ -1,11 +1,16 @@
 import { fontWeights } from "../common"
 import { withOpacity } from "../utils/color"
-import { ColorScheme, Layer, StyleSets, Syntax, ThemeSyntax } from "../themes/common/colorScheme"
+import {
+    ColorScheme,
+    Layer,
+    StyleSets,
+    Syntax,
+    ThemeSyntax,
+} from "../themes/common/colorScheme"
 import { background, border, borderColor, foreground, text } from "./components"
 import hoverPopover from "./hoverPopover"
 
-import deepmerge from 'deepmerge';
-
+import deepmerge from "deepmerge"
 
 export default function editor(colorScheme: ColorScheme) {
     let layer = colorScheme.highest
@@ -137,12 +142,16 @@ export default function editor(colorScheme: ColorScheme) {
             return defaultSyntax
         }
 
-        return deepmerge<Syntax, Partial<ThemeSyntax>>(defaultSyntax, colorScheme.syntax, {
-            arrayMerge: (destinationArray, sourceArray) => [
-                ...destinationArray,
-                ...sourceArray,
-            ],
-        });
+        return deepmerge<Syntax, Partial<ThemeSyntax>>(
+            defaultSyntax,
+            colorScheme.syntax,
+            {
+                arrayMerge: (destinationArray, sourceArray) => [
+                    ...destinationArray,
+                    ...sourceArray,
+                ],
+            }
+        )
     }
 
     const syntax = createSyntax(colorScheme)

styles/src/themes/common/colorScheme.ts

@@ -102,37 +102,37 @@ export interface Style {
 }
 
 export interface SyntaxHighlightStyle {
-    color: string,
+    color: string
     weight?: FontWeight
     underline?: boolean
     italic?: boolean
 }
 
 export interface Syntax {
-    primary: SyntaxHighlightStyle,
-    "variable.special": SyntaxHighlightStyle,
-    comment: SyntaxHighlightStyle,
-    punctuation: SyntaxHighlightStyle,
-    constant: SyntaxHighlightStyle,
-    keyword: SyntaxHighlightStyle,
-    function: SyntaxHighlightStyle,
-    type: SyntaxHighlightStyle,
-    constructor: SyntaxHighlightStyle,
-    variant: SyntaxHighlightStyle,
-    property: SyntaxHighlightStyle,
-    enum: SyntaxHighlightStyle,
-    operator: SyntaxHighlightStyle,
-    string: SyntaxHighlightStyle,
-    number: SyntaxHighlightStyle,
-    boolean: SyntaxHighlightStyle,
-    predictive: SyntaxHighlightStyle,
-    title: SyntaxHighlightStyle,
-    emphasis: SyntaxHighlightStyle,
-    "emphasis.strong": SyntaxHighlightStyle,
-    linkUri: SyntaxHighlightStyle,
+    primary: SyntaxHighlightStyle
+    "variable.special": SyntaxHighlightStyle
+    comment: SyntaxHighlightStyle
+    punctuation: SyntaxHighlightStyle
+    constant: SyntaxHighlightStyle
+    keyword: SyntaxHighlightStyle
+    function: SyntaxHighlightStyle
+    type: SyntaxHighlightStyle
+    constructor: SyntaxHighlightStyle
+    variant: SyntaxHighlightStyle
+    property: SyntaxHighlightStyle
+    enum: SyntaxHighlightStyle
+    operator: SyntaxHighlightStyle
+    string: SyntaxHighlightStyle
+    number: SyntaxHighlightStyle
+    boolean: SyntaxHighlightStyle
+    predictive: SyntaxHighlightStyle
+    title: SyntaxHighlightStyle
+    emphasis: SyntaxHighlightStyle
+    "emphasis.strong": SyntaxHighlightStyle
+    linkUri: SyntaxHighlightStyle
     linkText: SyntaxHighlightStyle
 }
 
 // HACK: "constructor" as a key in the syntax interface returns an error when a theme tries to use it.
 // For now hack around it by omiting constructor as a valid key for overrides.
-export type ThemeSyntax = Partial<Omit<Syntax, "constructor">>
+export type ThemeSyntax = Partial<Omit<Syntax, "constructor">>

styles/src/themes/common/ramps.ts

@@ -33,14 +33,14 @@ export function createColorScheme(
     // function to any in order to get the colors back out from the original ramps.
     if (isLight) {
         for (var rampName in colorRamps) {
-            ; (ramps as any)[rampName] = chroma.scale(
+            ;(ramps as any)[rampName] = chroma.scale(
                 colorRamps[rampName].colors(100).reverse()
             )
         }
         ramps.neutral = chroma.scale(colorRamps.neutral.colors(100).reverse())
     } else {
         for (var rampName in colorRamps) {
-            ; (ramps as any)[rampName] = chroma.scale(
+            ;(ramps as any)[rampName] = chroma.scale(
                 colorRamps[rampName].colors(100)
             )
         }
@@ -96,7 +96,7 @@ export function createColorScheme(
         modalShadow,
 
         players,
-        syntax
+        syntax,
     }
 }
 

styles/src/themes/one-dark.ts

@@ -14,7 +14,7 @@ const color = {
     teal: "#6FB4C0",
     blue: "#74ADE9",
     purple: "#B478CF",
-};
+}
 
 const ramps = {
     neutral: chroma
@@ -37,7 +37,7 @@ const ramps = {
     blue: colorRamp(chroma(color.blue)),
     violet: colorRamp(chroma(color.purple)),
     magenta: colorRamp(chroma("#be5046")),
-};
+}
 
 const syntax: ThemeSyntax = {
     primary: { color: color.white },
@@ -50,7 +50,7 @@ const syntax: ThemeSyntax = {
     keyword: { color: color.purple },
     boolean: { color: color.orange },
     punctuation: { color: color.white },
-    operator: { color: color.teal }
+    operator: { color: color.teal },
 }
 
 export const dark = createColorScheme(name, false, ramps, syntax)

styles/src/themes/one-light.ts

@@ -1,5 +1,5 @@
 import chroma from "chroma-js"
-import { fontWeights } from "../common";
+import { fontWeights } from "../common"
 import { Meta, ThemeSyntax } from "./common/colorScheme"
 import { colorRamp, createColorScheme } from "./common/ramps"
 
@@ -15,8 +15,8 @@ const color = {
     teal: "#3982B7",
     blue: "#5B79E3",
     purple: "#A449AB",
-    magenta: "#994EA6"
-};
+    magenta: "#994EA6",
+}
 
 const ramps = {
     neutral: chroma
@@ -30,8 +30,7 @@ const ramps = {
             "#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)),
@@ -40,7 +39,7 @@ const ramps = {
     blue: colorRamp(chroma(color.blue)),
     violet: colorRamp(chroma(color.purple)),
     magenta: colorRamp(chroma(color.magenta)),
-};
+}
 
 const syntax: ThemeSyntax = {
     primary: { color: color.black },