@bcc-code/design-tokens 1.0.12 → 1.0.13

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