@bcc-code/design-tokens 1.0.3 → 1.0.6

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.
@@ -0,0 +1,414 @@
1
+ // Generated PrimeVue preset
2
+ import { definePreset } from "@primeuix/themes";
3
+ import Aura from "@primeuix/themes/aura";
4
+
5
+ export const BCCPrimeVuePreset = definePreset(Aura, {
6
+ primitive: {
7
+ color: {
8
+ neutral: {
9
+ 0: "#ffffff",
10
+ 100: "#f7f8f9",
11
+ 200: "#f1f2f4",
12
+ 300: "#dcdfe4",
13
+ 400: "#b3b9c4",
14
+ 500: "#8590a2",
15
+ 600: "#758195",
16
+ 700: "#626f86",
17
+ 800: "#4b5668",
18
+ 900: "#374152",
19
+ 1000: "#282f3c",
20
+ 1100: "#1e242d"
21
+ },
22
+ "dark-neutral": {
23
+ 0: "#161a1d",
24
+ 100: "#1d2125",
25
+ 200: "#22272b",
26
+ 300: "#2c333a",
27
+ 400: "#454f59",
28
+ 500: "#596773",
29
+ 600: "#738496",
30
+ 700: "#8c9bab",
31
+ 800: "#9fadbc",
32
+ 900: "#b6c2cf",
33
+ 1000: "#c7d1db",
34
+ 1100: "#dee4ea"
35
+ },
36
+ bcc: {
37
+ 100: "#e6f2f1",
38
+ 200: "#d0e3e1",
39
+ 300: "#accbc8",
40
+ 400: "#73b2ac",
41
+ 500: "#2e9087",
42
+ 600: "#187b73",
43
+ 700: "#0e6962",
44
+ 800: "#004e48",
45
+ 900: "#003d39",
46
+ 1000: "#002320"
47
+ },
48
+ rust: {
49
+ 100: "#fcf6f4",
50
+ 200: "#f9ece7",
51
+ 300: "#f6dcd2",
52
+ 400: "#e9b29e",
53
+ 500: "#e29f87",
54
+ 600: "#d37f60",
55
+ 700: "#be6544",
56
+ 800: "#9f5236",
57
+ 900: "#844630",
58
+ 1000: "#4c271a"
59
+ },
60
+ red: {
61
+ 100: "#fcf4f4",
62
+ 200: "#fae7e6",
63
+ 300: "#f6d3d2",
64
+ 400: "#efb4b2",
65
+ 500: "#e38986",
66
+ 600: "#d5625e",
67
+ 700: "#c04642",
68
+ 800: "#ad3c38",
69
+ 900: "#86312e",
70
+ 1000: "#461716"
71
+ },
72
+ green: {
73
+ 100: "#f2fbf6",
74
+ 200: "#e2f6ea",
75
+ 300: "#c6ecd6",
76
+ 400: "#9adbb5",
77
+ 500: "#66c28d",
78
+ 600: "#40a56c",
79
+ 700: "#308957",
80
+ 800: "#296c47",
81
+ 900: "#25563b",
82
+ 1000: "#133925"
83
+ },
84
+ teal: {
85
+ 100: "#f1f9fa",
86
+ 200: "#dceff1",
87
+ 300: "#bde0e4",
88
+ 400: "#8fc9d1",
89
+ 500: "#5cabb7",
90
+ 600: "#3e8e9c",
91
+ 700: "#377483",
92
+ 800: "#32606c",
93
+ 900: "#2f505b",
94
+ 1000: "#1d353f"
95
+ },
96
+ sand: {
97
+ 100: "#f7f3ee",
98
+ 200: "#ede5da",
99
+ 300: "#dccfba",
100
+ 400: "#c5b191",
101
+ 500: "#ae966d",
102
+ 600: "#937b4f",
103
+ 700: "#74613c",
104
+ 800: "#5a4d31",
105
+ 900: "#49402b",
106
+ 1000: "#3c3420"
107
+ },
108
+ blue: {
109
+ 100: "#f1f7fd",
110
+ 200: "#dfedfa",
111
+ 300: "#c6e0f7",
112
+ 400: "#a0cdf0",
113
+ 500: "#72b1e8",
114
+ 600: "#5294e0",
115
+ 700: "#3c79d4",
116
+ 800: "#3365c2",
117
+ 900: "#2f529e",
118
+ 1000: "#25385f"
119
+ },
120
+ purple: {
121
+ 100: "#f1f1fc",
122
+ 200: "#e5e7fa",
123
+ 300: "#d0d1f5",
124
+ 400: "#b3b3ee",
125
+ 500: "#9b95e4",
126
+ 600: "#8678d9",
127
+ 700: "#7860cb",
128
+ 800: "#6750b2",
129
+ 900: "#554390",
130
+ 1000: "#352c54"
131
+ },
132
+ magenta: {
133
+ 100: "#faf5f9",
134
+ 200: "#f7ecf5",
135
+ 300: "#f0daec",
136
+ 400: "#e4bddd",
137
+ 500: "#d294c5",
138
+ 600: "#c377b1",
139
+ 700: "#ac5693",
140
+ 800: "#93437a",
141
+ 900: "#7a3a65",
142
+ 1000: "#592648"
143
+ },
144
+ "neutral-alpha": {
145
+ "100A": "rgba(9, 30, 77, 0.03)",
146
+ "500A": "rgba(9, 30, 77, 0.5)",
147
+ "200A": "rgba(9, 30, 77, 0.06)",
148
+ "300A": "rgba(9, 30, 77, 0.14)",
149
+ "400A": "rgba(9, 30, 77, 0.31)"
150
+ },
151
+ "dark-neutral-alpha": {
152
+ "100A": "rgba(188, 214, 240, 0.04)",
153
+ "200A": "rgba(161, 189, 217, 0.08)",
154
+ "300A": "rgba(166, 197, 226, 0.16)",
155
+ "400A": "rgba(166, 197, 226, 0.28)",
156
+ "500A": "rgba(166, 197, 226, 0.5)"
157
+ }
158
+ },
159
+ opacity: {
160
+ opacity: "#ffffff"
161
+ },
162
+ dimension: {
163
+ "space-0": "0 rem",
164
+ "space-25": "0.125rem",
165
+ "space-50": "0.25rem",
166
+ "space-75": "0.375rem",
167
+ "space-100": "0.5rem",
168
+ "space-150": "0.75rem",
169
+ "space-200": "1rem",
170
+ "space-250": "1.25rem",
171
+ "space-300": "1.5rem",
172
+ "space-400": "2rem",
173
+ "space-500": "2.5rem",
174
+ "space-600": "3rem",
175
+ "space-800": "4rem",
176
+ "space-1000": "80px"
177
+ },
178
+ "border-width": {
179
+ base: "1px",
180
+ md: "2px"
181
+ },
182
+ "border-radius": {
183
+ none: "0",
184
+ xs: "0.125rem",
185
+ sm: "0.25rem",
186
+ md: "0.5rem",
187
+ lg: "1rem",
188
+ xl: "2rem",
189
+ "2xl": "3rem",
190
+ full: "999px"
191
+ },
192
+ "icon-size": {
193
+ xs: "1rem",
194
+ sm: "1.25rem",
195
+ md: "1.5rem",
196
+ lg: "2rem",
197
+ xl: "3rem"
198
+ },
199
+ "text-decoration-line": {
200
+ none: "none",
201
+ underline: "underline",
202
+ "line-through": "line-through"
203
+ },
204
+ "text-transform": {
205
+ uppercase: "uppercase",
206
+ " lowercase": "lowercase",
207
+ " capitalize": "capitalize"
208
+ },
209
+ "font-size": {
210
+ "text-xs": "0.75rem",
211
+ "text-sm": "0.875rem",
212
+ "text-base": "1rem",
213
+ "text-lg": "1.25rem",
214
+ "text-xl": "1.5rem",
215
+ "text-2xl": "2rem",
216
+ "text-3xl": "2.25rem",
217
+ "text-4xl": "3rem"
218
+ },
219
+ "font-weight": {
220
+ "regular-400": "{fontweights.archivo-regular}",
221
+ "medium-500": "{fontweights.archivo-medium}",
222
+ "bold-700": "{fontweights.archivo-bold}"
223
+ },
224
+ "line-height": {
225
+ "text-4xl": {
226
+ "leading-none": "3rem",
227
+ "leading-tight": "3.25rem"
228
+ },
229
+ "text-3xl": {
230
+ "leading-none": "2.25rem",
231
+ "leading-tight": "2.5rem"
232
+ },
233
+ "text-2xl": {
234
+ "leading-none": "2rem",
235
+ "leading-tight": "2.25rem"
236
+ },
237
+ "text-xl": {
238
+ "leading-none": "1.5rem",
239
+ "leading-tight": "1.75"
240
+ },
241
+ "text-lg": {
242
+ "leading-none": "1.25rem",
243
+ "leading-tight": "1.5rem"
244
+ },
245
+ "text-base": {
246
+ "leading-none": "1rem",
247
+ "leading-tight": "1.25",
248
+ "leading-normal": "1.5rem"
249
+ },
250
+ "text-sm": {
251
+ "leading-none": "0.875rem",
252
+ "leading-normal": "1.25rem"
253
+ },
254
+ "text-xs": {
255
+ "leading-none": "0.75rem",
256
+ "leading-normal": "1.25rem"
257
+ }
258
+ },
259
+ fontFamilies: {
260
+ archivo: "Archivo"
261
+ },
262
+ fontWeights: {
263
+ "archivo-thin": 100,
264
+ "archivo-extralight": 200,
265
+ "archivo-light": 300,
266
+ "archivo-regular": 400,
267
+ "archivo-medium": 500,
268
+ "archivo-semibold": 600,
269
+ "archivo-bold": 700,
270
+ "archivo-extrabold": 800,
271
+ "archivo-black": 900
272
+ }
273
+ },
274
+ semantic: {
275
+ colorScheme: {
276
+ dark: {
277
+ content: {
278
+ background: "{color.dark-neutral.0}",
279
+ borderColor: "{color.dark-neutral.200}",
280
+ color: "{color.dark-neutral.1100}",
281
+ hoverBackground: "{color.dark-neutral.200}",
282
+ hoverColor: "{color.dark-neutral.1100}"
283
+ },
284
+ surface: {
285
+ 0: "{color.dark-neutral.0}",
286
+ 100: "{color.dark-neutral.100}",
287
+ 200: "{color.dark-neutral.200}",
288
+ 300: "{color.dark-neutral.300}",
289
+ 400: "{color.dark-neutral.400}",
290
+ 500: "{color.dark-neutral.500}",
291
+ 600: "{color.dark-neutral.600}",
292
+ 700: "{color.dark-neutral.700}",
293
+ 800: "{color.dark-neutral.800}",
294
+ 900: "{color.dark-neutral.900}",
295
+ 950: "{color.dark-neutral.1000}"
296
+ },
297
+ text: {
298
+ color: "{color.dark-neutral.1100}",
299
+ hoverColor: "{color.dark-neutral.1100}",
300
+ hoverMutedColor: "{color.dark-neutral.1100}",
301
+ mutedColor: "{color.dark-neutral.1100}"
302
+ }
303
+ },
304
+ light: {
305
+ content: {
306
+ background: "{color.neutral.0}",
307
+ borderColor: "{color.neutral.200}",
308
+ color: "{color.neutral.1100}",
309
+ hoverBackground: "{color.neutral.200}",
310
+ hoverColor: "{color.neutral.1100}"
311
+ },
312
+ surface: {
313
+ 0: "{color.neutral.0}",
314
+ 100: "{color.neutral.100}",
315
+ 200: "{color.neutral.200}",
316
+ 300: "{color.neutral.300}",
317
+ 400: "{color.neutral.400}",
318
+ 500: "{color.neutral.500}",
319
+ 600: "{color.neutral.600}",
320
+ 700: "{color.neutral.700}",
321
+ 800: "{color.neutral.800}",
322
+ 900: "{color.neutral.900}",
323
+ 950: "{color.neutral.1000}"
324
+ },
325
+ text: {
326
+ color: "{color.neutral.1100}",
327
+ hoverColor: "{color.neutral.1100}",
328
+ hoverMutedColor: "{color.neutral.1100}",
329
+ mutedColor: "{color.neutral.1100}"
330
+ }
331
+ }
332
+ },
333
+ content: {
334
+ borderRadius: "{border-radius.md}"
335
+ },
336
+ disabledOpacity: "{opacity.opacity}",
337
+ focusRing: {
338
+ color: "{color.bcc.100}"
339
+ },
340
+ formField: {
341
+ borderRadius: "{border-radius.md}",
342
+ focusRing: {
343
+ color: "{color.bcc.100}"
344
+ },
345
+ lg: {
346
+ fontSize: "{font-size.text-lg}",
347
+ paddingX: "{dimension.space-200}",
348
+ paddingY: "{dimension.space-150}"
349
+ },
350
+ paddingX: "{dimension.space-150}",
351
+ paddingY: "{dimension.space-100}",
352
+ sm: {
353
+ fontSize: "{font-size.text-sm}",
354
+ paddingX: "{dimension.space-150}",
355
+ paddingY: "{dimension.space-100}"
356
+ }
357
+ },
358
+ list: {
359
+ gap: "{dimension.space-50}",
360
+ header: {
361
+
362
+ },
363
+ option: {
364
+ borderRadius: "{border-radius.md}"
365
+ },
366
+ optionGroup: {
367
+ fontWeight: "{font-weight.medium-500}"
368
+ }
369
+ },
370
+ mask: {
371
+
372
+ },
373
+ navigation: {
374
+ item: {
375
+ borderRadius: "{border-radius.md}"
376
+ },
377
+ list: {
378
+
379
+ },
380
+ submenuIcon: {
381
+
382
+ },
383
+ submenuLabel: {
384
+
385
+ }
386
+ },
387
+ overlay: {
388
+ modal: {
389
+ borderRadius: "{border-radius.md}"
390
+ },
391
+ navigation: {
392
+
393
+ },
394
+ popover: {
395
+ borderRadius: "{border-radius.md}"
396
+ },
397
+ select: {
398
+ borderRadius: "{border-radius.md}"
399
+ }
400
+ },
401
+ primary: {
402
+ 50: "{color.bcc.100}",
403
+ 100: "{color.bcc.200}",
404
+ 200: "{color.bcc.300}",
405
+ 300: "{color.bcc.400}",
406
+ 400: "{color.bcc.500}",
407
+ 500: "{color.bcc.600}",
408
+ 600: "{color.bcc.700}",
409
+ 700: "{color.bcc.800}",
410
+ 800: "{color.bcc.900}",
411
+ 900: "{color.bcc.1000}"
412
+ }
413
+ }
414
+ });
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@bcc-code/design-tokens",
3
- "version": "1.0.3",
3
+ "version": "1.0.6",
4
4
  "description": "Design tokens package with light/dark themes for PrimeVue, WordPress, and vanilla HTML/JS.",
5
5
  "type": "module",
6
6
  "main": "dist/variables.css",
7
7
  "exports": {
8
8
  "./variables.css": "./dist/variables.css",
9
9
  "./tailwind.css": "./dist/tailwind.css",
10
- "./primevue-preset.js": "./dist/primevue-preset.js"
10
+ "./bcc-primevue-preset.js": "./dist/bcc-primevue-preset.js"
11
11
  },
12
12
  "files": [
13
13
  "dist",
@@ -1,5 +0,0 @@
1
- export const primeVuePreset = {
2
- "base": "Aura",
3
- "overrides": {},
4
- "darkModeSelector": ".dark-mode"
5
- };