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

@@ -71,22 +71,22 @@
user-select: none !important;
cursor: pointer;
width: 200px;
color: var(--text-color);
color: var(--color-text);
transform: translate3d(var(--nx), var(--ny), 0);
z-index: 1;
opacity: calc((var(--cz) - 2.5) / 3.5);
font-weight: 300;
--stroke: var(--outline);
--stroke: var(--color-outline);
--stroke-width: 2px;
}
.node.active {
--stroke: var(--active);
--stroke: var(--color-active);
--stroke-width: 2px;
}
.node.selected {
--stroke: var(--selected);
--stroke: var(--color-selected);
--stroke-width: 2px;
}
</style>

View File

@@ -109,7 +109,7 @@
svg path {
stroke-width: 0.2px;
transition: d 0.3s ease, fill 0.3s ease;
fill: var(--layer-2);
fill: var(--color-layer-2);
stroke: var(--stroke);
stroke-width: var(--stroke-width);
d: var(--path);

View File

@@ -175,7 +175,7 @@
svg path {
transition: d 0.3s ease, fill 0.3s ease;
fill: var(--layer-1);
fill: var(--color-layer-1);
stroke: var(--stroke);
stroke-width: var(--stroke-width);
d: var(--path);