CxWebApp/static/css/tokens.css
CxAI Agent d057e09fa2
Some checks are pending
build-and-push / image (push) Waiting to run
feat: add new panes for demand, diffusion, inbox, items, lang, mac, slack, system, tools, and websocket
- Implemented demand pane for managing trend-driven design jobs.
- Created diffusion pane for generating images via Stable Diffusion.
- Added inbox pane for sweeping and routing artifacts through the CxAI inbox classifier.
- Developed items pane for CRUD operations against /api/items.
- Introduced lang pane for running language pipelines.
- Established mac pane for macOS app distribution information.
- Integrated slack pane for sending messages and displaying diagnostics.
- Built system pane for process introspection and version information.
- Launched tools pane for browsing and invoking MCP tools.
- Set up websocket pane for connecting to the /ws/echo service.
2026-05-16 19:23:30 -05:00

91 lines
2.3 KiB
CSS

/* tokens.css — single source of truth for color, spacing, radii, shadows.
Switching themes flips the variable values; all components read from these. */
:root {
/* brand */
--brand: #7c5cff;
--brand-2: #00d4ff;
--brand-grad: linear-gradient(135deg, #7c5cff 0%, #00d4ff 100%);
/* surfaces (light) */
--bg: #f6f7fb;
--bg-elev: #ffffff;
--bg-elev-2: #ffffff;
--bg-hover: #eef0f6;
--bg-active: #e4e7ef;
--border: #e2e5ed;
--border-2: #d2d6e0;
/* text */
--fg: #0e1530;
--fg-muted: #5a6378;
--fg-faint: #8b93a6;
--fg-inverse: #ffffff;
/* semantic */
--ok: #16a34a;
--warn: #d97706;
--err: #e11d48;
--info: #2563eb;
--ok-bg: #dcfce7;
--warn-bg: #fef3c7;
--err-bg: #ffe4e6;
--info-bg: #dbeafe;
/* radii */
--r-sm: 6px;
--r: 10px;
--r-md: 14px;
--r-lg: 18px;
--r-xl: 24px;
/* shadows */
--shadow-1: 0 1px 2px rgb(15 23 42 / .04), 0 1px 1px rgb(15 23 42 / .03);
--shadow-2: 0 4px 12px rgb(15 23 42 / .08), 0 1px 3px rgb(15 23 42 / .04);
--shadow-3: 0 16px 40px rgb(15 23 42 / .14), 0 4px 12px rgb(15 23 42 / .08);
--ring: 0 0 0 3px rgb(124 92 255 / .22);
/* type */
--font-sans: ui-sans-serif, system-ui, -apple-system, "SF Pro Text",
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, "JetBrains Mono",
Menlo, Consolas, monospace;
/* layout */
--nav-w: 260px;
--header-h: 56px;
--pane-pad: 24px;
--gap: 16px;
}
html.dark {
--bg: #0a0d1c;
--bg-elev: #11162a;
--bg-elev-2: #161d36;
--bg-hover: #1a2240;
--bg-active: #232c4e;
--border: #232b46;
--border-2: #2e3759;
--fg: #e6e9f5;
--fg-muted: #98a0b8;
--fg-faint: #6b7390;
--fg-inverse: #0a0d1c;
--ok-bg: #052e1a;
--warn-bg: #3a2a08;
--err-bg: #3a0d18;
--info-bg: #0a1a3d;
--shadow-1: 0 1px 2px rgb(0 0 0 / .35);
--shadow-2: 0 4px 12px rgb(0 0 0 / .45);
--shadow-3: 0 16px 40px rgb(0 0 0 / .60);
}
@media (prefers-reduced-motion: no-preference) {
:root { --t-fast: 120ms; --t: 180ms; --t-slow: 240ms; }
}
@media (prefers-reduced-motion: reduce) {
:root { --t-fast: 0ms; --t: 0ms; --t-slow: 0ms; }
}