max/nodarium
1
0
Fork 0
Code Issues 12 Pull Requests 2 Actions Packages Projects Releases 3 Wiki Activity

refactor: use tailwind custom colors for themes

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

8
app/src/lib/performance/Monitor.svelte
View File

@@ -74,7 +74,7 @@
.wrapper {
position: relative;
border-bottom: solid thin var(--outline);
border-bottom: solid thin var(--color-outline);
display: flex;
}
p {
@@ -88,13 +88,13 @@
svg {
height: 124px;
margin: 24px 0px;
border-top: solid thin var(--outline);
border-bottom: solid thin var(--outline);
border-top: solid thin var(--color-outline);
border-bottom: solid thin var(--color-outline);
width: 100%;
}
polyline {
fill: none;
stroke: var(--layer-3);
stroke: var(--color-layer-3);
opacity: 0.5;
stroke-width: 1;
}

4
app/src/lib/performance/PerformanceViewer.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import { humanizeNumber } from '$lib/helpers';
import { Checkbox } from '@nodarium/ui';
import { InputCheckbox } from '@nodarium/ui';
import type { PerformanceData } from '@nodarium/utils';
import BarSplit from './BarSplit.svelte';
import Monitor from './Monitor.svelte';
@@ -195,7 +195,7 @@
<div class="p-4 performance-tabler">
<div class="flex items-center gap-2">
<Checkbox id="show-total" bind:value={showAverage} />
<InputCheckbox id="show-total" bind:value={showAverage} />
<label for="show-total">Show Average</label>
</div>

2
app/src/lib/performance/SmallGraph.svelte
View File

@@ -25,7 +25,7 @@
}
polyline {
fill: none;
stroke: var(--layer-3);
stroke: var(--color-layer-3);
opacity: 1;
stroke-width: 1;
}

6
app/src/lib/performance/SmallPerformanceViewer.svelte
View File

@@ -74,14 +74,14 @@
top: 10px;
left: 10px;
z-index: 2;
background: var(--layer-0);
border: solid thin var(--outline);
background: var(--color-layer-0);
border: solid thin var(--color-outline);
border-collapse: collapse;
}
td {
padding: 4px;
padding-inline: 8px;
font-size: 0.8em;
border: solid thin var(--outline);
border: solid thin var(--color-outline);
}
</style>