agent-orchestrator/ui-gpui/src/theme.rs
Hibryda f3d2ca78ba feat: add Dioxus and GPUI UI prototypes for framework comparison
Dioxus (ui-dioxus/): 2,169 lines, WebView mode (same wry as Tauri),
  Catppuccin theme, 12 components, agor-core integration, compiles clean.
  Evolution path — keeps xterm.js, gradual migration from Tauri.

GPUI (ui-gpui/): 2,490 lines, GPU-accelerated rendering, alacritty_terminal
  for native terminal, 17 files, Catppuccin palette, demo data.
  Revolution path — pure Rust UI, 120fps target, no WebView.

Both are standalone (not in workspace), share agor-core backend.
Created for side-by-side comparison to inform framework decision.
2026-03-19 06:05:58 +01:00

204 lines
5.2 KiB
Rust

//! Catppuccin Mocha palette as GPUI color constants.
//!
//! All colors are defined as `gpui::Rgba` via the `rgb()` helper.
//! Components import `theme::*` and use these constants for every visual property.
use gpui::Rgba;
/// Convert a 0xRRGGBB hex literal to `Rgba`.
/// Re-exports `gpui::rgb` for convenience.
pub fn color(hex: u32) -> Rgba {
gpui::rgb(hex)
}
// ── Backgrounds ─────────────────────────────────────────────────────
pub const BASE: Rgba = Rgba {
r: 0x1e as f32 / 255.0,
g: 0x1e as f32 / 255.0,
b: 0x2e as f32 / 255.0,
a: 1.0,
};
pub const MANTLE: Rgba = Rgba {
r: 0x18 as f32 / 255.0,
g: 0x16 as f32 / 255.0,
b: 0x25 as f32 / 255.0,
a: 1.0,
};
pub const CRUST: Rgba = Rgba {
r: 0x11 as f32 / 255.0,
g: 0x11 as f32 / 255.0,
b: 0x1b as f32 / 255.0,
a: 1.0,
};
// ── Surfaces ────────────────────────────────────────────────────────
pub const SURFACE0: Rgba = Rgba {
r: 0x31 as f32 / 255.0,
g: 0x32 as f32 / 255.0,
b: 0x44 as f32 / 255.0,
a: 1.0,
};
pub const SURFACE1: Rgba = Rgba {
r: 0x45 as f32 / 255.0,
g: 0x47 as f32 / 255.0,
b: 0x5a as f32 / 255.0,
a: 1.0,
};
pub const SURFACE2: Rgba = Rgba {
r: 0x58 as f32 / 255.0,
g: 0x5b as f32 / 255.0,
b: 0x70 as f32 / 255.0,
a: 1.0,
};
// ── Text ────────────────────────────────────────────────────────────
pub const TEXT: Rgba = Rgba {
r: 0xcd as f32 / 255.0,
g: 0xd6 as f32 / 255.0,
b: 0xf4 as f32 / 255.0,
a: 1.0,
};
pub const SUBTEXT0: Rgba = Rgba {
r: 0xa6 as f32 / 255.0,
g: 0xad as f32 / 255.0,
b: 0xc8 as f32 / 255.0,
a: 1.0,
};
pub const SUBTEXT1: Rgba = Rgba {
r: 0xba as f32 / 255.0,
g: 0xc2 as f32 / 255.0,
b: 0xde as f32 / 255.0,
a: 1.0,
};
// ── Overlays ────────────────────────────────────────────────────────
pub const OVERLAY0: Rgba = Rgba {
r: 0x6c as f32 / 255.0,
g: 0x70 as f32 / 255.0,
b: 0x86 as f32 / 255.0,
a: 1.0,
};
pub const OVERLAY1: Rgba = Rgba {
r: 0x7f as f32 / 255.0,
g: 0x84 as f32 / 255.0,
b: 0x9c as f32 / 255.0,
a: 1.0,
};
pub const OVERLAY2: Rgba = Rgba {
r: 0x93 as f32 / 255.0,
g: 0x99 as f32 / 255.0,
b: 0xb2 as f32 / 255.0,
a: 1.0,
};
// ── Accent Colors ───────────────────────────────────────────────────
pub const BLUE: Rgba = Rgba {
r: 0x89 as f32 / 255.0,
g: 0xb4 as f32 / 255.0,
b: 0xfa as f32 / 255.0,
a: 1.0,
};
pub const GREEN: Rgba = Rgba {
r: 0xa6 as f32 / 255.0,
g: 0xe3 as f32 / 255.0,
b: 0xa1 as f32 / 255.0,
a: 1.0,
};
pub const RED: Rgba = Rgba {
r: 0xf3 as f32 / 255.0,
g: 0x8b as f32 / 255.0,
b: 0xa8 as f32 / 255.0,
a: 1.0,
};
pub const YELLOW: Rgba = Rgba {
r: 0xf9 as f32 / 255.0,
g: 0xe2 as f32 / 255.0,
b: 0xaf as f32 / 255.0,
a: 1.0,
};
pub const MAUVE: Rgba = Rgba {
r: 0xcb as f32 / 255.0,
g: 0xa6 as f32 / 255.0,
b: 0xf7 as f32 / 255.0,
a: 1.0,
};
pub const PEACH: Rgba = Rgba {
r: 0xfa as f32 / 255.0,
g: 0xb3 as f32 / 255.0,
b: 0x87 as f32 / 255.0,
a: 1.0,
};
pub const TEAL: Rgba = Rgba {
r: 0x94 as f32 / 255.0,
g: 0xe2 as f32 / 255.0,
b: 0xd5 as f32 / 255.0,
a: 1.0,
};
pub const SAPPHIRE: Rgba = Rgba {
r: 0x74 as f32 / 255.0,
g: 0xc7 as f32 / 255.0,
b: 0xec as f32 / 255.0,
a: 1.0,
};
pub const LAVENDER: Rgba = Rgba {
r: 0xb4 as f32 / 255.0,
g: 0xbe as f32 / 255.0,
b: 0xfe as f32 / 255.0,
a: 1.0,
};
pub const FLAMINGO: Rgba = Rgba {
r: 0xf2 as f32 / 255.0,
g: 0xcd as f32 / 255.0,
b: 0xcd as f32 / 255.0,
a: 1.0,
};
pub const ROSEWATER: Rgba = Rgba {
r: 0xf5 as f32 / 255.0,
g: 0xe0 as f32 / 255.0,
b: 0xdc as f32 / 255.0,
a: 1.0,
};
pub const PINK: Rgba = Rgba {
r: 0xf5 as f32 / 255.0,
g: 0xc2 as f32 / 255.0,
b: 0xe7 as f32 / 255.0,
a: 1.0,
};
pub const MAROON: Rgba = Rgba {
r: 0xeb as f32 / 255.0,
g: 0xa0 as f32 / 255.0,
b: 0xac as f32 / 255.0,
a: 1.0,
};
pub const SKY: Rgba = Rgba {
r: 0x89 as f32 / 255.0,
g: 0xdc as f32 / 255.0,
b: 0xeb as f32 / 255.0,
a: 1.0,
};
// ── Semi-transparent helpers ────────────────────────────────────────
pub fn with_alpha(base: Rgba, alpha: f32) -> Rgba {
Rgba { a: alpha, ..base }
}
/// Accent blue at 10% opacity — for subtle hover/selection highlights.
pub fn blue_tint() -> Rgba {
with_alpha(BLUE, 0.10)
}
/// Accent blue at 20% opacity — for active/selected states.
pub fn blue_wash() -> Rgba {
with_alpha(BLUE, 0.20)
}
/// Surface for hover states — one step brighter than surface0.
pub fn hover_bg() -> Rgba {
SURFACE1
}