@bcc-code/design-tokens 2.0.5 → 2.0.7

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 (8) hide show
  1. package/README.md +1 -17
  2. package/build/bcc/cdn/light.css +91 -2
  3. package/build/bcc/cdn/variables.css +91 -2
  4. package/build/bcc/primevue/index.d.ts +2 -2
  5. package/build/bcc/primevue/index.js +6 -177
  6. package/build/bcc/primevue/override.js +100 -0
  7. package/build/bcc/tailwind/light.css +91 -2
  8. package/package.json +1 -1
package/README.md CHANGED
@@ -11,7 +11,6 @@ A comprehensive design token package with CSS variables, Tailwind v4 integration
11
11
  - **Tailwind v4 Integration**: Native support with `@theme` and custom utilities
12
12
  - **PrimeVue Integration**: Token override preset extending Aura theme
13
13
  - **Dark Mode**: Automatic switching via CSS media queries or class-based control
14
- - **TypeScript**: Full type definitions for all exports
15
14
  - **CDN Support**: Direct imports for WordPress and static sites
16
15
 
17
16
  ## 📦 Installation
@@ -79,20 +78,11 @@ npm install tailwindcss
79
78
  npm install tailwindcss primevue @primevue/themes
80
79
  ```
81
80
 
82
- **2. Import Tailwind CSS and preset configuration:**
83
- ```javascript
84
- import '@bcc-code/design-tokens/bcc/tailwind';
85
- import BCCAuraOverride from '@bcc-code/design-tokens/bcc/primevue';
86
- ```
87
-
88
81
  **3. Configure PrimeVue:**
89
82
  ```javascript
90
83
  import { createApp } from 'vue';
91
84
  import PrimeVue from 'primevue/config';
92
- import { definePreset } from '@primevue/themes';
93
- import Aura from '@primevue/themes/aura';
94
-
95
- const BCCPreset = definePreset(Aura, BCCAuraOverride);
85
+ import BCCPreset from '@bcc-code/design-tokens/bcc/primevue';
96
86
 
97
87
  const app = createApp(App);
98
88
 
@@ -120,12 +110,6 @@ app.use(PrimeVue, {
120
110
  </template>
121
111
  ```
122
112
 
123
- **TypeScript Support:**
124
- ```typescript
125
- import BCCAuraOverride from '@bcc-code/design-tokens/bcc/primevue';
126
- import type { BCCAuraOverrideConfig } from '@bcc-code/design-tokens/bcc/primevue';
127
- ```
128
-
129
113
  ## 🌙 Dark Mode
130
114
 
131
115
  ### Automatic (CSS Media Query)
package/build/bcc/cdn/light.css CHANGED
@@ -418,8 +418,97 @@
418
418
  --color-elevation-surface-raised-hovered: var(--color-neutral-200);
419
419
  --color-elevation-surface-raised-pressed: var(--color-neutral-300);
420
420
 
421
- /* OPACITY TOKENS */
422
- --opacity-opacity: #ffffff;
421
+ /* TEST TOKENS */
422
+ --test-rust-100: #fff1ed;
423
+ --test-rust-200: #ffdad2;
424
+ --test-rust-300: #f7a399;
425
+ --test-rust-400: #ee7a69;
426
+ --test-rust-500: #db5944;
427
+ --test-rust-600: #c7402e;
428
+ --test-rust-700: #a83423;
429
+ --test-rust-800: #86291b;
430
+ --test-rust-900: #6b1f15;
431
+ --test-rust-1000: #4f140d;
432
+ --test-green-100: #e8fbed;
433
+ --test-green-200: #c2f0d2;
434
+ --test-green-300: #95e6b6;
435
+ --test-green-400: #62da9c;
436
+ --test-green-500: #37cf83;
437
+ --test-green-600: #1fbf71;
438
+ --test-green-700: #169b5a;
439
+ --test-green-800: #0f7744;
440
+ --test-green-900: #08532d;
441
+ --test-green-1000: #003b1c;
442
+ --test-teal-100: #e4faf8;
443
+ --test-teal-200: #b6f0eb;
444
+ --test-teal-300: #85e6de;
445
+ --test-teal-400: #56d6d1;
446
+ --test-teal-500: #2bc4c2;
447
+ --test-teal-600: #00b0b5;
448
+ --test-teal-700: #00929a;
449
+ --test-teal-800: #00757f;
450
+ --test-teal-900: #005962;
451
+ --test-teal-1000: #003d45;
452
+ --test-sand-100: #f8f5f0;
453
+ --test-sand-200: #ece2d1;
454
+ --test-sand-300: #d9c1a3;
455
+ --test-sand-400: #c4a678;
456
+ --test-sand-500: #b18c56;
457
+ --test-sand-600: #9c743a;
458
+ --test-sand-700: #7f5e2f;
459
+ --test-sand-800: #624622;
460
+ --test-sand-900: #483116;
461
+ --test-sand-1000: #2f1f0d;
462
+ --test-blue-100: #e8f3ff;
463
+ --test-blue-200: #cce0ff;
464
+ --test-blue-300: #99c2ff;
465
+ --test-blue-400: #66a6ff;
466
+ --test-blue-500: #338aff;
467
+ --test-blue-600: #0065ff;
468
+ --test-blue-700: #0052cc;
469
+ --test-blue-800: #0747a6;
470
+ --test-blue-900: #053e85;
471
+ --test-blue-1000: #092c66;
472
+ --test-purple-100: #f3f0ff;
473
+ --test-purple-200: #dfd7ff;
474
+ --test-purple-300: #b8acff;
475
+ --test-purple-400: #9982ff;
476
+ --test-purple-500: #7a5aff;
477
+ --test-purple-600: #5e37ff;
478
+ --test-purple-700: #4722cc;
479
+ --test-purple-800: #3319a3;
480
+ --test-purple-900: #26157a;
481
+ --test-purple-1000: #1b0f52;
482
+ --test-magenta-100: #fff0f8;
483
+ --test-magenta-200: #ffd2ec;
484
+ --test-magenta-300: #ff94d5;
485
+ --test-magenta-400: #f562c8;
486
+ --test-magenta-500: #e037b8;
487
+ --test-magenta-600: #cc1bac;
488
+ --test-magenta-700: #a11388;
489
+ --test-magenta-800: #7a0d66;
490
+ --test-magenta-900: #550944;
491
+ --test-magenta-1000: #3b052e;
492
+ --test-rust-custom-100: #fff3ed;
493
+ --test-rust-custom-200: #ffd9c5;
494
+ --test-rust-custom-300: #ffb89a;
495
+ --test-rust-custom-400: #ff9772;
496
+ --test-rust-custom-500: #f2784f;
497
+ --test-rust-custom-600: #d66542;
498
+ --test-rust-custom-700: #b55435;
499
+ --test-rust-custom-800: #944428;
500
+ --test-rust-custom-900: #73351d;
501
+ --test-rust-custom-1000: #522513;
502
+ --test-red-100: #fff2f0;
503
+ --test-red-200: #ffe0dc;
504
+ --test-red-300: #ffb8ad;
505
+ --test-red-400: #ff8a75;
506
+ --test-red-500: #ff5c3c;
507
+ --test-red-600: #de350b;
508
+ --test-red-700: #b42b09;
509
+ --test-red-800: #8f2107;
510
+ --test-red-900: #6b1805;
511
+ --test-red-1000: #4b0f03;
423
512
 
424
513
  /* ELEVATION TOKENS */
425
514
  --elevation-shadow-overflow: 0 0 0 0 #000000;
package/build/bcc/cdn/variables.css CHANGED
@@ -418,8 +418,97 @@
418
418
  --color-elevation-surface-raised-hovered: var(--color-neutral-200);
419
419
  --color-elevation-surface-raised-pressed: var(--color-neutral-300);
420
420
 
421
- /* OPACITY TOKENS */
422
- --opacity-opacity: #ffffff;
421
+ /* TEST TOKENS */
422
+ --test-rust-100: #fff1ed;
423
+ --test-rust-200: #ffdad2;
424
+ --test-rust-300: #f7a399;
425
+ --test-rust-400: #ee7a69;
426
+ --test-rust-500: #db5944;
427
+ --test-rust-600: #c7402e;
428
+ --test-rust-700: #a83423;
429
+ --test-rust-800: #86291b;
430
+ --test-rust-900: #6b1f15;
431
+ --test-rust-1000: #4f140d;
432
+ --test-green-100: #e8fbed;
433
+ --test-green-200: #c2f0d2;
434
+ --test-green-300: #95e6b6;
435
+ --test-green-400: #62da9c;
436
+ --test-green-500: #37cf83;
437
+ --test-green-600: #1fbf71;
438
+ --test-green-700: #169b5a;
439
+ --test-green-800: #0f7744;
440
+ --test-green-900: #08532d;
441
+ --test-green-1000: #003b1c;
442
+ --test-teal-100: #e4faf8;
443
+ --test-teal-200: #b6f0eb;
444
+ --test-teal-300: #85e6de;
445
+ --test-teal-400: #56d6d1;
446
+ --test-teal-500: #2bc4c2;
447
+ --test-teal-600: #00b0b5;
448
+ --test-teal-700: #00929a;
449
+ --test-teal-800: #00757f;
450
+ --test-teal-900: #005962;
451
+ --test-teal-1000: #003d45;
452
+ --test-sand-100: #f8f5f0;
453
+ --test-sand-200: #ece2d1;
454
+ --test-sand-300: #d9c1a3;
455
+ --test-sand-400: #c4a678;
456
+ --test-sand-500: #b18c56;
457
+ --test-sand-600: #9c743a;
458
+ --test-sand-700: #7f5e2f;
459
+ --test-sand-800: #624622;
460
+ --test-sand-900: #483116;
461
+ --test-sand-1000: #2f1f0d;
462
+ --test-blue-100: #e8f3ff;
463
+ --test-blue-200: #cce0ff;
464
+ --test-blue-300: #99c2ff;
465
+ --test-blue-400: #66a6ff;
466
+ --test-blue-500: #338aff;
467
+ --test-blue-600: #0065ff;
468
+ --test-blue-700: #0052cc;
469
+ --test-blue-800: #0747a6;
470
+ --test-blue-900: #053e85;
471
+ --test-blue-1000: #092c66;
472
+ --test-purple-100: #f3f0ff;
473
+ --test-purple-200: #dfd7ff;
474
+ --test-purple-300: #b8acff;
475
+ --test-purple-400: #9982ff;
476
+ --test-purple-500: #7a5aff;
477
+ --test-purple-600: #5e37ff;
478
+ --test-purple-700: #4722cc;
479
+ --test-purple-800: #3319a3;
480
+ --test-purple-900: #26157a;
481
+ --test-purple-1000: #1b0f52;
482
+ --test-magenta-100: #fff0f8;
483
+ --test-magenta-200: #ffd2ec;
484
+ --test-magenta-300: #ff94d5;
485
+ --test-magenta-400: #f562c8;
486
+ --test-magenta-500: #e037b8;
487
+ --test-magenta-600: #cc1bac;
488
+ --test-magenta-700: #a11388;
489
+ --test-magenta-800: #7a0d66;
490
+ --test-magenta-900: #550944;
491
+ --test-magenta-1000: #3b052e;
492
+ --test-rust-custom-100: #fff3ed;
493
+ --test-rust-custom-200: #ffd9c5;
494
+ --test-rust-custom-300: #ffb89a;
495
+ --test-rust-custom-400: #ff9772;
496
+ --test-rust-custom-500: #f2784f;
497
+ --test-rust-custom-600: #d66542;
498
+ --test-rust-custom-700: #b55435;
499
+ --test-rust-custom-800: #944428;
500
+ --test-rust-custom-900: #73351d;
501
+ --test-rust-custom-1000: #522513;
502
+ --test-red-100: #fff2f0;
503
+ --test-red-200: #ffe0dc;
504
+ --test-red-300: #ffb8ad;
505
+ --test-red-400: #ff8a75;
506
+ --test-red-500: #ff5c3c;
507
+ --test-red-600: #de350b;
508
+ --test-red-700: #b42b09;
509
+ --test-red-800: #8f2107;
510
+ --test-red-900: #6b1805;
511
+ --test-red-1000: #4b0f03;
423
512
 
424
513
  /* ELEVATION TOKENS */
425
514
  --elevation-shadow-overflow: 0 0 0 0 #000000;
package/build/bcc/primevue/index.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- declare module '@bcc-code/design-tokens/bcc/primevue/index.js' {
2
- export const BCCAuraOverride: any;
1
+ declare module '@bcc-code/design-tokens/bcc/primevue' {
2
+ export const BCCPreset: any;
3
3
  }
package/build/bcc/primevue/index.js CHANGED
@@ -1,180 +1,9 @@
1
- const BCCAuraOverride = {
2
- semantic: {
3
- primary: {
4
- 50: 'var(--color-bcc-100)',
5
- 100: 'var(--color-bcc-200)',
6
- 200: 'var(--color-bcc-300)',
7
- 300: 'var(--color-bcc-400)',
8
- 400: 'var(--color-bcc-500)',
9
- 500: 'var(--color-bcc-600)',
10
- 600: 'var(--color-bcc-700)',
11
- 700: 'var(--color-bcc-800)',
12
- 800: 'var(--color-bcc-900)',
13
- 900: 'var(--color-bcc-1000)',
14
- 950: 'var(--color-bcc-1000)',
15
- },
1
+ import { definePreset } from "@primeuix/themes";
2
+ import Aura from "@primeuix/themes/aura";
16
3
 
17
- surface: {
18
- 0: 'var(--color-neutral-0)',
19
- 50: 'var(--color-neutral-100)',
20
- 100: 'var(--color-neutral-200)',
21
- 200: 'var(--color-neutral-300)',
22
- 300: 'var(--color-neutral-400)',
23
- 400: 'var(--color-neutral-500)',
24
- 500: 'var(--color-neutral-600)',
25
- 600: 'var(--color-neutral-700)',
26
- 700: 'var(--color-neutral-800)',
27
- 800: 'var(--color-neutral-900)',
28
- 900: 'var(--color-neutral-1000)',
29
- 950: 'var(--color-neutral-1100)',
30
- },
4
+ import "@bcc-code/design-tokens/bcc/tailwind";
5
+ import BCCAuraOverride from "./override";
31
6
 
32
- success: {
33
- 50: 'var(--color-green-100)',
34
- 100: 'var(--color-green-200)',
35
- 200: 'var(--color-green-300)',
36
- 300: 'var(--color-green-400)',
37
- 400: 'var(--color-green-500)',
38
- 500: 'var(--color-green-600)',
39
- 600: 'var(--color-green-700)',
40
- 700: 'var(--color-green-800)',
41
- 800: 'var(--color-green-900)',
42
- 900: 'var(--color-green-1000)',
43
- 950: 'var(--color-green-1000)',
44
- },
7
+ const BCCPreset = definePreset(Aura, BCCAuraOverride);
45
8
 
46
- warn: {
47
- 50: 'var(--color-orange-100)',
48
- 100: 'var(--color-orange-200)',
49
- 200: 'var(--color-orange-300)',
50
- 300: 'var(--color-orange-400)',
51
- 400: 'var(--color-orange-500)',
52
- 500: 'var(--color-orange-600)',
53
- 600: 'var(--color-orange-700)',
54
- 700: 'var(--color-orange-800)',
55
- 800: 'var(--color-orange-900)',
56
- 900: 'var(--color-orange-1000)',
57
- 950: 'var(--color-orange-1000)',
58
- },
59
-
60
- danger: {
61
- 50: 'var(--color-red-100)',
62
- 100: 'var(--color-red-200)',
63
- 200: 'var(--color-red-300)',
64
- 300: 'var(--color-red-400)',
65
- 400: 'var(--color-red-500)',
66
- 500: 'var(--color-red-600)',
67
- 600: 'var(--color-red-700)',
68
- 700: 'var(--color-red-800)',
69
- 800: 'var(--color-red-900)',
70
- 900: 'var(--color-red-1000)',
71
- 950: 'var(--color-red-1000)',
72
- },
73
-
74
- info: {
75
- 50: 'var(--color-blue-100)',
76
- 100: 'var(--color-blue-200)',
77
- 200: 'var(--color-blue-300)',
78
- 300: 'var(--color-blue-400)',
79
- 400: 'var(--color-blue-500)',
80
- 500: 'var(--color-blue-600)',
81
- 600: 'var(--color-blue-700)',
82
- 700: 'var(--color-blue-800)',
83
- 800: 'var(--color-blue-900)',
84
- 900: 'var(--color-blue-1000)',
85
- 950: 'var(--color-blue-1000)',
86
- },
87
-
88
- colorScheme: {
89
- light: {
90
- primary: {
91
- color: 'var(--color-background-brand-default)',
92
- contrastColor: 'var(--color-text-inverse)',
93
- hoverColor: 'var(--color-background-brand-hover)',
94
- activeColor: 'var(--color-background-brand-pressed)',
95
- },
96
-
97
- surface: {
98
- 0: 'var(--color-elevation-surface-default)',
99
- 50: 'var(--color-elevation-surface-raised-default)',
100
- 100: 'var(--color-elevation-surface-overlay-default)',
101
- 200: 'var(--color-neutral-200)',
102
- 300: 'var(--color-neutral-300)',
103
- 400: 'var(--color-neutral-400)',
104
- 500: 'var(--color-neutral-500)',
105
- 600: 'var(--color-neutral-600)',
106
- 700: 'var(--color-neutral-700)',
107
- 800: 'var(--color-neutral-800)',
108
- 900: 'var(--color-neutral-900)',
109
- 950: 'var(--color-neutral-1100)',
110
- },
111
-
112
- text: {
113
- color: 'var(--color-text-default)',
114
- hoverColor: 'var(--color-text-default)',
115
- mutedColor: 'var(--color-text-subtle)',
116
- highlightColor: 'var(--color-text-selected)',
117
- },
118
-
119
- content: {
120
- background: 'var(--color-elevation-surface-default)',
121
- hoverBackground: 'var(--color-elevation-surface-hovered)',
122
- borderColor: 'var(--color-border-default)',
123
- color: 'var(--color-text-default)',
124
- hoverColor: 'var(--color-text-default)',
125
- },
126
- },
127
-
128
- dark: {
129
- primary: {
130
- color: 'var(--color-background-brand-default)',
131
- contrastColor: 'var(--color-text-inverse)',
132
- hoverColor: 'var(--color-background-brand-hover)',
133
- activeColor: 'var(--color-background-brand-pressed)',
134
- },
135
-
136
- surface: {
137
- 0: 'var(--color-elevation-surface-default)',
138
- 50: 'var(--color-elevation-surface-raised-default)',
139
- 100: 'var(--color-elevation-surface-overlay-default)',
140
- 200: 'var(--color-neutral-200)',
141
- 300: 'var(--color-neutral-300)',
142
- 400: 'var(--color-neutral-400)',
143
- 500: 'var(--color-neutral-500)',
144
- 600: 'var(--color-neutral-600)',
145
- 700: 'var(--color-neutral-700)',
146
- 800: 'var(--color-neutral-800)',
147
- 900: 'var(--color-neutral-900)',
148
- 950: 'var(--color-neutral-1100)',
149
- },
150
-
151
- text: {
152
- color: 'var(--color-text-default)',
153
- hoverColor: 'var(--color-text-default)',
154
- mutedColor: 'var(--color-text-subtle)',
155
- highlightColor: 'var(--color-text-selected)',
156
- },
157
-
158
- content: {
159
- background: 'var(--color-elevation-surface-default)',
160
- hoverBackground: 'var(--color-elevation-surface-hovered)',
161
- borderColor: 'var(--color-border-default)',
162
- color: 'var(--color-text-default)',
163
- hoverColor: 'var(--color-text-default)',
164
- },
165
- },
166
- },
167
- },
168
-
169
- components: {
170
- global: {
171
- css: `
172
- .p-component {
173
- font-family: var(--font-archivo), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
174
- }
175
- `
176
- },
177
- }
178
- };
179
-
180
- export default BCCAuraOverride;
9
+ export default BCCPreset
package/build/bcc/primevue/override.js ADDED
@@ -0,0 +1,100 @@
1
+ const BCCAuraOverride = {
2
+ semantic: {
3
+ primary: {
4
+ 50: 'var(--color-bcc-100)',
5
+ 100: 'var(--color-bcc-200)',
6
+ 200: 'var(--color-bcc-300)',
7
+ 300: 'var(--color-bcc-400)',
8
+ 400: 'var(--color-bcc-500)',
9
+ 500: 'var(--color-bcc-600)',
10
+ 600: 'var(--color-bcc-700)',
11
+ 700: 'var(--color-bcc-800)',
12
+ 800: 'var(--color-bcc-900)',
13
+ 900: 'var(--color-bcc-1000)',
14
+ 950: 'var(--color-bcc-1000)',
15
+ },
16
+
17
+ colorScheme: {
18
+ light: {
19
+ primary: {
20
+ color: 'var(--color-background-brand-default)',
21
+ contrastColor: 'var(--color-text-inverse)',
22
+ hoverColor: 'var(--color-background-brand-hover)',
23
+ activeColor: 'var(--color-background-brand-pressed)',
24
+ },
25
+
26
+ surface: {
27
+ 0: 'var(--color-elevation-surface-default)',
28
+ 50: 'var(--color-elevation-surface-raised-default)',
29
+ 100: 'var(--color-elevation-surface-overlay-default)',
30
+ 200: 'var(--color-neutral-200)',
31
+ 300: 'var(--color-neutral-300)',
32
+ 400: 'var(--color-neutral-400)',
33
+ 500: 'var(--color-neutral-500)',
34
+ 600: 'var(--color-neutral-600)',
35
+ 700: 'var(--color-neutral-700)',
36
+ 800: 'var(--color-neutral-800)',
37
+ 900: 'var(--color-neutral-900)',
38
+ 950: 'var(--color-neutral-1100)',
39
+ },
40
+
41
+ text: {
42
+ color: 'var(--color-text-default)',
43
+ hoverColor: 'var(--color-text-default)',
44
+ mutedColor: 'var(--color-text-subtle)',
45
+ highlightColor: 'var(--color-text-selected)',
46
+ },
47
+
48
+ content: {
49
+ background: 'var(--color-elevation-surface-default)',
50
+ hoverBackground: 'var(--color-elevation-surface-hovered)',
51
+ borderColor: 'var(--color-border-default)',
52
+ color: 'var(--color-text-default)',
53
+ hoverColor: 'var(--color-text-default)',
54
+ },
55
+ },
56
+
57
+ dark: {
58
+ primary: {
59
+ color: 'var(--color-background-brand-default)',
60
+ contrastColor: 'var(--color-text-inverse)',
61
+ hoverColor: 'var(--color-background-brand-hover)',
62
+ activeColor: 'var(--color-background-brand-pressed)',
63
+ },
64
+
65
+ surface: {
66
+ 0: 'var(--color-elevation-surface-default)',
67
+ 50: 'var(--color-elevation-surface-raised-default)',
68
+ 100: 'var(--color-elevation-surface-overlay-default)',
69
+ 200: 'var(--color-neutral-200)',
70
+ 300: 'var(--color-neutral-300)',
71
+ 400: 'var(--color-neutral-400)',
72
+ 500: 'var(--color-neutral-500)',
73
+ 600: 'var(--color-neutral-600)',
74
+ 700: 'var(--color-neutral-700)',
75
+ 800: 'var(--color-neutral-800)',
76
+ 900: 'var(--color-neutral-900)',
77
+ 950: 'var(--color-neutral-1100)',
78
+ },
79
+
80
+ text: {
81
+ color: 'var(--color-text-default)',
82
+ hoverColor: 'var(--color-text-default)',
83
+ mutedColor: 'var(--color-text-subtle)',
84
+ highlightColor: 'var(--color-text-selected)',
85
+ },
86
+
87
+ content: {
88
+ background: 'var(--color-elevation-surface-default)',
89
+ hoverBackground: 'var(--color-elevation-surface-hovered)',
90
+ borderColor: 'var(--color-border-default)',
91
+ color: 'var(--color-text-default)',
92
+ hoverColor: 'var(--color-text-default)',
93
+ },
94
+ },
95
+ },
96
+ },
97
+
98
+ };
99
+
100
+ export default BCCAuraOverride;
package/build/bcc/tailwind/light.css CHANGED
@@ -418,8 +418,97 @@
418
418
  --color-elevation-surface-raised-hovered: var(--color-neutral-200);
419
419
  --color-elevation-surface-raised-pressed: var(--color-neutral-300);
420
420
 
421
- /* OPACITY TOKENS */
422
- --opacity-opacity: #ffffff;
421
+ /* TEST TOKENS */
422
+ --test-rust-100: #fff1ed;
423
+ --test-rust-200: #ffdad2;
424
+ --test-rust-300: #f7a399;
425
+ --test-rust-400: #ee7a69;
426
+ --test-rust-500: #db5944;
427
+ --test-rust-600: #c7402e;
428
+ --test-rust-700: #a83423;
429
+ --test-rust-800: #86291b;
430
+ --test-rust-900: #6b1f15;
431
+ --test-rust-1000: #4f140d;
432
+ --test-green-100: #e8fbed;
433
+ --test-green-200: #c2f0d2;
434
+ --test-green-300: #95e6b6;
435
+ --test-green-400: #62da9c;
436
+ --test-green-500: #37cf83;
437
+ --test-green-600: #1fbf71;
438
+ --test-green-700: #169b5a;
439
+ --test-green-800: #0f7744;
440
+ --test-green-900: #08532d;
441
+ --test-green-1000: #003b1c;
442
+ --test-teal-100: #e4faf8;
443
+ --test-teal-200: #b6f0eb;
444
+ --test-teal-300: #85e6de;
445
+ --test-teal-400: #56d6d1;
446
+ --test-teal-500: #2bc4c2;
447
+ --test-teal-600: #00b0b5;
448
+ --test-teal-700: #00929a;
449
+ --test-teal-800: #00757f;
450
+ --test-teal-900: #005962;
451
+ --test-teal-1000: #003d45;
452
+ --test-sand-100: #f8f5f0;
453
+ --test-sand-200: #ece2d1;
454
+ --test-sand-300: #d9c1a3;
455
+ --test-sand-400: #c4a678;
456
+ --test-sand-500: #b18c56;
457
+ --test-sand-600: #9c743a;
458
+ --test-sand-700: #7f5e2f;
459
+ --test-sand-800: #624622;
460
+ --test-sand-900: #483116;
461
+ --test-sand-1000: #2f1f0d;
462
+ --test-blue-100: #e8f3ff;
463
+ --test-blue-200: #cce0ff;
464
+ --test-blue-300: #99c2ff;
465
+ --test-blue-400: #66a6ff;
466
+ --test-blue-500: #338aff;
467
+ --test-blue-600: #0065ff;
468
+ --test-blue-700: #0052cc;
469
+ --test-blue-800: #0747a6;
470
+ --test-blue-900: #053e85;
471
+ --test-blue-1000: #092c66;
472
+ --test-purple-100: #f3f0ff;
473
+ --test-purple-200: #dfd7ff;
474
+ --test-purple-300: #b8acff;
475
+ --test-purple-400: #9982ff;
476
+ --test-purple-500: #7a5aff;
477
+ --test-purple-600: #5e37ff;
478
+ --test-purple-700: #4722cc;
479
+ --test-purple-800: #3319a3;
480
+ --test-purple-900: #26157a;
481
+ --test-purple-1000: #1b0f52;
482
+ --test-magenta-100: #fff0f8;
483
+ --test-magenta-200: #ffd2ec;
484
+ --test-magenta-300: #ff94d5;
485
+ --test-magenta-400: #f562c8;
486
+ --test-magenta-500: #e037b8;
487
+ --test-magenta-600: #cc1bac;
488
+ --test-magenta-700: #a11388;
489
+ --test-magenta-800: #7a0d66;
490
+ --test-magenta-900: #550944;
491
+ --test-magenta-1000: #3b052e;
492
+ --test-rust-custom-100: #fff3ed;
493
+ --test-rust-custom-200: #ffd9c5;
494
+ --test-rust-custom-300: #ffb89a;
495
+ --test-rust-custom-400: #ff9772;
496
+ --test-rust-custom-500: #f2784f;
497
+ --test-rust-custom-600: #d66542;
498
+ --test-rust-custom-700: #b55435;
499
+ --test-rust-custom-800: #944428;
500
+ --test-rust-custom-900: #73351d;
501
+ --test-rust-custom-1000: #522513;
502
+ --test-red-100: #fff2f0;
503
+ --test-red-200: #ffe0dc;
504
+ --test-red-300: #ffb8ad;
505
+ --test-red-400: #ff8a75;
506
+ --test-red-500: #ff5c3c;
507
+ --test-red-600: #de350b;
508
+ --test-red-700: #b42b09;
509
+ --test-red-800: #8f2107;
510
+ --test-red-900: #6b1805;
511
+ --test-red-1000: #4b0f03;
423
512
 
424
513
  /* ELEVATION TOKENS */
425
514
  --shadow-overflow: 0 0 0 0 #000000;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bcc-code/design-tokens",
3
- "version": "2.0.5",
3
+ "version": "2.0.7",
4
4
  "description": "Design tokens with CSS variables, Tailwind v4, and framework presets.",
5
5
  "type": "module",
6
6
  "main": "build/bcc/cdn/variables.css",