feat: add theming support

packages/ui/src/lib/Details.svelte

@@ -1,21 +1,34 @@
 <script lang="ts">
   export let title = "Details";
+  export let transparent = false;
 </script>
 
-<details>
+<details class:transparent>
   <summary>{title}</summary>
-
-  <slot />
+  <div class="content">
+    <slot />
+  </div>
 </details>
 
 <style>
   details {
     padding: 1em;
-    color: white;
+    color: var(--text-color);
+    padding-left: 20px;
     background-color: #202020;
     outline: solid 0.1px white;
     border-radius: 2px;
     font-weight: 300;
     font-size: 0.9em;
   }
+
+  details.transparent {
+    background-color: transparent;
+    padding: 0;
+    outline: none;
+  }
+
+  .content {
+    padding-left: 12px;
+  }
 </style>

packages/ui/src/lib/Input.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import Checkbox from "$lib/elements/Checkbox.svelte";
-  import Float from "$lib/elements/Float.svelte";
-  import Integer from "$lib/elements/Integer.svelte";
-  import Select from "$lib/elements/Select.svelte";
+  import Checkbox from "./elements/Checkbox.svelte";
+  import Float from "./elements/Float.svelte";
+  import Integer from "./elements/Integer.svelte";
+  import Select from "./elements/Select.svelte";
 
   import type { NodeInput } from "@nodes/types";
 

packages/ui/src/lib/app.css

@@ -41,24 +41,92 @@
 body {
   overflow: hidden;
 
+  --neutral-100: #E7E7E7;
+  --neutral-200: #A6A6A6;
+  --neutral-300: #7C7C7C;
+  --neutral-400: #2D2D2D;
+  --neutral-500: #171717;
+  --neutral-800: #111111;
+  --neutral-900: #060606;
+
   /* Secondary color */
   --secondary-color: #6c757d;
-  /* Background color */
-  --background-color-lighter: #202020;
-  --background-color: #151515;
-  --background-color-darker: #101010;
-  --text-color: #aeaeae;
+
+  --layer-0: var(--neutral-900);
+  --layer-1: var(--neutral-500);
+  --layer-2: var(--neutral-400);
+  --layer-3: var(--neutral-200);
+
+  --outline: var(--neutral-400);
+
+  --text-color: var(--neutral-200);
 
   color: var(--text-color);
+  background-color: var(--layer-0);
+}
 
-  background-color: var(--background-color-darker);
+body * {
+  color: var(--text-color);
+}
+
+body.theme-light {
+  --text-color: var(--neutral-800);
+  --outline: var(--neutral-300);
+  --layer-0: var(--neutral-100);
+  --layer-1: var(--neutral-100);
+  --layer-2: var(--neutral-100);
+  --layer-3: var(--neutral-500);
+}
+
+body.theme-solarized {
+  --text-color: #425055;
+  --outline: #93a1a1;
+  --layer-0: #fdf6e3;
+  --layer-1: #eee8d5;
+  --layer-2: #93a1a1;
+  --layer-3: #586e75;
 }
 
 body.theme-catppuccin {
   --text-color: #CDD6F4;
-  --background-color-lighter: #313244;
-  --background-color: #1E1E2E;
-  --background-color-darker: #11111b;
+  --outline: #3e3e4f;
+  --layer-3: #a8aac8;
+  --layer-2: #313244;
+  --layer-1: #1E1E2E;
+  --layer-0: #11111b;
+}
+
+body.theme-high-contrast {
+  --text-color: #FFFFFF;
+  --outline: white;
+  --layer-0: #000000;
+  --layer-1: black;
+  --layer-2: #222222;
+  --layer-3: #FFFFFF;
+}
+
+body.theme-nord {
+  --text-color: #D8DEE9;
+  /* Nord snow */
+  --outline: #4C566A;
+  /* Nord frost */
+  --layer-0: #2E3440;
+  /* Nord polar night */
+  --layer-1: #3B4252;
+  /* Nord polar night */
+  --layer-2: #434C5E;
+  /* Nord polar night */
+  --layer-3: #5E81AC;
+  /* Nord frost */
+}
+
+body.theme-dracula {
+  --text-color: #F8F8F2;
+  --outline: #6272A4;
+  --layer-0: #282A36;
+  --layer-1: #44475A;
+  --layer-2: #32374D;
+  --layer-3: #BD93F9;
 }
 
 body {

packages/ui/src/lib/elements/Float.svelte

@@ -120,12 +120,11 @@
 <style>
   .component-wrapper {
     position: relative;
-    background-color: var(--background-color-lighter, #4b4b4b);
+    background-color: var(--layer-2, #4b4b4b);
     border-radius: 2px;
     user-select: none;
     transition: box-shadow 0.3s ease;
-    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2);
-    outline: none !important;
+    outline: solid 1px var(--outline);
     overflow: hidden;
     border-radius: var(--border-radius, 2px);
   }

packages/ui/src/lib/elements/Integer.svelte

@@ -109,12 +109,11 @@
   .component-wrapper {
     position: relative;
     display: flex;
-    background-color: var(--background-color-lighter, #4b4b4b);
+    background-color: var(--layer-2, #4b4b4b);
     border-radius: 2px;
     user-select: none;
     transition: box-shadow 0.3s ease;
-    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2);
-    outline: none !important;
+    outline: solid 1px var(--outline);
     overflow: hidden;
     border-radius: var(--border-radius, 2px);
   }
@@ -141,7 +140,7 @@
     top: 0px;
     left: 0px;
     height: 100%;
-    background-color: var(--text-color);
+    background-color: var(--layer-3);
     opacity: 0.3;
     pointer-events: none;
   }
@@ -166,4 +165,3 @@
     border-style: none;
   }
 </style>
-

packages/ui/src/lib/elements/Select.svelte

@@ -12,9 +12,10 @@
 
 <style>
   select {
-    background: var(--background-color-lighter);
+    background: var(--layer-2);
     color: var(--text-color);
     font-family: var(--font-family);
+    outline: solid 1px var(--outline);
     padding: 0.8em 1em;
     border-radius: 5px;
     border: none;