Implement a new color system inspired from base24

bin/omarchy-theme-set-templates

@@ -11,6 +11,18 @@ hex_to_rgb() {
   printf "%d,%d,%d" "0x${hex:0:2}" "0x${hex:2:2}" "0x${hex:4:2}"
 }
 
+# Emit sed substitution rules for a given key/value pair (plain, _strip, _rgb)
+emit_sed_rules() {
+  local key="$1" value="$2"
+  printf 's|{{ %s }}|%s|g\n' "$key" "$value"
+  printf 's|{{ %s_strip }}|%s|g\n' "$key" "${value#\#}"
+  if [[ $value =~ ^# ]]; then
+    local rgb
+    rgb=$(hex_to_rgb "$value")
+    echo "s|{{ ${key}_rgb }}|${rgb}|g"
+  fi
+}
+
 # Only generate dynamic templates for themes with a colors.toml definition
 if [[ -f $COLORS_FILE ]]; then
   sed_script=$(mktemp)
@@ -21,12 +33,7 @@ if [[ -f $COLORS_FILE ]]; then
     value="${value#*[\"\']}"
     value="${value%%[\"\']*}" # extract value between quotes (ignores inline comments)
 
-    printf 's|{{ %s }}|%s|g\n' "$key" "$value"            # {{ key }} -> value
-    printf 's|{{ %s_strip }}|%s|g\n' "$key" "${value#\#}" # {{ key_strip }} -> value without leading #
-    if [[ $value =~ ^# ]]; then
-      rgb=$(hex_to_rgb "$value")
-      echo "s|{{ ${key}_rgb }}|${rgb}|g"
-    fi
+    emit_sed_rules "$key" "$value"
   done <"$COLORS_FILE" >"$sed_script"
 
   shopt -s nullglob

default/themed/alacritty.toml.tpl

@@ -12,11 +12,11 @@ cursor = "{{ cursor }}"
 
 [colors.search.matches]
 foreground = "{{ background }}"
-background = "{{ color3 }}"
+background = "{{ yellow }}"
 
 [colors.search.focused_match]
 foreground = "{{ background }}"
-background = "{{ color1 }}"
+background = "{{ red }}"
 
 [colors.footer_bar]
 foreground = "{{ background }}"
@@ -27,21 +27,21 @@ text = "{{ selection_foreground }}"
 background = "{{ selection_background }}"
 
 [colors.normal]
-black = "{{ color0 }}"
-red = "{{ color1 }}"
-green = "{{ color2 }}"
-yellow = "{{ color3 }}"
-blue = "{{ color4 }}"
-magenta = "{{ color5 }}"
-cyan = "{{ color6 }}"
-white = "{{ color7 }}"
+black = "{{ bg }}"
+red = "{{ red }}"
+green = "{{ green }}"
+yellow = "{{ yellow }}"
+blue = "{{ blue }}"
+magenta = "{{ purple }}"
+cyan = "{{ cyan }}"
+white = "{{ fg }}"
 
 [colors.bright]
-black = "{{ color8 }}"
-red = "{{ color9 }}"
-green = "{{ color10 }}"
-yellow = "{{ color11 }}"
-blue = "{{ color12 }}"
-magenta = "{{ color13 }}"
-cyan = "{{ color14 }}"
-white = "{{ color15 }}"
+black = "{{ muted }}"
+red = "{{ bright_red }}"
+green = "{{ bright_green }}"
+yellow = "{{ bright_yellow }}"
+blue = "{{ bright_blue }}"
+magenta = "{{ bright_purple }}"
+cyan = "{{ bright_cyan }}"
+white = "{{ bright_fg }}"

default/themed/btop.theme.tpl

@@ -11,73 +11,83 @@ theme[title]="{{ foreground }}"
 theme[hi_fg]="{{ accent }}"
 
 # Background color of selected item in processes box
-theme[selected_bg]="{{ color8 }}"
+theme[selected_bg]="{{ selection }}"
 
 # Foreground color of selected item in processes box
 theme[selected_fg]="{{ accent }}"
 
 # Color of inactive/disabled text
-theme[inactive_fg]="{{ color8 }}"
+theme[inactive_fg]="{{ muted }}"
 
 # Color of text appearing on top of graphs, i.e uptime and current network graph scaling
-theme[graph_text]="{{ foreground }}"
+theme[graph_text]="{{ light_fg }}"
 
 # Background color of the percentage meters
-theme[meter_bg]="{{ color8 }}"
+theme[meter_bg]="{{ selection }}"
 
 # Misc colors for processes box including mini cpu graphs, details memory graph and details status text
-theme[proc_misc]="{{ foreground }}"
+theme[proc_misc]="{{ light_fg }}"
 
 # CPU, Memory, Network, Proc box outline colors
-theme[cpu_box]="{{ color5 }}"
-theme[mem_box]="{{ color2 }}"
-theme[net_box]="{{ color1 }}"
+theme[cpu_box]="{{ purple }}"
+theme[mem_box]="{{ green }}"
+theme[net_box]="{{ red }}"
 theme[proc_box]="{{ accent }}"
 
 # Box divider line and small boxes line color
-theme[div_line]="{{ color8 }}"
+theme[div_line]="{{ muted }}"
 
 # Temperature graph color (Green -> Yellow -> Red)
-theme[temp_start]="{{ color2 }}"
-theme[temp_mid]="{{ color3 }}"
-theme[temp_end]="{{ color1 }}"
-
-# CPU graph colors (Teal -> Lavender)
-theme[cpu_start]="{{ color6 }}"
-theme[cpu_mid]="{{ color4 }}"
-theme[cpu_end]="{{ color5 }}"
-
-# Mem/Disk free meter (Mauve -> Lavender -> Blue)
-theme[free_start]="{{ color5 }}"
-theme[free_mid]="{{ color4 }}"
-theme[free_end]="{{ color6 }}"
-
-# Mem/Disk cached meter (Sapphire -> Lavender)
-theme[cached_start]="{{ color4 }}"
-theme[cached_mid]="{{ color6 }}"
-theme[cached_end]="{{ color5 }}"
-
-# Mem/Disk available meter (Peach -> Red)
-theme[available_start]="{{ color3 }}"
-theme[available_mid]="{{ color1 }}"
-theme[available_end]="{{ color1 }}"
-
-# Mem/Disk used meter (Green -> Sky)
-theme[used_start]="{{ color2 }}"
-theme[used_mid]="{{ color6 }}"
-theme[used_end]="{{ color4 }}"
-
-# Download graph colors (Peach -> Red)
-theme[download_start]="{{ color3 }}"
-theme[download_mid]="{{ color1 }}"
-theme[download_end]="{{ color1 }}"
-
-# Upload graph colors (Green -> Sky)
-theme[upload_start]="{{ color2 }}"
-theme[upload_mid]="{{ color6 }}"
-theme[upload_end]="{{ color4 }}"
-
-# Process box color gradient for threads, mem and cpu usage (Sapphire -> Mauve)
-theme[process_start]="{{ color6 }}"
-theme[process_mid]="{{ color4 }}"
-theme[process_end]="{{ color5 }}"
+theme[temp_start]="{{ green }}"
+theme[temp_mid]="{{ yellow }}"
+theme[temp_end]="{{ red }}"
+
+# CPU graph colors (Teal -> Blue -> Purple)
+theme[cpu_start]="{{ cyan }}"
+theme[cpu_mid]="{{ blue }}"
+theme[cpu_end]="{{ purple }}"
+
+# Mem/Disk free meter
+theme[free_start]="{{ purple }}"
+theme[free_mid]="{{ blue }}"
+theme[free_end]="{{ cyan }}"
+
+# Mem/Disk cached meter
+theme[cached_start]="{{ blue }}"
+theme[cached_mid]="{{ cyan }}"
+theme[cached_end]="{{ purple }}"
+
+# Mem/Disk available meter
+theme[available_start]="{{ yellow }}"
+theme[available_mid]="{{ red }}"
+theme[available_end]="{{ red }}"
+
+# Mem/Disk used meter (Green -> Teal -> Blue)
+theme[used_start]="{{ green }}"
+theme[used_mid]="{{ cyan }}"
+theme[used_end]="{{ blue }}"
+
+# Download graph colors
+theme[download_start]="{{ yellow }}"
+theme[download_mid]="{{ red }}"
+theme[download_end]="{{ red }}"
+
+# Upload graph colors (Green -> Teal -> Blue)
+theme[upload_start]="{{ green }}"
+theme[upload_mid]="{{ cyan }}"
+theme[upload_end]="{{ blue }}"
+
+# Process box color gradient for threads, mem and cpu usage
+theme[process_start]="{{ cyan }}"
+theme[process_mid]="{{ blue }}"
+theme[process_end]="{{ purple }}"
+
+# Graph gradient colors (spectrum shades from background to foreground)
+theme[gradient_color_0]="{{ bg }}"
+theme[gradient_color_1]="{{ lighter_bg }}"
+theme[gradient_color_2]="{{ selection }}"
+theme[gradient_color_3]="{{ muted }}"
+theme[gradient_color_4]="{{ dark_fg }}"
+theme[gradient_color_5]="{{ fg }}"
+theme[gradient_color_6]="{{ light_fg }}"
+theme[gradient_color_7]="{{ bright_fg }}"

default/themed/ghostty.conf.tpl

@@ -4,19 +4,19 @@ cursor-color = {{ cursor }}
 selection-background = {{ selection_background }}
 selection-foreground = {{ selection_foreground }}
 
-palette = 0={{ color0 }}
-palette = 1={{ color1 }}
-palette = 2={{ color2 }}
-palette = 3={{ color3 }}
-palette = 4={{ color4 }}
-palette = 5={{ color5 }}
-palette = 6={{ color6 }}
-palette = 7={{ color7 }}
-palette = 8={{ color8 }}
-palette = 9={{ color9 }}
-palette = 10={{ color10 }}
-palette = 11={{ color11 }}
-palette = 12={{ color12 }}
-palette = 13={{ color13 }}
-palette = 14={{ color14 }}
-palette = 15={{ color15 }}
+palette = 0={{ bg }}
+palette = 1={{ red }}
+palette = 2={{ green }}
+palette = 3={{ yellow }}
+palette = 4={{ blue }}
+palette = 5={{ purple }}
+palette = 6={{ cyan }}
+palette = 7={{ fg }}
+palette = 8={{ muted }}
+palette = 9={{ bright_red }}
+palette = 10={{ bright_green }}
+palette = 11={{ bright_yellow }}
+palette = 12={{ bright_blue }}
+palette = 13={{ bright_purple }}
+palette = 14={{ bright_cyan }}
+palette = 15={{ bright_fg }}

default/themed/hyprland-preview-share-picker.css.tpl

@@ -1,10 +1,10 @@
 @define-color foreground {{ foreground }};
 @define-color background {{ background }};
 @define-color accent {{ accent }};
-@define-color muted {{ color8 }};
-@define-color card_bg {{ color0 }};
+@define-color muted {{ muted }};
+@define-color card_bg {{ lighter_bg }};
 @define-color text_dark {{ background }};
-@define-color accent_hover {{ color12 }};
+@define-color accent_hover {{ bright_blue }};
 @define-color selected_tab {{ accent }};
 @define-color text {{ foreground }};
 

default/themed/kitty.conf.tpl

@@ -9,19 +9,19 @@ cursor_text_color {{ background }}
 active_border_color {{ accent }}
 active_tab_background {{ accent }}
 
-color0 {{ color0 }}
-color1 {{ color1 }}
-color2 {{ color2 }}
-color3 {{ color3 }}
-color4 {{ color4 }}
-color5 {{ color5 }}
-color6 {{ color6 }}
-color7 {{ color7 }}
-color8 {{ color8 }}
-color9 {{ color9 }}
-color10 {{ color10 }}
-color11 {{ color11 }}
-color12 {{ color12 }}
-color13 {{ color13 }}
-color14 {{ color14 }}
-color15 {{ color15 }}
+color0 {{ bg }}
+color1 {{ red }}
+color2 {{ green }}
+color3 {{ yellow }}
+color4 {{ blue }}
+color5 {{ purple }}
+color6 {{ cyan }}
+color7 {{ fg }}
+color8 {{ muted }}
+color9 {{ bright_red }}
+color10 {{ bright_green }}
+color11 {{ bright_yellow }}
+color12 {{ bright_blue }}
+color13 {{ bright_purple }}
+color14 {{ bright_cyan }}
+color15 {{ bright_fg }}

default/themed/obsidian.css.tpl

@@ -12,45 +12,45 @@
   --text-selection: {{ selection_background }};
 
   /* Border color */
-  --background-modifier-border: {{ color8 }};
+  --background-modifier-border: {{ muted }};
 
   /* Semantic heading colors */
-  --text-title-h1: {{ color1 }};
-  --text-title-h2: {{ color2 }};
-  --text-title-h3: {{ color3 }};
-  --text-title-h4: {{ color4 }};
-  --text-title-h5: {{ color5 }};
-  --text-title-h6: {{ color5 }};
+  --text-title-h1: {{ red }};
+  --text-title-h2: {{ green }};
+  --text-title-h3: {{ yellow }};
+  --text-title-h4: {{ blue }};
+  --text-title-h5: {{ purple }};
+  --text-title-h6: {{ purple }};
 
   /* Links and accents */
-  --text-link: {{ color4 }};
+  --text-link: {{ blue }};
   --text-accent: {{ accent }};
   --text-accent-hover: {{ accent }};
   --interactive-accent: {{ accent }};
   --interactive-accent-hover: {{ accent }};
 
   /* Muted text */
-  --text-muted: {{ color8 }};
-  --text-faint: {{ color8 }};
+  --text-muted: {{ muted }};
+  --text-faint: {{ muted }};
 
   /* Code */
-  --code-normal: {{ color6 }};
+  --code-normal: {{ cyan }};
 
   /* Errors and success */
-  --text-error: {{ color1 }};
-  --text-error-hover: {{ color1 }};
-  --text-success: {{ color2 }};
+  --text-error: {{ red }};
+  --text-error-hover: {{ red }};
+  --text-success: {{ green }};
 
   /* Tags */
-  --tag-color: {{ color6 }};
-  --tag-background: {{ color8 }};
+  --tag-color: {{ cyan }};
+  --tag-background: {{ muted }};
 
   /* Graph */
-  --graph-line: {{ color8 }};
+  --graph-line: {{ muted }};
   --graph-node: {{ accent }};
-  --graph-node-focused: {{ color4 }};
-  --graph-node-tag: {{ color6 }};
-  --graph-node-attachment: {{ color2 }};
+  --graph-node-focused: {{ blue }};
+  --graph-node-tag: {{ cyan }};
+  --graph-node-attachment: {{ green }};
 }
 
 /* Headers */
@@ -63,16 +63,16 @@
 
 /* Code blocks */
 .markdown-rendered code {
-  color: {{ color6 }};
+  color: {{ cyan }};
 }
 
 /* Syntax highlighting */
-.cm-s-obsidian span.cm-keyword { color: {{ color1 }}; }
-.cm-s-obsidian span.cm-string { color: {{ color2 }}; }
-.cm-s-obsidian span.cm-number { color: {{ color3 }}; }
-.cm-s-obsidian span.cm-comment { color: {{ color8 }}; }
-.cm-s-obsidian span.cm-operator { color: {{ color4 }}; }
-.cm-s-obsidian span.cm-def { color: {{ color4 }}; }
+.cm-s-obsidian span.cm-keyword { color: {{ red }}; }
+.cm-s-obsidian span.cm-string { color: {{ green }}; }
+.cm-s-obsidian span.cm-number { color: {{ yellow }}; }
+.cm-s-obsidian span.cm-comment { color: {{ muted }}; }
+.cm-s-obsidian span.cm-operator { color: {{ blue }}; }
+.cm-s-obsidian span.cm-def { color: {{ blue }}; }
 
 /* Links */
 .markdown-rendered a {