themes

packages/web/src/forms/SelectField.svelte

@@ -32,26 +32,52 @@
     {/each}
   </select>
 {:else}
-  <SvelteSelect
-    {...$$restProps}
-    items={options}
-    selectedValue={isMulti
-      ? value?.map(item => options.find(x => x.value == item))
-      : options.find(x => x.value == value)}
-    on:select={e => {
-      if (isMulti) {
-        dispatch(
-          'change',
-          e.detail?.map(x => x.value)
-        );
-      } else {
-        dispatch('change', e.detail.value);
-      }
-    }}
-    showIndicator={!isMulti}
-    isClearable={isMulti}
-    {isMulti}
-    bind:listOpen
-    bind:isFocused
-  />
+  <div class="select">
+    <SvelteSelect
+      {...$$restProps}
+      items={options}
+      selectedValue={isMulti
+        ? value?.map(item => options.find(x => x.value == item))
+        : options.find(x => x.value == value)}
+      on:select={e => {
+        if (isMulti) {
+          dispatch(
+            'change',
+            e.detail?.map(x => x.value)
+          );
+        } else {
+          dispatch('change', e.detail.value);
+        }
+      }}
+      showIndicator={!isMulti}
+      isClearable={isMulti}
+      {isMulti}
+      bind:listOpen
+      bind:isFocused
+    />
+  </div>
 {/if}
+
+<style>
+  .select {
+    --border: 1px solid var(--theme-border);
+    --placeholderColor: var(--theme-font-2);
+    --background: var(--theme-bg-0);
+    --listBackground: var(--theme-bg-1);
+    --itemActiveBackground: var(--theme-bg-selected);
+    --itemIsActiveBG: var(--theme-bg-selected);
+    --itemHoverBG: var(--theme-bg-hover);
+    --itemColor: var(--theme-font-1);
+    --listEmptyColor: var(--theme-bg-0);
+
+    --multiClearBG: var(--theme-bg-3);
+    --multiClearFill: var(--theme-font-2);
+    --multiClearHoverBG: var(--theme-bg-hover);
+    --multiClearHoverFill: var(--theme-font-hover);
+    --multiItemActiveBG: var(--theme-bg-1);
+    --multiItemActiveColor: var(--theme-font-1);
+    --multiItemBG: var(--theme-bg-1);
+    --multiItemDisabledHoverBg: var(--theme-bg-1);
+    --multiItemDisabledHoverColor: var(--theme-bg-1);
+  }
+</style>

packages/web/src/forms/TextField.svelte

@@ -8,4 +8,4 @@
   if (focused) onMount(() => domEditor.focus());
 </script>
 
-<input type="text" {...$$restProps} bind:value on:change on:input bind:this={domEditor} on:keydown />
+<input type="text" {...$$restProps} bind:value on:change on:input bind:this={domEditor} on:keydown autocomplete="new-password" />