@nuvia/tokens 1.0.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.
Files changed (3) hide show
  1. package/README.md +145 -18
  2. package/dist/styles/globals.css +59 -0
  3. 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
- ### CSS Variables
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
- Import the global styles to get all CSS variables:
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
- import "@nuvia/tokens/styles/globals.css";
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
- ### JavaScript Tokens
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
- - **Zafiro** - Primary brand color (blue)
35
- - **Madrugada** - Secondary brand color (purple-blue)
36
- - **Nimbus** - Neutral accent
37
- - **Indigo** - Accent color
38
- - **Lumen** - Success/positive (green)
39
- - **Lilas** - Purple accent
40
- - **Magenta** - Marketing accent
41
- - **Magma** - Warning/orange
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
- - **Light** - Neutral light colors (100-700)
46
- - **Dark** - Neutral dark colors (100-700)
47
- - **Error** - Destructive colors
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
- The design system supports light and dark themes through CSS variables. Toggle between themes by adding/removing the `dark` class on the `<html>` element.
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
@@ -15,6 +15,65 @@
15
15
  /* Dark mode variant for Tailwind v4 */
16
16
  @custom-variant dark (&:is(.dark *));
17
17
 
18
+ /* ============================================
19
+ TAILWIND V4 THEME REGISTRATION
20
+ Register custom colors as theme values so they
21
+ work with utility classes like bg-*, text-*, etc.
22
+ ============================================ */
23
+ @theme inline {
24
+ /* Semantic colors - these become utilities like bg-muted, text-primary, etc. */
25
+ --color-background: hsl(var(--background));
26
+ --color-foreground: hsl(var(--foreground));
27
+ --color-card: hsl(var(--card));
28
+ --color-card-foreground: hsl(var(--card-foreground));
29
+ --color-popover: hsl(var(--popover));
30
+ --color-popover-foreground: hsl(var(--popover-foreground));
31
+ --color-primary: hsl(var(--primary));
32
+ --color-primary-foreground: hsl(var(--primary-foreground));
33
+ --color-secondary: hsl(var(--secondary));
34
+ --color-secondary-foreground: hsl(var(--secondary-foreground));
35
+ --color-muted: hsl(var(--muted));
36
+ --color-muted-foreground: hsl(var(--muted-foreground));
37
+ --color-accent: hsl(var(--accent));
38
+ --color-accent-foreground: hsl(var(--accent-foreground));
39
+ --color-destructive: hsl(var(--destructive));
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));
44
+
45
+ /* Success, Warning, Danger */
46
+ --color-success: hsl(var(--success));
47
+ --color-success-foreground: hsl(var(--success-foreground));
48
+ --color-warning: hsl(var(--warning));
49
+ --color-warning-foreground: hsl(var(--warning-foreground));
50
+ --color-danger: hsl(var(--danger));
51
+ --color-danger-foreground: hsl(var(--danger-foreground));
52
+
53
+ /* Sidebar */
54
+ --color-sidebar: hsl(var(--sidebar-background));
55
+ --color-sidebar-foreground: hsl(var(--sidebar-foreground));
56
+ --color-sidebar-primary: hsl(var(--sidebar-primary));
57
+ --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
58
+ --color-sidebar-accent: hsl(var(--sidebar-accent));
59
+ --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
60
+ --color-sidebar-border: hsl(var(--sidebar-border));
61
+ --color-sidebar-ring: hsl(var(--sidebar-ring));
62
+
63
+ /* Chart colors */
64
+ --color-chart-1: hsl(var(--chart-1));
65
+ --color-chart-2: hsl(var(--chart-2));
66
+ --color-chart-3: hsl(var(--chart-3));
67
+ --color-chart-4: hsl(var(--chart-4));
68
+ --color-chart-5: hsl(var(--chart-5));
69
+
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);
75
+ }
76
+
18
77
  /* ============================================
19
78
  CSS VARIABLES - BASE TOKENS
20
79
  ============================================ */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nuvia/tokens",
3
- "version": "1.0.0",
3
+ "version": "1.1.0",
4
4
  "type": "module",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",