@bcc-code/design-tokens 1.0.6 → 1.0.8

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 (6) hide show
  1. package/README.md +8 -6
  2. package/dist/bcc-primevue-preset.js +18 -5
  3. package/dist/tailwind.config.js +198 -0
  4. package/dist/tailwind.css +275 -253
  5. package/dist/variables.css +59 -52
  6. package/package.json +5 -3
package/README.md CHANGED
@@ -22,19 +22,21 @@ A scoped design token package with light and dark themes, usable across PrimeVue
22
22
  ### ▶️ Install via NPM (for Vue/PrimeVue)
23
23
 
24
24
  ```bash
25
- npm install @bcc-code/design-tokens
25
+ npm install @bcc-code/design-tokens@latest
26
26
  ```
27
27
 
28
28
  In your `main.js`:
29
29
 
30
30
  ```js
31
- import "@bcc-code/design-tokens/dist/variables.css"; // Injects all CSS variables
32
- import { primeVuePreset } from "@bcc-code/design-tokens";
31
+ import "@bcc-code/design-tokens/variables.css"; // Injects all CSS variables
32
+ import { BCCPrimeVuePreset } from "@bcc-code/design-tokens/primevue-preset";
33
33
 
34
34
  app.use(PrimeVue, {
35
35
  theme: {
36
- preset: primeVuePreset,
37
- darkModeSelector: ".dark-mode", // You toggle this class manually or via script
36
+ preset: BCCPrimeVuePreset,
37
+ options: {
38
+ darkModeSelector: ".dark-mode", // You toggle this class manually or via script
39
+ },
38
40
  },
39
41
  });
40
42
  ```
@@ -44,7 +46,7 @@ app.use(PrimeVue, {
44
46
  ```html
45
47
  <link
46
48
  rel="stylesheet"
47
- href="https://cdn.jsdelivr.net/npm/@bcc-code/design-tokens@1.0.0/dist/variables.css"
49
+ href="https://cdn.jsdelivr.net/npm/@bcc-code/design-tokens@latest/dist/variables.css"
48
50
  />
49
51
  ```
50
52
 
package/dist/bcc-primevue-preset.js CHANGED
@@ -176,7 +176,7 @@ export const BCCPrimeVuePreset = definePreset(Aura, {
176
176
  "space-1000": "80px"
177
177
  },
178
178
  "border-width": {
179
- base: "1px",
179
+ sm: "1px",
180
180
  md: "2px"
181
181
  },
182
182
  "border-radius": {
@@ -196,7 +196,7 @@ export const BCCPrimeVuePreset = definePreset(Aura, {
196
196
  lg: "2rem",
197
197
  xl: "3rem"
198
198
  },
199
- "text-decoration-line": {
199
+ "text-decoration": {
200
200
  none: "none",
201
201
  underline: "underline",
202
202
  "line-through": "line-through"
@@ -204,12 +204,13 @@ export const BCCPrimeVuePreset = definePreset(Aura, {
204
204
  "text-transform": {
205
205
  uppercase: "uppercase",
206
206
  " lowercase": "lowercase",
207
- " capitalize": "capitalize"
207
+ " capitalize": "capitalize",
208
+ none: "none"
208
209
  },
209
210
  "font-size": {
210
211
  "text-xs": "0.75rem",
211
212
  "text-sm": "0.875rem",
212
- "text-base": "1rem",
213
+ "text-md": "1rem",
213
214
  "text-lg": "1.25rem",
214
215
  "text-xl": "1.5rem",
215
216
  "text-2xl": "2rem",
@@ -242,7 +243,7 @@ export const BCCPrimeVuePreset = definePreset(Aura, {
242
243
  "leading-none": "1.25rem",
243
244
  "leading-tight": "1.5rem"
244
245
  },
245
- "text-base": {
246
+ "text-md": {
246
247
  "leading-none": "1rem",
247
248
  "leading-tight": "1.25",
248
249
  "leading-normal": "1.5rem"
@@ -256,6 +257,18 @@ export const BCCPrimeVuePreset = definePreset(Aura, {
256
257
  "leading-normal": "1.25rem"
257
258
  }
258
259
  },
260
+ "space-between": {
261
+ 0: "{dimension.space-0}"
262
+ },
263
+ tracking: {
264
+ tighter: "-0.04em",
265
+ tight: "-0.02em",
266
+ normal: "0em",
267
+ wide: "0.04em"
268
+ },
269
+ "text-indent": {
270
+ 0: "{dimension.space-0}"
271
+ },
259
272
  fontFamilies: {
260
273
  archivo: "Archivo"
261
274
  },
package/dist/tailwind.config.js ADDED
@@ -0,0 +1,198 @@
1
+ // Generated Tailwind config — DO NOT EDIT
2
+ module.exports = {
3
+ darkMode: ["class", ".dark-mode"],
4
+ content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
5
+ theme: {
6
+ extend: {
7
+ spacing: {
8
+ 0: "0 rem",
9
+ 1: "0.25rem",
10
+ 2: "0.5rem",
11
+ 3: "0.75rem",
12
+ 4: "1rem",
13
+ 5: "1.25rem",
14
+ 6: "1.5rem",
15
+ 8: "2rem",
16
+ 10: "2.5rem",
17
+ 12: "3rem",
18
+ 16: "4rem",
19
+ 20: "80px",
20
+ "0.5": "0.125rem",
21
+ "1.5": "0.375rem"
22
+ },
23
+ borderRadius: {
24
+ none: "0",
25
+ xs: "0.125rem",
26
+ sm: "0.25rem",
27
+ md: "0.5rem",
28
+ lg: "1rem",
29
+ xl: "2rem",
30
+ "2xl": "3rem",
31
+ full: "999px"
32
+ },
33
+ fontSize: {
34
+ xs: "0.75rem",
35
+ sm: "0.875rem",
36
+ md: "1rem",
37
+ lg: "1.25rem",
38
+ xl: "1.5rem",
39
+ "2xl": "2rem",
40
+ "3xl": "2.25rem",
41
+ "4xl": "3rem"
42
+ },
43
+ colors: {
44
+ neutral: {
45
+ 0: "#ffffff",
46
+ 100: "#f7f8f9",
47
+ 200: "#f1f2f4",
48
+ 300: "#dcdfe4",
49
+ 400: "#b3b9c4",
50
+ 500: "#8590a2",
51
+ 600: "#758195",
52
+ 700: "#626f86",
53
+ 800: "#4b5668",
54
+ 900: "#374152",
55
+ 1000: "#282f3c",
56
+ 1100: "#1e242d"
57
+ },
58
+ "dark-neutral": {
59
+ 0: "#161a1d",
60
+ 100: "#1d2125",
61
+ 200: "#22272b",
62
+ 300: "#2c333a",
63
+ 400: "#454f59",
64
+ 500: "#596773",
65
+ 600: "#738496",
66
+ 700: "#8c9bab",
67
+ 800: "#9fadbc",
68
+ 900: "#b6c2cf",
69
+ 1000: "#c7d1db",
70
+ 1100: "#dee4ea"
71
+ },
72
+ bcc: {
73
+ 100: "#e6f2f1",
74
+ 200: "#d0e3e1",
75
+ 300: "#accbc8",
76
+ 400: "#73b2ac",
77
+ 500: "#2e9087",
78
+ 600: "#187b73",
79
+ 700: "#0e6962",
80
+ 800: "#004e48",
81
+ 900: "#003d39",
82
+ 1000: "#002320"
83
+ },
84
+ rust: {
85
+ 100: "#fcf6f4",
86
+ 200: "#f9ece7",
87
+ 300: "#f6dcd2",
88
+ 400: "#e9b29e",
89
+ 500: "#e29f87",
90
+ 600: "#d37f60",
91
+ 700: "#be6544",
92
+ 800: "#9f5236",
93
+ 900: "#844630",
94
+ 1000: "#4c271a"
95
+ },
96
+ red: {
97
+ 100: "#fcf4f4",
98
+ 200: "#fae7e6",
99
+ 300: "#f6d3d2",
100
+ 400: "#efb4b2",
101
+ 500: "#e38986",
102
+ 600: "#d5625e",
103
+ 700: "#c04642",
104
+ 800: "#ad3c38",
105
+ 900: "#86312e",
106
+ 1000: "#461716"
107
+ },
108
+ green: {
109
+ 100: "#f2fbf6",
110
+ 200: "#e2f6ea",
111
+ 300: "#c6ecd6",
112
+ 400: "#9adbb5",
113
+ 500: "#66c28d",
114
+ 600: "#40a56c",
115
+ 700: "#308957",
116
+ 800: "#296c47",
117
+ 900: "#25563b",
118
+ 1000: "#133925"
119
+ },
120
+ teal: {
121
+ 100: "#f1f9fa",
122
+ 200: "#dceff1",
123
+ 300: "#bde0e4",
124
+ 400: "#8fc9d1",
125
+ 500: "#5cabb7",
126
+ 600: "#3e8e9c",
127
+ 700: "#377483",
128
+ 800: "#32606c",
129
+ 900: "#2f505b",
130
+ 1000: "#1d353f"
131
+ },
132
+ sand: {
133
+ 100: "#f7f3ee",
134
+ 200: "#ede5da",
135
+ 300: "#dccfba",
136
+ 400: "#c5b191",
137
+ 500: "#ae966d",
138
+ 600: "#937b4f",
139
+ 700: "#74613c",
140
+ 800: "#5a4d31",
141
+ 900: "#49402b",
142
+ 1000: "#3c3420"
143
+ },
144
+ blue: {
145
+ 100: "#f1f7fd",
146
+ 200: "#dfedfa",
147
+ 300: "#c6e0f7",
148
+ 400: "#a0cdf0",
149
+ 500: "#72b1e8",
150
+ 600: "#5294e0",
151
+ 700: "#3c79d4",
152
+ 800: "#3365c2",
153
+ 900: "#2f529e",
154
+ 1000: "#25385f"
155
+ },
156
+ purple: {
157
+ 100: "#f1f1fc",
158
+ 200: "#e5e7fa",
159
+ 300: "#d0d1f5",
160
+ 400: "#b3b3ee",
161
+ 500: "#9b95e4",
162
+ 600: "#8678d9",
163
+ 700: "#7860cb",
164
+ 800: "#6750b2",
165
+ 900: "#554390",
166
+ 1000: "#352c54"
167
+ },
168
+ magenta: {
169
+ 100: "#faf5f9",
170
+ 200: "#f7ecf5",
171
+ 300: "#f0daec",
172
+ 400: "#e4bddd",
173
+ 500: "#d294c5",
174
+ 600: "#c377b1",
175
+ 700: "#ac5693",
176
+ 800: "#93437a",
177
+ 900: "#7a3a65",
178
+ 1000: "#592648"
179
+ },
180
+ "neutral-alpha": {
181
+ "100A": "rgba(9, 30, 77, 0.03)",
182
+ "500A": "rgba(9, 30, 77, 0.5)",
183
+ "200A": "rgba(9, 30, 77, 0.06)",
184
+ "300A": "rgba(9, 30, 77, 0.14)",
185
+ "400A": "rgba(9, 30, 77, 0.31)"
186
+ },
187
+ "dark-neutral-alpha": {
188
+ "100A": "rgba(188, 214, 240, 0.04)",
189
+ "200A": "rgba(161, 189, 217, 0.08)",
190
+ "300A": "rgba(166, 197, 226, 0.16)",
191
+ "400A": "rgba(166, 197, 226, 0.28)",
192
+ "500A": "rgba(166, 197, 226, 0.5)"
193
+ }
194
+ }
195
+ }
196
+ },
197
+ plugins: ["require('tailwindcss-primeui')"]
198
+ };
package/dist/tailwind.css CHANGED
@@ -1,4 +1,3 @@
1
-
2
1
  @import "tailwindcss";
3
2
 
4
3
  @theme {
@@ -197,8 +196,8 @@
197
196
  /* ✅ Dimension space-1000 */
198
197
  --dimension-space-1000: 80px;
199
198
 
200
- /* ✅ Border-width base */
201
- --border-width-base: 1px;
199
+ /* ✅ Border-width sm */
200
+ --border-width-sm: 1px;
202
201
 
203
202
  /* ✅ Border-width md */
204
203
  --border-width-md: 2px;
@@ -242,14 +241,14 @@
242
241
  /* ✅ Icon-size xl */
243
242
  --icon-size-xl: 3rem;
244
243
 
245
- /* ✅ Text-decoration-line none */
246
- --text-decoration-line-none: none;
244
+ /* ✅ Text-decoration none */
245
+ --text-decoration-none: none;
247
246
 
248
- /* ✅ Text-decoration-line underline */
249
- --text-decoration-line-underline: underline;
247
+ /* ✅ Text-decoration underline */
248
+ --text-decoration-underline: underline;
250
249
 
251
- /* ✅ Text-decoration-line line-through */
252
- --text-decoration-line-line-through: line-through;
250
+ /* ✅ Text-decoration line-through */
251
+ --text-decoration-line-through: line-through;
253
252
 
254
253
  /* ✅ Text-transform uppercase */
255
254
  --text-transform-uppercase: uppercase;
@@ -260,14 +259,17 @@
260
259
  /* ✅ Text-transform capitalize */
261
260
  --text-transform- capitalize: capitalize;
262
261
 
262
+ /* ✅ Text-transform none */
263
+ --text-transform-none: none;
264
+
263
265
  /* ✅ Font-size text-xs */
264
266
  --font-size-text-xs: 0.75rem;
265
267
 
266
268
  /* ✅ Font-size text-sm */
267
269
  --font-size-text-sm: 0.875rem;
268
270
 
269
- /* ✅ Font-size text-base */
270
- --font-size-text-base: 1rem;
271
+ /* ✅ Font-size text-md */
272
+ --font-size-text-md: 1rem;
271
273
 
272
274
  /* ✅ Font-size text-lg */
273
275
  --font-size-text-lg: 1.25rem;
@@ -285,13 +287,13 @@
285
287
  --font-size-text-4xl: 3rem;
286
288
 
287
289
  /* ✅ Font-weight regular-400 */
288
- --font-weight-regular-400: {fontweights.archivo-regular};
290
+ --font-weight-regular-400: var(--fontweights-archivo-regular);
289
291
 
290
292
  /* ✅ Font-weight medium-500 */
291
- --font-weight-medium-500: {fontweights.archivo-medium};
293
+ --font-weight-medium-500: var(--fontweights-archivo-medium);
292
294
 
293
295
  /* ✅ Font-weight bold-700 */
294
- --font-weight-bold-700: {fontweights.archivo-bold};
296
+ --font-weight-bold-700: var(--fontweights-archivo-bold);
295
297
 
296
298
  /* ✅ Line-height text-4xl */
297
299
  --line-height-text-4xl-leading-none: 3rem;
@@ -313,10 +315,10 @@
313
315
  --line-height-text-lg-leading-none: 1.25rem;
314
316
  --line-height-text-lg-leading-tight: 1.5rem;
315
317
 
316
- /* ✅ Line-height text-base */
317
- --line-height-text-base-leading-none: 1rem;
318
- --line-height-text-base-leading-tight: 1.25;
319
- --line-height-text-base-leading-normal: 1.5rem;
318
+ /* ✅ Line-height text-md */
319
+ --line-height-text-md-leading-none: 1rem;
320
+ --line-height-text-md-leading-tight: 1.25;
321
+ --line-height-text-md-leading-normal: 1.5rem;
320
322
 
321
323
  /* ✅ Line-height text-sm */
322
324
  --line-height-text-sm-leading-none: 0.875rem;
@@ -326,10 +328,28 @@
326
328
  --line-height-text-xs-leading-none: 0.75rem;
327
329
  --line-height-text-xs-leading-normal: 1.25rem;
328
330
 
331
+ /* ✅ Space-between 0 */
332
+ --space-between-0: var(--dimension-space-0);
333
+
334
+ /* ✅ Tracking tighter */
335
+ --tracking-tighter: -0.04em;
336
+
337
+ /* ✅ Tracking tight */
338
+ --tracking-tight: -0.02em;
339
+
340
+ /* ✅ Tracking normal */
341
+ --tracking-normal: 0em;
342
+
343
+ /* ✅ Tracking wide */
344
+ --tracking-wide: 0.04em;
345
+
346
+ /* ✅ Text-indent 0 */
347
+ --text-indent-0: var(--dimension-space-0);
348
+
329
349
  /* ✅ FontFamilies archivo */
330
350
  --fontFamilies-archivo: Archivo;
331
351
 
332
- /* ✅ Semantic */
352
+ /* ✅ Semantic Colors */
333
353
  --color-surface-primary: var(--color-neutral-0);
334
354
  --color-surface-secondary: var(--color-neutral-200);
335
355
  --color-surface-overlay-default: var(--color-neutral-alpha-500a);
@@ -563,237 +583,239 @@
563
583
  --color-border-accent-magenta-pressed: var(--color-magenta-800);
564
584
  }
565
585
 
566
- @theme .dark-mode {
567
- /* ✅ Semantic */
568
- --color-surface-primary: var(--color-dark-neutral-0);
569
- --color-surface-secondary: var(--color-dark-neutral-200);
570
- --color-surface-overlay-default: var(--color-dark-neutral-alpha-500a);
571
- --color-surface-inverse-primary: var(--color-neutral-0);
572
- --color-surface-inverse-secondary: var(--color-neutral-200);
573
- --color-divider-light: var(--color-dark-neutral-100);
574
- --color-divider-default: var(--color-dark-neutral-200);
575
- --color-divider-bold: var(--color-dark-neutral-300);
576
- --color-text-primary: var(--color-dark-neutral-1100);
577
- --color-text-secondary: var(--color-dark-neutral-1100);
578
- --color-text-tertiary: var(--color-dark-neutral-400);
579
- --color-text-inverse: var(--color-dark-neutral-0);
580
- --color-text-disabled: var(--color-dark-neutral-alpha-400a);
581
- --color-text-success: var(--color-green-500);
582
- --color-text-alert: var(--color-red-500);
583
- --color-text-Info: var(--color-dark-neutral-0);
584
- --color-text-danger: var(--color-dark-neutral-0);
585
- --color-text-brand-default: var(--color-bcc-400);
586
- --color-text-brand-bold: var(--color-bcc-300);
587
- --color-text-accent-rust-default: var(--color-rust-400);
588
- --color-text-accent-rust-bold: var(--color-rust-300);
589
- --color-text-accent-yellow-default: var(--color-red-400);
590
- --color-text-accent-yellow-bold: var(--color-red-300);
591
- --color-text-accent-green-default: var(--color-green-400);
592
- --color-text-accent-green-bold: var(--color-green-300);
593
- --color-text-accent-teal-default: var(--color-teal-400);
594
- --color-text-accent-teal-bold: var(--color-teal-300);
595
- --color-text-accent-sand-default: var(--color-sand-400);
596
- --color-text-accent-sand-bold: var(--color-sand-300);
597
- --color-text-accent-blue-default: var(--color-blue-400);
598
- --color-text-accent-blue-bold: var(--color-blue-300);
599
- --color-text-accent-purple-default: var(--color-purple-400);
600
- --color-text-accent-purple-bold: var(--color-purple-300);
601
- --color-text-accent-magenta-default: var(--color-magenta-400);
602
- --color-text-accent-magenta-bold: var(--color-magenta-300);
603
- --color-icon-primary: var(--color-dark-neutral-1100);
604
- --color-icon-secondary: var(--color-dark-neutral-700);
605
- --color-icon-tertiary: var(--color-dark-neutral-400);
606
- --color-icon-inverse: var(--color-dark-neutral-0);
607
- --color-icon-disabled: var(--color-dark-neutral-alpha-400a);
608
- --color-icon-success: var(--color-green-500);
609
- --color-icon-alert: var(--color-red-500);
610
- --color-icon-info: #ffffff;
611
- --color-icon-danger: #ffffff;
612
- --color-icon-accent-blue: var(--color-blue-400);
613
- --color-icon-accent-red: var(--color-red-400);
614
- --color-icon-accent-green: var(--color-green-400);
615
- --color-icon-accent-rust: var(--color-rust-400);
616
- --color-icon-accent-teal: var(--color-teal-400);
617
- --color-icon-accent-purple: var(--color-purple-400);
618
- --color-icon-accent-magenta: var(--color-magenta-400);
619
- --color-icon-accent-sand: var(--color-sand-400);
620
- --color-icon-brand: var(--color-bcc-400);
621
- --color-link-default: var(--color-blue-500);
622
- --color-link-hover: var(--color-blue-400);
623
- --color-link-visited: var(--color-blue-300);
624
- --color-background-disabled-default: #ffffff;
625
- --color-background-brand-default: var(--color-bcc-500);
626
- --color-background-brand-hover: var(--color-bcc-400);
627
- --color-background-brand-pressed: var(--color-bcc-300);
628
- --color-background-brand-lighter-default: var(--color-bcc-900);
629
- --color-background-brand-lighter-hover: var(--color-bcc-800);
630
- --color-background-brand-lighter-pressed: var(--color-bcc-700);
631
- --color-background-brand-light-default: var(--color-bcc-700);
632
- --color-background-brand-light-hover: var(--color-bcc-600);
633
- --color-background-brand-light-pressed: var(--color-bcc-500);
634
- --color-background-brand-bold-default: var(--color-bcc-300);
635
- --color-background-brand-bold-hover: var(--color-bcc-200);
636
- --color-background-brand-bold-pressed: var(--color-bcc-100);
637
- --color-background-accent-red-default: var(--color-red-500);
638
- --color-background-accent-red-hover: var(--color-red-400);
639
- --color-background-accent-red-pressed: var(--color-red-300);
640
- --color-background-accent-red-lighter-default: var(--color-red-900);
641
- --color-background-accent-red-lighter-hover: var(--color-red-800);
642
- --color-background-accent-red-lighter-pressed: var(--color-red-700);
643
- --color-background-accent-red-light-default: var(--color-red-700);
644
- --color-background-accent-red-light-hover: var(--color-red-600);
645
- --color-background-accent-red-light-pressed: var(--color-red-500);
646
- --color-background-accent-red-bold-default: var(--color-red-300);
647
- --color-background-accent-red-bold-hover: var(--color-red-400);
648
- --color-background-accent-red-bold-pressed: var(--color-red-500);
649
- --color-background-accent-rust-default: var(--color-rust-500);
650
- --color-background-accent-rust-hover: var(--color-rust-400);
651
- --color-background-accent-rust-pressed: var(--color-rust-300);
652
- --color-background-accent-rust-lighter-default: var(--color-rust-900);
653
- --color-background-accent-rust-lighter-hover: var(--color-rust-800);
654
- --color-background-accent-rust-lighter-pressed: var(--color-rust-700);
655
- --color-background-accent-rust-light-default: var(--color-rust-700);
656
- --color-background-accent-rust-light-hover: var(--color-rust-600);
657
- --color-background-accent-rust-light-pressed: var(--color-rust-500);
658
- --color-background-accent-rust-bold-default: var(--color-rust-300);
659
- --color-background-accent-rust-bold-hover: var(--color-rust-400);
660
- --color-background-accent-rust-bold-pressed: var(--color-rust-500);
661
- --color-background-accent-green-default: var(--color-green-600);
662
- --color-background-accent-green-hover: var(--color-green-700);
663
- --color-background-accent-green-pressed: var(--color-green-800);
664
- --color-background-accent-green-lighter-default: var(--color-green-900);
665
- --color-background-accent-green-lighter-hover: var(--color-green-800);
666
- --color-background-accent-green-lighter-pressed: var(--color-green-700);
667
- --color-background-accent-green-light-default: var(--color-green-700);
668
- --color-background-accent-green-light-hover: var(--color-green-600);
669
- --color-background-accent-green-light-pressed: var(--color-green-500);
670
- --color-background-accent-green-bold-default: var(--color-green-300);
671
- --color-background-accent-green-bold-hover: var(--color-green-400);
672
- --color-background-accent-green-bold-pressed: var(--color-green-500);
673
- --color-background-accent-teal-default: var(--color-teal-500);
674
- --color-background-accent-teal-hover: var(--color-teal-400);
675
- --color-background-accent-teal-pressed: var(--color-teal-300);
676
- --color-background-accent-teal-lighter-default: var(--color-teal-900);
677
- --color-background-accent-teal-lighter-hover: #ffffff;
678
- --color-background-accent-teal-lighter-pressed: #ffffff;
679
- --color-background-accent-teal-light-default: var(--color-teal-700);
680
- --color-background-accent-teal-light-hover: #ffffff;
681
- --color-background-accent-teal-light-pressed: #ffffff;
682
- --color-background-accent-teal-bold-default: var(--color-teal-300);
683
- --color-background-accent-teal-bold-hover: #ffffff;
684
- --color-background-accent-teal-bold-pressed: #ffffff;
685
- --color-background-accent-sand-default: var(--color-sand-500);
686
- --color-background-accent-sand-hover: #ffffff;
687
- --color-background-accent-sand-pressed: #ffffff;
688
- --color-background-accent-sand-lighter-default: var(--color-sand-900);
689
- --color-background-accent-sand-lighter-hover: var(--color-sand-800);
690
- --color-background-accent-sand-lighter-pressed: #ffffff;
691
- --color-background-accent-sand-light-default: var(--color-sand-700);
692
- --color-background-accent-sand-light-hover: #ffffff;
693
- --color-background-accent-sand-light-pressed: #ffffff;
694
- --color-background-accent-sand-bold-default: var(--color-sand-300);
695
- --color-background-accent-sand-bold-hover: #ffffff;
696
- --color-background-accent-sand-bold-pressed: #ffffff;
697
- --color-background-accent-blue-default: var(--color-blue-500);
698
- --color-background-accent-blue-hover: #ffffff;
699
- --color-background-accent-blue-pressed: #ffffff;
700
- --color-background-accent-blue-lighter-default: var(--color-blue-900);
701
- --color-background-accent-blue-lighter-hover: #ffffff;
702
- --color-background-accent-blue-lighter-pressed: #ffffff;
703
- --color-background-accent-blue-light-default: var(--color-blue-700);
704
- --color-background-accent-blue-light-hover: #ffffff;
705
- --color-background-accent-blue-light-pressed: #ffffff;
706
- --color-background-accent-blue-bold-default: var(--color-blue-300);
707
- --color-background-accent-blue-bold-hover: #ffffff;
708
- --color-background-accent-blue-bold-pressed: #ffffff;
709
- --color-background-accent-purple-default: var(--color-purple-500);
710
- --color-background-accent-purple-hover: #ffffff;
711
- --color-background-accent-purple-pressed: #ffffff;
712
- --color-background-accent-purple-lighter-default: var(--color-purple-900);
713
- --color-background-accent-purple-lighter-hover: #ffffff;
714
- --color-background-accent-purple-lighter-pressed: #ffffff;
715
- --color-background-accent-purple-light-default: var(--color-purple-700);
716
- --color-background-accent-purple-light-hover: #ffffff;
717
- --color-background-accent-purple-light-pressed: #ffffff;
718
- --color-background-accent-purple-bold-default: var(--color-purple-300);
719
- --color-background-accent-purple-bold-hover: #ffffff;
720
- --color-background-accent-purple-bold-pressed: #ffffff;
721
- --color-background-accent-magenta-default: var(--color-magenta-500);
722
- --color-background-accent-magenta-hover: #ffffff;
723
- --color-background-accent-magenta-pressed: #ffffff;
724
- --color-background-accent-magenta-lighter-default: var(--color-magenta-900);
725
- --color-background-accent-magenta-lighter-hover: #ffffff;
726
- --color-background-accent-magenta-lighter-pressed: #ffffff;
727
- --color-background-accent-magenta-light-default: var(--color-magenta-700);
728
- --color-background-accent-magenta-light-hover: #ffffff;
729
- --color-background-accent-magenta-light-pressed: #ffffff;
730
- --color-background-accent-magenta-bold-default: var(--color-magenta-300);
731
- --color-background-accent-magenta-bold-hover: #ffffff;
732
- --color-background-accent-magenta-bold-pressed: #ffffff;
733
- --color-background-accent-yellow-default: #ffffff;
734
- --color-background-accent-yellow-hover: #ffffff;
735
- --color-background-accent-yellow-pressed: #ffffff;
736
- --color-background-accent-yellow-lighter-default: #ffffff;
737
- --color-background-accent-yellow-lighter-hover: #ffffff;
738
- --color-background-accent-yellow-lighter-pressed: #ffffff;
739
- --color-background-accent-yellow-light-default: #ffffff;
740
- --color-background-accent-yellow-light-hover: #ffffff;
741
- --color-background-accent-yellow-light-pressed: #ffffff;
742
- --color-background-accent-yellow-bold-default: #ffffff;
743
- --color-background-accent-yellow-bold-hover: #ffffff;
744
- --color-background-accent-yellow-bold-pressed: #ffffff;
745
- --color-background-neutral-default: var(--color-dark-neutral-alpha-300a);
746
- --color-background-neutral-hover: var(--color-dark-neutral-alpha-400a);
747
- --color-background-neutral-pressed: var(--color-dark-neutral-alpha-500a);
748
- --color-background-neutral-light-pressed: var(--color-dark-neutral-alpha-300a);
749
- --color-background-neutral-light-default1: var(--color-dark-neutral-alpha-100a);
750
- --color-background-neutral-light-hover: var(--color-dark-neutral-alpha-200a);
751
- --color-background-neutral-lighter-hover: var(--color-dark-neutral-alpha-100a);
752
- --color-background-neutral-lighter-pressed: var(--color-dark-neutral-alpha-200a);
753
- --color-background-neutral-lighter-default: rgba(166, 197, 226, 0);
754
- --color-background-info-default: #ffffff;
755
- --color-background-info-hover: #ffffff;
756
- --color-background-info-pressed: #ffffff;
757
- --color-background-success-default: #ffffff;
758
- --color-background-success-hover: #ffffff;
759
- --color-background-success-pressed: #ffffff;
760
- --color-background-alert-default: #ffffff;
761
- --color-background-alert-hover: #ffffff;
762
- --color-background-alert-pressed: #ffffff;
763
- --color-background-danger-default: #ffffff;
764
- --color-background-danger-hover: #ffffff;
765
- --color-background-danger-pressed: #ffffff;
766
- --color-border-primary: var(--color-dark-neutral-200);
767
- --color-border-secondary: var(--color-dark-neutral-300);
768
- --color-border-tertiary: var(--color-dark-neutral-400);
769
- --color-border-focus: rgba(115, 178, 172, 0.4);
770
- --color-border-selected: var(--color-bcc-500);
771
- --color-border-disabled: var(--color-dark-neutral-200);
772
- --color-border-accent-red-default: var(--color-red-500);
773
- --color-border-accent-red-hover: var(--color-red-400);
774
- --color-border-accent-red-pressed: var(--color-red-300);
775
- --color-border-accent-rust-default: var(--color-rust-500);
776
- --color-border-accent-rust-hover: var(--color-rust-400);
777
- --color-border-accent-rust-pressed: var(--color-rust-300);
778
- --color-border-accent-yellow-default: #ffffff;
779
- --color-border-accent-yellow-hover: #ffffff;
780
- --color-border-accent-yellow-pressed: #ffffff;
781
- --color-border-accent-green-default: var(--color-green-500);
782
- --color-border-accent-green-hover: var(--color-green-400);
783
- --color-border-accent-green-pressed: var(--color-green-300);
784
- --color-border-accent-teal-default: var(--color-teal-500);
785
- --color-border-accent-teal-hover: var(--color-teal-400);
786
- --color-border-accent-teal-pressed: var(--color-teal-300);
787
- --color-border-accent-sand-default: var(--color-sand-500);
788
- --color-border-accent-sand-hover: var(--color-sand-400);
789
- --color-border-accent-sand-pressed: var(--color-sand-300);
790
- --color-border-accent-blue-default: var(--color-blue-500);
791
- --color-border-accent-blue-hover: var(--color-blue-400);
792
- --color-border-accent-blue-pressed: var(--color-blue-300);
793
- --color-border-accent-purple-default: var(--color-purple-500);
794
- --color-border-accent-purple-hover: var(--color-purple-400);
795
- --color-border-accent-purple-pressed: var(--color-purple-300);
796
- --color-border-accent-magenta-default: var(--color-magenta-500);
797
- --color-border-accent-magenta-hover: var(--color-magenta-400);
798
- --color-border-accent-magenta-pressed: var(--color-magenta-300);
799
- }
586
+ @variant dark {
587
+ @theme {
588
+ /* ✅ Semantic Colors */
589
+ --color-surface-primary: var(--color-dark-neutral-0);
590
+ --color-surface-secondary: var(--color-dark-neutral-200);
591
+ --color-surface-overlay-default: var(--color-dark-neutral-alpha-500a);
592
+ --color-surface-inverse-primary: var(--color-neutral-0);
593
+ --color-surface-inverse-secondary: var(--color-neutral-200);
594
+ --color-divider-light: var(--color-dark-neutral-100);
595
+ --color-divider-default: var(--color-dark-neutral-200);
596
+ --color-divider-bold: var(--color-dark-neutral-300);
597
+ --color-text-primary: var(--color-dark-neutral-1100);
598
+ --color-text-secondary: var(--color-dark-neutral-1100);
599
+ --color-text-tertiary: var(--color-dark-neutral-400);
600
+ --color-text-inverse: var(--color-dark-neutral-0);
601
+ --color-text-disabled: var(--color-dark-neutral-alpha-400a);
602
+ --color-text-success: var(--color-green-500);
603
+ --color-text-alert: var(--color-red-500);
604
+ --color-text-Info: var(--color-dark-neutral-0);
605
+ --color-text-danger: var(--color-dark-neutral-0);
606
+ --color-text-brand-default: var(--color-bcc-400);
607
+ --color-text-brand-bold: var(--color-bcc-300);
608
+ --color-text-accent-rust-default: var(--color-rust-400);
609
+ --color-text-accent-rust-bold: var(--color-rust-300);
610
+ --color-text-accent-yellow-default: var(--color-red-400);
611
+ --color-text-accent-yellow-bold: var(--color-red-300);
612
+ --color-text-accent-green-default: var(--color-green-400);
613
+ --color-text-accent-green-bold: var(--color-green-300);
614
+ --color-text-accent-teal-default: var(--color-teal-400);
615
+ --color-text-accent-teal-bold: var(--color-teal-300);
616
+ --color-text-accent-sand-default: var(--color-sand-400);
617
+ --color-text-accent-sand-bold: var(--color-sand-300);
618
+ --color-text-accent-blue-default: var(--color-blue-400);
619
+ --color-text-accent-blue-bold: var(--color-blue-300);
620
+ --color-text-accent-purple-default: var(--color-purple-400);
621
+ --color-text-accent-purple-bold: var(--color-purple-300);
622
+ --color-text-accent-magenta-default: var(--color-magenta-400);
623
+ --color-text-accent-magenta-bold: var(--color-magenta-300);
624
+ --color-icon-primary: var(--color-dark-neutral-1100);
625
+ --color-icon-secondary: var(--color-dark-neutral-700);
626
+ --color-icon-tertiary: var(--color-dark-neutral-400);
627
+ --color-icon-inverse: var(--color-dark-neutral-0);
628
+ --color-icon-disabled: var(--color-dark-neutral-alpha-400a);
629
+ --color-icon-success: var(--color-green-500);
630
+ --color-icon-alert: var(--color-red-500);
631
+ --color-icon-info: #ffffff;
632
+ --color-icon-danger: #ffffff;
633
+ --color-icon-accent-blue: var(--color-blue-400);
634
+ --color-icon-accent-red: var(--color-red-400);
635
+ --color-icon-accent-green: var(--color-green-400);
636
+ --color-icon-accent-rust: var(--color-rust-400);
637
+ --color-icon-accent-teal: var(--color-teal-400);
638
+ --color-icon-accent-purple: var(--color-purple-400);
639
+ --color-icon-accent-magenta: var(--color-magenta-400);
640
+ --color-icon-accent-sand: var(--color-sand-400);
641
+ --color-icon-brand: var(--color-bcc-400);
642
+ --color-link-default: var(--color-blue-500);
643
+ --color-link-hover: var(--color-blue-400);
644
+ --color-link-visited: var(--color-blue-300);
645
+ --color-background-disabled-default: #ffffff;
646
+ --color-background-brand-default: var(--color-bcc-500);
647
+ --color-background-brand-hover: var(--color-bcc-400);
648
+ --color-background-brand-pressed: var(--color-bcc-300);
649
+ --color-background-brand-lighter-default: var(--color-bcc-900);
650
+ --color-background-brand-lighter-hover: var(--color-bcc-800);
651
+ --color-background-brand-lighter-pressed: var(--color-bcc-700);
652
+ --color-background-brand-light-default: var(--color-bcc-700);
653
+ --color-background-brand-light-hover: var(--color-bcc-600);
654
+ --color-background-brand-light-pressed: var(--color-bcc-500);
655
+ --color-background-brand-bold-default: var(--color-bcc-300);
656
+ --color-background-brand-bold-hover: var(--color-bcc-200);
657
+ --color-background-brand-bold-pressed: var(--color-bcc-100);
658
+ --color-background-accent-red-default: var(--color-red-500);
659
+ --color-background-accent-red-hover: var(--color-red-400);
660
+ --color-background-accent-red-pressed: var(--color-red-300);
661
+ --color-background-accent-red-lighter-default: var(--color-red-900);
662
+ --color-background-accent-red-lighter-hover: var(--color-red-800);
663
+ --color-background-accent-red-lighter-pressed: var(--color-red-700);
664
+ --color-background-accent-red-light-default: var(--color-red-700);
665
+ --color-background-accent-red-light-hover: var(--color-red-600);
666
+ --color-background-accent-red-light-pressed: var(--color-red-500);
667
+ --color-background-accent-red-bold-default: var(--color-red-300);
668
+ --color-background-accent-red-bold-hover: var(--color-red-400);
669
+ --color-background-accent-red-bold-pressed: var(--color-red-500);
670
+ --color-background-accent-rust-default: var(--color-rust-500);
671
+ --color-background-accent-rust-hover: var(--color-rust-400);
672
+ --color-background-accent-rust-pressed: var(--color-rust-300);
673
+ --color-background-accent-rust-lighter-default: var(--color-rust-900);
674
+ --color-background-accent-rust-lighter-hover: var(--color-rust-800);
675
+ --color-background-accent-rust-lighter-pressed: var(--color-rust-700);
676
+ --color-background-accent-rust-light-default: var(--color-rust-700);
677
+ --color-background-accent-rust-light-hover: var(--color-rust-600);
678
+ --color-background-accent-rust-light-pressed: var(--color-rust-500);
679
+ --color-background-accent-rust-bold-default: var(--color-rust-300);
680
+ --color-background-accent-rust-bold-hover: var(--color-rust-400);
681
+ --color-background-accent-rust-bold-pressed: var(--color-rust-500);
682
+ --color-background-accent-green-default: var(--color-green-600);
683
+ --color-background-accent-green-hover: var(--color-green-700);
684
+ --color-background-accent-green-pressed: var(--color-green-800);
685
+ --color-background-accent-green-lighter-default: var(--color-green-900);
686
+ --color-background-accent-green-lighter-hover: var(--color-green-800);
687
+ --color-background-accent-green-lighter-pressed: var(--color-green-700);
688
+ --color-background-accent-green-light-default: var(--color-green-700);
689
+ --color-background-accent-green-light-hover: var(--color-green-600);
690
+ --color-background-accent-green-light-pressed: var(--color-green-500);
691
+ --color-background-accent-green-bold-default: var(--color-green-300);
692
+ --color-background-accent-green-bold-hover: var(--color-green-400);
693
+ --color-background-accent-green-bold-pressed: var(--color-green-500);
694
+ --color-background-accent-teal-default: var(--color-teal-500);
695
+ --color-background-accent-teal-hover: var(--color-teal-400);
696
+ --color-background-accent-teal-pressed: var(--color-teal-300);
697
+ --color-background-accent-teal-lighter-default: var(--color-teal-900);
698
+ --color-background-accent-teal-lighter-hover: #ffffff;
699
+ --color-background-accent-teal-lighter-pressed: #ffffff;
700
+ --color-background-accent-teal-light-default: var(--color-teal-700);
701
+ --color-background-accent-teal-light-hover: #ffffff;
702
+ --color-background-accent-teal-light-pressed: #ffffff;
703
+ --color-background-accent-teal-bold-default: var(--color-teal-300);
704
+ --color-background-accent-teal-bold-hover: #ffffff;
705
+ --color-background-accent-teal-bold-pressed: #ffffff;
706
+ --color-background-accent-sand-default: var(--color-sand-500);
707
+ --color-background-accent-sand-hover: #ffffff;
708
+ --color-background-accent-sand-pressed: #ffffff;
709
+ --color-background-accent-sand-lighter-default: var(--color-sand-900);
710
+ --color-background-accent-sand-lighter-hover: var(--color-sand-800);
711
+ --color-background-accent-sand-lighter-pressed: #ffffff;
712
+ --color-background-accent-sand-light-default: var(--color-sand-700);
713
+ --color-background-accent-sand-light-hover: #ffffff;
714
+ --color-background-accent-sand-light-pressed: #ffffff;
715
+ --color-background-accent-sand-bold-default: var(--color-sand-300);
716
+ --color-background-accent-sand-bold-hover: #ffffff;
717
+ --color-background-accent-sand-bold-pressed: #ffffff;
718
+ --color-background-accent-blue-default: var(--color-blue-500);
719
+ --color-background-accent-blue-hover: #ffffff;
720
+ --color-background-accent-blue-pressed: #ffffff;
721
+ --color-background-accent-blue-lighter-default: var(--color-blue-900);
722
+ --color-background-accent-blue-lighter-hover: #ffffff;
723
+ --color-background-accent-blue-lighter-pressed: #ffffff;
724
+ --color-background-accent-blue-light-default: var(--color-blue-700);
725
+ --color-background-accent-blue-light-hover: #ffffff;
726
+ --color-background-accent-blue-light-pressed: #ffffff;
727
+ --color-background-accent-blue-bold-default: var(--color-blue-300);
728
+ --color-background-accent-blue-bold-hover: #ffffff;
729
+ --color-background-accent-blue-bold-pressed: #ffffff;
730
+ --color-background-accent-purple-default: var(--color-purple-500);
731
+ --color-background-accent-purple-hover: #ffffff;
732
+ --color-background-accent-purple-pressed: #ffffff;
733
+ --color-background-accent-purple-lighter-default: var(--color-purple-900);
734
+ --color-background-accent-purple-lighter-hover: #ffffff;
735
+ --color-background-accent-purple-lighter-pressed: #ffffff;
736
+ --color-background-accent-purple-light-default: var(--color-purple-700);
737
+ --color-background-accent-purple-light-hover: #ffffff;
738
+ --color-background-accent-purple-light-pressed: #ffffff;
739
+ --color-background-accent-purple-bold-default: var(--color-purple-300);
740
+ --color-background-accent-purple-bold-hover: #ffffff;
741
+ --color-background-accent-purple-bold-pressed: #ffffff;
742
+ --color-background-accent-magenta-default: var(--color-magenta-500);
743
+ --color-background-accent-magenta-hover: #ffffff;
744
+ --color-background-accent-magenta-pressed: #ffffff;
745
+ --color-background-accent-magenta-lighter-default: var(--color-magenta-900);
746
+ --color-background-accent-magenta-lighter-hover: #ffffff;
747
+ --color-background-accent-magenta-lighter-pressed: #ffffff;
748
+ --color-background-accent-magenta-light-default: var(--color-magenta-700);
749
+ --color-background-accent-magenta-light-hover: #ffffff;
750
+ --color-background-accent-magenta-light-pressed: #ffffff;
751
+ --color-background-accent-magenta-bold-default: var(--color-magenta-300);
752
+ --color-background-accent-magenta-bold-hover: #ffffff;
753
+ --color-background-accent-magenta-bold-pressed: #ffffff;
754
+ --color-background-accent-yellow-default: #ffffff;
755
+ --color-background-accent-yellow-hover: #ffffff;
756
+ --color-background-accent-yellow-pressed: #ffffff;
757
+ --color-background-accent-yellow-lighter-default: #ffffff;
758
+ --color-background-accent-yellow-lighter-hover: #ffffff;
759
+ --color-background-accent-yellow-lighter-pressed: #ffffff;
760
+ --color-background-accent-yellow-light-default: #ffffff;
761
+ --color-background-accent-yellow-light-hover: #ffffff;
762
+ --color-background-accent-yellow-light-pressed: #ffffff;
763
+ --color-background-accent-yellow-bold-default: #ffffff;
764
+ --color-background-accent-yellow-bold-hover: #ffffff;
765
+ --color-background-accent-yellow-bold-pressed: #ffffff;
766
+ --color-background-neutral-default: var(--color-dark-neutral-alpha-300a);
767
+ --color-background-neutral-hover: var(--color-dark-neutral-alpha-400a);
768
+ --color-background-neutral-pressed: var(--color-dark-neutral-alpha-500a);
769
+ --color-background-neutral-light-pressed: var(--color-dark-neutral-alpha-300a);
770
+ --color-background-neutral-light-default1: var(--color-dark-neutral-alpha-100a);
771
+ --color-background-neutral-light-hover: var(--color-dark-neutral-alpha-200a);
772
+ --color-background-neutral-lighter-hover: var(--color-dark-neutral-alpha-100a);
773
+ --color-background-neutral-lighter-pressed: var(--color-dark-neutral-alpha-200a);
774
+ --color-background-neutral-lighter-default: rgba(166, 197, 226, 0);
775
+ --color-background-info-default: #ffffff;
776
+ --color-background-info-hover: #ffffff;
777
+ --color-background-info-pressed: #ffffff;
778
+ --color-background-success-default: #ffffff;
779
+ --color-background-success-hover: #ffffff;
780
+ --color-background-success-pressed: #ffffff;
781
+ --color-background-alert-default: #ffffff;
782
+ --color-background-alert-hover: #ffffff;
783
+ --color-background-alert-pressed: #ffffff;
784
+ --color-background-danger-default: #ffffff;
785
+ --color-background-danger-hover: #ffffff;
786
+ --color-background-danger-pressed: #ffffff;
787
+ --color-border-primary: var(--color-dark-neutral-200);
788
+ --color-border-secondary: var(--color-dark-neutral-300);
789
+ --color-border-tertiary: var(--color-dark-neutral-400);
790
+ --color-border-focus: rgba(115, 178, 172, 0.4);
791
+ --color-border-selected: var(--color-bcc-500);
792
+ --color-border-disabled: var(--color-dark-neutral-200);
793
+ --color-border-accent-red-default: var(--color-red-500);
794
+ --color-border-accent-red-hover: var(--color-red-400);
795
+ --color-border-accent-red-pressed: var(--color-red-300);
796
+ --color-border-accent-rust-default: var(--color-rust-500);
797
+ --color-border-accent-rust-hover: var(--color-rust-400);
798
+ --color-border-accent-rust-pressed: var(--color-rust-300);
799
+ --color-border-accent-yellow-default: #ffffff;
800
+ --color-border-accent-yellow-hover: #ffffff;
801
+ --color-border-accent-yellow-pressed: #ffffff;
802
+ --color-border-accent-green-default: var(--color-green-500);
803
+ --color-border-accent-green-hover: var(--color-green-400);
804
+ --color-border-accent-green-pressed: var(--color-green-300);
805
+ --color-border-accent-teal-default: var(--color-teal-500);
806
+ --color-border-accent-teal-hover: var(--color-teal-400);
807
+ --color-border-accent-teal-pressed: var(--color-teal-300);
808
+ --color-border-accent-sand-default: var(--color-sand-500);
809
+ --color-border-accent-sand-hover: var(--color-sand-400);
810
+ --color-border-accent-sand-pressed: var(--color-sand-300);
811
+ --color-border-accent-blue-default: var(--color-blue-500);
812
+ --color-border-accent-blue-hover: var(--color-blue-400);
813
+ --color-border-accent-blue-pressed: var(--color-blue-300);
814
+ --color-border-accent-purple-default: var(--color-purple-500);
815
+ --color-border-accent-purple-hover: var(--color-purple-400);
816
+ --color-border-accent-purple-pressed: var(--color-purple-300);
817
+ --color-border-accent-magenta-default: var(--color-magenta-500);
818
+ --color-border-accent-magenta-hover: var(--color-magenta-400);
819
+ --color-border-accent-magenta-pressed: var(--color-magenta-300);
820
+ }
821
+ }
package/dist/variables.css CHANGED
@@ -140,7 +140,7 @@
140
140
  --dimension-space-600: 3rem;
141
141
  --dimension-space-800: 4rem;
142
142
  --dimension-space-1000: 80px;
143
- --border-width-base: 1px;
143
+ --border-width-sm: 1px;
144
144
  --border-width-md: 2px;
145
145
  --border-radius-none: 0;
146
146
  --border-radius-xs: 0.125rem;
@@ -155,15 +155,16 @@
155
155
  --icon-size-md: 1.5rem;
156
156
  --icon-size-lg: 2rem;
157
157
  --icon-size-xl: 3rem;
158
- --text-decoration-line-none: none;
159
- --text-decoration-line-underline: underline;
160
- --text-decoration-line-line-through: line-through;
158
+ --text-decoration-none: none;
159
+ --text-decoration-underline: underline;
160
+ --text-decoration-line-through: line-through;
161
161
  --text-transform-uppercase: uppercase;
162
162
  --text-transform-lowercase: lowercase;
163
163
  --text-transform-capitalize: capitalize;
164
+ --text-transform-none: none;
164
165
  --font-size-text-xs: 0.75rem;
165
166
  --font-size-text-sm: 0.875rem;
166
- --font-size-text-base: 1rem;
167
+ --font-size-text-md: 1rem;
167
168
  --font-size-text-lg: 1.25rem;
168
169
  --font-size-text-xl: 1.5rem;
169
170
  --font-size-text-2xl: 2rem;
@@ -182,13 +183,19 @@
182
183
  --line-height-text-xl-leading-tight: 1.75;
183
184
  --line-height-text-lg-leading-none: 1.25rem;
184
185
  --line-height-text-lg-leading-tight: 1.5rem;
185
- --line-height-text-base-leading-none: 1rem;
186
- --line-height-text-base-leading-tight: 1.25;
187
- --line-height-text-base-leading-normal: 1.5rem;
186
+ --line-height-text-md-leading-none: 1rem;
187
+ --line-height-text-md-leading-tight: 1.25;
188
+ --line-height-text-md-leading-normal: 1.5rem;
188
189
  --line-height-text-sm-leading-none: 0.875rem;
189
190
  --line-height-text-sm-leading-normal: 1.25rem;
190
191
  --line-height-text-xs-leading-none: 0.75rem;
191
192
  --line-height-text-xs-leading-normal: 1.25rem;
193
+ --space-between-0: var(--dimension-space-0);
194
+ --tracking-tighter: -0.04em;
195
+ --tracking-tight: -0.02em;
196
+ --tracking-normal: 0em;
197
+ --tracking-wide: 0.04em;
198
+ --text-indent-0: var(--dimension-space-0);
192
199
  --font-families-archivo: Archivo;
193
200
  --font-weights-archivo-thin: 100;
194
201
  --font-weights-archivo-extralight: 200;
@@ -435,43 +442,43 @@
435
442
  --color-border-accent-magenta-hover: var(--color-magenta-700);
436
443
  --color-border-accent-magenta-pressed: var(--color-magenta-800);
437
444
  --heading-4xl-bold: var(--font-weight-bold-700) var(--font-size-text-4xl)/var(--line-height-text-4xl-leading-tight) var(--font-families-archivo);
438
- --heading-4xl-bold-text-decoration: var(--text-decoration-line-none);
445
+ --heading-4xl-bold-text-decoration: var(--text-decoration-none);
439
446
  --heading-4xl-medium: var(--font-weight-medium-500) var(--font-size-text-4xl)/var(--line-height-text-4xl-leading-tight) var(--font-families-archivo);
440
- --heading-4xl-medium-text-decoration: var(--text-decoration-line-none);
447
+ --heading-4xl-medium-text-decoration: var(--text-decoration-none);
441
448
  --heading-3xl-bold: var(--font-weight-bold-700) var(--font-size-text-3xl)/var(--line-height-text-3xl-leading-tight) var(--font-families-archivo);
442
- --heading-3xl-bold-text-decoration: var(--text-decoration-line-none);
449
+ --heading-3xl-bold-text-decoration: var(--text-decoration-none);
443
450
  --heading-3xl-medium: var(--font-weight-medium-500) var(--font-size-text-3xl)/var(--line-height-text-3xl-leading-tight) var(--font-families-archivo);
444
- --heading-3xl-medium-text-decoration: var(--text-decoration-line-none);
451
+ --heading-3xl-medium-text-decoration: var(--text-decoration-none);
445
452
  --heading-2xl-bold: var(--font-weight-bold-700) var(--font-size-text-2xl)/var(--line-height-text-2xl-leading-tight) var(--font-families-archivo);
446
- --heading-2xl-bold-text-decoration: var(--text-decoration-line-none);
453
+ --heading-2xl-bold-text-decoration: var(--text-decoration-none);
447
454
  --heading-2xl-medium: var(--font-weight-medium-500) var(--font-size-text-2xl)/var(--line-height-text-2xl-leading-tight) var(--font-families-archivo);
448
- --heading-2xl-medium-text-decoration: var(--text-decoration-line-none);
455
+ --heading-2xl-medium-text-decoration: var(--text-decoration-none);
449
456
  --heading-xl-bold: var(--font-weight-bold-700) var(--font-size-text-xl)/var(--line-height-text-xl-leading-tight) var(--font-families-archivo);
450
- --heading-xl-bold-text-decoration: var(--text-decoration-line-none);
457
+ --heading-xl-bold-text-decoration: var(--text-decoration-none);
451
458
  --heading-xl-medium: var(--font-weight-medium-500) var(--font-size-text-xl)/var(--line-height-text-xl-leading-tight) var(--font-families-archivo);
452
- --heading-xl-medium-text-decoration: var(--text-decoration-line-none);
459
+ --heading-xl-medium-text-decoration: var(--text-decoration-none);
453
460
  --heading-lg-bold: var(--font-weight-bold-700) var(--font-size-text-lg)/var(--line-height-text-lg-leading-tight) var(--font-families-archivo);
454
- --heading-lg-bold-text-decoration: var(--text-decoration-line-none);
461
+ --heading-lg-bold-text-decoration: var(--text-decoration-none);
455
462
  --heading-lg-medium: var(--font-weight-medium-500) var(--font-size-text-lg)/var(--line-height-text-lg-leading-tight) var(--font-families-archivo);
456
- --heading-lg-medium-text-decoration: var(--text-decoration-line-none);
457
- --body-base-bold: var(--font-weight-bold-700) var(--font-size-text-base)/var(--line-height-text-base-leading-normal) var(--font-families-archivo);
458
- --body-base-bold-text-decoration: var(--text-decoration-line-none);
459
- --body-base-medium: var(--font-weight-medium-500) var(--font-size-text-base)/var(--line-height-text-base-leading-normal) var(--font-families-archivo);
460
- --body-base-medium-text-decoration: var(--text-decoration-line-none);
461
- --body-base-regular: var(--font-weight-regular-400) var(--font-size-text-base)/var(--line-height-text-base-leading-normal) var(--font-families-archivo);
462
- --body-base-regular-text-decoration: var(--text-decoration-line-none);
463
+ --heading-lg-medium-text-decoration: var(--text-decoration-none);
464
+ --body-base-bold: var(--font-weight-bold-700) var(--font-size-text-md)/var(--line-height-text-md-leading-normal) var(--font-families-archivo);
465
+ --body-base-bold-text-decoration: var(--text-decoration-none);
466
+ --body-base-medium: var(--font-weight-medium-500) var(--font-size-text-md)/var(--line-height-text-md-leading-normal) var(--font-families-archivo);
467
+ --body-base-medium-text-decoration: var(--text-decoration-none);
468
+ --body-base-regular: var(--font-weight-regular-400) var(--font-size-text-md)/var(--line-height-text-md-leading-normal) var(--font-families-archivo);
469
+ --body-base-regular-text-decoration: var(--text-decoration-none);
463
470
  --body-sm-bold: var(--font-weight-bold-700) var(--font-size-text-sm)/var(--line-height-text-sm-leading-normal) var(--font-families-archivo);
464
- --body-sm-bold-text-decoration: var(--text-decoration-line-none);
471
+ --body-sm-bold-text-decoration: var(--text-decoration-none);
465
472
  --body-sm-medium: var(--font-weight-medium-500) var(--font-size-text-sm)/var(--line-height-text-sm-leading-normal) var(--font-families-archivo);
466
- --body-sm-medium-text-decoration: var(--text-decoration-line-none);
473
+ --body-sm-medium-text-decoration: var(--text-decoration-none);
467
474
  --body-sm-regular: var(--font-weight-regular-400) var(--font-size-text-sm)/var(--line-height-text-sm-leading-normal) var(--font-families-archivo);
468
- --body-sm-regular-text-decoration: var(--text-decoration-line-none);
475
+ --body-sm-regular-text-decoration: var(--text-decoration-none);
469
476
  --body-xs-bold: var(--font-weight-bold-700) var(--font-size-text-xs)/var(--line-height-text-xs-leading-normal) var(--font-families-archivo);
470
- --body-xs-bold-text-decoration: var(--text-decoration-line-none);
477
+ --body-xs-bold-text-decoration: var(--text-decoration-none);
471
478
  --body-xs-medium: var(--font-weight-medium-500) var(--font-size-text-xs)/var(--line-height-text-xs-leading-normal) var(--font-families-archivo);
472
- --body-xs-medium-text-decoration: var(--text-decoration-line-none);
479
+ --body-xs-medium-text-decoration: var(--text-decoration-none);
473
480
  --body-xs-regular: var(--font-weight-regular-400) var(--font-size-text-xs)/var(--line-height-text-xs-leading-normal) var(--font-families-archivo);
474
- --body-xs-regular-text-decoration: var(--text-decoration-line-none);
481
+ --body-xs-regular-text-decoration: var(--text-decoration-none);
475
482
  --border-base: 1px none #dcdfe4;
476
483
  --border-brand: 2px none #0e6962;
477
484
  }
@@ -710,41 +717,41 @@
710
717
  --color-border-accent-magenta-hover: var(--color-magenta-400);
711
718
  --color-border-accent-magenta-pressed: var(--color-magenta-300);
712
719
  --heading-4xl-bold: var(--font-weight-bold-700) var(--font-size-text-4xl)/var(--line-height-text-4xl-leading-tight) var(--font-families-archivo);
713
- --heading-4xl-bold-text-decoration: var(--text-decoration-line-none);
720
+ --heading-4xl-bold-text-decoration: var(--text-decoration-none);
714
721
  --heading-4xl-medium: var(--font-weight-medium-500) var(--font-size-text-4xl)/var(--line-height-text-4xl-leading-tight) var(--font-families-archivo);
715
- --heading-4xl-medium-text-decoration: var(--text-decoration-line-none);
722
+ --heading-4xl-medium-text-decoration: var(--text-decoration-none);
716
723
  --heading-3xl-bold: var(--font-weight-bold-700) var(--font-size-text-3xl)/var(--line-height-text-3xl-leading-tight) var(--font-families-archivo);
717
- --heading-3xl-bold-text-decoration: var(--text-decoration-line-none);
724
+ --heading-3xl-bold-text-decoration: var(--text-decoration-none);
718
725
  --heading-3xl-medium: var(--font-weight-medium-500) var(--font-size-text-3xl)/var(--line-height-text-3xl-leading-tight) var(--font-families-archivo);
719
- --heading-3xl-medium-text-decoration: var(--text-decoration-line-none);
726
+ --heading-3xl-medium-text-decoration: var(--text-decoration-none);
720
727
  --heading-2xl-bold: var(--font-weight-bold-700) var(--font-size-text-2xl)/var(--line-height-text-2xl-leading-tight) var(--font-families-archivo);
721
- --heading-2xl-bold-text-decoration: var(--text-decoration-line-none);
728
+ --heading-2xl-bold-text-decoration: var(--text-decoration-none);
722
729
  --heading-2xl-medium: var(--font-weight-medium-500) var(--font-size-text-2xl)/var(--line-height-text-2xl-leading-tight) var(--font-families-archivo);
723
- --heading-2xl-medium-text-decoration: var(--text-decoration-line-none);
730
+ --heading-2xl-medium-text-decoration: var(--text-decoration-none);
724
731
  --heading-xl-bold: var(--font-weight-bold-700) var(--font-size-text-xl)/var(--line-height-text-xl-leading-tight) var(--font-families-archivo);
725
- --heading-xl-bold-text-decoration: var(--text-decoration-line-none);
732
+ --heading-xl-bold-text-decoration: var(--text-decoration-none);
726
733
  --heading-xl-medium: var(--font-weight-medium-500) var(--font-size-text-xl)/var(--line-height-text-xl-leading-tight) var(--font-families-archivo);
727
- --heading-xl-medium-text-decoration: var(--text-decoration-line-none);
734
+ --heading-xl-medium-text-decoration: var(--text-decoration-none);
728
735
  --heading-lg-bold: var(--font-weight-bold-700) var(--font-size-text-lg)/var(--line-height-text-lg-leading-tight) var(--font-families-archivo);
729
- --heading-lg-bold-text-decoration: var(--text-decoration-line-none);
736
+ --heading-lg-bold-text-decoration: var(--text-decoration-none);
730
737
  --heading-lg-medium: var(--font-weight-medium-500) var(--font-size-text-lg)/var(--line-height-text-lg-leading-tight) var(--font-families-archivo);
731
- --heading-lg-medium-text-decoration: var(--text-decoration-line-none);
732
- --body-base-bold: var(--font-weight-bold-700) var(--font-size-text-base)/var(--line-height-text-base-leading-normal) var(--font-families-archivo);
733
- --body-base-bold-text-decoration: var(--text-decoration-line-none);
734
- --body-base-medium: var(--font-weight-medium-500) var(--font-size-text-base)/var(--line-height-text-base-leading-normal) var(--font-families-archivo);
735
- --body-base-medium-text-decoration: var(--text-decoration-line-none);
736
- --body-base-regular: var(--font-weight-regular-400) var(--font-size-text-base)/var(--line-height-text-base-leading-normal) var(--font-families-archivo);
737
- --body-base-regular-text-decoration: var(--text-decoration-line-none);
738
+ --heading-lg-medium-text-decoration: var(--text-decoration-none);
739
+ --body-base-bold: var(--font-weight-bold-700) var(--font-size-text-md)/var(--line-height-text-md-leading-normal) var(--font-families-archivo);
740
+ --body-base-bold-text-decoration: var(--text-decoration-none);
741
+ --body-base-medium: var(--font-weight-medium-500) var(--font-size-text-md)/var(--line-height-text-md-leading-normal) var(--font-families-archivo);
742
+ --body-base-medium-text-decoration: var(--text-decoration-none);
743
+ --body-base-regular: var(--font-weight-regular-400) var(--font-size-text-md)/var(--line-height-text-md-leading-normal) var(--font-families-archivo);
744
+ --body-base-regular-text-decoration: var(--text-decoration-none);
738
745
  --body-sm-bold: var(--font-weight-bold-700) var(--font-size-text-sm)/var(--line-height-text-sm-leading-normal) var(--font-families-archivo);
739
- --body-sm-bold-text-decoration: var(--text-decoration-line-none);
746
+ --body-sm-bold-text-decoration: var(--text-decoration-none);
740
747
  --body-sm-medium: var(--font-weight-medium-500) var(--font-size-text-sm)/var(--line-height-text-sm-leading-normal) var(--font-families-archivo);
741
- --body-sm-medium-text-decoration: var(--text-decoration-line-none);
748
+ --body-sm-medium-text-decoration: var(--text-decoration-none);
742
749
  --body-sm-regular: var(--font-weight-regular-400) var(--font-size-text-sm)/var(--line-height-text-sm-leading-normal) var(--font-families-archivo);
743
- --body-sm-regular-text-decoration: var(--text-decoration-line-none);
750
+ --body-sm-regular-text-decoration: var(--text-decoration-none);
744
751
  --body-xs-bold: var(--font-weight-bold-700) var(--font-size-text-xs)/var(--line-height-text-xs-leading-normal) var(--font-families-archivo);
745
- --body-xs-bold-text-decoration: var(--text-decoration-line-none);
752
+ --body-xs-bold-text-decoration: var(--text-decoration-none);
746
753
  --body-xs-medium: var(--font-weight-medium-500) var(--font-size-text-xs)/var(--line-height-text-xs-leading-normal) var(--font-families-archivo);
747
- --body-xs-medium-text-decoration: var(--text-decoration-line-none);
754
+ --body-xs-medium-text-decoration: var(--text-decoration-none);
748
755
  --body-xs-regular: var(--font-weight-regular-400) var(--font-size-text-xs)/var(--line-height-text-xs-leading-normal) var(--font-families-archivo);
749
- --body-xs-regular-text-decoration: var(--text-decoration-line-none);
756
+ --body-xs-regular-text-decoration: var(--text-decoration-none);
750
757
  }
package/package.json CHANGED
@@ -1,20 +1,22 @@
1
1
  {
2
2
  "name": "@bcc-code/design-tokens",
3
- "version": "1.0.6",
3
+ "version": "1.0.8",
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
+ "style": "dist/variables.css",
7
8
  "exports": {
8
9
  "./variables.css": "./dist/variables.css",
9
10
  "./tailwind.css": "./dist/tailwind.css",
10
- "./bcc-primevue-preset.js": "./dist/bcc-primevue-preset.js"
11
+ "./bcc-primevue-preset.js": "./dist/bcc-primevue-preset.js",
12
+ "./tailwind.config.js": "./dist/tailwind.config.js"
11
13
  },
12
14
  "files": [
13
15
  "dist",
14
16
  "README.md"
15
17
  ],
16
18
  "scripts": {
17
- "build": "node export-tokens/build.js && node export-tokens/generators/generate-css-variables.js && node export-tokens/generators/generate-primevue-preset.js && node export-tokens/generators/generate-tailwind-css.js"
19
+ "build": "node export-tokens/build.js && node export-tokens/generators/generate-css-variables.js && node export-tokens/generators/generate-primevue-preset.js && node export-tokens/generators/generate-tailwind-css.js && node export-tokens/generators/generate-tailwind-config.js"
18
20
  },
19
21
  "keywords": [
20
22
  "design-tokens",