@phantompixeldev/retrocss 2.0.0 → 2.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +24 -0
- package/dist/retro.css +1814 -121
- package/dist/retro.css.map +1 -1
- package/dist/retro.min.css +1 -1
- package/dist/retro.min.css.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -179,6 +179,30 @@ default; for a modern heading font, set
|
|
|
179
179
|
> renamed or removed, but 2.0 visibly restyles a few things to meet WCAG AA —
|
|
180
180
|
> each with a one-line override.
|
|
181
181
|
|
|
182
|
+
## Utilities
|
|
183
|
+
|
|
184
|
+
Atomic helpers driven by the same tokens as the components, all `retro-` prefixed.
|
|
185
|
+
|
|
186
|
+
| Group | Classes |
|
|
187
|
+
| --- | --- |
|
|
188
|
+
| Layout | `retro-main-layout`, `retro-flex`, `retro-flex-col`, `retro-flex-1`, `retro-items-center`, `retro-justify-between` |
|
|
189
|
+
| Spacing | `retro-m{t,b,l,r,x,y}-0…8`, `retro-p…`, `retro-gap-0…8`, `retro-mx-auto` (0, 4, 8, 12, 16, 24, 32, 40, 48px) |
|
|
190
|
+
| Sizing | `retro-w-full`, `retro-max-w-full`, `retro-max-w-prose`, `retro-max-w-{sm…xxl}` |
|
|
191
|
+
| Colour | `retro-bg-<hue>`, `retro-bg-<hue>-subtle`, `retro-text-<hue>`, `retro-border-<hue>` |
|
|
192
|
+
| Effects | `retro-raised`, `retro-sunken`, `retro-shadow-{sm,md,lg}`, `retro-rounded` |
|
|
193
|
+
|
|
194
|
+
`retro-bg-<hue>` sets the fill **and** its matching on-fill text colour, so a filled
|
|
195
|
+
panel is legible in both themes from a single class:
|
|
196
|
+
|
|
197
|
+
```html
|
|
198
|
+
<div class="retro-bg-primary retro-p-4">Readable in both themes</div>
|
|
199
|
+
<div class="retro-bg-success-subtle retro-p-4">Tinted callout</div>
|
|
200
|
+
```
|
|
201
|
+
|
|
202
|
+
Pick the tier by role: `retro-bg-*` to fill a surface, `retro-text-*` for text sitting
|
|
203
|
+
on a page surface. Putting an on-surface colour inside a filled panel paints the hue
|
|
204
|
+
on itself — that is the one combination to avoid.
|
|
205
|
+
|
|
182
206
|
## Accessibility
|
|
183
207
|
|
|
184
208
|
Every text/surface pair the framework produces clears WCAG AA (4.5:1) in both
|