diff --git a/web/static/app.css b/web/static/app.css index 2cb762e8..82ad5b20 100644 --- a/web/static/app.css +++ b/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 ---------- */