support customize every buttons' attributes and add new layout example

Author: Arcelyth

layouts/40.tvkl

@@ -1,7 +1,8 @@
 #border_color = @($255, $255, $255)
 #highlight = @($225, $225, $225)
+#tab_len = $6
 
-:| Tab [$6] | Q | W | E | R | T | Y | U | I | O | P | Back [$7] |-
+:| Tab [#tab_len] | Q | W | E | R | T | Y | U | I | O | P | Back [$7] |-
 :| Caps [$7] | A | S | D | F | G | H | J | K | L | Enter [$8] |-
 :| LShift [$8] | '/' | Z | X | C | V | B | N | M | ',' | '.' | RShift [$8] |-
 :| LCtrl [$7] | Win [$6] | LAlt [$7] | Space | RAlt [$7] | App [$6] | RCtrl [$7]  |-

layouts/60.tvkl

@@ -1,5 +1,12 @@
-:| Esc [$5] | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 0 | '-' | '=' | Back [$8] |-
+#border_color = @($255, $255, $255)
+#highlight = @($225, $225, $225)
+#esc_len = $5
+#esc_color = @($201, $113, $217)
+
+:| Esc [#esc_len,,#esc_color] | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 0 | '-' | '=' | Back [$8] |-
 :| Tab [$7] | Q | W | E | R | T | Y | U | I | O | P | '[' | ']' | '\' [$6] |-
 :| Caps [$8] | A | S | D | F | G | H | J | K | L | ';' | "'" | Enter [$9] |-
 :| LShift [$10] | Z | X | C | V | B | N | M | ',' | '.' | '/' | RShift [$11] |-
 :| LCtrl [$7] | Win [$5] | LAlt [$6] | Space [$20] | RAlt [$6] | Win [$5] | App [$5] | RCtrl [$7] |-
+
+

layouts/60_2.tvkl

@@ -0,0 +1,17 @@
+#border_color = @($60, $60, $60)
+#highlight    = @($0, $255, $255)
+
+#fn_border    = @($100, $100, $100)
+#fn_highlight = @($255, $0, $255)
+#esc_color    = @($201, $113, $217)
+#enter_color  = @($255, $150, $0)
+
+#esc_len = $6
+#mod_len = $7
+#space_len = $21
+
+:| Esc [#esc_len,,#esc_color] | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 0 | '-' | '=' | Back [$9,,#fn_border] |-
+:| Tab [$8,,#fn_border] | Q | W | E | R | T | Y | U | I | O | P | '[' | ']' | '\' [$7,,#fn_border] |-
+:| Caps [$10,,#fn_border] | A | S | D | F | G | H | J | K | L | ';' | "'" | Enter [$10,,#enter_color] |-
+:| LShift [$12,,#fn_border] | Z | X | C | V | B | N | M | ',' | '.' | '/' | RShift [$13,,#fn_border] |-
+:| LCtrl [#mod_len,,#fn_border] | Win [$5,,#fn_border] | LAlt [#mod_len,,#fn_border] | Space [#space_len] | RAlt [#mod_len,,#fn_border] | Win [$5,,#fn_border] | App [$6,,#fn_border] | RCtrl [#mod_len,,#fn_border] |-

src/env.rs

@@ -1,7 +1,7 @@
 use std::sync::Arc;
 use std::collections::HashMap;
 
-#[derive(Debug)]
+#[derive(Debug, Copy, Clone)]
 pub enum Value {
     Number(u16), 
     RGB(u8, u8, u8)

src/layout.rs

@@ -1,14 +1,37 @@
+use ratatui::style::Color;
 use rdev::Key;
 use std::sync::Arc;
 
 #[derive(Debug)]
 pub struct Layout {
-    pub layer: Vec<Vec<Button>> 
+    pub layer: Vec<Vec<Button>>,
 }
 
 #[derive(Debug)]
-pub struct Button {
+pub struct Attr {
     pub width: u16,
-    pub binds: Vec<(Arc<str>, Option<Key>)>
+    pub height: u16,
+    pub border_color: Option<Color>,
+    pub highlight: Option<Color>,
+}
+
+impl Attr {
+    pub fn default(name: &str) -> Self {
+        let width = match name.to_lowercase().as_str() {
+            "space" => 20,
+            _ => 4,
+        };
+        Self {
+            width,
+            height: 3,
+            border_color: None,
+            highlight: None,
+        }
+    }
 }
 
+#[derive(Debug)]
+pub struct Button {
+    pub attr: Attr,
+    pub binds: Vec<(Arc<str>, Option<Key>)>,
+}