refactor: use tailwind custom colors for themes

Use tailwind v4 @theme block so we can use bg-layer-0 instead of
bg-[--layer-0] for theme colors.
This commit is contained in:
Max Richter
2026-02-03 12:16:12 +01:00
parent 89e4cf8364
commit b19da950a6
35 changed files with 379 additions and 375 deletions

View File

@@ -1,5 +1,5 @@
<script lang="ts">
import { Select } from '@nodarium/ui';
import { InputSelect } from '@nodarium/ui';
let activeStore = $state(0);
let { activeId }: { activeId: string } = $props();
@@ -10,7 +10,7 @@
<div class="breadcrumbs">
{#if activeUser}
<Select id="root" options={['root']} bind:value={activeStore}></Select>
<InputSelect id="root" options={['root']} bind:value={activeStore}></InputSelect>
{#if activeCollection}
<button
onclick={() => {
@@ -35,7 +35,7 @@
<span>{activeUser}</span>
{/if}
{:else}
<Select id="root" options={['root']} bind:value={activeStore}></Select>
<InputSelect id="root" options={['root']} bind:value={activeStore}></InputSelect>
{/if}
</div>
@@ -47,7 +47,7 @@
gap: 0.8em;
height: 35px;
box-sizing: border-box;
border-bottom: solid thin var(--outline);
border-bottom: solid thin var(--color-outline);
}
.breadcrumbs > button {
position: relative;

View File

@@ -66,7 +66,7 @@
}
.dragging {
border: dashed 2px var(--outline);
border: dashed 2px var(--color-outline);
}
.node-wrapper > div {
opacity: 1;