@bcc-code/design-tokens 3.0.21 → 3.0.23

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 (16) hide show
  1. package/README.md +9 -132
  2. package/build/bcc/css/auto.css +28 -10
  3. package/build/bcc/css/dark.css +14 -5
  4. package/build/bcc/css/light.css +14 -5
  5. package/build/bcc/css/tailwind-auto.css +28 -10
  6. package/build/bcc/css/tailwind-dark.css +14 -5
  7. package/build/bcc/css/tailwind-light.css +14 -5
  8. package/build/bcc/js/dark.js +19 -4
  9. package/build/bcc/js/light.js +19 -4
  10. package/build/primevue/component-dark.js +356 -356
  11. package/build/primevue/component-light.js +570 -570
  12. package/build/primevue/semantic-dark.js +25 -2
  13. package/build/primevue/semantic-light.js +25 -2
  14. package/config/primevue-overrides.css +179 -179
  15. package/config/primevue.config.js +987 -987
  16. package/package.json +1 -1
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @bcc-code/design-tokens
2
2
 
3
- BCC Design System tokens for CSS, Tailwind v4, and PrimeVue with light/dark mode support.
3
+ Design tokens for the BCC Design System. Provides colors, typography, spacing, and component theming for CSS, Tailwind v4, and PrimeVue with light/dark mode support.
4
4
 
5
5
  ## Installation
6
6
 
@@ -8,141 +8,18 @@ BCC Design System tokens for CSS, Tailwind v4, and PrimeVue with light/dark mode
8
8
  npm install @bcc-code/design-tokens
9
9
  ```
10
10
 
11
- ## Usage
11
+ ## Documentation
12
12
 
13
- ### CSS Variables
13
+ For usage instructions, component guidelines, and examples, see the full documentation:
14
14
 
15
- ```css
16
- @import '@bcc-code/design-tokens/css';
17
- ```
18
-
19
- Provides light theme by default, dark theme with `.dark` class:
20
-
21
- ```css
22
- .card {
23
- background: var(--color-elevation-surface-default);
24
- color: var(--color-text-default);
25
- padding: var(--space-300);
26
- border-radius: var(--border-radius-md);
27
- }
28
- ```
29
-
30
- Toggle dark mode:
31
-
32
- ```javascript
33
- document.documentElement.classList.toggle('dark');
34
- ```
35
-
36
- ### Tailwind CSS v4
37
-
38
- ```css
39
- @import '@bcc-code/design-tokens/tailwind';
40
- ```
41
-
42
- Use utility classes:
43
-
44
- ```html
45
- <div class="bg-elevation-surface-default text-default p-300 radius-md">
46
- Content
47
- </div>
48
-
49
- <!-- Dark mode -->
50
- <div class="dark">
51
- <div class="bg-elevation-surface-default text-default">
52
- Dark content
53
- </div>
54
- </div>
55
- ```
56
-
57
- ### PrimeVue
58
-
59
- Install the required peer dependencies:
60
-
61
- ```bash
62
- npm install primevue @primeuix/themes
63
- ```
64
-
65
- Import the preset and overrides:
66
-
67
- ```javascript
68
- import { createApp } from 'vue'
69
- import PrimeVue from 'primevue/config'
70
- import BCCPreset from '@bcc-code/design-tokens/primevue'
71
- import '@bcc-code/design-tokens/primevue/overrides'
72
-
73
- const app = createApp(App)
74
-
75
- app.use(PrimeVue, {
76
- theme: {
77
- preset: BCCPreset,
78
- options: {
79
- darkModeSelector: '.dark',
80
- cssLayer: {
81
- name: 'primevue',
82
- order: 'theme, base, primevue, custom'
83
- }
84
- }
85
- }
86
- })
87
- ```
88
-
89
- Toggle dark mode:
90
-
91
- ```javascript
92
- document.documentElement.classList.toggle('dark')
93
- ```
94
-
95
- **What's Included:**
96
- - `@bcc-code/design-tokens/primevue` - PrimeVue Aura preset with BCC tokens
97
- - `@bcc-code/design-tokens/primevue/overrides` - CSS overrides for component styling
98
-
99
- ## Available Exports
100
-
101
- ### CSS
102
- - `@bcc-code/design-tokens/css` - Auto-switching theme (prefers-color-scheme)
103
- - `@bcc-code/design-tokens/css/light` - Light theme only
104
- - `@bcc-code/design-tokens/css/dark` - Dark theme only
105
-
106
- ### Tailwind CSS
107
- - `@bcc-code/design-tokens/tailwind` - Auto-switching utilities
108
- - `@bcc-code/design-tokens/tailwind/light` - Light utilities only
109
- - `@bcc-code/design-tokens/tailwind/dark` - Dark utilities only
110
-
111
- ### JavaScript
112
- - `@bcc-code/design-tokens/js/light` - Light theme tokens as JS objects
113
- - `@bcc-code/design-tokens/js/dark` - Dark theme tokens as JS objects
114
-
115
- ### PrimeVue
116
- - `@bcc-code/design-tokens/primevue` - Aura preset configuration
117
- - `@bcc-code/design-tokens/primevue/overrides` - Component CSS overrides
118
-
119
- ## Token Categories
120
-
121
- - **Colors**: Text, backgrounds, borders, states
122
- - **Typography**: Font families, sizes, weights, line heights
123
- - **Spacing**: Margins, padding, gaps (50-1000 scale)
124
- - **Border Radius**: Corner rounding
125
- - **Elevation**: Surface levels
126
-
127
- ## CDN Usage
128
-
129
- ```html
130
- <!-- CSS variables -->
131
- <link rel="stylesheet" href="https://unpkg.com/@bcc-code/design-tokens@latest/build/bcc/css/auto.css">
132
-
133
- <!-- Tailwind utilities -->
134
- <link rel="stylesheet" href="https://unpkg.com/@bcc-code/design-tokens@latest/build/bcc/css/tailwind-auto.css">
135
-
136
- <!-- Theme toggle -->
137
- <script>
138
- document.documentElement.classList.toggle('dark');
139
- </script>
140
- ```
15
+ **[developer.bcc.no/bcc-design](https://developer.bcc.no/bcc-design/)**
141
16
 
142
- ## Contributing
17
+ ## Quick Links
143
18
 
144
- Contributions are welcome! See [CONTRIBUTING.md](CONTRIBUTING.md) for development setup, workflow, and publishing instructions.
19
+ - [Get Started](https://developer.bcc.no/bcc-design/getting-started/) - Installation and setup
20
+ - [Foundations](https://developer.bcc.no/bcc-design/foundations/) - Tokens, colors, typography, spacing
21
+ - [Components](https://developer.bcc.no/bcc-design/components/) - PrimeVue component styling
145
22
 
146
23
  ## License
147
24
 
148
- MIT © BCC Code
25
+ MIT
package/build/bcc/css/auto.css CHANGED
@@ -283,11 +283,11 @@
283
283
  --color-icon-accent-magenta-bold: var(--color-magenta-900);
284
284
  --color-icon-accent-purple-default: var(--color-purple-800);
285
285
  --color-icon-accent-purple-bold: var(--color-purple-900);
286
- --color-border-default: var(--color-neutral-alpha-300-a);
286
+ --color-border-default: var(--color-neutral-400);
287
287
  --color-border-bold: var(--color-neutral-600);
288
288
  --color-border-disabled: var(--color-neutral-alpha-200-a);
289
289
  --color-border-selected: var(--color-bcc-700);
290
- --color-border-focused: var(--color-bcc-500);
290
+ --color-border-focused: var(--color-neutral-800);
291
291
  --color-border-inverse: var(--color-neutral-0);
292
292
  --color-border-input: var(--color-neutral-500);
293
293
  --color-border-success: var(--color-green-600);
@@ -305,7 +305,7 @@
305
305
  --color-border-accent-red: var(--color-red-600);
306
306
  --color-border-accent-magenta: var(--color-magenta-600);
307
307
  --color-border-accent-purple: var(--color-purple-600);
308
- --color-background-disabled-default: var(--color-neutral-alpha-100-a);
308
+ --color-background-disabled-default: var(--color-neutral-alpha-200-a);
309
309
  --color-background-selected-default: var(--color-bcc-100); /** Use for the background of elements in a selected state, such as in opened dropdown buttons. */
310
310
  --color-background-selected-hovered: var(--color-bcc-200); /** Use for the background of elements in a selected state, such as in opened dropdown buttons. */
311
311
  --color-background-selected-pressed: var(--color-bcc-300); /** Use for the background of elements in a selected state, such as in opened dropdown buttons. */
@@ -366,6 +366,9 @@
366
366
  --color-background-neutral-subtlest-default: var(--color-transparent);
367
367
  --color-background-neutral-subtlest-hover: var(--color-neutral-alpha-100-a);
368
368
  --color-background-neutral-subtlest-pressed: var(--color-neutral-alpha-200-a);
369
+ --color-background-neutral-bold-default: var(--color-neutral-alpha-500-a);
370
+ --color-background-neutral-bold-hover: var(--color-neutral-alpha-400-a);
371
+ --color-background-neutral-bold-pressed: var(--color-neutral-alpha-300-a);
369
372
  --color-background-accent-blue-subtle-default: var(--color-blue-400);
370
373
  --color-background-accent-blue-subtle-hover: var(--color-blue-300);
371
374
  --color-background-accent-blue-subtle-pressed: var(--color-blue-200);
@@ -486,9 +489,15 @@
486
489
  --color-background-accent-gray-subtlest-default: var(--color-neutral-0);
487
490
  --color-background-accent-gray-subtlest-hover: var(--color-neutral-100);
488
491
  --color-background-accent-gray-subtlest-pressed: var(--color-neutral-200);
489
- --color-background-accent-gray-bolder-default: var(--color-neutral-700);
492
+ --color-background-accent-gray-bold-default: var(--color-neutral-700);
493
+ --color-background-accent-gray-bold-hover: var(--color-neutral-600);
494
+ --color-background-accent-gray-bold-pressed: var(--color-neutral-500);
495
+ --color-background-accent-gray-bolder-default: var(--color-neutral-900);
490
496
  --color-background-accent-gray-bolder-hover: var(--color-neutral-800);
491
- --color-background-accent-gray-bolder-pressed: var(--color-neutral-900);
497
+ --color-background-accent-gray-bolder-pressed: var(--color-neutral-700);
498
+ --color-background-accent-gray-boldest-default: var(--color-neutral-1100);
499
+ --color-background-accent-gray-boldest-hover: var(--color-neutral-1000);
500
+ --color-background-accent-gray-boldest-pressed: var(--color-neutral-900);
492
501
  --color-blanket-default: var(--color-neutral-alpha-500-a); /** Use for the screen overlay that appears with modal dialogs */
493
502
  --color-skeleton-default: var(--color-neutral-alpha-200-a); /** Use for skeleton loading states */
494
503
  --color-skeleton-subtle: var(--color-neutral-alpha-100-a); /** Use for the pulse or shimmer effect in skeleton loading states */
@@ -600,11 +609,11 @@
600
609
  --color-icon-accent-magenta-bold: var(--color-magenta-400);
601
610
  --color-icon-accent-purple-default: var(--color-purple-500);
602
611
  --color-icon-accent-purple-bold: var(--color-purple-400);
603
- --color-border-default: var(--color-dark-neutral-alpha-300-a);
612
+ --color-border-default: var(--color-dark-neutral-400);
604
613
  --color-border-bold: var(--color-dark-neutral-600);
605
614
  --color-border-disabled: var(--color-dark-neutral-alpha-200-a);
606
615
  --color-border-selected: var(--color-bcc-400);
607
- --color-border-focused: var(--color-bcc-300);
616
+ --color-border-focused: var(--color-dark-neutral-800);
608
617
  --color-border-inverse: var(--color-dark-neutral-0);
609
618
  --color-border-input: var(--color-dark-neutral-500);
610
619
  --color-border-success: var(--color-green-500);
@@ -622,7 +631,7 @@
622
631
  --color-border-accent-red: var(--color-red-500);
623
632
  --color-border-accent-magenta: var(--color-magenta-500);
624
633
  --color-border-accent-purple: var(--color-purple-500);
625
- --color-background-disabled-default: var(--color-dark-neutral-alpha-100-a);
634
+ --color-background-disabled-default: var(--color-dark-neutral-alpha-300-a);
626
635
  --color-background-selected-default: var(--color-bcc-1000);
627
636
  --color-background-selected-hovered: var(--color-bcc-900);
628
637
  --color-background-selected-pressed: var(--color-bcc-800);
@@ -682,6 +691,9 @@
682
691
  --color-background-neutral-subtler-pressed: var(--color-dark-neutral-alpha-300-a);
683
692
  --color-background-neutral-subtlest-hover: var(--color-dark-neutral-alpha-250-a);
684
693
  --color-background-neutral-subtlest-pressed: var(--color-dark-neutral-alpha-300-a);
694
+ --color-background-neutral-bold-default: var(--color-dark-neutral-alpha-500-a);
695
+ --color-background-neutral-bold-hover: var(--color-dark-neutral-alpha-400-a);
696
+ --color-background-neutral-bold-pressed: var(--color-dark-neutral-alpha-300-a);
685
697
  --color-background-accent-blue-subtlest-default: var(--color-blue-1000);
686
698
  --color-background-accent-blue-subtlest-hover: var(--color-blue-900);
687
699
  --color-background-accent-blue-subtlest-pressed: var(--color-blue-800);
@@ -801,9 +813,15 @@
801
813
  --color-background-accent-gray-subtlest-default: var(--color-dark-neutral-0);
802
814
  --color-background-accent-gray-subtlest-hover: var(--color-dark-neutral-100);
803
815
  --color-background-accent-gray-subtlest-pressed: var(--color-dark-neutral-200);
804
- --color-background-accent-gray-bolder-default: var(--color-dark-neutral-700);
816
+ --color-background-accent-gray-bold-default: var(--color-dark-neutral-700);
817
+ --color-background-accent-gray-bold-hover: var(--color-dark-neutral-600);
818
+ --color-background-accent-gray-bold-pressed: var(--color-dark-neutral-500);
819
+ --color-background-accent-gray-bolder-default: var(--color-dark-neutral-900);
805
820
  --color-background-accent-gray-bolder-hover: var(--color-dark-neutral-800);
806
- --color-background-accent-gray-bolder-pressed: var(--color-dark-neutral-900);
821
+ --color-background-accent-gray-bolder-pressed: var(--color-dark-neutral-700);
822
+ --color-background-accent-gray-boldest-default: var(--color-dark-neutral-1100);
823
+ --color-background-accent-gray-boldest-hover: var(--color-dark-neutral-1000);
824
+ --color-background-accent-gray-boldest-pressed: var(--color-dark-neutral-900);
807
825
  --color-skeleton-default: var(--color-dark-neutral-alpha-200-a);
808
826
  --color-skeleton-subtle: var(--color-dark-neutral-alpha-100-a);
809
827
  --color-elevation-surface-default: var(--color-dark-neutral-100);
package/build/bcc/css/dark.css CHANGED
@@ -285,11 +285,11 @@
285
285
  --color-icon-accent-magenta-bold: var(--color-magenta-400);
286
286
  --color-icon-accent-purple-default: var(--color-purple-500);
287
287
  --color-icon-accent-purple-bold: var(--color-purple-400);
288
- --color-border-default: var(--color-dark-neutral-alpha-300-a);
288
+ --color-border-default: var(--color-dark-neutral-400);
289
289
  --color-border-bold: var(--color-dark-neutral-600);
290
290
  --color-border-disabled: var(--color-dark-neutral-alpha-200-a);
291
291
  --color-border-selected: var(--color-bcc-400);
292
- --color-border-focused: var(--color-bcc-300);
292
+ --color-border-focused: var(--color-dark-neutral-800);
293
293
  --color-border-inverse: var(--color-dark-neutral-0);
294
294
  --color-border-input: var(--color-dark-neutral-500);
295
295
  --color-border-success: var(--color-green-500);
@@ -307,7 +307,7 @@
307
307
  --color-border-accent-red: var(--color-red-500);
308
308
  --color-border-accent-magenta: var(--color-magenta-500);
309
309
  --color-border-accent-purple: var(--color-purple-500);
310
- --color-background-disabled-default: var(--color-dark-neutral-alpha-100-a);
310
+ --color-background-disabled-default: var(--color-dark-neutral-alpha-300-a);
311
311
  --color-background-selected-default: var(--color-bcc-1000); /** Use for the background of elements in a selected state, such as in opened dropdown buttons. */
312
312
  --color-background-selected-hovered: var(--color-bcc-900); /** Use for the background of elements in a selected state, such as in opened dropdown buttons. */
313
313
  --color-background-selected-pressed: var(--color-bcc-800); /** Use for the background of elements in a selected state, such as in opened dropdown buttons. */
@@ -368,6 +368,9 @@
368
368
  --color-background-neutral-subtlest-default: var(--color-transparent);
369
369
  --color-background-neutral-subtlest-hover: var(--color-dark-neutral-alpha-250-a);
370
370
  --color-background-neutral-subtlest-pressed: var(--color-dark-neutral-alpha-300-a);
371
+ --color-background-neutral-bold-default: var(--color-dark-neutral-alpha-500-a);
372
+ --color-background-neutral-bold-hover: var(--color-dark-neutral-alpha-400-a);
373
+ --color-background-neutral-bold-pressed: var(--color-dark-neutral-alpha-300-a);
371
374
  --color-background-accent-blue-subtlest-default: var(--color-blue-1000);
372
375
  --color-background-accent-blue-subtlest-hover: var(--color-blue-900);
373
376
  --color-background-accent-blue-subtlest-pressed: var(--color-blue-800);
@@ -488,9 +491,15 @@
488
491
  --color-background-accent-gray-subtlest-default: var(--color-dark-neutral-0);
489
492
  --color-background-accent-gray-subtlest-hover: var(--color-dark-neutral-100);
490
493
  --color-background-accent-gray-subtlest-pressed: var(--color-dark-neutral-200);
491
- --color-background-accent-gray-bolder-default: var(--color-dark-neutral-700);
494
+ --color-background-accent-gray-bold-default: var(--color-dark-neutral-700);
495
+ --color-background-accent-gray-bold-hover: var(--color-dark-neutral-600);
496
+ --color-background-accent-gray-bold-pressed: var(--color-dark-neutral-500);
497
+ --color-background-accent-gray-bolder-default: var(--color-dark-neutral-900);
492
498
  --color-background-accent-gray-bolder-hover: var(--color-dark-neutral-800);
493
- --color-background-accent-gray-bolder-pressed: var(--color-dark-neutral-900);
499
+ --color-background-accent-gray-bolder-pressed: var(--color-dark-neutral-700);
500
+ --color-background-accent-gray-boldest-default: var(--color-dark-neutral-1100);
501
+ --color-background-accent-gray-boldest-hover: var(--color-dark-neutral-1000);
502
+ --color-background-accent-gray-boldest-pressed: var(--color-dark-neutral-900);
494
503
  --color-skeleton-default: var(--color-dark-neutral-alpha-200-a); /** Use for skeleton loading states */
495
504
  --color-skeleton-subtle: var(--color-dark-neutral-alpha-100-a); /** Use for the pulse or shimmer effect in skeleton loading states */
496
505
  --color-elevation-surface-default: var(--color-dark-neutral-100);
package/build/bcc/css/light.css CHANGED
@@ -283,11 +283,11 @@
283
283
  --color-icon-accent-magenta-bold: var(--color-magenta-900);
284
284
  --color-icon-accent-purple-default: var(--color-purple-800);
285
285
  --color-icon-accent-purple-bold: var(--color-purple-900);
286
- --color-border-default: var(--color-neutral-alpha-300-a);
286
+ --color-border-default: var(--color-neutral-400);
287
287
  --color-border-bold: var(--color-neutral-600);
288
288
  --color-border-disabled: var(--color-neutral-alpha-200-a);
289
289
  --color-border-selected: var(--color-bcc-700);
290
- --color-border-focused: var(--color-bcc-500);
290
+ --color-border-focused: var(--color-neutral-800);
291
291
  --color-border-inverse: var(--color-neutral-0);
292
292
  --color-border-input: var(--color-neutral-500);
293
293
  --color-border-success: var(--color-green-600);
@@ -305,7 +305,7 @@
305
305
  --color-border-accent-red: var(--color-red-600);
306
306
  --color-border-accent-magenta: var(--color-magenta-600);
307
307
  --color-border-accent-purple: var(--color-purple-600);
308
- --color-background-disabled-default: var(--color-neutral-alpha-100-a);
308
+ --color-background-disabled-default: var(--color-neutral-alpha-200-a);
309
309
  --color-background-selected-default: var(--color-bcc-100); /** Use for the background of elements in a selected state, such as in opened dropdown buttons. */
310
310
  --color-background-selected-hovered: var(--color-bcc-200); /** Use for the background of elements in a selected state, such as in opened dropdown buttons. */
311
311
  --color-background-selected-pressed: var(--color-bcc-300); /** Use for the background of elements in a selected state, such as in opened dropdown buttons. */
@@ -366,6 +366,9 @@
366
366
  --color-background-neutral-subtlest-default: var(--color-transparent);
367
367
  --color-background-neutral-subtlest-hover: var(--color-neutral-alpha-100-a);
368
368
  --color-background-neutral-subtlest-pressed: var(--color-neutral-alpha-200-a);
369
+ --color-background-neutral-bold-default: var(--color-neutral-alpha-500-a);
370
+ --color-background-neutral-bold-hover: var(--color-neutral-alpha-400-a);
371
+ --color-background-neutral-bold-pressed: var(--color-neutral-alpha-300-a);
369
372
  --color-background-accent-blue-subtle-default: var(--color-blue-400);
370
373
  --color-background-accent-blue-subtle-hover: var(--color-blue-300);
371
374
  --color-background-accent-blue-subtle-pressed: var(--color-blue-200);
@@ -486,9 +489,15 @@
486
489
  --color-background-accent-gray-subtlest-default: var(--color-neutral-0);
487
490
  --color-background-accent-gray-subtlest-hover: var(--color-neutral-100);
488
491
  --color-background-accent-gray-subtlest-pressed: var(--color-neutral-200);
489
- --color-background-accent-gray-bolder-default: var(--color-neutral-700);
492
+ --color-background-accent-gray-bold-default: var(--color-neutral-700);
493
+ --color-background-accent-gray-bold-hover: var(--color-neutral-600);
494
+ --color-background-accent-gray-bold-pressed: var(--color-neutral-500);
495
+ --color-background-accent-gray-bolder-default: var(--color-neutral-900);
490
496
  --color-background-accent-gray-bolder-hover: var(--color-neutral-800);
491
- --color-background-accent-gray-bolder-pressed: var(--color-neutral-900);
497
+ --color-background-accent-gray-bolder-pressed: var(--color-neutral-700);
498
+ --color-background-accent-gray-boldest-default: var(--color-neutral-1100);
499
+ --color-background-accent-gray-boldest-hover: var(--color-neutral-1000);
500
+ --color-background-accent-gray-boldest-pressed: var(--color-neutral-900);
492
501
  --color-blanket-default: var(--color-neutral-alpha-500-a); /** Use for the screen overlay that appears with modal dialogs */
493
502
  --color-skeleton-default: var(--color-neutral-alpha-200-a); /** Use for skeleton loading states */
494
503
  --color-skeleton-subtle: var(--color-neutral-alpha-100-a); /** Use for the pulse or shimmer effect in skeleton loading states */
package/build/bcc/css/tailwind-auto.css CHANGED
@@ -286,11 +286,11 @@
286
286
  --color-icon-accent-magenta-bold: var(--color-magenta-900);
287
287
  --color-icon-accent-purple-default: var(--color-purple-800);
288
288
  --color-icon-accent-purple-bold: var(--color-purple-900);
289
- --color-border-default: var(--color-neutral-alpha-300-a);
289
+ --color-border-default: var(--color-neutral-400);
290
290
  --color-border-bold: var(--color-neutral-600);
291
291
  --color-border-disabled: var(--color-neutral-alpha-200-a);
292
292
  --color-border-selected: var(--color-bcc-700);
293
- --color-border-focused: var(--color-bcc-500);
293
+ --color-border-focused: var(--color-neutral-800);
294
294
  --color-border-inverse: var(--color-neutral-0);
295
295
  --color-border-input: var(--color-neutral-500);
296
296
  --color-border-success: var(--color-green-600);
@@ -308,7 +308,7 @@
308
308
  --color-border-accent-red: var(--color-red-600);
309
309
  --color-border-accent-magenta: var(--color-magenta-600);
310
310
  --color-border-accent-purple: var(--color-purple-600);
311
- --color-background-disabled-default: var(--color-neutral-alpha-100-a);
311
+ --color-background-disabled-default: var(--color-neutral-alpha-200-a);
312
312
  --color-background-selected-default: var(--color-bcc-100); /** Use for the background of elements in a selected state, such as in opened dropdown buttons. */
313
313
  --color-background-selected-hovered: var(--color-bcc-200); /** Use for the background of elements in a selected state, such as in opened dropdown buttons. */
314
314
  --color-background-selected-pressed: var(--color-bcc-300); /** Use for the background of elements in a selected state, such as in opened dropdown buttons. */
@@ -369,6 +369,9 @@
369
369
  --color-background-neutral-subtlest-default: var(--color-transparent);
370
370
  --color-background-neutral-subtlest-hover: var(--color-neutral-alpha-100-a);
371
371
  --color-background-neutral-subtlest-pressed: var(--color-neutral-alpha-200-a);
372
+ --color-background-neutral-bold-default: var(--color-neutral-alpha-500-a);
373
+ --color-background-neutral-bold-hover: var(--color-neutral-alpha-400-a);
374
+ --color-background-neutral-bold-pressed: var(--color-neutral-alpha-300-a);
372
375
  --color-background-accent-blue-subtle-default: var(--color-blue-400);
373
376
  --color-background-accent-blue-subtle-hover: var(--color-blue-300);
374
377
  --color-background-accent-blue-subtle-pressed: var(--color-blue-200);
@@ -489,9 +492,15 @@
489
492
  --color-background-accent-gray-subtlest-default: var(--color-neutral-0);
490
493
  --color-background-accent-gray-subtlest-hover: var(--color-neutral-100);
491
494
  --color-background-accent-gray-subtlest-pressed: var(--color-neutral-200);
492
- --color-background-accent-gray-bolder-default: var(--color-neutral-700);
495
+ --color-background-accent-gray-bold-default: var(--color-neutral-700);
496
+ --color-background-accent-gray-bold-hover: var(--color-neutral-600);
497
+ --color-background-accent-gray-bold-pressed: var(--color-neutral-500);
498
+ --color-background-accent-gray-bolder-default: var(--color-neutral-900);
493
499
  --color-background-accent-gray-bolder-hover: var(--color-neutral-800);
494
- --color-background-accent-gray-bolder-pressed: var(--color-neutral-900);
500
+ --color-background-accent-gray-bolder-pressed: var(--color-neutral-700);
501
+ --color-background-accent-gray-boldest-default: var(--color-neutral-1100);
502
+ --color-background-accent-gray-boldest-hover: var(--color-neutral-1000);
503
+ --color-background-accent-gray-boldest-pressed: var(--color-neutral-900);
495
504
  --color-blanket-default: var(--color-neutral-alpha-500-a); /** Use for the screen overlay that appears with modal dialogs */
496
505
  --color-skeleton-default: var(--color-neutral-alpha-200-a); /** Use for skeleton loading states */
497
506
  --color-skeleton-subtle: var(--color-neutral-alpha-100-a); /** Use for the pulse or shimmer effect in skeleton loading states */
@@ -603,11 +612,11 @@
603
612
  --color-icon-accent-magenta-bold: var(--color-magenta-400);
604
613
  --color-icon-accent-purple-default: var(--color-purple-500);
605
614
  --color-icon-accent-purple-bold: var(--color-purple-400);
606
- --color-border-default: var(--color-dark-neutral-alpha-300-a);
615
+ --color-border-default: var(--color-dark-neutral-400);
607
616
  --color-border-bold: var(--color-dark-neutral-600);
608
617
  --color-border-disabled: var(--color-dark-neutral-alpha-200-a);
609
618
  --color-border-selected: var(--color-bcc-400);
610
- --color-border-focused: var(--color-bcc-300);
619
+ --color-border-focused: var(--color-dark-neutral-800);
611
620
  --color-border-inverse: var(--color-dark-neutral-0);
612
621
  --color-border-input: var(--color-dark-neutral-500);
613
622
  --color-border-success: var(--color-green-500);
@@ -625,7 +634,7 @@
625
634
  --color-border-accent-red: var(--color-red-500);
626
635
  --color-border-accent-magenta: var(--color-magenta-500);
627
636
  --color-border-accent-purple: var(--color-purple-500);
628
- --color-background-disabled-default: var(--color-dark-neutral-alpha-100-a);
637
+ --color-background-disabled-default: var(--color-dark-neutral-alpha-300-a);
629
638
  --color-background-selected-default: var(--color-bcc-1000);
630
639
  --color-background-selected-hovered: var(--color-bcc-900);
631
640
  --color-background-selected-pressed: var(--color-bcc-800);
@@ -685,6 +694,9 @@
685
694
  --color-background-neutral-subtler-pressed: var(--color-dark-neutral-alpha-300-a);
686
695
  --color-background-neutral-subtlest-hover: var(--color-dark-neutral-alpha-250-a);
687
696
  --color-background-neutral-subtlest-pressed: var(--color-dark-neutral-alpha-300-a);
697
+ --color-background-neutral-bold-default: var(--color-dark-neutral-alpha-500-a);
698
+ --color-background-neutral-bold-hover: var(--color-dark-neutral-alpha-400-a);
699
+ --color-background-neutral-bold-pressed: var(--color-dark-neutral-alpha-300-a);
688
700
  --color-background-accent-blue-subtlest-default: var(--color-blue-1000);
689
701
  --color-background-accent-blue-subtlest-hover: var(--color-blue-900);
690
702
  --color-background-accent-blue-subtlest-pressed: var(--color-blue-800);
@@ -804,9 +816,15 @@
804
816
  --color-background-accent-gray-subtlest-default: var(--color-dark-neutral-0);
805
817
  --color-background-accent-gray-subtlest-hover: var(--color-dark-neutral-100);
806
818
  --color-background-accent-gray-subtlest-pressed: var(--color-dark-neutral-200);
807
- --color-background-accent-gray-bolder-default: var(--color-dark-neutral-700);
819
+ --color-background-accent-gray-bold-default: var(--color-dark-neutral-700);
820
+ --color-background-accent-gray-bold-hover: var(--color-dark-neutral-600);
821
+ --color-background-accent-gray-bold-pressed: var(--color-dark-neutral-500);
822
+ --color-background-accent-gray-bolder-default: var(--color-dark-neutral-900);
808
823
  --color-background-accent-gray-bolder-hover: var(--color-dark-neutral-800);
809
- --color-background-accent-gray-bolder-pressed: var(--color-dark-neutral-900);
824
+ --color-background-accent-gray-bolder-pressed: var(--color-dark-neutral-700);
825
+ --color-background-accent-gray-boldest-default: var(--color-dark-neutral-1100);
826
+ --color-background-accent-gray-boldest-hover: var(--color-dark-neutral-1000);
827
+ --color-background-accent-gray-boldest-pressed: var(--color-dark-neutral-900);
810
828
  --color-skeleton-default: var(--color-dark-neutral-alpha-200-a);
811
829
  --color-skeleton-subtle: var(--color-dark-neutral-alpha-100-a);
812
830
  --color-elevation-surface-default: var(--color-dark-neutral-100);
package/build/bcc/css/tailwind-dark.css CHANGED
@@ -285,11 +285,11 @@
285
285
  --color-icon-accent-magenta-bold: var(--color-magenta-400);
286
286
  --color-icon-accent-purple-default: var(--color-purple-500);
287
287
  --color-icon-accent-purple-bold: var(--color-purple-400);
288
- --color-border-default: var(--color-dark-neutral-alpha-300-a);
288
+ --color-border-default: var(--color-dark-neutral-400);
289
289
  --color-border-bold: var(--color-dark-neutral-600);
290
290
  --color-border-disabled: var(--color-dark-neutral-alpha-200-a);
291
291
  --color-border-selected: var(--color-bcc-400);
292
- --color-border-focused: var(--color-bcc-300);
292
+ --color-border-focused: var(--color-dark-neutral-800);
293
293
  --color-border-inverse: var(--color-dark-neutral-0);
294
294
  --color-border-input: var(--color-dark-neutral-500);
295
295
  --color-border-success: var(--color-green-500);
@@ -307,7 +307,7 @@
307
307
  --color-border-accent-red: var(--color-red-500);
308
308
  --color-border-accent-magenta: var(--color-magenta-500);
309
309
  --color-border-accent-purple: var(--color-purple-500);
310
- --color-background-disabled-default: var(--color-dark-neutral-alpha-100-a);
310
+ --color-background-disabled-default: var(--color-dark-neutral-alpha-300-a);
311
311
  --color-background-selected-default: var(--color-bcc-1000); /** Use for the background of elements in a selected state, such as in opened dropdown buttons. */
312
312
  --color-background-selected-hovered: var(--color-bcc-900); /** Use for the background of elements in a selected state, such as in opened dropdown buttons. */
313
313
  --color-background-selected-pressed: var(--color-bcc-800); /** Use for the background of elements in a selected state, such as in opened dropdown buttons. */
@@ -368,6 +368,9 @@
368
368
  --color-background-neutral-subtlest-default: var(--color-transparent);
369
369
  --color-background-neutral-subtlest-hover: var(--color-dark-neutral-alpha-250-a);
370
370
  --color-background-neutral-subtlest-pressed: var(--color-dark-neutral-alpha-300-a);
371
+ --color-background-neutral-bold-default: var(--color-dark-neutral-alpha-500-a);
372
+ --color-background-neutral-bold-hover: var(--color-dark-neutral-alpha-400-a);
373
+ --color-background-neutral-bold-pressed: var(--color-dark-neutral-alpha-300-a);
371
374
  --color-background-accent-blue-subtlest-default: var(--color-blue-1000);
372
375
  --color-background-accent-blue-subtlest-hover: var(--color-blue-900);
373
376
  --color-background-accent-blue-subtlest-pressed: var(--color-blue-800);
@@ -488,9 +491,15 @@
488
491
  --color-background-accent-gray-subtlest-default: var(--color-dark-neutral-0);
489
492
  --color-background-accent-gray-subtlest-hover: var(--color-dark-neutral-100);
490
493
  --color-background-accent-gray-subtlest-pressed: var(--color-dark-neutral-200);
491
- --color-background-accent-gray-bolder-default: var(--color-dark-neutral-700);
494
+ --color-background-accent-gray-bold-default: var(--color-dark-neutral-700);
495
+ --color-background-accent-gray-bold-hover: var(--color-dark-neutral-600);
496
+ --color-background-accent-gray-bold-pressed: var(--color-dark-neutral-500);
497
+ --color-background-accent-gray-bolder-default: var(--color-dark-neutral-900);
492
498
  --color-background-accent-gray-bolder-hover: var(--color-dark-neutral-800);
493
- --color-background-accent-gray-bolder-pressed: var(--color-dark-neutral-900);
499
+ --color-background-accent-gray-bolder-pressed: var(--color-dark-neutral-700);
500
+ --color-background-accent-gray-boldest-default: var(--color-dark-neutral-1100);
501
+ --color-background-accent-gray-boldest-hover: var(--color-dark-neutral-1000);
502
+ --color-background-accent-gray-boldest-pressed: var(--color-dark-neutral-900);
494
503
  --color-skeleton-default: var(--color-dark-neutral-alpha-200-a); /** Use for skeleton loading states */
495
504
  --color-skeleton-subtle: var(--color-dark-neutral-alpha-100-a); /** Use for the pulse or shimmer effect in skeleton loading states */
496
505
  --color-elevation-surface-default: var(--color-dark-neutral-100);
package/build/bcc/css/tailwind-light.css CHANGED
@@ -284,11 +284,11 @@
284
284
  --color-icon-accent-magenta-bold: var(--color-magenta-900);
285
285
  --color-icon-accent-purple-default: var(--color-purple-800);
286
286
  --color-icon-accent-purple-bold: var(--color-purple-900);
287
- --color-border-default: var(--color-neutral-alpha-300-a);
287
+ --color-border-default: var(--color-neutral-400);
288
288
  --color-border-bold: var(--color-neutral-600);
289
289
  --color-border-disabled: var(--color-neutral-alpha-200-a);
290
290
  --color-border-selected: var(--color-bcc-700);
291
- --color-border-focused: var(--color-bcc-500);
291
+ --color-border-focused: var(--color-neutral-800);
292
292
  --color-border-inverse: var(--color-neutral-0);
293
293
  --color-border-input: var(--color-neutral-500);
294
294
  --color-border-success: var(--color-green-600);
@@ -306,7 +306,7 @@
306
306
  --color-border-accent-red: var(--color-red-600);
307
307
  --color-border-accent-magenta: var(--color-magenta-600);
308
308
  --color-border-accent-purple: var(--color-purple-600);
309
- --color-background-disabled-default: var(--color-neutral-alpha-100-a);
309
+ --color-background-disabled-default: var(--color-neutral-alpha-200-a);
310
310
  --color-background-selected-default: var(--color-bcc-100); /** Use for the background of elements in a selected state, such as in opened dropdown buttons. */
311
311
  --color-background-selected-hovered: var(--color-bcc-200); /** Use for the background of elements in a selected state, such as in opened dropdown buttons. */
312
312
  --color-background-selected-pressed: var(--color-bcc-300); /** Use for the background of elements in a selected state, such as in opened dropdown buttons. */
@@ -367,6 +367,9 @@
367
367
  --color-background-neutral-subtlest-default: var(--color-transparent);
368
368
  --color-background-neutral-subtlest-hover: var(--color-neutral-alpha-100-a);
369
369
  --color-background-neutral-subtlest-pressed: var(--color-neutral-alpha-200-a);
370
+ --color-background-neutral-bold-default: var(--color-neutral-alpha-500-a);
371
+ --color-background-neutral-bold-hover: var(--color-neutral-alpha-400-a);
372
+ --color-background-neutral-bold-pressed: var(--color-neutral-alpha-300-a);
370
373
  --color-background-accent-blue-subtle-default: var(--color-blue-400);
371
374
  --color-background-accent-blue-subtle-hover: var(--color-blue-300);
372
375
  --color-background-accent-blue-subtle-pressed: var(--color-blue-200);
@@ -487,9 +490,15 @@
487
490
  --color-background-accent-gray-subtlest-default: var(--color-neutral-0);
488
491
  --color-background-accent-gray-subtlest-hover: var(--color-neutral-100);
489
492
  --color-background-accent-gray-subtlest-pressed: var(--color-neutral-200);
490
- --color-background-accent-gray-bolder-default: var(--color-neutral-700);
493
+ --color-background-accent-gray-bold-default: var(--color-neutral-700);
494
+ --color-background-accent-gray-bold-hover: var(--color-neutral-600);
495
+ --color-background-accent-gray-bold-pressed: var(--color-neutral-500);
496
+ --color-background-accent-gray-bolder-default: var(--color-neutral-900);
491
497
  --color-background-accent-gray-bolder-hover: var(--color-neutral-800);
492
- --color-background-accent-gray-bolder-pressed: var(--color-neutral-900);
498
+ --color-background-accent-gray-bolder-pressed: var(--color-neutral-700);
499
+ --color-background-accent-gray-boldest-default: var(--color-neutral-1100);
500
+ --color-background-accent-gray-boldest-hover: var(--color-neutral-1000);
501
+ --color-background-accent-gray-boldest-pressed: var(--color-neutral-900);
493
502
  --color-blanket-default: var(--color-neutral-alpha-500-a); /** Use for the screen overlay that appears with modal dialogs */
494
503
  --color-skeleton-default: var(--color-neutral-alpha-200-a); /** Use for skeleton loading states */
495
504
  --color-skeleton-subtle: var(--color-neutral-alpha-100-a); /** Use for the pulse or shimmer effect in skeleton loading states */
package/build/bcc/js/dark.js CHANGED
@@ -302,11 +302,11 @@ export default {
302
302
  },
303
303
  },
304
304
  border: {
305
- default: "rgba(227, 228, 242, 0.12)",
305
+ default: "#4b4d51",
306
306
  bold: "#7e8188",
307
307
  disabled: "rgba(206, 206, 217, 0.07)",
308
308
  selected: "#6fb5ad",
309
- focused: "#a0cec8",
309
+ focused: "#a9abaf",
310
310
  inverse: "#18191a",
311
311
  input: "#63666b",
312
312
  success: "#1ca673",
@@ -329,7 +329,7 @@ export default {
329
329
  },
330
330
  background: {
331
331
  disabled: {
332
- default: "rgba(189, 189, 189, 0.04)",
332
+ default: "rgba(227, 228, 242, 0.12)",
333
333
  },
334
334
  selected: {
335
335
  default: "#012320",
@@ -439,6 +439,11 @@ export default {
439
439
  hover: "rgba(217, 218, 231, 0.1)",
440
440
  pressed: "rgba(227, 228, 242, 0.12)",
441
441
  },
442
+ bold: {
443
+ default: "rgba(233, 240, 251, 0.36)",
444
+ hover: "rgba(229, 233, 246, 0.25)",
445
+ pressed: "rgba(227, 228, 242, 0.12)",
446
+ },
442
447
  },
443
448
  accent: {
444
449
  blue: {
@@ -658,9 +663,19 @@ export default {
658
663
  hover: "#1f1f21",
659
664
  pressed: "#242528",
660
665
  },
661
- bolder: {
666
+ bold: {
662
667
  default: "#96999e",
668
+ hover: "#7e8188",
669
+ pressed: "#63666b",
670
+ },
671
+ bolder: {
672
+ default: "#bfc1c4",
663
673
  hover: "#a9abaf",
674
+ pressed: "#96999e",
675
+ },
676
+ boldest: {
677
+ default: "#e2e3e4",
678
+ hover: "#cecfd2",
664
679
  pressed: "#bfc1c4",
665
680
  },
666
681
  },