@bcc-code/design-tokens 1.0.7 → 1.0.9

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 (4) hide show
  1. package/dist/bcc-primevue-preset.js +1 -1
  2. package/dist/tailwind.css +294 -294
  3. package/dist/variables.css +9 -9
  4. package/package.json +1 -1
package/dist/bcc-primevue-preset.js CHANGED
@@ -243,7 +243,7 @@ export const BCCPrimeVuePreset = definePreset(Aura, {
243
243
  "leading-none": "1.25rem",
244
244
  "leading-tight": "1.5rem"
245
245
  },
246
- "text-base": {
246
+ "text-md": {
247
247
  "leading-none": "1rem",
248
248
  "leading-tight": "1.25",
249
249
  "leading-normal": "1.5rem"
package/dist/tailwind.css CHANGED
@@ -1,4 +1,3 @@
1
-
2
1
  @import "tailwindcss";
3
2
 
4
3
  @theme {
@@ -156,46 +155,46 @@
156
155
  --opacity-opacity: #ffffff;
157
156
 
158
157
  /* ✅ Dimension space-0 */
159
- --dimension-space-0: 0 rem;
158
+ --spacing-space-0: 0 rem;
160
159
 
161
160
  /* ✅ Dimension space-25 */
162
- --dimension-space-25: 0.125rem;
161
+ --spacing-space-25: 0.125rem;
163
162
 
164
163
  /* ✅ Dimension space-50 */
165
- --dimension-space-50: 0.25rem;
164
+ --spacing-space-50: 0.25rem;
166
165
 
167
166
  /* ✅ Dimension space-75 */
168
- --dimension-space-75: 0.375rem;
167
+ --spacing-space-75: 0.375rem;
169
168
 
170
169
  /* ✅ Dimension space-100 */
171
- --dimension-space-100: 0.5rem;
170
+ --spacing-space-100: 0.5rem;
172
171
 
173
172
  /* ✅ Dimension space-150 */
174
- --dimension-space-150: 0.75rem;
173
+ --spacing-space-150: 0.75rem;
175
174
 
176
175
  /* ✅ Dimension space-200 */
177
- --dimension-space-200: 1rem;
176
+ --spacing-space-200: 1rem;
178
177
 
179
178
  /* ✅ Dimension space-250 */
180
- --dimension-space-250: 1.25rem;
179
+ --spacing-space-250: 1.25rem;
181
180
 
182
181
  /* ✅ Dimension space-300 */
183
- --dimension-space-300: 1.5rem;
182
+ --spacing-space-300: 1.5rem;
184
183
 
185
184
  /* ✅ Dimension space-400 */
186
- --dimension-space-400: 2rem;
185
+ --spacing-space-400: 2rem;
187
186
 
188
187
  /* ✅ Dimension space-500 */
189
- --dimension-space-500: 2.5rem;
188
+ --spacing-space-500: 2.5rem;
190
189
 
191
190
  /* ✅ Dimension space-600 */
192
- --dimension-space-600: 3rem;
191
+ --spacing-space-600: 3rem;
193
192
 
194
193
  /* ✅ Dimension space-800 */
195
- --dimension-space-800: 4rem;
194
+ --spacing-space-800: 4rem;
196
195
 
197
196
  /* ✅ Dimension space-1000 */
198
- --dimension-space-1000: 80px;
197
+ --spacing-space-1000: 80px;
199
198
 
200
199
  /* ✅ Border-width sm */
201
200
  --border-width-sm: 1px;
@@ -204,43 +203,43 @@
204
203
  --border-width-md: 2px;
205
204
 
206
205
  /* ✅ Border-radius none */
207
- --border-radius-none: 0;
206
+ --radius-none: 0;
208
207
 
209
208
  /* ✅ Border-radius xs */
210
- --border-radius-xs: 0.125rem;
209
+ --radius-xs: 0.125rem;
211
210
 
212
211
  /* ✅ Border-radius sm */
213
- --border-radius-sm: 0.25rem;
212
+ --radius-sm: 0.25rem;
214
213
 
215
214
  /* ✅ Border-radius md */
216
- --border-radius-md: 0.5rem;
215
+ --radius-md: 0.5rem;
217
216
 
218
217
  /* ✅ Border-radius lg */
219
- --border-radius-lg: 1rem;
218
+ --radius-lg: 1rem;
220
219
 
221
220
  /* ✅ Border-radius xl */
222
- --border-radius-xl: 2rem;
221
+ --radius-xl: 2rem;
223
222
 
224
223
  /* ✅ Border-radius 2xl */
225
- --border-radius-2xl: 3rem;
224
+ --radius-2xl: 3rem;
226
225
 
227
226
  /* ✅ Border-radius full */
228
- --border-radius-full: 999px;
227
+ --radius-full: 999px;
229
228
 
230
229
  /* ✅ Icon-size xs */
231
- --icon-size-xs: 1rem;
230
+ --spacing-xs: 1rem;
232
231
 
233
232
  /* ✅ Icon-size sm */
234
- --icon-size-sm: 1.25rem;
233
+ --spacing-sm: 1.25rem;
235
234
 
236
235
  /* ✅ Icon-size md */
237
- --icon-size-md: 1.5rem;
236
+ --spacing-md: 1.5rem;
238
237
 
239
238
  /* ✅ Icon-size lg */
240
- --icon-size-lg: 2rem;
239
+ --spacing-lg: 2rem;
241
240
 
242
241
  /* ✅ Icon-size xl */
243
- --icon-size-xl: 3rem;
242
+ --spacing-xl: 3rem;
244
243
 
245
244
  /* ✅ Text-decoration none */
246
245
  --text-decoration-none: none;
@@ -264,73 +263,73 @@
264
263
  --text-transform-none: none;
265
264
 
266
265
  /* ✅ Font-size text-xs */
267
- --font-size-text-xs: 0.75rem;
266
+ --text-text-xs: 0.75rem;
268
267
 
269
268
  /* ✅ Font-size text-sm */
270
- --font-size-text-sm: 0.875rem;
269
+ --text-text-sm: 0.875rem;
271
270
 
272
271
  /* ✅ Font-size text-md */
273
- --font-size-text-md: 1rem;
272
+ --text-text-md: 1rem;
274
273
 
275
274
  /* ✅ Font-size text-lg */
276
- --font-size-text-lg: 1.25rem;
275
+ --text-text-lg: 1.25rem;
277
276
 
278
277
  /* ✅ Font-size text-xl */
279
- --font-size-text-xl: 1.5rem;
278
+ --text-text-xl: 1.5rem;
280
279
 
281
280
  /* ✅ Font-size text-2xl */
282
- --font-size-text-2xl: 2rem;
281
+ --text-text-2xl: 2rem;
283
282
 
284
283
  /* ✅ Font-size text-3xl */
285
- --font-size-text-3xl: 2.25rem;
284
+ --text-text-3xl: 2.25rem;
286
285
 
287
286
  /* ✅ Font-size text-4xl */
288
- --font-size-text-4xl: 3rem;
287
+ --text-text-4xl: 3rem;
289
288
 
290
289
  /* ✅ Font-weight regular-400 */
291
- --font-weight-regular-400: {fontweights.archivo-regular};
290
+ --font-weight-regular-400: var(--fontweights-archivo-regular);
292
291
 
293
292
  /* ✅ Font-weight medium-500 */
294
- --font-weight-medium-500: {fontweights.archivo-medium};
293
+ --font-weight-medium-500: var(--fontweights-archivo-medium);
295
294
 
296
295
  /* ✅ Font-weight bold-700 */
297
- --font-weight-bold-700: {fontweights.archivo-bold};
296
+ --font-weight-bold-700: var(--fontweights-archivo-bold);
298
297
 
299
298
  /* ✅ Line-height text-4xl */
300
- --line-height-text-4xl-leading-none: 3rem;
301
- --line-height-text-4xl-leading-tight: 3.25rem;
299
+ --leading-text-4xl-leading-none: 3rem;
300
+ --leading-text-4xl-leading-tight: 3.25rem;
302
301
 
303
302
  /* ✅ Line-height text-3xl */
304
- --line-height-text-3xl-leading-none: 2.25rem;
305
- --line-height-text-3xl-leading-tight: 2.5rem;
303
+ --leading-text-3xl-leading-none: 2.25rem;
304
+ --leading-text-3xl-leading-tight: 2.5rem;
306
305
 
307
306
  /* ✅ Line-height text-2xl */
308
- --line-height-text-2xl-leading-none: 2rem;
309
- --line-height-text-2xl-leading-tight: 2.25rem;
307
+ --leading-text-2xl-leading-none: 2rem;
308
+ --leading-text-2xl-leading-tight: 2.25rem;
310
309
 
311
310
  /* ✅ Line-height text-xl */
312
- --line-height-text-xl-leading-none: 1.5rem;
313
- --line-height-text-xl-leading-tight: 1.75;
311
+ --leading-text-xl-leading-none: 1.5rem;
312
+ --leading-text-xl-leading-tight: 1.75;
314
313
 
315
314
  /* ✅ Line-height text-lg */
316
- --line-height-text-lg-leading-none: 1.25rem;
317
- --line-height-text-lg-leading-tight: 1.5rem;
315
+ --leading-text-lg-leading-none: 1.25rem;
316
+ --leading-text-lg-leading-tight: 1.5rem;
318
317
 
319
- /* ✅ Line-height text-base */
320
- --line-height-text-base-leading-none: 1rem;
321
- --line-height-text-base-leading-tight: 1.25;
322
- --line-height-text-base-leading-normal: 1.5rem;
318
+ /* ✅ Line-height text-md */
319
+ --leading-text-md-leading-none: 1rem;
320
+ --leading-text-md-leading-tight: 1.25;
321
+ --leading-text-md-leading-normal: 1.5rem;
323
322
 
324
323
  /* ✅ Line-height text-sm */
325
- --line-height-text-sm-leading-none: 0.875rem;
326
- --line-height-text-sm-leading-normal: 1.25rem;
324
+ --leading-text-sm-leading-none: 0.875rem;
325
+ --leading-text-sm-leading-normal: 1.25rem;
327
326
 
328
327
  /* ✅ Line-height text-xs */
329
- --line-height-text-xs-leading-none: 0.75rem;
330
- --line-height-text-xs-leading-normal: 1.25rem;
328
+ --leading-text-xs-leading-none: 0.75rem;
329
+ --leading-text-xs-leading-normal: 1.25rem;
331
330
 
332
331
  /* ✅ Space-between 0 */
333
- --space-between-0: {dimension.space-0};
332
+ --spacing-0: var(--dimension-space-0);
334
333
 
335
334
  /* ✅ Tracking tighter */
336
335
  --tracking-tighter: -0.04em;
@@ -345,12 +344,12 @@
345
344
  --tracking-wide: 0.04em;
346
345
 
347
346
  /* ✅ Text-indent 0 */
348
- --text-indent-0: {dimension.space-0};
347
+ --text-indent-0: var(--dimension-space-0);
349
348
 
350
349
  /* ✅ FontFamilies archivo */
351
350
  --fontFamilies-archivo: Archivo;
352
351
 
353
- /* ✅ Semantic */
352
+
354
353
  --color-surface-primary: var(--color-neutral-0);
355
354
  --color-surface-secondary: var(--color-neutral-200);
356
355
  --color-surface-overlay-default: var(--color-neutral-alpha-500a);
@@ -584,237 +583,238 @@
584
583
  --color-border-accent-magenta-pressed: var(--color-magenta-800);
585
584
  }
586
585
 
587
- @theme .dark-mode {
588
- /* ✅ Semantic */
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
- }
586
+ @variant dark {
587
+ @theme {
588
+ --color-surface-primary: var(--color-dark-neutral-0);
589
+ --color-surface-secondary: var(--color-dark-neutral-200);
590
+ --color-surface-overlay-default: var(--color-dark-neutral-alpha-500a);
591
+ --color-surface-inverse-primary: var(--color-neutral-0);
592
+ --color-surface-inverse-secondary: var(--color-neutral-200);
593
+ --color-divider-light: var(--color-dark-neutral-100);
594
+ --color-divider-default: var(--color-dark-neutral-200);
595
+ --color-divider-bold: var(--color-dark-neutral-300);
596
+ --color-text-primary: var(--color-dark-neutral-1100);
597
+ --color-text-secondary: var(--color-dark-neutral-1100);
598
+ --color-text-tertiary: var(--color-dark-neutral-400);
599
+ --color-text-inverse: var(--color-dark-neutral-0);
600
+ --color-text-disabled: var(--color-dark-neutral-alpha-400a);
601
+ --color-text-success: var(--color-green-500);
602
+ --color-text-alert: var(--color-red-500);
603
+ --color-text-Info: var(--color-dark-neutral-0);
604
+ --color-text-danger: var(--color-dark-neutral-0);
605
+ --color-text-brand-default: var(--color-bcc-400);
606
+ --color-text-brand-bold: var(--color-bcc-300);
607
+ --color-text-accent-rust-default: var(--color-rust-400);
608
+ --color-text-accent-rust-bold: var(--color-rust-300);
609
+ --color-text-accent-yellow-default: var(--color-red-400);
610
+ --color-text-accent-yellow-bold: var(--color-red-300);
611
+ --color-text-accent-green-default: var(--color-green-400);
612
+ --color-text-accent-green-bold: var(--color-green-300);
613
+ --color-text-accent-teal-default: var(--color-teal-400);
614
+ --color-text-accent-teal-bold: var(--color-teal-300);
615
+ --color-text-accent-sand-default: var(--color-sand-400);
616
+ --color-text-accent-sand-bold: var(--color-sand-300);
617
+ --color-text-accent-blue-default: var(--color-blue-400);
618
+ --color-text-accent-blue-bold: var(--color-blue-300);
619
+ --color-text-accent-purple-default: var(--color-purple-400);
620
+ --color-text-accent-purple-bold: var(--color-purple-300);
621
+ --color-text-accent-magenta-default: var(--color-magenta-400);
622
+ --color-text-accent-magenta-bold: var(--color-magenta-300);
623
+ --color-icon-primary: var(--color-dark-neutral-1100);
624
+ --color-icon-secondary: var(--color-dark-neutral-700);
625
+ --color-icon-tertiary: var(--color-dark-neutral-400);
626
+ --color-icon-inverse: var(--color-dark-neutral-0);
627
+ --color-icon-disabled: var(--color-dark-neutral-alpha-400a);
628
+ --color-icon-success: var(--color-green-500);
629
+ --color-icon-alert: var(--color-red-500);
630
+ --color-icon-info: #ffffff;
631
+ --color-icon-danger: #ffffff;
632
+ --color-icon-accent-blue: var(--color-blue-400);
633
+ --color-icon-accent-red: var(--color-red-400);
634
+ --color-icon-accent-green: var(--color-green-400);
635
+ --color-icon-accent-rust: var(--color-rust-400);
636
+ --color-icon-accent-teal: var(--color-teal-400);
637
+ --color-icon-accent-purple: var(--color-purple-400);
638
+ --color-icon-accent-magenta: var(--color-magenta-400);
639
+ --color-icon-accent-sand: var(--color-sand-400);
640
+ --color-icon-brand: var(--color-bcc-400);
641
+ --color-link-default: var(--color-blue-500);
642
+ --color-link-hover: var(--color-blue-400);
643
+ --color-link-visited: var(--color-blue-300);
644
+ --color-background-disabled-default: #ffffff;
645
+ --color-background-brand-default: var(--color-bcc-500);
646
+ --color-background-brand-hover: var(--color-bcc-400);
647
+ --color-background-brand-pressed: var(--color-bcc-300);
648
+ --color-background-brand-lighter-default: var(--color-bcc-900);
649
+ --color-background-brand-lighter-hover: var(--color-bcc-800);
650
+ --color-background-brand-lighter-pressed: var(--color-bcc-700);
651
+ --color-background-brand-light-default: var(--color-bcc-700);
652
+ --color-background-brand-light-hover: var(--color-bcc-600);
653
+ --color-background-brand-light-pressed: var(--color-bcc-500);
654
+ --color-background-brand-bold-default: var(--color-bcc-300);
655
+ --color-background-brand-bold-hover: var(--color-bcc-200);
656
+ --color-background-brand-bold-pressed: var(--color-bcc-100);
657
+ --color-background-accent-red-default: var(--color-red-500);
658
+ --color-background-accent-red-hover: var(--color-red-400);
659
+ --color-background-accent-red-pressed: var(--color-red-300);
660
+ --color-background-accent-red-lighter-default: var(--color-red-900);
661
+ --color-background-accent-red-lighter-hover: var(--color-red-800);
662
+ --color-background-accent-red-lighter-pressed: var(--color-red-700);
663
+ --color-background-accent-red-light-default: var(--color-red-700);
664
+ --color-background-accent-red-light-hover: var(--color-red-600);
665
+ --color-background-accent-red-light-pressed: var(--color-red-500);
666
+ --color-background-accent-red-bold-default: var(--color-red-300);
667
+ --color-background-accent-red-bold-hover: var(--color-red-400);
668
+ --color-background-accent-red-bold-pressed: var(--color-red-500);
669
+ --color-background-accent-rust-default: var(--color-rust-500);
670
+ --color-background-accent-rust-hover: var(--color-rust-400);
671
+ --color-background-accent-rust-pressed: var(--color-rust-300);
672
+ --color-background-accent-rust-lighter-default: var(--color-rust-900);
673
+ --color-background-accent-rust-lighter-hover: var(--color-rust-800);
674
+ --color-background-accent-rust-lighter-pressed: var(--color-rust-700);
675
+ --color-background-accent-rust-light-default: var(--color-rust-700);
676
+ --color-background-accent-rust-light-hover: var(--color-rust-600);
677
+ --color-background-accent-rust-light-pressed: var(--color-rust-500);
678
+ --color-background-accent-rust-bold-default: var(--color-rust-300);
679
+ --color-background-accent-rust-bold-hover: var(--color-rust-400);
680
+ --color-background-accent-rust-bold-pressed: var(--color-rust-500);
681
+ --color-background-accent-green-default: var(--color-green-600);
682
+ --color-background-accent-green-hover: var(--color-green-700);
683
+ --color-background-accent-green-pressed: var(--color-green-800);
684
+ --color-background-accent-green-lighter-default: var(--color-green-900);
685
+ --color-background-accent-green-lighter-hover: var(--color-green-800);
686
+ --color-background-accent-green-lighter-pressed: var(--color-green-700);
687
+ --color-background-accent-green-light-default: var(--color-green-700);
688
+ --color-background-accent-green-light-hover: var(--color-green-600);
689
+ --color-background-accent-green-light-pressed: var(--color-green-500);
690
+ --color-background-accent-green-bold-default: var(--color-green-300);
691
+ --color-background-accent-green-bold-hover: var(--color-green-400);
692
+ --color-background-accent-green-bold-pressed: var(--color-green-500);
693
+ --color-background-accent-teal-default: var(--color-teal-500);
694
+ --color-background-accent-teal-hover: var(--color-teal-400);
695
+ --color-background-accent-teal-pressed: var(--color-teal-300);
696
+ --color-background-accent-teal-lighter-default: var(--color-teal-900);
697
+ --color-background-accent-teal-lighter-hover: #ffffff;
698
+ --color-background-accent-teal-lighter-pressed: #ffffff;
699
+ --color-background-accent-teal-light-default: var(--color-teal-700);
700
+ --color-background-accent-teal-light-hover: #ffffff;
701
+ --color-background-accent-teal-light-pressed: #ffffff;
702
+ --color-background-accent-teal-bold-default: var(--color-teal-300);
703
+ --color-background-accent-teal-bold-hover: #ffffff;
704
+ --color-background-accent-teal-bold-pressed: #ffffff;
705
+ --color-background-accent-sand-default: var(--color-sand-500);
706
+ --color-background-accent-sand-hover: #ffffff;
707
+ --color-background-accent-sand-pressed: #ffffff;
708
+ --color-background-accent-sand-lighter-default: var(--color-sand-900);
709
+ --color-background-accent-sand-lighter-hover: var(--color-sand-800);
710
+ --color-background-accent-sand-lighter-pressed: #ffffff;
711
+ --color-background-accent-sand-light-default: var(--color-sand-700);
712
+ --color-background-accent-sand-light-hover: #ffffff;
713
+ --color-background-accent-sand-light-pressed: #ffffff;
714
+ --color-background-accent-sand-bold-default: var(--color-sand-300);
715
+ --color-background-accent-sand-bold-hover: #ffffff;
716
+ --color-background-accent-sand-bold-pressed: #ffffff;
717
+ --color-background-accent-blue-default: var(--color-blue-500);
718
+ --color-background-accent-blue-hover: #ffffff;
719
+ --color-background-accent-blue-pressed: #ffffff;
720
+ --color-background-accent-blue-lighter-default: var(--color-blue-900);
721
+ --color-background-accent-blue-lighter-hover: #ffffff;
722
+ --color-background-accent-blue-lighter-pressed: #ffffff;
723
+ --color-background-accent-blue-light-default: var(--color-blue-700);
724
+ --color-background-accent-blue-light-hover: #ffffff;
725
+ --color-background-accent-blue-light-pressed: #ffffff;
726
+ --color-background-accent-blue-bold-default: var(--color-blue-300);
727
+ --color-background-accent-blue-bold-hover: #ffffff;
728
+ --color-background-accent-blue-bold-pressed: #ffffff;
729
+ --color-background-accent-purple-default: var(--color-purple-500);
730
+ --color-background-accent-purple-hover: #ffffff;
731
+ --color-background-accent-purple-pressed: #ffffff;
732
+ --color-background-accent-purple-lighter-default: var(--color-purple-900);
733
+ --color-background-accent-purple-lighter-hover: #ffffff;
734
+ --color-background-accent-purple-lighter-pressed: #ffffff;
735
+ --color-background-accent-purple-light-default: var(--color-purple-700);
736
+ --color-background-accent-purple-light-hover: #ffffff;
737
+ --color-background-accent-purple-light-pressed: #ffffff;
738
+ --color-background-accent-purple-bold-default: var(--color-purple-300);
739
+ --color-background-accent-purple-bold-hover: #ffffff;
740
+ --color-background-accent-purple-bold-pressed: #ffffff;
741
+ --color-background-accent-magenta-default: var(--color-magenta-500);
742
+ --color-background-accent-magenta-hover: #ffffff;
743
+ --color-background-accent-magenta-pressed: #ffffff;
744
+ --color-background-accent-magenta-lighter-default: var(--color-magenta-900);
745
+ --color-background-accent-magenta-lighter-hover: #ffffff;
746
+ --color-background-accent-magenta-lighter-pressed: #ffffff;
747
+ --color-background-accent-magenta-light-default: var(--color-magenta-700);
748
+ --color-background-accent-magenta-light-hover: #ffffff;
749
+ --color-background-accent-magenta-light-pressed: #ffffff;
750
+ --color-background-accent-magenta-bold-default: var(--color-magenta-300);
751
+ --color-background-accent-magenta-bold-hover: #ffffff;
752
+ --color-background-accent-magenta-bold-pressed: #ffffff;
753
+ --color-background-accent-yellow-default: #ffffff;
754
+ --color-background-accent-yellow-hover: #ffffff;
755
+ --color-background-accent-yellow-pressed: #ffffff;
756
+ --color-background-accent-yellow-lighter-default: #ffffff;
757
+ --color-background-accent-yellow-lighter-hover: #ffffff;
758
+ --color-background-accent-yellow-lighter-pressed: #ffffff;
759
+ --color-background-accent-yellow-light-default: #ffffff;
760
+ --color-background-accent-yellow-light-hover: #ffffff;
761
+ --color-background-accent-yellow-light-pressed: #ffffff;
762
+ --color-background-accent-yellow-bold-default: #ffffff;
763
+ --color-background-accent-yellow-bold-hover: #ffffff;
764
+ --color-background-accent-yellow-bold-pressed: #ffffff;
765
+ --color-background-neutral-default: var(--color-dark-neutral-alpha-300a);
766
+ --color-background-neutral-hover: var(--color-dark-neutral-alpha-400a);
767
+ --color-background-neutral-pressed: var(--color-dark-neutral-alpha-500a);
768
+ --color-background-neutral-light-pressed: var(--color-dark-neutral-alpha-300a);
769
+ --color-background-neutral-light-default1: var(--color-dark-neutral-alpha-100a);
770
+ --color-background-neutral-light-hover: var(--color-dark-neutral-alpha-200a);
771
+ --color-background-neutral-lighter-hover: var(--color-dark-neutral-alpha-100a);
772
+ --color-background-neutral-lighter-pressed: var(--color-dark-neutral-alpha-200a);
773
+ --color-background-neutral-lighter-default: rgba(166, 197, 226, 0);
774
+ --color-background-info-default: #ffffff;
775
+ --color-background-info-hover: #ffffff;
776
+ --color-background-info-pressed: #ffffff;
777
+ --color-background-success-default: #ffffff;
778
+ --color-background-success-hover: #ffffff;
779
+ --color-background-success-pressed: #ffffff;
780
+ --color-background-alert-default: #ffffff;
781
+ --color-background-alert-hover: #ffffff;
782
+ --color-background-alert-pressed: #ffffff;
783
+ --color-background-danger-default: #ffffff;
784
+ --color-background-danger-hover: #ffffff;
785
+ --color-background-danger-pressed: #ffffff;
786
+ --color-border-primary: var(--color-dark-neutral-200);
787
+ --color-border-secondary: var(--color-dark-neutral-300);
788
+ --color-border-tertiary: var(--color-dark-neutral-400);
789
+ --color-border-focus: rgba(115, 178, 172, 0.4);
790
+ --color-border-selected: var(--color-bcc-500);
791
+ --color-border-disabled: var(--color-dark-neutral-200);
792
+ --color-border-accent-red-default: var(--color-red-500);
793
+ --color-border-accent-red-hover: var(--color-red-400);
794
+ --color-border-accent-red-pressed: var(--color-red-300);
795
+ --color-border-accent-rust-default: var(--color-rust-500);
796
+ --color-border-accent-rust-hover: var(--color-rust-400);
797
+ --color-border-accent-rust-pressed: var(--color-rust-300);
798
+ --color-border-accent-yellow-default: #ffffff;
799
+ --color-border-accent-yellow-hover: #ffffff;
800
+ --color-border-accent-yellow-pressed: #ffffff;
801
+ --color-border-accent-green-default: var(--color-green-500);
802
+ --color-border-accent-green-hover: var(--color-green-400);
803
+ --color-border-accent-green-pressed: var(--color-green-300);
804
+ --color-border-accent-teal-default: var(--color-teal-500);
805
+ --color-border-accent-teal-hover: var(--color-teal-400);
806
+ --color-border-accent-teal-pressed: var(--color-teal-300);
807
+ --color-border-accent-sand-default: var(--color-sand-500);
808
+ --color-border-accent-sand-hover: var(--color-sand-400);
809
+ --color-border-accent-sand-pressed: var(--color-sand-300);
810
+ --color-border-accent-blue-default: var(--color-blue-500);
811
+ --color-border-accent-blue-hover: var(--color-blue-400);
812
+ --color-border-accent-blue-pressed: var(--color-blue-300);
813
+ --color-border-accent-purple-default: var(--color-purple-500);
814
+ --color-border-accent-purple-hover: var(--color-purple-400);
815
+ --color-border-accent-purple-pressed: var(--color-purple-300);
816
+ --color-border-accent-magenta-default: var(--color-magenta-500);
817
+ --color-border-accent-magenta-hover: var(--color-magenta-400);
818
+ --color-border-accent-magenta-pressed: var(--color-magenta-300);
819
+ }
820
+ }
package/dist/variables.css CHANGED
@@ -183,9 +183,9 @@
183
183
  --line-height-text-xl-leading-tight: 1.75;
184
184
  --line-height-text-lg-leading-none: 1.25rem;
185
185
  --line-height-text-lg-leading-tight: 1.5rem;
186
- --line-height-text-base-leading-none: 1rem;
187
- --line-height-text-base-leading-tight: 1.25;
188
- --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;
189
189
  --line-height-text-sm-leading-none: 0.875rem;
190
190
  --line-height-text-sm-leading-normal: 1.25rem;
191
191
  --line-height-text-xs-leading-none: 0.75rem;
@@ -461,11 +461,11 @@
461
461
  --heading-lg-bold-text-decoration: var(--text-decoration-none);
462
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);
463
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-base-leading-normal) var(--font-families-archivo);
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
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-base-leading-normal) var(--font-families-archivo);
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
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-base-leading-normal) var(--font-families-archivo);
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
469
  --body-base-regular-text-decoration: var(--text-decoration-none);
470
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);
471
471
  --body-sm-bold-text-decoration: var(--text-decoration-none);
@@ -736,11 +736,11 @@
736
736
  --heading-lg-bold-text-decoration: var(--text-decoration-none);
737
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);
738
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-base-leading-normal) var(--font-families-archivo);
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
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-base-leading-normal) var(--font-families-archivo);
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
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-base-leading-normal) var(--font-families-archivo);
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
744
  --body-base-regular-text-decoration: var(--text-decoration-none);
745
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);
746
746
  --body-sm-bold-text-decoration: var(--text-decoration-none);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bcc-code/design-tokens",
3
- "version": "1.0.7",
3
+ "version": "1.0.9",
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",