feat(web): перевести тему на палитру и шрифты Geist из дизайна VPS-Tracker
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
DenozordecandClaude Opus 5.5 committed
1 parent
b3712af0c0
commit
10b20b9d55
4 files changed
+131
No files matched your search
@@ -18,6 +18,8 @@
|
||||
"@dnd-kit/modifiers": "^9.0.0",
|
||||
"@dnd-kit/sortable": "^10.0.0",
|
||||
"@dnd-kit/utilities": "^3.2.2",
|
||||
"@fontsource-variable/geist": "^5.3.0",
|
||||
"@fontsource-variable/geist-mono": "^5.3.0",
|
||||
"@hookform/resolvers": "^3.10.0",
|
||||
"@tanstack/react-query": "^5.90.2",
|
||||
"@tanstack/react-query-devtools": "^5.90.2",
|
||||
|
||||
@@ -5,6 +5,7 @@ import { RouterProvider } from '@tanstack/react-router'
|
||||
import { Toaster } from '@cfdm/ui/components/sonner'
|
||||
|
||||
import '@cfdm/ui/globals.css'
|
||||
import '@/styles/theme.css'
|
||||
|
||||
import { queryClient } from '@/lib/queryClient'
|
||||
import { createRouter } from '@/lib/router'
|
||||
|
||||
@@ -0,0 +1,112 @@
|
||||
/*
|
||||
* VPS-Tracker theme layer (design canvas «VPS-Tracker», see docs/ui-migration-plan.md).
|
||||
* Overrides tokens only — @cfdm/ui/globals.css stays shadcn CLI output, ReUI components are not restyled.
|
||||
*/
|
||||
@import '@fontsource-variable/geist';
|
||||
@import '@fontsource-variable/geist-mono';
|
||||
|
||||
:root {
|
||||
--font-sans: 'Geist Variable', ui-sans-serif, system-ui, sans-serif;
|
||||
--font-mono: 'Geist Mono Variable', ui-monospace, SFMono-Regular, monospace;
|
||||
|
||||
--background: oklch(0.973 0.004 247.858);
|
||||
--foreground: oklch(0.141 0.006 264);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.141 0.006 264);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.141 0.006 264);
|
||||
--primary: oklch(0.205 0 0);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--secondary: oklch(0.958 0.005 247.858);
|
||||
--secondary-foreground: oklch(0.205 0 0);
|
||||
--muted: oklch(0.958 0.005 247.858);
|
||||
--muted-foreground: oklch(0.52 0.01 264);
|
||||
--accent: oklch(0.942 0.016 264.376);
|
||||
--accent-foreground: oklch(0.205 0 0);
|
||||
--border: oklch(0.904 0.006 264);
|
||||
--input: oklch(0.904 0.006 264);
|
||||
--ring: oklch(0.488 0.243 264.376);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--destructive-foreground: oklch(0.444 0.177 26.899);
|
||||
--success: oklch(0.696 0.17 162.48);
|
||||
--success-foreground: oklch(0.378 0.077 168.94);
|
||||
--warning: oklch(0.795 0.184 86.047);
|
||||
--warning-foreground: oklch(0.421 0.095 57.708);
|
||||
--info: oklch(0.606 0.25 292.717);
|
||||
--info-foreground: oklch(0.283 0.141 291.089);
|
||||
--invert: oklch(0.21 0.006 285.885);
|
||||
--invert-foreground: oklch(0.985 0 0);
|
||||
--chart-1: oklch(0.546 0.215 264.376);
|
||||
--chart-2: oklch(0.527 0.154 150.069);
|
||||
--chart-3: oklch(0.625 0.162 41.5);
|
||||
--chart-4: oklch(0.591 0.224 296.4);
|
||||
|
||||
/* Sidebar stays dark in the light theme. */
|
||||
--sidebar: oklch(0.152 0.01 264.376);
|
||||
--sidebar-foreground: oklch(0.92 0 0);
|
||||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.24 0.012 264.376);
|
||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||
--sidebar-border: oklch(1 0 0 / 8%);
|
||||
--sidebar-ring: oklch(0.488 0.243 264.376);
|
||||
}
|
||||
|
||||
/* Dark-sidebar scope in light theme: inner text/border/muted tokens follow the sidebar. */
|
||||
:root:not(.dark) [data-slot='sidebar-inner'] {
|
||||
--foreground: oklch(0.92 0 0);
|
||||
--muted-foreground: oklch(0.648 0.008 264.376);
|
||||
--border: oklch(1 0 0 / 8%);
|
||||
--muted: oklch(0.24 0.012 264.376);
|
||||
--background: oklch(0.133 0.011 264.376);
|
||||
--primary: oklch(0.922 0 0);
|
||||
--primary-foreground: oklch(0.205 0 0);
|
||||
--card: oklch(0.191 0.011 264.376);
|
||||
--input: oklch(1 0 0 / 15%);
|
||||
--accent: oklch(0.24 0.012 264.376);
|
||||
--accent-foreground: oklch(0.985 0 0);
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: oklch(0.133 0.011 264.376);
|
||||
--foreground: oklch(0.985 0 0);
|
||||
--card: oklch(0.191 0.011 264.376);
|
||||
--card-foreground: oklch(0.985 0 0);
|
||||
--popover: oklch(0.191 0.011 264.376);
|
||||
--popover-foreground: oklch(0.985 0 0);
|
||||
--primary: oklch(0.922 0 0);
|
||||
--primary-foreground: oklch(0.205 0 0);
|
||||
--secondary: oklch(0.252 0.01 264.376);
|
||||
--secondary-foreground: oklch(0.985 0 0);
|
||||
--muted: oklch(0.252 0.01 264.376);
|
||||
--muted-foreground: oklch(0.648 0.008 264.376);
|
||||
--accent: oklch(0.285 0.022 264.376);
|
||||
--accent-foreground: oklch(0.985 0 0);
|
||||
--border: oklch(1 0 0 / 10%);
|
||||
--input: oklch(1 0 0 / 15%);
|
||||
--ring: oklch(0.488 0.243 264.376);
|
||||
--destructive: oklch(0.704 0.191 22.216);
|
||||
--destructive-foreground: oklch(0.577 0.245 27.325);
|
||||
--success: oklch(0.696 0.17 162.48);
|
||||
--success-foreground: oklch(0.596 0.145 163.225);
|
||||
--warning: oklch(0.795 0.184 86.047);
|
||||
--warning-foreground: oklch(0.681 0.162 75.834);
|
||||
--info: oklch(0.606 0.25 292.717);
|
||||
--info-foreground: oklch(0.541 0.281 293.009);
|
||||
--invert: oklch(0.37 0.013 285.805);
|
||||
--invert-foreground: oklch(0.985 0 0);
|
||||
--chart-1: oklch(0.637 0.222 264.376);
|
||||
--chart-2: oklch(0.696 0.17 151.328);
|
||||
--chart-3: oklch(0.713 0.176 47.6);
|
||||
--chart-4: oklch(0.714 0.173 303.9);
|
||||
|
||||
--sidebar: oklch(0.191 0.011 264.376);
|
||||
--sidebar-foreground: oklch(0.985 0 0);
|
||||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.262 0.014 264.376);
|
||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||
--sidebar-border: oklch(1 0 0 / 10%);
|
||||
--sidebar-ring: oklch(0.488 0.243 264.376);
|
||||
}
|
||||
Reference in new issue
Block a user