Move theme to utils

Author: pomber

packages/mini-editor/src/editor-frame.tsx

@@ -1,8 +1,11 @@
 import React from "react"
 import { FrameButtons } from "@code-hike/mini-frame"
 import { useClasser, Classes } from "@code-hike/classer"
-import { EditorTheme } from "@code-hike/smooth-code/dist/themes"
-import { getColor, ColorName } from "./theme-colors"
+import {
+  EditorTheme,
+  getColor,
+  ColorName,
+} from "@code-hike/utils"
 
 export {
   EditorFrameProps,

packages/smooth-code/src/annotations.tsx

@@ -18,8 +18,8 @@ import {
   splitParts,
   ColumnExtremes,
   parseExtremes,
+  EditorTheme,
 } from "@code-hike/utils"
-import { EditorTheme } from "./themes"
 import React from "react"
 
 export function parseAnnotations(

packages/smooth-code/src/partial-step-parser.ts

@@ -4,8 +4,8 @@ import {
   map,
   FullTween,
   withDefault,
+  EditorTheme,
 } from "@code-hike/utils"
-import { EditorTheme } from "./themes"
 import { mergeLines } from "./differ"
 import { splitByFocus } from "./splitter"
 import React from "react"

packages/storybook/src/themes.story.js

@@ -65,7 +65,7 @@ export const themes = () => {
   React.useEffect(() => {
     const files = [
       { name: "foo.js", lang: "js", code },
-      { name: "index.js", lang: "js", code },
+      { name: "index.js", lang: "js", code, focus: "2:4" },
       { name: "bar.js", lang: "js", code },
       {
         name: "app.js",
@@ -124,7 +124,7 @@ export const themes = () => {
           {...props}
           frameProps={{ height: 500 }}
           codeConfig={{
-            maxZoom: 1.2,
+            maxZoom: 1,
             minColumns: 10,
             theme,
           }}

packages/utils/src/index.tsx

@@ -1,3 +1,4 @@
 export * from "./tween"
 export * from "./code"
 export * from "./focus"
+export * from "./theme"

packages/mini-editor/src/theme-colors.ts renamed to packages/utils/src/theme.ts

@@ -1,6 +1,34 @@
-import { EditorTheme } from "@code-hike/smooth-code/dist/themes"
+/**
+ * A single theme setting.
+ */
+interface IRawThemeSetting {
+  name?: string
+  scope?: string | string[]
+  settings: {
+    fontStyle?: string
+    foreground?: string
+    background?: string
+  }
+}
+/**
+ * A TextMate theme.
+ */
+export interface EditorTheme {
+  name?: string
+  type?: string
+  colors?: Record<string, string>
+
+  // not used:
+  tokenColors?: IRawThemeSetting[]
+  settings?: IRawThemeSetting[]
+  semanticTokenColors?: any
+  semanticHighlighting?: boolean
+}
 
 export enum ColorName {
+  CodeForeground,
+  CodeBackground,
+  EditorForeground,
   EditorBackground,
   ActiveTabBackground,
   ActiveTabForeground,
@@ -10,20 +38,32 @@ export enum ColorName {
   EditorGroupHeaderBackground,
   TabBorder,
   ActiveTabBottomBorder,
+  LineNumberForeground,
 }
 
 type Color = string | undefined
 
 const contrastBorder = "#6FC3DF"
 
 // defaults from: https://github.com/microsoft/vscode/blob/main/src/vs/workbench/common/theme.ts
+// and: https://github.com/microsoft/vscode/blob/main/src/vs/editor/common/view/editorColorRegistry.ts
 // keys from : https://code.visualstudio.com/api/references/theme-color#editor-groups-tabs
 export function getColor(
   theme: EditorTheme,
   colorName: ColorName
 ): Color {
-  const colors = (theme as any).colors || {}
+  const colors = theme.colors || {}
   switch (colorName) {
+    case ColorName.CodeForeground:
+      return (
+        getGlobalSettings(theme)?.foreground ||
+        getColor(theme, ColorName.EditorForeground)
+      )
+    case ColorName.CodeBackground:
+      return (
+        getGlobalSettings(theme)?.background ||
+        getColor(theme, ColorName.EditorBackground)
+      )
     case ColorName.EditorBackground:
       return (
         colors["editor.background"] ||
@@ -33,6 +73,15 @@ export function getColor(
           hc: "#000000",
         })
       )
+    case ColorName.EditorForeground:
+      return (
+        colors["editor.foreground"] ||
+        getDefault(theme, {
+          light: "#333333",
+          dark: "#BBBBBB",
+          hc: "#fffffe",
+        })
+      )
     case ColorName.ActiveTabBackground:
       return (
         colors["tab.activeBackground"] ||
@@ -103,6 +152,15 @@ export function getColor(
           hc: undefined,
         })
       )
+    case ColorName.LineNumberForeground:
+      return (
+        colors["editorLineNumber.foreground"] ||
+        getDefault(theme, {
+          dark: "#858585",
+          light: "#237893",
+          hc: "#fffffe",
+        })
+      )
 
     default:
       return "#f00"
@@ -122,10 +180,36 @@ function getDefault(
   theme: EditorTheme,
   defaults: { dark: Color; light: Color; hc: Color }
 ): Color {
-  const themeType = (theme.type
+  return defaults[getThemeType(theme)]
+}
+
+function getThemeType(
+  theme: EditorTheme
+): "dark" | "light" | "hc" {
+  return (theme.type
     ? theme.type
     : theme.name?.toLowerCase().includes("light")
     ? "light"
     : "dark") as "dark" | "light" | "hc"
-  return defaults[themeType]
+}
+
+export function getCodeColors(
+  theme: EditorTheme
+): { fg: string; bg: string } {
+  return {
+    fg: getColor(theme, ColorName.CodeForeground)!,
+    bg: getColor(theme, ColorName.CodeBackground)!,
+  }
+}
+
+function getGlobalSettings(theme: EditorTheme) {
+  let settings = theme.settings
+    ? theme.settings
+    : theme.tokenColors
+  const globalSetting = settings
+    ? settings.find(s => {
+        return !s.name && !s.scope
+      })
+    : undefined
+  return globalSetting?.settings
 }