kimi-code / apps /vis /web /src /theme.css

Add files using upload-large-folder tool

7c5ed63 verified 9 days ago

7.02 kB

	@import "tailwindcss";

	/* ─────────────────────────────────────────────────────────────────────────
	Design tokens. Tailwind v4 @theme registers the variables AND generates
	utilities like `bg-surface-0`, `text-fg-0`. Dark theme is the baseline;
	light theme overrides the same variable names below.
	───────────────────────────────────────────────────────────────────────── */

	@theme {
	--font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
	--font-ui: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* Surface (dark baseline) */
	--color-surface-0: #0b0d12;
	--color-surface-1: #12151c;
	--color-surface-2: #1a1e27;
	--color-surface-3: #242936;
	--color-border: #1f2430;
	--color-border-strong: #2d3342;

	/* Foreground (dark baseline) */
	--color-fg-0: #e4e7ef;
	--color-fg-1: #a8afc0;
	--color-fg-2: #6c7488;
	--color-fg-3: #454c5e;

	/* Text color used on top of a solid accent pill (so contrast stays
	legible regardless of which accent). Dark theme: near-black. */
	--color-on-accent: #0b0d12;

	/* Category accents (dark baseline) */
	--color-cat-conversation: #22d3ee;
	--color-cat-config: #a78bfa;
	--color-cat-lifecycle: #94a3b8;
	--color-cat-subagent: #8b5cf6;
	--color-cat-approval: #fb923c;
	--color-cat-ephemeral: #facc15;
	--color-cat-meta: #6366f1;
	--color-cat-tools: #f59e0b;

	/* Conversation subfamily */
	--color-user: #38bdf8;
	--color-assistant: #22d3ee;
	--color-tool: #f59e0b;
	--color-compaction: #f97316;
	--color-turn: #14b8a6;

	/* Severity */
	--color-sev-info: #60a5fa;
	--color-sev-success: #4ade80;
	--color-sev-warning: #fbbf24;
	--color-sev-error: #f87171;
	}

	/* ─────────────────────────────────────────────────────────────────────────
	Light-theme overrides. Applied when <html data-theme="light">.
	Accents get darker variants for AA contrast on light backgrounds.
	───────────────────────────────────────────────────────────────────────── */

	:root[data-theme="light"] {
	color-scheme: light;

	--color-surface-0: #fafbfc;
	--color-surface-1: #eef1f6;
	--color-surface-2: #e4e8f0;
	--color-surface-3: #d4d9e4;
	--color-border: #dde1ea;
	--color-border-strong: #bfc6d4;

	--color-fg-0: #0f1219;
	--color-fg-1: #3a4154;
	--color-fg-2: #616878;
	--color-fg-3: #9097a8;

	--color-on-accent: #fafbfc;

	--color-cat-conversation: #0891b2;
	--color-cat-config: #7c3aed;
	--color-cat-lifecycle: #475569;
	--color-cat-subagent: #6d28d9;
	--color-cat-approval: #c2410c;
	--color-cat-ephemeral: #a16207;
	--color-cat-meta: #4338ca;
	--color-cat-tools: #b45309;

	--color-user: #0369a1;
	--color-assistant: #0891b2;
	--color-tool: #b45309;
	--color-compaction: #c2410c;
	--color-turn: #0d9488;

	--color-sev-info: #2563eb;
	--color-sev-success: #15803d;
	--color-sev-warning: #b45309;
	--color-sev-error: #b91c1c;
	}

	:root[data-theme="dark"] {
	color-scheme: dark;
	}

	/* ─────────────────────────────────────────────────────────────────────────
	Base
	───────────────────────────────────────────────────────────────────────── */

	html,
	body,
	#root {
	height: 100%;
	margin: 0;
	}

	body {
	font-family: var(--font-ui);
	font-size: 13px;
	line-height: 1.45;
	background-color: var(--color-surface-0);
	color: var(--color-fg-0);
	}

	/* Subtle noise grain only on dark — adds industrial texture. On light it
	just looks dirty, so omit. */
	:root:not([data-theme="light"]) body {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.9 0 0 0 0 0.92 0 0 0 0 0.98 0 0 0 0.035 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
	background-repeat: repeat;
	}

	/* Force-disable ligatures and contextual alternates in monospace — debug
	tool must render characters verbatim. */
	.font-mono {
	font-feature-settings: "liga" 0, "calt" 0, "ss01" 0;
	font-variant-ligatures: none;
	font-family: var(--font-mono);
	}

	.tabular {
	font-variant-numeric: tabular-nums;
	}

	/* Scrollbar */
	* {
	scrollbar-width: thin;
	scrollbar-color: var(--color-border-strong) transparent;
	}

	*::-webkit-scrollbar {
	width: 10px;
	height: 10px;
	}

	*::-webkit-scrollbar-track {
	background: transparent;
	}

	*::-webkit-scrollbar-thumb {
	background: var(--color-border-strong);
	border-radius: 0;
	border: 2px solid transparent;
	background-clip: padding-box;
	}

	*::-webkit-scrollbar-thumb:hover {
	background: var(--color-fg-3);
	background-clip: padding-box;
	border: 2px solid transparent;
	}

	::selection {
	background-color: color-mix(in oklab, var(--color-cat-conversation) 30%, transparent);
	color: var(--color-fg-0);
	}

	*:focus-visible {
	outline: 1px solid var(--color-cat-conversation);
	outline-offset: 1px;
	}

	/* Button + anchor element resets — kept inside @layer base so Tailwind
	utilities (px-, py-, etc.) in the utilities layer win over them.
	Unlayered rules would otherwise beat layered utilities in the cascade. */
	@layer base {
	button {
	font-family: inherit;
	font-size: inherit;
	background: none;
	border: none;
	padding: 0;
	color: inherit;
	cursor: pointer;
	}

	a {
	color: inherit;
	text-decoration: none;
	}
	}

	.rule {
	border-top: 1px solid var(--color-border);
	}

	.accent-bar {
	width: 3px;
	flex-shrink: 0;
	align-self: stretch;
	}

	.ephemeral-border {
	border: 1px dashed var(--color-cat-ephemeral);
	border-radius: 2px;
	}

	.ephemeral-border-info {
	border-color: var(--color-sev-info);
	}
	.ephemeral-border-success {
	border-color: var(--color-sev-success);
	}
	.ephemeral-border-warning {
	border-color: var(--color-sev-warning);
	}
	.ephemeral-border-error {
	border-color: var(--color-sev-error);
	}

	.pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 1px 6px;
	font-family: var(--font-mono);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	border-radius: 2px;
	white-space: nowrap;
	line-height: 1.4;
	}