banhaten 0.2.0 → 0.4.0

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 (120) hide show
  1. package/CHANGELOG.md +55 -0
  2. package/README.md +5 -5
  3. package/docs/design-system/component-implementation-ownership-audit.md +245 -0
  4. package/docs/design-system/component-quality-audit-2026-08-20.md +225 -0
  5. package/docs/design-system/component-showcase-consistency-report.md +2 -0
  6. package/docs/design-system/components/README.md +1 -0
  7. package/docs/design-system/components/activity-feed.md +2 -0
  8. package/docs/design-system/components/activity-heatmap.md +73 -0
  9. package/docs/design-system/components/alert-dialog.md +1 -1
  10. package/docs/design-system/components/alert.md +3 -3
  11. package/docs/design-system/components/attribute.md +1 -1
  12. package/docs/design-system/components/avatar.md +2 -2
  13. package/docs/design-system/components/badge.md +1 -1
  14. package/docs/design-system/components/banner.md +6 -2
  15. package/docs/design-system/components/breadcrumbs.md +5 -2
  16. package/docs/design-system/components/button-group.md +3 -2
  17. package/docs/design-system/components/button.md +2 -2
  18. package/docs/design-system/components/card.md +11 -3
  19. package/docs/design-system/components/catalog-components.md +3 -0
  20. package/docs/design-system/components/date-picker.md +3 -1
  21. package/docs/design-system/components/file-upload.md +5 -1
  22. package/docs/design-system/components/input.md +8 -6
  23. package/docs/design-system/components/item.md +3 -1
  24. package/docs/design-system/components/kbd.md +11 -8
  25. package/docs/design-system/components/menu.md +2 -2
  26. package/docs/design-system/components/modal.md +1 -1
  27. package/docs/design-system/components/navigation-menu.md +1 -1
  28. package/docs/design-system/components/onboarding-step-list-item.md +3 -2
  29. package/docs/design-system/components/page-header.md +3 -1
  30. package/docs/design-system/components/pagination.md +3 -2
  31. package/docs/design-system/components/radio-card.md +1 -1
  32. package/docs/design-system/components/resizable.md +1 -1
  33. package/docs/design-system/components/scroll-area.md +7 -3
  34. package/docs/design-system/components/select.md +1 -1
  35. package/docs/design-system/components/sidebar.md +60 -18
  36. package/docs/design-system/components/slideout.md +4 -1
  37. package/docs/design-system/components/steps.md +7 -2
  38. package/docs/design-system/components/table.md +25 -7
  39. package/docs/design-system/components/tag.md +3 -3
  40. package/docs/design-system/components/timeline.md +4 -1
  41. package/docs/design-system/components/toggle.md +1 -1
  42. package/docs/design-system/components/toolbar.md +1 -1
  43. package/docs/design-system/components/tooltip.md +1 -1
  44. package/docs/design-system/density-and-elevation.md +23 -2
  45. package/docs/design-system/gap-promotion-report.md +1 -67
  46. package/docs/design-system/icons.md +6 -1
  47. package/docs/design-system/installation.md +1 -1
  48. package/docs/design-system/launch-comparison-shadcn.md +10 -10
  49. package/docs/design-system/token-governance.md +7 -8
  50. package/package.json +3 -2
  51. package/registry/components/alert-dialog.tsx +1 -1
  52. package/registry/components/alert.tsx +17 -13
  53. package/registry/components/attribute.tsx +8 -2
  54. package/registry/components/avatar.tsx +28 -20
  55. package/registry/components/badge.tsx +17 -17
  56. package/registry/components/button-group.tsx +4 -2
  57. package/registry/components/button.tsx +3 -3
  58. package/registry/components/card.tsx +19 -3
  59. package/registry/components/carousel.tsx +14 -0
  60. package/registry/components/command.tsx +37 -3
  61. package/registry/components/date-picker.tsx +83 -35
  62. package/registry/components/expanded/ActivityFeed.tsx +3 -7
  63. package/registry/components/expanded/ActivityHeatmap.tsx +64 -0
  64. package/registry/components/expanded/Banner.tsx +0 -1
  65. package/registry/components/expanded/Breadcrumbs.tsx +3 -0
  66. package/registry/components/expanded/CatalogComponentsShowcase.tsx +3 -4
  67. package/registry/components/expanded/CatalogDivider.tsx +3 -2
  68. package/registry/components/expanded/FileUpload.tsx +7 -5
  69. package/registry/components/expanded/OnboardingStepListItem.tsx +6 -7
  70. package/registry/components/expanded/PageHeader.tsx +35 -44
  71. package/registry/components/expanded/Slideout.tsx +18 -13
  72. package/registry/components/expanded/Steps.tsx +147 -9
  73. package/registry/components/expanded/Table.tsx +50 -18
  74. package/registry/components/expanded/Timeline.tsx +11 -24
  75. package/registry/components/expanded/activityFeed.css +8 -8
  76. package/registry/components/expanded/activityHeatmap.css +66 -0
  77. package/registry/components/expanded/banner.css +30 -15
  78. package/registry/components/expanded/breadcrumbs.css +5 -5
  79. package/registry/components/expanded/fileUpload.css +4 -4
  80. package/registry/components/expanded/onboardingStepListItem.css +16 -7
  81. package/registry/components/expanded/pageHeader.css +14 -11
  82. package/registry/components/expanded/slideout.css +3 -7
  83. package/registry/components/expanded/steps.css +75 -12
  84. package/registry/components/expanded/table.css +63 -69
  85. package/registry/components/expanded/timeline.css +17 -16
  86. package/registry/components/field.tsx +61 -8
  87. package/registry/components/input.tsx +12 -5
  88. package/registry/components/item.tsx +1 -1
  89. package/registry/components/kbd.tsx +109 -15
  90. package/registry/components/menu.tsx +57 -7
  91. package/registry/components/modal.tsx +1 -1
  92. package/registry/components/navigation-menu.tsx +1 -1
  93. package/registry/components/pagination.css +36 -0
  94. package/registry/components/pagination.tsx +20 -13
  95. package/registry/components/progress-slider.tsx +1 -1
  96. package/registry/components/radio-card.tsx +1 -2
  97. package/registry/components/resizable.tsx +36 -2
  98. package/registry/components/scroll-area.tsx +30 -6
  99. package/registry/components/select.tsx +35 -12
  100. package/registry/components/sidebar.tsx +940 -62
  101. package/registry/components/social-button.tsx +12 -5
  102. package/registry/components/table-elements.tsx +128 -0
  103. package/registry/components/tabs.tsx +5 -10
  104. package/registry/components/tag.tsx +2 -2
  105. package/registry/components/toggle.tsx +2 -2
  106. package/registry/components/toolbar.tsx +6 -6
  107. package/registry/components/tooltip.tsx +1 -1
  108. package/registry/examples/attribute-demo.tsx +1 -1
  109. package/registry/examples/avatar-demo.tsx +7 -4
  110. package/registry/examples/command-palette-demo.tsx +0 -1
  111. package/registry/examples/expanded/activity-heatmap-demo.tsx +29 -0
  112. package/registry/examples/expanded/breadcrumbs-demo.tsx +3 -3
  113. package/registry/examples/kbd-demo.tsx +2 -1
  114. package/registry/examples/pagination-demo.tsx +5 -5
  115. package/registry/examples/sidebar-demo.tsx +59 -13
  116. package/registry/guidance/USAGE.md +1 -1
  117. package/registry/index.json +621 -60
  118. package/registry/styles/globals.css +211 -151
  119. package/registry.json +44 -6
  120. package/tokens/banhaten.tokens.json +325 -95
package/registry/styles/globals.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /* Banhaten design system tokens: deterministically generated from tokens/banhaten.tokens.json and tokens/banhaten.utilities.css. */
2
2
 
3
3
  :root,
4
- [data-theme="blue"] {
4
+ [data-theme="gray"] {
5
5
  --accent: var(--bh-interactive-ghost-hover);
6
6
  --accent-foreground: var(--bh-content-default);
7
7
  --accent-hover: var(--bh-interactive-ghost-pressed);
@@ -18,7 +18,8 @@
18
18
  --bh-alert-expanded-radius: var(--bh-radius-xl-10);
19
19
  --bh-alert-expanded-rtl-height: calc(var(--bh-space-11xl-96) + var(--bh-space-5xl-24));
20
20
  --bh-alert-expanded-width: 500px;
21
- --bh-alert-icon-size: var(--bh-space-4xl-20);
21
+ --bh-alert-icon-size: var(--bh-icon-size-default);
22
+ --bh-alert-icon-slot-size: var(--bh-icon-slot-size-default);
22
23
  --bh-alpha-alpha-transparent: rgb(255 255 255 / 0);
23
24
  --bh-alpha-alpha-transparent-to-100: rgb(255 255 255 / 0);
24
25
  --bh-alpha-alpha-transparent-to-500: rgb(255 255 255 / 0);
@@ -29,6 +30,7 @@
29
30
  --bh-amber-600: #CD6103;
30
31
  --bh-amber-700: #AC4C03;
31
32
  --bh-amber-800: #863E07;
33
+ --bh-amber-900: #652C07;
32
34
  --bh-aqua-100: #BBFAEA;
33
35
  --bh-aqua-200: #87F0D5;
34
36
  --bh-aqua-50: #DBFFF6;
@@ -69,8 +71,8 @@
69
71
  --bh-avatar-icon-size-2xs: var(--bh-space-lg-10);
70
72
  --bh-avatar-icon-size-3xl: var(--bh-space-6xl-32);
71
73
  --bh-avatar-icon-size-4xl: 36px;
72
- --bh-avatar-icon-size-lg: var(--bh-space-4xl-20);
73
- --bh-avatar-icon-size-md: var(--bh-space-4xl-20);
74
+ --bh-avatar-icon-size-lg: var(--bh-icon-size-default);
75
+ --bh-avatar-icon-size-md: var(--bh-icon-size-default);
74
76
  --bh-avatar-icon-size-sm: var(--bh-space-3xl-16);
75
77
  --bh-avatar-icon-size-xl: var(--bh-space-5xl-24);
76
78
  --bh-avatar-icon-size-xs: var(--bh-space-xl-12);
@@ -100,6 +102,7 @@
100
102
  --bh-bg-accent-aqua-default: var(--bh-aqua-500);
101
103
  --bh-bg-accent-aqua-soft: var(--bh-aqua-100);
102
104
  --bh-bg-accent-aqua-subtle: var(--bh-aqua-50);
105
+ --bh-bg-accent-blue-bold: var(--bh-blue-600);
103
106
  --bh-bg-accent-blue-default: var(--bh-blue-500);
104
107
  --bh-bg-accent-blue-soft: var(--bh-blue-100);
105
108
  --bh-bg-accent-blue-subtle: var(--bh-blue-50);
@@ -122,6 +125,7 @@
122
125
  --bh-bg-accent-red-default: var(--bh-red-500);
123
126
  --bh-bg-accent-red-soft: var(--bh-red-100);
124
127
  --bh-bg-accent-red-subtle: var(--bh-red-50);
128
+ --bh-bg-accent-rose-bold: var(--bh-rose-600);
125
129
  --bh-bg-accent-rose-default: var(--bh-rose-500);
126
130
  --bh-bg-accent-rose-soft: var(--bh-rose-100);
127
131
  --bh-bg-accent-rose-subtle: var(--bh-rose-50);
@@ -178,15 +182,11 @@
178
182
  --bh-bg-warning-subtle: var(--bh-amber-50);
179
183
  --bh-blue-100: #D6EAFF;
180
184
  --bh-blue-200: #BBDAFF;
181
- --bh-blue-300: #8DBDFF;
182
- --bh-blue-400: #5B97FF;
183
185
  --bh-blue-50: #EBF5FF;
184
186
  --bh-blue-500: #3276FF;
185
187
  --bh-blue-600: #245DED;
186
188
  --bh-blue-700: #1D49BF;
187
- --bh-blue-800: #11318F;
188
189
  --bh-blue-900: #0A1B63;
189
- --bh-blue-alpha10: rgb(50 118 255 / 0.1);
190
190
  --bh-border-accent-amber-strong: var(--bh-amber-500);
191
191
  --bh-border-accent-amber-subtle: var(--bh-amber-300);
192
192
  --bh-border-accent-aqua-strong: var(--bh-aqua-500);
@@ -239,7 +239,8 @@
239
239
  --bh-button-group-content-default: var(--bh-content-subtle);
240
240
  --bh-button-group-content-disabled: var(--bh-content-disabled);
241
241
  --bh-button-group-divider: var(--bh-border-subtle);
242
- --bh-button-group-icon-size: var(--bh-space-4xl-20);
242
+ --bh-button-group-icon-size: var(--bh-icon-size-default);
243
+ --bh-button-group-icon-slot-size: var(--bh-icon-slot-size-default);
243
244
  --bh-button-group-item-active-bg: var(--bh-interactive-ghost-active);
244
245
  --bh-button-group-item-bg: var(--bh-interactive-ghost-default);
245
246
  --bh-button-group-item-disabled-bg: var(--bh-interactive-ghost-disabled);
@@ -267,7 +268,8 @@
267
268
  --bh-button-group-xs-item-width: 112px;
268
269
  --bh-button-group-xs-padding-x: var(--bh-space-md-8);
269
270
  --bh-button-icon-offset: calc(var(--bh-space-xxs-2) * -1);
270
- --bh-button-icon-size: var(--bh-space-4xl-20);
271
+ --bh-button-icon-size: var(--bh-icon-size-default);
272
+ --bh-button-icon-slot-size: var(--bh-icon-slot-size-default);
271
273
  --bh-button-label-padding-x: var(--bh-space-xs-4);
272
274
  --bh-button-lg-height: var(--bh-space-8xl-48);
273
275
  --bh-button-lg-padding-x: var(--bh-space-xl-12);
@@ -342,48 +344,48 @@
342
344
  --bh-checkbox-indeterminate-height: var(--bh-space-xxs-2);
343
345
  --bh-checkbox-indeterminate-width: var(--bh-space-md-8);
344
346
  --bh-checkbox-root-size: var(--bh-space-4xl-20);
345
- --bh-colors-brand-border-border-strong: var(--bh-blue-600);
346
- --bh-colors-brand-border-border-strong-dark: var(--bh-blue-500);
347
- --bh-colors-brand-border-border-subtle: var(--bh-blue-300);
348
- --bh-colors-brand-border-border-subtle-dark: var(--bh-blue-800);
349
- --bh-colors-brand-checkbox-bg-default: var(--bh-blue-600);
350
- --bh-colors-brand-checkbox-bg-default-dark: var(--bh-blue-500);
351
- --bh-colors-brand-checkbox-bg-hover: var(--bh-blue-600);
352
- --bh-colors-brand-checkbox-bg-hover-dark: var(--bh-blue-600);
353
- --bh-colors-brand-color-on-brand-dark: var(--bh-base-white);
347
+ --bh-colors-brand-border-border-strong: var(--bh-gray-950);
348
+ --bh-colors-brand-border-border-strong-dark: var(--bh-gray-dark-950);
349
+ --bh-colors-brand-border-border-subtle: var(--bh-gray-500);
350
+ --bh-colors-brand-border-border-subtle-dark: var(--bh-gray-dark-500);
351
+ --bh-colors-brand-checkbox-bg-default: var(--bh-gray-950);
352
+ --bh-colors-brand-checkbox-bg-default-dark: var(--bh-gray-50);
353
+ --bh-colors-brand-checkbox-bg-hover: var(--bh-gray-950);
354
+ --bh-colors-brand-checkbox-bg-hover-dark: var(--bh-gray-100);
355
+ --bh-colors-brand-color-on-brand-dark: var(--bh-gray-dark-50);
354
356
  --bh-colors-brand-color-on-brand-light: var(--bh-base-white);
355
- --bh-colors-brand-content-dark: var(--bh-blue-500);
356
- --bh-colors-brand-content-light: var(--bh-blue-600);
357
- --bh-colors-brand-content-strong-dark: var(--bh-blue-400);
358
- --bh-colors-brand-content-strong-light: var(--bh-blue-700);
359
- --bh-colors-brand-focused-dark: var(--bh-blue-300);
360
- --bh-colors-brand-focused-light: var(--bh-blue-500);
361
- --bh-colors-brand-indicator: var(--bh-blue-500);
362
- --bh-colors-brand-indicator-dark: var(--bh-blue-600);
363
- --bh-colors-brand-interactive-default: var(--bh-derived-blue-550-reviewed);
364
- --bh-colors-brand-interactive-default-dark: var(--bh-blue-600);
365
- --bh-colors-brand-interactive-hover: var(--bh-blue-600);
366
- --bh-colors-brand-interactive-hover-dark: var(--bh-derived-blue-550-reviewed);
367
- --bh-colors-brand-interactive-pressed: var(--bh-blue-700);
368
- --bh-colors-brand-interactive-pressed-dark: var(--bh-blue-600);
369
- --bh-colors-brand-link-dark: var(--bh-blue-500);
370
- --bh-colors-brand-link-hover-dark: var(--bh-blue-400);
371
- --bh-colors-brand-link-hover-light: var(--bh-blue-700);
372
- --bh-colors-brand-link-light: var(--bh-blue-600);
373
- --bh-colors-brand-radiobutton-bg-default: var(--bh-blue-600);
374
- --bh-colors-brand-radiobutton-bg-default-dark: var(--bh-blue-500);
375
- --bh-colors-brand-radiobutton-bg-hover: var(--bh-blue-600);
376
- --bh-colors-brand-radiobutton-bg-hover-dark: var(--bh-blue-600);
377
- --bh-colors-brand-surface-base: var(--bh-blue-500);
378
- --bh-colors-brand-surface-base-dark: var(--bh-blue-600);
379
- --bh-colors-brand-surface-bold-dark: var(--bh-blue-700);
380
- --bh-colors-brand-surface-bold-light: var(--bh-blue-600);
381
- --bh-colors-brand-surface-soft-dark: var(--bh-blue-800);
382
- --bh-colors-brand-surface-soft-light: var(--bh-blue-100);
383
- --bh-colors-brand-surface-strong-dark: var(--bh-blue-800);
384
- --bh-colors-brand-surface-strong-light: var(--bh-blue-700);
385
- --bh-colors-brand-surface-subtle-dark: var(--bh-blue-alpha10);
386
- --bh-colors-brand-surface-subtle-light: var(--bh-blue-50);
357
+ --bh-colors-brand-content-dark: var(--bh-base-white);
358
+ --bh-colors-brand-content-light: var(--bh-gray-950);
359
+ --bh-colors-brand-content-strong-dark: var(--bh-base-white);
360
+ --bh-colors-brand-content-strong-light: var(--bh-gray-950);
361
+ --bh-colors-brand-focused-dark: var(--bh-base-white);
362
+ --bh-colors-brand-focused-light: var(--bh-gray-950);
363
+ --bh-colors-brand-indicator: var(--bh-gray-950);
364
+ --bh-colors-brand-indicator-dark: var(--bh-gray-dark-950);
365
+ --bh-colors-brand-interactive-default: var(--bh-gray-950);
366
+ --bh-colors-brand-interactive-default-dark: var(--bh-gray-dark-950);
367
+ --bh-colors-brand-interactive-hover: var(--bh-gray-900);
368
+ --bh-colors-brand-interactive-hover-dark: var(--bh-gray-dark-900);
369
+ --bh-colors-brand-interactive-pressed: var(--bh-gray-950);
370
+ --bh-colors-brand-interactive-pressed-dark: var(--bh-gray-dark-950);
371
+ --bh-colors-brand-link-dark: var(--bh-base-white);
372
+ --bh-colors-brand-link-hover-dark: var(--bh-gray-200);
373
+ --bh-colors-brand-link-hover-light: var(--bh-gray-900);
374
+ --bh-colors-brand-link-light: var(--bh-gray-950);
375
+ --bh-colors-brand-radiobutton-bg-default: var(--bh-gray-950);
376
+ --bh-colors-brand-radiobutton-bg-default-dark: var(--bh-gray-50);
377
+ --bh-colors-brand-radiobutton-bg-hover: var(--bh-gray-950);
378
+ --bh-colors-brand-radiobutton-bg-hover-dark: var(--bh-gray-500);
379
+ --bh-colors-brand-surface-base: var(--bh-gray-950);
380
+ --bh-colors-brand-surface-base-dark: var(--bh-base-white);
381
+ --bh-colors-brand-surface-bold-dark: var(--bh-gray-dark-900);
382
+ --bh-colors-brand-surface-bold-light: var(--bh-gray-800);
383
+ --bh-colors-brand-surface-soft-dark: var(--bh-gray-dark-alpha-300);
384
+ --bh-colors-brand-surface-soft-light: var(--bh-gray-300);
385
+ --bh-colors-brand-surface-strong-dark: var(--bh-gray-dark-800);
386
+ --bh-colors-brand-surface-strong-light: var(--bh-gray-900);
387
+ --bh-colors-brand-surface-subtle-dark: var(--bh-gray-dark-alpha-200);
388
+ --bh-colors-brand-surface-subtle-light: var(--bh-gray-200);
387
389
  --bh-colors-neutral-100: var(--bh-gray-100);
388
390
  --bh-colors-neutral-200: var(--bh-gray-200);
389
391
  --bh-colors-neutral-300: var(--bh-gray-300);
@@ -455,6 +457,9 @@
455
457
  --bh-content-on-brand: var(--bh-colors-brand-color-on-brand-light);
456
458
  --bh-content-on-color: var(--bh-base-white);
457
459
  --bh-content-on-light: var(--bh-colors-neutral-950);
460
+ --bh-content-on-neutral: var(--bh-base-white);
461
+ --bh-content-on-success: var(--bh-base-white);
462
+ --bh-content-on-warning: var(--bh-base-white);
458
463
  --bh-content-subtle: var(--bh-colors-neutral-800);
459
464
  --bh-content-success-default: var(--bh-green-600);
460
465
  --bh-content-success-strong: var(--bh-green-700);
@@ -473,7 +478,8 @@
473
478
  --bh-date-month-year-list-width: var(--bh-date-range-month-width);
474
479
  --bh-date-month-year-spacer-height: 252px;
475
480
  --bh-date-nav-button-size: var(--bh-button-xs-height);
476
- --bh-date-nav-icon-size: var(--bh-button-icon-size);
481
+ --bh-date-nav-icon-size: var(--bh-icon-size-default);
482
+ --bh-date-nav-icon-slot-size: var(--bh-icon-slot-size-default);
477
483
  --bh-date-picker-width: var(--bh-date-trigger-width);
478
484
  --bh-date-presets-width: 144px;
479
485
  --bh-date-range-month-width: var(--bh-space-15xl-224);
@@ -484,9 +490,9 @@
484
490
  --bh-date-title-chevron-size: var(--bh-space-3xl-16);
485
491
  --bh-date-title-height: var(--bh-button-xs-height);
486
492
  --bh-date-trigger-height: var(--bh-button-md-height);
487
- --bh-date-trigger-icon-size: var(--bh-button-icon-size);
493
+ --bh-date-trigger-icon-size: var(--bh-icon-size-default);
494
+ --bh-date-trigger-icon-slot-size: var(--bh-icon-slot-size-default);
488
495
  --bh-date-trigger-width: 260px;
489
- --bh-derived-blue-550-reviewed: #2B6BED;
490
496
  --bh-duration-accordion: 180ms;
491
497
  --bh-duration-default: 200ms;
492
498
  --bh-duration-fast: 160ms;
@@ -564,6 +570,8 @@
564
570
  --bh-green-500: #0BAE45;
565
571
  --bh-green-600: #039536;
566
572
  --bh-green-700: #07712C;
573
+ --bh-green-800: #075622;
574
+ --bh-green-900: #043F18;
567
575
  --bh-icon-explorer-canvas-max-width: 1280px;
568
576
  --bh-icon-explorer-detail-max-width: 760px;
569
577
  --bh-icon-explorer-detail-preview-size: 86px;
@@ -585,6 +593,9 @@
585
593
  --bh-icon-explorer-swatch-width: 150px;
586
594
  --bh-icon-explorer-topbar-bg: color-mix(in srgb, var(--bh-bg-grouped) 92%, transparent);
587
595
  --bh-icon-explorer-topbar-min-height: 74px;
596
+ --bh-icon-size-default: 18px;
597
+ --bh-icon-slot-inset-default: calc((var(--bh-icon-slot-size-default) - var(--bh-icon-size-default)) / 2);
598
+ --bh-icon-slot-size-default: var(--bh-space-4xl-20);
588
599
  --bh-icon-stroke-180: 1.8;
589
600
  --bh-icon-stroke-190: 1.9;
590
601
  --bh-icon-stroke-200: 2;
@@ -607,6 +618,7 @@
607
618
  --bh-input-content-gap: var(--bh-space-sm-6);
608
619
  --bh-input-helper-gap: var(--bh-space-sm-6);
609
620
  --bh-input-icon-size: var(--bh-space-3xl-16);
621
+ --bh-input-icon-slot-size: var(--bh-space-4xl-20);
610
622
  --bh-input-info-icon-size: 13.333px;
611
623
  --bh-input-inline-gap: var(--bh-space-xs-4);
612
624
  --bh-input-inline-tags-gap: var(--bh-space-sm-6);
@@ -669,6 +681,9 @@
669
681
  --bh-interactive-soft-disabled: var(--bh-colors-neutral-alpha-100);
670
682
  --bh-interactive-soft-hover: var(--bh-colors-neutral-alpha-200);
671
683
  --bh-interactive-soft-pressed: var(--bh-colors-neutral-alpha-300);
684
+ --bh-interactive-success-default: var(--bh-green-700);
685
+ --bh-interactive-success-hover: var(--bh-green-800);
686
+ --bh-interactive-success-pressed: var(--bh-green-900);
672
687
  --bh-interactive-switch-active: var(--bh-green-500);
673
688
  --bh-interactive-switch-active-disabled: var(--bh-green-100);
674
689
  --bh-interactive-switch-active-hover: var(--bh-green-600);
@@ -678,11 +693,15 @@
678
693
  --bh-interactive-switch-handle-disabled: var(--bh-colors-neutral-50);
679
694
  --bh-interactive-switch-hover: var(--bh-colors-neutral-500);
680
695
  --bh-interactive-table-header: var(--bh-colors-neutral-alpha-50);
696
+ --bh-interactive-warning-default: var(--bh-amber-700);
697
+ --bh-interactive-warning-hover: var(--bh-amber-800);
698
+ --bh-interactive-warning-pressed: var(--bh-amber-900);
681
699
  --bh-item-actions-gap: var(--bh-space-md-8);
682
700
  --bh-item-content-gap: var(--bh-space-xxs-2);
683
701
  --bh-item-gap: var(--bh-space-xl-12);
684
702
  --bh-item-group-gap: var(--bh-space-xs-4);
685
- --bh-item-icon-size: var(--bh-space-4xl-20);
703
+ --bh-item-icon-size: var(--bh-icon-size-default);
704
+ --bh-item-icon-slot-size: var(--bh-icon-slot-size-default);
686
705
  --bh-item-media-radius: var(--bh-radius-lg-8);
687
706
  --bh-item-media-size: var(--bh-space-7xl-40);
688
707
  --bh-item-min-height-lg: var(--bh-space-11xl-96);
@@ -727,7 +746,8 @@
727
746
  --bh-menu-item-radius: var(--bh-radius-md-6);
728
747
  --bh-menu-item-slot-gap: var(--bh-space-md-8);
729
748
  --bh-menu-label-padding-x: var(--bh-space-3xl-16);
730
- --bh-menu-leading-icon-size: var(--bh-space-4xl-20);
749
+ --bh-menu-leading-icon-size: var(--bh-icon-size-default);
750
+ --bh-menu-leading-icon-slot-size: var(--bh-icon-slot-size-default);
731
751
  --bh-menu-padding-y: var(--bh-space-sm-6);
732
752
  --bh-menu-progress-gap: var(--bh-space-md-8);
733
753
  --bh-menu-progress-height: var(--bh-space-md-8);
@@ -787,7 +807,8 @@
787
807
  --bh-pagination-control-text-rtl-gap: var(--bh-space-xxs-2);
788
808
  --bh-pagination-control-text-rtl-padding-x: var(--bh-space-sm-6);
789
809
  --bh-pagination-font-size: var(--bh-text-body-md-medium-font-size);
790
- --bh-pagination-icon-size: var(--bh-space-4xl-20);
810
+ --bh-pagination-icon-size: var(--bh-icon-size-default);
811
+ --bh-pagination-icon-slot-size: var(--bh-icon-slot-size-default);
791
812
  --bh-pagination-item-size: var(--bh-space-6xl-32);
792
813
  --bh-pagination-label-font-weight: var(--bh-text-body-md-medium-font-weight);
793
814
  --bh-pagination-letter-spacing: var(--bh-text-body-md-medium-letter-spacing);
@@ -934,22 +955,35 @@
934
955
  --bh-select-trigger-radius: var(--bh-radius-lg-8);
935
956
  --bh-select-value-padding-inline: var(--bh-space-xs-4);
936
957
  --bh-select-width: var(--bh-space-18xl-320);
937
- --bh-sidebar-bg: var(--bh-bg-raised);
958
+ --bh-sidebar-active-guide-height: 15px;
959
+ --bh-sidebar-bg: var(--bh-bg-default);
938
960
  --bh-sidebar-bg-collapsed: var(--bh-bg-default);
939
961
  --bh-sidebar-border: var(--bh-border-subtle);
940
- --bh-sidebar-icon-size: var(--bh-space-5xl-24);
962
+ --bh-sidebar-brand-height: 38px;
963
+ --bh-sidebar-compact-control-size: 36px;
964
+ --bh-sidebar-header-action-size: 28px;
965
+ --bh-sidebar-icon-size: var(--bh-icon-size-default);
966
+ --bh-sidebar-icon-size-collapsed: var(--bh-icon-size-default);
967
+ --bh-sidebar-icon-slot-size: var(--bh-icon-slot-size-default);
941
968
  --bh-sidebar-item-bg-active: var(--bh-interactive-soft-default);
942
969
  --bh-sidebar-item-bg-hover: var(--bh-interactive-ghost-hover);
943
970
  --bh-sidebar-item-content: var(--bh-content-subtle);
944
971
  --bh-sidebar-item-content-active: var(--bh-content-default);
945
972
  --bh-sidebar-item-gap: var(--bh-space-md-8);
946
- --bh-sidebar-item-height: var(--bh-space-7xl-40);
947
- --bh-sidebar-item-padding-x: var(--bh-space-xl-12);
948
- --bh-sidebar-padding: var(--bh-space-3xl-16);
973
+ --bh-sidebar-item-height: var(--bh-space-6xl-32);
974
+ --bh-sidebar-item-height-collapsed: var(--bh-space-7xl-40);
975
+ --bh-sidebar-item-padding-x: var(--bh-space-sm-6);
976
+ --bh-sidebar-level-2-indent-width: 44px;
977
+ --bh-sidebar-padding: var(--bh-space-lg-10);
949
978
  --bh-sidebar-rail-width: 16px;
950
979
  --bh-sidebar-section-gap: var(--bh-space-3xl-16);
980
+ --bh-sidebar-tree-indent-step: 22px;
981
+ --bh-sidebar-tree-item-height: 28px;
951
982
  --bh-sidebar-width: 280px;
952
- --bh-sidebar-width-collapsed: 72px;
983
+ --bh-sidebar-width-collapsed: 48px;
984
+ --bh-sidebar-workspace-card-height: 50px;
985
+ --bh-sidebar-workspace-trigger-max-width: 148px;
986
+ --bh-sidebar-workspace-trigger-width: 143px;
953
987
  --bh-skeleton-duration: 1.4s;
954
988
  --bh-skeleton-shimmer-width: 62%;
955
989
  --bh-skeleton-width: 100%;
@@ -998,10 +1032,10 @@
998
1032
  --bh-social-button-padding-x: var(--bh-space-xl-12);
999
1033
  --bh-social-button-padding-y: var(--bh-space-sm-6);
1000
1034
  --bh-social-button-radius: var(--bh-control-default);
1001
- --bh-social-facebook-bg: #1877F2;
1035
+ --bh-social-facebook-bg: #1465CE;
1002
1036
  --bh-social-facebook-border: transparent;
1003
1037
  --bh-social-facebook-fg: var(--bh-content-on-color);
1004
- --bh-social-facebook-hover: #1465CE;
1038
+ --bh-social-facebook-hover: #0F52A8;
1005
1039
  --bh-social-facebook-icon: var(--bh-content-on-color);
1006
1040
  --bh-social-facebook-outline-icon: var(--bh-social-facebook-bg);
1007
1041
  --bh-social-facebook-width: 210px;
@@ -1033,10 +1067,10 @@
1033
1067
  --bh-social-twitter-outline-icon: var(--bh-bg-always-dark);
1034
1068
  --bh-social-twitter-width: 190px;
1035
1069
  --bh-social-twitter-width-rtl: 231px;
1036
- --bh-social-whatsapp-bg: #09B248;
1070
+ --bh-social-whatsapp-bg: #087D34;
1037
1071
  --bh-social-whatsapp-border: transparent;
1038
1072
  --bh-social-whatsapp-fg: var(--bh-content-on-color);
1039
- --bh-social-whatsapp-hover: #08973D;
1073
+ --bh-social-whatsapp-hover: #066428;
1040
1074
  --bh-social-whatsapp-icon: var(--bh-content-on-color);
1041
1075
  --bh-social-whatsapp-outline-icon: var(--bh-social-whatsapp-bg);
1042
1076
  --bh-social-whatsapp-width: 214px;
@@ -1349,6 +1383,8 @@
1349
1383
  --secondary-foreground: var(--bh-content-default);
1350
1384
  --secondary-hover: var(--bh-interactive-secondary-hover);
1351
1385
  --secondary-pressed: var(--bh-interactive-secondary-pressed);
1386
+ --shadow-2xl: 0px 0px 0px 1px rgb(0 0 0 / 0.06), 0px 1px 1px -0.5px rgb(0 0 0 / 0.06), 0px 3px 3px -1.5px rgb(0 0 0 / 0.06), 0px 6px 6px -3px rgb(0 0 0 / 0.06), 0px 12px 12px -6px rgb(0 0 0 / 0.06), 0px 24px 24px -12px rgb(0 0 0 / 0.06), inset 0px 1px 0px 0px rgb(255 255 255 / 0), inset 0px 0px 0px 1px rgb(255 255 255 / 0);
1387
+ --shadow-3xl: 0px 0px 0px 1px rgb(0 0 0 / 0.06), 0px 1px 1px -0.5px rgb(0 0 0 / 0.06), 0px 3px 3px -1.5px rgb(0 0 0 / 0.06), 0px 6px 6px -3px rgb(0 0 0 / 0.06), 0px 12px 12px -6px rgb(0 0 0 / 0.06), 0px 24px 24px -12px rgb(0 0 0 / 0.06), 0px 48px 48px -24px rgb(0 0 0 / 0.06), inset 0px 1px 0px 0px rgb(255 255 255 / 0), inset 0px 0px 0px 1px rgb(255 255 255 / 0);
1352
1388
  --shadow-accordion-item: none;
1353
1389
  --shadow-avatar-badge: none;
1354
1390
  --shadow-badge: none;
@@ -1370,25 +1406,25 @@
1370
1406
  --shadow-checkbox-card-focus: var(--shadow-checkbox-card), var(--shadow-button-focus);
1371
1407
  --shadow-checkbox-control: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-checkbox-control-border, var(--bh-border-input)), var(--shadow-component-default);
1372
1408
  --shadow-checkbox-focus: var(--shadow-checkbox), var(--shadow-button-focus);
1373
- --shadow-component-danger-focus-ring: 0px 0px 0px var(--bh-focus-ring-width) color-mix(in srgb, var(--bh-border-focus-danger) 30%, transparent);
1374
- --shadow-component-danger-focus-stroke: 0px 0px 0px var(--bh-border-width-default) var(--bh-border-focus-danger), 0px 0px 0px calc(var(--bh-border-width-default) + var(--bh-focus-ring-width)) color-mix(in srgb, var(--bh-border-focus-danger) 30%, transparent);
1409
+ --shadow-component-danger-focus-ring: 0px 0px 0px var(--bh-focus-ring-width) var(--bh-border-focus-danger);
1410
+ --shadow-component-danger-focus-stroke: 0px 0px 0px var(--bh-border-width-default) var(--bh-bg-default), 0px 0px 0px calc(var(--bh-border-width-default) + var(--bh-focus-ring-width)) var(--bh-border-focus-danger);
1375
1411
  --shadow-component-default: 0px 1px 2px 0px rgb(15 17 20 / 0.05), inset 0px -1px 0px 0px rgb(0 0 0 / 0.08);
1376
- --shadow-component-focus-ring: 0px 0px 0px var(--bh-focus-ring-width) color-mix(in srgb, var(--bh-border-focus) 30%, transparent);
1377
- --shadow-component-focus-stroke: 0px 0px 0px var(--bh-border-width-default) var(--bh-border-focus), 0px 0px 0px calc(var(--bh-border-width-default) + var(--bh-focus-ring-width)) color-mix(in srgb, var(--bh-border-focus) 30%, transparent);
1412
+ --shadow-component-focus-ring: 0px 0px 0px var(--bh-focus-ring-width) var(--bh-border-focus);
1413
+ --shadow-component-focus-stroke: 0px 0px 0px var(--bh-border-width-default) var(--bh-bg-default), 0px 0px 0px calc(var(--bh-border-width-default) + var(--bh-focus-ring-width)) var(--bh-border-focus);
1378
1414
  --shadow-component-raised: inset 0px 1px 0px 0px rgb(255 255 255 / 0), inset 0px -1px 0px 0px rgb(0 0 0 / 0.08), 0px 1px 2px 0px rgb(15 17 20 / 0.05);
1379
1415
  --shadow-component-surface: inset 0px -1px 0px 0px rgb(0 0 0 / 0.08), 0px 1px 2px 0px rgb(15 17 20 / 0.05);
1380
1416
  --shadow-date-month-year-list: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-border-subtle);
1381
- --shadow-date-surface: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-date-surface-border, var(--bh-border-subtle)), var(--shadow-md);
1417
+ --shadow-date-surface: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-date-surface-border, var(--bh-border-subtle)), var(--shadow-lg);
1382
1418
  --shadow-date-time-input: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-border-input);
1383
1419
  --shadow-input: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-input-border, var(--bh-border-input)), var(--shadow-component-default);
1384
1420
  --shadow-input-focus-ring: var(--shadow-component-focus-stroke);
1385
- --shadow-lg: 0px 10px 15px -3px rgb(15 17 20 / 0.08), 0px 4px 6px -4px rgb(15 17 20 / 0.08);
1386
- --shadow-md: 0px 4px 6px -2px rgb(15 17 20 / 0.04), 0px 10px 16px -3px rgb(15 17 20 / 0.06);
1387
- --shadow-menu: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-menu-border), var(--shadow-component-default);
1421
+ --shadow-lg: 0px 0px 0px 1px rgb(0 0 0 / 0.06), 0px 1px 1px -0.5px rgb(0 0 0 / 0.06), 0px 3px 3px -1.5px rgb(0 0 0 / 0.06), 0px 6px 6px -3px rgb(0 0 0 / 0.06), inset 0px 1px 0px 0px rgb(255 255 255 / 0), inset 0px 0px 0px 1px rgb(255 255 255 / 0);
1422
+ --shadow-md: 0px 0px 0px 1px rgb(0 0 0 / 0.06), 0px 1px 1px -0.5px rgb(0 0 0 / 0.06), 0px 3px 3px -1.5px rgb(0 0 0 / 0.06), inset 0px 1px 0px 0px rgb(255 255 255 / 0), inset 0px 0px 0px 1px rgb(255 255 255 / 0);
1423
+ --shadow-menu: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-menu-border), var(--shadow-lg);
1388
1424
  --shadow-pagination-active: var(--shadow-button-raised);
1389
1425
  --shadow-pagination-control: var(--shadow-button-soft);
1390
1426
  --shadow-pagination-focus: var(--shadow-button-focus);
1391
- --shadow-popover: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-popover-border), var(--shadow-component-default);
1427
+ --shadow-popover: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-popover-border), var(--shadow-lg);
1392
1428
  --shadow-progress-slider-thumb-focus: var(--shadow-component-focus-ring);
1393
1429
  --shadow-radio-card: inset 0px 0px 0px var(--bh-radio-card-border-width, var(--bh-border-width-default)) var(--bh-radio-card-border, var(--bh-border-default)), var(--shadow-radio-card-surface);
1394
1430
  --shadow-radio-card-disabled: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-border-disabled);
@@ -1397,19 +1433,19 @@
1397
1433
  --shadow-select-checkbox: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-select-checkbox-border, var(--bh-border-input)), var(--shadow-component-default);
1398
1434
  --shadow-select-danger-focus-ring: var(--shadow-component-danger-focus-stroke);
1399
1435
  --shadow-select-focus-ring: var(--shadow-component-focus-stroke);
1400
- --shadow-select-menu: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-select-menu-border), var(--shadow-component-default);
1436
+ --shadow-select-menu: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-select-menu-border), var(--shadow-lg);
1401
1437
  --shadow-select-trigger: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-select-trigger-border-current, var(--bh-select-trigger-border)), var(--shadow-component-default);
1402
1438
  --shadow-sidebar: inset calc(var(--bh-border-width-default) * -1) 0px 0px 0px var(--bh-sidebar-border), var(--shadow-component-surface);
1403
- --shadow-slider-thumb: 0px 1.75px 4px -1px rgb(15 17 20 / 0.1);
1439
+ --shadow-slider-thumb: var(--shadow-md);
1404
1440
  --shadow-slider-thumb-focus: var(--shadow-slider-thumb), var(--shadow-component-focus-ring);
1405
- --shadow-slider-tooltip: var(--shadow-md);
1406
- --shadow-sm: 0px 1px 3px 0px rgb(15 17 20 / 0.08), 0px 1px 2px -1px rgb(15 17 20 / 0.08);
1441
+ --shadow-slider-tooltip: var(--shadow-lg);
1442
+ --shadow-sm: 0px 0px 0px 1px rgb(0 0 0 / 0.06), 0px 1px 1px -0.5px rgb(0 0 0 / 0.06), inset 0px 1px 0px 0px rgb(255 255 255 / 0), inset 0px 0px 0px 1px rgb(255 255 255 / 0);
1407
1443
  --shadow-social-button: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-social-button-border, transparent), var(--shadow-component-default);
1408
1444
  --shadow-social-button-focus: var(--shadow-social-button), var(--shadow-component-focus-ring);
1409
1445
  --shadow-social-button-focus-ring: var(--shadow-component-focus-ring);
1410
1446
  --shadow-textarea: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-textarea-border, var(--bh-border-input)), var(--shadow-component-default);
1411
- --shadow-xl: 0px 20px 25px -5px rgb(15 17 20 / 0.08), 0px 8px 10px -6px rgb(15 17 20 / 0.08);
1412
- --shadow-xs: 0px 1px 2px 0px rgb(15 17 20 / 0.06);
1447
+ --shadow-xl: 0px 0px 0px 1px rgb(0 0 0 / 0.06), 0px 1px 1px -0.5px rgb(0 0 0 / 0.06), 0px 3px 3px -1.5px rgb(0 0 0 / 0.06), 0px 6px 6px -3px rgb(0 0 0 / 0.06), 0px 12px 12px -6px rgb(0 0 0 / 0.06), inset 0px 1px 0px 0px rgb(255 255 255 / 0), inset 0px 0px 0px 1px rgb(255 255 255 / 0);
1448
+ --shadow-xs: 0px 0px 0px 1px rgb(0 0 0 / 0.06), inset 0px 0px 0px 1px rgb(255 255 255 / 0);
1413
1449
  --soft: var(--bh-interactive-soft-default);
1414
1450
  --soft-hover: var(--bh-interactive-soft-hover);
1415
1451
  --soft-pressed: var(--bh-interactive-soft-pressed);
@@ -1428,48 +1464,53 @@
1428
1464
 
1429
1465
  /* Banhaten brand theme light token modes: generated from tokens/banhaten.tokens.json. */
1430
1466
 
1431
- [data-theme="gray"] {
1432
- --bh-colors-brand-border-border-strong: var(--bh-gray-950);
1433
- --bh-colors-brand-border-border-strong-dark: var(--bh-gray-dark-950);
1434
- --bh-colors-brand-border-border-subtle: var(--bh-gray-500);
1435
- --bh-colors-brand-border-border-subtle-dark: var(--bh-gray-dark-500);
1436
- --bh-colors-brand-checkbox-bg-default: var(--bh-gray-950);
1437
- --bh-colors-brand-checkbox-bg-default-dark: var(--bh-gray-50);
1438
- --bh-colors-brand-checkbox-bg-hover: var(--bh-gray-950);
1439
- --bh-colors-brand-checkbox-bg-hover-dark: var(--bh-gray-100);
1440
- --bh-colors-brand-color-on-brand-dark: var(--bh-gray-dark-50);
1441
- --bh-colors-brand-content-dark: var(--bh-base-white);
1442
- --bh-colors-brand-content-light: var(--bh-gray-950);
1443
- --bh-colors-brand-content-strong-dark: var(--bh-base-white);
1444
- --bh-colors-brand-content-strong-light: var(--bh-gray-950);
1445
- --bh-colors-brand-focused-dark: var(--bh-base-white);
1446
- --bh-colors-brand-focused-light: var(--bh-gray-950);
1447
- --bh-colors-brand-indicator: var(--bh-gray-950);
1448
- --bh-colors-brand-indicator-dark: var(--bh-gray-dark-950);
1449
- --bh-colors-brand-interactive-default: var(--bh-gray-950);
1450
- --bh-colors-brand-interactive-default-dark: var(--bh-gray-dark-950);
1451
- --bh-colors-brand-interactive-hover: var(--bh-gray-900);
1452
- --bh-colors-brand-interactive-hover-dark: var(--bh-gray-dark-900);
1453
- --bh-colors-brand-interactive-pressed: var(--bh-gray-950);
1454
- --bh-colors-brand-interactive-pressed-dark: var(--bh-gray-dark-950);
1455
- --bh-colors-brand-link-dark: var(--bh-base-white);
1456
- --bh-colors-brand-link-hover-dark: var(--bh-gray-200);
1457
- --bh-colors-brand-link-hover-light: var(--bh-gray-900);
1458
- --bh-colors-brand-link-light: var(--bh-gray-950);
1459
- --bh-colors-brand-radiobutton-bg-default: var(--bh-gray-950);
1460
- --bh-colors-brand-radiobutton-bg-default-dark: var(--bh-gray-50);
1461
- --bh-colors-brand-radiobutton-bg-hover: var(--bh-gray-950);
1462
- --bh-colors-brand-radiobutton-bg-hover-dark: var(--bh-gray-500);
1463
- --bh-colors-brand-surface-base: var(--bh-gray-950);
1464
- --bh-colors-brand-surface-base-dark: var(--bh-base-white);
1465
- --bh-colors-brand-surface-bold-dark: var(--bh-gray-dark-900);
1466
- --bh-colors-brand-surface-bold-light: var(--bh-gray-800);
1467
- --bh-colors-brand-surface-soft-dark: var(--bh-gray-dark-alpha-300);
1468
- --bh-colors-brand-surface-soft-light: var(--bh-gray-300);
1469
- --bh-colors-brand-surface-strong-dark: var(--bh-gray-dark-800);
1470
- --bh-colors-brand-surface-strong-light: var(--bh-gray-900);
1471
- --bh-colors-brand-surface-subtle-dark: var(--bh-gray-dark-alpha-200);
1472
- --bh-colors-brand-surface-subtle-light: var(--bh-gray-200);
1467
+ [data-theme="blue"] {
1468
+ --bh-blue-300: #8DBDFF;
1469
+ --bh-blue-400: #5B97FF;
1470
+ --bh-blue-800: #11318F;
1471
+ --bh-blue-alpha10: rgb(50 118 255 / 0.1);
1472
+ --bh-colors-brand-border-border-strong: var(--bh-blue-600);
1473
+ --bh-colors-brand-border-border-strong-dark: var(--bh-blue-500);
1474
+ --bh-colors-brand-border-border-subtle: var(--bh-blue-300);
1475
+ --bh-colors-brand-border-border-subtle-dark: var(--bh-blue-800);
1476
+ --bh-colors-brand-checkbox-bg-default: var(--bh-blue-600);
1477
+ --bh-colors-brand-checkbox-bg-default-dark: var(--bh-blue-500);
1478
+ --bh-colors-brand-checkbox-bg-hover: var(--bh-blue-600);
1479
+ --bh-colors-brand-checkbox-bg-hover-dark: var(--bh-blue-600);
1480
+ --bh-colors-brand-color-on-brand-dark: var(--bh-base-white);
1481
+ --bh-colors-brand-content-dark: var(--bh-blue-500);
1482
+ --bh-colors-brand-content-light: var(--bh-blue-600);
1483
+ --bh-colors-brand-content-strong-dark: var(--bh-blue-400);
1484
+ --bh-colors-brand-content-strong-light: var(--bh-blue-700);
1485
+ --bh-colors-brand-focused-dark: var(--bh-blue-300);
1486
+ --bh-colors-brand-focused-light: var(--bh-blue-500);
1487
+ --bh-colors-brand-indicator: var(--bh-blue-500);
1488
+ --bh-colors-brand-indicator-dark: var(--bh-blue-600);
1489
+ --bh-colors-brand-interactive-default: var(--bh-derived-blue-550-reviewed);
1490
+ --bh-colors-brand-interactive-default-dark: var(--bh-blue-600);
1491
+ --bh-colors-brand-interactive-hover: var(--bh-blue-600);
1492
+ --bh-colors-brand-interactive-hover-dark: var(--bh-derived-blue-550-reviewed);
1493
+ --bh-colors-brand-interactive-pressed: var(--bh-blue-700);
1494
+ --bh-colors-brand-interactive-pressed-dark: var(--bh-blue-600);
1495
+ --bh-colors-brand-link-dark: var(--bh-blue-500);
1496
+ --bh-colors-brand-link-hover-dark: var(--bh-blue-400);
1497
+ --bh-colors-brand-link-hover-light: var(--bh-blue-700);
1498
+ --bh-colors-brand-link-light: var(--bh-blue-600);
1499
+ --bh-colors-brand-radiobutton-bg-default: var(--bh-blue-600);
1500
+ --bh-colors-brand-radiobutton-bg-default-dark: var(--bh-blue-500);
1501
+ --bh-colors-brand-radiobutton-bg-hover: var(--bh-blue-600);
1502
+ --bh-colors-brand-radiobutton-bg-hover-dark: var(--bh-blue-600);
1503
+ --bh-colors-brand-surface-base: var(--bh-blue-500);
1504
+ --bh-colors-brand-surface-base-dark: var(--bh-blue-600);
1505
+ --bh-colors-brand-surface-bold-dark: var(--bh-blue-700);
1506
+ --bh-colors-brand-surface-bold-light: var(--bh-blue-600);
1507
+ --bh-colors-brand-surface-soft-dark: var(--bh-blue-800);
1508
+ --bh-colors-brand-surface-soft-light: var(--bh-blue-100);
1509
+ --bh-colors-brand-surface-strong-dark: var(--bh-blue-800);
1510
+ --bh-colors-brand-surface-strong-light: var(--bh-blue-700);
1511
+ --bh-colors-brand-surface-subtle-dark: var(--bh-blue-alpha10);
1512
+ --bh-colors-brand-surface-subtle-light: var(--bh-blue-50);
1513
+ --bh-derived-blue-550-reviewed: #2B6BED;
1473
1514
  }
1474
1515
 
1475
1516
  [data-theme="brown"] {
@@ -1499,24 +1540,25 @@
1499
1540
  --bh-colors-brand-checkbox-bg-default-dark: var(--bh-amber-600);
1500
1541
  --bh-colors-brand-checkbox-bg-hover: var(--bh-amber-700);
1501
1542
  --bh-colors-brand-checkbox-bg-hover-dark: var(--bh-amber-700);
1543
+ --bh-colors-brand-color-on-brand-dark: var(--bh-base-white);
1502
1544
  --bh-colors-brand-content-dark: var(--bh-amber-500);
1503
- --bh-colors-brand-content-light: var(--bh-amber-600);
1545
+ --bh-colors-brand-content-light: var(--bh-amber-700);
1504
1546
  --bh-colors-brand-content-strong-dark: var(--bh-amber-400);
1505
- --bh-colors-brand-content-strong-light: var(--bh-amber-700);
1547
+ --bh-colors-brand-content-strong-light: var(--bh-amber-800);
1506
1548
  --bh-colors-brand-focused-dark: var(--bh-amber-300);
1507
- --bh-colors-brand-focused-light: var(--bh-amber-500);
1549
+ --bh-colors-brand-focused-light: var(--bh-amber-700);
1508
1550
  --bh-colors-brand-indicator: var(--bh-amber-600);
1509
1551
  --bh-colors-brand-indicator-dark: var(--bh-amber-600);
1510
- --bh-colors-brand-interactive-default: var(--bh-amber-600);
1511
- --bh-colors-brand-interactive-default-dark: var(--bh-amber-600);
1512
- --bh-colors-brand-interactive-hover: var(--bh-amber-700);
1513
- --bh-colors-brand-interactive-hover-dark: var(--bh-amber-700);
1514
- --bh-colors-brand-interactive-pressed: var(--bh-amber-600);
1515
- --bh-colors-brand-interactive-pressed-dark: var(--bh-amber-600);
1552
+ --bh-colors-brand-interactive-default: var(--bh-amber-700);
1553
+ --bh-colors-brand-interactive-default-dark: var(--bh-amber-700);
1554
+ --bh-colors-brand-interactive-hover: var(--bh-amber-800);
1555
+ --bh-colors-brand-interactive-hover-dark: var(--bh-amber-800);
1556
+ --bh-colors-brand-interactive-pressed: var(--bh-amber-800);
1557
+ --bh-colors-brand-interactive-pressed-dark: var(--bh-amber-800);
1516
1558
  --bh-colors-brand-link-dark: var(--bh-amber-500);
1517
1559
  --bh-colors-brand-link-hover-dark: var(--bh-amber-400);
1518
1560
  --bh-colors-brand-link-hover-light: var(--bh-amber-700);
1519
- --bh-colors-brand-link-light: var(--bh-amber-600);
1561
+ --bh-colors-brand-link-light: var(--bh-amber-700);
1520
1562
  --bh-colors-brand-radiobutton-bg-default: var(--bh-amber-600);
1521
1563
  --bh-colors-brand-radiobutton-bg-default-dark: var(--bh-amber-600);
1522
1564
  --bh-colors-brand-radiobutton-bg-hover: var(--bh-amber-700);
@@ -1682,6 +1724,7 @@
1682
1724
  --bh-colors-brand-checkbox-bg-default-dark: var(--bh-derived-green-600-dark-reviewed);
1683
1725
  --bh-colors-brand-checkbox-bg-hover: var(--bh-emerald-800);
1684
1726
  --bh-colors-brand-checkbox-bg-hover-dark: var(--bh-emerald-800);
1727
+ --bh-colors-brand-color-on-brand-dark: var(--bh-base-white);
1685
1728
  --bh-colors-brand-content-dark: var(--bh-emerald-500);
1686
1729
  --bh-colors-brand-content-light: var(--bh-emerald-700);
1687
1730
  --bh-colors-brand-content-strong-dark: var(--bh-emerald-400);
@@ -1804,6 +1847,7 @@
1804
1847
  --bh-colors-brand-checkbox-bg-default-dark: var(--bh-violet-600);
1805
1848
  --bh-colors-brand-checkbox-bg-hover: var(--bh-violet-800);
1806
1849
  --bh-colors-brand-checkbox-bg-hover-dark: var(--bh-violet-700);
1850
+ --bh-colors-brand-color-on-brand-dark: var(--bh-base-white);
1807
1851
  --bh-colors-brand-content-dark: var(--bh-violet-500);
1808
1852
  --bh-colors-brand-content-light: var(--bh-violet-700);
1809
1853
  --bh-colors-brand-content-strong-dark: var(--bh-violet-400);
@@ -1925,6 +1969,7 @@
1925
1969
  --bh-colors-brand-checkbox-bg-default-dark: var(--bh-derived-teal-600-dark-reviewed);
1926
1970
  --bh-colors-brand-checkbox-bg-hover: var(--bh-teal-800);
1927
1971
  --bh-colors-brand-checkbox-bg-hover-dark: var(--bh-teal-800);
1972
+ --bh-colors-brand-color-on-brand-dark: var(--bh-base-white);
1928
1973
  --bh-colors-brand-content-dark: var(--bh-teal-500);
1929
1974
  --bh-colors-brand-content-light: var(--bh-teal-700);
1930
1975
  --bh-colors-brand-content-strong-dark: var(--bh-teal-300);
@@ -2040,8 +2085,8 @@
2040
2085
  /* End Banhaten brand theme light token modes. */
2041
2086
 
2042
2087
  .dark,
2043
- .dark[data-theme="blue"],
2044
- .dark [data-theme="blue"] {
2088
+ .dark[data-theme="gray"],
2089
+ .dark [data-theme="gray"] {
2045
2090
  --accent: var(--bh-interactive-ghost-hover);
2046
2091
  --accent-foreground: var(--bh-content-default);
2047
2092
  --accent-hover: var(--bh-interactive-ghost-pressed);
@@ -2068,6 +2113,7 @@
2068
2113
  --bh-bg-accent-aqua-default: var(--bh-aqua-500);
2069
2114
  --bh-bg-accent-aqua-soft: var(--bh-aqua-900);
2070
2115
  --bh-bg-accent-aqua-subtle: var(--bh-aqua-alpha10);
2116
+ --bh-bg-accent-blue-bold: var(--bh-blue-600);
2071
2117
  --bh-bg-accent-blue-default: var(--bh-blue-500);
2072
2118
  --bh-bg-accent-blue-soft: var(--bh-blue-900);
2073
2119
  --bh-bg-accent-blue-subtle: var(--bh-blue-alpha10);
@@ -2090,6 +2136,7 @@
2090
2136
  --bh-bg-accent-red-default: var(--bh-red-600);
2091
2137
  --bh-bg-accent-red-soft: var(--bh-red-900);
2092
2138
  --bh-bg-accent-red-subtle: var(--bh-red-alpha10);
2139
+ --bh-bg-accent-rose-bold: var(--bh-rose-600);
2093
2140
  --bh-bg-accent-rose-default: var(--bh-rose-500);
2094
2141
  --bh-bg-accent-rose-soft: var(--bh-rose-900);
2095
2142
  --bh-bg-accent-rose-subtle: var(--bh-rose-alpha10);
@@ -2236,10 +2283,13 @@
2236
2283
  --bh-content-inverse: var(--bh-colors-neutral-dark-50);
2237
2284
  --bh-content-link: var(--bh-colors-brand-link-dark);
2238
2285
  --bh-content-link-hover: var(--bh-colors-brand-link-hover-dark);
2239
- --bh-content-muted: var(--bh-colors-neutral-dark-700);
2286
+ --bh-content-muted: #808080;
2240
2287
  --bh-content-on-brand: var(--bh-colors-brand-color-on-brand-dark);
2241
2288
  --bh-content-on-color: var(--bh-base-white);
2242
2289
  --bh-content-on-light: var(--bh-colors-neutral-dark-50);
2290
+ --bh-content-on-neutral: var(--bh-colors-neutral-dark-50);
2291
+ --bh-content-on-success: var(--bh-colors-neutral-dark-50);
2292
+ --bh-content-on-warning: var(--bh-colors-neutral-dark-50);
2243
2293
  --bh-content-subtle: var(--bh-colors-neutral-dark-800);
2244
2294
  --bh-content-success-default: var(--bh-green-500);
2245
2295
  --bh-content-success-strong: var(--bh-green-300);
@@ -2302,6 +2352,9 @@
2302
2352
  --bh-interactive-soft-disabled: var(--bh-colors-neutral-alpha-dark-100);
2303
2353
  --bh-interactive-soft-hover: var(--bh-colors-neutral-alpha-dark-200);
2304
2354
  --bh-interactive-soft-pressed: var(--bh-colors-neutral-alpha-dark-300);
2355
+ --bh-interactive-success-default: var(--bh-green-400);
2356
+ --bh-interactive-success-hover: var(--bh-green-300);
2357
+ --bh-interactive-success-pressed: var(--bh-green-500);
2305
2358
  --bh-interactive-switch-active: var(--bh-green-500);
2306
2359
  --bh-interactive-switch-active-disabled: var(--bh-green-alpha25);
2307
2360
  --bh-interactive-switch-active-hover: var(--bh-green-600);
@@ -2311,6 +2364,9 @@
2311
2364
  --bh-interactive-switch-handle-disabled: var(--bh-colors-neutral-alpha-dark-300);
2312
2365
  --bh-interactive-switch-hover: var(--bh-colors-neutral-alpha-dark-500);
2313
2366
  --bh-interactive-table-header: var(--bh-colors-neutral-alpha-dark-50);
2367
+ --bh-interactive-warning-default: var(--bh-amber-400);
2368
+ --bh-interactive-warning-hover: var(--bh-amber-300);
2369
+ --bh-interactive-warning-pressed: var(--bh-amber-500);
2314
2370
  --bh-lime-400: #A4D10E;
2315
2371
  --bh-lime-500: #8EB903;
2316
2372
  --bh-lime-800: #4E6503;
@@ -2338,7 +2394,8 @@
2338
2394
  --bh-pagination-control-text-rtl-gap: var(--bh-space-xxs-2);
2339
2395
  --bh-pagination-control-text-rtl-padding-x: var(--bh-space-sm-6);
2340
2396
  --bh-pagination-font-size: var(--bh-text-body-md-medium-font-size);
2341
- --bh-pagination-icon-size: var(--bh-space-4xl-20);
2397
+ --bh-pagination-icon-size: var(--bh-icon-size-default);
2398
+ --bh-pagination-icon-slot-size: var(--bh-icon-slot-size-default);
2342
2399
  --bh-pagination-item-size: var(--bh-space-6xl-32);
2343
2400
  --bh-pagination-label-font-weight: var(--bh-text-body-md-medium-font-weight);
2344
2401
  --bh-pagination-letter-spacing: var(--bh-text-body-md-medium-letter-spacing);
@@ -2371,6 +2428,7 @@
2371
2428
  --bh-rose-200: #FFB9D7;
2372
2429
  --bh-rose-400: #FF4F9B;
2373
2430
  --bh-rose-500: #F01071;
2431
+ --bh-rose-600: #D10A60;
2374
2432
  --bh-rose-800: #810838;
2375
2433
  --bh-rose-900: #60082B;
2376
2434
  --bh-rose-alpha10: rgb(240 16 113 / 0.1);
@@ -2463,6 +2521,8 @@
2463
2521
  --secondary-foreground: var(--bh-content-default);
2464
2522
  --secondary-hover: var(--bh-interactive-secondary-hover);
2465
2523
  --secondary-pressed: var(--bh-interactive-secondary-pressed);
2524
+ --shadow-2xl: 0px 0px 0px 1px rgb(0 0 0 / 0.16), 0px 1px 1px -0.5px rgb(0 0 0 / 0.18), 0px 3px 3px -1.5px rgb(0 0 0 / 0.18), 0px 6px 6px -3px rgb(0 0 0 / 0.18), 0px 12px 12px -6px rgb(0 0 0 / 0.18), 0px 24px 24px -12px rgb(0 0 0 / 0.18), inset 0px 1px 0px 0px rgb(255 255 255 / 0.08), inset 0px 0px 0px 1px rgb(255 255 255 / 0.06);
2525
+ --shadow-3xl: 0px 0px 0px 1px rgb(0 0 0 / 0.2), 0px 1px 1px -0.5px rgb(0 0 0 / 0.18), 0px 3px 3px -1.5px rgb(0 0 0 / 0.18), 0px 6px 6px -3px rgb(0 0 0 / 0.18), 0px 12px 12px -6px rgb(0 0 0 / 0.18), 0px 24px 24px -12px rgb(0 0 0 / 0.18), 0px 48px 48px -24px rgb(0 0 0 / 0.18), inset 0px 1px 0px 0px rgb(255 255 255 / 0.11), inset 0px 0px 0px 1px rgb(255 255 255 / 0.06);
2466
2526
  --shadow-button-danger-focus: var(--shadow-component-danger-focus-ring);
2467
2527
  --shadow-button-focus: var(--shadow-component-focus-ring);
2468
2528
  --shadow-button-group: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-button-group-border), var(--shadow-component-default);
@@ -2474,19 +2534,19 @@
2474
2534
  --shadow-button-surface: var(--shadow-component-surface);
2475
2535
  --shadow-checkbox-card: inset 0px 0px 0px var(--bh-checkbox-card-border-width, var(--bh-border-width-default)) var(--bh-checkbox-card-border, var(--bh-border-subtle)), var(--shadow-component-default);
2476
2536
  --shadow-checkbox-control: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-checkbox-control-border, var(--bh-border-input)), var(--shadow-component-default);
2477
- --shadow-component-danger-focus-ring: 0px 0px 0px var(--bh-focus-ring-width) color-mix(in srgb, var(--bh-border-focus-danger) 30%, transparent);
2478
- --shadow-component-danger-focus-stroke: 0px 0px 0px var(--bh-border-width-default) var(--bh-border-focus-danger), 0px 0px 0px calc(var(--bh-border-width-default) + var(--bh-focus-ring-width)) color-mix(in srgb, var(--bh-border-focus-danger) 30%, transparent);
2537
+ --shadow-component-danger-focus-ring: 0px 0px 0px var(--bh-focus-ring-width) var(--bh-border-focus-danger);
2538
+ --shadow-component-danger-focus-stroke: 0px 0px 0px var(--bh-border-width-default) var(--bh-bg-default), 0px 0px 0px calc(var(--bh-border-width-default) + var(--bh-focus-ring-width)) var(--bh-border-focus-danger);
2479
2539
  --shadow-component-default: 0px 1px 2px 0px rgb(0 0 0 / 0.36), inset 0px 1px 0px 0px rgb(255 255 255 / 0.05), inset 0px -1px 0px 0px rgb(0 0 0 / 0.28);
2480
- --shadow-component-focus-ring: 0px 0px 0px var(--bh-focus-ring-width) color-mix(in srgb, var(--bh-border-focus) 30%, transparent);
2481
- --shadow-component-focus-stroke: 0px 0px 0px var(--bh-border-width-default) var(--bh-border-focus), 0px 0px 0px calc(var(--bh-border-width-default) + var(--bh-focus-ring-width)) color-mix(in srgb, var(--bh-border-focus) 30%, transparent);
2540
+ --shadow-component-focus-ring: 0px 0px 0px var(--bh-focus-ring-width) var(--bh-border-focus);
2541
+ --shadow-component-focus-stroke: 0px 0px 0px var(--bh-border-width-default) var(--bh-bg-default), 0px 0px 0px calc(var(--bh-border-width-default) + var(--bh-focus-ring-width)) var(--bh-border-focus);
2482
2542
  --shadow-component-raised: inset 0px 1px 0px 0px rgb(255 255 255 / 0.05), inset 0px -1px 0px 0px rgb(0 0 0 / 0.32), 0px 1px 2px 0px rgb(0 0 0 / 0.32);
2483
2543
  --shadow-component-surface: inset 0px -1px 0px 0px rgb(0 0 0 / 0.32), 0px 1px 2px 0px rgb(0 0 0 / 0.32);
2484
- --shadow-date-surface: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-date-surface-border, var(--bh-border-subtle)), var(--shadow-md);
2544
+ --shadow-date-surface: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-date-surface-border, var(--bh-border-subtle)), var(--shadow-lg);
2485
2545
  --shadow-input: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-input-border, var(--bh-border-input)), var(--shadow-component-default);
2486
2546
  --shadow-input-focus-ring: var(--shadow-component-focus-stroke);
2487
- --shadow-lg: 0px 10px 15px -3px rgb(0 0 0 / 0.32), 0px 4px 6px -4px rgb(0 0 0 / 0.28);
2488
- --shadow-md: 0px 4px 6px -2px rgb(0 0 0 / 0.24), 0px 10px 16px -3px rgb(0 0 0 / 0.28);
2489
- --shadow-menu: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-menu-border), var(--shadow-component-default);
2547
+ --shadow-lg: 0px 0px 0px 1px rgb(0 0 0 / 0.16), 0px 1px 1px -0.5px rgb(0 0 0 / 0.18), 0px 3px 3px -1.5px rgb(0 0 0 / 0.18), 0px 6px 6px -3px rgb(0 0 0 / 0.18), inset 0px 1px 0px 0px rgb(255 255 255 / 0.06), inset 0px 0px 0px 1px rgb(255 255 255 / 0.04);
2548
+ --shadow-md: 0px 0px 0px 1px rgb(0 0 0 / 0.16), 0px 1px 1px -0.5px rgb(0 0 0 / 0.18), 0px 3px 3px -1.5px rgb(0 0 0 / 0.18), inset 0px 1px 0px 0px rgb(255 255 255 / 0.06), inset 0px 0px 0px 1px rgb(255 255 255 / 0.04);
2549
+ --shadow-menu: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-menu-border), var(--shadow-lg);
2490
2550
  --shadow-progress-slider-thumb-focus: var(--shadow-component-focus-ring);
2491
2551
  --shadow-radio-card: inset 0px 0px 0px var(--bh-radio-card-border-width, var(--bh-border-width-default)) var(--bh-radio-card-border, var(--bh-border-default)), var(--shadow-radio-card-surface);
2492
2552
  --shadow-radio-card-disabled: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-border-disabled);
@@ -2494,17 +2554,17 @@
2494
2554
  --shadow-select-checkbox: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-select-checkbox-border, var(--bh-border-input)), var(--shadow-component-default);
2495
2555
  --shadow-select-danger-focus-ring: var(--shadow-component-danger-focus-stroke);
2496
2556
  --shadow-select-focus-ring: var(--shadow-component-focus-stroke);
2497
- --shadow-select-menu: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-select-menu-border), var(--shadow-component-default);
2557
+ --shadow-select-menu: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-select-menu-border), var(--shadow-lg);
2498
2558
  --shadow-select-trigger: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-select-trigger-border-current, var(--bh-select-trigger-border)), var(--shadow-component-default);
2499
2559
  --shadow-slider-thumb-focus: var(--shadow-slider-thumb), var(--shadow-component-focus-ring);
2500
- --shadow-slider-tooltip: var(--shadow-md);
2501
- --shadow-sm: 0px 1px 3px 0px rgb(0 0 0 / 0.32), 0px 1px 2px -1px rgb(0 0 0 / 0.32);
2560
+ --shadow-slider-tooltip: var(--shadow-lg);
2561
+ --shadow-sm: 0px 0px 0px 1px rgb(0 0 0 / 0), 0px 1px 1px -0.5px rgb(0 0 0 / 0.18), inset 0px 1px 0px 0px rgb(255 255 255 / 0.04), inset 0px 0px 0px 1px rgb(255 255 255 / 0.04);
2502
2562
  --shadow-social-button: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-social-button-border, transparent), var(--shadow-component-default);
2503
2563
  --shadow-social-button-focus: var(--shadow-social-button), var(--shadow-component-focus-ring);
2504
2564
  --shadow-social-button-focus-ring: var(--shadow-component-focus-ring);
2505
2565
  --shadow-textarea: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-textarea-border, var(--bh-border-input)), var(--shadow-component-default);
2506
- --shadow-xl: 0px 20px 25px -5px rgb(0 0 0 / 0.36), 0px 8px 10px -6px rgb(0 0 0 / 0.32);
2507
- --shadow-xs: 0px 1px 2px 0px rgb(0 0 0 / 0.36);
2566
+ --shadow-xl: 0px 0px 0px 1px rgb(0 0 0 / 0.16), 0px 1px 1px -0.5px rgb(0 0 0 / 0.18), 0px 3px 3px -1.5px rgb(0 0 0 / 0.18), 0px 6px 6px -3px rgb(0 0 0 / 0.18), 0px 12px 12px -6px rgb(0 0 0 / 0.18), inset 0px 1px 0px 0px rgb(255 255 255 / 0.08), inset 0px 0px 0px 1px rgb(255 255 255 / 0.04);
2567
+ --shadow-xs: 0px 0px 0px 1px rgb(0 0 0 / 0), inset 0px 0px 0px 1px rgb(255 255 255 / 0.04);
2508
2568
  --soft: var(--bh-interactive-soft-default);
2509
2569
  --soft-hover: var(--bh-interactive-soft-hover);
2510
2570
  --soft-pressed: var(--bh-interactive-soft-pressed);