From 09c9531ad9aea95077930a237e6c15eec4e80255 Mon Sep 17 00:00:00 2001 From: Denozordec Date: Fri, 23 Oct 2026 18:11:29 +0700 Subject: [PATCH] =?UTF-8?q?feat(ui):=20=D0=BF=D0=B0=D0=BB=D0=B8=D1=82?= =?UTF-8?q?=D1=80=D0=B0=20=D1=82=D0=BE=D0=BA=D0=B5=D0=BD=D0=BE=D0=B2=20?= =?UTF-8?q?=D0=BA=D0=B0=D0=BA=20=D0=B2=20MikrotikManager=20(light/dark)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit packages/ui/src/styles/globals.css: значения :root/.dark перенесены из MikrotikManager app/globals.css (background, card, primary, secondary, muted, accent, destructive, border, input, ring, chart-1..5, sidebar-*, success/info/ warning/invert). Добавлены токены MM: chart-line-1..4, chart-rx/tx, status-* (online/offline/degraded + fg/bg). Шкала радиусов -sm..-4xl как в MM (множители от --radius 0.625rem). Имена токенов ReUI/shadcn сохранены, --focus* оставлены (используются ReUI). Co-Authored-By: Claude Sonnet 5.5 --- packages/ui/src/styles/globals.css | 117 ++++++++++++++++++----------- 1 file changed, 75 insertions(+), 42 deletions(-) diff --git a/packages/ui/src/styles/globals.css b/packages/ui/src/styles/globals.css index c5fe0af..394e5dc 100644 --- a/packages/ui/src/styles/globals.css +++ b/packages/ui/src/styles/globals.css @@ -8,37 +8,37 @@ :root { --radius: 0.625rem; - --background: oklch(1 0 0); - --foreground: oklch(0.145 0 0); + --background: oklch(0.973 0.004 247.858); + --foreground: oklch(0.141 0.006 264.0); --card: oklch(1 0 0); - --card-foreground: oklch(0.145 0 0); + --card-foreground: oklch(0.141 0.006 264.0); --popover: oklch(1 0 0); - --popover-foreground: oklch(0.145 0 0); + --popover-foreground: oklch(0.141 0.006 264.0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); - --secondary: oklch(0.97 0 0); + --secondary: oklch(0.958 0.005 247.858); --secondary-foreground: oklch(0.205 0 0); - --muted: oklch(0.97 0 0); - --muted-foreground: oklch(0.556 0 0); - --accent: oklch(0.97 0 0); + --muted: oklch(0.958 0.005 247.858); + --muted-foreground: oklch(0.520 0.010 264.0); + --accent: oklch(0.942 0.016 264.376); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); - --border: oklch(0.922 0 0); - --input: oklch(0.922 0 0); - --ring: oklch(0.708 0 0); - --chart-1: oklch(0.646 0.222 41.116); - --chart-2: oklch(0.6 0.118 184.704); - --chart-3: oklch(0.398 0.07 227.392); - --chart-4: oklch(0.828 0.189 84.429); - --chart-5: oklch(0.769 0.188 70.08); - --sidebar: oklch(0.985 0 0); - --sidebar-foreground: oklch(0.145 0 0); - --sidebar-primary: oklch(0.205 0 0); + --border: oklch(0.904 0.006 264.0); + --input: oklch(0.904 0.006 264.0); + --ring: oklch(0.488 0.243 264.376); + --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.500); + --chart-4: oklch(0.591 0.224 296.400); + --chart-5: oklch(0.577 0.245 27.325); + --sidebar: oklch(0.152 0.010 264.376); + --sidebar-foreground: oklch(0.920 0 0); + --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); - --sidebar-accent: oklch(0.97 0 0); - --sidebar-accent-foreground: oklch(0.205 0 0); - --sidebar-border: oklch(0.922 0 0); - --sidebar-ring: oklch(0.708 0 0); + --sidebar-accent: oklch(0.240 0.012 264.376); + --sidebar-accent-foreground: oklch(0.950 0 0); + --sidebar-border: oklch(1 0 0 / 8%); + --sidebar-ring: oklch(0.488 0.243 264.376); --destructive-foreground: var(--color-red-800); --success: var(--color-emerald-500); --success-foreground: var(--color-emerald-900); @@ -50,40 +50,55 @@ --invert-foreground: var(--color-zinc-50); --focus: var(--color-blue-500); --focus-foreground: var(--color-blue-900); + --chart-line-1: oklch(0.527 0.154 150.069); + --chart-line-2: oklch(0.546 0.215 264.376); + --chart-line-3: oklch(0.625 0.162 41.500); + --chart-line-4: oklch(0.591 0.224 296.400); + --chart-rx: oklch(0.527 0.154 150.069); + --chart-tx: oklch(0.546 0.215 264.376); + --status-online: oklch(0.527 0.154 150.069); + --status-offline: oklch(0.577 0.245 27.325); + --status-degraded: oklch(0.666 0.179 58.318); + --status-online-fg: oklch(0.437 0.149 150.069); + --status-online-bg: oklch(0.527 0.154 150.069 / 0.10); + --status-offline-fg: oklch(0.505 0.213 27.325); + --status-offline-bg: oklch(0.577 0.245 27.325 / 0.10); + --status-degraded-fg: oklch(0.555 0.163 58.318); + --status-degraded-bg: oklch(0.666 0.179 58.318 / 0.10); } .dark { - --background: oklch(0.145 0 0); + --background: oklch(0.133 0.011 264.376); --foreground: oklch(0.985 0 0); - --card: oklch(0.205 0 0); + --card: oklch(0.191 0.011 264.376); --card-foreground: oklch(0.985 0 0); - --popover: oklch(0.205 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.269 0 0); + --secondary: oklch(0.252 0.010 264.376); --secondary-foreground: oklch(0.985 0 0); - --muted: oklch(0.269 0 0); - --muted-foreground: oklch(0.708 0 0); - --accent: oklch(0.269 0 0); + --muted: oklch(0.252 0.010 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); --destructive: oklch(0.704 0.191 22.216); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); - --ring: oklch(0.556 0 0); - --chart-1: oklch(0.488 0.243 264.376); - --chart-2: oklch(0.696 0.17 162.48); - --chart-3: oklch(0.769 0.188 70.08); - --chart-4: oklch(0.627 0.265 303.9); - --chart-5: oklch(0.645 0.246 16.439); - --sidebar: oklch(0.205 0 0); + --ring: oklch(0.488 0.243 264.376); + --chart-1: oklch(0.637 0.222 264.376); + --chart-2: oklch(0.696 0.170 151.328); + --chart-3: oklch(0.713 0.176 47.600); + --chart-4: oklch(0.714 0.173 303.900); + --chart-5: oklch(0.704 0.191 22.216); + --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.269 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.556 0 0); + --sidebar-ring: oklch(0.488 0.243 264.376); --destructive-foreground: var(--color-red-600); --success: var(--color-emerald-500); --success-foreground: var(--color-emerald-600); @@ -95,6 +110,21 @@ --invert-foreground: var(--color-zinc-50); --focus: var(--color-blue-500); --focus-foreground: var(--color-blue-600); + --chart-line-1: oklch(0.696 0.170 151.328); + --chart-line-2: oklch(0.637 0.222 264.376); + --chart-line-3: oklch(0.713 0.176 47.600); + --chart-line-4: oklch(0.714 0.173 303.900); + --chart-rx: oklch(0.696 0.170 151.328); + --chart-tx: oklch(0.637 0.222 264.376); + --status-online: oklch(0.527 0.154 150.069); + --status-offline: oklch(0.577 0.245 27.325); + --status-degraded: oklch(0.666 0.179 58.318); + --status-online-fg: oklch(0.696 0.170 151.328); + --status-online-bg: oklch(0.527 0.154 150.069 / 0.12); + --status-offline-fg: oklch(0.704 0.191 22.216); + --status-offline-bg: oklch(0.577 0.245 27.325 / 0.12); + --status-degraded-fg: oklch(0.769 0.149 70.080); + --status-degraded-bg: oklch(0.666 0.179 58.318 / 0.12); } @theme inline { @@ -129,10 +159,13 @@ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); - --radius-sm: calc(var(--radius) - 4px); - --radius-md: calc(var(--radius) - 2px); + --radius-sm: calc(var(--radius) * 0.6); + --radius-md: calc(var(--radius) * 0.8); --radius-lg: var(--radius); - --radius-xl: calc(var(--radius) + 4px); + --radius-xl: calc(var(--radius) * 1.4); + --radius-2xl: calc(var(--radius) * 1.8); + --radius-3xl: calc(var(--radius) * 2.2); + --radius-4xl: calc(var(--radius) * 2.6); --color-invert-foreground: var(--invert-foreground); --color-invert: var(--invert); --color-warning-foreground: var(--warning-foreground);