@nattstack/ui 0.0.14 → 0.0.15
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 +138 -0
- package/package.json +2 -2
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
/* ====================================================== /
|
|
2
|
+
Baseline
|
|
3
|
+
Last updated: 2026.04.09
|
|
4
|
+
|
|
5
|
+
The goal of a reset stylesheet is to reduce browser
|
|
6
|
+
inconsistencies, improve the user experience, and
|
|
7
|
+
improve the CSS authoring experience. Assumes
|
|
8
|
+
the use of Tailwind CSS Preflight.
|
|
9
|
+
|
|
10
|
+
Reference:
|
|
11
|
+
- https://www.joshwcomeau.com/css/custom-css-reset
|
|
12
|
+
- https://piccalil.li/blog/a-more-modern-css-reset/
|
|
13
|
+
// ===================================================== */
|
|
14
|
+
|
|
15
|
+
/*
|
|
16
|
+
Adapt to color schemes (scrollbar color)
|
|
17
|
+
*/
|
|
18
|
+
:root {
|
|
19
|
+
color-scheme: light dark;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
/*
|
|
23
|
+
(Mobile) Disable automatic text size increase
|
|
24
|
+
(Mobile) Disables additional non-standard gestures such as double-tap to zoom
|
|
25
|
+
*/
|
|
26
|
+
html {
|
|
27
|
+
-moz-text-size-adjust: none;
|
|
28
|
+
-webkit-text-size-adjust: none;
|
|
29
|
+
text-size-adjust: none;
|
|
30
|
+
touch-action: manipulation;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
/*
|
|
34
|
+
Write comment here
|
|
35
|
+
*/
|
|
36
|
+
body {
|
|
37
|
+
-moz-osx-font-smoothing: grayscale;
|
|
38
|
+
-webkit-font-smoothing: antialiased;
|
|
39
|
+
-webkit-tap-highlight-color: transparent;
|
|
40
|
+
background-color: var(--color-bg-secondary);
|
|
41
|
+
color: var(--color-text-secondary);
|
|
42
|
+
font-family: var(--font-sans);
|
|
43
|
+
font-size: 16px;
|
|
44
|
+
line-height: 1.5;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
@media (max-width: 768px) {
|
|
48
|
+
body[data-is-app="true"] {
|
|
49
|
+
background-color: var(--color-bg-primary);
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
/*
|
|
54
|
+
Write comment here
|
|
55
|
+
*/
|
|
56
|
+
a,
|
|
57
|
+
button {
|
|
58
|
+
outline-color: var(--color-outline);
|
|
59
|
+
outline-offset: -2px;
|
|
60
|
+
outline-style: solid;
|
|
61
|
+
outline-width: 0;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
a:focus-visible,
|
|
65
|
+
button:focus-visible {
|
|
66
|
+
outline-width: 2px;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
/*
|
|
70
|
+
Write comment here
|
|
71
|
+
*/
|
|
72
|
+
h1,
|
|
73
|
+
h2,
|
|
74
|
+
h3,
|
|
75
|
+
h4,
|
|
76
|
+
h5,
|
|
77
|
+
h6 {
|
|
78
|
+
color: var(--color-text-primary);
|
|
79
|
+
font-family: var(--font-display);
|
|
80
|
+
font-weight: 500;
|
|
81
|
+
text-wrap: balance;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
/*
|
|
85
|
+
Write comment here
|
|
86
|
+
*/
|
|
87
|
+
p {
|
|
88
|
+
text-wrap: pretty;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
/*
|
|
92
|
+
(Safari mobile) Remove top inner shadow
|
|
93
|
+
*/
|
|
94
|
+
input,
|
|
95
|
+
textarea {
|
|
96
|
+
-webkit-appearance: none;
|
|
97
|
+
appearance: none;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
/*
|
|
101
|
+
Remove input arrows
|
|
102
|
+
Chrome, Safari, Edge, Opera
|
|
103
|
+
*/
|
|
104
|
+
input::-webkit-outer-spin-button,
|
|
105
|
+
input::-webkit-inner-spin-button {
|
|
106
|
+
margin: 0;
|
|
107
|
+
-webkit-appearance: none;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
/*
|
|
111
|
+
Remove input number arrows
|
|
112
|
+
*/
|
|
113
|
+
input[type="number"] {
|
|
114
|
+
-moz-appearance: textfield;
|
|
115
|
+
appearance: textfield;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
/*
|
|
119
|
+
Respecting motion preferences
|
|
120
|
+
Reference: https://web.dev/articles/prefers-reduced-motion#bonus_forcing_reduced_motion_on_all_websites
|
|
121
|
+
*/
|
|
122
|
+
@media (prefers-reduced-motion: reduce) {
|
|
123
|
+
*,
|
|
124
|
+
::before,
|
|
125
|
+
::after {
|
|
126
|
+
animation-delay: -1ms !important;
|
|
127
|
+
animation-duration: 1ms !important;
|
|
128
|
+
animation-iteration-count: 1 !important;
|
|
129
|
+
background-attachment: initial !important;
|
|
130
|
+
scroll-behavior: auto !important;
|
|
131
|
+
transition-delay: -1ms !important;
|
|
132
|
+
transition-duration: 1ms !important;
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.d {
|
|
137
|
+
border: 1px dashed red;
|
|
138
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nattstack/ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.15",
|
|
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"
|