admin ui: started color centralization + made sidebar resizable

This commit is contained in:
dswbx
2025-03-18 10:56:39 +01:00
parent ea2aa7c76c
commit f6996b1953
13 changed files with 286 additions and 92 deletions

View File

@@ -4,17 +4,28 @@
#bknd-admin,
.bknd-admin {
--color-primary: rgb(9 9 11); /* zinc-950 */
--color-background: rgb(250 250 250); /* zinc-50 */
--color-muted: rgb(228 228 231); /* ? */
--color-darkest: rgb(0 0 0); /* black */
--color-lightest: rgb(255 255 255); /* white */
--color-primary: var(--color-zinc-950);
--color-background: var(--color-zinc-50);
--color-muted: var(--color-zinc-200);
--color-darkest: var(--color-black);
--color-lightest: var(--color-white);
--color-warning: var(--color-amber-100);
--color-warning-foreground: var(--color-amber-800);
--color-error: var(--color-red-100);
--color-error-foreground: var(--color-red-800);
--color-success: var(--color-green-100);
--color-success-foreground: var(--color-green-800);
--color-info: var(--color-blue-100);
--color-info-foreground: var(--color-blue-800);
--color-resize: var(--color-blue-300);
@mixin light {
--mantine-color-body: rgb(250 250 250);
--mantine-color-body: var(--color-zinc-50);
}
@mixin dark {
--mantine-color-body: rgb(9 9 11);
--mantine-color-body: var(--color-zinc-950);
}
table {
@@ -26,11 +37,20 @@
.dark .bknd-admin /* currently used for elements, drop after making headless */,
#bknd-admin.dark,
.bknd-admin.dark {
--color-primary: rgb(250 250 250); /* zinc-50 */
--color-primary: var(--color-zinc-50);
--color-background: rgb(30 31 34);
--color-muted: rgb(47 47 52);
--color-darkest: rgb(255 255 255); /* white */
--color-lightest: rgb(24 24 27); /* black */
--color-darkest: var(--color-white);
--color-lightest: rgb(24 24 27);
--color-warning: var(--color-yellow-900);
--color-warning-foreground: var(--color-yellow-200);
--color-error: var(--color-red-950);
--color-error-foreground: var(--color-red-200);
--color-success: var(--color-green-950);
--color-success-foreground: var(--color-green-200);
--color-info: var(--color-blue-950);
--color-info-foreground: var(--color-blue-200);
}
@theme {
@@ -39,6 +59,15 @@
--color-muted: var(--color-muted);
--color-darkest: var(--color-darkest);
--color-lightest: var(--color-lightest);
--color-warning: var(--color-warning);
--color-warning-foreground: var(--color-warning-foreground);
--color-error: var(--color-error);
--color-error-foreground: var(--color-error-foreground);
--color-success: var(--color-success);
--color-success-foreground: var(--color-success-foreground);
--color-info: var(--color-info);
--color-info-foreground: var(--color-info-foreground);
}
#bknd-admin {