@nattstack/ui 0.0.15 → 0.0.16
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 +60 -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,27 @@ 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
|
+
Improve paragraph wrapping for readability
|
|
86
108
|
*/
|
|
87
109
|
p {
|
|
88
110
|
text-wrap: pretty;
|
|
89
111
|
}
|
|
90
112
|
|
|
91
113
|
/*
|
|
92
|
-
|
|
114
|
+
Use a dedicated monospace font for code
|
|
115
|
+
*/
|
|
116
|
+
code {
|
|
117
|
+
font-family: var(--font-code);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
/*
|
|
121
|
+
(Safari mobile) Remove inner shadows from form fields
|
|
93
122
|
*/
|
|
94
123
|
input,
|
|
95
124
|
textarea {
|
|
@@ -98,7 +127,7 @@ textarea {
|
|
|
98
127
|
}
|
|
99
128
|
|
|
100
129
|
/*
|
|
101
|
-
|
|
130
|
+
Hide number spin buttons in WebKit browsers
|
|
102
131
|
Chrome, Safari, Edge, Opera
|
|
103
132
|
*/
|
|
104
133
|
input::-webkit-outer-spin-button,
|
|
@@ -108,7 +137,7 @@ input::-webkit-inner-spin-button {
|
|
|
108
137
|
}
|
|
109
138
|
|
|
110
139
|
/*
|
|
111
|
-
|
|
140
|
+
Hide number spin buttons in Firefox
|
|
112
141
|
*/
|
|
113
142
|
input[type="number"] {
|
|
114
143
|
-moz-appearance: textfield;
|
|
@@ -116,7 +145,7 @@ input[type="number"] {
|
|
|
116
145
|
}
|
|
117
146
|
|
|
118
147
|
/*
|
|
119
|
-
|
|
148
|
+
Respect reduced-motion preferences
|
|
120
149
|
Reference: https://web.dev/articles/prefers-reduced-motion#bonus_forcing_reduced_motion_on_all_websites
|
|
121
150
|
*/
|
|
122
151
|
@media (prefers-reduced-motion: reduce) {
|
|
@@ -133,6 +162,13 @@ input[type="number"] {
|
|
|
133
162
|
}
|
|
134
163
|
}
|
|
135
164
|
|
|
165
|
+
/*
|
|
166
|
+
Debug helper for visualizing element bounds
|
|
167
|
+
*/
|
|
136
168
|
.d {
|
|
137
169
|
border: 1px dashed red;
|
|
138
170
|
}
|
|
171
|
+
|
|
172
|
+
.dark .d {
|
|
173
|
+
border-color: yellow;
|
|
174
|
+
}
|