feat: allow changing syntax colors in the theme designer

aradzie · Oct 23, 2024 · 5dc211f · 5dc211f
1 parent 7390353
commit 5dc211f
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 16 deletions.
diff --git a/packages/keybr-theme-designer/lib/design/DesignPane.tsx b/packages/keybr-theme-designer/lib/design/DesignPane.tsx
@@ -15,6 +15,7 @@ import { useCustomTheme } from "./context.ts";
 import * as styles from "./DesignPane.module.less";
 import { KeyboardDesign } from "./KeyboardDesign.tsx";
 import { LessonKeysDesign } from "./LessonKeysDesign.tsx";
+import { SyntaxDesign } from "./SyntaxDesign.tsx";
 import { WidgetsDesign } from "./WidgetsDesign.tsx";
 
 export function DesignPane() {
@@ -102,6 +103,7 @@ export function DesignPane() {
         <BackgroundImage />
         <LessonKeysDesign />
         <KeyboardDesign />
+        <SyntaxDesign />
       </div>
       <FieldList>
         <Field>

diff --git a/packages/keybr-theme-designer/lib/design/KeyboardDesign.tsx b/packages/keybr-theme-designer/lib/design/KeyboardDesign.tsx
@@ -4,41 +4,43 @@ import { ColorInput, makeAccessor } from "./input/ColorInput.tsx";
 import { KeyboardPreview } from "./KeyboardPreview.tsx";
 import { PreviewPane } from "./PreviewPane.tsx";
 
-const pinky = makeAccessor("--pinky-zone-color");
-const ring = makeAccessor("--ring-zone-color");
-const middle = makeAccessor("--middle-zone-color");
-const leftIndex = makeAccessor("--left-index-zone-color");
-const rightIndex = makeAccessor("--right-index-zone-color");
-const thumb = makeAccessor("--thumb-zone-color");
+const prop = {
+  ["pinky"]: makeAccessor("--pinky-zone-color"),
+  ["ring"]: makeAccessor("--ring-zone-color"),
+  ["middle"]: makeAccessor("--middle-zone-color"),
+  ["leftIndex"]: makeAccessor("--left-index-zone-color"),
+  ["rightIndex"]: makeAccessor("--right-index-zone-color"),
+  ["thumb"]: makeAccessor("--thumb-zone-color"),
+} as const;
 
 export function KeyboardDesign() {
   return (
     <Group title="Keyboard Zone Colors">
       <FieldList>
         <Field>
-          <ColorInput accessor={pinky} />
+          <ColorInput accessor={prop["pinky"]} />
         </Field>
         <Field size={6}>Pinky</Field>
         <Field>
-          <ColorInput accessor={ring} />
+          <ColorInput accessor={prop["ring"]} />
         </Field>
         <Field size={6}>Ring</Field>
         <Field>
-          <ColorInput accessor={middle} />
+          <ColorInput accessor={prop["middle"]} />
         </Field>
         <Field size={6}>Middle</Field>
       </FieldList>
       <FieldList>
         <Field>
-          <ColorInput accessor={leftIndex} />
+          <ColorInput accessor={prop["leftIndex"]} />
         </Field>
         <Field size={6}>Left index</Field>
         <Field>
-          <ColorInput accessor={rightIndex} />
+          <ColorInput accessor={prop["rightIndex"]} />
         </Field>
         <Field size={6}>Right index</Field>
         <Field>
-          <ColorInput accessor={thumb} />
+          <ColorInput accessor={prop["thumb"]} />
         </Field>
         <Field size={6}>Thumb</Field>
       </FieldList>

diff --git a/packages/keybr-theme-designer/lib/design/LessonKeysDesign.tsx b/packages/keybr-theme-designer/lib/design/LessonKeysDesign.tsx
@@ -4,19 +4,21 @@ import { ColorInput, makeAccessor } from "./input/ColorInput.tsx";
 import { LessonKeysPreview } from "./LessonKeysPreview.tsx";
 import { PreviewPane } from "./PreviewPane.tsx";
 
-const slowKey = makeAccessor("--slow-key-color");
-const fastKey = makeAccessor("--fast-key-color");
+const prop = {
+  ["slow"]: makeAccessor("--slow-key-color"),
+  ["fast"]: makeAccessor("--fast-key-color"),
+} as const;
 
 export function LessonKeysDesign() {
   return (
     <Group title="Lesson Key Colors">
       <FieldList>
         <Field>
-          <ColorInput accessor={slowKey} />
+          <ColorInput accessor={prop["slow"]} />
         </Field>
         <Field size={6}>Slow key</Field>
         <Field>
-          <ColorInput accessor={fastKey} />
+          <ColorInput accessor={prop["fast"]} />
         </Field>
         <Field size={6}>Fast key</Field>
       </FieldList>

diff --git a/packages/keybr-theme-designer/lib/design/SyntaxDesign.tsx b/packages/keybr-theme-designer/lib/design/SyntaxDesign.tsx
@@ -0,0 +1,42 @@
+import { Field, FieldList } from "@keybr/widget";
+import { Group } from "./Group.tsx";
+import { ColorInput, makeAccessor } from "./input/ColorInput.tsx";
+import { PreviewPane } from "./PreviewPane.tsx";
+import { SyntaxPreview } from "./SyntaxPreview.tsx";
+
+const prop = {
+  ["keyword"]: makeAccessor("--syntax-keyword"),
+  ["number"]: makeAccessor("--syntax-number"),
+  ["string"]: makeAccessor("--syntax-string"),
+  ["comment"]: makeAccessor("--syntax-comment"),
+} as const;
+
+export function SyntaxDesign() {
+  return (
+    <Group title="Syntax Colors">
+      <FieldList>
+        <Field>
+          <ColorInput accessor={prop["keyword"]} />
+        </Field>
+        <Field size={6}>Keywords</Field>
+        <Field>
+          <ColorInput accessor={prop["number"]} />
+        </Field>
+        <Field size={6}>Numbers</Field>
+      </FieldList>
+      <FieldList>
+        <Field>
+          <ColorInput accessor={prop["string"]} />
+        </Field>
+        <Field size={6}>Strings</Field>
+        <Field>
+          <ColorInput accessor={prop["comment"]} />
+        </Field>
+        <Field size={6}>Comments</Field>
+      </FieldList>
+      <PreviewPane>
+        <SyntaxPreview />
+      </PreviewPane>
+    </Group>
+  );
+}
diff --git a/packages/keybr-theme-designer/lib/design/SyntaxPreview.tsx b/packages/keybr-theme-designer/lib/design/SyntaxPreview.tsx
@@ -0,0 +1,39 @@
+import { useSettings } from "@keybr/settings";
+import { singleLine, toTextDisplaySettings } from "@keybr/textinput";
+import { StaticText } from "@keybr/textinput-ui";
+import { Box } from "@keybr/widget";
+
+export function SyntaxPreview() {
+  const { settings } = useSettings();
+  return (
+    <Box alignItems="center" justifyContent="center">
+      <StaticText
+        settings={toTextDisplaySettings(settings)}
+        lines={singleLine([
+          { text: "/** Comment */", cls: "comment" },
+          " ",
+          { text: "void", cls: "keyword" },
+          " ",
+          "hello()",
+          " ",
+          "{",
+          " ",
+          { text: "return", cls: "keyword" },
+          " ",
+          "println",
+          "(",
+          { text: `"Hello world!"`, cls: "string" },
+          ",",
+          " ",
+          { text: `3.14159`, cls: "number" },
+          ")",
+          ";",
+          " ",
+          "}",
+        ])}
+        cursor={true}
+        size="X0"
+      />
+    </Box>
+  );
+}