@tuwaio/nova-core 0.0.6 → 1.0.0-alpha.1.72f68be

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.
Files changed (3) hide show
  1. package/README.md +2 -52
  2. package/dist/index.css +69 -308
  3. 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
- ### Basic Usage (Without `tailwind.config.js`)
42
+ ### Usage
44
43
 
45
- With Tailwind CSS v4, you can use the CSS variables from this package directly in your className as arbitrary values. A `tailwind.config.js` file is not required for this to work.
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: oklch(96.2% 0.044 156.743);
248
- --tuwa-success-text: oklch(52.7% 0.154 150.069);
249
- --tuwa-success-icon: oklch(72.3% 0.219 149.579);
250
- --tuwa-error-bg: oklch(93.6% 0.032 17.717);
251
- --tuwa-error-text: oklch(50.5% 0.213 27.518);
252
- --tuwa-error-icon: oklch(63.7% 0.237 25.331);
253
- --tuwa-pending-bg: oklch(97.3% 0.071 103.193);
254
- --tuwa-pending-text: oklch(47.6% 0.114 61.907);
255
- --tuwa-pending-icon: oklch(68.1% 0.162 75.834);
256
- --tuwa-info-bg: oklch(96.7% 0.003 264.542);
257
- --tuwa-info-text: oklch(44.6% 0.03 256.802);
258
- --tuwa-info-icon: oklch(55.1% 0.027 264.364);
259
- --tuwa-text-primary: oklch(21% 0.034 264.665);
260
- --tuwa-text-secondary: oklch(55.1% 0.027 264.364);
261
- --tuwa-text-tertiary: oklch(70.7% 0.022 261.325);
262
- --tuwa-text-accent: oklch(54.6% 0.245 262.881);
263
- --tuwa-text-on-accent: #fff;
264
- --tuwa-bg-primary: #fff;
265
- --tuwa-bg-secondary: oklch(98.5% 0.002 247.839);
266
- --tuwa-bg-muted: oklch(96.7% 0.003 264.542);
267
- --tuwa-border-primary: oklch(92.8% 0.006 264.531);
268
- --tuwa-border-secondary: oklch(96.7% 0.003 264.542);
269
- --tuwa-button-gradient-from: oklch(54.6% 0.245 262.881);
270
- --tuwa-button-gradient-to: oklch(55.8% 0.288 302.321);
271
- --tuwa-button-gradient-from-hover: oklch(48.8% 0.243 264.376);
272
- --tuwa-button-gradient-to-hover: oklch(49.6% 0.265 301.924);
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: oklch(39.3% 0.095 152.535);
276
- --tuwa-success-text: oklch(87.1% 0.15 154.449);
277
- --tuwa-success-icon: oklch(79.2% 0.209 151.711);
278
- --tuwa-error-bg: oklch(39.6% 0.141 25.723);
279
- --tuwa-error-text: oklch(80.8% 0.114 19.571);
280
- --tuwa-error-icon: oklch(70.4% 0.191 22.216);
281
- --tuwa-pending-bg: oklch(42.1% 0.095 57.708);
282
- --tuwa-pending-text: oklch(90.5% 0.182 98.111);
283
- --tuwa-pending-icon: oklch(85.2% 0.199 91.936);
284
- --tuwa-info-bg: oklch(37.3% 0.034 259.733);
285
- --tuwa-info-text: oklch(87.2% 0.01 258.338);
286
- --tuwa-info-icon: oklch(70.7% 0.022 261.325);
287
- --tuwa-text-primary: oklch(98.5% 0.002 247.839);
288
- --tuwa-text-secondary: oklch(70.7% 0.022 261.325);
289
- --tuwa-text-tertiary: oklch(55.1% 0.027 264.364);
290
- --tuwa-text-accent: oklch(70.7% 0.165 254.624);
291
- --tuwa-text-on-accent: #fff;
292
- --tuwa-bg-primary: oklch(21% 0.034 264.665);
293
- --tuwa-bg-secondary: oklch(27.8% 0.033 256.848);
294
- --tuwa-bg-muted: oklch(37.3% 0.034 259.733);
295
- --tuwa-border-primary: oklch(37.3% 0.034 259.733);
296
- --tuwa-border-secondary: oklch(27.8% 0.033 256.848);
297
- --tuwa-button-gradient-from: oklch(62.3% 0.214 259.815);
298
- --tuwa-button-gradient-to: oklch(62.7% 0.265 303.9);
299
- --tuwa-button-gradient-from-hover: oklch(54.6% 0.245 262.881);
300
- --tuwa-button-gradient-to-hover: oklch(55.8% 0.288 302.321);
301
- }
302
- @property --tw-font-weight {
303
- syntax: "*";
304
- inherits: false;
305
- }
306
- @layer properties {
307
- @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
308
- *, ::before, ::after, ::backdrop {
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
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tuwaio/nova-core",
3
- "version": "0.0.6",
3
+ "version": "1.0.0-alpha.1.72f68be",
4
4
  "private": false,
5
5
  "author": "Oleksandr Tkach",
6
6
  "license": "Apache-2.0",