/* * HAINTZ IT-SOLUTIONS accent overlay for Forgejo. * * Loaded from custom/templates/custom/header.tmpl, which Forgejo renders at * the very end of -- after base/head_style has already pulled in * index.css and theme-.css. That ordering is what lets these * declarations win without !important. * * This file deliberately does NOT define a theme of its own. Forgejo loads * exactly one theme-.css, so a custom theme would have to restate every * --color-* variable upstream defines and would silently drift on each * upgrade. Overlaying the built-in forgejo-light/-dark keeps upstream as the * source of truth and limits the blast radius to the accent ramp: if a * variable below is ever renamed, that control falls back to Forgejo orange * rather than to something unstyled. * * Only the --color-primary-* ramp is touched. Everything else that reads as * brand colour derives from it -- upstream defines --color-accent, * --color-small-accent, --color-highlight-* and --color-reaction-*-bg as * var(--color-primary-*). The --color-orange-* variables are NOT touched: * those are semantic status colours for badges, not branding. * * COLOUR CHOICE * ------------- * www.haintz.dev uses #1a8a4a as its mint accent on light backgrounds. On * white that measures 4.39:1, which is below the WCAG AA threshold of 4.5:1 * for body text -- and below the 5.18:1 that Forgejo's own #c2410c achieves. * Forgejo puts --color-primary on a lot of small text, so taking the site * token verbatim would have made this instance measurably less readable than * stock. Primary is therefore one step darker (#157a41, 5.40:1) and the site's * own #1a8a4a sits at --color-primary-light-1, which upstream maps to * --color-accent. The brand tone is still the one on screen; it just is not * the one carrying 12px text. * * The dark ramp mirrors upstream's inverted structure: dark-* gets lighter, * light-* gets darker, and hover/active read from light-1/light-2 rather than * dark-2/dark-4. */ html[data-theme="forgejo-light"] { --color-primary: #157a41; --color-primary-contrast: #ffffff; --color-primary-dark-1: #157a41; --color-primary-dark-2: #116434; --color-primary-dark-3: #116434; --color-primary-dark-4: #0d4f29; --color-primary-dark-5: #0d4f29; --color-primary-dark-6: #0a3d20; --color-primary-dark-7: #0a3d20; --color-primary-light-1: #1a8a4a; --color-primary-light-2: #22a259; --color-primary-light-3: #2fbb69; --color-primary-light-4: #5ec47e; --color-primary-light-5: #a9e8be; --color-primary-light-6: #d8f2e2; --color-primary-light-7: #eefaf3; --color-primary-alpha-10: #157a4119; --color-primary-alpha-20: #157a4133; --color-primary-alpha-30: #157a414b; --color-primary-alpha-40: #157a4166; --color-primary-alpha-50: #157a4180; --color-primary-alpha-60: #157a4199; --color-primary-alpha-70: #157a41b3; --color-primary-alpha-80: #157a41cc; --color-primary-alpha-90: #157a41e1; --color-primary-hover: var(--color-primary-dark-2); --color-primary-active: var(--color-primary-dark-4); } html[data-theme="forgejo-dark"] { --color-primary: #70d993; --color-primary-contrast: #000000; --color-primary-dark-1: #a9e8be; --color-primary-dark-2: #a9e8be; --color-primary-dark-3: #d8f2e2; --color-primary-dark-4: #d8f2e2; --color-primary-dark-5: #eefaf3; --color-primary-dark-6: #eefaf3; --color-primary-dark-7: #f7fdfa; --color-primary-light-1: #5ec47e; --color-primary-light-2: #2fbb69; --color-primary-light-3: #22a259; --color-primary-light-4: #1a8a4a; --color-primary-light-5: #1a8a4a; --color-primary-light-6: #157a41; --color-primary-light-7: #157a41; --color-primary-alpha-10: #2fbb6919; --color-primary-alpha-20: #2fbb6933; --color-primary-alpha-30: #2fbb694b; --color-primary-alpha-40: #2fbb6966; --color-primary-alpha-50: #2fbb6980; --color-primary-alpha-60: #2fbb6999; --color-primary-alpha-70: #2fbb69b3; --color-primary-alpha-80: #2fbb69cc; --color-primary-alpha-90: #2fbb69e1; --color-primary-hover: var(--color-primary-light-1); --color-primary-active: var(--color-primary-light-2); }