@bcc-code/design-tokens 3.0.20 → 3.0.22

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 +166 -0
  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 +2 -2
package/README.md CHANGED
@@ -2,6 +2,18 @@
2
2
 
3
3
  BCC Design System tokens for CSS, Tailwind v4, and PrimeVue with light/dark mode support.
4
4
 
5
+ > **Migrating from @bcc-code/design-library-vue?** This package replaces the deprecated design-library. See the [Migration Guide](#migration-from-design-library-vue) below.
6
+
7
+ ## Quick Start
8
+
9
+ Choose your integration method:
10
+
11
+ | Method | Best For | Components |
12
+ |--------|----------|------------|
13
+ | **PrimeVue** (recommended) | Vue 3 apps needing full component library | Yes - full PrimeVue components |
14
+ | **Tailwind v4** | Any project using Tailwind | No - utility classes only |
15
+ | **CSS Variables** | Any project, quick prototypes | No - variables only |
16
+
5
17
  ## Installation
6
18
 
7
19
  ```bash
@@ -139,6 +151,160 @@ document.documentElement.classList.toggle('dark')
139
151
  </script>
140
152
  ```
141
153
 
154
+ ## Migration from design-library-vue
155
+
156
+ If you're migrating from `@bcc-code/design-library-vue`, follow these steps:
157
+
158
+ ### 1. Install new packages
159
+
160
+ ```bash
161
+ # Remove old package
162
+ npm uninstall @bcc-code/design-library-vue
163
+
164
+ # Install new packages
165
+ npm install @bcc-code/design-tokens primevue @primeuix/themes
166
+ ```
167
+
168
+ ### 2. Update imports
169
+
170
+ **Before (design-library-vue):**
171
+ ```javascript
172
+ import { BccButton, BccModal } from '@bcc-code/design-library-vue'
173
+ import '@bcc-code/design-library-vue/style.css'
174
+ ```
175
+
176
+ **After (design-tokens + PrimeVue):**
177
+ ```javascript
178
+ import Button from 'primevue/button'
179
+ import Dialog from 'primevue/dialog'
180
+ import BCCPreset from '@bcc-code/design-tokens/primevue'
181
+ import '@bcc-code/design-tokens/primevue/overrides'
182
+ ```
183
+
184
+ ### 3. Configure PrimeVue
185
+
186
+ ```javascript
187
+ import { createApp } from 'vue'
188
+ import PrimeVue from 'primevue/config'
189
+ import BCCPreset from '@bcc-code/design-tokens/primevue'
190
+ import '@bcc-code/design-tokens/primevue/overrides'
191
+
192
+ const app = createApp(App)
193
+
194
+ app.use(PrimeVue, {
195
+ theme: {
196
+ preset: BCCPreset,
197
+ options: {
198
+ darkModeSelector: '.dark'
199
+ }
200
+ }
201
+ })
202
+ ```
203
+
204
+ ### 4. Component mapping
205
+
206
+ | design-library-vue | PrimeVue |
207
+ |--------------------|----------|
208
+ | BccButton | Button |
209
+ | BccModal | Dialog |
210
+ | BccInput | InputText |
211
+ | BccSelect | Select |
212
+ | BccCheckbox | Checkbox |
213
+ | BccRadio | RadioButton |
214
+ | BccTabs | TabView |
215
+ | BccTable | DataTable |
216
+ | BccBadge | Badge |
217
+ | BccSpinner | ProgressSpinner |
218
+
219
+ See the [PrimeVue documentation](https://primevue.org/introduction/) for the full component list.
220
+
221
+ ## Token Structure
222
+
223
+ Tokens are organized in two layers:
224
+
225
+ ### Primitive Tokens (Base Values)
226
+ Static values that don't change between themes:
227
+ - `--color-neutral-0` through `--color-neutral-1000`
228
+ - `--color-green-*`, `--color-red-*`, `--color-blue-*`
229
+ - `--space-50` through `--space-1000`
230
+ - `--border-radius-sm`, `--border-radius-md`, `--border-radius-lg`
231
+
232
+ ### Semantic Tokens (Theme-Aware)
233
+ Reference primitive tokens and change between light/dark:
234
+ - `--color-text-default` - Main text color
235
+ - `--color-text-subtle` - Secondary text
236
+ - `--color-background-*` - Background colors
237
+ - `--color-elevation-surface-*` - Surface elevation levels
238
+ - `--color-border-*` - Border colors
239
+ - `--color-interactive-*` - Interactive element colors
240
+
241
+ ## Tailwind Utility Classes
242
+
243
+ When using Tailwind v4, these utility classes are available:
244
+
245
+ ### Colors
246
+ ```html
247
+ <!-- Text colors -->
248
+ <p class="text-default">Default text</p>
249
+ <p class="text-subtle">Subtle text</p>
250
+ <p class="text-success">Success text</p>
251
+ <p class="text-danger">Danger text</p>
252
+
253
+ <!-- Background colors -->
254
+ <div class="bg-elevation-surface-default">Surface</div>
255
+ <div class="bg-elevation-surface-sunken">Sunken surface</div>
256
+ <div class="bg-interactive-primary">Primary button</div>
257
+
258
+ <!-- Border colors -->
259
+ <div class="border border-default">Default border</div>
260
+ ```
261
+
262
+ ### Spacing Scale
263
+ | Token | Value | Pixels |
264
+ |-------|-------|--------|
265
+ | 50 | 0.25rem | 4px |
266
+ | 100 | 0.5rem | 8px |
267
+ | 150 | 0.75rem | 12px |
268
+ | 200 | 1rem | 16px |
269
+ | 250 | 1.25rem | 20px |
270
+ | 300 | 1.5rem | 24px |
271
+ | 400 | 2rem | 32px |
272
+ | 500 | 2.5rem | 40px |
273
+ | 600 | 3rem | 48px |
274
+ | 800 | 4rem | 64px |
275
+ | 1000 | 5rem | 80px |
276
+
277
+ ```html
278
+ <div class="p-100">Padding 8px</div>
279
+ <div class="p-200">Padding 16px</div>
280
+ <div class="p-300">Padding 24px</div>
281
+ <div class="m-400">Margin 32px</div>
282
+ <div class="gap-200">Gap 16px</div>
283
+ ```
284
+
285
+ ### Border Radius
286
+ ```html
287
+ <div class="radius-sm">Small radius</div>
288
+ <div class="radius-md">Medium radius</div>
289
+ <div class="radius-lg">Large radius</div>
290
+ <div class="radius-full">Full radius (pill)</div>
291
+ ```
292
+
293
+ ### Dark Mode
294
+ ```html
295
+ <!-- Container with dark mode -->
296
+ <div class="dark">
297
+ <div class="bg-elevation-surface-default text-default">
298
+ Automatically uses dark theme colors
299
+ </div>
300
+ </div>
301
+
302
+ <!-- Or toggle on root -->
303
+ <script>
304
+ document.documentElement.classList.toggle('dark')
305
+ </script>
306
+ ```
307
+
142
308
  ## Contributing
143
309
 
144
310
  Contributions are welcome! See [CONTRIBUTING.md](CONTRIBUTING.md) for development setup, workflow, and publishing instructions.
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
  },