Two containers · four breakpoints · seven layers
Layout
A page is a column of prose or a wide grid, and reflows down to 320 pixels without a horizontal scroll: criterion 10.11 is held on the three surfaces, the extension's sidebar included, which Firefox lets go down to 216.
Containers and breakpoints
| Token | Value | Note |
|---|---|---|
--rl-container-prose | 48rem | An article, a form, a settings page. |
--rl-container-wide | 72rem | A dashboard, a table, a grid of cards. |
breakpoint.sm | 640px | Not emitted to CSS: a custom property cannot feed a media query. TypeScript and the Tailwind preset read it from the source. |
breakpoint.md | 768px | Not emitted to CSS: a custom property cannot feed a media query. TypeScript and the Tailwind preset read it from the source. |
breakpoint.lg | 1024px | Not emitted to CSS: a custom property cannot feed a media query. TypeScript and the Tailwind preset read it from the source. |
breakpoint.xl | 1280px | Not emitted to CSS: a custom property cannot feed a media query. TypeScript and the Tailwind preset read it from the source. |
Corners and lines
Corners are nearly straight: 2px at most, zero on structural elements. The direction refuses the generic rounded-lg.
| Token | Value | Shown |
|---|---|---|
--rl-radius | 2px | |
--rl-radius-none | 0 | |
--rl-border | 1px | |
--rl-border-strong | 1.5px |
The stacking order
The stacking order, in one place. The last value sits above any host page the extension draws into.
| Token | Value |
|---|---|
--rl-z-sticky | 10 |
--rl-z-drawer | 30 |
--rl-z-busy | 40 |
--rl-z-skip | 50 |
--rl-z-modal | 60 |
--rl-z-toast | 70 |
--rl-z-furniture | 2147483000 |