mirror of
https://github.com/authelia/authelia.git
synced 2026-10-28 09:34:52 +08:00
Amir ZarrinkafshandJames Elliott
783f6d9997
Replace Material UI with Tailwind CSS and shadcn/ui components built on Base UI primitives for the entire web frontend. This removes the dependency on @mui/material, @mui/icons-material, @emotion/react, @emotion/styled, @emotion/cache, and react-spinners in favour of a lighter utility-first CSS approach with accessible headless components. Retire the remaining component libraries along with it. The three icons still using FontAwesome move to lucide-react, dropping four @fortawesome packages, and react18-input-otp is replaced by Base UI's OTPField. Notifications move to Base UI's Toast, which is styled from the theme instead of injecting its own stylesheet, so the Content Security Policy is unchanged. Add a colour prop to the Button component, mirroring MUI's colour behaviour, allowing variant and colour to be controlled independently across default, ghost, and outline variants with primary, destructive, secondary, and success colour options. Add an error prop to the Input component, which automatically sets aria-invalid for accessibility, matching the behaviour previously provided by MUI TextField. Express the theme palette in oklch, the format Tailwind CSS and Base UI use for their own tokens, and correct the values that had drifted from the colours they were ported from. Improve accessibility beyond the MUI baseline: dialogs and the settings drawer now have accessible names, icon-only controls carry labels, and the one-time password field is named and marks its invalid state. Translate the sign out tooltips and the password method heading, which rendered in English whatever the selected language. Fix defects the migration surfaced that predate it. Tooltips sit above the page and took pointer events, so one could cover the control it describes and swallow the click meant for it. The two factor panels reported nothing registered while they were still loading, briefly telling a registered user they had registered nothing. The copy button left its timeouts running after unmount. The WebAuthn and Duo methods guarded the start of their ceremony with a ref that does not survive an effect being run twice, so in development the ceremony was never started and the method waited for an approval it had not asked for. Fix integration test compatibility, including notification element class names, aria-invalid attributes on form inputs, element ids on the interactive control rather than the hidden input Base UI assigns them to, and a useRef guard in ResetPasswordStep2 to prevent double token consumption during React StrictMode. Make the integration suites tolerate a page that animates. An element part way through a transition has no visible shape, sits outside the viewport, or is disabled and takes no pointer events, and rod reports each of those as a failure rather than waiting for it to pass, so interactions retry within a deadline of their own and report the state the element was in when they gave up. Notification waits account for several being displayed at once, and the fixed intervals that stood in for waiting on the page are replaced by waits on what the assertion reads. Update the Vite dev server readiness check in the integration test environment to wait for the server restart after .env.development changes, ensuring tests do not start before the frontend is stable. --------- Signed-off-by: Amir Zarrinkafsh <3339418+nightah@users.noreply.github.com> Co-authored-by: James Elliott <james-d-elliott@users.noreply.github.com>
22 lines
419 B
JSON
22 lines
419 B
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema.json",
|
|
"style": "new-york",
|
|
"rsc": false,
|
|
"tsx": true,
|
|
"tailwind": {
|
|
"config": "",
|
|
"css": "src/index.css",
|
|
"baseColor": "neutral",
|
|
"cssVariables": true,
|
|
"prefix": ""
|
|
},
|
|
"aliases": {
|
|
"components": "@components",
|
|
"hooks": "@hooks",
|
|
"lib": "@utils",
|
|
"ui": "@components/UI",
|
|
"utils": "@utils"
|
|
},
|
|
"iconLibrary": "lucide"
|
|
}
|