@phantompixeldev/retrocss 1.0.7 → 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.
Files changed (10) hide show
  1. package/LICENSE +21 -0
  2. package/MIGRATION.md +127 -0
  3. package/README.md +267 -171
  4. package/dist/retro.css +2822 -832
  5. package/dist/retro.css.map +1 -1
  6. package/dist/retro.js +231 -48
  7. package/dist/retro.min.css +1 -1
  8. package/dist/retro.min.css.map +1 -1
  9. package/dist/retro.min.js +2 -2
  10. package/package.json +53 -51
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2024 PhantomPixelDev
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/MIGRATION.md ADDED
@@ -0,0 +1,127 @@
1
+ # Migrating to RetroCSS 2.0
2
+
3
+ 2.0 is an accessibility and readability release. Nothing was renamed and no
4
+ class was removed — every 1.x class still works. What changed is how things
5
+ **look**, because a lot of 1.x was genuinely unreadable: `.retro-text-info`
6
+ measured 1.25:1 against white, and the `.keyword` colour in a dark-mode code
7
+ block measured 1.02:1.
8
+
9
+ Every text/surface pair the framework produces now clears WCAG AA (4.5:1) in
10
+ both themes. `npm run check:a11y` asserts it on every build.
11
+
12
+ ## The one-line escape hatches
13
+
14
+ Most of the visual changes can be reverted with a custom property. Put these in
15
+ your own stylesheet, after RetroCSS:
16
+
17
+ ```css
18
+ :root {
19
+ /* Restore Segoe UI headings */
20
+ --retro-font-heading: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
21
+
22
+ /* Restore white-on-red danger — but darken the fill so it still passes AA.
23
+ White on pure #ff0000 is only 4.00:1. */
24
+ --retro-danger: #cc0000;
25
+ --retro-danger-fg: #ffffff;
26
+
27
+ /* Restore the tighter 1.x body leading */
28
+ --retro-line-height: 1.4;
29
+ }
30
+ ```
31
+
32
+ ## What changed, and why
33
+
34
+ ### Colour tokens now come in four tiers
35
+
36
+ The 1.x palette did double duty: `--retro-info` was both the background of a
37
+ filled badge and the colour of `.retro-text-info`. Those two roles need
38
+ different values, which is why the text utilities were unreadable.
39
+
40
+ | Token | Role |
41
+ | --- | --- |
42
+ | `--retro-primary` | **Fill** — background of a filled badge, button, alert |
43
+ | `--retro-primary-fg` | **On-fill** — text placed *on* that fill |
44
+ | `--retro-primary-text` | **On-surface** — that hue used as text on a page background |
45
+ | `--retro-primary-hover` / `-active` | **States** — fill under `:hover` / `:active` |
46
+
47
+ All four exist for every hue: `primary, success, danger, warning, info, teal,
48
+ tan, pink, lime, cyan, orange, brown, violet, gray, maroon, gold, navy, olive,
49
+ silver`.
50
+
51
+ **The fill values are unchanged from 1.x.** If you overrode `--retro-primary`,
52
+ that still works exactly as before. What you may also want to override now is
53
+ the matching `-text` and `-fg`.
54
+
55
+ `--retro-black` and `--retro-white` still work and still invert between themes,
56
+ but `--retro-text` / `--retro-text-inverse` say what they mean. Prefer those.
57
+
58
+ ### Visible changes
59
+
60
+ 1. **`.retro-text-*` colours changed.** They now use the accessible `-text`
61
+ ramp instead of the raw fill. This is the headline fix.
62
+ 2. **Headings use the body font.** `h1`–`h6` were hardcoded to Segoe UI while
63
+ `body` was MS Sans Serif. Override `--retro-font-heading` to get it back.
64
+ 3. **`--retro-danger` filled components use black text.** White on `#ff0000` is
65
+ 4.00:1 and fails AA. See the escape hatch above.
66
+ 4. **Inputs regained the Win9x bevel.** A rule in 1.x re-declared
67
+ `border: 1px solid #b0b0b0; border-radius: 4px` over the tokenized 2px
68
+ bevel, flattening every field and freezing its border at a light-mode hex.
69
+ 5. **Focus rings use `:focus-visible`.** They no longer fire on mouse clicks.
70
+ Text inputs still ring on click — browsers treat their focus as visible.
71
+ 6. **Body line-height is 1.5** (was 1.4).
72
+ 7. **Font sizes are a `rem` scale.** `html` was `16px` while `body` was `14px`
73
+ in px, so every `em` in the framework measured against the wrong base and
74
+ nested ems compounded. `--retro-font-size-*` keep their computed px values;
75
+ `html` is now `font-size: 100%`, so the scale honours the reader's browser
76
+ setting.
77
+ 8. **Button line-heights normalized.** 1.x grew leading with size (1.2 → 1.7),
78
+ making the xxl button needlessly tall. All sizes now share one value.
79
+ 9. **Heading margins are a fixed rhythm** rather than `em`-relative, which had
80
+ given `h1` a larger gap than `h6` — backwards for a hierarchy.
81
+ 10. **`.retro-heading-*` render as the beveled gradient.** 1.x shipped two
82
+ blocks defining these at the same specificity; the later flat-pastel one
83
+ silently shadowed the gradient one. The gradient version survived.
84
+ 11. **`.retro-toast` lost its hardcoded `#ffffcc`.** It was defined twice —
85
+ once from light-only SCSS variables, once tokenized. The tokenized
86
+ definition survived; it now follows the theme. Override
87
+ `--retro-toast-bg` / `--retro-toast-text` if you want the yellow back.
88
+
89
+ ### Behaviour changes
90
+
91
+ - **Modals are keyboard-safe.** Opening one sets `role="dialog"` and
92
+ `aria-modal`, names it from its header, moves focus inside and traps it,
93
+ makes the rest of the page `inert`, and restores focus on close. If you were
94
+ relying on being able to Tab out of an open modal, that no longer happens.
95
+ - **Dropdowns respond to Arrow / Home / End / Escape / Tab**, and carry
96
+ `aria-haspopup` / `aria-expanded` / `role="menu"` / `role="menuitem"`.
97
+ - **`[data-retro-modal]` triggers fire once.** 1.x bound both a delegated and a
98
+ per-element click handler, so every trigger opened its modal twice.
99
+ - **`prefers-reduced-motion` is honoured.** Animations and transitions are
100
+ neutralised; the looping text effects switch off entirely.
101
+
102
+ ### Removed
103
+
104
+ - `--retro-letter-spacing`. Defined since 1.0, referenced by zero rules.
105
+ - The duplicate `.retro-toast` rule in `_base.scss` and the `$retro-toast-*`
106
+ SCSS variables that fed it.
107
+ - Unreachable toast icon styles in `_alert.scss`, already dead behind
108
+ `display: none !important`.
109
+
110
+ ### Added
111
+
112
+ - `.retro-sr-only` and `.retro-sr-only-focusable` for labelling icon-only
113
+ controls and building skip links.
114
+ - `.retro-prose` — an opt-in long-form container that caps the measure and
115
+ opens up leading.
116
+ - `--retro-text`, `--retro-text-muted`, `--retro-text-inverse`,
117
+ `--retro-font-heading`, `--retro-font-mono`, `--retro-font-size-xs`…`-3xl`,
118
+ `--retro-line-height-tight`, `--retro-font-weight-*`, `--retro-measure`, and
119
+ per-theme syntax-highlighting tokens.
120
+ - Fifteen custom properties that 1.x referenced in `var()` but never defined,
121
+ so those declarations did nothing at all: `--retro-text-muted`,
122
+ `--retro-shadow-light`, `--retro-font-weight-bold`, `--retro-primary-dark`,
123
+ `--retro-gray-100`, `--retro-transition-base`,
124
+ `--retro-box-shadow-outset-button` and others. Defining them means rules that
125
+ were previously inert now render — the sidebar hamburger becomes visible,
126
+ `.retro-text-bold` actually bolds, form validation rings appear, and dropdown
127
+ hover works.
package/README.md CHANGED
@@ -1,171 +1,267 @@
1
- # RetroCSS
2
-
3
- A retro-inspired CSS framework that brings the nostalgic Windows 95/98 aesthetic to modern web applications.
4
-
5
- ## Features
6
-
7
- - **Authentic Retro Look**: Carefully crafted to mimic the classic Windows 95/98 UI
8
- - **Modern CSS**: Built with modern CSS features while maintaining the retro aesthetic
9
- - **Responsive**: Works on all screen sizes while preserving the retro feel
10
- - **Modular JS**: Organized component-based JavaScript architecture using ES modules
11
- - **Dark Mode**: Built-in dark mode support
12
- - **Accessible**: Designed with accessibility in mind
13
- - **Data Attribute API**: Use data attributes for easy component triggers (modals, toasts, tooltips, etc.)
14
- - **Beautiful Examples**: Includes dashboard, blog, login, register, and more, all with retro style
15
-
16
- ## Installation
17
-
18
- ### NPM
19
-
20
- ```bash
21
- npm install @phantompixeldev/retrocss
22
- ```
23
-
24
- ### CDN
25
-
26
- ```html
27
- <!-- CSS -->
28
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@phantompixeldev/retrocss/dist/retro.min.css">
29
-
30
- <!-- JavaScript -->
31
- <script src="https://cdn.jsdelivr.net/npm/@phantompixeldev/retrocss/dist/retro.min.js"></script>
32
- ```
33
-
34
- ### Download
35
-
36
- Download the latest release from GitHub and include the CSS and JS files in your project:
37
-
38
- ```html
39
- <link rel="stylesheet" href="path/to/retro.min.css">
40
- <script src="path/to/retro.min.js"></script>
41
- ```
42
-
43
- ## Usage
44
-
45
- RetroCSS provides a wide range of components and utilities to build retro-styled interfaces:
46
-
47
- ```html
48
- <div class="retro-card">
49
- <div class="retro-card-header">Windows 95</div>
50
- <div class="retro-card-content">
51
- <p>Welcome to RetroCSS!</p>
52
- <button class="retro-btn retro-btn-primary">OK</button>
53
- </div>
54
- </div>
55
- ```
56
-
57
- See the [documentation](documentation.html) for detailed usage instructions and examples.
58
-
59
- ### Example Pages
60
-
61
- Check out the beautiful, ready-to-use examples in the `examples/` folder:
62
-
63
- - [Dashboard](examples/dashboard.html)
64
- - [Blog](examples/blog.html)
65
- - [Blog Post](examples/blog-post.html)
66
- - [Login](examples/login.html)
67
- - [Register](examples/register.html)
68
-
69
- Each page demonstrates best practices, retro layouts, and interactive components.
70
-
71
- ## JavaScript Architecture & Data Attribute API
72
-
73
- RetroCSS uses a modular JavaScript architecture with ES modules. All interactive components can be triggered via JavaScript or data attributes:
74
-
75
- ```javascript
76
- // Import all components (bundled version)
77
- import RetroCSS from '@phantompixeldev/retrocss';
78
-
79
- // Initialize all components
80
- RetroCSS.init();
81
-
82
- // Use individual components
83
- RetroCSS.modal.show('myModal');
84
- RetroCSS.toast.show('Hello World', { type: 'success' });
85
- ```
86
-
87
- **Data Attribute API Example:**
88
-
89
- ```html
90
- <!-- Show a toast on click -->
91
- <button data-retro-toast="Hello from RetroCSS!">Show Toast</button>
92
-
93
- <!-- Show a modal on click -->
94
- <button data-retro-modal="myModal">Open Modal</button>
95
- ```
96
-
97
- ## HTML Toasts
98
-
99
- Show toast notifications with rich HTML content:
100
-
101
- ```html
102
- <button
103
- data-retro-toast="<b>Custom Toast</b><br>With <i>HTML</i> content!"
104
- data-retro-toast-html>
105
- Show Custom Toast
106
- </button>
107
- ```
108
-
109
- Or via JavaScript:
110
-
111
- ```javascript
112
- RetroCSS.toast.show('<b>Custom Toast</b><br>With <i>HTML</i> content!', { html: true });
113
- ```
114
-
115
- > **Note:** Only use trusted HTML for toasts. HTML toasts get a `.retro-toast-html` class for custom styling.
116
-
117
- ## Customization
118
-
119
- RetroCSS can be customized using CSS variables:
120
-
121
- ```css
122
- :root {
123
- --retro-primary: #0000aa;
124
- --retro-success: #008000;
125
- --retro-danger: #ff0000;
126
- --retro-body-bg: #c0c0c0;
127
- /* And many more variables */
128
- }
129
-
130
- /* Dark mode customization */
131
- [data-theme="dark"] {
132
- --retro-body-bg: #3a3a3a;
133
- --retro-primary: #00aaff;
134
- /* Override other variables for dark mode */
135
- }
136
- ```
137
-
138
- ## Browser Support
139
-
140
- RetroCSS supports all modern browsers:
141
-
142
- - Chrome/Edge (latest)
143
- - Firefox (latest)
144
- - Safari (latest)
145
- - Opera (latest)
146
-
147
- ## Development
148
-
149
- Clone the repository:
150
-
151
- ```bash
152
- git clone https://github.com/phantompixeldev/retrocss.git
153
- cd retrocss
154
- npm install
155
- ```
156
-
157
- Build the project:
158
-
159
- ```bash
160
- npm run build
161
- ```
162
-
163
- Watch for changes:
164
-
165
- ```bash
166
- npm run watch
167
- ```
168
-
169
- ## License
170
-
171
- MIT
1
+ <div align="center">
2
+
3
+ # 🖥️ RetroCSS
4
+
5
+ **A retro-inspired CSS framework that brings the nostalgic Windows 95/98 aesthetic to modern web applications.**
6
+
7
+ [![npm version](https://img.shields.io/npm/v/%40phantompixeldev%2Fretrocss?style=flat-square&color=0047AB&label=npm)](https://www.npmjs.com/package/@phantompixeldev/retrocss)
8
+ [![npm downloads](https://img.shields.io/npm/dm/%40phantompixeldev%2Fretrocss?style=flat-square&color=00A86B)](https://www.npmjs.com/package/@phantompixeldev/retrocss)
9
+ [![bundle size](https://img.shields.io/bundlejs/size/%40phantompixeldev%2Fretrocss?style=flat-square&label=bundle%20size)](https://bundlejs.com/?q=%40phantompixeldev%2Fretrocss)
10
+ [![npm unpacked](https://img.shields.io/npm/unpacked-size/%40phantompixeldev%2Fretrocss?style=flat-square&label=size&color=9cf)](https://www.npmjs.com/package/@phantompixeldev/retrocss)
11
+ [![jsDelivr hits](https://img.shields.io/jsdelivr/npm/hm/%40phantompixeldev%2Fretrocss?style=flat-square&label=jsDelivr%20hits&color=FF6B00)](https://www.jsdelivr.com/package/npm/@phantompixeldev/retrocss)
12
+ [![GitHub stars](https://img.shields.io/github/stars/PhantomPixelDev/RetroCSS?style=flat-square&color=FFD700)](https://github.com/PhantomPixelDev/RetroCSS/stargazers)
13
+ [![GitHub issues](https://img.shields.io/github/issues/PhantomPixelDev/RetroCSS?style=flat-square&color=FF6B6B)](https://github.com/PhantomPixelDev/RetroCSS/issues)
14
+ [![license](https://img.shields.io/github/license/PhantomPixelDev/RetroCSS?style=flat-square&color=lightgrey)](https://github.com/PhantomPixelDev/RetroCSS/blob/main/LICENSE)
15
+ [![last commit](https://img.shields.io/github/last-commit/PhantomPixelDev/RetroCSS?style=flat-square&color=8A2BE2)](https://github.com/PhantomPixelDev/RetroCSS/commits/main)
16
+
17
+ **[📺 Live Demo](https://phantompixeldev.github.io/RetroCSS/) • [📖 Documentation](https://phantompixeldev.github.io/RetroCSS/documentation.html) • [📦 npm](https://www.npmjs.com/package/@phantompixeldev/retrocss) • [💻 GitHub](https://github.com/PhantomPixelDev/RetroCSS)**
18
+
19
+ </div>
20
+
21
+ ---
22
+
23
+ ## Features
24
+
25
+ - **Authentic Retro Look**: Carefully crafted to mimic the classic Windows 95/98 UI
26
+ - **Modern CSS**: Built with modern CSS features while maintaining the retro aesthetic
27
+ - **Responsive**: Works on all screen sizes while preserving the retro feel
28
+ - **Modular JS**: Organized component-based JavaScript architecture using ES modules
29
+ - **Dark Mode**: Built-in dark mode support
30
+ - **Accessible**: Designed with accessibility in mind
31
+ - **Data Attribute API**: Use data attributes for easy component triggers (modals, toasts, tooltips, etc.)
32
+ - **Beautiful Examples**: Includes dashboard, blog, login, register, and more, all with retro style
33
+
34
+ ## Installation
35
+
36
+ ### NPM
37
+
38
+ ```bash
39
+ npm install @phantompixeldev/retrocss
40
+ ```
41
+
42
+ ### CDN
43
+
44
+ ```html
45
+ <!-- CSS -->
46
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@phantompixeldev/retrocss/dist/retro.min.css">
47
+
48
+ <!-- JavaScript -->
49
+ <script src="https://cdn.jsdelivr.net/npm/@phantompixeldev/retrocss/dist/retro.min.js"></script>
50
+ ```
51
+
52
+ ### Download
53
+
54
+ Download the latest release from GitHub and include the CSS and JS files in your project:
55
+
56
+ ```html
57
+ <link rel="stylesheet" href="path/to/retro.min.css">
58
+ <script src="path/to/retro.min.js"></script>
59
+ ```
60
+
61
+ ## Usage
62
+
63
+ RetroCSS provides a wide range of components and utilities to build retro-styled interfaces:
64
+
65
+ ```html
66
+ <div class="retro-card">
67
+ <div class="retro-card-header">Windows 95</div>
68
+ <div class="retro-card-content">
69
+ <p>Welcome to RetroCSS!</p>
70
+ <button class="retro-btn retro-btn-primary">OK</button>
71
+ </div>
72
+ </div>
73
+ ```
74
+
75
+ See the [documentation](documentation.html) for detailed usage instructions and examples.
76
+
77
+ ### Example Pages
78
+
79
+ Check out the beautiful, ready-to-use examples in the `examples/` folder:
80
+
81
+ - [Dashboard](examples/dashboard.html)
82
+ - [Blog](examples/blog.html)
83
+ - [Blog Post](examples/blog-post.html)
84
+ - [Login](examples/login.html)
85
+ - [Register](examples/register.html)
86
+
87
+ Each page demonstrates best practices, retro layouts, and interactive components.
88
+
89
+ ## JavaScript Architecture & Data Attribute API
90
+
91
+ RetroCSS uses a modular JavaScript architecture with ES modules. All interactive components can be triggered via JavaScript or data attributes:
92
+
93
+ ```javascript
94
+ // Import all components (bundled version)
95
+ import RetroCSS from '@phantompixeldev/retrocss';
96
+
97
+ // Initialize all components
98
+ RetroCSS.init();
99
+
100
+ // Use individual components
101
+ RetroCSS.modal.show('myModal');
102
+ RetroCSS.toast.show('Hello World', { type: 'success' });
103
+ ```
104
+
105
+ **Data Attribute API Example:**
106
+
107
+ ```html
108
+ <!-- Show a toast on click -->
109
+ <button data-retro-toast="Hello from RetroCSS!">Show Toast</button>
110
+
111
+ <!-- Show a modal on click -->
112
+ <button data-retro-modal="myModal">Open Modal</button>
113
+ ```
114
+
115
+ ## HTML Toasts
116
+
117
+ Show toast notifications with rich HTML content:
118
+
119
+ ```html
120
+ <button
121
+ data-retro-toast="<b>Custom Toast</b><br>With <i>HTML</i> content!"
122
+ data-retro-toast-html>
123
+ Show Custom Toast
124
+ </button>
125
+ ```
126
+
127
+ Or via JavaScript:
128
+
129
+ ```javascript
130
+ RetroCSS.toast.show('<b>Custom Toast</b><br>With <i>HTML</i> content!', { html: true });
131
+ ```
132
+
133
+ > **Note:** Only use trusted HTML for toasts. HTML toasts get a `.retro-toast-html` class for custom styling.
134
+
135
+ ## Customization
136
+
137
+ RetroCSS is customized through CSS variables, organised in four tiers per colour.
138
+ Picking the right tier matters: a value tuned as a background is usually unreadable
139
+ as text.
140
+
141
+ | Token | Role |
142
+ | --- | --- |
143
+ | `--retro-primary` | **Fill** — background of a filled badge, button or alert |
144
+ | `--retro-primary-fg` | **On-fill** — text placed *on* that fill |
145
+ | `--retro-primary-text` | **On-surface** — that hue used as text on a page background |
146
+ | `--retro-primary-hover` / `-active` | **States** — fill under `:hover` / `:active` |
147
+
148
+ All four exist for every hue (`primary, success, danger, warning, info, teal, tan,
149
+ pink, lime, cyan, orange, brown, violet, gray, maroon, gold, navy, olive, silver`).
150
+ Every pair clears WCAG AA (4.5:1) in both themes — `npm run check:a11y` verifies it.
151
+
152
+ ```css
153
+ :root {
154
+ --retro-primary: #0000aa; /* fill */
155
+ --retro-primary-fg: #ffffff; /* text on that fill */
156
+ --retro-primary-text: #000080; /* that hue as text on a page background */
157
+ --retro-body-bg: #c0c0c0; /* page */
158
+ --retro-bg: #ffffff; /* raised surface */
159
+ --retro-text: #000000;
160
+ --retro-text-muted: #4b4b4b;
161
+ }
162
+
163
+ /* Dark mode */
164
+ [data-theme="dark"] {
165
+ --retro-body-bg: #181818;
166
+ --retro-primary: #4a90e2;
167
+ --retro-primary-fg: #000000; /* dark fills are light, so black sits on top */
168
+ --retro-primary-text: #4b91e2;
169
+ }
170
+ ```
171
+
172
+ Typography is tokenised the same way: `--retro-font`, `--retro-font-heading`,
173
+ `--retro-font-mono`, a `rem`-based `--retro-font-size-xs` … `-3xl` scale,
174
+ `--retro-line-height` and `--retro-font-weight-*`. Headings use the body stack by
175
+ default; for a modern heading font, set
176
+ `--retro-font-heading: 'Segoe UI', Tahoma, sans-serif;`.
177
+
178
+ > **Upgrading from 1.x?** See [MIGRATION.md](MIGRATION.md). No classes were
179
+ > renamed or removed, but 2.0 visibly restyles a few things to meet WCAG AA —
180
+ > each with a one-line override.
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
+
206
+ ## Accessibility
207
+
208
+ Every text/surface pair the framework produces clears WCAG AA (4.5:1) in both
209
+ themes. `npm run check:a11y` compiles the SCSS and asserts it, and fails the
210
+ build on a regression — it also catches any `var(--retro-*)` that resolves to
211
+ nothing.
212
+
213
+ Beyond colour:
214
+
215
+ - **Focus rings are `:focus-visible`.** Keyboard and assistive-tech users get a
216
+ ring; mouse clicks do not. Text inputs still show one on click, because
217
+ browsers treat their focus as visible.
218
+ - **Modals are keyboard-safe.** Opening one sets `role="dialog"`,
219
+ `aria-modal`, and names it from its header; focus moves inside and is trapped
220
+ there, the rest of the page is made `inert`, and closing returns focus to
221
+ whatever opened it.
222
+ - **Dropdowns are navigable.** `aria-haspopup` / `aria-expanded` on the toggle,
223
+ `role="menu"` / `menuitem` on the menu, and Arrow / Home / End / Escape /
224
+ Tab all behave. Escape returns focus to the toggle.
225
+ - **`prefers-reduced-motion` is honoured** — every animation and transition is
226
+ neutralised, with the looping text effects switched off outright.
227
+ - **`.retro-sr-only`** labels icon-only controls; `.retro-sr-only-focusable`
228
+ gives you a skip link.
229
+
230
+ ```html
231
+ <button class="retro-btn">💾<span class="retro-sr-only">Save</span></button>
232
+ ```
233
+
234
+ ## Browser Support
235
+
236
+ RetroCSS supports all modern browsers:
237
+
238
+ - Chrome/Edge (latest)
239
+ - Firefox (latest)
240
+ - Safari (latest)
241
+ - Opera (latest)
242
+
243
+ ## Development
244
+
245
+ Clone the repository:
246
+
247
+ ```bash
248
+ git clone https://github.com/phantompixeldev/retrocss.git
249
+ cd retrocss
250
+ npm install
251
+ ```
252
+
253
+ Build the project:
254
+
255
+ ```bash
256
+ npm run build
257
+ ```
258
+
259
+ Watch for changes:
260
+
261
+ ```bash
262
+ npm run watch
263
+ ```
264
+
265
+ ## License
266
+
267
+ MIT