/** * Global text contrast. * * The Vuexy palette is washed out enough to be genuinely hard to read, and its secondary text * fails WCAG AA outright. Measured against the page background: * * light mode body #6f6b7d 5.15:1 (AA, but flat) -> #4b4658 9.07:1 AAA * muted #a5a3ae 2.49:1 FAILS AA -> #5f5b6b 6.57:1 AA * dark mode body #b6bee3 7.85:1 already fine, left alone * muted #7983bb 3.95:1 FAILS AA -> #9aa3cf 5.83:1 AA * * Muted stays clearly lighter than body text in both themes, so the visual hierarchy the * template intends survives — it is just readable now. * * Scoped by the theme class on rather than a prefers-color-scheme query: the style is * chosen server-side from config/custom.php and switched by the customizer, so a media query * would not track it. * * Loaded last in layouts/sections/styles.blade.php. The theme declares .text-muted and * .text-body with !important, so these have to match to win. */ /* ---------- light ---------- */ html.light-style { --bs-body-color: #4b4658; --bs-body-color-rgb: 75, 70, 88; --bs-secondary-color: #5f5b6b; --bs-secondary-color-rgb: 95, 91, 107; } html.light-style body { color: #4b4658; } html.light-style .text-body { color: #4b4658 !important; } html.light-style .text-muted { color: #5f5b6b !important; } /* ---------- dark ---------- */ html.dark-style { --bs-secondary-color: #9aa3cf; --bs-secondary-color-rgb: 154, 163, 207; } html.dark-style .text-muted { color: #9aa3cf !important; } /** * --------------------------------------------------------------------------------------- * Semantic colours. * * The palette's accent colours are picked to look good as button FILLS, then reused as * foreground text on a pale tint of themselves. Every one of them fails WCAG AA that way in * light mode. The worst is the badge on "Bought from another rep": #a8aaae on #f2f2f3 is * 2.08:1, which is why that row reads as blank. * * Replacements below hold hue and saturation and move only lightness — down in light mode, up * in dark — until the pair reaches 4.5:1. So a warning still looks amber and a success still * looks green; they are just legible. Measured, on the tint each one actually sits on: * * LIGHT, badge text on its own tint LIGHT, .text-* on white * secondary 2.08 -> 4.51 secondary 2.33 -> 4.69 * success 1.96 -> 4.70 success 2.21 -> 4.55 * danger 2.97 -> 4.63 danger 3.56 -> 4.55 * warning 1.84 -> 4.62 warning 2.04 -> 4.67 * info 1.69 -> 4.60 info 1.89 -> 4.56 * primary 3.51 -> 4.73 primary 4.26 -> 4.71 * * DARK, badge text on its dark tint DARK, .text-* on the card * secondary 4.01 -> 4.50 danger 3.49 -> 4.68 * success 4.24 -> 4.60 primary 2.91 -> 4.56 * danger 2.97 -> 4.58 (the rest already pass) * primary 2.53 -> 4.57 * * Only the foreground is touched. Backgrounds, buttons and fills are left exactly as the * theme draws them, so nothing changes shape or weight — only what you can read. */ /* ---------- light: badge foregrounds ---------- */ html.light-style .bg-label-secondary { color: #6c6f74 !important; } html.light-style .bg-label-success { color: #197b44 !important; } html.light-style .bg-label-danger { color: #ce191b !important; } html.light-style .bg-label-warning { color: #ae5500 !important; } html.light-style .bg-label-info { color: #007987 !important; } html.light-style .bg-label-primary { color: #594bed !important; } /* ---------- light: text utilities ---------- */ html.light-style .text-secondary { color: #71747a !important; } html.light-style .text-success { color: #1b874b !important; } html.light-style .text-danger { color: #e42728 !important; } html.light-style .text-warning { color: #b85a00 !important; } html.light-style .text-info { color: #008291 !important; } html.light-style .text-primary { color: #6a5eef !important; } /* ---------- dark: badge foregrounds ---------- */ html.dark-style .bg-label-secondary { color: #b3b4b8 !important; } html.dark-style .bg-label-success { color: #2acf74 !important; } html.dark-style .bg-label-danger { color: #f18f90 !important; } html.dark-style .bg-label-primary { color: #a69ff5 !important; } /* ---------- dark: text utilities ---------- */ html.dark-style .text-danger { color: #ef7d7e !important; } html.dark-style .text-primary { color: #9991f4 !important; }