feat(client): add UI kit, data layer, app shell, and Table component

- design token system (Atlantis, Kimberly, Powder Ash palette) - Button, Badge, Input, Select, Card, SidePanel, Breadcrumbs components - generic typed Table<T> component with loading/empty states - API data layer: typed fetch client for environments, keys, sessions, scenarios - Vite dev proxy targeting server on port 13000 - App shell with SidePanel nav and four entity pages (Environments, Keys, Sessions, Scenarios) - Storybook config with dark/light theme toggle and a11y addon
2026-04-09 00:11:55 +03:00
parent 5cc16725fb
commit 9916ef5aaf
47 changed files with 3910 additions and 10 deletions
@@ -0,0 +1,134 @@
+:root {
+  /* ── Palette ──────────────────────────────────────────────────────────────
+   * Atlantis    #9DD341  — primary / action
+   * Outer Space #2D3339  — text / surfaces
+   * Kimberly    #6650C0  — accent / info / muted text
+   * Powder Ash  #AFBFB9  — borders / neutral
+   * ──────────────────────────────────────────────────────────────────────── */
+
+  /* Primary — Atlantis */
+  --color-primary: #9DD341;
+  --color-primary-hover: #8ABD2E;
+  --color-primary-active: #77A320;
+  --color-primary-fg: #2D3339;   /* Outer Space on bright green */
+
+  /* Secondary — Kimberly tint */
+  --color-secondary: #EDEAF8;
+  --color-secondary-hover: #DDD8F2;
+  --color-secondary-active: #CCC5EB;
+  --color-secondary-fg: #6650C0;   /* Kimberly */
+  --color-secondary-border: #B8B0E0;
+
+  /* Danger */
+  --color-danger: #D94F4F;
+  --color-danger-hover: #C03A3A;
+  --color-danger-fg: #ffffff;
+
+  /* Semantic */
+  --color-success-bg: #EEF8D6;   /* Atlantis tint */
+  --color-success-fg: #3E6010;
+  --color-error-bg: #FAEAEA;
+  --color-error-fg: #8B2020;
+  --color-warning-bg: #FEF5E0;
+  --color-warning-fg: #7A4E00;
+  --color-info-bg: #EEEDF6;      /* Kimberly tint */
+  --color-info-fg: #4A4270;
+  --color-neutral-bg: #EDF1EF;   /* Powder Ash tint */
+  --color-neutral-fg: #4D6059;
+  --color-running-bg: #FEF9C3;
+  --color-running-fg: #6B4A00;
+
+  /* Text & Surface — Outer Space */
+  --color-text: #2D3339;
+  --color-text-muted: #6650C0;   /* Kimberly */
+  --color-border: #AFBFB9;       /* Powder Ash */
+  --color-bg: #E6EDEA;          /* Powder Ash tint */
+  --color-bg-subtle: #D8E2DE;   /* Powder Ash tint, 1 step darker */
+
+  /* Spacing */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+
+  /* Border radius */
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-full: 9999px;
+
+  /* Typography */
+  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-size-xs: 13px;
+  --font-size-sm: 15px;
+  --font-size-md: 17px;
+  --font-size-lg: 20px;
+
+  /* Borders */
+  --border-width: 1.5px;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
+
+  /* Transitions */
+  --transition: 150ms ease;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: var(--font-family);
+  color: var(--color-text);
+  background: var(--color-bg);
+  margin: 0;
+}
+
+/* ── Dark theme ─────────────────────────────────────────────────────────── */
+[data-theme="dark"] {
+  /* Primary — Atlantis unchanged, pops well on dark */
+  --color-primary: #9DD341;
+  --color-primary-hover: #AEDE55;
+  --color-primary-active: #8ABD2E;
+  --color-primary-fg: #1A1F24;
+
+  /* Secondary — dark Kimberly tint */
+  --color-secondary: #2A2548;
+  --color-secondary-hover: #352F58;
+  --color-secondary-active: #403868;
+  --color-secondary-fg: #A9A3C9;   /* lightened Kimberly */
+  --color-secondary-border: #5A538A;
+
+  /* Danger */
+  --color-danger: #E06060;
+  --color-danger-hover: #CC4A4A;
+  --color-danger-fg: #1A1F24;
+
+  /* Semantic */
+  --color-success-bg: #1A3410;
+  --color-success-fg: #9DD341;
+  --color-error-bg: #3A1212;
+  --color-error-fg: #F08888;
+  --color-warning-bg: #3A2800;
+  --color-warning-fg: #F0C860;
+  --color-info-bg: #1E1A38;
+  --color-info-fg: #B0AAD6;   /* lightened Kimberly */
+  --color-neutral-bg: #2D3339;
+  --color-neutral-fg: #AFBFB9;
+  --color-running-bg: #382E00;
+  --color-running-fg: #F0D060;
+
+  /* Text & Surface */
+  --color-text: #E2EAE6;
+  --color-text-muted: #A9A3C9;  /* lightened Kimberly */
+  --color-border: #3D4850;
+  --color-bg: #1A1F24;          /* deeper than Outer Space */
+  --color-bg-subtle: #2D3339;   /* Outer Space */
+}