Format

styles/src/theme/create_theme.ts

@@ -2,7 +2,7 @@ import { Scale, Color } from "chroma-js"
 import {
     ThemeConfig,
     ThemeAppearance,
-    ThemeConfigInputColors
+    ThemeConfigInputColors,
 } from "./theme_config"
 import { get_ramps } from "./ramps"
 import { syntaxStyle } from "./syntax"
@@ -13,16 +13,16 @@ export interface Theme {
     is_light: boolean
 
     /**
-    * App background, other elements that should sit directly on top of the background.
-    */
+     * App background, other elements that should sit directly on top of the background.
+     */
     lowest: Layer
     /**
-    * Panels, tabs, other UI surfaces that sit on top of the background.
-    */
+     * Panels, tabs, other UI surfaces that sit on top of the background.
+     */
     middle: Layer
     /**
-    * Editors like code buffers, conversation editors, etc.
-    */
+     * Editors like code buffers, conversation editors, etc.
+     */
     highest: Layer
 
     ramps: RampSet
@@ -115,11 +115,7 @@ export interface Style {
 }
 
 export function create_theme(theme: ThemeConfig): Theme {
-    const {
-        name,
-        appearance,
-        input_color,
-    } = theme
+    const { name, appearance, input_color } = theme
 
     const is_light = appearance === ThemeAppearance.Light
     const color_ramps: ThemeConfigInputColors = input_color
@@ -161,7 +157,10 @@ export function create_theme(theme: ThemeConfig): Theme {
         "7": player(ramps.yellow),
     }
 
-    const syntax = syntaxStyle(ramps, theme.override.syntax ? theme.override.syntax : {})
+    const syntax = syntaxStyle(
+        ramps,
+        theme.override.syntax ? theme.override.syntax : {}
+    )
 
     return {
         name,

styles/src/theme/syntax.ts

@@ -3,8 +3,13 @@ import { font_weights, ThemeConfigInputSyntax, RampSet } from "../common"
 import { Syntax, SyntaxHighlightStyle, allSyntaxKeys } from "../types/syntax"
 
 // Apply defaults to any missing syntax properties that are not defined manually
-function apply_defaults(ramps: RampSet, syntax_highlights: Partial<Syntax>): Syntax {
-    const restKeys: (keyof Syntax)[] = allSyntaxKeys.filter(key => !syntax_highlights[key])
+function apply_defaults(
+    ramps: RampSet,
+    syntax_highlights: Partial<Syntax>
+): Syntax {
+    const restKeys: (keyof Syntax)[] = allSyntaxKeys.filter(
+        (key) => !syntax_highlights[key]
+    )
 
     const completeSyntax: Syntax = {} as Syntax
 
@@ -28,23 +33,36 @@ function apply_defaults(ramps: RampSet, syntax_highlights: Partial<Syntax>): Syn
 // Merge the base syntax with the theme syntax overrides
 // This is a deep merge, so any nested properties will be merged as well
 // This allows for a theme to only override a single property of a syntax highlight style
-const merge_syntax = (baseSyntax: Syntax, theme_syntax_overrides: ThemeConfigInputSyntax): Syntax => {
-    return deepmerge<Syntax, ThemeConfigInputSyntax>(baseSyntax, theme_syntax_overrides, {
-        arrayMerge: (destinationArray, sourceArray) => [
-            ...destinationArray,
-            ...sourceArray,
-        ],
-    })
+const merge_syntax = (
+    baseSyntax: Syntax,
+    theme_syntax_overrides: ThemeConfigInputSyntax
+): Syntax => {
+    return deepmerge<Syntax, ThemeConfigInputSyntax>(
+        baseSyntax,
+        theme_syntax_overrides,
+        {
+            arrayMerge: (destinationArray, sourceArray) => [
+                ...destinationArray,
+                ...sourceArray,
+            ],
+        }
+    )
 }
 
 /** Returns a complete Syntax object of the combined styles of a theme's syntax overrides and the default syntax styles */
-export const syntaxStyle = (ramps: RampSet, theme_syntax_overrides: ThemeConfigInputSyntax): Syntax => {
+export const syntaxStyle = (
+    ramps: RampSet,
+    theme_syntax_overrides: ThemeConfigInputSyntax
+): Syntax => {
     const syntax_highlights: Partial<Syntax> = {
-        "comment": { color: ramps.neutral(0.71).hex() },
+        comment: { color: ramps.neutral(0.71).hex() },
         "comment.doc": { color: ramps.neutral(0.71).hex() },
         primary: { color: ramps.neutral(1).hex() },
         emphasis: { color: ramps.blue(0.5).hex() },
-        "emphasis.strong": { color: ramps.blue(0.5).hex(), weight: font_weights.bold },
+        "emphasis.strong": {
+            color: ramps.blue(0.5).hex(),
+            weight: font_weights.bold,
+        },
         link_uri: { color: ramps.green(0.5).hex(), underline: true },
         link_text: { color: ramps.orange(0.5).hex(), italic: true },
         "text.literal": { color: ramps.orange(0.5).hex() },

styles/src/theme/theme_config.ts

@@ -55,7 +55,9 @@ export type ThemeConfigInputColorsKeys = keyof ThemeConfigInputColors
  * }
  * ```
  */
-export type ThemeConfigInputSyntax = Partial<Record<SyntaxProperty, Partial<SyntaxHighlightStyle>>>
+export type ThemeConfigInputSyntax = Partial<
+    Record<SyntaxProperty, Partial<SyntaxHighlightStyle>>
+>
 
 interface ThemeConfigOverrides {
     syntax: ThemeConfigInputSyntax

styles/src/theme/tokens/theme.ts

@@ -4,9 +4,7 @@ import {
     SingleOtherToken,
     TokenTypes,
 } from "@tokens-studio/types"
-import {
-    Shadow,
-} from "../create_theme"
+import { Shadow } from "../create_theme"
 import { LayerToken, layer_token } from "./layer"
 import { PlayersToken, players_token } from "./players"
 import { color_token } from "./token"