Improve settings system and add initial custom color support

app/desktop/src/ipc.ts

@@ -30,4 +30,5 @@ export interface ToRendererChannels {
   toggleConsole: undefined;
   showAbout: string;
   tidalHighlight: HighlightEvent;
+  settingsData: any;
 }

app/desktop/src/main/index.ts

@@ -12,9 +12,9 @@ import { dialog } from "electron";
 
 // autoUpdater.checkForUpdatesAndNotify();
 
-import { StateManagement } from "@core/state";
+import { Config } from "@core/state";
 
-import { GHCI, TidalSettingsSchema } from "@management/lang-tidal";
+import { GHCI } from "@management/lang-tidal";
 import { Filesystem } from "./filesystem";
 import { wrapIPC } from "./ipcMain";
 
@@ -24,9 +24,7 @@ const filesystem = new Filesystem();
 
 const settingsPath = resolve(app.getPath("userData"), "settings.json");
 
-const createWindow = (
-  configuration: StateManagement<typeof TidalSettingsSchema>
-) => {
+const createWindow = (configuration: Config) => {
   const tidal = new GHCI(configuration);
 
   const window = new BrowserWindow({
@@ -178,6 +176,13 @@ const createWindow = (
       })
     );
 
+    send("settingsData", configuration.data);
+    listeners.push(
+      configuration.on("change", (data) => {
+        send("settingsData", data);
+      })
+    );
+
     // For now, load a blank document on startup
     filesystem.loadDoc();
 
@@ -224,7 +229,7 @@ const createWindow = (
 import { readFile } from "fs/promises";
 
 app.whenReady().then(async () => {
-  const settings = new StateManagement(TidalSettingsSchema);
+  const settings = new Config();
 
   // Try loading settings
   let settingsData = {};

app/desktop/src/preload/index.ts

@@ -89,6 +89,8 @@ const ElectronAPI = {
   onTidalNow: listen("tidalNow"),
 
   onTidalHighlight: listen("tidalHighlight"),
+
+  onSettingsData: listen("settingsData"),
 };
 
 contextBridge.exposeInMainWorld("api", ElectronAPI);

app/desktop/src/renderer/main.ts

@@ -5,12 +5,14 @@ import { basicSetup } from "@core/extensions/basicSetup";
 import { oneDark } from "@core/extensions/theme/theme";
 import { tidal } from "@management/lang-tidal/editor";
 
+import { Config } from "@core/state";
 import { settings } from "@core/extensions/settings/editor";
 
 import { LayoutView } from "@core/extensions/layout";
 import { console as electronConsole } from "@core/extensions/console";
 // import { peer } from "@core/extensions/peer";
 import { toolbarConstructor } from "@core/extensions/toolbar";
+import { ColorScheme } from "@core/extensions/theme/colors";
 
 import { fileSync } from "./file";
 import { EditorTabView } from "@core/extensions/layout/tabs/editor";
@@ -32,6 +34,14 @@ const { api } = window as Window &
     api: typeof ElectronAPI;
   };
 
+const configuration = new Config();
+api.onSettingsData((data) => {
+  configuration.update(data);
+});
+
+// Color scheme extension
+const colorScheme = new ColorScheme(configuration);
+
 const background: string | null = null;
 
 export class Editor {

core/extensions/console/icons.tsx

@@ -15,7 +15,6 @@ export function ErrorIcon() {
 }
 
 function Icon({ svgSource }: { svgSource: string }) {
-  console.log(svgSource);
   return (
     <div
       class="cm-console-message-icon"

core/extensions/console/style.css

@@ -9,7 +9,7 @@
 }
 
 .cm-console::-webkit-scrollbar-thumb {
-  background-color: var(--col-bg-shadow);
+  background-color: var(--color-ui-background);
 }
 
 .cm-console::-webkit-scrollbar-corner {
@@ -33,6 +33,8 @@
 .cm-console-message-source {
   padding-left: 12px;
   float: right;
+  box-shadow: inset 2px -2px var(--color-background);
+  z-index: 1;
 }
 
 .cm-console {
@@ -60,53 +62,70 @@
   overflow-wrap: anywhere;
 }
 
-.cm-console-message-info .cm-console-message-source,
-.cm-console-message-info .cm-console-message-input {
-  border-color: var(--col-bg-shadow);
-  background-color: var(--col-bg-shadow-soft);
-}
-
+/* .cm-console-message-info .cm-console-message-input,
 .cm-console-message-info .cm-console-message-output {
-  background-color: var(--col-bg-shadow);
-}
+  margin-left: 18px;
+  background-color: var(--color-ui-background);
+} */
 
-.cm-console-message-info .cm-console-message-source,
-.cm-console-message-info .cm-console-message-input {
-  color: var(--col-text-soft);
+.cm-console-message-info .cm-console-message-source {
+  color: var(--col-text-inactive);
 }
 
-.cm-console-message-error .cm-console-message-input,
+/* .cm-console-message-error .cm-console-message-input,
 .cm-console-message-error .cm-console-message-output {
   background-image: repeating-linear-gradient(
     135deg,
     #6c000050 0px 10px,
     #a6020250 10px 20px
   );
-}
+} */
 
-.cm-console-message-error .cm-console-message-source {
+/* .cm-console-message-error .cm-console-message-source {
   color: coral;
-}
+} */
 
 .cm-console-message-input,
 .cm-console-message-output {
-  padding-left: 24px;
+  margin-left: 24px;
   position: relative;
+  background-color: var(--color-ui-background-inactive);
+}
+
+.cm-console-message-input::before,
+.cm-console-message-output::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -24px;
+  width: 24px;
+  height: 100%;
+  background-color: var(--color-ui-background);
 }
 
 .cm-console-message-icon {
   width: 24px;
   height: 24px;
   position: absolute;
-  top: 3px;
-  left: 0;
+  top: 0;
+  left: -24px;
   color: var(--col-text-soft);
 }
 
 .cm-console-message-icon svg {
   display: block;
 }
 
-.cm-console-message-error .cm-console-message-output .cm-console-message-icon {
-  color: crimson;
+.cm-console-message-error .cm-console-message-input,
+.cm-console-message-error .cm-console-message-output {
+  background-color: #ffd9d580;
+}
+
+.cm-console-message-error .cm-console-message-input::before,
+.cm-console-message-error .cm-console-message-output::before {
+  background-color: crimson;
+}
+
+.cm-console-message-error .cm-console-message-icon {
+  color: white;
 }

core/extensions/layout/style.css

@@ -17,7 +17,7 @@
   color: var(--col-text);
   font-size: calc(1.2727 * 12px);
   line-height: calc(2.5 * 12px);
-  border-bottom: solid 2px var(--col-bg-shadow);
+  border-bottom: solid 2px var(--color-ui-background);
   margin-bottom: -1px;
   display: flex;
 }
@@ -59,12 +59,12 @@
 
 .tab {
   padding: 0 calc(2.5 * 12px) 0 calc(0.5 * 12px);
-  background: var(--col-bg-shadow-soft);
+  background: var(--color-ui-background-inactive);
 }
 
 .tab-container.current .tab,
 .tab:hover {
-  background: var(--col-bg-shadow);
+  background: var(--color-ui-background);
 }
 
 .tab:focus-visible {
@@ -86,15 +86,15 @@
   height: calc(1.5 * 12px);
   line-height: calc(1.5 * 12px);
   text-align: center;
-  background: var(--col-bg-shadow-soft);
+  background: var(--color-ui-background-inactive);
 }
 
 .tab-container:not(.current):not(:hover) .close-button {
   display: none;
 }
 
 .tab-container .close-button:hover {
-  background: var(--col-bg-shadow);
+  background: var(--color-ui-background);
 }
 
 .tab-container .close-button:focus-visible {
@@ -103,7 +103,7 @@
 }
 
 .new-tab-button {
-  background: var(--col-bg-shadow-soft);
+  background: var(--color-ui-background-inactive);
   border: none;
   color: inherit;
   height: 30px;
@@ -112,7 +112,7 @@
 }
 
 .new-tab-button:hover {
-  background: var(--col-bg-shadow);
+  background: var(--color-ui-background);
 }
 
 .editor-panels {

core/extensions/settings/editor.ts

@@ -2,13 +2,18 @@ import { autocompletion } from "@codemirror/autocomplete";
 import { json } from "@codemirror/lang-json";
 import { jsonSchema } from "codemirror-json-schema";
 
+import { ThemeSettingsSchema } from "@core/extensions/theme/settings";
 import { TidalSettingsSchema } from "packages/languages/tidal/settings";
 
 export function settings() {
   return [
     autocompletion(),
     json(),
-    // TODO: Figure out how to get all the JSON Schema extensions to work together
-    jsonSchema(TidalSettingsSchema),
+    jsonSchema({
+      properties: {
+        ...ThemeSettingsSchema.properties,
+        ...TidalSettingsSchema.properties,
+      },
+    }),
   ];
 }

core/extensions/theme/base.css

@@ -14,7 +14,8 @@ body {
 }
 
 body {
-  background-color: var(--col-bg);
+  background-color: var(--color-background);
+  color: var(--color-foreground);
   margin: 0;
 }
 
@@ -32,35 +33,3 @@ body {
   z-index: -100;
   border: none;
 }
-
-@media (prefers-color-scheme: light) {
-  :root {
-    --col-bg: #d8d5d4;
-    --col-bg-shadow: #ffffff59; /* 35% opacity */
-    --col-bg-shadow-soft: #ffffff1f; /* 12% opacity */
-    --col-text: #252221;
-    --col-text-soft: #4b4542;
-    --col-text-1: #e59e00;
-    --col-text-2: #e54c2e;
-    --col-text-3: #0f91ea;
-    --col-text-4: #9e38ad;
-    --col-text-invert: #ffffff;
-    --col-selection: #c5c0be;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --col-bg: #35312f;
-    --col-bg-shadow: #0b0a094d; /* 30% opacity */
-    --col-bg-shadow-soft: #0b0a091f; /* 12% opacity */
-    --col-text: #eceae9;
-    --col-text-soft: #b2aba8;
-    --col-text-1: #f9c112;
-    --col-text-2: #f76559;
-    --col-text-3: #2fa8f2;
-    --col-text-4: #c44ed8;
-    --col-text-invert: #0b0a09;
-    --col-selection: #605956;
-  }
-}

core/extensions/theme/colors/defaultDark.json

@@ -0,0 +1,7 @@
+{
+  "background": "#35312f",
+  "foreground": "#eceae9",
+  "ui.background": "#00000072",
+  "ui.backgroundInactive": "#00000040",
+  "ui.backgroundActive": "#000000e6"
+}

core/extensions/theme/colors/defaultLight.json

@@ -0,0 +1,7 @@
+{
+  "background": "#d8d5d4",
+  "foreground": "#252221",
+  "ui.background": "#ffffff72",
+  "ui.backgroundInactive": "#ffffff40",
+  "ui.backgroundActive": "#ffffffe6"
+}