sinvo/docmost
1
0
Fork 0
mirror of https://github.com/docmost/docmost.git synced 2026-08-26 00:07:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(a11y): WCAG 2.1 AA fixes (#2219)

Browse Source
This commit is contained in:
Philip Okugbe
2026-05-20 16:47:25 +01:00
committed by GitHub
parent 1c166c4736
commit 92c0e36e46
119 changed files with 1064 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/theme.ts
+29
View File
@@ -74,6 +74,35 @@ export const mantineCssResolver: CSSVariablesResolver = (theme) => ({
"--mantine-color-dimmed": "#4b5563",
"--mantine-color-dark-light-color": "#4e5359",
"--mantine-color-dark-light-hover": "var(--mantine-color-gray-light-hover)",
// Override the semantic error color so input error text / borders /
// required asterisks meet WCAG AA 4.5:1 contrast on the filled-input
// background (#f1f3f5). red.6 (#d43535) lands at 4.36:1; red.7 (#bc2727)
// gives ~5.7:1. Does not affect other red usages.
"--mantine-color-error": "var(--mantine-color-red-7)",
// Bump subtle-gray icon/text color from gray.6 (#868e96, 2.99:1 on filled
// input — fails WCAG AA 3:1 for non-text) to gray.7 (#495057, 7.35:1).
// Affects ActionIcon variant="subtle" color="gray" (password visibility
// toggle, row action menus, etc.).
"--mantine-color-gray-light-color": "var(--mantine-color-gray-7)",
// Bump input placeholder color from gray.5 (#adb5bd, 1.87:1 on filled
// input — fails WCAG AA 4.5:1) to #686868 (5.01:1 on filled, 5.57:1 on
// white). Halfway between Mantine's gray.6 and gray.7 so the placeholder
// stays visually distinct from real text while clearing the bar with a
// safe margin. Affects placeholders across all Mantine inputs.
"--mantine-color-placeholder": "#686868",
// Bump variant="light" red text from red.6 (#d43535, 4.17:1 on the
// 10% red-over-white blended pink background — fails WCAG AA 4.5:1)
// to red.7 (#bc2727, 5.26:1). Affects every <Button color="red"
// variant="light"> and matching Badge / Text usages (destructive
// actions, red badges).
"--mantine-color-red-light-color": "var(--mantine-color-red-7)",
// Bump variant="light" green text. Green is inherently bright in
// luminance, so even Mantine's green.9 (#2b8a3e, 3.78:1) fails 4.5:1
// on the light-green bg. Use a custom dark green (#1b5e20, Material
// green 900) outside the standard palette range. New contrast:
// ~6.8:1. Affects every <Badge color="green" variant="light"> and
// matching Button / Text usages.
"--mantine-color-green-light-color": "#1B5E20",
},
dark: {
"--mantine-color-dark-light-color": "var(--mantine-color-gray-4)",