@artivism/tailwind-preset 0.1.1 → 0.2.1
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 +52 -0
- package/package.json +14 -4
- package/utilities.css +266 -0
package/README.md
ADDED
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
# @artivism/tailwind-preset
|
|
2
|
+
|
|
3
|
+
Tailwind v4 CSS utilities for the Artivism Design System.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @artivism/tailwind-preset
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
### Tailwind v4 (CSS mode)
|
|
14
|
+
|
|
15
|
+
Import directly in your `globals.css`:
|
|
16
|
+
|
|
17
|
+
```css
|
|
18
|
+
@import "tailwindcss";
|
|
19
|
+
@import "@artivism/tokens/dist/index.css";
|
|
20
|
+
@import "@artivism/tailwind-preset";
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
### Tailwind v3 (Config mode - Legacy)
|
|
24
|
+
|
|
25
|
+
Use the v3 export in your `tailwind.config.ts`:
|
|
26
|
+
|
|
27
|
+
```ts
|
|
28
|
+
import preset from "@artivism/tailwind-preset/v3";
|
|
29
|
+
|
|
30
|
+
export default {
|
|
31
|
+
presets: [preset],
|
|
32
|
+
// your config
|
|
33
|
+
};
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
## Included Utilities
|
|
37
|
+
|
|
38
|
+
This preset provides utility classes for:
|
|
39
|
+
|
|
40
|
+
- **Background colors**: `.bg-primary`, `.bg-secondary`, `.bg-accent`, etc.
|
|
41
|
+
- **Text colors**: `.text-primary`, `.text-muted-foreground`, etc.
|
|
42
|
+
- **Border colors**: `.border-border`, `.border-ring`, etc.
|
|
43
|
+
- **Border radius**: `.rounded-full`, `.rounded-xl`, `.rounded-lg`, etc.
|
|
44
|
+
- **Hover states**: `.hover:bg-primary/90`, `.hover:text-accent-foreground`, etc.
|
|
45
|
+
- **Focus states**: `.focus-visible:ring-ring/50`, etc.
|
|
46
|
+
|
|
47
|
+
All utilities use CSS variables from `@artivism/tokens`.
|
|
48
|
+
|
|
49
|
+
## Version
|
|
50
|
+
|
|
51
|
+
- **v0.2.0+**: Tailwind v4 CSS utilities (default export)
|
|
52
|
+
- **v0.1.x**: Tailwind v3 config preset (available at `/v3` export)
|
package/package.json
CHANGED
|
@@ -1,12 +1,22 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@artivism/tailwind-preset",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"description": "Tailwind
|
|
3
|
+
"version": "0.2.1",
|
|
4
|
+
"description": "Tailwind v4 CSS utilities for Artivism Design System",
|
|
5
5
|
"license": "MIT",
|
|
6
|
-
"main": "./
|
|
6
|
+
"main": "./utilities.css",
|
|
7
|
+
"style": "./utilities.css",
|
|
7
8
|
"files": [
|
|
9
|
+
"utilities.css",
|
|
8
10
|
"index.js"
|
|
9
11
|
],
|
|
12
|
+
"exports": {
|
|
13
|
+
".": {
|
|
14
|
+
"default": "./utilities.css"
|
|
15
|
+
},
|
|
16
|
+
"./v3": {
|
|
17
|
+
"default": "./index.js"
|
|
18
|
+
}
|
|
19
|
+
},
|
|
10
20
|
"publishConfig": {
|
|
11
21
|
"access": "public"
|
|
12
22
|
},
|
|
@@ -21,4 +31,4 @@
|
|
|
21
31
|
"test": "node -e \"process.exit(0)\"",
|
|
22
32
|
"build": "node -e \"require('fs').mkdirSync('dist',{recursive:true});require('fs').writeFileSync('dist/.keep','');\""
|
|
23
33
|
}
|
|
24
|
-
}
|
|
34
|
+
}
|
package/utilities.css
ADDED
|
@@ -0,0 +1,266 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @artivism/tailwind-preset - Tailwind v4 CSS Utilities
|
|
3
|
+
*
|
|
4
|
+
* Comprehensive utility classes for Artivism Design System
|
|
5
|
+
* Compatible with Tailwind v4 CSS mode (@import "tailwindcss")
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
@layer utilities {
|
|
9
|
+
|
|
10
|
+
/* ========================================
|
|
11
|
+
BACKGROUND COLORS
|
|
12
|
+
======================================== */
|
|
13
|
+
.bg-primary {
|
|
14
|
+
background-color: var(--primary);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.bg-primary-foreground {
|
|
18
|
+
background-color: var(--primary-foreground);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.bg-secondary {
|
|
22
|
+
background-color: var(--secondary);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.bg-secondary-foreground {
|
|
26
|
+
background-color: var(--secondary-foreground);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.bg-destructive {
|
|
30
|
+
background-color: var(--destructive);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.bg-muted {
|
|
34
|
+
background-color: var(--muted);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.bg-muted-foreground {
|
|
38
|
+
background-color: var(--muted-foreground);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.bg-accent {
|
|
42
|
+
background-color: var(--accent);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.bg-accent-foreground {
|
|
46
|
+
background-color: var(--accent-foreground);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.bg-card {
|
|
50
|
+
background-color: var(--card);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.bg-background {
|
|
54
|
+
background-color: var(--background);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.bg-input {
|
|
58
|
+
background-color: var(--input);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.bg-popover {
|
|
62
|
+
background-color: var(--popover);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
/* ========================================
|
|
66
|
+
TEXT COLORS
|
|
67
|
+
======================================== */
|
|
68
|
+
.text-primary {
|
|
69
|
+
color: var(--primary);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.text-primary-foreground {
|
|
73
|
+
color: var(--primary-foreground);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.text-secondary {
|
|
77
|
+
color: var(--secondary);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.text-secondary-foreground {
|
|
81
|
+
color: var(--secondary-foreground);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.text-destructive {
|
|
85
|
+
color: var(--destructive);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.text-muted-foreground {
|
|
89
|
+
color: var(--muted-foreground);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.text-accent-foreground {
|
|
93
|
+
color: var(--accent-foreground);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.text-card-foreground {
|
|
97
|
+
color: var(--card-foreground);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.text-foreground {
|
|
101
|
+
color: var(--foreground);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.text-popover-foreground {
|
|
105
|
+
color: var(--popover-foreground);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
/* ========================================
|
|
109
|
+
BORDER COLORS
|
|
110
|
+
======================================== */
|
|
111
|
+
.border-input {
|
|
112
|
+
border-color: var(--input);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.border-ring {
|
|
116
|
+
border-color: var(--ring);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.border-destructive {
|
|
120
|
+
border-color: var(--destructive);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.border-border {
|
|
124
|
+
border-color: var(--border);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.border-primary {
|
|
128
|
+
border-color: var(--primary);
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
/* ========================================
|
|
132
|
+
RING COLORS (for focus states)
|
|
133
|
+
======================================== */
|
|
134
|
+
.ring-ring {
|
|
135
|
+
--tw-ring-color: var(--ring);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.ring-destructive {
|
|
139
|
+
--tw-ring-color: var(--destructive);
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.ring-primary {
|
|
143
|
+
--tw-ring-color: var(--primary);
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
/* ========================================
|
|
147
|
+
BORDER RADIUS
|
|
148
|
+
======================================== */
|
|
149
|
+
.rounded-full {
|
|
150
|
+
border-radius: 9999px;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.rounded-2xl {
|
|
154
|
+
border-radius: calc(var(--radius) + 8px);
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.rounded-xl {
|
|
158
|
+
border-radius: calc(var(--radius) + 4px);
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.rounded-lg {
|
|
162
|
+
border-radius: var(--radius);
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.rounded-md {
|
|
166
|
+
border-radius: calc(var(--radius) - 2px);
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.rounded {
|
|
170
|
+
border-radius: calc(var(--radius) - 4px);
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.rounded-sm {
|
|
174
|
+
border-radius: calc(var(--radius) - 6px);
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.rounded-none {
|
|
178
|
+
border-radius: 0;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
/* ========================================
|
|
182
|
+
HOVER STATES - BACKGROUNDS
|
|
183
|
+
======================================== */
|
|
184
|
+
.hover\:bg-primary\/90:hover {
|
|
185
|
+
background-color: color-mix(in srgb, var(--primary) 90%, transparent);
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
.hover\:bg-secondary\/80:hover {
|
|
189
|
+
background-color: color-mix(in srgb, var(--secondary) 80%, transparent);
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.hover\:bg-secondary\/90:hover {
|
|
193
|
+
background-color: color-mix(in srgb, var(--secondary) 90%, transparent);
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
.hover\:bg-destructive\/90:hover {
|
|
197
|
+
background-color: color-mix(in srgb, var(--destructive) 90%, transparent);
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
.hover\:bg-accent:hover {
|
|
201
|
+
background-color: var(--accent);
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
.hover\:bg-muted:hover {
|
|
205
|
+
background-color: var(--muted);
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
/* ========================================
|
|
209
|
+
HOVER STATES - TEXT
|
|
210
|
+
======================================== */
|
|
211
|
+
.hover\:text-accent-foreground:hover {
|
|
212
|
+
color: var(--accent-foreground);
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
.hover\:text-primary:hover {
|
|
216
|
+
color: var(--primary);
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
.hover\:text-foreground:hover {
|
|
220
|
+
color: var(--foreground);
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
/* ========================================
|
|
224
|
+
FOCUS STATES
|
|
225
|
+
======================================== */
|
|
226
|
+
.focus-visible\:ring-ring\/50:focus-visible {
|
|
227
|
+
--tw-ring-color: color-mix(in srgb, var(--ring) 50%, transparent);
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
.focus-visible\:border-ring:focus-visible {
|
|
231
|
+
border-color: var(--ring);
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
/* ========================================
|
|
235
|
+
OPACITY MODIFIERS
|
|
236
|
+
======================================== */
|
|
237
|
+
.bg-muted\/50 {
|
|
238
|
+
background-color: color-mix(in srgb, var(--muted) 50%, transparent);
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
.bg-muted\/30 {
|
|
242
|
+
background-color: color-mix(in srgb, var(--muted) 30%, transparent);
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
.bg-input\/30 {
|
|
246
|
+
background-color: color-mix(in srgb, var(--input) 30%, transparent);
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
/* ========================================
|
|
250
|
+
OUTLINE (for accessibility)
|
|
251
|
+
======================================== */
|
|
252
|
+
.outline-ring\/50 {
|
|
253
|
+
outline-color: color-mix(in srgb, var(--ring) 50%, transparent);
|
|
254
|
+
}
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
/* Global resets */
|
|
258
|
+
@layer base {
|
|
259
|
+
a {
|
|
260
|
+
text-decoration: none;
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
a:hover {
|
|
264
|
+
text-decoration: none;
|
|
265
|
+
}
|
|
266
|
+
}
|