Added Gruvbox Hard theme variants

src/themes/dark/Gruvbox Hard 🌳.css

@@ -0,0 +1,102 @@
+/* Gruvbox Dark Hard Palette */
+@define-color window_bg_color #1d2021; /* bg0_hard */
+@define-color window_fg_color #ebdbb2; /* fg */
+
+/* View styling */
+@define-color view_bg_color #1d2021; /* bg0_hard */
+@define-color view_fg_color #ebdbb2;
+
+/* Header bar */
+@define-color headerbar_bg_color #1d2021; /* bg0_hard */
+@define-color headerbar_backdrop_color #1d2021;
+@define-color headerbar_fg_color #ebdbb2;
+
+/* Popovers and dialogs */
+@define-color popover_bg_color #282828; /* bg0 */
+@define-color popover_fg_color #ebdbb2;
+
+@define-color dialog_bg_color @popover_bg_color;
+@define-color dialog_fg_color @popover_fg_color;
+
+/* Cards and sidebars */
+@define-color card_bg_color #282828; /* bg0 */
+@define-color card_fg_color #ebdbb2;
+
+@define-color sidebar_bg_color #282828; /* bg0 */
+@define-color sidebar_fg_color #ebdbb2;
+@define-color sidebar_backdrop_color @sidebar_bg_color;
+@define-color sidebar_border_color #504945; /* bg3 */
+
+@define-color secondary_sidebar_bg_color @sidebar_bg_color;
+@define-color secondary_sidebar_fg_color @sidebar_fg_color;
+@define-color secondary_sidebar_backdrop_color @sidebar_backdrop_color;
+@define-color secondary_sidebar_border_color @sidebar_border_color;
+
+/* Gruvbox Dark Medium accent colors */
+@define-color blue_1 #83a598; /* blue */
+@define-color blue_2 #8ec07c; /* aqua */
+@define-color blue_3 #b8bb26; /* green */
+@define-color blue_4 #98971a; /* dark green */
+@define-color blue_5 #d3869b; /* purple */
+
+@define-color green_1 #b8bb26; /* green */
+@define-color green_2 #98971a; /* dark green */
+@define-color green_3 #fabd2f; /* yellow */
+@define-color green_4 #fe8019; /* orange */
+@define-color green_5 #d65d0e; /* bright orange */
+
+@define-color yellow_1 #fabd2f; /* yellow */
+@define-color yellow_2 #fe8019; /* orange */
+@define-color yellow_3 #fb4934; /* red */
+@define-color yellow_4 #d3869b; /* purple */
+@define-color yellow_5 #458588; /* dark aqua */
+
+@define-color orange_1 #fe8019; /* orange */
+@define-color orange_2 #fb4934; /* red */
+@define-color orange_3 #d3869b; /* purple */
+@define-color orange_4 #fabd2f; /* yellow */
+@define-color orange_5 #b8bb26; /* green */
+
+@define-color red_1 #fb4934; /* red */
+@define-color red_2 #d3869b; /* purple */
+@define-color red_3 #83a598; /* blue */
+@define-color red_4 #458588; /* dark aqua */
+@define-color red_5 #98971a; /* dark green */
+
+@define-color purple_1 #d3869b; /* purple */
+@define-color purple_2 #b16286; /* bright purple */
+@define-color purple_3 #83a598; /* blue */
+@define-color purple_4 #fabd2f; /* yellow */
+@define-color purple_5 #8ec07c; /* aqua */
+
+@define-color brown_1 #504945; /* bg3 */
+@define-color brown_2 #665c54; /* bg4 */
+@define-color brown_3 #7c6f64; /* gray */
+@define-color brown_4 #928374; /* dark gray */
+@define-color brown_5 #a89984; /* light gray */
+
+@define-color light_1 #ebdbb2; /* fg */
+@define-color light_2 #d5c4a1; /* fg1 */
+@define-color light_3 #bdae93; /* fg2 */
+@define-color light_4 #83a598; /* blue */
+@define-color light_5 #665c54; /* bg4 */
+
+@define-color dark_1 #504945; /* bg3 */
+@define-color dark_2 #3c3836; /* bg2 */
+@define-color dark_3 #282828; /* bg0 */
+@define-color dark_4 #1d2021; /* bg0_hard */
+@define-color dark_5 #32302f; /* bg0_soft */
+
+toast {
+    background-color: @window_bg_color;
+    color: @window_fg_color;
+}
+
+toggle:checked {
+    background-color: @card_bg_color;
+    color: @window_fg_color;
+}
+
+.inline {
+    background-color: rgba(0, 0, 0, 0);
+}

src/themes/light/Gruvbox Hard 🌳.css

@@ -0,0 +1,107 @@
+/* Gruvbox Light Medium Palette */
+@define-color window_bg_color #f9f5d7; /* bg0_hard */
+@define-color window_fg_color #3c3836; /* fg */
+
+/* View styling */
+@define-color view_bg_color #f9f5d7;
+@define-color view_fg_color #3c3836;
+
+/* Header bar */
+@define-color headerbar_bg_color #f2e5bc; /* bg0_soft */
+@define-color headerbar_backdrop_color #ebdbb2;
+@define-color headerbar_fg_color #3c3836;
+
+/* Popovers and dialogs */
+@define-color popover_bg_color #fbf1c7; /* bg0 */
+@define-color popover_fg_color #3c3836;
+
+@define-color dialog_bg_color @popover_bg_color;
+@define-color dialog_fg_color @popover_fg_color;
+
+/* Cards and sidebars */
+@define-color card_bg_color #fbf1c7; /* bg0 */
+@define-color card_fg_color #3c3836;
+
+@define-color sidebar_bg_color #fbf1c7; /* bg0 */
+@define-color sidebar_fg_color #3c3836;
+@define-color sidebar_backdrop_color @sidebar_bg_color;
+@define-color sidebar_border_color #d5c4a1; /* bg2 */
+
+@define-color secondary_sidebar_bg_color @sidebar_bg_color;
+@define-color secondary_sidebar_fg_color @sidebar_fg_color;
+@define-color secondary_sidebar_backdrop_color @sidebar_backdrop_color;
+@define-color secondary_sidebar_border_color @sidebar_border_color;
+
+@define-color panel_bg_color @window_bg_color;
+@define-color panel_fg_color @window_fg_color;
+@define-color panel_button_bg_color transparent;
+@define-color panel_hover_bg_color @card_bg_color;
+
+/* Gruvbox accent colors (Light Medium variant) */
+@define-color blue_1 #458588; /* blue */
+@define-color blue_2 #83a598; /* aqua */
+@define-color blue_3 #689d6a; /* green */
+@define-color blue_4 #427b58; /* dark green */
+@define-color blue_5 #8f3f71; /* purple */
+
+@define-color green_1 #689d6a; /* green */
+@define-color green_2 #427b58; /* dark green */
+@define-color green_3 #b57614; /* yellow */
+@define-color green_4 #af3a03; /* orange */
+@define-color green_5 #d65d0e; /* bright orange */
+
+@define-color yellow_1 #b57614; /* yellow */
+@define-color yellow_2 #af3a03; /* orange */
+@define-color yellow_3 #9d0006; /* red */
+@define-color yellow_4 #8f3f71; /* purple */
+@define-color yellow_5 #076678; /* dark aqua */
+
+@define-color orange_1 #af3a03; /* orange */
+@define-color orange_2 #9d0006; /* red */
+@define-color orange_3 #8f3f71; /* purple */
+@define-color orange_4 #b57614; /* yellow */
+@define-color orange_5 #689d6a; /* green */
+
+@define-color red_1 #9d0006; /* red */
+@define-color red_2 #8f3f71; /* purple */
+@define-color red_3 #458588; /* blue */
+@define-color red_4 #076678; /* dark aqua */
+@define-color red_5 #427b58; /* dark green */
+
+@define-color purple_1 #8f3f71; /* purple */
+@define-color purple_2 #b16286; /* bright purple */
+@define-color purple_3 #458588; /* blue */
+@define-color purple_4 #d3869b; /* pink */
+@define-color purple_5 #83a598; /* aqua */
+
+@define-color brown_1 #d5c4a1; /* bg2 */
+@define-color brown_2 #bdae93; /* bg3 */
+@define-color brown_3 #a89984; /* bg4 */
+@define-color brown_4 #928374; /* gray */
+@define-color brown_5 #7c6f64; /* dark gray */
+
+@define-color light_1 #3c3836; /* fg */
+@define-color light_2 #504945; /* fg1 */
+@define-color light_3 #665c54; /* fg2 */
+@define-color light_4 #458588; /* blue */
+@define-color light_5 #bdae93; /* bg3 */
+
+@define-color dark_1 #d5c4a1; /* bg2 */
+@define-color dark_2 #ebdbb2; /* bg1 */
+@define-color dark_3 #fbf1c7; /* bg0 */
+@define-color dark_4 #f9f5d7; /* bg0_hard */
+@define-color dark_5 #f2e5bc; /* bg0_soft */
+
+toast {
+    background-color: @window_bg_color;
+    color: @window_fg_color;
+}
+
+toggle:checked {
+    background-color: @card_bg_color;
+    color: @window_fg_color;
+}
+
+.inline {
+    background-color: rgba(0, 0, 0, 0);
+}