@nattui/react-components 0.0.35 → 0.0.36
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.
|
@@ -96,21 +96,9 @@
|
|
|
96
96
|
background-color: var(--color-primary-9);
|
|
97
97
|
background-image: linear-gradient(
|
|
98
98
|
to bottom,
|
|
99
|
-
color-mix(in oklab, transparent 100%, #ffffff
|
|
99
|
+
color-mix(in oklab, transparent 100%, #ffffff 5%) 50%,
|
|
100
100
|
color-mix(in oklab, transparent 100%, #ffffff 0%) 50%
|
|
101
101
|
);
|
|
102
|
-
box-shadow:
|
|
103
|
-
0 0 0 1px var(--color-primary-9) inset,
|
|
104
|
-
0 1px 0 1px rgba(255, 255, 255, 0.25) inset,
|
|
105
|
-
0 -1px 0 1px rgba(0, 0, 0, 0.1) inset;
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
.button__variant_accent:active:enabled,
|
|
109
|
-
.button__variant_accent[aria-pressed="true"]:enabled {
|
|
110
|
-
box-shadow:
|
|
111
|
-
0 0 0 1px var(--color-primary-9) inset,
|
|
112
|
-
0 -1px 0 1px rgba(255, 255, 255, 0.25) inset,
|
|
113
|
-
0 1px 0 1px rgba(0, 0, 0, 0.1) inset;
|
|
114
102
|
}
|
|
115
103
|
|
|
116
104
|
.button__variant_accent:active:enabled,
|
|
@@ -123,7 +111,7 @@
|
|
|
123
111
|
background-image: linear-gradient(
|
|
124
112
|
to bottom,
|
|
125
113
|
color-mix(in oklab, transparent 100%, #000000 0%) 50%,
|
|
126
|
-
color-mix(in oklab, transparent 100%, #000000
|
|
114
|
+
color-mix(in oklab, transparent 100%, #000000 5%) 50%
|
|
127
115
|
);
|
|
128
116
|
}
|
|
129
117
|
|
|
@@ -136,7 +124,7 @@
|
|
|
136
124
|
.button__variant_ghost:active:enabled,
|
|
137
125
|
.button__variant_ghost:hover:enabled,
|
|
138
126
|
.button__variant_ghost[aria-pressed="true"]:enabled {
|
|
139
|
-
background-color: var(--color-gray-
|
|
127
|
+
background-color: var(--color-gray-3);
|
|
140
128
|
}
|
|
141
129
|
|
|
142
130
|
:global(.dark) .button__variant_ghost {
|
|
@@ -146,24 +134,12 @@
|
|
|
146
134
|
/* Primary */
|
|
147
135
|
.button__variant_primary {
|
|
148
136
|
color: var(--color-white);
|
|
149
|
-
background-color: var(--color-gray-dark-
|
|
137
|
+
background-color: var(--color-gray-dark-1);
|
|
150
138
|
background-image: linear-gradient(
|
|
151
139
|
to bottom,
|
|
152
|
-
color-mix(in oklab, transparent 100%, #ffffff
|
|
140
|
+
color-mix(in oklab, transparent 100%, #ffffff 5%) 50%,
|
|
153
141
|
color-mix(in oklab, transparent 100%, #ffffff 0%) 50%
|
|
154
142
|
);
|
|
155
|
-
box-shadow:
|
|
156
|
-
0 0 0 1px var(--color-gray-dark-2) inset,
|
|
157
|
-
0 1px 0 1px rgba(255, 255, 255, 0.25) inset,
|
|
158
|
-
0 -1px 0 1px rgba(0, 0, 0, 0.1) inset;
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
.button__variant_primary:active:enabled,
|
|
162
|
-
.button__variant_primary[aria-pressed="true"]:enabled {
|
|
163
|
-
box-shadow:
|
|
164
|
-
0 0 0 1px var(--color-gray-dark-2) inset,
|
|
165
|
-
0 -1px 0 1px rgba(255, 255, 255, 0.25) inset,
|
|
166
|
-
0 1px 0 1px rgba(0, 0, 0, 0.1) inset;
|
|
167
143
|
}
|
|
168
144
|
|
|
169
145
|
.button__variant_primary:active:enabled,
|
|
@@ -178,20 +154,8 @@
|
|
|
178
154
|
background-image: linear-gradient(
|
|
179
155
|
to bottom,
|
|
180
156
|
color-mix(in oklab, transparent 100%, #000000 0%) 50%,
|
|
181
|
-
color-mix(in oklab, transparent 100%, #000000
|
|
157
|
+
color-mix(in oklab, transparent 100%, #000000 5%) 50%
|
|
182
158
|
);
|
|
183
|
-
box-shadow:
|
|
184
|
-
0 0 0 1px var(--color-gray-light-1) inset,
|
|
185
|
-
0 1px 0 1px rgba(255, 255, 255, 0.25) inset,
|
|
186
|
-
0 -1px 0 1px rgba(0, 0, 0, 0.1) inset;
|
|
187
|
-
}
|
|
188
|
-
|
|
189
|
-
:global(.dark) .button__variant_primary:active:enabled,
|
|
190
|
-
:global(.dark) .button__variant_primary[aria-pressed="true"]:enabled {
|
|
191
|
-
box-shadow:
|
|
192
|
-
0 0 0 1px var(--color-gray-light-2) inset,
|
|
193
|
-
0 -1px 0 1px rgba(255, 255, 255, 0.25) inset,
|
|
194
|
-
0 1px 0 1px rgba(0, 0, 0, 0.1) inset;
|
|
195
159
|
}
|
|
196
160
|
|
|
197
161
|
:global(.dark) .button__variant_primary:active:enabled,
|
|
@@ -209,33 +173,23 @@
|
|
|
209
173
|
color-mix(in oklab, transparent 100%, #000000 0%) 50%,
|
|
210
174
|
color-mix(in oklab, transparent 100%, #000000 2.5%) 50%
|
|
211
175
|
);
|
|
212
|
-
box-shadow:
|
|
213
|
-
0 -1px 0 0px rgba(0, 0, 0, 7.5%) inset,
|
|
214
|
-
/* Bottom */ 0 0 0 1px var(--color-gray-4) inset; /* Border */
|
|
215
|
-
}
|
|
216
|
-
|
|
217
|
-
.button__variant_secondary:active:enabled,
|
|
218
|
-
.button__variant_secondary[aria-pressed="true"]:enabled {
|
|
219
|
-
box-shadow: 0 0 0 1px var(--color-gray-6) inset;
|
|
176
|
+
box-shadow: 0 0 0 1px var(--color-gray-4) inset;
|
|
220
177
|
}
|
|
221
178
|
|
|
222
179
|
.button__variant_secondary:active:enabled,
|
|
223
180
|
.button__variant_secondary:hover:enabled,
|
|
224
181
|
.button__variant_secondary[aria-pressed="true"]:enabled {
|
|
225
|
-
background-color: var(--color-gray-
|
|
182
|
+
background-color: var(--color-gray-2);
|
|
183
|
+
box-shadow: 0 0 0 1px var(--color-gray-6) inset;
|
|
226
184
|
}
|
|
227
185
|
|
|
228
186
|
:global(.dark) .button__variant_secondary {
|
|
229
187
|
color: var(--color-white);
|
|
230
|
-
background-color: var(--color-gray-2);
|
|
231
188
|
background-image: linear-gradient(
|
|
232
189
|
to bottom,
|
|
233
190
|
color-mix(in oklab, transparent 100%, #ffffff 2.5%) 50%,
|
|
234
191
|
color-mix(in oklab, transparent 100%, #ffffff 0%) 50%
|
|
235
192
|
);
|
|
236
|
-
box-shadow:
|
|
237
|
-
0 1px 0 0px rgba(255, 255, 255, 7.5%) inset,
|
|
238
|
-
/* Top */ 0 0 0 1px var(--color-gray-4) inset; /* Border */
|
|
239
193
|
}
|
|
240
194
|
|
|
241
195
|
/* ===================================================== */
|
package/dist/index.js
CHANGED
|
@@ -7,7 +7,7 @@ function ButtonSpinner(props) {
|
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
// src/button.tsx
|
|
10
|
-
import styles2 from "./button.module-
|
|
10
|
+
import styles2 from "./button.module-4LEXZ25X.module.css";
|
|
11
11
|
import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
12
12
|
function Button(props) {
|
|
13
13
|
const {
|
|
@@ -79,7 +79,7 @@ var BUTTON_CLASS_NAME = {
|
|
|
79
79
|
};
|
|
80
80
|
|
|
81
81
|
// src/input.tsx
|
|
82
|
-
import styles3 from "./input.module-
|
|
82
|
+
import styles3 from "./input.module-JBNVVC6S.module.css";
|
|
83
83
|
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
84
84
|
function Input(props) {
|
|
85
85
|
const {
|
|
@@ -207,7 +207,7 @@ var SWITCH_CLASS_NAME = {
|
|
|
207
207
|
};
|
|
208
208
|
|
|
209
209
|
// src/textarea.tsx
|
|
210
|
-
import inputStyles from "./input.module-
|
|
210
|
+
import inputStyles from "./input.module-JBNVVC6S.module.css";
|
|
211
211
|
import styles7 from "./textarea.module-6GUVSFC7.module.css";
|
|
212
212
|
import { jsx as jsx7 } from "react/jsx-runtime";
|
|
213
213
|
function Textarea(props) {
|
|
@@ -20,9 +20,7 @@
|
|
|
20
20
|
outline-offset: -2px;
|
|
21
21
|
background-color: var(--color-gray-1, #fcfcfc);
|
|
22
22
|
border-style: none;
|
|
23
|
-
box-shadow:
|
|
24
|
-
0 -1px 0 0px rgba(0, 0, 0, 7.5%) inset,
|
|
25
|
-
/* Bottom */ 0 0 0 1px var(--color-gray-4) inset; /* Border */
|
|
23
|
+
box-shadow: 0 0 0 1px var(--color-gray-4) inset;
|
|
26
24
|
transition-duration: 150ms;
|
|
27
25
|
transition-property: box-shadow, opacity;
|
|
28
26
|
}
|
|
@@ -41,9 +39,7 @@
|
|
|
41
39
|
.input:enabled:focus,
|
|
42
40
|
.input:enabled:hover,
|
|
43
41
|
.input:enabled[data-is-active="true"] {
|
|
44
|
-
box-shadow:
|
|
45
|
-
0 -1px 0 0px rgba(0, 0, 0, 7.5%) inset,
|
|
46
|
-
/* Bottom */ 0 0 0 1px var(--color-gray-6) inset; /* Border */
|
|
42
|
+
box-shadow: 0 0 0 1px var(--color-gray-6) inset;
|
|
47
43
|
}
|
|
48
44
|
|
|
49
45
|
.input[data-is-valid="true"] {
|
|
@@ -59,22 +55,6 @@
|
|
|
59
55
|
outline-color: var(--color-primary-9, #e93d82);
|
|
60
56
|
}
|
|
61
57
|
|
|
62
|
-
:global(.dark) .input {
|
|
63
|
-
background-color: var(--color-gray-2, #101010);
|
|
64
|
-
box-shadow:
|
|
65
|
-
0 1px 0 0px rgba(255, 255, 255, 7.5%) inset,
|
|
66
|
-
/* Top */ 0 0 0 1px var(--color-gray-4) inset; /* Border */
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
:global(.dark) .input:enabled:active,
|
|
70
|
-
:global(.dark) .input:enabled:focus,
|
|
71
|
-
:global(.dark) .input:enabled:hover,
|
|
72
|
-
:global(.dark) .input:enabled[data-is-active="true"] {
|
|
73
|
-
box-shadow:
|
|
74
|
-
0 1px 0 0px rgba(255, 255, 255, 7.5%) inset,
|
|
75
|
-
/* Top */ 0 0 0 1px var(--color-gray-6) inset; /* Border */
|
|
76
|
-
}
|
|
77
|
-
|
|
78
58
|
/* ===================================================== */
|
|
79
59
|
/* Password */
|
|
80
60
|
/* ===================================================== */
|