beignet.css 0.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 +105 -0
- package/beignet.css +634 -0
- package/beignet.min.css +1 -0
- package/package.json +26 -0
package/README.md
ADDED
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
# beignet.css
|
|
2
|
+
|
|
3
|
+
**Default HTML, but calmer.**
|
|
4
|
+
|
|
5
|
+
beignet.css is a tiny, classless stylesheet inspired by Safari Reader Mode. It improves the readability of raw HTML without introducing a visual theme, components, or utility classes.
|
|
6
|
+
|
|
7
|
+
If removing it feels risky, it’s probably doing too much.
|
|
8
|
+
|
|
9
|
+
## Goals
|
|
10
|
+
|
|
11
|
+
- Make plain HTML feel good to read
|
|
12
|
+
- Preserve native browser behavior
|
|
13
|
+
- Favor typography, rhythm, and restraint over “design”
|
|
14
|
+
- Work without classes, build tools, or configuration
|
|
15
|
+
- Stay small enough to disappear
|
|
16
|
+
|
|
17
|
+
## Non-goals
|
|
18
|
+
|
|
19
|
+
beignet.css intentionally does **not** provide:
|
|
20
|
+
|
|
21
|
+
- Components (buttons, cards, alerts, etc.)
|
|
22
|
+
- Layout systems or grids
|
|
23
|
+
- Utility classes
|
|
24
|
+
- Color palettes or themes
|
|
25
|
+
- JavaScript
|
|
26
|
+
- Opinionated UI patterns
|
|
27
|
+
|
|
28
|
+
This is not a design system. It’s a baseline.
|
|
29
|
+
|
|
30
|
+
## Features
|
|
31
|
+
|
|
32
|
+
- Editorial typography tuned for long-form reading
|
|
33
|
+
- Comfortable line length and vertical rhythm
|
|
34
|
+
- Calm headings and blockquotes
|
|
35
|
+
- Minimal tables with horizontal scrolling on mobile
|
|
36
|
+
- Native-first form controls
|
|
37
|
+
- Subtle inline code and code blocks
|
|
38
|
+
- `<details>` / `<summary>` styling for docs
|
|
39
|
+
- Thoughtful defaults for:
|
|
40
|
+
- `abbr`, `mark`, `kbd`
|
|
41
|
+
- `time`, `address`, `cite`
|
|
42
|
+
- `sup` / `sub`
|
|
43
|
+
- Light and dark mode support
|
|
44
|
+
- Print-friendly output
|
|
45
|
+
|
|
46
|
+
## Browser support
|
|
47
|
+
|
|
48
|
+
Modern browsers only.
|
|
49
|
+
|
|
50
|
+
Tested in:
|
|
51
|
+
|
|
52
|
+
- Safari (desktop + iOS)
|
|
53
|
+
- Chrome
|
|
54
|
+
- Firefox
|
|
55
|
+
|
|
56
|
+
Uses modern CSS features like `color-mix()`, `:focus-visible`, and `:has()`.
|
|
57
|
+
|
|
58
|
+
## Usage
|
|
59
|
+
|
|
60
|
+
### CDN (no build step)
|
|
61
|
+
|
|
62
|
+
```html
|
|
63
|
+
<link
|
|
64
|
+
rel="stylesheet"
|
|
65
|
+
href="https://cdn.jsdelivr.net/npm/beignet.css@0.1.0/beignet.css"
|
|
66
|
+
/>
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
### npm
|
|
70
|
+
|
|
71
|
+
```bash
|
|
72
|
+
npm install beignet.css
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
```css
|
|
76
|
+
@import "beignet.css";
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
## Dark mode
|
|
80
|
+
|
|
81
|
+
beignet.css supports light and dark mode automatically via system preferences.
|
|
82
|
+
|
|
83
|
+
You can also force a theme manually:
|
|
84
|
+
|
|
85
|
+
```html
|
|
86
|
+
<html data-theme="light"></html>
|
|
87
|
+
<html data-theme="dark"></html>
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
This is useful for demos or theme toggles.
|
|
91
|
+
|
|
92
|
+
## Philosophy
|
|
93
|
+
|
|
94
|
+
beignet.css exists for content.
|
|
95
|
+
|
|
96
|
+
It’s designed for:
|
|
97
|
+
|
|
98
|
+
- articles
|
|
99
|
+
- documentation
|
|
100
|
+
- essays
|
|
101
|
+
- changelogs
|
|
102
|
+
- static sites
|
|
103
|
+
- internal tools where readability matters
|
|
104
|
+
|
|
105
|
+
If you notice the styling, it’s probably too much.
|
package/beignet.css
ADDED
|
@@ -0,0 +1,634 @@
|
|
|
1
|
+
/* beignet.css — Default HTML, but calmer.
|
|
2
|
+
Inspired by Safari Reader Mode.
|
|
3
|
+
Modern browsers only. Classless. Minimal. */
|
|
4
|
+
|
|
5
|
+
/* Minimal remedy reset (keep defaults, fix sharp edges) */
|
|
6
|
+
*,
|
|
7
|
+
*::before,
|
|
8
|
+
*::after {
|
|
9
|
+
box-sizing: border-box;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
html,
|
|
13
|
+
body {
|
|
14
|
+
margin: 0;
|
|
15
|
+
padding: 0;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
img,
|
|
19
|
+
video,
|
|
20
|
+
canvas,
|
|
21
|
+
svg {
|
|
22
|
+
display: block;
|
|
23
|
+
max-width: 100%;
|
|
24
|
+
height: auto;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
/* Avoid long words/URLs blowing up the measure (BUT not tables—tables should scroll) */
|
|
28
|
+
p,
|
|
29
|
+
li,
|
|
30
|
+
blockquote,
|
|
31
|
+
pre {
|
|
32
|
+
overflow-wrap: anywhere;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
/* Make sure form controls inherit fonts consistently */
|
|
36
|
+
button,
|
|
37
|
+
input,
|
|
38
|
+
select,
|
|
39
|
+
textarea {
|
|
40
|
+
font: inherit;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
/* Remove Safari/Chrome default inner focus padding quirks on buttons */
|
|
44
|
+
button,
|
|
45
|
+
input[type="button"],
|
|
46
|
+
input[type="submit"],
|
|
47
|
+
input[type="reset"] {
|
|
48
|
+
border: 1px solid var(--line);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
:root {
|
|
52
|
+
color-scheme: light dark;
|
|
53
|
+
|
|
54
|
+
/* Typography */
|
|
55
|
+
--serif: ui-serif, "New York", "New York Text", "Iowan Old Style", "Palatino",
|
|
56
|
+
"Georgia", serif;
|
|
57
|
+
--sans: ui-sans-serif, system-ui, -apple-system, "SF Pro Text",
|
|
58
|
+
"Helvetica Neue", Arial, sans-serif;
|
|
59
|
+
--mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
60
|
+
|
|
61
|
+
/* Core tokens */
|
|
62
|
+
--bg: Canvas;
|
|
63
|
+
--fg: CanvasText;
|
|
64
|
+
|
|
65
|
+
/* Link color: classic HTML default */
|
|
66
|
+
--link: #0000ff;
|
|
67
|
+
|
|
68
|
+
/* Very subtle */
|
|
69
|
+
--muted: color-mix(in oklab, var(--fg) 62%, transparent);
|
|
70
|
+
--line: color-mix(in oklab, var(--fg) 8%, transparent);
|
|
71
|
+
--soft: color-mix(in oklab, var(--fg) 5%, transparent);
|
|
72
|
+
--stripe: color-mix(in oklab, var(--fg) 3%, transparent);
|
|
73
|
+
|
|
74
|
+
/* Layout */
|
|
75
|
+
--measure: 68ch;
|
|
76
|
+
--pad: clamp(18px, 4vw, 56px);
|
|
77
|
+
|
|
78
|
+
/* Shape */
|
|
79
|
+
--radius: 10px;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
@media (prefers-color-scheme: dark) {
|
|
83
|
+
:root {
|
|
84
|
+
--link: #0a84ff;
|
|
85
|
+
/* more visible, still subtle */
|
|
86
|
+
--muted: color-mix(in oklab, var(--fg) 72%, transparent);
|
|
87
|
+
--line: color-mix(in oklab, var(--fg) 16%, transparent);
|
|
88
|
+
--soft: color-mix(in oklab, var(--fg) 10%, transparent);
|
|
89
|
+
--stripe: color-mix(in oklab, var(--fg) 7%, transparent);
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
html[data-theme="light"] {
|
|
94
|
+
--link: #0000ff;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
html[data-theme="dark"] {
|
|
98
|
+
--link: #0a84ff;
|
|
99
|
+
--muted: color-mix(in oklab, var(--fg) 72%, transparent);
|
|
100
|
+
--line: color-mix(in oklab, var(--fg) 16%, transparent);
|
|
101
|
+
--soft: color-mix(in oklab, var(--fg) 10%, transparent);
|
|
102
|
+
--stripe: color-mix(in oklab, var(--fg) 7%, transparent);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
html {
|
|
106
|
+
-webkit-text-size-adjust: 100%;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
html[data-theme="light"] { color-scheme: light; }
|
|
110
|
+
html[data-theme="dark"] { color-scheme: dark; }
|
|
111
|
+
|
|
112
|
+
body {
|
|
113
|
+
background: var(--bg);
|
|
114
|
+
color: var(--fg);
|
|
115
|
+
|
|
116
|
+
font-family: var(--serif);
|
|
117
|
+
font-size: 18.5px;
|
|
118
|
+
line-height: 1.7;
|
|
119
|
+
font-weight: 400;
|
|
120
|
+
|
|
121
|
+
text-rendering: optimizeLegibility;
|
|
122
|
+
-webkit-font-smoothing: antialiased;
|
|
123
|
+
font-feature-settings: "kern", "liga", "clig", "calt";
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
html,
|
|
127
|
+
body {
|
|
128
|
+
overflow-x: hidden; /* fallback */
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
@supports (overflow-x: clip) {
|
|
132
|
+
html,
|
|
133
|
+
body {
|
|
134
|
+
overflow-x: clip; /* preferred */
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
/* Constrain reading width (prefer semantic wrappers if present) */
|
|
139
|
+
main,
|
|
140
|
+
article,
|
|
141
|
+
body > *:first-child {
|
|
142
|
+
max-width: var(--measure);
|
|
143
|
+
margin-inline: auto;
|
|
144
|
+
padding: var(--pad);
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
/* Contain any stray overflow inside the reader column (iOS Safari quirk) */
|
|
148
|
+
main,
|
|
149
|
+
article,
|
|
150
|
+
body > *:first-child {
|
|
151
|
+
overflow-x: hidden; /* fallback */
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
@supports (overflow-x: clip) {
|
|
155
|
+
main,
|
|
156
|
+
article,
|
|
157
|
+
body > *:first-child {
|
|
158
|
+
overflow-x: clip; /* preferred */
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
/* Rhythm */
|
|
163
|
+
p {
|
|
164
|
+
margin: 0 0 1.2em 0;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
ul,
|
|
168
|
+
ol,
|
|
169
|
+
dl,
|
|
170
|
+
blockquote,
|
|
171
|
+
pre,
|
|
172
|
+
table,
|
|
173
|
+
figure {
|
|
174
|
+
margin: 0 0 1.05em 0;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
li {
|
|
178
|
+
margin: 0.25em 0;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
/* Headings: understated, editorial */
|
|
182
|
+
h1,
|
|
183
|
+
h2,
|
|
184
|
+
h3,
|
|
185
|
+
h4,
|
|
186
|
+
h5,
|
|
187
|
+
h6 {
|
|
188
|
+
margin: 1.9em 0 0.65em 0;
|
|
189
|
+
line-height: 1.18;
|
|
190
|
+
font-family: var(--sans);
|
|
191
|
+
font-weight: 600;
|
|
192
|
+
letter-spacing: -0.01em;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
h1 {
|
|
196
|
+
font-size: 2.05em;
|
|
197
|
+
margin-top: 2.2em;
|
|
198
|
+
}
|
|
199
|
+
h2 {
|
|
200
|
+
font-size: 1.55em;
|
|
201
|
+
margin-top: 2em;
|
|
202
|
+
}
|
|
203
|
+
h3 {
|
|
204
|
+
font-size: 1.25em;
|
|
205
|
+
margin-top: 1.8em;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
small,
|
|
209
|
+
figcaption {
|
|
210
|
+
color: var(--muted);
|
|
211
|
+
font-family: var(--sans);
|
|
212
|
+
font-size: 0.92em;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
hr {
|
|
216
|
+
border: 0;
|
|
217
|
+
border-top: 1px solid var(--line);
|
|
218
|
+
margin: 2.2em 0;
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
/* Links: classic blue + understated */
|
|
222
|
+
a {
|
|
223
|
+
color: var(--link);
|
|
224
|
+
text-decoration: underline;
|
|
225
|
+
text-decoration-thickness: from-font;
|
|
226
|
+
text-underline-offset: 0.15em;
|
|
227
|
+
}
|
|
228
|
+
a:focus-visible {
|
|
229
|
+
outline-offset: 3px;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
/* Quotes: hairline + muted */
|
|
233
|
+
blockquote {
|
|
234
|
+
margin-left: 0;
|
|
235
|
+
padding-left: 1.1em;
|
|
236
|
+
border-left: 2px solid var(--line);
|
|
237
|
+
color: var(--muted);
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
/* Inline elements */
|
|
241
|
+
strong {
|
|
242
|
+
font-weight: 650;
|
|
243
|
+
}
|
|
244
|
+
em {
|
|
245
|
+
font-style: italic;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
abbr[title] {
|
|
249
|
+
text-decoration: underline dotted;
|
|
250
|
+
text-underline-offset: 0.15em;
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
mark {
|
|
254
|
+
color: inherit;
|
|
255
|
+
background: color-mix(in oklab, var(--fg) 10%, transparent);
|
|
256
|
+
padding: 0.06em 0.18em;
|
|
257
|
+
border-radius: 0.25em;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
@media (prefers-color-scheme: dark) {
|
|
261
|
+
mark {
|
|
262
|
+
background: color-mix(in oklab, var(--fg) 18%, transparent);
|
|
263
|
+
}
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
html[data-theme="dark"] mark {
|
|
267
|
+
background: color-mix(in oklab, var(--fg) 18%, transparent);
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
/* Common semantic elements (editorial-safe additions) */
|
|
271
|
+
|
|
272
|
+
/* Dates & metadata */
|
|
273
|
+
time {
|
|
274
|
+
color: var(--muted);
|
|
275
|
+
font-family: var(--sans);
|
|
276
|
+
white-space: nowrap;
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
/* Addresses often appear in footers or legal text */
|
|
280
|
+
address {
|
|
281
|
+
font-style: normal;
|
|
282
|
+
color: var(--muted);
|
|
283
|
+
font-family: var(--sans);
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
/* Citations inside blockquotes or captions */
|
|
287
|
+
cite {
|
|
288
|
+
font-style: normal;
|
|
289
|
+
color: var(--muted);
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
/* Keyboard input (docs, tutorials) */
|
|
293
|
+
kbd {
|
|
294
|
+
display: inline-block;
|
|
295
|
+
padding: 0.1em 0.35em;
|
|
296
|
+
border: 1px solid var(--line);
|
|
297
|
+
border-radius: 6px;
|
|
298
|
+
font-family: var(--mono);
|
|
299
|
+
font-size: 0.9em;
|
|
300
|
+
line-height: 1.2;
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
/* Superscripts / subscripts (footnotes, references) */
|
|
304
|
+
sup,
|
|
305
|
+
sub {
|
|
306
|
+
font-size: 0.75em;
|
|
307
|
+
line-height: 0;
|
|
308
|
+
position: relative;
|
|
309
|
+
vertical-align: baseline;
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
sup { top: -0.4em; }
|
|
313
|
+
sub { bottom: -0.2em; }
|
|
314
|
+
|
|
315
|
+
/* Article footers (tags, attribution, metadata) */
|
|
316
|
+
article > footer {
|
|
317
|
+
margin-top: 2.2em;
|
|
318
|
+
padding-top: 1.1em;
|
|
319
|
+
border-top: 1px solid var(--line);
|
|
320
|
+
color: var(--muted);
|
|
321
|
+
font-family: var(--sans);
|
|
322
|
+
font-size: 0.9em;
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
/* Code: almost invisible */
|
|
326
|
+
code,
|
|
327
|
+
kbd,
|
|
328
|
+
samp {
|
|
329
|
+
font-family: var(--mono);
|
|
330
|
+
font-size: 0.95em;
|
|
331
|
+
}
|
|
332
|
+
|
|
333
|
+
:not(pre) > code {
|
|
334
|
+
padding: 0.12em 0.32em;
|
|
335
|
+
border: 1px solid var(--line);
|
|
336
|
+
border-radius: 7px;
|
|
337
|
+
background: transparent;
|
|
338
|
+
}
|
|
339
|
+
|
|
340
|
+
@media (prefers-color-scheme: dark) {
|
|
341
|
+
/* inline code border/background can disappear otherwise */
|
|
342
|
+
:not(pre) > code {
|
|
343
|
+
background: color-mix(in oklab, var(--fg) 6%, transparent);
|
|
344
|
+
}
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
pre {
|
|
348
|
+
font-family: var(--mono);
|
|
349
|
+
font-size: 0.92em;
|
|
350
|
+
padding: 0.95em 1em;
|
|
351
|
+
border: 1px solid var(--line);
|
|
352
|
+
border-radius: var(--radius);
|
|
353
|
+
overflow: auto;
|
|
354
|
+
background: transparent;
|
|
355
|
+
}
|
|
356
|
+
|
|
357
|
+
table {
|
|
358
|
+
width: 100%;
|
|
359
|
+
margin: 1.2em 0 1.6em;
|
|
360
|
+
|
|
361
|
+
display: block;
|
|
362
|
+
max-width: 100%;
|
|
363
|
+
overflow-x: auto;
|
|
364
|
+
-webkit-overflow-scrolling: touch;
|
|
365
|
+
|
|
366
|
+
/* iOS leak fix */
|
|
367
|
+
border-collapse: separate;
|
|
368
|
+
border-spacing: 0;
|
|
369
|
+
|
|
370
|
+
border-top: 1px solid var(--line);
|
|
371
|
+
border-bottom: 1px solid var(--line);
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
/* Force overflow instead of wrapping */
|
|
375
|
+
th,
|
|
376
|
+
td {
|
|
377
|
+
text-align: left;
|
|
378
|
+
padding: 0.65em 0.75em;
|
|
379
|
+
border: 0;
|
|
380
|
+
border-bottom: 1px solid var(--line);
|
|
381
|
+
vertical-align: top;
|
|
382
|
+
|
|
383
|
+
white-space: nowrap; /* KEY */
|
|
384
|
+
overflow-wrap: normal;
|
|
385
|
+
word-break: normal;
|
|
386
|
+
}
|
|
387
|
+
|
|
388
|
+
th {
|
|
389
|
+
font-family: var(--sans);
|
|
390
|
+
font-weight: 600;
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
tbody tr:nth-child(even) {
|
|
394
|
+
background: var(--stripe);
|
|
395
|
+
}
|
|
396
|
+
|
|
397
|
+
/* Media */
|
|
398
|
+
img,
|
|
399
|
+
video {
|
|
400
|
+
border-radius: 8px;
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
figure {
|
|
404
|
+
margin: 0 0 1.3em 0;
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
figcaption {
|
|
408
|
+
margin-top: 0.55em;
|
|
409
|
+
}
|
|
410
|
+
|
|
411
|
+
/* Forms: native-first, transparent, calm */
|
|
412
|
+
form {
|
|
413
|
+
margin: 0 0 1.6em 0;
|
|
414
|
+
}
|
|
415
|
+
|
|
416
|
+
/* Helps common “label + input” structures without requiring classes */
|
|
417
|
+
form > * + * {
|
|
418
|
+
margin-top: 1em;
|
|
419
|
+
}
|
|
420
|
+
|
|
421
|
+
label {
|
|
422
|
+
display: inline-block;
|
|
423
|
+
margin: 0 0 0.35em 0;
|
|
424
|
+
font-family: var(--sans);
|
|
425
|
+
font-size: 0.92em;
|
|
426
|
+
color: var(--muted);
|
|
427
|
+
}
|
|
428
|
+
|
|
429
|
+
input,
|
|
430
|
+
textarea,
|
|
431
|
+
select,
|
|
432
|
+
button {
|
|
433
|
+
color: inherit;
|
|
434
|
+
}
|
|
435
|
+
|
|
436
|
+
/* Avoid double focus styling on some browsers; rely on :focus-visible */
|
|
437
|
+
:where(button, input, textarea, select):focus {
|
|
438
|
+
outline: none;
|
|
439
|
+
}
|
|
440
|
+
|
|
441
|
+
input,
|
|
442
|
+
textarea,
|
|
443
|
+
select {
|
|
444
|
+
accent-color: var(--link);
|
|
445
|
+
}
|
|
446
|
+
|
|
447
|
+
:where(
|
|
448
|
+
input:not([type]),
|
|
449
|
+
input[type="text"],
|
|
450
|
+
input[type="email"],
|
|
451
|
+
input[type="password"],
|
|
452
|
+
input[type="search"],
|
|
453
|
+
input[type="url"],
|
|
454
|
+
input[type="tel"],
|
|
455
|
+
input[type="number"],
|
|
456
|
+
input[type="date"],
|
|
457
|
+
input[type="datetime-local"],
|
|
458
|
+
input[type="time"],
|
|
459
|
+
input[type="month"],
|
|
460
|
+
input[type="week"],
|
|
461
|
+
textarea,
|
|
462
|
+
select
|
|
463
|
+
) {
|
|
464
|
+
width: 100%;
|
|
465
|
+
padding: 0.62em 0.72em;
|
|
466
|
+
font-family: var(--sans);
|
|
467
|
+
font-size: 0.98em;
|
|
468
|
+
|
|
469
|
+
border: 1px solid var(--line);
|
|
470
|
+
border-radius: var(--radius);
|
|
471
|
+
background: transparent;
|
|
472
|
+
|
|
473
|
+
transition: border-color 140ms ease, box-shadow 140ms ease;
|
|
474
|
+
}
|
|
475
|
+
|
|
476
|
+
textarea {
|
|
477
|
+
min-height: 7em;
|
|
478
|
+
resize: vertical;
|
|
479
|
+
}
|
|
480
|
+
|
|
481
|
+
:where(input, textarea, select)::placeholder {
|
|
482
|
+
color: color-mix(in oklab, var(--fg) 38%, transparent);
|
|
483
|
+
}
|
|
484
|
+
|
|
485
|
+
/* Check/radio: keep native, just align */
|
|
486
|
+
input[type="checkbox"],
|
|
487
|
+
input[type="radio"] {
|
|
488
|
+
width: 1.05em;
|
|
489
|
+
height: 1.05em;
|
|
490
|
+
vertical-align: middle;
|
|
491
|
+
margin: 0 0.55em 0 0;
|
|
492
|
+
}
|
|
493
|
+
|
|
494
|
+
/* If label wraps control: make it look intentional */
|
|
495
|
+
label:has(> input[type="checkbox"]),
|
|
496
|
+
label:has(> input[type="radio"]) {
|
|
497
|
+
display: inline-flex;
|
|
498
|
+
align-items: center;
|
|
499
|
+
gap: 0.55em;
|
|
500
|
+
margin: 0.25em 0;
|
|
501
|
+
color: var(--fg);
|
|
502
|
+
font-size: 1em;
|
|
503
|
+
}
|
|
504
|
+
label:has(> input[type="checkbox"]) > input,
|
|
505
|
+
label:has(> input[type="radio"]) > input {
|
|
506
|
+
margin: 0;
|
|
507
|
+
}
|
|
508
|
+
|
|
509
|
+
/* Focus: quiet ring */
|
|
510
|
+
:focus-visible {
|
|
511
|
+
outline: 2px solid color-mix(in oklab, var(--link) 55%, transparent);
|
|
512
|
+
outline-offset: 2px;
|
|
513
|
+
}
|
|
514
|
+
|
|
515
|
+
:where(input, textarea, select):focus {
|
|
516
|
+
border-color: color-mix(in oklab, var(--fg) 22%, var(--link));
|
|
517
|
+
}
|
|
518
|
+
|
|
519
|
+
/* Buttons: text-forward, barely-there hover */
|
|
520
|
+
button,
|
|
521
|
+
input[type="button"],
|
|
522
|
+
input[type="submit"],
|
|
523
|
+
input[type="reset"] {
|
|
524
|
+
appearance: none;
|
|
525
|
+
-webkit-appearance: none;
|
|
526
|
+
|
|
527
|
+
font-family: var(--sans);
|
|
528
|
+
font-size: 0.98em;
|
|
529
|
+
padding: 0.58em 0.95em;
|
|
530
|
+
|
|
531
|
+
border-radius: 999px;
|
|
532
|
+
border: 1px solid var(--line);
|
|
533
|
+
background: transparent;
|
|
534
|
+
|
|
535
|
+
cursor: pointer;
|
|
536
|
+
transition: background-color 140ms ease, border-color 140ms ease;
|
|
537
|
+
}
|
|
538
|
+
|
|
539
|
+
button:hover,
|
|
540
|
+
input[type="button"]:hover,
|
|
541
|
+
input[type="submit"]:hover,
|
|
542
|
+
input[type="reset"]:hover {
|
|
543
|
+
background: var(--soft);
|
|
544
|
+
border-color: color-mix(in oklab, var(--fg) 18%, transparent);
|
|
545
|
+
}
|
|
546
|
+
|
|
547
|
+
button:active,
|
|
548
|
+
input[type="button"]:active,
|
|
549
|
+
input[type="submit"]:active,
|
|
550
|
+
input[type="reset"]:active {
|
|
551
|
+
background: color-mix(in oklab, var(--fg) 8%, transparent);
|
|
552
|
+
}
|
|
553
|
+
|
|
554
|
+
/* Disabled + validation */
|
|
555
|
+
:disabled,
|
|
556
|
+
[aria-disabled="true"] {
|
|
557
|
+
opacity: 0.55;
|
|
558
|
+
cursor: not-allowed;
|
|
559
|
+
}
|
|
560
|
+
|
|
561
|
+
:where(input, textarea, select)[aria-invalid="true"],
|
|
562
|
+
:where(input, textarea, select):invalid {
|
|
563
|
+
border-color: color-mix(in oklab, var(--fg) 18%, red);
|
|
564
|
+
}
|
|
565
|
+
|
|
566
|
+
/* Fieldsets: keep minimal (no layout assumptions) */
|
|
567
|
+
fieldset {
|
|
568
|
+
border-radius: var(--radius);
|
|
569
|
+
border: 1px solid var(--line);
|
|
570
|
+
padding: 1em 1.1em;
|
|
571
|
+
margin: 0;
|
|
572
|
+
min-width: 0;
|
|
573
|
+
}
|
|
574
|
+
|
|
575
|
+
legend {
|
|
576
|
+
padding: 0 0.4em;
|
|
577
|
+
max-width: 100%;
|
|
578
|
+
}
|
|
579
|
+
|
|
580
|
+
/* Details/Summary: minimal, useful for docs */
|
|
581
|
+
summary {
|
|
582
|
+
cursor: pointer;
|
|
583
|
+
font-family: var(--sans);
|
|
584
|
+
}
|
|
585
|
+
|
|
586
|
+
details {
|
|
587
|
+
border: 1px solid var(--line);
|
|
588
|
+
border-radius: var(--radius);
|
|
589
|
+
padding: 0.6em 0.8em;
|
|
590
|
+
}
|
|
591
|
+
|
|
592
|
+
details[open] {
|
|
593
|
+
padding-bottom: 0.8em;
|
|
594
|
+
}
|
|
595
|
+
|
|
596
|
+
details > *:not(summary) {
|
|
597
|
+
margin-top: 0.6em;
|
|
598
|
+
}
|
|
599
|
+
|
|
600
|
+
/* Small screens: keep the reader feel without excessive padding */
|
|
601
|
+
@media (max-width: 520px) {
|
|
602
|
+
body {
|
|
603
|
+
font-size: 18px;
|
|
604
|
+
}
|
|
605
|
+
|
|
606
|
+
:root {
|
|
607
|
+
--pad: 18px;
|
|
608
|
+
}
|
|
609
|
+
}
|
|
610
|
+
|
|
611
|
+
/* Print: lean and editorial */
|
|
612
|
+
@media print {
|
|
613
|
+
main,
|
|
614
|
+
article,
|
|
615
|
+
body > *:first-child {
|
|
616
|
+
max-width: none;
|
|
617
|
+
padding: 0;
|
|
618
|
+
}
|
|
619
|
+
|
|
620
|
+
a {
|
|
621
|
+
color: #0000ff;
|
|
622
|
+
text-decoration: underline;
|
|
623
|
+
}
|
|
624
|
+
|
|
625
|
+
table {
|
|
626
|
+
display: table;
|
|
627
|
+
overflow: visible;
|
|
628
|
+
}
|
|
629
|
+
|
|
630
|
+
th,
|
|
631
|
+
td {
|
|
632
|
+
white-space: normal;
|
|
633
|
+
}
|
|
634
|
+
}
|
package/beignet.min.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
*,:before,:after{box-sizing:border-box}html,body{margin:0;padding:0}img,video,canvas,svg{max-width:100%;height:auto;display:block}p,li,blockquote,pre{overflow-wrap:anywhere}button,input,select,textarea{font:inherit}button,input[type=button],input[type=submit],input[type=reset]{border:1px solid var(--line)}:root{color-scheme:light dark;--serif:ui-serif,"New York","New York Text","Iowan Old Style","Palatino","Georgia",serif;--sans:ui-sans-serif,system-ui,-apple-system,"SF Pro Text","Helvetica Neue",Arial,sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--bg:Canvas;--fg:CanvasText;--link:#00f;--muted:color-mix(in oklab,var(--fg)62%,transparent);--line:color-mix(in oklab,var(--fg)8%,transparent);--soft:color-mix(in oklab,var(--fg)5%,transparent);--stripe:color-mix(in oklab,var(--fg)3%,transparent);--measure:68ch;--pad:clamp(18px,4vw,56px);--radius:10px}@media (prefers-color-scheme:dark){:root{--link:#0a84ff;--muted:color-mix(in oklab,var(--fg)72%,transparent);--line:color-mix(in oklab,var(--fg)16%,transparent);--soft:color-mix(in oklab,var(--fg)10%,transparent);--stripe:color-mix(in oklab,var(--fg)7%,transparent)}}html[data-theme=light]{--link:#00f}html[data-theme=dark]{--link:#0a84ff;--muted:color-mix(in oklab,var(--fg)72%,transparent);--line:color-mix(in oklab,var(--fg)16%,transparent);--soft:color-mix(in oklab,var(--fg)10%,transparent);--stripe:color-mix(in oklab,var(--fg)7%,transparent)}html{-webkit-text-size-adjust:100%}html[data-theme=light]{color-scheme:light}html[data-theme=dark]{color-scheme:dark}body{background:var(--bg);color:var(--fg);font-family:var(--serif);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;font-feature-settings:"kern","liga","clig","calt";font-size:18.5px;font-weight:400;line-height:1.7}html,body{overflow-x:hidden}@supports (overflow-x:clip){html,body{overflow-x:clip}}main,article,body>:first-child{max-width:var(--measure);padding:var(--pad);margin-inline:auto;overflow-x:hidden}@supports (overflow-x:clip){main,article,body>:first-child{overflow-x:clip}}p{margin:0 0 1.2em}ul,ol,dl,blockquote,pre,table,figure{margin:0 0 1.05em}li{margin:.25em 0}h1,h2,h3,h4,h5,h6{line-height:1.18;font-family:var(--sans);letter-spacing:-.01em;margin:1.9em 0 .65em;font-weight:600}h1{margin-top:2.2em;font-size:2.05em}h2{margin-top:2em;font-size:1.55em}h3{margin-top:1.8em;font-size:1.25em}small,figcaption{color:var(--muted);font-family:var(--sans);font-size:.92em}hr{border:0;border-top:1px solid var(--line);margin:2.2em 0}a{color:var(--link);text-underline-offset:.15em;text-decoration:underline from-font}a:focus-visible{outline-offset:3px}blockquote{border-left:2px solid var(--line);color:var(--muted);margin-left:0;padding-left:1.1em}strong{font-weight:650}em{font-style:italic}abbr[title]{text-underline-offset:.15em;text-decoration:underline dotted}mark{color:inherit;background:color-mix(in oklab,var(--fg)10%,transparent);border-radius:.25em;padding:.06em .18em}@media (prefers-color-scheme:dark){mark{background:color-mix(in oklab,var(--fg)18%,transparent)}}html[data-theme=dark] mark{background:color-mix(in oklab,var(--fg)18%,transparent)}time{color:var(--muted);font-family:var(--sans);white-space:nowrap}address{color:var(--muted);font-style:normal;font-family:var(--sans)}cite{color:var(--muted);font-style:normal}kbd{border:1px solid var(--line);font-family:var(--mono);border-radius:6px;padding:.1em .35em;font-size:.9em;line-height:1.2;display:inline-block}sup,sub{vertical-align:baseline;font-size:.75em;line-height:0;position:relative}sup{top:-.4em}sub{bottom:-.2em}article>footer{border-top:1px solid var(--line);color:var(--muted);font-family:var(--sans);margin-top:2.2em;padding-top:1.1em;font-size:.9em}code,kbd,samp{font-family:var(--mono);font-size:.95em}:not(pre)>code{border:1px solid var(--line);background:0 0;border-radius:7px;padding:.12em .32em}@media (prefers-color-scheme:dark){:not(pre)>code{background:color-mix(in oklab,var(--fg)6%,transparent)}}pre{font-family:var(--mono);border:1px solid var(--line);border-radius:var(--radius);background:0 0;padding:.95em 1em;font-size:.92em;overflow:auto}table{-webkit-overflow-scrolling:touch;border-collapse:separate;border-spacing:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);width:100%;max-width:100%;margin:1.2em 0 1.6em;display:block;overflow-x:auto}th,td{text-align:left;border:0;border-bottom:1px solid var(--line);vertical-align:top;white-space:nowrap;overflow-wrap:normal;word-break:normal;padding:.65em .75em}th{font-family:var(--sans);font-weight:600}tbody tr:nth-child(2n){background:var(--stripe)}img,video{border-radius:8px}figure{margin:0 0 1.3em}figcaption{margin-top:.55em}form{margin:0 0 1.6em}form>*+*{margin-top:1em}label{font-family:var(--sans);color:var(--muted);margin:0 0 .35em;font-size:.92em;display:inline-block}input,textarea,select,button{color:inherit}:where(button,input,textarea,select):focus{outline:none}input,textarea,select{accent-color:var(--link)}:where(input:not([type]),input[type=text],input[type=email],input[type=password],input[type=search],input[type=url],input[type=tel],input[type=number],input[type=date],input[type=datetime-local],input[type=time],input[type=month],input[type=week],textarea,select){width:100%;font-family:var(--sans);border:1px solid var(--line);border-radius:var(--radius);background:0 0;padding:.62em .72em;font-size:.98em;transition:border-color .14s,box-shadow .14s}textarea{resize:vertical;min-height:7em}:where(input,textarea,select)::placeholder{color:color-mix(in oklab,var(--fg)38%,transparent)}input[type=checkbox],input[type=radio]{vertical-align:middle;width:1.05em;height:1.05em;margin:0 .55em 0 0}label:has(>input[type=checkbox]),label:has(>input[type=radio]){color:var(--fg);align-items:center;gap:.55em;margin:.25em 0;font-size:1em;display:inline-flex}label:has(>input[type=checkbox])>input,label:has(>input[type=radio])>input{margin:0}:focus-visible{outline:2px solid color-mix(in oklab,var(--link)55%,transparent);outline-offset:2px}:where(input,textarea,select):focus{border-color:color-mix(in oklab,var(--fg)22%,var(--link))}button,input[type=button],input[type=submit],input[type=reset]{-webkit-appearance:none;appearance:none;font-family:var(--sans);border:1px solid var(--line);cursor:pointer;background:0 0;border-radius:999px;padding:.58em .95em;font-size:.98em;transition:background-color .14s,border-color .14s}button:hover,input[type=button]:hover,input[type=submit]:hover,input[type=reset]:hover{background:var(--soft);border-color:color-mix(in oklab,var(--fg)18%,transparent)}button:active,input[type=button]:active,input[type=submit]:active,input[type=reset]:active{background:color-mix(in oklab,var(--fg)8%,transparent)}:disabled,[aria-disabled=true]{opacity:.55;cursor:not-allowed}:where(input,textarea,select)[aria-invalid=true],:where(input,textarea,select):invalid{border-color:color-mix(in oklab,var(--fg)18%,red)}fieldset{border-radius:var(--radius);border:1px solid var(--line);min-width:0;margin:0;padding:1em 1.1em}legend{max-width:100%;padding:0 .4em}summary{cursor:pointer;font-family:var(--sans)}details{border:1px solid var(--line);border-radius:var(--radius);padding:.6em .8em}details[open]{padding-bottom:.8em}details>:not(summary){margin-top:.6em}@media (width<=520px){body{font-size:18px}:root{--pad:18px}}@media print{main,article,body>:first-child{max-width:none;padding:0}a{color:#00f;text-decoration:underline}table{display:table;overflow:visible}th,td{white-space:normal}}
|
package/package.json
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "beignet.css",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Default HTML, but calmer. A classless reader-style stylesheet.",
|
|
5
|
+
"files": [
|
|
6
|
+
"beignet.css",
|
|
7
|
+
"beignet.min.css"
|
|
8
|
+
],
|
|
9
|
+
"style": "beignet.css",
|
|
10
|
+
"main": "beignet.css",
|
|
11
|
+
"repository": {
|
|
12
|
+
"type": "git",
|
|
13
|
+
"url": "git+https://github.com/taylorbryant/beignet.css.git"
|
|
14
|
+
},
|
|
15
|
+
"author": {
|
|
16
|
+
"name": "Taylor Bryant",
|
|
17
|
+
"email": "taylor@bryant.io",
|
|
18
|
+
"url": "https://bryant.io"
|
|
19
|
+
},
|
|
20
|
+
"scripts": {
|
|
21
|
+
"build": "lightningcss beignet.css --minify --output-file beignet.min.css"
|
|
22
|
+
},
|
|
23
|
+
"devDependencies": {
|
|
24
|
+
"lightningcss-cli": "^1.30.2"
|
|
25
|
+
}
|
|
26
|
+
}
|