apps/site · SvelteKit static · mdsvex
Public site
rgaa.dev: the product's pages, the articles and the component sheets with their teaching demos. The same stylesheet order as the app; the demos are the one thing that stays outside the system on purpose.
What it imports
In apps/site/src/app.css, in this order. A test in the package holds the order for the two SvelteKit apps.
@import '@rgaa-dev/design/fonts.css';
@import '@rgaa-dev/design/tokens.css';
@import 'tailwindcss/base';
@import '@rgaa-dev/design/base.css';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';The teaching demos
The sheets under /composants each carry a live demo that shows one accessible pattern with its
own instrumentation: a focus witness, a DOM inspection, a live-region timer. Those demos are teaching
material and deliberately do not import the package: a reader must be able to copy one into any project.
When a demo is extracted into a component here, its sheet closes with a link to the system counterpart,
and a test holds the link.
Articles
Article typography is the base layer's rl-prose, on the tokens, in place of the typography
plugin the site used to carry. Lexend left with it; nothing used it.
And this site
design.rgaa.dev imports fonts, tokens and base only, no Tailwind: it is the consumer that proves the
components need none. Its chrome is a few hundred lines of ds- rules on the tokens, and it
audits itself with the product's own engine before it is deployed.