gruvbox

web/static/app.css

@@ -78,58 +78,61 @@
      "light". Values line up with the Penguin UI dark palette in
      ui/base.html's @theme block where a token overlaps with one of these. */
   :root.dark {
-    --bg: #0f1722;
-    --surface: #152238;
-    --surface-alt: #1b2a42;
-    --border: #33415a;
-    --border-soft: #26334c;
-    --text-strong: #f3f6fb;
-    --text: #c7d3e6;
-    --text-secondary: #b7c4da;
-    --text-muted: #8b9ab3;
-    --text-subtle: #7d8ca6;
-    --label: #aebbd0;
-    --primary: #68a4ff;
-    --primary-strong: #8fbfff;
-    --danger: #e5837e;
-    --danger-bg: #3a2224;
-    --danger-border: #5c3236;
-    --success: #6cbf8c;
-    --hover-bg: #223049;
-    --secondary-bg: #1a2740;
-    --secondary-border: #3a4a68;
-    --select-border: #4a6da3;
-    --input-bg: #101a29;
-    --input-border: #33415a;
-    --input-text: #e5ebf3;
-    --on-primary: #0f1722;
-    --secondary: #c7d3e6;
-    --on-secondary: #152238;
-    --outline-strong: #cbd7e8;
-    --info: #8fbfff;
-    --on-info: #0f1722;
-    --warning: #e4b45d;
-    --on-warning: #17202a;
-    --on-danger: #241113;
-    --on-success: #10251a;
-    --success-strong: #8fe0aa;
-    --error: #f08b82;
-    --error-border: #6f3a3c;
-    --info-bg: #1d3553;
-    --info-border: #3f5f8e;
-    --info-hover-bg: #2b456b;
-    --danger-hover-bg: #512b31;
-    --success-bg: #203a2b;
-    --success-border: #456848;
-    --warning-bg: #4a3420;
-    --warning-border: #765634;
-    --code: #9abdf0;
-    --link: #8fbfff;
-    --disabled-bg: #202c3e;
-    --disabled-text: #64748b;
+    /* Gruvbox dark. bg0_h/bg0/bg1/bg2/bg3 for surfaces and borders, fg0-fg4
+       and gray for text, and the palette's bright accents (blue, aqua,
+       yellow, green, red) for primary/info/warning/success/danger. */
+    --bg: #1d2021;
+    --surface: #282828;
+    --surface-alt: #32302f;
+    --border: #504945;
+    --border-soft: #3c3836;
+    --text-strong: #fbf1c7;
+    --text: #ebdbb2;
+    --text-secondary: #d5c4a1;
+    --text-muted: #a89984;
+    --text-subtle: #928374;
+    --label: #bdae93;
+    --primary: #458588;
+    --primary-strong: #83a598;
+    --danger: #fb4934;
+    --danger-bg: #3c2426;
+    --danger-border: #6e3b39;
+    --success: #b8bb26;
+    --hover-bg: #3c3836;
+    --secondary-bg: #32302f;
+    --secondary-border: #504945;
+    --select-border: #83a598;
+    --input-bg: #282828;
+    --input-border: #504945;
+    --input-text: #ebdbb2;
+    --on-primary: #1d2021;
+    --secondary: #ebdbb2;
+    --on-secondary: #1d2021;
+    --outline-strong: #d5c4a1;
+    --info: #83a598;
+    --on-info: #1d2021;
+    --warning: #fabd2f;
+    --on-warning: #1d2021;
+    --on-danger: #1d2021;
+    --on-success: #1d2021;
+    --success-strong: #d8dc59;
+    --error: #fb4934;
+    --error-border: #6e3b39;
+    --info-bg: #2b3c3e;
+    --info-border: #3f5b5c;
+    --info-hover-bg: #35494b;
+    --danger-hover-bg: #4a2c2e;
+    --success-bg: #333d1c;
+    --success-border: #565c2e;
+    --warning-bg: #4a3a1a;
+    --warning-border: #705826;
+    --code: #8ec07c;
+    --link: #83a598;
+    --disabled-bg: #3c3836;
+    --disabled-text: #7c6f64;
     --shadow-color: 0 0 0;
-    --focus-color: 143 191 255;
-    --toolbar-bg: rgb(21 34 56 / 96%);
+    --focus-color: 131 165 152;
+    --toolbar-bg: rgb(40 40 40 / 96%);
   }
 
   /* ---------- Foundations ---------- */