asepharyana
3f5f27c339
- Updated status bar rendering in `status.rs` to feature a segmented design with clear visual segments for app name, status, and metadata. - Refined color theme in `theme.rs` to adopt a modern dark palette with neon accents, improving visual hierarchy and readability. - Revamped workflow panel in `workflow.rs` to display agent statuses as compact cards with state badges, enhancing clarity and user experience. - Improved overall styling consistency across components, ensuring a cohesive look and feel throughout the TUI.
95 lines
5.2 KiB
Rust
95 lines
5.2 KiB
Rust
//! Central color theme for the TUI — modern dark palette with neon accents.
|
|
//!
|
|
//! Flow: defines a single `Theme` marker struct with associated `Color`
|
|
//! consts, consumed by every `view/*` render function so styling stays
|
|
//! consistent and changeable from one place.
|
|
//!
|
|
//! Design: dark-primary background (#1a1b26 / Catppuccin Mocha inspired),
|
|
//! vibrant accent colors for semantic states, and muted tones for
|
|
//! secondary/background elements. This gives a modern "neon dashboard"
|
|
//! look that is easy on the eyes during long sessions.
|
|
|
|
use ratatui::style::Color;
|
|
|
|
/// Central palette of terminal colors used across all TUI render functions.
|
|
///
|
|
/// Every view module references colors as `Theme::NAME` instead of
|
|
/// hardcoding `ratatui::style::Color` values inline.
|
|
pub struct Theme;
|
|
|
|
impl Theme {
|
|
// ── Base surface colors ──────────────────────────────────────────────
|
|
/// Deep background — used for the main chat area and overlays.
|
|
pub const BG: Color = Color::Rgb(24, 25, 38);
|
|
/// Slightly lighter surface — for panels, cards, and input bars.
|
|
pub const SURFACE: Color = Color::Rgb(30, 32, 48);
|
|
/// Elevated surface — for dropdowns, toasts, and floating elements.
|
|
pub const SURFACE_ELEVATED: Color = Color::Rgb(38, 40, 58);
|
|
|
|
// ── Text colors ──────────────────────────────────────────────────────
|
|
/// Primary text color (bright white).
|
|
pub const TEXT: Color = Color::Rgb(220, 222, 245);
|
|
/// Secondary / muted text.
|
|
pub const TEXT_MUTED: Color = Color::Rgb(150, 152, 180);
|
|
/// Dim / placeholder text.
|
|
pub const TEXT_DIM: Color = Color::Rgb(90, 92, 120);
|
|
|
|
// ── Accent colors ────────────────────────────────────────────────────
|
|
/// Primary accent — cyan for borders, titles, selections.
|
|
pub const PRIMARY: Color = Color::Rgb(0, 212, 255);
|
|
/// Success / positive states — green.
|
|
pub const SUCCESS: Color = Color::Rgb(80, 220, 130);
|
|
/// Warning / in-progress states — yellow-orange.
|
|
pub const WARNING: Color = Color::Rgb(255, 200, 80);
|
|
/// Error / failure states — red.
|
|
pub const ERROR: Color = Color::Rgb(255, 100, 110);
|
|
/// Informational / neutral — blue.
|
|
pub const INFO: Color = Color::Rgb(100, 170, 255);
|
|
|
|
// ── Extended accent palette ──────────────────────────────────────────
|
|
/// Purple accent — used for special highlights.
|
|
pub const ACCENT_PURPLE: Color = Color::Rgb(180, 130, 255);
|
|
#[allow(dead_code)]
|
|
/// Pink / magenta accent.
|
|
pub const ACCENT_PINK: Color = Color::Rgb(255, 120, 200);
|
|
/// Orange accent.
|
|
pub const ACCENT_ORANGE: Color = Color::Rgb(255, 160, 60);
|
|
/// Teal accent.
|
|
pub const ACCENT_TEAL: Color = Color::Rgb(60, 210, 200);
|
|
|
|
// ── Border colors ────────────────────────────────────────────────────
|
|
/// Standard border color.
|
|
pub const BORDER: Color = Color::Rgb(50, 52, 72);
|
|
#[allow(dead_code)]
|
|
/// Focused / active border.
|
|
pub const BORDER_FOCUS: Color = Color::Rgb(0, 180, 220);
|
|
|
|
// ── Role badge colors ────────────────────────────────────────────────
|
|
pub const ROLE_USER: Color = Color::Rgb(80, 220, 130); // green
|
|
pub const ROLE_ASSISTANT: Color = Color::Rgb(0, 212, 255); // cyan
|
|
pub const ROLE_SYSTEM: Color = Color::Rgb(100, 170, 255); // blue
|
|
pub const ROLE_TOOL: Color = Color::Rgb(255, 200, 80); // yellow
|
|
|
|
// ── Status colors ────────────────────────────────────────────────────
|
|
pub const STATUS_BAR_BG: Color = Color::Rgb(20, 21, 34);
|
|
pub const MODE_AUTO: Color = Color::Rgb(80, 220, 130);
|
|
pub const MODE_YOLO: Color = Color::Rgb(255, 100, 110);
|
|
|
|
// ── Code / markdown ──────────────────────────────────────────────────
|
|
pub const CODE_BG: Color = Color::Rgb(20, 22, 35);
|
|
pub const CODE_BAR: Color = Color::Rgb(40, 42, 62);
|
|
pub const BLOCKQUOTE_BAR: Color = Color::Rgb(100, 170, 255);
|
|
|
|
// ── Misc ─────────────────────────────────────────────────────────────
|
|
/// Highlight / selection background.
|
|
pub const HIGHLIGHT: Color = Color::Rgb(0, 140, 180);
|
|
/// Dim highlight (for non-selected items).
|
|
pub const HIGHLIGHT_DIM: Color = Color::Rgb(30, 40, 60);
|
|
#[allow(dead_code)]
|
|
/// Scrollbar track.
|
|
pub const SCROLLBAR_BG: Color = Color::Rgb(35, 37, 55);
|
|
#[allow(dead_code)]
|
|
/// Scrollbar thumb.
|
|
pub const SCROLLBAR_FG: Color = Color::Rgb(60, 62, 85);
|
|
}
|