@nattstack/ui 0.0.15 → 0.0.17
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/dist/baseline/index.css +79 -24
- package/package.json +1 -1
package/dist/baseline/index.css
CHANGED
|
@@ -2,36 +2,35 @@
|
|
|
2
2
|
Baseline
|
|
3
3
|
Last updated: 2026.04.09
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
the use of Tailwind CSS Preflight.
|
|
5
|
+
Baseline styles smooth over browser inconsistencies,
|
|
6
|
+
improve the authoring experience, and assume
|
|
7
|
+
Tailwind CSS Preflight is already in use.
|
|
9
8
|
|
|
10
|
-
|
|
9
|
+
References:
|
|
11
10
|
- https://www.joshwcomeau.com/css/custom-css-reset
|
|
12
11
|
- https://piccalil.li/blog/a-more-modern-css-reset/
|
|
13
12
|
// ===================================================== */
|
|
14
13
|
|
|
15
14
|
/*
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
/*
|
|
23
|
-
(Mobile) Disable automatic text size increase
|
|
24
|
-
(Mobile) Disables additional non-standard gestures such as double-tap to zoom
|
|
15
|
+
Global html defaults
|
|
16
|
+
- Prevent automatic text resizing
|
|
17
|
+
- Match native UI to the active color scheme
|
|
18
|
+
- Allow size interpolation for keywords such as auto
|
|
19
|
+
- Disable extra gestures such as double-tap to zoom
|
|
25
20
|
*/
|
|
26
21
|
html {
|
|
27
22
|
-moz-text-size-adjust: none;
|
|
28
23
|
-webkit-text-size-adjust: none;
|
|
24
|
+
color-scheme: light dark;
|
|
25
|
+
interpolate-size: allow-keywords;
|
|
29
26
|
text-size-adjust: none;
|
|
30
27
|
touch-action: manipulation;
|
|
31
28
|
}
|
|
32
29
|
|
|
33
30
|
/*
|
|
34
|
-
|
|
31
|
+
Base typography and theme tokens
|
|
32
|
+
- Improve font rendering
|
|
33
|
+
- Set the default surface, text, and body font
|
|
35
34
|
*/
|
|
36
35
|
body {
|
|
37
36
|
-moz-osx-font-smoothing: grayscale;
|
|
@@ -39,11 +38,21 @@ body {
|
|
|
39
38
|
-webkit-tap-highlight-color: transparent;
|
|
40
39
|
background-color: var(--color-bg-secondary);
|
|
41
40
|
color: var(--color-text-secondary);
|
|
42
|
-
font-family: var(--font-
|
|
41
|
+
font-family: var(--font-body);
|
|
43
42
|
font-size: 16px;
|
|
44
43
|
line-height: 1.5;
|
|
45
44
|
}
|
|
46
45
|
|
|
46
|
+
/*
|
|
47
|
+
Isolate elements to prevent layout shifts
|
|
48
|
+
*/
|
|
49
|
+
body > * {
|
|
50
|
+
isolation: isolate;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
/*
|
|
54
|
+
On small screens, app mode uses the primary surface
|
|
55
|
+
*/
|
|
47
56
|
@media (max-width: 768px) {
|
|
48
57
|
body[data-is-app="true"] {
|
|
49
58
|
background-color: var(--color-bg-primary);
|
|
@@ -51,7 +60,7 @@ body {
|
|
|
51
60
|
}
|
|
52
61
|
|
|
53
62
|
/*
|
|
54
|
-
|
|
63
|
+
Apply a shared focus ring treatment to interactive controls
|
|
55
64
|
*/
|
|
56
65
|
a,
|
|
57
66
|
button {
|
|
@@ -67,7 +76,20 @@ button:focus-visible {
|
|
|
67
76
|
}
|
|
68
77
|
|
|
69
78
|
/*
|
|
70
|
-
|
|
79
|
+
Avoid text overflows
|
|
80
|
+
*/
|
|
81
|
+
h1,
|
|
82
|
+
h2,
|
|
83
|
+
h3,
|
|
84
|
+
h4,
|
|
85
|
+
h5,
|
|
86
|
+
h6,
|
|
87
|
+
p {
|
|
88
|
+
overflow-wrap: break-word;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
/*
|
|
92
|
+
Default heading typography
|
|
71
93
|
*/
|
|
72
94
|
h1,
|
|
73
95
|
h2,
|
|
@@ -76,20 +98,46 @@ h4,
|
|
|
76
98
|
h5,
|
|
77
99
|
h6 {
|
|
78
100
|
color: var(--color-text-primary);
|
|
79
|
-
font-family: var(--font-
|
|
101
|
+
font-family: var(--font-heading);
|
|
80
102
|
font-weight: 500;
|
|
81
103
|
text-wrap: balance;
|
|
82
104
|
}
|
|
83
105
|
|
|
84
106
|
/*
|
|
85
|
-
|
|
107
|
+
Default heading typography
|
|
108
|
+
*/
|
|
109
|
+
h1 {
|
|
110
|
+
font-size: 5.6rem;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
h2 {
|
|
114
|
+
font-size: 3.6rem;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
h3 {
|
|
118
|
+
font-size: 3rem;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
h4 {
|
|
122
|
+
font-size: 2rem;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
/*
|
|
126
|
+
Improve paragraph wrapping for readability
|
|
86
127
|
*/
|
|
87
128
|
p {
|
|
88
129
|
text-wrap: pretty;
|
|
89
130
|
}
|
|
90
131
|
|
|
91
132
|
/*
|
|
92
|
-
|
|
133
|
+
Use a dedicated monospace font for code
|
|
134
|
+
*/
|
|
135
|
+
code {
|
|
136
|
+
font-family: var(--font-code);
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
/*
|
|
140
|
+
(Safari mobile) Remove inner shadows from form fields
|
|
93
141
|
*/
|
|
94
142
|
input,
|
|
95
143
|
textarea {
|
|
@@ -98,7 +146,7 @@ textarea {
|
|
|
98
146
|
}
|
|
99
147
|
|
|
100
148
|
/*
|
|
101
|
-
|
|
149
|
+
Hide number spin buttons in WebKit browsers
|
|
102
150
|
Chrome, Safari, Edge, Opera
|
|
103
151
|
*/
|
|
104
152
|
input::-webkit-outer-spin-button,
|
|
@@ -108,7 +156,7 @@ input::-webkit-inner-spin-button {
|
|
|
108
156
|
}
|
|
109
157
|
|
|
110
158
|
/*
|
|
111
|
-
|
|
159
|
+
Hide number spin buttons in Firefox
|
|
112
160
|
*/
|
|
113
161
|
input[type="number"] {
|
|
114
162
|
-moz-appearance: textfield;
|
|
@@ -116,7 +164,7 @@ input[type="number"] {
|
|
|
116
164
|
}
|
|
117
165
|
|
|
118
166
|
/*
|
|
119
|
-
|
|
167
|
+
Respect reduced-motion preferences
|
|
120
168
|
Reference: https://web.dev/articles/prefers-reduced-motion#bonus_forcing_reduced_motion_on_all_websites
|
|
121
169
|
*/
|
|
122
170
|
@media (prefers-reduced-motion: reduce) {
|
|
@@ -133,6 +181,13 @@ input[type="number"] {
|
|
|
133
181
|
}
|
|
134
182
|
}
|
|
135
183
|
|
|
184
|
+
/*
|
|
185
|
+
Debug helper for visualizing element bounds
|
|
186
|
+
*/
|
|
136
187
|
.d {
|
|
137
188
|
border: 1px dashed red;
|
|
138
189
|
}
|
|
190
|
+
|
|
191
|
+
.dark .d {
|
|
192
|
+
border-color: yellow;
|
|
193
|
+
}
|