1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
/*!
* future-css -- https://github.com/estith/future-css
* A styling system for multi-language, multi-platform systems
*
* Regenerate with: npm run build
* This file is generated; edit the sources in src/ instead.
*/
/*!
* future-css -- reset layer
*
* Opinionated but narrow. It removes browser defaults that are actively harmful
* in a multi-language, multi-platform system, and leaves alone everything that
* users may have configured deliberately.
*
* Everything here is wrapped in :where() so it contributes ZERO specificity.
* That means a single class selector in any later layer always wins, no matter
* how the source is ordered. This is what makes the reset safe to ship
* unconditionally.
*/
@ }
/*
* Margin removal. Default margins are physical and asymmetric in ways that do
* not survive translation, and they are the single largest source of
* "why is there a gap here" bugs. Vertical rhythm comes from --fc-space-*
* tokens applied deliberately, or from the flow classes in the layout layer.
*/
) }
/*
* Unset lists. `list-style: none` strips the marker, which is a real
* accessibility regression for anyone who relies on a list to convey
* structure, so we only remove it when the author has opted in via a class.
*/
) }
/*
* Media defaults. `display: block` fixes the legacy inline-image baseline gap,
* and max-inline-size prevents a full-bleed image from forcing horizontal
* scroll on narrow viewports.
*/
) }
/*
* Form elements. Controls do not inherit typography by default, which makes
* a text input visibly smaller than surrounding text -- a frequent and
* avoidable accessibility complaint.
*/
) }
/*
* Buttons do not inherit text alignment or cursor, and Safari renders a
* button's letter-spacing differently from body copy.
*/
) }
/*
* Explicit opt-out of the pointer cursor for controls where a pointer cursor
* misrepresents the interaction (e.g. a disabled control, or a button that is
* a link in disguise).
*/
)) }
/*
* Remove the default fieldset/popover affordances while keeping the grouping
* semantics that assistive technology depends on.
*/
) }
) }
/*
* Autofill styling. Chrome/Safari inject their own background and a yellow
* text, which breaks dark mode and the surface tokens. `-internal-autofill-*`
* are vendor pseudo-elements and must be prefixed individually -- there is no
* groupable `::-webkit-autofill` alias that works in all engines.
*/
) }
))) }
/*
* Tabular data. Numbers in tables must align on the decimal, in both
* LTR and RTL (where the digit run itself mirrors).
*/
) }
/*
* Respect the user's language-specific line breaking. CJK text has no spaces,
* and long URLs and German compounds need to be allowed to break rather than
* overflowing their container.
*/
) }
/*
* Reduced motion. Components are expected to consult this block; it is
* declared here so the media query is guaranteed to exist in the bundle even
* before any animated component ships.
*/
/*
* Spinners are excluded by name, and that is the only way to do it: an
* !important declaration in an earlier layer beats every declaration in a
* later one, important or not, so no component rule can loosen this block
* after the fact. A spinner is the sole cue that work is in progress; frozen,
* it reads as a hung page. Each spinner slows itself down in its own
* reduced-motion branch instead.
*/
{
) }
}
}