From ac635e91eb8ca2b1c0ae336319f415fd9dbf3005 Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Tue, 19 May 2026 11:56:38 +0700
Subject: [PATCH] =?UTF-8?q?web(ui):=20design=20tokens=20=E2=80=94=20spacin?=
 =?UTF-8?q?g=20and=20component=20scale?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 web/src/lib/ui/app/tokens.md | 22 ++++++++++++++++++++++
 web/src/routes/layout.css    |  5 +++++
 2 files changed, 27 insertions(+)
 create mode 100644 web/src/lib/ui/app/tokens.md

diff --git a/web/src/lib/ui/app/tokens.md b/web/src/lib/ui/app/tokens.md
new file mode 100644
index 0000000..b112ae5
--- /dev/null
+++ b/web/src/lib/ui/app/tokens.md
@@ -0,0 +1,22 @@
+# Design tokens (EvoBGP WebUI)
+
+Базовая тема — [shadcn-svelte](https://www.shadcn-svelte.com), переменные в [`src/routes/layout.css`](../../routes/layout.css).
+
+## Layout
+
+| Token | Значение | Tailwind |
+|-------|----------|----------|
+| `--page-padding` | 1.5rem | `p-page` через `p-[var(--page-padding)]` |
+| `--section-gap` | 1.5rem | `gap-section` |
+
+## Радиусы
+
+`--radius-sm` … `--radius-xl` — из `--radius` (shadcn).
+
+## Семантика
+
+`success`, `warning`, `info`, `destructive` — классы `text-success`, `bg-warning/10`, `border-info` и т.д.
+
+## Размеры компонентов
+
+Button/Input: `sm` | `default` | `lg` — через `buttonVariants` и классы input в `ui/core`.
diff --git a/web/src/routes/layout.css b/web/src/routes/layout.css
index c983beb..e010c7c 100644
--- a/web/src/routes/layout.css
+++ b/web/src/routes/layout.css
@@ -40,6 +40,9 @@
 	--sidebar-accent-foreground: oklch(0.205 0 0);
 	--sidebar-border: oklch(0.922 0 0);
 	--sidebar-ring: oklch(0.708 0 0);
+	/* EvoBGP page layout */
+	--page-padding: 1.5rem;
+	--section-gap: 1.5rem;
 }
 
 .dark {
@@ -118,6 +121,8 @@
 	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
 	--color-sidebar-border: var(--sidebar-border);
 	--color-sidebar-ring: var(--sidebar-ring);
+	--spacing-page: var(--page-padding);
+	--spacing-section: var(--section-gap);
 }
 
 @layer base {