Replace colors: named ANSI colors to other indexed colors (#106)

tui/src/action.rs

@@ -1,5 +1,6 @@
 use {
     super::{
+        color::*,
         config::{
             self, LAST_CSV_PATH, LAST_FILE_PATH, LAST_GIT_BRANCH, LAST_GIT_PATH, LAST_GIT_REMOTE,
             LAST_JSON_PATH, LAST_MONGO_CONN_STR, LAST_MONGO_DB_NAME,
@@ -120,7 +121,7 @@ impl App {
                     .take_prompt_input()
                     .log_expect("prompt must not be none");
                 let message = vec![
-                    Line::from(format!("path: {path}").dark_gray()),
+                    Line::from(format!("path: {path}").fg(GRAY_MEDIUM)),
                     Line::raw(""),
                     Line::raw("Enter the git remote:"),
                 ];
@@ -136,8 +137,8 @@ impl App {
                     .take_prompt_input()
                     .log_expect("prompt must not be none");
                 let message = vec![
-                    Line::from(format!("path: {path}").dark_gray()),
-                    Line::from(format!("remote: {remote}").dark_gray()),
+                    Line::from(format!("path: {path}").fg(GRAY_MEDIUM)),
+                    Line::from(format!("remote: {remote}").fg(GRAY_MEDIUM)),
                     Line::raw(""),
                     Line::raw("Enter the git branch:"),
                 ];
@@ -172,7 +173,7 @@ impl App {
                     .take_prompt_input()
                     .log_expect("conn str must not be none");
                 let message = vec![
-                    Line::from(format!("conn_str: {conn_str}").dark_gray()),
+                    Line::from(format!("conn_str: {conn_str}").fg(GRAY_MEDIUM)),
                     Line::raw(""),
                     Line::raw("Enter the database name:"),
                 ];

tui/src/color.rs

@@ -0,0 +1,19 @@
+use ratatui::style::Color;
+
+// Primary
+pub const RED: Color = Color::Indexed(124);
+pub const GREEN: Color = Color::Indexed(77);
+pub const BLUE: Color = Color::Indexed(27);
+pub const YELLOW: Color = Color::Indexed(220);
+pub const MAGENTA: Color = Color::Indexed(128);
+pub const SKY_BLUE: Color = Color::Indexed(32);
+
+// Neutral
+pub const GRAY_BLACK: Color = Color::Indexed(234);
+pub const GRAY_DARK: Color = Color::Indexed(236);
+pub const GRAY_DIM: Color = Color::Indexed(240);
+pub const GRAY_MEDIUM: Color = Color::Indexed(243);
+pub const GRAY_LIGHT: Color = Color::Indexed(250);
+pub const GRAY_WHITE: Color = Color::Indexed(253);
+pub const WHITE: Color = Color::White;
+pub const BLACK: Color = Color::Black;

tui/src/context/entry.rs

@@ -1,6 +1,7 @@
 use {
     crate::{
         action::{Action, OpenGitStep, OpenMongoStep, TuiAction},
+        color::*,
         config::{
             self, LAST_CSV_PATH, LAST_FILE_PATH, LAST_GIT_PATH, LAST_JSON_PATH, LAST_MONGO_CONN_STR,
         },
@@ -39,7 +40,7 @@ impl EntryContext {
             TuiAction::Prompt {
                 message: vec![
                     Line::raw("Enter the path:"),
-                    Line::from("If path not exists, it will be created.".dark_gray()),
+                    Line::from("If path not exists, it will be created.".fg(GRAY_MEDIUM)),
                 ],
                 action: Box::new(action.into()),
                 default: config::get(key).await,
@@ -51,8 +52,10 @@ impl EntryContext {
             TuiAction::Prompt {
                 message: vec![
                     Line::raw("Enter the git repository path:"),
-                    Line::from("The path must contain an existing .git repository;".dark_gray()),
-                    Line::from("otherwise, an error will occur.".dark_gray()),
+                    Line::from(
+                        "The path must contain an existing .git repository.".fg(GRAY_MEDIUM),
+                    ),
+                    Line::from("otherwise, an error will occur.".fg(GRAY_MEDIUM)),
                 ],
                 action: Box::new(TuiAction::OpenGit(OpenGitStep::Path).into()),
                 default: config::get(LAST_GIT_PATH).await,
@@ -64,7 +67,7 @@ impl EntryContext {
             TuiAction::Prompt {
                 message: vec![
                     Line::raw("Enter the MongoDB connection string:"),
-                    Line::from("e.g. mongodb://localhost:27017".dark_gray()),
+                    Line::from("e.g. mongodb://localhost:27017".fg(GRAY_MEDIUM)),
                 ],
                 action: Box::new(TuiAction::OpenMongo(OpenMongoStep::ConnStr).into()),
                 default: config::get(LAST_MONGO_CONN_STR).await,

tui/src/main.rs

@@ -2,6 +2,7 @@ mod action;
 pub mod context;
 #[macro_use]
 mod logger;
+mod color;
 mod config;
 mod transitions;
 mod views;

tui/src/views/body/entry.rs

@@ -1,15 +1,21 @@
 use {
-    crate::context::{entry::MENU_ITEMS, EntryContext},
+    crate::{
+        color::*,
+        context::{entry::MENU_ITEMS, EntryContext},
+    },
     ratatui::{
         layout::{Alignment, Constraint::Length, Flex, Layout, Rect},
-        style::{Color, Style, Stylize},
+        style::{Style, Stylize},
         widgets::{Block, HighlightSpacing, List, ListDirection, Padding},
         Frame,
     },
     tui_big_text::BigText,
 };
 
 pub fn draw(frame: &mut Frame, area: Rect, context: &mut EntryContext) {
+    let background = Block::default().bg(GRAY_BLACK);
+    frame.render_widget(background, area);
+
     let [area] = Layout::horizontal([Length(38)])
         .flex(Flex::Center)
         .areas(area);
@@ -18,23 +24,24 @@ pub fn draw(frame: &mut Frame, area: Rect, context: &mut EntryContext) {
         .areas(area);
 
     let title = BigText::builder()
-        .lines(vec!["Glues".dark_gray().into()])
+        .lines(vec!["Glues".fg(YELLOW).into()])
         .build();
     let block = Block::bordered()
+        .fg(WHITE)
         .padding(Padding::new(2, 2, 1, 1))
         .title("Open Notes")
         .title_alignment(Alignment::Center);
 
     let items = MENU_ITEMS.into_iter().map(|name| {
         if name.ends_with("CSV") || name.ends_with("JSON") {
-            name.dark_gray().dim()
+            name.fg(GRAY_DIM)
         } else {
-            name.into()
+            name.fg(GRAY_WHITE)
         }
     });
     let list = List::new(items)
         .block(block)
-        .highlight_style(Style::new().fg(Color::White).bg(Color::Blue))
+        .highlight_style(Style::new().fg(WHITE).bg(BLUE))
         .highlight_symbol(" ")
         .highlight_spacing(HighlightSpacing::Always)
         .direction(ListDirection::TopToBottom);

tui/src/views/body/notebook/editor.rs

@@ -1,5 +1,8 @@
 use {
-    crate::context::{notebook::ContextState, Context},
+    crate::{
+        color::*,
+        context::{notebook::ContextState, Context},
+    },
     ratatui::{
         layout::Rect,
         style::{Style, Stylize},
@@ -21,12 +24,12 @@ pub fn draw(frame: &mut Frame, area: Rect, context: &mut Context) {
             let name = format!(" {NOTE_SYMBOL}{} ", tab.note.name.clone());
             let name = if i == tab_index {
                 if context.notebook.state.is_editor() {
-                    name.white().on_blue()
+                    name.fg(WHITE).bg(BLUE)
                 } else {
-                    name.white().on_dark_gray()
+                    name.fg(WHITE).bg(GRAY_DIM)
                 }
             } else {
-                name.dark_gray()
+                name.fg(GRAY_MEDIUM)
             };
 
             title.push(name);
@@ -37,18 +40,18 @@ pub fn draw(frame: &mut Frame, area: Rect, context: &mut Context) {
             " {} ",
             context.notebook.tabs[tab_index].breadcrumb.join("/")
         ))
-        .black()
-        .on_green();
+        .fg(BLACK)
+        .bg(GREEN);
         (title, breadcrumb)
     } else {
-        (Line::from("[Editor]".dark_gray()), Span::default())
+        (Line::from("[Editor]".fg(GRAY_DIM)), Span::default())
     };
 
     let mode = match context.notebook.state {
-        ContextState::EditorNormalMode { .. } => Span::raw(" NORMAL ").white().on_black(),
-        ContextState::EditorInsertMode => Span::raw(" INSERT ").black().on_yellow(),
-        ContextState::EditorVisualMode => Span::raw(" VISUAL ").white().on_red(),
-        _ => Span::raw("        ").on_dark_gray(),
+        ContextState::EditorNormalMode { .. } => Span::raw(" NORMAL ").fg(WHITE).bg(BLACK),
+        ContextState::EditorInsertMode => Span::raw(" INSERT ").fg(BLACK).bg(YELLOW),
+        ContextState::EditorVisualMode => Span::raw(" VISUAL ").fg(WHITE).bg(RED),
+        _ => Span::raw("        ").bg(GRAY_DARK),
     };
 
     let bottom_left = Line::from(vec![mode, breadcrumb]);
@@ -59,15 +62,17 @@ pub fn draw(frame: &mut Frame, area: Rect, context: &mut Context) {
     ) {
         (_, true) => block.title_bottom(
             Line::from(" 󰔚 Saving... ")
-                .black()
-                .on_yellow()
+                .fg(BLACK)
+                .bg(YELLOW)
                 .right_aligned(),
         ),
         (Some((log, _)), false) => {
-            block.title_bottom(Line::from(format!(" {} ", log).black().on_green()).right_aligned())
+            block.title_bottom(Line::from(format!(" {} ", log).fg(BLACK).bg(GREEN)).right_aligned())
         }
         (None, false) => block,
     }
+    .fg(WHITE)
+    .bg(GRAY_BLACK)
     .padding(if context.notebook.show_line_number {
         Padding::ZERO
     } else {
@@ -89,7 +94,7 @@ pub fn draw(frame: &mut Frame, area: Rect, context: &mut Context) {
         ContextState::EditorNormalMode { .. }
         | ContextState::EditorInsertMode
         | ContextState::EditorVisualMode => (
-            Style::default().white().on_blue(),
+            Style::default().fg(WHITE).bg(BLUE),
             Style::default().underlined(),
         ),
         _ => (Style::default(), Style::default()),
@@ -98,7 +103,7 @@ pub fn draw(frame: &mut Frame, area: Rect, context: &mut Context) {
     editor.set_cursor_style(cursor_style);
     editor.set_cursor_line_style(cursor_line_style);
     if show_line_number {
-        editor.set_line_number_style(Style::default().dark_gray().dim());
+        editor.set_line_number_style(Style::default().fg(GRAY_DIM));
     } else {
         editor.remove_line_number();
     }

tui/src/views/body/notebook/note_tree.rs

@@ -1,11 +1,14 @@
 use {
-    crate::context::{
-        notebook::{ContextState, TreeItem, TreeItemKind},
-        NotebookContext,
+    crate::{
+        color::*,
+        context::{
+            notebook::{ContextState, TreeItem, TreeItemKind},
+            NotebookContext,
+        },
     },
     ratatui::{
         layout::Rect,
-        style::{Color, Style, Stylize},
+        style::{Style, Stylize},
         text::{Line, Span},
         widgets::{Block, Borders, HighlightSpacing, List, ListDirection},
         Frame,
@@ -23,9 +26,9 @@ pub fn draw(frame: &mut Frame, area: Rect, context: &mut NotebookContext) {
     );
     let title = "[Browser]";
     let title = if note_tree_focused {
-        title.light_blue()
+        title.fg(SKY_BLUE)
     } else {
-        title.dark_gray()
+        title.fg(GRAY_DIM)
     };
     let block = Block::new().borders(Borders::RIGHT).title(title);
     let inner_area = block.inner(area);
@@ -37,50 +40,44 @@ pub fn draw(frame: &mut Frame, area: Rect, context: &mut NotebookContext) {
              selectable,
              kind,
          }| {
-            match kind {
+            let line = match kind {
                 TreeItemKind::Note { note } => {
                     let pad = depth * 2;
-                    let line = Line::from(vec![
+                    Line::from(vec![
                         format!("{:pad$}", "").into(),
                         Span::raw(NOTE_SYMBOL).dim(),
                         Span::raw(&note.name),
-                    ]);
-
-                    match (selectable, target) {
-                        (true, _) => line,
-                        (false, true) => line.light_blue(),
-                        (false, false) => line.dim(),
-                    }
+                    ])
                 }
                 TreeItemKind::Directory { directory, opened } => {
                     let pad = depth * 2;
                     let symbol = if *opened { OPEN_SYMBOL } else { CLOSED_SYMBOL };
-                    let line = Line::from(vec![
+                    Line::from(vec![
                         format!("{:pad$}", "").into(),
-                        Span::raw(symbol).yellow(),
+                        Span::raw(symbol).fg(YELLOW),
                         Span::raw(&directory.name),
-                    ]);
-
-                    if !selectable {
-                        line.dim()
-                    } else {
-                        line
-                    }
+                    ])
                 }
+            };
+
+            match (selectable, target) {
+                (true, _) => line.fg(WHITE),
+                (false, true) => line.fg(MAGENTA),
+                (false, false) => line.dim(),
             }
         },
     );
 
     let list = List::new(tree_items)
-        .highlight_style(Style::new().fg(Color::White).bg(if note_tree_focused {
-            Color::Blue
+        .highlight_style(Style::new().fg(GRAY_WHITE).bg(if note_tree_focused {
+            BLUE
         } else {
-            Color::DarkGray
+            GRAY_DARK
         }))
         .highlight_symbol(" ")
         .highlight_spacing(HighlightSpacing::Always)
         .direction(ListDirection::TopToBottom);
 
-    frame.render_widget(block, area);
+    frame.render_widget(block.bg(GRAY_BLACK), area);
     frame.render_stateful_widget(list, inner_area, &mut context.tree_state);
 }

tui/src/views/dialog/alert.rs

@@ -1,5 +1,5 @@
 use {
-    crate::{context::Context, logger::*},
+    crate::{color::*, context::Context, logger::*},
     ratatui::{
         layout::{Alignment, Constraint::Length, Flex, Layout},
         style::{Style, Stylize},
@@ -16,6 +16,8 @@ pub fn draw(frame: &mut Frame, context: &mut Context) {
     let [area] = Layout::vertical([Length(8)]).flex(Flex::Center).areas(area);
 
     let block = Block::bordered()
+        .fg(WHITE)
+        .bg(GRAY_DARK)
         .padding(Padding::new(2, 2, 1, 1))
         .title("Alert")
         .title_alignment(Alignment::Center);
@@ -35,7 +37,7 @@ pub fn draw(frame: &mut Frame, context: &mut Context) {
         .wrap(Wrap { trim: true })
         .style(Style::default())
         .alignment(Alignment::Left);
-    let control = Line::from("Press any key to close".dark_gray()).centered();
+    let control = Line::from("Press any key to close".fg(GRAY_LIGHT)).centered();
 
     frame.render_widget(Clear, area);
     frame.render_widget(block, area);

tui/src/views/dialog/confirm.rs

@@ -1,5 +1,5 @@
 use {
-    crate::{context::Context, logger::*},
+    crate::{color::*, context::Context, logger::*},
     ratatui::{
         layout::{Alignment, Constraint::Length, Flex, Layout},
         style::{Style, Stylize},
@@ -15,6 +15,8 @@ pub fn draw(frame: &mut Frame, context: &mut Context) {
     let [area] = Layout::vertical([Length(9)]).flex(Flex::Center).areas(area);
 
     let block = Block::bordered()
+        .bg(GRAY_DARK)
+        .fg(WHITE)
         .padding(Padding::new(2, 2, 1, 1))
         .title("Confirm")
         .title_alignment(Alignment::Center);
@@ -33,8 +35,8 @@ pub fn draw(frame: &mut Frame, context: &mut Context) {
         .alignment(Alignment::Left);
 
     let lines = vec![
-        "[y] Confirm".dark_gray().into(),
-        "[n] Cancel".dark_gray().into(),
+        "[y] Confirm".fg(GRAY_LIGHT).into(),
+        "[n] Cancel".fg(GRAY_LIGHT).into(),
     ];
     let control = Paragraph::new(lines)
         .wrap(Wrap { trim: true })