ars9
9916ef5aaf
- 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
135 lines
4.1 KiB
CSS
135 lines
4.1 KiB
CSS
: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 */
|
|
}
|