Skip to content

[local-explorer-ui] Revert to default Kumo theme #13029

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
MattieTK wants to merge 2 commits into from
Closed

[local-explorer-ui] Revert to default Kumo theme #13029

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7da257f
[local-explorer-ui] Revert to default Kumo theme, removing orange Wor…
MattieTK Mar 23, 2026
0603693
[local-explorer-ui] Fix dark mode: improve tonal depth and add Kumo t…
MattieTK Mar 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
191 changes: 99 additions & 92 deletions packages/local-explorer-ui/src/styles/tailwind.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,34 +6,34 @@
@custom-variant dark (@media (prefers-color-scheme: dark));

@theme {
/* Cloudflare Workers brand colors - Light mode (default) */
--color-bg: #fffdfb;
--color-bg-secondary: #fef7ed;
--color-bg-tertiary: #fffbf5;
--color-text: #521000;
--color-text-secondary: #521000b3;
--color-border: #ebd5c1;
--color-primary: #ff4801;
--color-primary-hover: #ff7038;
--color-danger: #fb2c36;
/* Light mode (default) — neutral palette aligned with Kumo defaults */
--color-bg: #ffffff;
--color-bg-secondary: #f9fafb;
--color-bg-tertiary: #f3f4f6;
--color-text: #111827;
--color-text-secondary: #111827b3;
--color-border: #e5e7eb;
--color-primary: oklch(0.5772 0.2324 260);
--color-primary-hover: oklch(0.488 0.243 264.376);
--color-danger: #ef4444;
--color-danger-hover: #dc2626;
--color-success: #16a34a;

/* Surface colors */
--color-surface: #fef7ed;
--color-surface-secondary: #f5f0eb;
--color-surface-tertiary: #ebe3db;
--color-muted: #8a6e5c;
--color-accent: #f0e6dc;
--color-background: #fffdfb;
--color-border-active: #ff4801;
--color-tooltip-bg: #3d2e24;
--color-tooltip-text: #ffeee6;
--color-resizer: #d4c4b6;
--color-surface: #f9fafb;
--color-surface-secondary: #f3f4f6;
--color-surface-tertiary: #e5e7eb;
--color-muted: #6b7280;
--color-accent: #e5e7eb;
--color-background: #ffffff;
--color-border-active: oklch(0.5772 0.2324 260);
--color-tooltip-bg: #1f2937;
--color-tooltip-text: #f9fafb;
--color-resizer: #d1d5db;

/* SQL editor chrome */
--color-selection: rgba(82, 16, 0, 0.12);
--color-active-line: rgba(82, 16, 0, 0.05);
--color-selection: rgba(17, 24, 39, 0.1);
--color-active-line: rgba(17, 24, 39, 0.04);

/* SQL editor syntax highlighting */
--color-syntax-keyword: #0000ff;
Expand All @@ -44,81 +44,43 @@
--color-syntax-table: #e84393;

/* Focus ring shadows */
--shadow-focus-primary: 0 0 0 3px rgba(255, 72, 1, 0.15);
--shadow-focus-danger: 0 0 0 3px rgba(251, 44, 54, 0.15);
--shadow-focus-primary: 0 0 0 3px oklch(0.5772 0.2324 260 / 0.15);
--shadow-focus-danger: 0 0 0 3px rgba(239, 68, 68, 0.15);

/* Custom sizing */
--width-sidebar: 240px;
}

/*
* Map @cloudflare/kumo component tokens to our brand theme.
* Kumo's DropdownMenu, Button, Input, Tooltip, etc. reference --color-kumo-*
* and --text-color-kumo-* variables internally. Without these mappings,
* backgrounds and text colors resolve to transparent/invisible.
*/
:root {
/* Background tokens */
--color-kumo-base: var(--color-background);
--color-kumo-control: var(--color-surface);
--color-kumo-elevated: var(--color-surface-secondary);
--color-kumo-overlay: var(--color-accent);
--color-kumo-recessed: var(--color-surface-tertiary);
--color-kumo-tint: var(--color-surface-secondary);

/* Interactive / brand tokens */
--color-kumo-brand: var(--color-primary);
--color-kumo-brand-hover: var(--color-primary-hover);
--color-kumo-interact: var(--color-surface-tertiary);
--color-kumo-danger: var(--color-danger);

/* Border / line tokens */
--color-kumo-fill: var(--color-border);
--color-kumo-line: var(--color-border);
--color-kumo-ring: var(--color-muted);

/* Tooltip tokens */
--color-kumo-tip-shadow: rgba(0, 0, 0, 0.08);
--color-kumo-tip-stroke: transparent;

/* Text color tokens */
--text-color-kumo-default: var(--color-text);
--text-color-kumo-subtle: var(--color-muted);
--text-color-kumo-inactive: var(--color-muted);
--text-color-kumo-danger: var(--color-danger);
--text-color-kumo-link: var(--color-primary);
}

/* Dark mode color overrides */
@media (prefers-color-scheme: dark) {
:root {
--color-bg: #1a1412;
--color-bg-secondary: #0f0c0a;
--color-bg-tertiary: #231c18;
--color-text: #ffeee6;
--color-text-secondary: #ffeee6b3;
--color-border: #3d2e24;
--color-primary: #ff6b33;
--color-primary-hover: #ff8855;
--color-danger: #ff4d55;
--color-bg: #161616;
--color-bg-secondary: #0e0e0e;
--color-bg-tertiary: #1e1e1e;
--color-text: #e5e5e5;
--color-text-secondary: #e5e5e5b3;
--color-border: #2e2e2e;
--color-primary: oklch(0.5772 0.2324 260);
--color-primary-hover: oklch(0.488 0.243 264.376);
--color-danger: #f87171;
--color-danger-hover: #ef4444;
--color-success: #22c55e;

/* Studio surface colors — dark mode */
--color-surface: #0f0c0a;
--color-surface-secondary: #231c18;
--color-surface-tertiary: #3d2e24;
--color-muted: #a08678;
--color-accent: #2e221a;
--color-background: #1a1412;
--color-border-active: #ff6b33;
--color-tooltip-bg: #3d2e24;
--color-tooltip-text: #ffeee6;
--color-resizer: #3d2e24;
/* Surface colors — dark mode */
--color-surface: #0e0e0e;
--color-surface-secondary: #1e1e1e;
--color-surface-tertiary: #2e2e2e;
--color-muted: #9a9a9a;
--color-accent: #252525;
--color-background: #161616;
--color-border-active: oklch(0.5772 0.2324 260);
--color-tooltip-bg: #2e2e2e;
--color-tooltip-text: #e5e5e5;
--color-resizer: #2e2e2e;

/* SQL editor chrome — dark mode */
--color-selection: rgba(255, 238, 230, 0.15);
--color-active-line: rgba(255, 238, 230, 0.06);
--color-selection: rgba(229, 229, 229, 0.12);
--color-active-line: rgba(229, 229, 229, 0.05);

/* SQL editor syntax highlighting — dark mode */
--color-syntax-keyword: #4078f2;
Expand All @@ -128,15 +90,60 @@
--color-syntax-operator: #bfbfbf;
--color-syntax-table: #fd79a8;

--shadow-focus-primary: 0 0 0 3px rgba(255, 107, 51, 0.25);
--shadow-focus-danger: 0 0 0 3px rgba(255, 77, 85, 0.25);

/* Kumo tooltip overrides for dark mode */
--shadow-focus-primary: 0 0 0 3px oklch(0.5772 0.2324 260 / 0.25);
--shadow-focus-danger: 0 0 0 3px rgba(248, 113, 113, 0.25);

/*
* Kumo dark mode token overrides.
* Kumo's theme-kumo.css uses light-dark() which requires color-scheme: dark
* (set via data-mode="dark"). Since this app uses prefers-color-scheme
* media queries instead, we must explicitly set the dark-side values here.
* Values are taken directly from Kumo's theme-kumo.css defaults.
*/

/* Background tokens */
--color-kumo-base: oklch(0% 0 0); /* black */
--color-kumo-elevated: oklch(14.5% 0 0); /* neutral-950 */
--color-kumo-recessed: oklch(0.31 0 0); /* neutral-750 */
--color-kumo-overlay: oklch(26.9% 0 0); /* neutral-800 */
--color-kumo-contrast: oklch(97% 0 0); /* neutral-100 */
--color-kumo-control: oklch(21% 0.006 285.885); /* neutral-900 */
--color-kumo-tint: oklch(0.23 0 0); /* neutral-850 */
--color-kumo-interact: oklch(37.1% 0 0); /* neutral-700 */

/* Fill / border tokens */
--color-kumo-fill: oklch(26.9% 0 0); /* neutral-800 */
--color-kumo-fill-hover: oklch(37.1% 0 0); /* neutral-700 */
--color-kumo-line: oklch(26.9% 0 0); /* neutral-800 */
--color-kumo-ring: oklch(43.9% 0 0); /* neutral-600 */

/* Brand tokens */
--color-kumo-brand: oklch(0.5772 0.2324 260);
--color-kumo-brand-hover: oklch(48.8% 0.243 264.376); /* blue-700 */

/* Semantic tokens */
--color-kumo-danger: oklch(50.5% 0.213 27.518); /* red-700 */
--color-kumo-danger-tint: oklch(39.6% 0.141 25.723); /* red-900 */
--color-kumo-info: oklch(48.8% 0.243 264.376); /* blue-700 */
--color-kumo-info-tint: oklch(37.9% 0.146 265.522); /* blue-900 */
--color-kumo-warning: oklch(55.4% 0.135 66.442); /* yellow-700 */
--color-kumo-warning-tint: oklch(42.1% 0.095 57.708); /* yellow-900 */

/* Tooltip tokens */
--color-kumo-tip-shadow: transparent;
--color-kumo-tip-stroke: var(--color-border);

/* Kumo overlay override for dark mode - darker backdrop for dialogs */
--color-kumo-overlay: var(--color-surface);
--color-kumo-tip-stroke: oklch(26.9% 0 0); /* neutral-800 */

/* Text tokens */
--text-color-kumo-default: oklch(97% 0 0); /* neutral-100 */
--text-color-kumo-inverse: oklch(20.5% 0 0); /* neutral-900 */
--text-color-kumo-strong: oklch(70.8% 0 0); /* neutral-400 */
--text-color-kumo-subtle: oklch(98.5% 0 0); /* neutral-50 */
--text-color-kumo-inactive: oklch(70.8% 0 0); /* neutral-400 */
--text-color-kumo-brand: #f6821f;
--text-color-kumo-link: oklch(70.7% 0.165 254.624); /* blue-400 */
--text-color-kumo-success: oklch(72.3% 0.219 149.579); /* green-500 */
--text-color-kumo-danger: oklch(70.4% 0.191 22.216); /* red-400 */
--text-color-kumo-warning: oklch(85.2% 0.199 91.936); /* yellow-400 */
}
}

Expand Down
Loading