@nuvia/tokens 0.6.0 → 1.1.0
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 +145 -18
- package/dist/styles/globals.css +20 -138
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @nuvia/tokens
|
|
2
2
|
|
|
3
|
-
Design tokens and CSS variables for the Nuvia Design System.
|
|
3
|
+
Design tokens and CSS variables for the Nuvia Design System. This package provides the foundational styling layer for Tailwind CSS v4.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
@@ -10,42 +10,169 @@ pnpm add @nuvia/tokens
|
|
|
10
10
|
|
|
11
11
|
## Usage
|
|
12
12
|
|
|
13
|
-
###
|
|
13
|
+
### Full Design System (Recommended)
|
|
14
|
+
|
|
15
|
+
If you're using `@nuvia/components`, you don't need to install this package separately—it's included automatically:
|
|
16
|
+
|
|
17
|
+
```css
|
|
18
|
+
@import "tailwindcss";
|
|
19
|
+
@import "@nuvia/components/styles/globals.css";
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
### Tokens Only (Without Components)
|
|
23
|
+
|
|
24
|
+
For apps that only need design tokens without React components:
|
|
14
25
|
|
|
15
|
-
|
|
26
|
+
```css
|
|
27
|
+
/* globals.css */
|
|
28
|
+
@import "tailwindcss";
|
|
29
|
+
@import "@nuvia/tokens/styles/globals.css";
|
|
30
|
+
|
|
31
|
+
@config "./tailwind.config.ts";
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
## Framework Setup
|
|
35
|
+
|
|
36
|
+
### Vite
|
|
37
|
+
|
|
38
|
+
```bash
|
|
39
|
+
pnpm add -D @tailwindcss/vite
|
|
40
|
+
```
|
|
16
41
|
|
|
17
42
|
```typescript
|
|
18
|
-
|
|
43
|
+
// vite.config.ts
|
|
44
|
+
import tailwindcss from "@tailwindcss/vite";
|
|
45
|
+
import { defineConfig } from "vite";
|
|
46
|
+
|
|
47
|
+
export default defineConfig({
|
|
48
|
+
plugins: [tailwindcss()],
|
|
49
|
+
});
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
### Next.js / PostCSS
|
|
53
|
+
|
|
54
|
+
```bash
|
|
55
|
+
pnpm add -D @tailwindcss/postcss
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
```javascript
|
|
59
|
+
// postcss.config.mjs
|
|
60
|
+
const config = {
|
|
61
|
+
plugins: {
|
|
62
|
+
"@tailwindcss/postcss": {},
|
|
63
|
+
},
|
|
64
|
+
};
|
|
65
|
+
export default config;
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
## What's Included
|
|
69
|
+
|
|
70
|
+
### Tailwind v4 Theme Registration
|
|
71
|
+
|
|
72
|
+
The CSS file includes `@theme inline` which registers all design tokens as Tailwind utilities:
|
|
73
|
+
|
|
74
|
+
```css
|
|
75
|
+
@theme inline {
|
|
76
|
+
--color-background: hsl(var(--background));
|
|
77
|
+
--color-primary: hsl(var(--primary));
|
|
78
|
+
--color-muted: hsl(var(--muted));
|
|
79
|
+
/* ... all semantic colors */
|
|
80
|
+
}
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
This enables classes like `bg-muted`, `text-primary`, `border-accent` to work automatically.
|
|
84
|
+
|
|
85
|
+
### CSS Variables
|
|
86
|
+
|
|
87
|
+
All design tokens are available as CSS variables in both light and dark themes:
|
|
88
|
+
|
|
89
|
+
```css
|
|
90
|
+
:root {
|
|
91
|
+
--background: 0 0% 100%;
|
|
92
|
+
--foreground: 240 10% 4%;
|
|
93
|
+
--primary: 228 45% 55%;
|
|
94
|
+
/* ... */
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.dark {
|
|
98
|
+
--background: 240 10% 4%;
|
|
99
|
+
--foreground: 0 0% 98%;
|
|
100
|
+
/* ... */
|
|
101
|
+
}
|
|
19
102
|
```
|
|
20
103
|
|
|
21
|
-
###
|
|
104
|
+
### Dark Mode Support
|
|
105
|
+
|
|
106
|
+
Includes the Tailwind v4 dark mode variant:
|
|
107
|
+
|
|
108
|
+
```css
|
|
109
|
+
@custom-variant dark (&:is(.dark *));
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
### Utility Classes
|
|
113
|
+
|
|
114
|
+
Pre-built utility classes:
|
|
115
|
+
|
|
116
|
+
- `.flex-center`, `.flex-center-col`, `.flex-center-row`
|
|
117
|
+
- Typography tokens: `.token-font-heading-1` through `.token-font-minimum`
|
|
118
|
+
- Gradients: `.nuvia-gradient-1`, `.nuvia-gradient-2`, `.marketing-gradient`
|
|
119
|
+
- Fade gradients: `.fade-in-gradient-to-t/b/r/l`
|
|
120
|
+
|
|
121
|
+
## JavaScript Tokens
|
|
122
|
+
|
|
123
|
+
Access color values programmatically:
|
|
22
124
|
|
|
23
125
|
```typescript
|
|
24
126
|
import { colors } from "@nuvia/tokens";
|
|
25
127
|
|
|
26
|
-
// Access color values
|
|
27
128
|
console.log(colors.zafiro[500]); // "228 45% 55%"
|
|
129
|
+
console.log(colors.lumen[400]); // "153 100% 45%"
|
|
28
130
|
```
|
|
29
131
|
|
|
30
132
|
## Color Palette
|
|
31
133
|
|
|
32
134
|
### Brand Colors
|
|
33
135
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
136
|
+
| Name | Description | Shades |
|
|
137
|
+
|------|-------------|--------|
|
|
138
|
+
| **Zafiro** | Primary brand blue | 100-800 |
|
|
139
|
+
| **Madrugada** | Secondary purple-blue | 100-800 |
|
|
140
|
+
| **Nimbus** | Neutral accent | 200-600 |
|
|
141
|
+
| **Indigo** | Accent blue | 100-800 |
|
|
142
|
+
| **Lumen** | Success/positive green | 100-800 |
|
|
143
|
+
| **Lilas** | Purple accent | 100-800 |
|
|
144
|
+
| **Magenta** | Marketing pink | 100-800 |
|
|
145
|
+
| **Magma** | Warning orange | 100-800 |
|
|
42
146
|
|
|
43
147
|
### Support Colors
|
|
44
148
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
149
|
+
| Name | Description | Shades |
|
|
150
|
+
|------|-------------|--------|
|
|
151
|
+
| **Light** | Neutral light tones | 100-700 |
|
|
152
|
+
| **Dark** | Neutral dark tones | 100-700 |
|
|
153
|
+
| **Error** | Destructive red | 100-700 |
|
|
48
154
|
|
|
49
155
|
## Theming
|
|
50
156
|
|
|
51
|
-
|
|
157
|
+
Toggle themes by adding/removing the `dark` class on `<html>`:
|
|
158
|
+
|
|
159
|
+
```javascript
|
|
160
|
+
// Enable dark mode
|
|
161
|
+
document.documentElement.classList.add("dark");
|
|
162
|
+
|
|
163
|
+
// Enable light mode
|
|
164
|
+
document.documentElement.classList.remove("dark");
|
|
165
|
+
|
|
166
|
+
// Toggle
|
|
167
|
+
document.documentElement.classList.toggle("dark");
|
|
168
|
+
```
|
|
169
|
+
|
|
170
|
+
## Using with @nuvia/tailwind-config
|
|
171
|
+
|
|
172
|
+
For the complete Tailwind configuration including plugins and extended theme:
|
|
173
|
+
|
|
174
|
+
```bash
|
|
175
|
+
pnpm add @nuvia/tailwind-config
|
|
176
|
+
```
|
|
177
|
+
|
|
178
|
+
See [@nuvia/tailwind-config README](../tailwind-config/README.md) for setup.
|
package/dist/styles/globals.css
CHANGED
|
@@ -1,77 +1,55 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Nuvia Design System - Global Tokens
|
|
3
3
|
*
|
|
4
|
-
* This file provides
|
|
5
|
-
*
|
|
4
|
+
* This file provides CSS variables for theming (light/dark modes).
|
|
5
|
+
* Tailwind theme configuration is handled by @nuvia/tailwind-config.
|
|
6
6
|
*
|
|
7
7
|
* Usage in consumer apps:
|
|
8
|
-
* @
|
|
9
|
-
*
|
|
8
|
+
* 1. Create tailwind.config.ts extending @nuvia/tailwind-config
|
|
9
|
+
* 2. In your CSS:
|
|
10
|
+
* @config "./tailwind.config.ts";
|
|
11
|
+
* @import "tailwindcss";
|
|
12
|
+
* @import "@nuvia/tokens/styles/globals.css";
|
|
10
13
|
*/
|
|
11
14
|
|
|
12
15
|
/* Dark mode variant for Tailwind v4 */
|
|
13
16
|
@custom-variant dark (&:is(.dark *));
|
|
14
17
|
|
|
15
18
|
/* ============================================
|
|
16
|
-
|
|
17
|
-
|
|
19
|
+
TAILWIND V4 THEME REGISTRATION
|
|
20
|
+
Register custom colors as theme values so they
|
|
21
|
+
work with utility classes like bg-*, text-*, etc.
|
|
18
22
|
============================================ */
|
|
19
23
|
@theme inline {
|
|
20
|
-
/*
|
|
21
|
-
--radius-sm: calc(var(--radius) - 4px);
|
|
22
|
-
--radius-md: calc(var(--radius) - 2px);
|
|
23
|
-
--radius-lg: var(--radius);
|
|
24
|
-
--radius-xl: calc(var(--radius) + 4px);
|
|
25
|
-
|
|
26
|
-
/* Base colors */
|
|
24
|
+
/* Semantic colors - these become utilities like bg-muted, text-primary, etc. */
|
|
27
25
|
--color-background: hsl(var(--background));
|
|
28
26
|
--color-foreground: hsl(var(--foreground));
|
|
29
|
-
|
|
30
|
-
/* Card */
|
|
31
27
|
--color-card: hsl(var(--card));
|
|
32
28
|
--color-card-foreground: hsl(var(--card-foreground));
|
|
33
|
-
|
|
34
|
-
/* Popover */
|
|
35
29
|
--color-popover: hsl(var(--popover));
|
|
36
30
|
--color-popover-foreground: hsl(var(--popover-foreground));
|
|
37
|
-
|
|
38
|
-
/* Primary */
|
|
39
31
|
--color-primary: hsl(var(--primary));
|
|
40
32
|
--color-primary-foreground: hsl(var(--primary-foreground));
|
|
41
|
-
|
|
42
|
-
/* Secondary */
|
|
43
33
|
--color-secondary: hsl(var(--secondary));
|
|
44
34
|
--color-secondary-foreground: hsl(var(--secondary-foreground));
|
|
45
|
-
|
|
46
|
-
/* Muted */
|
|
47
35
|
--color-muted: hsl(var(--muted));
|
|
48
36
|
--color-muted-foreground: hsl(var(--muted-foreground));
|
|
49
|
-
|
|
50
|
-
/* Accent */
|
|
51
37
|
--color-accent: hsl(var(--accent));
|
|
52
38
|
--color-accent-foreground: hsl(var(--accent-foreground));
|
|
53
|
-
|
|
54
|
-
/* Destructive */
|
|
55
39
|
--color-destructive: hsl(var(--destructive));
|
|
56
40
|
--color-destructive-foreground: hsl(var(--destructive-foreground));
|
|
41
|
+
--color-border: hsl(var(--border));
|
|
42
|
+
--color-input: hsl(var(--input));
|
|
43
|
+
--color-ring: hsl(var(--ring));
|
|
57
44
|
|
|
58
|
-
/* Success */
|
|
45
|
+
/* Success, Warning, Danger */
|
|
59
46
|
--color-success: hsl(var(--success));
|
|
60
47
|
--color-success-foreground: hsl(var(--success-foreground));
|
|
61
|
-
|
|
62
|
-
/* Warning */
|
|
63
48
|
--color-warning: hsl(var(--warning));
|
|
64
49
|
--color-warning-foreground: hsl(var(--warning-foreground));
|
|
65
|
-
|
|
66
|
-
/* Danger */
|
|
67
50
|
--color-danger: hsl(var(--danger));
|
|
68
51
|
--color-danger-foreground: hsl(var(--danger-foreground));
|
|
69
52
|
|
|
70
|
-
/* Border, Input, Ring */
|
|
71
|
-
--color-border: hsl(var(--border));
|
|
72
|
-
--color-input: hsl(var(--input));
|
|
73
|
-
--color-ring: hsl(var(--ring));
|
|
74
|
-
|
|
75
53
|
/* Sidebar */
|
|
76
54
|
--color-sidebar: hsl(var(--sidebar-background));
|
|
77
55
|
--color-sidebar-foreground: hsl(var(--sidebar-foreground));
|
|
@@ -89,107 +67,11 @@
|
|
|
89
67
|
--color-chart-4: hsl(var(--chart-4));
|
|
90
68
|
--color-chart-5: hsl(var(--chart-5));
|
|
91
69
|
|
|
92
|
-
/*
|
|
93
|
-
--
|
|
94
|
-
--
|
|
95
|
-
--
|
|
96
|
-
--
|
|
97
|
-
--color-nuvia-zafiro-500: hsl(var(--color-zafiro-500));
|
|
98
|
-
--color-nuvia-zafiro-600: hsl(var(--color-zafiro-600));
|
|
99
|
-
--color-nuvia-zafiro-700: hsl(var(--color-zafiro-700));
|
|
100
|
-
--color-nuvia-zafiro-800: hsl(var(--color-zafiro-800));
|
|
101
|
-
|
|
102
|
-
/* Nuvia Brand Colors - Madrugada */
|
|
103
|
-
--color-nuvia-madrugada-100: hsl(var(--color-madrugada-100));
|
|
104
|
-
--color-nuvia-madrugada-200: hsl(var(--color-madrugada-200));
|
|
105
|
-
--color-nuvia-madrugada-300: hsl(var(--color-madrugada-300));
|
|
106
|
-
--color-nuvia-madrugada-400: hsl(var(--color-madrugada-400));
|
|
107
|
-
--color-nuvia-madrugada-500: hsl(var(--color-madrugada-500));
|
|
108
|
-
--color-nuvia-madrugada-600: hsl(var(--color-madrugada-600));
|
|
109
|
-
--color-nuvia-madrugada-700: hsl(var(--color-madrugada-700));
|
|
110
|
-
--color-nuvia-madrugada-800: hsl(var(--color-madrugada-800));
|
|
111
|
-
|
|
112
|
-
/* Nuvia Brand Colors - Nimbus */
|
|
113
|
-
--color-nuvia-nimbus-200: hsl(var(--color-nimbus-200));
|
|
114
|
-
--color-nuvia-nimbus-300: hsl(var(--color-nimbus-300));
|
|
115
|
-
--color-nuvia-nimbus-400: hsl(var(--color-nimbus-400));
|
|
116
|
-
--color-nuvia-nimbus-500: hsl(var(--color-nimbus-500));
|
|
117
|
-
--color-nuvia-nimbus-600: hsl(var(--color-nimbus-600));
|
|
118
|
-
|
|
119
|
-
/* Nuvia Brand Colors - Indigo */
|
|
120
|
-
--color-nuvia-indigo-100: hsl(var(--color-indigo-100));
|
|
121
|
-
--color-nuvia-indigo-200: hsl(var(--color-indigo-200));
|
|
122
|
-
--color-nuvia-indigo-300: hsl(var(--color-indigo-300));
|
|
123
|
-
--color-nuvia-indigo-400: hsl(var(--color-indigo-400));
|
|
124
|
-
--color-nuvia-indigo-500: hsl(var(--color-indigo-500));
|
|
125
|
-
--color-nuvia-indigo-600: hsl(var(--color-indigo-600));
|
|
126
|
-
--color-nuvia-indigo-700: hsl(var(--color-indigo-700));
|
|
127
|
-
--color-nuvia-indigo-800: hsl(var(--color-indigo-800));
|
|
128
|
-
|
|
129
|
-
/* Nuvia Brand Colors - Lumen */
|
|
130
|
-
--color-nuvia-lumen-100: hsl(var(--color-lumen-100));
|
|
131
|
-
--color-nuvia-lumen-200: hsl(var(--color-lumen-200));
|
|
132
|
-
--color-nuvia-lumen-300: hsl(var(--color-lumen-300));
|
|
133
|
-
--color-nuvia-lumen-400: hsl(var(--color-lumen-400));
|
|
134
|
-
--color-nuvia-lumen-500: hsl(var(--color-lumen-500));
|
|
135
|
-
--color-nuvia-lumen-600: hsl(var(--color-lumen-600));
|
|
136
|
-
--color-nuvia-lumen-700: hsl(var(--color-lumen-700));
|
|
137
|
-
--color-nuvia-lumen-800: hsl(var(--color-lumen-800));
|
|
138
|
-
|
|
139
|
-
/* Nuvia Brand Colors - Lilas */
|
|
140
|
-
--color-nuvia-lilas-100: hsl(var(--color-lilas-100));
|
|
141
|
-
--color-nuvia-lilas-200: hsl(var(--color-lilas-200));
|
|
142
|
-
--color-nuvia-lilas-300: hsl(var(--color-lilas-300));
|
|
143
|
-
--color-nuvia-lilas-400: hsl(var(--color-lilas-400));
|
|
144
|
-
--color-nuvia-lilas-500: hsl(var(--color-lilas-500));
|
|
145
|
-
--color-nuvia-lilas-600: hsl(var(--color-lilas-600));
|
|
146
|
-
--color-nuvia-lilas-700: hsl(var(--color-lilas-700));
|
|
147
|
-
--color-nuvia-lilas-800: hsl(var(--color-lilas-800));
|
|
148
|
-
|
|
149
|
-
/* Nuvia Brand Colors - Magenta */
|
|
150
|
-
--color-nuvia-magenta-100: hsl(var(--color-magenta-100));
|
|
151
|
-
--color-nuvia-magenta-200: hsl(var(--color-magenta-200));
|
|
152
|
-
--color-nuvia-magenta-300: hsl(var(--color-magenta-300));
|
|
153
|
-
--color-nuvia-magenta-400: hsl(var(--color-magenta-400));
|
|
154
|
-
--color-nuvia-magenta-500: hsl(var(--color-magenta-500));
|
|
155
|
-
--color-nuvia-magenta-600: hsl(var(--color-magenta-600));
|
|
156
|
-
--color-nuvia-magenta-700: hsl(var(--color-magenta-700));
|
|
157
|
-
--color-nuvia-magenta-800: hsl(var(--color-magenta-800));
|
|
158
|
-
|
|
159
|
-
/* Nuvia Brand Colors - Magma */
|
|
160
|
-
--color-nuvia-magma-100: hsl(var(--color-magma-100));
|
|
161
|
-
--color-nuvia-magma-200: hsl(var(--color-magma-200));
|
|
162
|
-
--color-nuvia-magma-300: hsl(var(--color-magma-300));
|
|
163
|
-
--color-nuvia-magma-400: hsl(var(--color-magma-400));
|
|
164
|
-
--color-nuvia-magma-500: hsl(var(--color-magma-500));
|
|
165
|
-
--color-nuvia-magma-600: hsl(var(--color-magma-600));
|
|
166
|
-
--color-nuvia-magma-700: hsl(var(--color-magma-700));
|
|
167
|
-
--color-nuvia-magma-800: hsl(var(--color-magma-800));
|
|
168
|
-
|
|
169
|
-
/* Support Colors - Light */
|
|
170
|
-
--color-light-100: hsl(var(--color-light-100));
|
|
171
|
-
--color-light-200: hsl(var(--color-light-200));
|
|
172
|
-
--color-light-300: hsl(var(--color-light-300));
|
|
173
|
-
--color-light-400: hsl(var(--color-light-400));
|
|
174
|
-
--color-light-500: hsl(var(--color-light-500));
|
|
175
|
-
--color-light-600: hsl(var(--color-light-600));
|
|
176
|
-
--color-light-700: hsl(var(--color-light-700));
|
|
177
|
-
|
|
178
|
-
/* Support Colors - Dark */
|
|
179
|
-
--color-dark-100: hsl(var(--color-dark-100));
|
|
180
|
-
--color-dark-200: hsl(var(--color-dark-200));
|
|
181
|
-
--color-dark-300: hsl(var(--color-dark-300));
|
|
182
|
-
--color-dark-400: hsl(var(--color-dark-400));
|
|
183
|
-
--color-dark-500: hsl(var(--color-dark-500));
|
|
184
|
-
--color-dark-600: hsl(var(--color-dark-600));
|
|
185
|
-
--color-dark-700: hsl(var(--color-dark-700));
|
|
186
|
-
|
|
187
|
-
/* Support Colors - Error */
|
|
188
|
-
--color-error-100: hsl(var(--color-error-100));
|
|
189
|
-
--color-error-200: hsl(var(--color-error-200));
|
|
190
|
-
--color-error-300: hsl(var(--color-error-300));
|
|
191
|
-
--color-error-500: hsl(var(--color-error-500));
|
|
192
|
-
--color-error-700: hsl(var(--color-error-700));
|
|
70
|
+
/* Border radius */
|
|
71
|
+
--radius-sm: calc(var(--radius) - 4px);
|
|
72
|
+
--radius-md: calc(var(--radius) - 2px);
|
|
73
|
+
--radius-lg: var(--radius);
|
|
74
|
+
--radius-xl: calc(var(--radius) + 4px);
|
|
193
75
|
}
|
|
194
76
|
|
|
195
77
|
/* ============================================
|