@tuwaio/nova-core 0.0.6 → 0.0.7
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/README.md +2 -52
- package/dist/index.css +69 -308
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -32,7 +32,6 @@ Use this package to:
|
|
|
32
32
|
2. **Import the core styles** into the root of your application's main CSS file (e.g., `globals.css`). **This step is crucial.**
|
|
33
33
|
|
|
34
34
|
```css
|
|
35
|
-
@import "tailwindcss";
|
|
36
35
|
@import '@tuwaio/nova-core/dist/index.css';
|
|
37
36
|
```
|
|
38
37
|
|
|
@@ -40,9 +39,9 @@ Use this package to:
|
|
|
40
39
|
|
|
41
40
|
You can use the provided styles in two ways: directly with CSS variables (basic) or by integrating them into your theme (recommended).
|
|
42
41
|
|
|
43
|
-
###
|
|
42
|
+
### Usage
|
|
44
43
|
|
|
45
|
-
|
|
44
|
+
For example with Tailwind CSS v4, you can use the CSS variables from this package directly in your className as arbitrary values only need to @import tailwindcss in your .css file.
|
|
46
45
|
|
|
47
46
|
```tsx
|
|
48
47
|
// You can use the variables directly
|
|
@@ -51,55 +50,6 @@ With Tailwind CSS v4, you can use the CSS variables from this package directly i
|
|
|
51
50
|
</button>
|
|
52
51
|
```
|
|
53
52
|
|
|
54
|
-
### Recommended Usage (Theming with `tailwind.config.js`)
|
|
55
|
-
|
|
56
|
-
While a config file is optional in Tailwind v4, creating one to map our CSS variables to Tailwind's theme allows you to use clean, semantic class names. This is the recommended approach for building a consistent design system.
|
|
57
|
-
|
|
58
|
-
**1. Create or update your `tailwind.config.js`:**
|
|
59
|
-
|
|
60
|
-
```js
|
|
61
|
-
// tailwind.config.js
|
|
62
|
-
/** @type {import('tailwindcss').Config} */
|
|
63
|
-
export default {
|
|
64
|
-
content: [
|
|
65
|
-
'./src/**/*.{js,ts,jsx,tsx}',
|
|
66
|
-
],
|
|
67
|
-
theme: {
|
|
68
|
-
extend: {
|
|
69
|
-
colors: {
|
|
70
|
-
primary: 'var(--tuwa-color-primary)',
|
|
71
|
-
secondary: 'var(--tuwa-color-secondary)',
|
|
72
|
-
background: 'var(--tuwa-color-background)',
|
|
73
|
-
foreground: 'var(--tuwa-color-foreground)',
|
|
74
|
-
},
|
|
75
|
-
// ... etc.
|
|
76
|
-
},
|
|
77
|
-
},
|
|
78
|
-
plugins: [],
|
|
79
|
-
};
|
|
80
|
-
```
|
|
81
|
-
|
|
82
|
-
**2. Use semantic class names in your components:**
|
|
83
|
-
|
|
84
|
-
Now your code becomes much cleaner and easier to read.
|
|
85
|
-
|
|
86
|
-
```tsx
|
|
87
|
-
import { cn } from '@tuwaio/nova-core';
|
|
88
|
-
|
|
89
|
-
export function Button({ intent, className, ...props }) {
|
|
90
|
-
const buttonClasses = cn(
|
|
91
|
-
'px-4 py-2 rounded-md font-semibold transition-colors',
|
|
92
|
-
{
|
|
93
|
-
'bg-primary text-white hover:opacity-90': intent === 'primary',
|
|
94
|
-
'bg-secondary text-foreground hover:opacity-90': intent === 'secondary',
|
|
95
|
-
},
|
|
96
|
-
className,
|
|
97
|
-
);
|
|
98
|
-
|
|
99
|
-
return <button className={buttonClasses} {...props} />;
|
|
100
|
-
}
|
|
101
|
-
```
|
|
102
|
-
|
|
103
53
|
## Contributing
|
|
104
54
|
|
|
105
55
|
Contributions are welcome! Please read our main **[Contribution Guidelines](https://github.com/TuwaIO/workflows/blob/main/CONTRIBUTING.md)**.
|
package/dist/index.css
CHANGED
|
@@ -1,312 +1,73 @@
|
|
|
1
|
-
/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */
|
|
2
|
-
@layer properties;
|
|
3
|
-
@layer theme, base, components, utilities;
|
|
4
|
-
@layer theme {
|
|
5
|
-
:root, :host {
|
|
6
|
-
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
|
|
7
|
-
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
8
|
-
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
|
|
9
|
-
"Courier New", monospace;
|
|
10
|
-
--color-red-500: oklch(63.7% 0.237 25.331);
|
|
11
|
-
--color-white: #fff;
|
|
12
|
-
--spacing: 0.25rem;
|
|
13
|
-
--font-weight-semibold: 600;
|
|
14
|
-
--font-weight-bold: 700;
|
|
15
|
-
--radius-md: 0.375rem;
|
|
16
|
-
--default-transition-duration: 150ms;
|
|
17
|
-
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
18
|
-
--default-font-family: var(--font-sans);
|
|
19
|
-
--default-mono-font-family: var(--font-mono);
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
@layer base {
|
|
23
|
-
*, ::after, ::before, ::backdrop, ::file-selector-button {
|
|
24
|
-
box-sizing: border-box;
|
|
25
|
-
margin: 0;
|
|
26
|
-
padding: 0;
|
|
27
|
-
border: 0 solid;
|
|
28
|
-
}
|
|
29
|
-
html, :host {
|
|
30
|
-
line-height: 1.5;
|
|
31
|
-
-webkit-text-size-adjust: 100%;
|
|
32
|
-
-moz-tab-size: 4;
|
|
33
|
-
-o-tab-size: 4;
|
|
34
|
-
tab-size: 4;
|
|
35
|
-
font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
|
|
36
|
-
font-feature-settings: var(--default-font-feature-settings, normal);
|
|
37
|
-
font-variation-settings: var(--default-font-variation-settings, normal);
|
|
38
|
-
-webkit-tap-highlight-color: transparent;
|
|
39
|
-
}
|
|
40
|
-
hr {
|
|
41
|
-
height: 0;
|
|
42
|
-
color: inherit;
|
|
43
|
-
border-top-width: 1px;
|
|
44
|
-
}
|
|
45
|
-
abbr:where([title]) {
|
|
46
|
-
-webkit-text-decoration: underline dotted;
|
|
47
|
-
text-decoration: underline dotted;
|
|
48
|
-
}
|
|
49
|
-
h1, h2, h3, h4, h5, h6 {
|
|
50
|
-
font-size: inherit;
|
|
51
|
-
font-weight: inherit;
|
|
52
|
-
}
|
|
53
|
-
a {
|
|
54
|
-
color: inherit;
|
|
55
|
-
-webkit-text-decoration: inherit;
|
|
56
|
-
text-decoration: inherit;
|
|
57
|
-
}
|
|
58
|
-
b, strong {
|
|
59
|
-
font-weight: bolder;
|
|
60
|
-
}
|
|
61
|
-
code, kbd, samp, pre {
|
|
62
|
-
font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
|
|
63
|
-
font-feature-settings: var(--default-mono-font-feature-settings, normal);
|
|
64
|
-
font-variation-settings: var(--default-mono-font-variation-settings, normal);
|
|
65
|
-
font-size: 1em;
|
|
66
|
-
}
|
|
67
|
-
small {
|
|
68
|
-
font-size: 80%;
|
|
69
|
-
}
|
|
70
|
-
sub, sup {
|
|
71
|
-
font-size: 75%;
|
|
72
|
-
line-height: 0;
|
|
73
|
-
position: relative;
|
|
74
|
-
vertical-align: baseline;
|
|
75
|
-
}
|
|
76
|
-
sub {
|
|
77
|
-
bottom: -0.25em;
|
|
78
|
-
}
|
|
79
|
-
sup {
|
|
80
|
-
top: -0.5em;
|
|
81
|
-
}
|
|
82
|
-
table {
|
|
83
|
-
text-indent: 0;
|
|
84
|
-
border-color: inherit;
|
|
85
|
-
border-collapse: collapse;
|
|
86
|
-
}
|
|
87
|
-
:-moz-focusring {
|
|
88
|
-
outline: auto;
|
|
89
|
-
}
|
|
90
|
-
progress {
|
|
91
|
-
vertical-align: baseline;
|
|
92
|
-
}
|
|
93
|
-
summary {
|
|
94
|
-
display: list-item;
|
|
95
|
-
}
|
|
96
|
-
ol, ul, menu {
|
|
97
|
-
list-style: none;
|
|
98
|
-
}
|
|
99
|
-
img, svg, video, canvas, audio, iframe, embed, object {
|
|
100
|
-
display: block;
|
|
101
|
-
vertical-align: middle;
|
|
102
|
-
}
|
|
103
|
-
img, video {
|
|
104
|
-
max-width: 100%;
|
|
105
|
-
height: auto;
|
|
106
|
-
}
|
|
107
|
-
button, input, select, optgroup, textarea, ::file-selector-button {
|
|
108
|
-
font: inherit;
|
|
109
|
-
font-feature-settings: inherit;
|
|
110
|
-
font-variation-settings: inherit;
|
|
111
|
-
letter-spacing: inherit;
|
|
112
|
-
color: inherit;
|
|
113
|
-
border-radius: 0;
|
|
114
|
-
background-color: transparent;
|
|
115
|
-
opacity: 1;
|
|
116
|
-
}
|
|
117
|
-
:where(select:is([multiple], [size])) optgroup {
|
|
118
|
-
font-weight: bolder;
|
|
119
|
-
}
|
|
120
|
-
:where(select:is([multiple], [size])) optgroup option {
|
|
121
|
-
padding-inline-start: 20px;
|
|
122
|
-
}
|
|
123
|
-
::file-selector-button {
|
|
124
|
-
margin-inline-end: 4px;
|
|
125
|
-
}
|
|
126
|
-
::-moz-placeholder {
|
|
127
|
-
opacity: 1;
|
|
128
|
-
}
|
|
129
|
-
::placeholder {
|
|
130
|
-
opacity: 1;
|
|
131
|
-
}
|
|
132
|
-
@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
|
|
133
|
-
::-moz-placeholder {
|
|
134
|
-
color: currentcolor;
|
|
135
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
136
|
-
color: color-mix(in oklab, currentcolor 50%, transparent);
|
|
137
|
-
}
|
|
138
|
-
}
|
|
139
|
-
::placeholder {
|
|
140
|
-
color: currentcolor;
|
|
141
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
142
|
-
color: color-mix(in oklab, currentcolor 50%, transparent);
|
|
143
|
-
}
|
|
144
|
-
}
|
|
145
|
-
}
|
|
146
|
-
textarea {
|
|
147
|
-
resize: vertical;
|
|
148
|
-
}
|
|
149
|
-
::-webkit-search-decoration {
|
|
150
|
-
-webkit-appearance: none;
|
|
151
|
-
}
|
|
152
|
-
::-webkit-date-and-time-value {
|
|
153
|
-
min-height: 1lh;
|
|
154
|
-
text-align: inherit;
|
|
155
|
-
}
|
|
156
|
-
::-webkit-datetime-edit {
|
|
157
|
-
display: inline-flex;
|
|
158
|
-
}
|
|
159
|
-
::-webkit-datetime-edit-fields-wrapper {
|
|
160
|
-
padding: 0;
|
|
161
|
-
}
|
|
162
|
-
::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
|
|
163
|
-
padding-block: 0;
|
|
164
|
-
}
|
|
165
|
-
::-webkit-calendar-picker-indicator {
|
|
166
|
-
line-height: 1;
|
|
167
|
-
}
|
|
168
|
-
:-moz-ui-invalid {
|
|
169
|
-
box-shadow: none;
|
|
170
|
-
}
|
|
171
|
-
button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
|
|
172
|
-
-webkit-appearance: button;
|
|
173
|
-
-moz-appearance: button;
|
|
174
|
-
appearance: button;
|
|
175
|
-
}
|
|
176
|
-
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
|
|
177
|
-
height: auto;
|
|
178
|
-
}
|
|
179
|
-
[hidden]:where(:not([hidden="until-found"])) {
|
|
180
|
-
display: none !important;
|
|
181
|
-
}
|
|
182
|
-
}
|
|
183
|
-
@layer utilities {
|
|
184
|
-
.contents {
|
|
185
|
-
display: contents;
|
|
186
|
-
}
|
|
187
|
-
.resize {
|
|
188
|
-
resize: both;
|
|
189
|
-
}
|
|
190
|
-
.truncate {
|
|
191
|
-
overflow: hidden;
|
|
192
|
-
text-overflow: ellipsis;
|
|
193
|
-
white-space: nowrap;
|
|
194
|
-
}
|
|
195
|
-
.rounded-md {
|
|
196
|
-
border-radius: var(--radius-md);
|
|
197
|
-
}
|
|
198
|
-
.bg-\[var\(--tuwa-color-primary\)\] {
|
|
199
|
-
background-color: var(--tuwa-color-primary);
|
|
200
|
-
}
|
|
201
|
-
.bg-red-500 {
|
|
202
|
-
background-color: var(--color-red-500);
|
|
203
|
-
}
|
|
204
|
-
.p-2 {
|
|
205
|
-
padding: calc(var(--spacing) * 2);
|
|
206
|
-
}
|
|
207
|
-
.p-4 {
|
|
208
|
-
padding: calc(var(--spacing) * 4);
|
|
209
|
-
}
|
|
210
|
-
.p-\[var\(--tuwa-spacing-md\)\] {
|
|
211
|
-
padding: var(--tuwa-spacing-md);
|
|
212
|
-
}
|
|
213
|
-
.px-4 {
|
|
214
|
-
padding-inline: calc(var(--spacing) * 4);
|
|
215
|
-
}
|
|
216
|
-
.py-2 {
|
|
217
|
-
padding-block: calc(var(--spacing) * 2);
|
|
218
|
-
}
|
|
219
|
-
.font-bold {
|
|
220
|
-
--tw-font-weight: var(--font-weight-bold);
|
|
221
|
-
font-weight: var(--font-weight-bold);
|
|
222
|
-
}
|
|
223
|
-
.font-semibold {
|
|
224
|
-
--tw-font-weight: var(--font-weight-semibold);
|
|
225
|
-
font-weight: var(--font-weight-semibold);
|
|
226
|
-
}
|
|
227
|
-
.text-\[var\(--tuwa-color-foreground\)\] {
|
|
228
|
-
color: var(--tuwa-color-foreground);
|
|
229
|
-
}
|
|
230
|
-
.text-white {
|
|
231
|
-
color: var(--color-white);
|
|
232
|
-
}
|
|
233
|
-
.transition-colors {
|
|
234
|
-
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
|
|
235
|
-
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
236
|
-
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
237
|
-
}
|
|
238
|
-
.hover\:opacity-90 {
|
|
239
|
-
&:hover {
|
|
240
|
-
@media (hover: hover) {
|
|
241
|
-
opacity: 90%;
|
|
242
|
-
}
|
|
243
|
-
}
|
|
244
|
-
}
|
|
245
|
-
}
|
|
246
1
|
:root {
|
|
247
|
-
--tuwa-success-bg:
|
|
248
|
-
--tuwa-success-text:
|
|
249
|
-
--tuwa-success-icon:
|
|
250
|
-
|
|
251
|
-
--tuwa-error-
|
|
252
|
-
--tuwa-error-
|
|
253
|
-
--tuwa-
|
|
254
|
-
|
|
255
|
-
--tuwa-pending-
|
|
256
|
-
--tuwa-
|
|
257
|
-
--tuwa-
|
|
258
|
-
|
|
259
|
-
--tuwa-
|
|
260
|
-
--tuwa-text
|
|
261
|
-
--tuwa-
|
|
262
|
-
|
|
263
|
-
--tuwa-text-
|
|
264
|
-
--tuwa-
|
|
265
|
-
--tuwa-
|
|
266
|
-
--tuwa-
|
|
267
|
-
--tuwa-
|
|
268
|
-
|
|
269
|
-
--tuwa-
|
|
270
|
-
--tuwa-
|
|
271
|
-
--tuwa-
|
|
272
|
-
|
|
2
|
+
--tuwa-success-bg: theme('colors.green.100');
|
|
3
|
+
--tuwa-success-text: theme('colors.green.700');
|
|
4
|
+
--tuwa-success-icon: theme('colors.green.500');
|
|
5
|
+
|
|
6
|
+
--tuwa-error-bg: theme('colors.red.100');
|
|
7
|
+
--tuwa-error-text: theme('colors.red.700');
|
|
8
|
+
--tuwa-error-icon: theme('colors.red.500');
|
|
9
|
+
|
|
10
|
+
--tuwa-pending-bg: theme('colors.yellow.100');
|
|
11
|
+
--tuwa-pending-text: theme('colors.yellow.800');
|
|
12
|
+
--tuwa-pending-icon: theme('colors.yellow.600');
|
|
13
|
+
|
|
14
|
+
--tuwa-info-bg: theme('colors.gray.100');
|
|
15
|
+
--tuwa-info-text: theme('colors.gray.600');
|
|
16
|
+
--tuwa-info-icon: theme('colors.gray.500');
|
|
17
|
+
|
|
18
|
+
--tuwa-text-primary: theme('colors.gray.900');
|
|
19
|
+
--tuwa-text-secondary: theme('colors.gray.500');
|
|
20
|
+
--tuwa-text-tertiary: theme('colors.gray.400');
|
|
21
|
+
--tuwa-text-accent: theme('colors.blue.600');
|
|
22
|
+
--tuwa-text-on-accent: theme('colors.white');
|
|
23
|
+
|
|
24
|
+
--tuwa-bg-primary: theme('colors.white');
|
|
25
|
+
--tuwa-bg-secondary: theme('colors.gray.50');
|
|
26
|
+
--tuwa-bg-muted: theme('colors.gray.100');
|
|
27
|
+
|
|
28
|
+
--tuwa-border-primary: theme('colors.gray.200');
|
|
29
|
+
--tuwa-border-secondary: theme('colors.gray.100');
|
|
30
|
+
|
|
31
|
+
--tuwa-button-gradient-from: theme('colors.blue.600');
|
|
32
|
+
--tuwa-button-gradient-to: theme('colors.purple.600');
|
|
33
|
+
|
|
34
|
+
--tuwa-button-gradient-from-hover: theme('colors.blue.700');
|
|
35
|
+
--tuwa-button-gradient-to-hover: theme('colors.purple.700');
|
|
273
36
|
}
|
|
37
|
+
|
|
274
38
|
.dark {
|
|
275
|
-
--tuwa-success-bg:
|
|
276
|
-
--tuwa-success-text:
|
|
277
|
-
--tuwa-success-icon:
|
|
278
|
-
|
|
279
|
-
--tuwa-error-
|
|
280
|
-
--tuwa-error-
|
|
281
|
-
--tuwa-
|
|
282
|
-
|
|
283
|
-
--tuwa-pending-
|
|
284
|
-
--tuwa-
|
|
285
|
-
--tuwa-
|
|
286
|
-
|
|
287
|
-
--tuwa-
|
|
288
|
-
--tuwa-text
|
|
289
|
-
--tuwa-
|
|
290
|
-
|
|
291
|
-
--tuwa-text-
|
|
292
|
-
--tuwa-
|
|
293
|
-
--tuwa-
|
|
294
|
-
--tuwa-
|
|
295
|
-
--tuwa-
|
|
296
|
-
|
|
297
|
-
--tuwa-
|
|
298
|
-
--tuwa-
|
|
299
|
-
--tuwa-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
--tw-font-weight: initial;
|
|
310
|
-
}
|
|
311
|
-
}
|
|
39
|
+
--tuwa-success-bg: theme('colors.green.900');
|
|
40
|
+
--tuwa-success-text: theme('colors.green.300');
|
|
41
|
+
--tuwa-success-icon: theme('colors.green.400');
|
|
42
|
+
|
|
43
|
+
--tuwa-error-bg: theme('colors.red.900');
|
|
44
|
+
--tuwa-error-text: theme('colors.red.300');
|
|
45
|
+
--tuwa-error-icon: theme('colors.red.400');
|
|
46
|
+
|
|
47
|
+
--tuwa-pending-bg: theme('colors.yellow.900');
|
|
48
|
+
--tuwa-pending-text: theme('colors.yellow.300');
|
|
49
|
+
--tuwa-pending-icon: theme('colors.yellow.400');
|
|
50
|
+
|
|
51
|
+
--tuwa-info-bg: theme('colors.gray.700');
|
|
52
|
+
--tuwa-info-text: theme('colors.gray.300');
|
|
53
|
+
--tuwa-info-icon: theme('colors.gray.400');
|
|
54
|
+
|
|
55
|
+
--tuwa-text-primary: theme('colors.gray.50');
|
|
56
|
+
--tuwa-text-secondary: theme('colors.gray.400');
|
|
57
|
+
--tuwa-text-tertiary: theme('colors.gray.500');
|
|
58
|
+
--tuwa-text-accent: theme('colors.blue.400');
|
|
59
|
+
--tuwa-text-on-accent: theme('colors.white');
|
|
60
|
+
|
|
61
|
+
--tuwa-bg-primary: theme('colors.gray.900');
|
|
62
|
+
--tuwa-bg-secondary: theme('colors.gray.800');
|
|
63
|
+
--tuwa-bg-muted: theme('colors.gray.700');
|
|
64
|
+
|
|
65
|
+
--tuwa-border-primary: theme('colors.gray.700');
|
|
66
|
+
--tuwa-border-secondary: theme('colors.gray.800');
|
|
67
|
+
|
|
68
|
+
--tuwa-button-gradient-from: theme('colors.blue.500');
|
|
69
|
+
--tuwa-button-gradient-to: theme('colors.purple.500');
|
|
70
|
+
|
|
71
|
+
--tuwa-button-gradient-from-hover: theme('colors.blue.600');
|
|
72
|
+
--tuwa-button-gradient-to-hover: theme('colors.purple.600');
|
|
312
73
|
}
|