@nattstack/ui 0.0.14 → 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 +174 -0
- package/package.json +2 -2
|
@@ -0,0 +1,174 @@
|
|
|
1
|
+
/* ====================================================== /
|
|
2
|
+
Baseline
|
|
3
|
+
Last updated: 2026.04.09
|
|
4
|
+
|
|
5
|
+
Baseline styles smooth over browser inconsistencies,
|
|
6
|
+
improve the authoring experience, and assume
|
|
7
|
+
Tailwind CSS Preflight is already in use.
|
|
8
|
+
|
|
9
|
+
References:
|
|
10
|
+
- https://www.joshwcomeau.com/css/custom-css-reset
|
|
11
|
+
- https://piccalil.li/blog/a-more-modern-css-reset/
|
|
12
|
+
// ===================================================== */
|
|
13
|
+
|
|
14
|
+
/*
|
|
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
|
|
20
|
+
*/
|
|
21
|
+
html {
|
|
22
|
+
-moz-text-size-adjust: none;
|
|
23
|
+
-webkit-text-size-adjust: none;
|
|
24
|
+
color-scheme: light dark;
|
|
25
|
+
interpolate-size: allow-keywords;
|
|
26
|
+
text-size-adjust: none;
|
|
27
|
+
touch-action: manipulation;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
/*
|
|
31
|
+
Base typography and theme tokens
|
|
32
|
+
- Improve font rendering
|
|
33
|
+
- Set the default surface, text, and body font
|
|
34
|
+
*/
|
|
35
|
+
body {
|
|
36
|
+
-moz-osx-font-smoothing: grayscale;
|
|
37
|
+
-webkit-font-smoothing: antialiased;
|
|
38
|
+
-webkit-tap-highlight-color: transparent;
|
|
39
|
+
background-color: var(--color-bg-secondary);
|
|
40
|
+
color: var(--color-text-secondary);
|
|
41
|
+
font-family: var(--font-body);
|
|
42
|
+
font-size: 16px;
|
|
43
|
+
line-height: 1.5;
|
|
44
|
+
}
|
|
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
|
+
*/
|
|
56
|
+
@media (max-width: 768px) {
|
|
57
|
+
body[data-is-app="true"] {
|
|
58
|
+
background-color: var(--color-bg-primary);
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
/*
|
|
63
|
+
Apply a shared focus ring treatment to interactive controls
|
|
64
|
+
*/
|
|
65
|
+
a,
|
|
66
|
+
button {
|
|
67
|
+
outline-color: var(--color-outline);
|
|
68
|
+
outline-offset: -2px;
|
|
69
|
+
outline-style: solid;
|
|
70
|
+
outline-width: 0;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
a:focus-visible,
|
|
74
|
+
button:focus-visible {
|
|
75
|
+
outline-width: 2px;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
/*
|
|
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
|
|
93
|
+
*/
|
|
94
|
+
h1,
|
|
95
|
+
h2,
|
|
96
|
+
h3,
|
|
97
|
+
h4,
|
|
98
|
+
h5,
|
|
99
|
+
h6 {
|
|
100
|
+
color: var(--color-text-primary);
|
|
101
|
+
font-family: var(--font-heading);
|
|
102
|
+
font-weight: 500;
|
|
103
|
+
text-wrap: balance;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
/*
|
|
107
|
+
Improve paragraph wrapping for readability
|
|
108
|
+
*/
|
|
109
|
+
p {
|
|
110
|
+
text-wrap: pretty;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
/*
|
|
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
|
|
122
|
+
*/
|
|
123
|
+
input,
|
|
124
|
+
textarea {
|
|
125
|
+
-webkit-appearance: none;
|
|
126
|
+
appearance: none;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
/*
|
|
130
|
+
Hide number spin buttons in WebKit browsers
|
|
131
|
+
Chrome, Safari, Edge, Opera
|
|
132
|
+
*/
|
|
133
|
+
input::-webkit-outer-spin-button,
|
|
134
|
+
input::-webkit-inner-spin-button {
|
|
135
|
+
margin: 0;
|
|
136
|
+
-webkit-appearance: none;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
/*
|
|
140
|
+
Hide number spin buttons in Firefox
|
|
141
|
+
*/
|
|
142
|
+
input[type="number"] {
|
|
143
|
+
-moz-appearance: textfield;
|
|
144
|
+
appearance: textfield;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
/*
|
|
148
|
+
Respect reduced-motion preferences
|
|
149
|
+
Reference: https://web.dev/articles/prefers-reduced-motion#bonus_forcing_reduced_motion_on_all_websites
|
|
150
|
+
*/
|
|
151
|
+
@media (prefers-reduced-motion: reduce) {
|
|
152
|
+
*,
|
|
153
|
+
::before,
|
|
154
|
+
::after {
|
|
155
|
+
animation-delay: -1ms !important;
|
|
156
|
+
animation-duration: 1ms !important;
|
|
157
|
+
animation-iteration-count: 1 !important;
|
|
158
|
+
background-attachment: initial !important;
|
|
159
|
+
scroll-behavior: auto !important;
|
|
160
|
+
transition-delay: -1ms !important;
|
|
161
|
+
transition-duration: 1ms !important;
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
/*
|
|
166
|
+
Debug helper for visualizing element bounds
|
|
167
|
+
*/
|
|
168
|
+
.d {
|
|
169
|
+
border: 1px dashed red;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.dark .d {
|
|
173
|
+
border-color: yellow;
|
|
174
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nattstack/ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.16",
|
|
4
4
|
"description": "A collection of reusable React components built with Base UI, TypeScript, and CSS Modules",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"base-ui",
|
|
@@ -31,8 +31,8 @@
|
|
|
31
31
|
"types": "./dist/components/index.d.ts",
|
|
32
32
|
"import": "./dist/components/index.js"
|
|
33
33
|
},
|
|
34
|
+
"./baseline": "./dist/baseline/index.css",
|
|
34
35
|
"./colors": "./dist/colors/index.css",
|
|
35
|
-
"./tailwind-baseline": "./dist/tailwind-baseline/index.css",
|
|
36
36
|
"./tailwind-colors": "./dist/tailwind-colors/index.css",
|
|
37
37
|
"./tailwind-tokenless-10": "./dist/tailwind-tokenless/10/index.css",
|
|
38
38
|
"./tailwind-tokenless-16": "./dist/tailwind-tokenless/16/index.css"
|