banhaten 0.4.0 → 0.6.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 (214) hide show
  1. package/CHANGELOG.md +78 -1
  2. package/CONTRIBUTING.md +6 -4
  3. package/README.md +4 -2
  4. package/docs/design-spacing.md +13 -0
  5. package/docs/design-system/README.md +2 -0
  6. package/docs/design-system/appearances/default.md +1 -1
  7. package/docs/design-system/appearances/rounded.md +1 -1
  8. package/docs/design-system/appearances/sharp.md +1 -1
  9. package/docs/design-system/component-showcase-consistency-report.md +5 -5
  10. package/docs/design-system/components/README.md +15 -0
  11. package/docs/design-system/components/accordion.md +1 -1
  12. package/docs/design-system/components/activity-feed.md +1 -1
  13. package/docs/design-system/components/activity-heatmap.md +1 -1
  14. package/docs/design-system/components/agent-input.md +85 -0
  15. package/docs/design-system/components/alert-dialog.md +1 -1
  16. package/docs/design-system/components/alert.md +10 -4
  17. package/docs/design-system/components/app-header.md +97 -0
  18. package/docs/design-system/components/approval-card.md +134 -0
  19. package/docs/design-system/components/attribute.md +14 -2
  20. package/docs/design-system/components/avatar.md +1 -1
  21. package/docs/design-system/components/badge.md +1 -1
  22. package/docs/design-system/components/banner.md +1 -1
  23. package/docs/design-system/components/breadcrumbs.md +8 -3
  24. package/docs/design-system/components/button-group.md +1 -1
  25. package/docs/design-system/components/button.md +8 -5
  26. package/docs/design-system/components/card.md +15 -1
  27. package/docs/design-system/components/catalog-components.md +1 -1
  28. package/docs/design-system/components/chart.md +95 -24
  29. package/docs/design-system/components/checkbox.md +1 -1
  30. package/docs/design-system/components/collapsible.md +20 -6
  31. package/docs/design-system/components/command.md +1 -1
  32. package/docs/design-system/components/context-menu.md +1 -1
  33. package/docs/design-system/components/date-picker.md +1 -1
  34. package/docs/design-system/components/file-upload.md +1 -1
  35. package/docs/design-system/components/hover-card.md +1 -1
  36. package/docs/design-system/components/inline-citations.md +93 -0
  37. package/docs/design-system/components/input-group.md +1 -1
  38. package/docs/design-system/components/input.md +59 -3
  39. package/docs/design-system/components/item.md +1 -1
  40. package/docs/design-system/components/kbd.md +6 -4
  41. package/docs/design-system/components/menu.md +35 -4
  42. package/docs/design-system/components/menubar.md +1 -1
  43. package/docs/design-system/components/modal.md +2 -2
  44. package/docs/design-system/components/native-select.md +1 -1
  45. package/docs/design-system/components/navigation-menu.md +1 -1
  46. package/docs/design-system/components/onboarding-step-list-item.md +1 -1
  47. package/docs/design-system/components/page-header.md +58 -17
  48. package/docs/design-system/components/pagination.md +2 -2
  49. package/docs/design-system/components/popover.md +1 -1
  50. package/docs/design-system/components/progress-slider.md +1 -1
  51. package/docs/design-system/components/radio-card.md +1 -1
  52. package/docs/design-system/components/radio-group.md +1 -1
  53. package/docs/design-system/components/resizable.md +1 -1
  54. package/docs/design-system/components/rolling-count.md +61 -0
  55. package/docs/design-system/components/scroll-area.md +1 -1
  56. package/docs/design-system/components/select.md +12 -2
  57. package/docs/design-system/components/sheet.md +1 -1
  58. package/docs/design-system/components/shimmer-text.md +67 -0
  59. package/docs/design-system/components/sidebar.md +75 -8
  60. package/docs/design-system/components/skeleton.md +2 -2
  61. package/docs/design-system/components/slideout.md +1 -1
  62. package/docs/design-system/components/slider.md +2 -2
  63. package/docs/design-system/components/social-button.md +2 -2
  64. package/docs/design-system/components/streaming-text.md +82 -0
  65. package/docs/design-system/components/table.md +103 -21
  66. package/docs/design-system/components/tabs.md +25 -6
  67. package/docs/design-system/components/tag.md +1 -1
  68. package/docs/design-system/components/task-list.md +95 -0
  69. package/docs/design-system/components/textarea.md +1 -1
  70. package/docs/design-system/components/thinking-reasoning.md +72 -0
  71. package/docs/design-system/components/thinking-state.md +67 -0
  72. package/docs/design-system/components/timeline.md +1 -1
  73. package/docs/design-system/components/toast.md +1 -1
  74. package/docs/design-system/components/toggle.md +2 -2
  75. package/docs/design-system/components/toolbar.md +11 -6
  76. package/docs/design-system/components/tooltip.md +6 -4
  77. package/docs/design-system/density-and-elevation.md +16 -16
  78. package/docs/design-system/design-system-test-missing-items.md +8 -8
  79. package/docs/design-system/installation.md +2 -0
  80. package/docs/design-system/tabs.md +2 -1
  81. package/docs/design-system/template-gap-audit.md +32 -0
  82. package/docs/design-system/templates.md +59 -0
  83. package/docs/design-system/token-governance.md +15 -2
  84. package/package.json +2 -2
  85. package/registry/components/accordion.tsx +2 -2
  86. package/registry/components/agent-input-parts.tsx +552 -0
  87. package/registry/components/agent-input-state.ts +156 -0
  88. package/registry/components/agent-input.css +307 -0
  89. package/registry/components/agent-input.tsx +382 -0
  90. package/registry/components/alert-dialog.tsx +2 -2
  91. package/registry/components/alert.tsx +23 -7
  92. package/registry/components/app-header.tsx +151 -0
  93. package/registry/components/approval-card.css +409 -0
  94. package/registry/components/approval-card.tsx +401 -0
  95. package/registry/components/approval-frame.tsx +108 -0
  96. package/registry/components/approval-questions.tsx +559 -0
  97. package/registry/components/attribute.tsx +48 -13
  98. package/registry/components/autocomplete.tsx +15 -68
  99. package/registry/components/avatar.tsx +2 -2
  100. package/registry/components/badge.tsx +8 -7
  101. package/registry/components/button-group.tsx +2 -2
  102. package/registry/components/button.tsx +19 -14
  103. package/registry/components/card.tsx +18 -5
  104. package/registry/components/chart-block-data.ts +177 -0
  105. package/registry/components/chart-block.css +171 -0
  106. package/registry/components/chart-block.tsx +260 -0
  107. package/registry/components/chart-interactions.ts +123 -0
  108. package/registry/components/chart-options.cartesian.ts +162 -0
  109. package/registry/components/chart-options.paint.ts +99 -0
  110. package/registry/components/chart-options.parts.ts +72 -0
  111. package/registry/components/chart-options.radial.ts +109 -0
  112. package/registry/components/chart-options.ts +44 -0
  113. package/registry/components/chart-options.types.ts +67 -0
  114. package/registry/components/chart.tsx +1 -1
  115. package/registry/components/checkbox.tsx +6 -6
  116. package/registry/components/collapsible.tsx +43 -3
  117. package/registry/components/command.tsx +1 -1
  118. package/registry/components/context-menu.tsx +1 -1
  119. package/registry/components/data-chart.tsx +40 -0
  120. package/registry/components/date-picker.tsx +9 -9
  121. package/registry/components/echart-theme.ts +246 -0
  122. package/registry/components/echart.css +49 -0
  123. package/registry/components/echart.tsx +178 -0
  124. package/registry/components/expanded/Breadcrumbs.tsx +5 -1
  125. package/registry/components/expanded/PageHeader.tsx +67 -24
  126. package/registry/components/expanded/Table.tsx +60 -22
  127. package/registry/components/expanded/activityFeed.css +2 -2
  128. package/registry/components/expanded/activityHeatmap.css +1 -1
  129. package/registry/components/expanded/banner.css +2 -2
  130. package/registry/components/expanded/breadcrumbs.css +19 -2
  131. package/registry/components/expanded/catalogComponentsShowcase.css +1 -1
  132. package/registry/components/expanded/fileUpload.css +7 -7
  133. package/registry/components/expanded/onboardingStepListItem.css +2 -2
  134. package/registry/components/expanded/pageHeader.css +38 -44
  135. package/registry/components/expanded/slideout.css +4 -4
  136. package/registry/components/expanded/table.css +58 -9
  137. package/registry/components/expanded/timeline.css +1 -1
  138. package/registry/components/hover-card.tsx +1 -1
  139. package/registry/components/inline-citations.css +126 -0
  140. package/registry/components/inline-citations.tsx +292 -0
  141. package/registry/components/input-group.tsx +4 -4
  142. package/registry/components/input.tsx +150 -137
  143. package/registry/components/item.tsx +1 -1
  144. package/registry/components/kbd.tsx +3 -2
  145. package/registry/components/menu.tsx +117 -12
  146. package/registry/components/menubar.tsx +2 -2
  147. package/registry/components/modal.tsx +3 -3
  148. package/registry/components/native-select.tsx +4 -4
  149. package/registry/components/navigation-menu.tsx +2 -2
  150. package/registry/components/pagination.tsx +4 -4
  151. package/registry/components/popover.tsx +3 -3
  152. package/registry/components/progress-slider.tsx +1 -1
  153. package/registry/components/radio-card.tsx +7 -7
  154. package/registry/components/radio-group.tsx +2 -2
  155. package/registry/components/resizable.tsx +2 -2
  156. package/registry/components/rolling-count.css +37 -0
  157. package/registry/components/rolling-count.tsx +110 -0
  158. package/registry/components/scroll-area.tsx +1 -1
  159. package/registry/components/select.tsx +15 -10
  160. package/registry/components/sheet.tsx +2 -2
  161. package/registry/components/shimmer-text.css +69 -0
  162. package/registry/components/shimmer-text.tsx +43 -0
  163. package/registry/components/sidebar.tsx +528 -223
  164. package/registry/components/skeleton.tsx +1 -1
  165. package/registry/components/slider.tsx +2 -2
  166. package/registry/components/social-button.tsx +1 -1
  167. package/registry/components/streaming-text.css +45 -0
  168. package/registry/components/streaming-text.tsx +165 -0
  169. package/registry/components/table-elements.tsx +164 -5
  170. package/registry/components/tabs.css +32 -4
  171. package/registry/components/tabs.tsx +5 -1
  172. package/registry/components/tag.tsx +1 -1
  173. package/registry/components/task-list.css +328 -0
  174. package/registry/components/task-list.tsx +429 -0
  175. package/registry/components/textarea.tsx +4 -4
  176. package/registry/components/thinking-reasoning.css +178 -0
  177. package/registry/components/thinking-reasoning.tsx +253 -0
  178. package/registry/components/thinking-state.css +8 -0
  179. package/registry/components/thinking-state.tsx +46 -0
  180. package/registry/components/toast.tsx +1 -1
  181. package/registry/components/toggle.tsx +2 -2
  182. package/registry/components/toolbar.tsx +6 -6
  183. package/registry/components/tooltip.tsx +6 -4
  184. package/registry/examples/agent-input-demo.tsx +90 -0
  185. package/registry/examples/app-header-demo.tsx +40 -0
  186. package/registry/examples/approval-card-demo.tsx +83 -0
  187. package/registry/examples/button-demo.tsx +3 -0
  188. package/registry/examples/chart-block-demo.tsx +5 -0
  189. package/registry/examples/chart-demo.tsx +6 -21
  190. package/registry/examples/collection-filter-bar-demo.tsx +1 -1
  191. package/registry/examples/control-density-contract-demo.tsx +5 -1
  192. package/registry/examples/inline-citations-demo.tsx +31 -0
  193. package/registry/examples/input-actions-demo.tsx +36 -0
  194. package/registry/examples/menu-demo.tsx +1 -1
  195. package/registry/examples/popover-demo.tsx +1 -0
  196. package/registry/examples/rolling-count-demo.tsx +39 -0
  197. package/registry/examples/shimmer-text-demo.tsx +20 -0
  198. package/registry/examples/streaming-text-demo.tsx +28 -0
  199. package/registry/examples/task-list-demo.tsx +74 -0
  200. package/registry/examples/thinking-reasoning-demo.tsx +74 -0
  201. package/registry/examples/thinking-state-demo.tsx +13 -0
  202. package/registry/guidance/charts.LICENSE.txt +24 -0
  203. package/registry/hooks/use-controllable-state.ts +33 -0
  204. package/registry/hooks/use-listbox-navigation.ts +73 -0
  205. package/registry/hooks/use-motion-end.ts +55 -0
  206. package/registry/hooks/use-reduced-motion.ts +28 -0
  207. package/registry/index.json +1808 -190
  208. package/registry/styles/globals.css +992 -1088
  209. package/registry.json +385 -10
  210. package/schema/registry.schema.json +5 -1
  211. package/schema/tokens.schema.json +8 -4
  212. package/src/cli/file-transaction.js +15 -8
  213. package/src/cli/index.js +22 -29
  214. package/tokens/banhaten.tokens.json +490 -192
@@ -1,252 +1,464 @@
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="gray"] {
4
+ [data-theme="gray"],
5
+ [data-theme="blue"],
6
+ [data-theme="brown"],
7
+ [data-theme="orange"],
8
+ [data-theme="green"],
9
+ [data-theme="purple"],
10
+ [data-theme="teal"],
11
+ .dark,
12
+ .dark[data-theme="blue"],
13
+ .dark [data-theme="blue"],
14
+ .dark[data-theme="gray"],
15
+ .dark [data-theme="gray"],
16
+ .dark[data-theme="brown"],
17
+ .dark [data-theme="brown"],
18
+ .dark[data-theme="orange"],
19
+ .dark [data-theme="orange"],
20
+ .dark[data-theme="green"],
21
+ .dark [data-theme="green"],
22
+ .dark[data-theme="purple"],
23
+ .dark [data-theme="purple"],
24
+ .dark[data-theme="teal"],
25
+ .dark [data-theme="teal"] {
5
26
  --accent: var(--bh-interactive-ghost-hover);
6
27
  --accent-foreground: var(--bh-content-default);
7
28
  --accent-hover: var(--bh-interactive-ghost-pressed);
8
29
  --background: var(--bh-bg-default);
9
- --bh-activity-feed-compact-width: 600px;
10
- --bh-activity-feed-completed-brightness: 0.99;
11
- --bh-alert-compact-height: calc(var(--bh-space-8xl-48) + var(--bh-space-md-8));
12
- --bh-alert-compact-padding: var(--bh-space-3xl-16);
13
- --bh-alert-compact-radius: var(--bh-radius-lg-8);
14
- --bh-alert-compact-width: 470px;
15
- --bh-alert-expanded-height: calc(var(--bh-space-12xl-128) + var(--bh-space-3xl-16));
16
- --bh-alert-expanded-padding-x: var(--bh-space-3xl-16);
17
- --bh-alert-expanded-padding-y: var(--bh-space-4xl-20);
18
- --bh-alert-expanded-radius: var(--bh-radius-xl-10);
19
- --bh-alert-expanded-rtl-height: calc(var(--bh-space-11xl-96) + var(--bh-space-5xl-24));
20
- --bh-alert-expanded-width: 500px;
21
- --bh-alert-icon-size: var(--bh-icon-size-default);
22
- --bh-alert-icon-slot-size: var(--bh-icon-slot-size-default);
23
- --bh-alpha-alpha-transparent: rgb(255 255 255 / 0);
24
- --bh-alpha-alpha-transparent-to-100: rgb(255 255 255 / 0);
25
- --bh-alpha-alpha-transparent-to-500: rgb(255 255 255 / 0);
26
- --bh-amber-100: #FFE7BE;
27
30
  --bh-amber-300: #FFC369;
28
- --bh-amber-50: #FFF2DB;
29
31
  --bh-amber-500: #EE7300;
30
32
  --bh-amber-600: #CD6103;
31
- --bh-amber-700: #AC4C03;
32
33
  --bh-amber-800: #863E07;
33
34
  --bh-amber-900: #652C07;
34
- --bh-aqua-100: #BBFAEA;
35
- --bh-aqua-200: #87F0D5;
36
- --bh-aqua-50: #DBFFF6;
35
+ --bh-app-header-action-bg-hover: var(--bh-interactive-ghost-hover);
36
+ --bh-app-header-action-content: var(--bh-content-default);
37
+ --bh-app-header-action-sm-content: var(--bh-content-subtle);
38
+ --bh-app-header-bg: var(--bh-bg-default);
39
+ --bh-app-header-border: var(--bh-border-subtle);
40
+ --bh-app-header-location-content: var(--bh-content-subtle);
37
41
  --bh-aqua-500: #03A980;
38
- --bh-aqua-600: #03906E;
39
- --bh-aqua-700: #076F57;
40
- --bh-attribute-header-icon-size: var(--bh-space-6xl-32);
41
- --bh-attribute-header-icon-size-lg: var(--bh-space-8xl-48);
42
- --bh-attribute-label-width: 220px;
43
- --bh-avatar-action-icon-size-2xl: var(--bh-space-2xl-14);
44
- --bh-avatar-action-icon-size-3xl: 18px;
45
- --bh-avatar-action-icon-size-4xl: 22px;
46
- --bh-avatar-action-icon-size-large: var(--bh-space-lg-10);
47
- --bh-avatar-action-icon-size-medium: 9px;
48
- --bh-avatar-action-icon-size-small: var(--bh-space-md-8);
49
- --bh-avatar-action-icon-size-tiny: var(--bh-space-sm-6);
50
- --bh-avatar-action-icon-size-xlarge: var(--bh-space-xl-12);
51
- --bh-avatar-action-icon-size-xsmall: 7px;
52
- --bh-avatar-action-size-2xl: var(--bh-space-5xl-24);
53
- --bh-avatar-action-size-3xl: var(--bh-space-6xl-32);
54
- --bh-avatar-action-size-4xl: var(--bh-space-7xl-40);
55
- --bh-avatar-action-size-large: 18px;
56
- --bh-avatar-action-size-medium: var(--bh-space-3xl-16);
57
- --bh-avatar-action-size-small: var(--bh-space-2xl-14);
58
- --bh-avatar-action-size-tiny: var(--bh-space-lg-10);
59
- --bh-avatar-action-size-xlarge: var(--bh-space-4xl-20);
60
- --bh-avatar-action-size-xsmall: var(--bh-space-xl-12);
61
- --bh-avatar-fallback-font-size-2xl: var(--bh-text-body-sm-semibold-font-size);
62
- --bh-avatar-fallback-font-size-2xs: 9px;
63
- --bh-avatar-fallback-font-size-3xl: var(--bh-text-body-md-semibold-font-size);
64
- --bh-avatar-fallback-font-size-4xl: var(--bh-text-body-md-semibold-font-size);
65
- --bh-avatar-fallback-font-size-lg: var(--bh-text-body-sm-semibold-font-size);
66
- --bh-avatar-fallback-font-size-md: var(--bh-text-body-2xs-semibold-font-size);
67
- --bh-avatar-fallback-font-size-sm: var(--bh-text-body-2xs-semibold-font-size);
68
- --bh-avatar-fallback-font-size-xl: var(--bh-text-body-sm-semibold-font-size);
69
- --bh-avatar-fallback-font-size-xs: var(--bh-space-lg-10);
70
- --bh-avatar-icon-size-2xl: var(--bh-radius-6xl-28);
71
- --bh-avatar-icon-size-2xs: var(--bh-space-lg-10);
72
- --bh-avatar-icon-size-3xl: var(--bh-space-6xl-32);
73
- --bh-avatar-icon-size-4xl: 36px;
74
- --bh-avatar-icon-size-lg: var(--bh-icon-size-default);
75
- --bh-avatar-icon-size-md: var(--bh-icon-size-default);
76
- --bh-avatar-icon-size-sm: var(--bh-space-3xl-16);
77
- --bh-avatar-icon-size-xl: var(--bh-space-5xl-24);
78
- --bh-avatar-icon-size-xs: var(--bh-space-xl-12);
79
- --bh-avatar-size-2xl: var(--bh-space-8xl-48);
80
- --bh-avatar-size-2xs: var(--bh-space-3xl-16);
81
- --bh-avatar-size-3xl: 56px;
82
- --bh-avatar-size-4xl: var(--bh-space-9xl-64);
83
- --bh-avatar-size-lg: 36px;
84
- --bh-avatar-size-md: var(--bh-space-6xl-32);
85
- --bh-avatar-size-sm: var(--bh-space-5xl-24);
86
- --bh-avatar-size-xl: var(--bh-space-7xl-40);
87
- --bh-avatar-size-xs: var(--bh-space-4xl-20);
88
- --bh-avatar-status-ring-default: var(--bh-space-xxs-2);
89
- --bh-avatar-status-ring-thin: var(--bh-space-xxxs-1);
90
- --bh-avatar-status-size-large: var(--bh-space-3xl-16);
91
- --bh-avatar-status-size-medium: var(--bh-space-2xl-14);
92
- --bh-avatar-status-size-small: var(--bh-space-lg-10);
93
- --bh-avatar-status-size-tiny: var(--bh-space-sm-6);
94
- --bh-avatar-status-size-xlarge: var(--bh-space-4xl-20);
95
- --bh-avatar-status-size-xsmall: var(--bh-space-md-8);
96
- --bh-badge-focus-ring-width: var(--bh-space-xs-4);
97
- --bh-badge-outline-border-width: calc(var(--bh-border-width-default) + (var(--bh-border-width-default) / 2));
98
42
  --bh-base-white: #FFFFFF;
99
- --bh-bg-accent-amber-default: var(--bh-amber-500);
100
- --bh-bg-accent-amber-soft: var(--bh-amber-100);
101
- --bh-bg-accent-amber-subtle: var(--bh-amber-50);
102
43
  --bh-bg-accent-aqua-default: var(--bh-aqua-500);
103
- --bh-bg-accent-aqua-soft: var(--bh-aqua-100);
104
- --bh-bg-accent-aqua-subtle: var(--bh-aqua-50);
105
44
  --bh-bg-accent-blue-bold: var(--bh-blue-600);
106
45
  --bh-bg-accent-blue-default: var(--bh-blue-500);
107
- --bh-bg-accent-blue-soft: var(--bh-blue-100);
108
- --bh-bg-accent-blue-subtle: var(--bh-blue-50);
109
46
  --bh-bg-accent-fuchsia-default: var(--bh-fuchsia-500);
110
- --bh-bg-accent-fuchsia-soft: var(--bh-fuchsia-100);
111
- --bh-bg-accent-fuchsia-subtle: var(--bh-fuchsia-50);
112
- --bh-bg-accent-golden-bold: var(--bh-golden-600);
113
- --bh-bg-accent-golden-default: var(--bh-golden-400);
114
- --bh-bg-accent-golden-soft: var(--bh-golden-100);
115
- --bh-bg-accent-golden-subtle: var(--bh-golden-50);
116
47
  --bh-bg-accent-green-default: var(--bh-green-500);
117
- --bh-bg-accent-green-soft: var(--bh-green-100);
118
- --bh-bg-accent-green-subtle: var(--bh-green-50);
119
48
  --bh-bg-accent-lime-default: var(--bh-lime-500);
120
- --bh-bg-accent-lime-soft: var(--bh-lime-100);
121
- --bh-bg-accent-lime-subtle: var(--bh-lime-50);
122
49
  --bh-bg-accent-purple-default: var(--bh-purple-500);
123
- --bh-bg-accent-purple-soft: var(--bh-purple-100);
124
- --bh-bg-accent-purple-subtle: var(--bh-purple-50);
125
- --bh-bg-accent-red-default: var(--bh-red-500);
126
- --bh-bg-accent-red-soft: var(--bh-red-100);
127
- --bh-bg-accent-red-subtle: var(--bh-red-50);
128
50
  --bh-bg-accent-rose-bold: var(--bh-rose-600);
129
51
  --bh-bg-accent-rose-default: var(--bh-rose-500);
130
- --bh-bg-accent-rose-soft: var(--bh-rose-100);
131
- --bh-bg-accent-rose-subtle: var(--bh-rose-50);
132
52
  --bh-bg-accent-sky-base: var(--bh-sky-500);
133
- --bh-bg-accent-sky-soft: var(--bh-sky-100);
134
- --bh-bg-accent-sky-subtle: var(--bh-sky-50);
135
- --bh-bg-always-dark: var(--bh-colors-neutral-900);
136
53
  --bh-bg-always-white: var(--bh-base-white);
137
54
  --bh-bg-backdrop: rgb(0 0 0 / 0.5);
138
- --bh-bg-brand-bold: var(--bh-colors-brand-surface-bold-light);
139
- --bh-bg-brand-default: var(--bh-colors-brand-surface-base);
140
- --bh-bg-brand-soft: var(--bh-colors-brand-surface-soft-light);
141
- --bh-bg-brand-strong: var(--bh-colors-brand-surface-strong-light);
142
- --bh-bg-brand-subtle: var(--bh-colors-brand-surface-subtle-light);
143
- --bh-bg-danger-default: var(--bh-red-500);
144
- --bh-bg-danger-soft: var(--bh-red-100);
145
- --bh-bg-danger-subtle: var(--bh-red-50);
146
- --bh-bg-default: var(--bh-base-white);
147
- --bh-bg-default-hover: var(--bh-colors-neutral-50);
148
- --bh-bg-dim: var(--bh-colors-neutral-200);
149
- --bh-bg-dim-hover: var(--bh-colors-neutral-300);
150
- --bh-bg-disabled: var(--bh-colors-neutral-50);
151
- --bh-bg-divider: var(--bh-colors-neutral-alpha-300);
152
- --bh-bg-grouped: var(--bh-colors-neutral-100);
153
- --bh-bg-grouped-surface: var(--bh-base-white);
154
- --bh-bg-info-bold: var(--bh-blue-600);
155
- --bh-bg-info-default: var(--bh-blue-500);
156
- --bh-bg-info-soft: var(--bh-blue-100);
157
- --bh-bg-info-strong: var(--bh-blue-700);
158
- --bh-bg-info-subtle: var(--bh-blue-50);
159
- --bh-bg-inverse: var(--bh-colors-neutral-950);
160
- --bh-bg-muted: var(--bh-colors-neutral-100);
161
- --bh-bg-muted-hover: var(--bh-colors-neutral-200);
162
- --bh-bg-neutral-bold: var(--bh-colors-neutral-800);
163
- --bh-bg-neutral-default: var(--bh-colors-neutral-700);
164
- --bh-bg-neutral-medium: var(--bh-colors-neutral-500);
165
- --bh-bg-neutral-soft: var(--bh-colors-neutral-alpha-200);
166
- --bh-bg-neutral-subtle: var(--bh-colors-neutral-alpha-100);
167
- --bh-bg-raised: var(--bh-base-white);
168
- --bh-bg-raised-hover: var(--bh-colors-neutral-50);
169
- --bh-bg-raised-subtle: var(--bh-colors-neutral-50);
170
- --bh-bg-subtle: var(--bh-colors-neutral-50);
171
- --bh-bg-subtle-alpha: var(--bh-colors-neutral-50);
172
- --bh-bg-subtle-hover: var(--bh-colors-neutral-100);
173
- --bh-bg-success-bold: var(--bh-green-600);
174
- --bh-bg-success-default: var(--bh-green-500);
175
- --bh-bg-success-soft: var(--bh-green-100);
176
- --bh-bg-success-strong: var(--bh-green-700);
177
- --bh-bg-success-subtle: var(--bh-green-50);
178
- --bh-bg-warning-bold: var(--bh-amber-600);
179
- --bh-bg-warning-default: var(--bh-amber-500);
180
- --bh-bg-warning-soft: var(--bh-amber-100);
181
- --bh-bg-warning-strong: var(--bh-amber-700);
182
- --bh-bg-warning-subtle: var(--bh-amber-50);
183
- --bh-blue-100: #D6EAFF;
184
55
  --bh-blue-200: #BBDAFF;
185
- --bh-blue-50: #EBF5FF;
186
56
  --bh-blue-500: #3276FF;
187
57
  --bh-blue-600: #245DED;
188
- --bh-blue-700: #1D49BF;
189
58
  --bh-blue-900: #0A1B63;
190
59
  --bh-border-accent-amber-strong: var(--bh-amber-500);
191
- --bh-border-accent-amber-subtle: var(--bh-amber-300);
192
60
  --bh-border-accent-aqua-strong: var(--bh-aqua-500);
193
- --bh-border-accent-aqua-subtle: var(--bh-aqua-200);
194
61
  --bh-border-accent-blue-strong: var(--bh-blue-500);
195
- --bh-border-accent-blue-subtle: var(--bh-blue-200);
196
62
  --bh-border-accent-fuchsia-strong: var(--bh-fuchsia-500);
197
- --bh-border-accent-fuchsia-subtle: var(--bh-fuchsia-200);
198
- --bh-border-accent-golden-strong: var(--bh-golden-600);
199
- --bh-border-accent-golden-subtle: var(--bh-golden-300);
200
63
  --bh-border-accent-green-strong: var(--bh-green-500);
201
- --bh-border-accent-green-subtle: var(--bh-green-200);
202
- --bh-border-accent-lime-strong: var(--bh-lime-600);
203
- --bh-border-accent-lime-subtle: var(--bh-lime-200);
204
64
  --bh-border-accent-purple-strong: var(--bh-purple-500);
205
- --bh-border-accent-purple-subtle: var(--bh-purple-200);
206
65
  --bh-border-accent-red-strong: var(--bh-red-500);
207
- --bh-border-accent-red-subtle: var(--bh-red-200);
208
66
  --bh-border-accent-rose-strong: var(--bh-rose-500);
209
- --bh-border-accent-rose-subtle: var(--bh-rose-200);
210
67
  --bh-border-accent-sky-strong: var(--bh-sky-500);
211
- --bh-border-accent-sky-subtle: var(--bh-sky-200);
212
- --bh-border-brand-strong: var(--bh-colors-brand-border-border-strong);
213
- --bh-border-brand-subtle: var(--bh-colors-brand-border-border-subtle);
214
68
  --bh-border-danger-strong: var(--bh-red-500);
215
- --bh-border-danger-subtle: var(--bh-red-300);
216
- --bh-border-default: var(--bh-colors-neutral-alpha-400);
217
- --bh-border-disabled: var(--bh-colors-neutral-alpha-200);
218
- --bh-border-focus: var(--bh-colors-brand-focused-light);
219
- --bh-border-focus-danger: var(--bh-red-400);
220
69
  --bh-border-info-strong: var(--bh-blue-500);
221
- --bh-border-info-subtle: var(--bh-blue-200);
222
- --bh-border-input: var(--bh-colors-neutral-alpha-400);
223
- --bh-border-inverse: var(--bh-base-white);
224
- --bh-border-inverse-subtle: rgb(255 255 255 / 0.15);
225
- --bh-border-strong: var(--bh-colors-neutral-800);
226
- --bh-border-subtle: var(--bh-colors-neutral-alpha-300);
227
70
  --bh-border-success-strong: var(--bh-green-500);
228
- --bh-border-success-subtle: var(--bh-green-200);
229
71
  --bh-border-warning-strong: var(--bh-amber-500);
230
- --bh-border-warning-subtle: var(--bh-amber-300);
72
+ --bh-breadcrumbs-current-content: var(--bh-content-default);
73
+ --bh-button-group-bg: var(--bh-bg-subtle);
74
+ --bh-button-group-border: var(--bh-border-default);
75
+ --bh-button-group-content: var(--bh-button-group-content-default);
76
+ --bh-button-group-content-active: var(--bh-content-default);
77
+ --bh-button-group-content-default: var(--bh-content-subtle);
78
+ --bh-button-group-content-disabled: var(--bh-content-disabled);
79
+ --bh-button-group-divider: var(--bh-border-subtle);
80
+ --bh-button-group-item-active-bg: var(--bh-interactive-ghost-active);
81
+ --bh-button-group-item-bg: var(--bh-interactive-ghost-default);
82
+ --bh-button-group-item-disabled-bg: var(--bh-interactive-ghost-disabled);
83
+ --bh-button-group-item-hover: var(--bh-button-group-item-hover-bg);
84
+ --bh-button-group-item-hover-bg: var(--bh-interactive-ghost-hover);
85
+ --bh-button-group-item-pressed-bg: var(--bh-interactive-ghost-pressed);
86
+ --bh-card-media-overlay: color-mix(in srgb, var(--bh-bg-always-dark) 80%, transparent);
87
+ --bh-chart-1: var(--bh-chart-categorical-brand);
88
+ --bh-chart-2: var(--bh-chart-categorical-success);
89
+ --bh-chart-3: var(--bh-chart-categorical-warning);
90
+ --bh-chart-4: var(--bh-chart-categorical-danger);
91
+ --bh-chart-5: var(--bh-chart-categorical-information);
92
+ --bh-chart-brand-default: var(--bh-colors-brand-surface-base);
93
+ --bh-chart-categorical-1: var(--bh-sky-600);
94
+ --bh-chart-categorical-6: var(--bh-purple-500);
95
+ --bh-chart-categorical-aqua: var(--bh-content-accent-aqua-default);
96
+ --bh-chart-categorical-brand: var(--bh-content-brand-default);
97
+ --bh-chart-categorical-danger: var(--bh-content-danger-default);
98
+ --bh-chart-categorical-fuchsia: var(--bh-content-accent-fuchsia-default);
99
+ --bh-chart-categorical-information: var(--bh-content-information-default);
100
+ --bh-chart-categorical-purple: var(--bh-content-accent-purple-default);
101
+ --bh-chart-categorical-success: var(--bh-content-success-default);
102
+ --bh-chart-categorical-warning: var(--bh-content-warning-default);
103
+ --bh-content-on-color: var(--bh-base-white);
104
+ --bh-fuchsia-500: #E703EB;
105
+ --bh-golden-400: #F7C407;
106
+ --bh-golden-800: #7E4F03;
107
+ --bh-green-500: #0BAE45;
108
+ --bh-green-600: #039536;
109
+ --bh-green-800: #075622;
110
+ --bh-green-900: #043F18;
111
+ --bh-icon-explorer-topbar-bg: color-mix(in srgb, var(--bh-bg-grouped) 92%, transparent);
112
+ --bh-interactive-switch-active: var(--bh-green-500);
113
+ --bh-interactive-switch-active-hover: var(--bh-green-600);
114
+ --bh-interactive-switch-handle: var(--bh-base-white);
115
+ --bh-lime-500: #8EB903;
116
+ --bh-menu-bg: var(--bh-bg-raised);
117
+ --bh-menu-border: var(--bh-border-subtle);
118
+ --bh-menu-item-bg: var(--bh-interactive-ghost-default);
119
+ --bh-menu-item-hover-bg: var(--bh-interactive-ghost-hover);
120
+ --bh-pagination-action-gap: var(--bh-space-md-8);
121
+ --bh-pagination-active-bg: var(--bh-interactive-brand-default);
122
+ --bh-pagination-active-border: var(--bh-border-subtle);
123
+ --bh-pagination-active-content: var(--bh-content-on-brand);
124
+ --bh-pagination-caption-content: var(--bh-content-subtle);
125
+ --bh-pagination-caption-font-weight: var(--bh-text-body-md-regular-font-weight);
126
+ --bh-pagination-caption-width: 254px;
127
+ --bh-pagination-control-content: var(--bh-content-default);
128
+ --bh-pagination-control-gap: var(--bh-space-lg-10);
129
+ --bh-pagination-control-ghost-bg: var(--bh-interactive-ghost-default);
130
+ --bh-pagination-control-ghost-hover: var(--bh-interactive-ghost-hover);
131
+ --bh-pagination-control-ghost-pressed: var(--bh-interactive-ghost-pressed);
132
+ --bh-pagination-control-label-padding-x: var(--bh-space-xxs-2);
133
+ --bh-pagination-control-label-rtl-padding-x: var(--bh-space-xs-4);
134
+ --bh-pagination-control-soft-bg: var(--bh-interactive-soft-default);
135
+ --bh-pagination-control-soft-hover: var(--bh-interactive-soft-hover);
136
+ --bh-pagination-control-soft-pressed: var(--bh-interactive-soft-pressed);
137
+ --bh-pagination-control-text-gap: var(--bh-space-xs-4);
138
+ --bh-pagination-control-text-padding-x: var(--bh-space-md-8);
139
+ --bh-pagination-control-text-rtl-gap: var(--bh-space-xxs-2);
140
+ --bh-pagination-control-text-rtl-padding-x: var(--bh-space-sm-6);
141
+ --bh-pagination-font-size: var(--bh-text-body-md-medium-font-size);
142
+ --bh-pagination-icon-size: var(--bh-icon-size-default);
143
+ --bh-pagination-icon-slot-size: var(--bh-icon-slot-size-default);
144
+ --bh-pagination-item-size: var(--bh-space-6xl-32);
145
+ --bh-pagination-label-font-weight: var(--bh-text-body-md-medium-font-weight);
146
+ --bh-pagination-letter-spacing: var(--bh-text-body-md-medium-letter-spacing);
147
+ --bh-pagination-line-height: var(--bh-text-body-md-medium-line-height);
148
+ --bh-pagination-numeric-width: 560px;
149
+ --bh-pagination-page-bg: var(--bh-interactive-ghost-default);
150
+ --bh-pagination-page-content: var(--bh-content-subtle);
151
+ --bh-pagination-page-gap: var(--bh-space-xs-4);
152
+ --bh-pagination-page-hover: var(--bh-interactive-ghost-hover);
153
+ --bh-pagination-page-pressed: var(--bh-interactive-ghost-pressed);
154
+ --bh-pagination-radius: var(--bh-control-default);
155
+ --bh-pagination-root-gap: var(--bh-space-3xl-16);
156
+ --bh-pagination-simple-width: 458px;
157
+ --bh-popover-bg: var(--bh-bg-raised);
158
+ --bh-popover-border: var(--bh-border-subtle);
159
+ --bh-progress-slider-tick-bg: color-mix(in srgb, var(--bh-progress-slider-grip-bg, var(--bh-border-brand-strong)) 34%, transparent);
160
+ --bh-purple-500: #A135FA;
161
+ --bh-red-300: #FF96A1;
162
+ --bh-red-400: #FC5666;
163
+ --bh-red-500: #E8172C;
164
+ --bh-red-600: #CA1224;
165
+ --bh-red-700: #A60C1B;
166
+ --bh-rose-200: #FFB9D7;
167
+ --bh-rose-500: #F01071;
168
+ --bh-rose-600: #D10A60;
169
+ --bh-select-avatar-font-size: var(--bh-space-lg-10);
170
+ --bh-select-check-color: var(--bh-interactive-indicator-default);
171
+ --bh-select-checkbox-icon-size: var(--bh-space-xl-12);
172
+ --bh-select-checkbox-radius: var(--bh-radius-sm-4);
173
+ --bh-select-checkbox-size: var(--bh-space-3xl-16);
174
+ --bh-select-company-icon-size: 18px;
175
+ --bh-select-content-gap: var(--bh-space-xxs-2);
176
+ --bh-select-field-gap: var(--bh-space-sm-6);
177
+ --bh-select-icon-size: var(--bh-space-3xl-16);
178
+ --bh-select-icon-slot-size: var(--bh-space-4xl-20);
179
+ --bh-select-item-check-offset: var(--bh-space-3xl-16);
180
+ --bh-select-item-content-padding: var(--bh-space-sm-6);
181
+ --bh-select-item-gap: var(--bh-space-xs-4);
182
+ --bh-select-item-hover-bg: var(--bh-interactive-ghost-hover);
183
+ --bh-select-item-min-height: var(--bh-space-6xl-32);
184
+ --bh-select-item-padding-x: var(--bh-space-sm-6);
185
+ --bh-select-item-radius: var(--bh-radius-md-6);
186
+ --bh-select-item-selected-padding-end: var(--bh-space-6xl-32);
187
+ --bh-select-item-value-padding-x: var(--bh-space-xs-4);
188
+ --bh-select-label-gap: var(--bh-space-xs-4);
189
+ --bh-select-media-inset: var(--bh-space-xxs-2);
190
+ --bh-select-menu-bg: var(--bh-bg-raised);
191
+ --bh-select-menu-border: var(--bh-border-subtle);
192
+ --bh-select-menu-list-gap: var(--bh-space-xxs-2);
193
+ --bh-select-menu-offset: var(--bh-space-xs-4);
194
+ --bh-select-menu-padding-y: var(--bh-space-sm-6);
195
+ --bh-select-menu-radius: var(--bh-radius-xl-10);
196
+ --bh-select-menu-width: var(--bh-select-width);
197
+ --bh-select-payment-height: var(--bh-space-4xl-20);
198
+ --bh-select-payment-mark-offset: 7px;
199
+ --bh-select-payment-mark-size: 9px;
200
+ --bh-select-payment-radius: var(--bh-radius-sm-4);
201
+ --bh-select-payment-width: 28.333px;
202
+ --bh-select-status-dot-size: var(--bh-space-md-8);
203
+ --bh-select-trigger-bg: var(--bh-interactive-input-default);
204
+ --bh-select-trigger-bg-disabled: var(--bh-interactive-input-disabled);
205
+ --bh-select-trigger-bg-soft: var(--bh-interactive-input-soft);
206
+ --bh-select-trigger-border: var(--bh-border-input);
207
+ --bh-select-trigger-border-disabled: var(--bh-border-disabled);
208
+ --bh-select-trigger-border-error: var(--bh-border-danger-strong);
209
+ --bh-select-trigger-border-focus: var(--bh-border-focus);
210
+ --bh-select-trigger-gap: var(--bh-space-sm-6);
211
+ --bh-select-trigger-icon-color: var(--bh-content-muted);
212
+ --bh-select-trigger-padding-x: var(--bh-space-md-8);
213
+ --bh-select-trigger-padding-y-comfortable: var(--bh-space-md-8);
214
+ --bh-select-trigger-padding-y-lg: var(--bh-space-sm-6);
215
+ --bh-select-trigger-padding-y-md: var(--bh-space-xs-4);
216
+ --bh-select-trigger-radius: var(--bh-radius-lg-8);
217
+ --bh-select-value-padding-inline: var(--bh-space-xs-4);
218
+ --bh-select-width: var(--bh-space-18xl-320);
219
+ --bh-sidebar-bg: var(--bh-bg-default);
220
+ --bh-sidebar-bg-collapsed: var(--bh-bg-default);
221
+ --bh-sidebar-border: var(--bh-border-subtle);
222
+ --bh-sidebar-group-label-content: var(--bh-content-muted);
223
+ --bh-sidebar-item-bg-active: var(--bh-interactive-soft-default);
224
+ --bh-sidebar-item-bg-hover: var(--bh-interactive-ghost-hover);
225
+ --bh-sidebar-item-content: var(--bh-content-subtle);
226
+ --bh-sidebar-item-content-active: var(--bh-content-default);
227
+ --bh-sidebar-user-card-bg: var(--bh-bg-subtle);
228
+ --bh-sidebar-user-card-bg-hover: var(--bh-bg-subtle-hover);
229
+ --bh-sky-500: #059FE5;
230
+ --bh-sky-600: #0C85C3;
231
+ --bh-slider-pill-track-bg: color-mix(in srgb, var(--bh-slider-range-bg, var(--bh-interactive-indicator-default)) 12%, var(--bh-bg-default));
232
+ --bh-slider-tick-bg: color-mix(in srgb, var(--bh-slider-range-bg, var(--bh-interactive-indicator-default)) 45%, transparent);
233
+ --bh-social-apple-bg: var(--bh-bg-always-dark);
234
+ --bh-social-apple-border: var(--bh-border-subtle);
235
+ --bh-social-apple-fg: var(--bh-content-on-color);
236
+ --bh-social-apple-hover: color-mix(in srgb, var(--bh-bg-always-dark) 88%, var(--bh-bg-always-white));
237
+ --bh-social-apple-icon: var(--bh-content-on-color);
238
+ --bh-social-apple-icon-border: var(--bh-border-subtle);
239
+ --bh-social-apple-outline-icon: var(--bh-bg-always-dark);
240
+ --bh-social-facebook-fg: var(--bh-content-on-color);
241
+ --bh-social-facebook-icon: var(--bh-content-on-color);
242
+ --bh-social-google-bg: var(--bh-bg-always-dark);
243
+ --bh-social-google-border: var(--bh-border-subtle);
244
+ --bh-social-google-fg: var(--bh-content-on-color);
245
+ --bh-social-google-hover: color-mix(in srgb, var(--bh-bg-always-dark) 88%, var(--bh-bg-always-white));
246
+ --bh-social-linkedin-fg: var(--bh-content-on-color);
247
+ --bh-social-linkedin-icon: var(--bh-content-on-color);
248
+ --bh-social-twitter-bg: var(--bh-bg-always-dark);
249
+ --bh-social-twitter-border: var(--bh-border-subtle);
250
+ --bh-social-twitter-fg: var(--bh-content-on-color);
251
+ --bh-social-twitter-hover: color-mix(in srgb, var(--bh-bg-always-dark) 88%, var(--bh-bg-always-white));
252
+ --bh-social-twitter-icon: var(--bh-content-on-color);
253
+ --bh-social-twitter-icon-border: var(--bh-border-subtle);
254
+ --bh-social-twitter-outline-icon: var(--bh-bg-always-dark);
255
+ --bh-social-whatsapp-fg: var(--bh-content-on-color);
256
+ --bh-social-whatsapp-icon: var(--bh-content-on-color);
257
+ --bh-table-caption-content: var(--bh-content-subtle);
258
+ --bh-table-comfortable-cell-content: var(--bh-content-default);
259
+ --bh-table-comfortable-header-bg: var(--bh-interactive-table-header);
260
+ --bh-table-comfortable-header-content: var(--bh-content-subtle);
261
+ --bh-table-container-bg: var(--bh-bg-default);
262
+ --bh-table-container-border: var(--bh-border-subtle);
263
+ --border: var(--bh-border-default);
264
+ --card: var(--bh-bg-raised);
265
+ --card-foreground: var(--bh-content-default);
266
+ --danger-ring: var(--bh-border-focus-danger);
267
+ --destructive: var(--bh-interactive-danger-default);
268
+ --destructive-foreground: var(--bh-content-on-color);
269
+ --destructive-hover: var(--bh-interactive-danger-hover);
270
+ --destructive-pressed: var(--bh-interactive-danger-pressed);
271
+ --destructive-soft: var(--bh-interactive-danger-soft-default);
272
+ --destructive-soft-foreground: var(--bh-content-danger-default);
273
+ --destructive-soft-hover: var(--bh-interactive-danger-soft-hover);
274
+ --destructive-soft-pressed: var(--bh-interactive-danger-soft-pressed);
275
+ --elevation-accordion-item: none;
276
+ --elevation-avatar-badge: none;
277
+ --elevation-badge: none;
278
+ --elevation-button: var(--elevation-button-raised);
279
+ --elevation-button-active: var(--elevation-button-raised);
280
+ --elevation-button-danger-focus: var(--elevation-component-danger-focus-ring);
281
+ --elevation-button-focus: var(--elevation-component-focus-ring);
282
+ --elevation-button-group: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-button-group-border), var(--elevation-component-default);
283
+ --elevation-button-group-focus: var(--elevation-button-group), var(--elevation-component-focus-ring);
284
+ --elevation-button-group-focus-ring: var(--elevation-component-focus-ring);
285
+ --elevation-button-hover: var(--elevation-button-raised);
286
+ --elevation-button-raised: var(--elevation-component-raised);
287
+ --elevation-button-secondary: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-button-secondary-border, var(--bh-border-default)), var(--elevation-button-surface);
288
+ --elevation-button-secondary-focus: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-button-secondary-focus-border, var(--bh-border-brand-strong)), var(--elevation-button-surface), var(--elevation-button-focus);
289
+ --elevation-button-soft: inset 0px 1px 0px 0px rgb(255 255 255 / 0);
290
+ --elevation-button-surface: var(--elevation-component-surface);
291
+ --elevation-checkbox: var(--elevation-checkbox-control);
292
+ --elevation-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(--elevation-component-default);
293
+ --elevation-checkbox-card-focus: var(--elevation-checkbox-card), var(--elevation-button-focus);
294
+ --elevation-checkbox-control: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-checkbox-control-border, var(--bh-border-input)), var(--elevation-component-default);
295
+ --elevation-checkbox-focus: var(--elevation-checkbox), var(--elevation-button-focus);
296
+ --elevation-component-danger-focus-ring: 0px 0px 0px var(--bh-focus-ring-width) var(--bh-border-focus-danger);
297
+ --elevation-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);
298
+ --elevation-component-focus-ring: 0px 0px 0px var(--bh-focus-ring-width) var(--bh-border-focus);
299
+ --elevation-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);
300
+ --elevation-date-month-year-list: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-border-subtle);
301
+ --elevation-date-surface: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-date-surface-border, var(--bh-border-subtle)), var(--elevation-04);
302
+ --elevation-date-time-input: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-border-input);
303
+ --elevation-input: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-input-border, var(--bh-border-input)), var(--elevation-component-default);
304
+ --elevation-input-focus-ring: var(--elevation-component-focus-stroke);
305
+ --elevation-menu: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-menu-border), var(--elevation-04);
306
+ --elevation-pagination-active: var(--elevation-button-raised);
307
+ --elevation-pagination-control: var(--elevation-button-soft);
308
+ --elevation-pagination-focus: var(--elevation-button-focus);
309
+ --elevation-popover: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-popover-border), var(--elevation-04);
310
+ --elevation-progress-slider-thumb-focus: var(--elevation-component-focus-ring);
311
+ --elevation-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(--elevation-radio-card-surface);
312
+ --elevation-radio-card-disabled: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-border-disabled);
313
+ --elevation-radio-card-surface: var(--elevation-component-default);
314
+ --elevation-radio-control: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-radio-control-border, var(--bh-border-input)), var(--elevation-component-default);
315
+ --elevation-select-checkbox: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-select-checkbox-border, var(--bh-border-input)), var(--elevation-component-default);
316
+ --elevation-select-danger-focus-ring: var(--elevation-component-danger-focus-stroke);
317
+ --elevation-select-focus-ring: var(--elevation-component-focus-stroke);
318
+ --elevation-select-menu: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-select-menu-border), var(--elevation-04);
319
+ --elevation-select-trigger: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-select-trigger-border-current, var(--bh-select-trigger-border)), var(--elevation-component-default);
320
+ --elevation-sidebar: inset calc(var(--bh-border-width-default) * -1) 0px 0px 0px var(--bh-sidebar-border), var(--elevation-component-surface);
321
+ --elevation-slider-thumb: var(--elevation-03);
322
+ --elevation-slider-thumb-focus: var(--elevation-slider-thumb), var(--elevation-component-focus-ring);
323
+ --elevation-slider-tooltip: var(--elevation-04);
324
+ --elevation-social-button: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-social-button-border, transparent), var(--elevation-component-default);
325
+ --elevation-social-button-focus: var(--elevation-social-button), var(--elevation-component-focus-ring);
326
+ --elevation-social-button-focus-ring: var(--elevation-component-focus-ring);
327
+ --elevation-textarea: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-textarea-border, var(--bh-border-input)), var(--elevation-component-default);
328
+ --foreground: var(--bh-content-default);
329
+ --ghost: var(--bh-interactive-ghost-default);
330
+ --ghost-hover: var(--bh-interactive-ghost-hover);
331
+ --ghost-pressed: var(--bh-interactive-ghost-pressed);
332
+ --input: var(--bh-border-input);
333
+ --muted: var(--bh-bg-muted);
334
+ --muted-foreground: var(--bh-content-muted);
335
+ --outline: var(--bh-interactive-outlined-default);
336
+ --outline-hover: var(--bh-interactive-outlined-hover);
337
+ --outline-pressed: var(--bh-interactive-outlined-pressed);
338
+ --popover: var(--bh-bg-raised);
339
+ --popover-foreground: var(--bh-content-default);
340
+ --primary: var(--bh-interactive-brand-default);
341
+ --primary-foreground: var(--bh-content-on-brand);
342
+ --primary-hover: var(--bh-interactive-brand-hover);
343
+ --primary-pressed: var(--bh-interactive-brand-pressed);
344
+ --ring: var(--bh-border-focus);
345
+ --secondary: var(--bh-interactive-secondary-default);
346
+ --secondary-foreground: var(--bh-content-default);
347
+ --secondary-hover: var(--bh-interactive-secondary-hover);
348
+ --secondary-pressed: var(--bh-interactive-secondary-pressed);
349
+ --soft: var(--bh-interactive-soft-default);
350
+ --soft-hover: var(--bh-interactive-soft-hover);
351
+ --soft-pressed: var(--bh-interactive-soft-pressed);
352
+ --success: var(--bh-bg-success-default);
353
+ --success-foreground: var(--bh-content-on-color);
354
+ --success-hover: var(--bh-bg-success-bold);
355
+ --success-pressed: var(--bh-bg-success-strong);
356
+ --warning: var(--bh-bg-warning-default);
357
+ --warning-foreground: var(--bh-content-on-light);
358
+ --warning-hover: var(--bh-bg-warning-bold);
359
+ --warning-pressed: var(--bh-bg-warning-strong);
360
+ --warning-soft: var(--bh-bg-warning-subtle);
361
+ --warning-soft-foreground: var(--bh-content-warning-default);
362
+ --warning-soft-hover: var(--bh-bg-warning-soft);
363
+ }
364
+
365
+ /* Banhaten brand theme light token modes: generated from tokens/banhaten.tokens.json. */
366
+
367
+ :root,
368
+ [data-theme="gray"] {
369
+ --bh-activity-feed-compact-width: 600px;
370
+ --bh-activity-feed-completed-brightness: 0.99;
371
+ --bh-agent-input-field-max-height: var(--bh-space-13xl-160);
372
+ --bh-agent-input-palette-width: var(--bh-space-15xl-224);
373
+ --bh-agent-input-ring-duration: 1.1s;
374
+ --bh-agent-input-ring-width: var(--bh-space-xxxs-1);
375
+ --bh-alert-compact-height: calc(var(--bh-space-8xl-48) + var(--bh-space-md-8));
376
+ --bh-alert-compact-padding: var(--bh-space-3xl-16);
377
+ --bh-alert-compact-radius: var(--bh-radius-lg-8);
378
+ --bh-alert-compact-width: 470px;
379
+ --bh-alert-expanded-height: calc(var(--bh-space-12xl-128) + var(--bh-space-3xl-16));
380
+ --bh-alert-expanded-padding-x: var(--bh-space-3xl-16);
381
+ --bh-alert-expanded-padding-y: var(--bh-space-4xl-20);
382
+ --bh-alert-expanded-radius: var(--bh-radius-xl-10);
383
+ --bh-alert-expanded-rtl-height: calc(var(--bh-space-11xl-96) + var(--bh-space-5xl-24));
384
+ --bh-alert-expanded-width: 500px;
385
+ --bh-alert-icon-size: var(--bh-icon-size-default);
386
+ --bh-alert-icon-slot-size: var(--bh-icon-slot-size-default);
387
+ --bh-app-header-action-hit-inset: var(--bh-space-md-8);
388
+ --bh-app-header-action-radius: var(--bh-radius-lg-8);
389
+ --bh-app-header-action-sm-min-width: var(--bh-space-6xl-32);
390
+ --bh-app-header-gap: var(--bh-space-5xl-24);
391
+ --bh-app-header-height: calc(var(--bh-space-9xl-64) + var(--bh-space-md-8));
392
+ --bh-app-header-icon-size: var(--bh-space-5xl-24);
393
+ --bh-app-header-padding-x: var(--bh-space-5xl-24);
394
+ --bh-app-header-search-width: var(--bh-space-18xl-320);
395
+ --bh-app-header-start-gap: var(--bh-space-xl-12);
396
+ --bh-app-header-start-min-width: var(--bh-space-13xl-160);
397
+ --bh-attribute-comfortable-label-width: calc(var(--bh-space-12xl-128) + var(--bh-space-8xl-48));
398
+ --bh-attribute-header-icon-size: var(--bh-space-6xl-32);
399
+ --bh-attribute-header-icon-size-lg: var(--bh-space-8xl-48);
400
+ --bh-attribute-label-width: 220px;
401
+ --bh-avatar-action-icon-size-2xl: var(--bh-space-2xl-14);
402
+ --bh-avatar-action-icon-size-3xl: 18px;
403
+ --bh-avatar-action-icon-size-4xl: 22px;
404
+ --bh-avatar-action-icon-size-large: var(--bh-space-lg-10);
405
+ --bh-avatar-action-icon-size-medium: 9px;
406
+ --bh-avatar-action-icon-size-small: var(--bh-space-md-8);
407
+ --bh-avatar-action-icon-size-tiny: var(--bh-space-sm-6);
408
+ --bh-avatar-action-icon-size-xlarge: var(--bh-space-xl-12);
409
+ --bh-avatar-action-icon-size-xsmall: 7px;
410
+ --bh-avatar-action-size-2xl: var(--bh-space-5xl-24);
411
+ --bh-avatar-action-size-3xl: var(--bh-space-6xl-32);
412
+ --bh-avatar-action-size-4xl: var(--bh-space-7xl-40);
413
+ --bh-avatar-action-size-large: 18px;
414
+ --bh-avatar-action-size-medium: var(--bh-space-3xl-16);
415
+ --bh-avatar-action-size-small: var(--bh-space-2xl-14);
416
+ --bh-avatar-action-size-tiny: var(--bh-space-lg-10);
417
+ --bh-avatar-action-size-xlarge: var(--bh-space-4xl-20);
418
+ --bh-avatar-action-size-xsmall: var(--bh-space-xl-12);
419
+ --bh-avatar-fallback-font-size-2xl: var(--bh-text-body-sm-semibold-font-size);
420
+ --bh-avatar-fallback-font-size-2xs: 9px;
421
+ --bh-avatar-fallback-font-size-3xl: var(--bh-text-body-md-semibold-font-size);
422
+ --bh-avatar-fallback-font-size-4xl: var(--bh-text-body-md-semibold-font-size);
423
+ --bh-avatar-fallback-font-size-lg: var(--bh-text-body-sm-semibold-font-size);
424
+ --bh-avatar-fallback-font-size-md: var(--bh-text-body-2xs-semibold-font-size);
425
+ --bh-avatar-fallback-font-size-sm: var(--bh-text-body-2xs-semibold-font-size);
426
+ --bh-avatar-fallback-font-size-xl: var(--bh-text-body-sm-semibold-font-size);
427
+ --bh-avatar-fallback-font-size-xs: var(--bh-space-lg-10);
428
+ --bh-avatar-icon-size-2xl: var(--bh-radius-6xl-28);
429
+ --bh-avatar-icon-size-2xs: var(--bh-space-lg-10);
430
+ --bh-avatar-icon-size-3xl: var(--bh-space-6xl-32);
431
+ --bh-avatar-icon-size-4xl: 36px;
432
+ --bh-avatar-icon-size-lg: var(--bh-icon-size-default);
433
+ --bh-avatar-icon-size-md: var(--bh-icon-size-default);
434
+ --bh-avatar-icon-size-sm: var(--bh-space-3xl-16);
435
+ --bh-avatar-icon-size-xl: var(--bh-space-5xl-24);
436
+ --bh-avatar-icon-size-xs: var(--bh-space-xl-12);
437
+ --bh-avatar-size-2xl: var(--bh-space-8xl-48);
438
+ --bh-avatar-size-2xs: var(--bh-space-3xl-16);
439
+ --bh-avatar-size-3xl: 56px;
440
+ --bh-avatar-size-4xl: var(--bh-space-9xl-64);
441
+ --bh-avatar-size-lg: 36px;
442
+ --bh-avatar-size-md: var(--bh-space-6xl-32);
443
+ --bh-avatar-size-sm: var(--bh-space-5xl-24);
444
+ --bh-avatar-size-xl: var(--bh-space-7xl-40);
445
+ --bh-avatar-size-xs: var(--bh-space-4xl-20);
446
+ --bh-avatar-status-ring-default: var(--bh-space-xxs-2);
447
+ --bh-avatar-status-ring-thin: var(--bh-space-xxxs-1);
448
+ --bh-avatar-status-size-large: var(--bh-space-3xl-16);
449
+ --bh-avatar-status-size-medium: var(--bh-space-2xl-14);
450
+ --bh-avatar-status-size-small: var(--bh-space-lg-10);
451
+ --bh-avatar-status-size-tiny: var(--bh-space-sm-6);
452
+ --bh-avatar-status-size-xlarge: var(--bh-space-4xl-20);
453
+ --bh-avatar-status-size-xsmall: var(--bh-space-md-8);
454
+ --bh-badge-focus-ring-width: var(--bh-space-xs-4);
455
+ --bh-badge-outline-border-width: calc(var(--bh-border-width-default) + (var(--bh-border-width-default) / 2));
231
456
  --bh-border-width-default: var(--bh-space-xxxs-1);
232
457
  --bh-border-width-strong: var(--bh-space-xxs-2);
233
458
  --bh-button-gap: var(--bh-space-xs-4);
234
459
  --bh-button-gap-xs: var(--bh-space-xxs-2);
235
- --bh-button-group-bg: var(--bh-bg-subtle);
236
- --bh-button-group-border: var(--bh-border-default);
237
- --bh-button-group-content: var(--bh-button-group-content-default);
238
- --bh-button-group-content-active: var(--bh-content-default);
239
- --bh-button-group-content-default: var(--bh-content-subtle);
240
- --bh-button-group-content-disabled: var(--bh-content-disabled);
241
- --bh-button-group-divider: var(--bh-border-subtle);
242
460
  --bh-button-group-icon-size: var(--bh-icon-size-default);
243
461
  --bh-button-group-icon-slot-size: var(--bh-icon-slot-size-default);
244
- --bh-button-group-item-active-bg: var(--bh-interactive-ghost-active);
245
- --bh-button-group-item-bg: var(--bh-interactive-ghost-default);
246
- --bh-button-group-item-disabled-bg: var(--bh-interactive-ghost-disabled);
247
- --bh-button-group-item-hover: var(--bh-button-group-item-hover-bg);
248
- --bh-button-group-item-hover-bg: var(--bh-interactive-ghost-hover);
249
- --bh-button-group-item-pressed-bg: var(--bh-interactive-ghost-pressed);
250
462
  --bh-button-group-label-padding-x: var(--bh-space-xxs-2);
251
463
  --bh-button-group-md-gap: var(--bh-space-xs-4);
252
464
  --bh-button-group-md-height: var(--bh-space-7xl-40);
@@ -284,6 +496,7 @@
284
496
  --bh-button-xs-height: var(--bh-space-6xl-32);
285
497
  --bh-button-xs-padding-x: var(--bh-space-sm-6);
286
498
  --bh-card-actions-max-width: calc(var(--bh-space-18xl-320) + var(--bh-space-7xl-40));
499
+ --bh-card-comfortable-radius: var(--bh-radius-2xl-12);
287
500
  --bh-card-desktop-content-padding: var(--bh-space-5xl-24);
288
501
  --bh-card-desktop-full-height: 341px;
289
502
  --bh-card-desktop-horizontal-padding: var(--bh-space-6xl-32);
@@ -291,7 +504,6 @@
291
504
  --bh-card-horizontal-media-width: 480px;
292
505
  --bh-card-horizontal-min-height: var(--bh-space-18xl-320);
293
506
  --bh-card-horizontal-width: 1020px;
294
- --bh-card-media-overlay: color-mix(in srgb, var(--bh-bg-always-dark) 80%, transparent);
295
507
  --bh-card-mobile-content-padding: var(--bh-space-4xl-20);
296
508
  --bh-card-mobile-full-height: 300px;
297
509
  --bh-card-mobile-horizontal-padding: var(--bh-space-4xl-20);
@@ -305,29 +517,6 @@
305
517
  --bh-catalog-file-preview-min: 260px;
306
518
  --bh-catalog-showcase-breakpoint-lg: 1100px;
307
519
  --bh-catalog-showcase-breakpoint-sm: 640px;
308
- --bh-chart-1: var(--bh-chart-categorical-brand);
309
- --bh-chart-2: var(--bh-chart-categorical-success);
310
- --bh-chart-3: var(--bh-chart-categorical-warning);
311
- --bh-chart-4: var(--bh-chart-categorical-danger);
312
- --bh-chart-5: var(--bh-chart-categorical-information);
313
- --bh-chart-brand-default: var(--bh-colors-brand-surface-base);
314
- --bh-chart-categorical-1: var(--bh-sky-600);
315
- --bh-chart-categorical-2: var(--bh-purple-700);
316
- --bh-chart-categorical-3: var(--bh-amber-500);
317
- --bh-chart-categorical-4: var(--bh-rose-700);
318
- --bh-chart-categorical-5: var(--bh-blue-900);
319
- --bh-chart-categorical-6: var(--bh-purple-500);
320
- --bh-chart-categorical-7: var(--bh-rose-950);
321
- --bh-chart-categorical-8: var(--bh-amber-700);
322
- --bh-chart-categorical-aqua: var(--bh-content-accent-aqua-default);
323
- --bh-chart-categorical-brand: var(--bh-content-brand-default);
324
- --bh-chart-categorical-danger: var(--bh-content-danger-default);
325
- --bh-chart-categorical-fuchsia: var(--bh-content-accent-fuchsia-default);
326
- --bh-chart-categorical-information: var(--bh-content-information-default);
327
- --bh-chart-categorical-purple: var(--bh-content-accent-purple-default);
328
- --bh-chart-categorical-success: var(--bh-content-success-default);
329
- --bh-chart-categorical-warning: var(--bh-content-warning-default);
330
- --bh-chart-neutral-default: var(--bh-colors-neutral-400);
331
520
  --bh-checkbox-card-border-width: var(--bh-border-width-default);
332
521
  --bh-checkbox-card-border-width-active: var(--bh-border-width-strong);
333
522
  --bh-checkbox-card-content-gap: var(--bh-space-xl-12);
@@ -344,6 +533,7 @@
344
533
  --bh-checkbox-indeterminate-height: var(--bh-space-xxs-2);
345
534
  --bh-checkbox-indeterminate-width: var(--bh-space-md-8);
346
535
  --bh-checkbox-root-size: var(--bh-space-4xl-20);
536
+ --bh-citation-mark-size: var(--bh-space-2xl-14);
347
537
  --bh-colors-brand-border-border-strong: var(--bh-gray-950);
348
538
  --bh-colors-brand-border-border-strong-dark: var(--bh-gray-dark-950);
349
539
  --bh-colors-brand-border-border-subtle: var(--bh-gray-500);
@@ -353,7 +543,6 @@
353
543
  --bh-colors-brand-checkbox-bg-hover: var(--bh-gray-950);
354
544
  --bh-colors-brand-checkbox-bg-hover-dark: var(--bh-gray-100);
355
545
  --bh-colors-brand-color-on-brand-dark: var(--bh-gray-dark-50);
356
- --bh-colors-brand-color-on-brand-light: var(--bh-base-white);
357
546
  --bh-colors-brand-content-dark: var(--bh-base-white);
358
547
  --bh-colors-brand-content-light: var(--bh-gray-950);
359
548
  --bh-colors-brand-content-strong-dark: var(--bh-base-white);
@@ -386,85 +575,6 @@
386
575
  --bh-colors-brand-surface-strong-light: var(--bh-gray-900);
387
576
  --bh-colors-brand-surface-subtle-dark: var(--bh-gray-dark-alpha-200);
388
577
  --bh-colors-brand-surface-subtle-light: var(--bh-gray-200);
389
- --bh-colors-neutral-100: var(--bh-gray-100);
390
- --bh-colors-neutral-200: var(--bh-gray-200);
391
- --bh-colors-neutral-300: var(--bh-gray-300);
392
- --bh-colors-neutral-400: var(--bh-gray-400);
393
- --bh-colors-neutral-50: var(--bh-gray-50);
394
- --bh-colors-neutral-500: var(--bh-gray-500);
395
- --bh-colors-neutral-600: var(--bh-gray-600);
396
- --bh-colors-neutral-700: var(--bh-gray-700);
397
- --bh-colors-neutral-800: var(--bh-gray-800);
398
- --bh-colors-neutral-900: var(--bh-gray-900);
399
- --bh-colors-neutral-950: var(--bh-gray-950);
400
- --bh-colors-neutral-alpha-100: var(--bh-gray-alpha-100);
401
- --bh-colors-neutral-alpha-200: var(--bh-gray-alpha-200);
402
- --bh-colors-neutral-alpha-300: var(--bh-gray-alpha-300);
403
- --bh-colors-neutral-alpha-400: var(--bh-gray-alpha-400);
404
- --bh-colors-neutral-alpha-50: var(--bh-gray-alpha-50);
405
- --bh-colors-neutral-alpha-500: var(--bh-gray-alpha-500);
406
- --bh-colors-neutral-alpha-dark-100: var(--bh-gray-dark-alpha-100);
407
- --bh-colors-neutral-alpha-dark-200: var(--bh-gray-dark-alpha-200);
408
- --bh-colors-neutral-alpha-dark-300: var(--bh-gray-dark-alpha-300);
409
- --bh-colors-neutral-alpha-dark-400: var(--bh-gray-dark-alpha-400);
410
- --bh-colors-neutral-alpha-dark-50: var(--bh-gray-dark-alpha-50);
411
- --bh-colors-neutral-alpha-dark-500: var(--bh-gray-dark-alpha-500);
412
- --bh-colors-neutral-dark-100: var(--bh-gray-dark-100);
413
- --bh-colors-neutral-dark-200: var(--bh-gray-dark-200);
414
- --bh-colors-neutral-dark-300: var(--bh-gray-dark-300);
415
- --bh-colors-neutral-dark-400: var(--bh-gray-dark-400);
416
- --bh-colors-neutral-dark-50: var(--bh-gray-dark-50);
417
- --bh-colors-neutral-dark-500: var(--bh-gray-dark-500);
418
- --bh-colors-neutral-dark-600: var(--bh-gray-dark-600);
419
- --bh-colors-neutral-dark-700: var(--bh-gray-dark-700);
420
- --bh-colors-neutral-dark-800: var(--bh-gray-dark-800);
421
- --bh-colors-neutral-dark-900: var(--bh-gray-dark-900);
422
- --bh-colors-neutral-dark-950: var(--bh-gray-dark-950);
423
- --bh-content-accent-amber-default: var(--bh-amber-600);
424
- --bh-content-accent-amber-strong: var(--bh-amber-800);
425
- --bh-content-accent-aqua-default: var(--bh-aqua-600);
426
- --bh-content-accent-aqua-strong: var(--bh-aqua-700);
427
- --bh-content-accent-blue-default: var(--bh-blue-600);
428
- --bh-content-accent-blue-strong: var(--bh-blue-700);
429
- --bh-content-accent-fuchsia-default: var(--bh-fuchsia-600);
430
- --bh-content-accent-fuchsia-strong: var(--bh-fuchsia-700);
431
- --bh-content-accent-golden-default: var(--bh-golden-700);
432
- --bh-content-accent-golden-strong: var(--bh-golden-800);
433
- --bh-content-accent-green-default: var(--bh-green-600);
434
- --bh-content-accent-green-strong: var(--bh-green-700);
435
- --bh-content-accent-lime-default: var(--bh-lime-600);
436
- --bh-content-accent-lime-strong: var(--bh-lime-700);
437
- --bh-content-accent-purple-default: var(--bh-purple-600);
438
- --bh-content-accent-purple-strong: var(--bh-purple-700);
439
- --bh-content-accent-red-default: var(--bh-red-600);
440
- --bh-content-accent-red-strong: var(--bh-red-700);
441
- --bh-content-accent-rose-default: var(--bh-rose-600);
442
- --bh-content-accent-rose-strong: var(--bh-rose-700);
443
- --bh-content-accent-sky-default: var(--bh-sky-600);
444
- --bh-content-accent-sky-strong: var(--bh-sky-700);
445
- --bh-content-brand-default: var(--bh-colors-brand-content-light);
446
- --bh-content-brand-strong: var(--bh-colors-brand-content-strong-light);
447
- --bh-content-danger-default: var(--bh-red-600);
448
- --bh-content-danger-strong: var(--bh-red-700);
449
- --bh-content-default: var(--bh-colors-neutral-950);
450
- --bh-content-disabled: var(--bh-colors-neutral-600);
451
- --bh-content-information-default: var(--bh-blue-600);
452
- --bh-content-information-strong: var(--bh-blue-700);
453
- --bh-content-inverse: var(--bh-base-white);
454
- --bh-content-link: var(--bh-colors-brand-link-light);
455
- --bh-content-link-hover: var(--bh-colors-brand-link-hover-light);
456
- --bh-content-muted: #627084;
457
- --bh-content-on-brand: var(--bh-colors-brand-color-on-brand-light);
458
- --bh-content-on-color: var(--bh-base-white);
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);
463
- --bh-content-subtle: var(--bh-colors-neutral-800);
464
- --bh-content-success-default: var(--bh-green-600);
465
- --bh-content-success-strong: var(--bh-green-700);
466
- --bh-content-warning-default: var(--bh-amber-600);
467
- --bh-content-warning-strong: var(--bh-amber-700);
468
578
  --bh-control-default: 8px;
469
579
  --bh-control-lg: 10px;
470
580
  --bh-control-md: 6px;
@@ -475,103 +585,53 @@
475
585
  --bh-date-list-item-height: var(--bh-button-sm-height);
476
586
  --bh-date-month-year-item-height: var(--bh-space-6xl-32);
477
587
  --bh-date-month-year-list-top: calc(var(--bh-space-8xl-48) + var(--bh-space-xs-4));
478
- --bh-date-month-year-list-width: var(--bh-date-range-month-width);
479
- --bh-date-month-year-spacer-height: 252px;
480
- --bh-date-nav-button-size: var(--bh-button-xs-height);
481
- --bh-date-nav-icon-size: var(--bh-icon-size-default);
482
- --bh-date-nav-icon-slot-size: var(--bh-icon-slot-size-default);
483
- --bh-date-picker-width: var(--bh-date-trigger-width);
484
- --bh-date-presets-width: 144px;
485
- --bh-date-range-month-width: var(--bh-space-15xl-224);
486
- --bh-date-range-surface-max-width: calc(100vw - var(--bh-space-6xl-32));
487
- --bh-date-surface-width-calendar: 240px;
488
- --bh-date-surface-width-picker: var(--bh-space-16xl-256);
489
- --bh-date-time-input-min-height: var(--bh-space-6xl-32);
490
- --bh-date-title-chevron-size: var(--bh-space-3xl-16);
491
- --bh-date-title-height: var(--bh-button-xs-height);
492
- --bh-date-trigger-height: var(--bh-button-md-height);
493
- --bh-date-trigger-icon-size: var(--bh-icon-size-default);
494
- --bh-date-trigger-icon-slot-size: var(--bh-icon-slot-size-default);
495
- --bh-date-trigger-width: 260px;
496
- --bh-duration-accordion: 180ms;
497
- --bh-duration-default: 200ms;
498
- --bh-duration-fast: 160ms;
499
- --bh-duration-reduced-motion: 0.01ms;
500
- --bh-easing-out: ease-out;
501
- --bh-easing-standard: ease;
502
- --bh-empty-state-icon-stroke-width: 2;
503
- --bh-expanded-breakpoint-lg: 980px;
504
- --bh-expanded-breakpoint-md: 820px;
505
- --bh-expanded-breakpoint-sm: 620px;
506
- --bh-expanded-breakpoint-xs: 560px;
507
- --bh-file-upload-content-max-width: 343px;
508
- --bh-file-upload-root-max-width: 500px;
509
- --bh-file-upload-spin-duration: 1s;
510
- --bh-focus-ring-offset: var(--bh-space-xxs-2);
511
- --bh-focus-ring-width: var(--bh-space-xs-4);
512
- --bh-font-family: var(--bh-font-family-english), var(--bh-font-family-arabic), var(--bh-font-family-fallback);
513
- --bh-font-family-arabic: "IBM Plex Sans Arabic";
514
- --bh-font-family-english: Inter;
515
- --bh-font-family-fallback: sans-serif;
516
- --bh-font-weight-bold: 700;
517
- --bh-font-weight-medium: 500;
518
- --bh-font-weight-regular: 400;
519
- --bh-font-weight-semibold: 600;
520
- --bh-fuchsia-100: #FED6FF;
521
- --bh-fuchsia-200: #FEB9FF;
522
- --bh-fuchsia-50: #FFEBFF;
523
- --bh-fuchsia-500: #E703EB;
524
- --bh-fuchsia-600: #C20AC5;
525
- --bh-fuchsia-700: #92089F;
526
- --bh-golden-100: #FFEDAE;
527
- --bh-golden-300: #FAD658;
528
- --bh-golden-400: #F7C407;
529
- --bh-golden-50: #FFF5D1;
530
- --bh-golden-600: #C98B04;
531
- --bh-golden-700: #A96C03;
532
- --bh-golden-800: #7E4F03;
533
- --bh-gray-100: #F5F5F5;
534
- --bh-gray-200: #F0F0F0;
535
- --bh-gray-300: #EBEBEB;
536
- --bh-gray-400: #DBDBDB;
537
- --bh-gray-50: #FAFAFA;
538
- --bh-gray-500: #BFBFBF;
539
- --bh-gray-600: #ADADAD;
540
- --bh-gray-700: #8C8C8C;
541
- --bh-gray-800: #595959;
542
- --bh-gray-900: #2E2E2E;
543
- --bh-gray-950: #1A1A1A;
544
- --bh-gray-alpha-100: rgb(0 0 0 / 0.06);
545
- --bh-gray-alpha-200: rgb(0 0 0 / 0.08);
546
- --bh-gray-alpha-300: rgb(0 0 0 / 0.1);
547
- --bh-gray-alpha-400: rgb(0 0 0 / 0.14);
548
- --bh-gray-alpha-50: rgb(0 0 0 / 0.04);
549
- --bh-gray-alpha-500: rgb(0 0 0 / 0.25);
550
- --bh-gray-dark-100: #141414;
551
- --bh-gray-dark-200: #1A1A1A;
552
- --bh-gray-dark-300: #242424;
553
- --bh-gray-dark-400: #3B3B3B;
554
- --bh-gray-dark-50: #0E0E0F;
555
- --bh-gray-dark-500: #4D4D4D;
556
- --bh-gray-dark-600: #5E5E5E;
557
- --bh-gray-dark-700: #7A7A7A;
558
- --bh-gray-dark-800: #A3A3A3;
559
- --bh-gray-dark-900: #E8E8E8;
560
- --bh-gray-dark-950: #FCFCFC;
561
- --bh-gray-dark-alpha-100: rgb(255 255 255 / 0.08);
562
- --bh-gray-dark-alpha-200: rgb(255 255 255 / 0.11);
563
- --bh-gray-dark-alpha-300: rgb(255 255 255 / 0.12);
564
- --bh-gray-dark-alpha-400: rgb(255 255 255 / 0.19);
565
- --bh-gray-dark-alpha-50: rgb(255 255 255 / 0.05);
566
- --bh-gray-dark-alpha-500: rgb(255 255 255 / 0.3);
567
- --bh-green-100: #BCFAD2;
568
- --bh-green-200: #89EBAC;
569
- --bh-green-50: #DBFFE8;
570
- --bh-green-500: #0BAE45;
571
- --bh-green-600: #039536;
572
- --bh-green-700: #07712C;
573
- --bh-green-800: #075622;
574
- --bh-green-900: #043F18;
588
+ --bh-date-month-year-list-width: var(--bh-date-range-month-width);
589
+ --bh-date-month-year-spacer-height: 252px;
590
+ --bh-date-nav-button-size: var(--bh-button-xs-height);
591
+ --bh-date-nav-icon-size: var(--bh-icon-size-default);
592
+ --bh-date-nav-icon-slot-size: var(--bh-icon-slot-size-default);
593
+ --bh-date-picker-width: var(--bh-date-trigger-width);
594
+ --bh-date-presets-width: 144px;
595
+ --bh-date-range-month-width: var(--bh-space-15xl-224);
596
+ --bh-date-range-surface-max-width: calc(100vw - var(--bh-space-6xl-32));
597
+ --bh-date-surface-width-calendar: 240px;
598
+ --bh-date-surface-width-picker: var(--bh-space-16xl-256);
599
+ --bh-date-time-input-min-height: var(--bh-space-6xl-32);
600
+ --bh-date-title-chevron-size: var(--bh-space-3xl-16);
601
+ --bh-date-title-height: var(--bh-button-xs-height);
602
+ --bh-date-trigger-height: var(--bh-button-md-height);
603
+ --bh-date-trigger-icon-size: var(--bh-icon-size-default);
604
+ --bh-date-trigger-icon-slot-size: var(--bh-icon-slot-size-default);
605
+ --bh-date-trigger-width: 260px;
606
+ --bh-duration-accordion: 180ms;
607
+ --bh-duration-default: 200ms;
608
+ --bh-duration-fast: 160ms;
609
+ --bh-duration-moderate: 280ms;
610
+ --bh-duration-reduced-motion: 0.01ms;
611
+ --bh-duration-slow: 350ms;
612
+ --bh-duration-slower: 560ms;
613
+ --bh-easing-emphasized: cubic-bezier(0.22, 1, 0.36, 1);
614
+ --bh-easing-out: ease-out;
615
+ --bh-easing-standard: ease;
616
+ --bh-empty-state-icon-stroke-width: 2;
617
+ --bh-expanded-breakpoint-lg: 980px;
618
+ --bh-expanded-breakpoint-md: 820px;
619
+ --bh-expanded-breakpoint-sm: 620px;
620
+ --bh-expanded-breakpoint-xs: 560px;
621
+ --bh-file-upload-content-max-width: 343px;
622
+ --bh-file-upload-root-max-width: 500px;
623
+ --bh-file-upload-spin-duration: 1s;
624
+ --bh-focus-ring-offset: var(--bh-space-xxs-2);
625
+ --bh-focus-ring-width: var(--bh-space-xs-4);
626
+ --bh-font-family: var(--bh-font-family-english), var(--bh-font-family-arabic), var(--bh-font-family-fallback);
627
+ --bh-font-family-arabic: "IBM Plex Sans Arabic";
628
+ --bh-font-family-english: Inter;
629
+ --bh-font-family-fallback: sans-serif;
630
+ --bh-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
631
+ --bh-font-weight-bold: 700;
632
+ --bh-font-weight-medium: 500;
633
+ --bh-font-weight-regular: 400;
634
+ --bh-font-weight-semibold: 600;
575
635
  --bh-icon-explorer-canvas-max-width: 1280px;
576
636
  --bh-icon-explorer-detail-max-width: 760px;
577
637
  --bh-icon-explorer-detail-preview-size: 86px;
@@ -591,7 +651,6 @@
591
651
  --bh-icon-explorer-selected-min-height: 176px;
592
652
  --bh-icon-explorer-style-card-min-height: 74px;
593
653
  --bh-icon-explorer-swatch-width: 150px;
594
- --bh-icon-explorer-topbar-bg: color-mix(in srgb, var(--bh-bg-grouped) 92%, transparent);
595
654
  --bh-icon-explorer-topbar-min-height: 74px;
596
655
  --bh-icon-size-default: 18px;
597
656
  --bh-icon-slot-inset-default: calc((var(--bh-icon-slot-size-default) - var(--bh-icon-size-default)) / 2);
@@ -616,6 +675,7 @@
616
675
  --bh-input-comfortable-height: var(--bh-button-md-height);
617
676
  --bh-input-comfortable-padding-x: var(--bh-space-xl-12);
618
677
  --bh-input-content-gap: var(--bh-space-sm-6);
678
+ --bh-input-content-padding-x: var(--bh-space-md-8);
619
679
  --bh-input-helper-gap: var(--bh-space-sm-6);
620
680
  --bh-input-icon-size: var(--bh-space-3xl-16);
621
681
  --bh-input-icon-slot-size: var(--bh-space-4xl-20);
@@ -642,60 +702,8 @@
642
702
  --bh-input-stepper-icon-size: var(--bh-space-3xl-16);
643
703
  --bh-input-tag-height: var(--bh-space-5xl-24);
644
704
  --bh-input-tag-padding-x: var(--bh-space-sm-6);
705
+ --bh-input-value-inset: var(--bh-space-xs-4);
645
706
  --bh-input-width: var(--bh-space-18xl-320);
646
- --bh-interactive-brand-default: var(--bh-colors-brand-interactive-default);
647
- --bh-interactive-brand-disabled: var(--bh-colors-neutral-alpha-100);
648
- --bh-interactive-brand-hover: var(--bh-colors-brand-interactive-hover);
649
- --bh-interactive-brand-pressed: var(--bh-colors-brand-interactive-pressed);
650
- --bh-interactive-checkbox-default: var(--bh-colors-brand-checkbox-bg-default);
651
- --bh-interactive-checkbox-hover: var(--bh-colors-brand-checkbox-bg-hover);
652
- --bh-interactive-danger-default: var(--bh-red-500);
653
- --bh-interactive-danger-disabled: var(--bh-colors-neutral-alpha-100);
654
- --bh-interactive-danger-hover: var(--bh-red-600);
655
- --bh-interactive-danger-pressed: var(--bh-red-500);
656
- --bh-interactive-danger-soft-default: var(--bh-red-50);
657
- --bh-interactive-danger-soft-disabled: var(--bh-colors-neutral-alpha-100);
658
- --bh-interactive-danger-soft-hover: var(--bh-red-100);
659
- --bh-interactive-danger-soft-pressed: var(--bh-red-50);
660
- --bh-interactive-ghost-active: var(--bh-colors-neutral-alpha-100);
661
- --bh-interactive-ghost-default: rgb(0 0 0 / 0);
662
- --bh-interactive-ghost-disabled: rgb(0 0 0 / 0);
663
- --bh-interactive-ghost-hover: var(--bh-colors-neutral-alpha-50);
664
- --bh-interactive-ghost-pressed: var(--bh-colors-neutral-alpha-100);
665
- --bh-interactive-indicator-default: var(--bh-colors-brand-indicator);
666
- --bh-interactive-input-default: var(--bh-base-white);
667
- --bh-interactive-input-disabled: var(--bh-colors-neutral-alpha-50);
668
- --bh-interactive-input-soft: var(--bh-colors-neutral-alpha-100);
669
- --bh-interactive-input-soft-disabled: var(--bh-colors-neutral-alpha-50);
670
- --bh-interactive-outlined-default: rgb(0 0 0 / 0);
671
- --bh-interactive-outlined-disabled: rgb(0 0 0 / 0);
672
- --bh-interactive-outlined-hover: var(--bh-colors-neutral-alpha-50);
673
- --bh-interactive-outlined-pressed: var(--bh-colors-neutral-alpha-100);
674
- --bh-interactive-radiobutton-default: var(--bh-colors-brand-radiobutton-bg-default);
675
- --bh-interactive-radiobutton-hover: var(--bh-colors-brand-radiobutton-bg-hover);
676
- --bh-interactive-secondary-default: var(--bh-colors-neutral-50);
677
- --bh-interactive-secondary-disabled: var(--bh-colors-neutral-alpha-100);
678
- --bh-interactive-secondary-hover: var(--bh-colors-neutral-100);
679
- --bh-interactive-secondary-pressed: var(--bh-colors-neutral-200);
680
- --bh-interactive-soft-default: var(--bh-colors-neutral-alpha-100);
681
- --bh-interactive-soft-disabled: var(--bh-colors-neutral-alpha-100);
682
- --bh-interactive-soft-hover: var(--bh-colors-neutral-alpha-200);
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);
687
- --bh-interactive-switch-active: var(--bh-green-500);
688
- --bh-interactive-switch-active-disabled: var(--bh-green-100);
689
- --bh-interactive-switch-active-hover: var(--bh-green-600);
690
- --bh-interactive-switch-default: var(--bh-colors-neutral-400);
691
- --bh-interactive-switch-disabled: var(--bh-colors-neutral-alpha-100);
692
- --bh-interactive-switch-handle: var(--bh-base-white);
693
- --bh-interactive-switch-handle-disabled: var(--bh-colors-neutral-50);
694
- --bh-interactive-switch-hover: var(--bh-colors-neutral-500);
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);
699
707
  --bh-item-actions-gap: var(--bh-space-md-8);
700
708
  --bh-item-content-gap: var(--bh-space-xxs-2);
701
709
  --bh-item-gap: var(--bh-space-xl-12);
@@ -710,25 +718,16 @@
710
718
  --bh-item-padding-x: var(--bh-space-3xl-16);
711
719
  --bh-item-padding-y: var(--bh-space-xl-12);
712
720
  --bh-item-radius: var(--bh-radius-xl-10);
713
- --bh-lime-100: #E8FCA8;
714
- --bh-lime-200: #D4F273;
715
- --bh-lime-50: #F4FFD1;
716
- --bh-lime-500: #8EB903;
717
- --bh-lime-600: #7CA203;
718
- --bh-lime-700: #668303;
719
721
  --bh-menu-action-gap: var(--bh-space-xxs-2);
720
722
  --bh-menu-action-height: var(--bh-space-6xl-32);
721
723
  --bh-menu-action-padding-x: var(--bh-space-sm-6);
722
724
  --bh-menu-badge-height: var(--bh-space-5xl-24);
723
725
  --bh-menu-badge-padding-x: var(--bh-space-md-8);
724
- --bh-menu-bg: var(--bh-bg-raised);
725
- --bh-menu-border: var(--bh-border-subtle);
726
726
  --bh-menu-divider-padding-y: var(--bh-space-xxs-2);
727
727
  --bh-menu-gap: var(--bh-space-xs-4);
728
728
  --bh-menu-icon-padding: var(--bh-space-xxs-2);
729
729
  --bh-menu-item-action-height: var(--bh-space-8xl-48);
730
730
  --bh-menu-item-action-width: 240px;
731
- --bh-menu-item-bg: var(--bh-interactive-ghost-default);
732
731
  --bh-menu-item-button-height: var(--bh-space-7xl-40);
733
732
  --bh-menu-item-caption-height: var(--bh-radius-6xl-28);
734
733
  --bh-menu-item-content-compact-padding-y: var(--bh-space-xs-4);
@@ -737,7 +736,6 @@
737
736
  --bh-menu-item-default-width: 355px;
738
737
  --bh-menu-item-divider-height: var(--bh-space-xs-4);
739
738
  --bh-menu-item-gap: var(--bh-space-xs-4);
740
- --bh-menu-item-hover-bg: var(--bh-interactive-ghost-hover);
741
739
  --bh-menu-item-label-height: var(--bh-radius-6xl-28);
742
740
  --bh-menu-item-multiline-height: var(--bh-space-8xl-48);
743
741
  --bh-menu-item-multiline-width: 402px;
@@ -785,51 +783,14 @@
785
783
  --bh-opacity-muted: var(--bh-opacity-55);
786
784
  --bh-opacity-subtle: var(--bh-opacity-70);
787
785
  --bh-opacity-tag-muted: var(--bh-opacity-70);
788
- --bh-pagination-action-gap: var(--bh-space-md-8);
789
- --bh-pagination-active-bg: var(--bh-interactive-brand-default);
790
- --bh-pagination-active-border: var(--bh-border-subtle);
791
- --bh-pagination-active-content: var(--bh-content-on-brand);
792
- --bh-pagination-caption-content: var(--bh-content-subtle);
793
- --bh-pagination-caption-font-weight: var(--bh-text-body-md-regular-font-weight);
794
- --bh-pagination-caption-width: 254px;
795
- --bh-pagination-control-content: var(--bh-content-default);
796
- --bh-pagination-control-gap: var(--bh-space-lg-10);
797
- --bh-pagination-control-ghost-bg: var(--bh-interactive-ghost-default);
798
- --bh-pagination-control-ghost-hover: var(--bh-interactive-ghost-hover);
799
- --bh-pagination-control-ghost-pressed: var(--bh-interactive-ghost-pressed);
800
- --bh-pagination-control-label-padding-x: var(--bh-space-xxs-2);
801
- --bh-pagination-control-label-rtl-padding-x: var(--bh-space-xs-4);
802
- --bh-pagination-control-soft-bg: var(--bh-interactive-soft-default);
803
- --bh-pagination-control-soft-hover: var(--bh-interactive-soft-hover);
804
- --bh-pagination-control-soft-pressed: var(--bh-interactive-soft-pressed);
805
- --bh-pagination-control-text-gap: var(--bh-space-xs-4);
806
- --bh-pagination-control-text-padding-x: var(--bh-space-md-8);
807
- --bh-pagination-control-text-rtl-gap: var(--bh-space-xxs-2);
808
- --bh-pagination-control-text-rtl-padding-x: var(--bh-space-sm-6);
809
- --bh-pagination-font-size: var(--bh-text-body-md-medium-font-size);
810
- --bh-pagination-icon-size: var(--bh-icon-size-default);
811
- --bh-pagination-icon-slot-size: var(--bh-icon-slot-size-default);
812
- --bh-pagination-item-size: var(--bh-space-6xl-32);
813
- --bh-pagination-label-font-weight: var(--bh-text-body-md-medium-font-weight);
814
- --bh-pagination-letter-spacing: var(--bh-text-body-md-medium-letter-spacing);
815
- --bh-pagination-line-height: var(--bh-text-body-md-medium-line-height);
816
- --bh-pagination-numeric-width: 560px;
817
- --bh-pagination-page-bg: var(--bh-interactive-ghost-default);
818
- --bh-pagination-page-content: var(--bh-content-subtle);
819
- --bh-pagination-page-gap: var(--bh-space-xs-4);
820
- --bh-pagination-page-hover: var(--bh-interactive-ghost-hover);
821
- --bh-pagination-page-pressed: var(--bh-interactive-ghost-pressed);
822
- --bh-pagination-radius: var(--bh-control-default);
823
- --bh-pagination-root-gap: var(--bh-space-3xl-16);
824
- --bh-pagination-simple-width: 458px;
786
+ --bh-page-header-comfortable-action-min-width: calc(var(--bh-space-12xl-128) + var(--bh-space-6xl-32));
787
+ --bh-page-header-comfortable-primary-action-min-width: calc(var(--bh-space-12xl-128) + var(--bh-space-8xl-48));
825
788
  --bh-popover-arrow-depth: var(--bh-space-md-8);
826
789
  --bh-popover-arrow-inline-offset: var(--bh-space-xl-12);
827
790
  --bh-popover-arrow-offset: calc(var(--bh-popover-arrow-depth) * -1);
828
791
  --bh-popover-arrow-overlap: var(--bh-border-width-default);
829
792
  --bh-popover-arrow-width: var(--bh-space-xl-12);
830
- --bh-popover-bg: var(--bh-bg-raised);
831
793
  --bh-popover-body-gap: var(--bh-space-md-8);
832
- --bh-popover-border: var(--bh-border-subtle);
833
794
  --bh-popover-close-icon-size: var(--bh-space-3xl-16);
834
795
  --bh-popover-close-size: var(--bh-space-5xl-24);
835
796
  --bh-popover-content-gap: var(--bh-space-lg-10);
@@ -856,18 +817,11 @@
856
817
  --bh-progress-slider-height-lg: 72px;
857
818
  --bh-progress-slider-height-md: 56px;
858
819
  --bh-progress-slider-radius: var(--bh-radius-5xl-24);
859
- --bh-progress-slider-tick-bg: color-mix(in srgb, var(--bh-progress-slider-grip-bg, var(--bh-border-brand-strong)) 34%, transparent);
860
820
  --bh-progress-slider-tick-gap: var(--bh-space-xl-12);
861
821
  --bh-progress-slider-tick-padding: var(--bh-space-6xl-32);
862
822
  --bh-progress-slider-tick-size: var(--bh-space-sm-6);
863
823
  --bh-progress-slider-width-lg: 472px;
864
824
  --bh-progress-slider-width-md: calc(var(--bh-space-18xl-320) + var(--bh-space-7xl-40));
865
- --bh-purple-100: #F0DEFF;
866
- --bh-purple-200: #E3C3FF;
867
- --bh-purple-50: #F7EDFF;
868
- --bh-purple-500: #A135FA;
869
- --bh-purple-600: #8216DB;
870
- --bh-purple-700: #610FAD;
871
825
  --bh-radio-card-border-width: var(--bh-border-width-default);
872
826
  --bh-radio-card-border-width-active: var(--bh-border-width-strong);
873
827
  --bh-radio-card-company-mark-color: #7F57F1;
@@ -890,95 +844,39 @@
890
844
  --bh-radius-sm-4: 4px;
891
845
  --bh-radius-xl-10: 10px;
892
846
  --bh-radius-xs-2: 2px;
893
- --bh-red-100: #FFDBDF;
894
- --bh-red-200: #FFBFC6;
895
- --bh-red-300: #FF96A1;
896
- --bh-red-400: #FC5666;
897
- --bh-red-50: #FFEDEF;
898
- --bh-red-500: #E8172C;
899
- --bh-red-600: #CA1224;
900
- --bh-red-700: #A60C1B;
901
- --bh-rose-100: #FFD6E7;
902
- --bh-rose-200: #FFB9D7;
903
- --bh-rose-50: #FFEBF3;
904
- --bh-rose-500: #F01071;
905
- --bh-rose-600: #D10A60;
906
- --bh-rose-700: #A7094D;
907
- --bh-rose-950: #44071F;
908
- --bh-select-avatar-font-size: var(--bh-space-lg-10);
909
- --bh-select-check-color: var(--bh-interactive-indicator-default);
910
- --bh-select-checkbox-icon-size: var(--bh-space-xl-12);
911
- --bh-select-checkbox-radius: var(--bh-radius-sm-4);
912
- --bh-select-checkbox-size: var(--bh-space-3xl-16);
913
- --bh-select-company-icon-size: 18px;
914
- --bh-select-content-gap: var(--bh-space-xxs-2);
915
- --bh-select-field-gap: var(--bh-space-sm-6);
916
- --bh-select-icon-size: var(--bh-space-3xl-16);
917
- --bh-select-icon-slot-size: var(--bh-space-4xl-20);
918
- --bh-select-item-check-offset: var(--bh-space-3xl-16);
919
- --bh-select-item-content-padding: var(--bh-space-sm-6);
920
- --bh-select-item-gap: var(--bh-space-xs-4);
921
- --bh-select-item-hover-bg: var(--bh-interactive-ghost-hover);
922
- --bh-select-item-min-height: var(--bh-space-6xl-32);
923
- --bh-select-item-padding-x: var(--bh-space-sm-6);
924
- --bh-select-item-radius: var(--bh-radius-md-6);
925
- --bh-select-item-selected-padding-end: var(--bh-space-6xl-32);
926
- --bh-select-item-value-padding-x: var(--bh-space-xs-4);
927
- --bh-select-label-gap: var(--bh-space-xs-4);
928
- --bh-select-media-inset: var(--bh-space-xxs-2);
929
- --bh-select-menu-bg: var(--bh-bg-raised);
930
- --bh-select-menu-border: var(--bh-border-subtle);
931
- --bh-select-menu-list-gap: var(--bh-space-xxs-2);
932
- --bh-select-menu-offset: var(--bh-space-xs-4);
933
- --bh-select-menu-padding-y: var(--bh-space-sm-6);
934
- --bh-select-menu-radius: var(--bh-radius-xl-10);
935
- --bh-select-menu-width: var(--bh-select-width);
936
- --bh-select-payment-height: var(--bh-space-4xl-20);
937
- --bh-select-payment-mark-offset: 7px;
938
- --bh-select-payment-mark-size: 9px;
939
- --bh-select-payment-radius: var(--bh-radius-sm-4);
940
- --bh-select-payment-width: 28.333px;
941
- --bh-select-status-dot-size: var(--bh-space-md-8);
942
- --bh-select-trigger-bg: var(--bh-interactive-input-default);
943
- --bh-select-trigger-bg-disabled: var(--bh-interactive-input-disabled);
944
- --bh-select-trigger-bg-soft: var(--bh-interactive-input-soft);
945
- --bh-select-trigger-border: var(--bh-border-input);
946
- --bh-select-trigger-border-disabled: var(--bh-border-disabled);
947
- --bh-select-trigger-border-error: var(--bh-border-danger-strong);
948
- --bh-select-trigger-border-focus: var(--bh-border-focus);
949
- --bh-select-trigger-gap: var(--bh-space-sm-6);
950
- --bh-select-trigger-icon-color: var(--bh-content-muted);
951
- --bh-select-trigger-padding-x: var(--bh-space-md-8);
952
- --bh-select-trigger-padding-y-comfortable: var(--bh-space-md-8);
953
- --bh-select-trigger-padding-y-lg: var(--bh-space-sm-6);
954
- --bh-select-trigger-padding-y-md: var(--bh-space-xs-4);
955
- --bh-select-trigger-radius: var(--bh-radius-lg-8);
956
- --bh-select-value-padding-inline: var(--bh-space-xs-4);
957
- --bh-select-width: var(--bh-space-18xl-320);
847
+ --bh-shimmer-text-duration: 2.25s;
958
848
  --bh-sidebar-active-guide-height: 15px;
959
- --bh-sidebar-bg: var(--bh-bg-default);
960
- --bh-sidebar-bg-collapsed: var(--bh-bg-default);
961
- --bh-sidebar-border: var(--bh-border-subtle);
962
849
  --bh-sidebar-brand-height: 38px;
850
+ --bh-sidebar-comfortable-brand-padding: var(--bh-space-md-8);
851
+ --bh-sidebar-comfortable-group-label-height: var(--bh-space-4xl-20);
852
+ --bh-sidebar-comfortable-item-gap: var(--bh-space-md-8);
853
+ --bh-sidebar-comfortable-item-height: var(--bh-space-7xl-40);
854
+ --bh-sidebar-comfortable-label-padding: var(--bh-space-xxs-2);
855
+ --bh-sidebar-comfortable-padding: var(--bh-space-3xl-16);
856
+ --bh-sidebar-comfortable-section-gap: var(--bh-space-5xl-24);
963
857
  --bh-sidebar-compact-control-size: 36px;
964
858
  --bh-sidebar-header-action-size: 28px;
965
859
  --bh-sidebar-icon-size: var(--bh-icon-size-default);
966
860
  --bh-sidebar-icon-size-collapsed: var(--bh-icon-size-default);
967
861
  --bh-sidebar-icon-slot-size: var(--bh-icon-slot-size-default);
968
- --bh-sidebar-item-bg-active: var(--bh-interactive-soft-default);
969
- --bh-sidebar-item-bg-hover: var(--bh-interactive-ghost-hover);
970
- --bh-sidebar-item-content: var(--bh-content-subtle);
971
- --bh-sidebar-item-content-active: var(--bh-content-default);
972
862
  --bh-sidebar-item-gap: var(--bh-space-md-8);
973
863
  --bh-sidebar-item-height: var(--bh-space-6xl-32);
974
864
  --bh-sidebar-item-height-collapsed: var(--bh-space-7xl-40);
975
865
  --bh-sidebar-item-padding-x: var(--bh-space-sm-6);
976
- --bh-sidebar-level-2-indent-width: 44px;
866
+ --bh-sidebar-level-2-indent-width: var(--bh-sidebar-icon-slot-size);
867
+ --bh-sidebar-min-height: 900px;
868
+ --bh-sidebar-motion-delay-content: 40ms;
869
+ --bh-sidebar-motion-duration: var(--bh-duration-default);
870
+ --bh-sidebar-motion-duration-content: var(--bh-duration-fast);
871
+ --bh-sidebar-motion-easing: cubic-bezier(0.2, 0, 0.38, 0.9);
977
872
  --bh-sidebar-padding: var(--bh-space-lg-10);
978
873
  --bh-sidebar-rail-width: 16px;
979
874
  --bh-sidebar-section-gap: var(--bh-space-3xl-16);
980
875
  --bh-sidebar-tree-indent-step: 22px;
981
876
  --bh-sidebar-tree-item-height: 28px;
877
+ --bh-sidebar-user-preview-gap: var(--bh-space-md-8);
878
+ --bh-sidebar-user-preview-height: 56px;
879
+ --bh-sidebar-user-preview-width: 232px;
982
880
  --bh-sidebar-width: 280px;
983
881
  --bh-sidebar-width-collapsed: 48px;
984
882
  --bh-sidebar-workspace-card-height: 50px;
@@ -987,18 +885,11 @@
987
885
  --bh-skeleton-duration: 1.4s;
988
886
  --bh-skeleton-shimmer-width: 62%;
989
887
  --bh-skeleton-width: 100%;
990
- --bh-sky-100: #CFF0FF;
991
- --bh-sky-200: #A4E2FF;
992
- --bh-sky-50: #EDF9FF;
993
- --bh-sky-500: #059FE5;
994
- --bh-sky-600: #0C85C3;
995
- --bh-sky-700: #036EA4;
996
888
  --bh-slider-indicator-gap: var(--bh-space-md-8);
997
889
  --bh-slider-pill-height: 72px;
998
890
  --bh-slider-pill-radius: var(--bh-radius-5xl-24);
999
891
  --bh-slider-pill-thumb-border-width: calc(var(--bh-border-width-strong) + var(--bh-border-width-default));
1000
892
  --bh-slider-pill-thumb-width: 126px;
1001
- --bh-slider-pill-track-bg: color-mix(in srgb, var(--bh-slider-range-bg, var(--bh-interactive-indicator-default)) 12%, var(--bh-bg-default));
1002
893
  --bh-slider-thumb-grip-width: calc(var(--bh-border-width-strong) + var(--bh-border-width-default));
1003
894
  --bh-slider-thumb-radius: var(--bh-radius-full);
1004
895
  --bh-slider-thumb-ring-width-lg: 9px;
@@ -1007,7 +898,6 @@
1007
898
  --bh-slider-thumb-size-lg: var(--bh-radius-6xl-28);
1008
899
  --bh-slider-thumb-size-md: var(--bh-space-5xl-24);
1009
900
  --bh-slider-thumb-size-sm: var(--bh-space-4xl-20);
1010
- --bh-slider-tick-bg: color-mix(in srgb, var(--bh-slider-range-bg, var(--bh-interactive-indicator-default)) 45%, transparent);
1011
901
  --bh-slider-tick-gap: var(--bh-space-xl-12);
1012
902
  --bh-slider-tick-size: var(--bh-space-sm-6);
1013
903
  --bh-slider-track-radius: var(--bh-radius-full);
@@ -1016,13 +906,6 @@
1016
906
  --bh-slider-track-size-sm: var(--bh-space-sm-6);
1017
907
  --bh-slider-vertical-height: var(--bh-space-13xl-160);
1018
908
  --bh-slider-width: var(--bh-space-18xl-320);
1019
- --bh-social-apple-bg: var(--bh-bg-always-dark);
1020
- --bh-social-apple-border: var(--bh-border-subtle);
1021
- --bh-social-apple-fg: var(--bh-content-on-color);
1022
- --bh-social-apple-hover: color-mix(in srgb, var(--bh-bg-always-dark) 88%, var(--bh-bg-always-white));
1023
- --bh-social-apple-icon: var(--bh-content-on-color);
1024
- --bh-social-apple-icon-border: var(--bh-border-subtle);
1025
- --bh-social-apple-outline-icon: var(--bh-bg-always-dark);
1026
909
  --bh-social-apple-width: 181px;
1027
910
  --bh-social-apple-width-rtl: 222px;
1028
911
  --bh-social-button-gap: var(--bh-space-md-8);
@@ -1034,44 +917,27 @@
1034
917
  --bh-social-button-radius: var(--bh-control-default);
1035
918
  --bh-social-facebook-bg: #1465CE;
1036
919
  --bh-social-facebook-border: transparent;
1037
- --bh-social-facebook-fg: var(--bh-content-on-color);
1038
920
  --bh-social-facebook-hover: #0F52A8;
1039
- --bh-social-facebook-icon: var(--bh-content-on-color);
1040
921
  --bh-social-facebook-outline-icon: var(--bh-social-facebook-bg);
1041
922
  --bh-social-facebook-width: 210px;
1042
923
  --bh-social-facebook-width-rtl: 254px;
1043
- --bh-social-google-bg: var(--bh-bg-always-dark);
1044
924
  --bh-social-google-blue: #4285F4;
1045
- --bh-social-google-border: var(--bh-border-subtle);
1046
- --bh-social-google-fg: var(--bh-content-on-color);
1047
925
  --bh-social-google-green: #34A853;
1048
- --bh-social-google-hover: color-mix(in srgb, var(--bh-bg-always-dark) 88%, var(--bh-bg-always-white));
1049
926
  --bh-social-google-red: #EA4335;
1050
927
  --bh-social-google-width: 191px;
1051
928
  --bh-social-google-width-rtl: 239px;
1052
929
  --bh-social-google-yellow: #FBBC05;
1053
930
  --bh-social-linkedin-bg: #0077B7;
1054
931
  --bh-social-linkedin-border: transparent;
1055
- --bh-social-linkedin-fg: var(--bh-content-on-color);
1056
932
  --bh-social-linkedin-hover: #006BA5;
1057
- --bh-social-linkedin-icon: var(--bh-content-on-color);
1058
933
  --bh-social-linkedin-outline-icon: var(--bh-social-linkedin-bg);
1059
934
  --bh-social-linkedin-width: 200px;
1060
935
  --bh-social-linkedin-width-rtl: 252px;
1061
- --bh-social-twitter-bg: var(--bh-bg-always-dark);
1062
- --bh-social-twitter-border: var(--bh-border-subtle);
1063
- --bh-social-twitter-fg: var(--bh-content-on-color);
1064
- --bh-social-twitter-hover: color-mix(in srgb, var(--bh-bg-always-dark) 88%, var(--bh-bg-always-white));
1065
- --bh-social-twitter-icon: var(--bh-content-on-color);
1066
- --bh-social-twitter-icon-border: var(--bh-border-subtle);
1067
- --bh-social-twitter-outline-icon: var(--bh-bg-always-dark);
1068
936
  --bh-social-twitter-width: 190px;
1069
937
  --bh-social-twitter-width-rtl: 231px;
1070
938
  --bh-social-whatsapp-bg: #087D34;
1071
939
  --bh-social-whatsapp-border: transparent;
1072
- --bh-social-whatsapp-fg: var(--bh-content-on-color);
1073
940
  --bh-social-whatsapp-hover: #066428;
1074
- --bh-social-whatsapp-icon: var(--bh-content-on-color);
1075
941
  --bh-social-whatsapp-outline-icon: var(--bh-social-whatsapp-bg);
1076
942
  --bh-social-whatsapp-width: 214px;
1077
943
  --bh-social-whatsapp-width-rtl: 250px;
@@ -1109,13 +975,24 @@
1109
975
  --bh-steps-horizontal-width: 900px;
1110
976
  --bh-steps-indicator-panel-width: 400px;
1111
977
  --bh-steps-vertical-width: 240px;
978
+ --bh-streaming-text-caret-duration: 1s;
979
+ --bh-streaming-text-caret-width: var(--bh-space-xxs-2);
980
+ --bh-table-cell-text-gap: var(--bh-space-sm-6);
1112
981
  --bh-table-checkbox-opacity: var(--bh-opacity-100);
1113
982
  --bh-table-checkbox-opacity-hidden: var(--bh-opacity-0);
983
+ --bh-table-comfortable-cell-padding-x: var(--bh-space-md-8);
984
+ --bh-table-comfortable-header-height: calc(var(--bh-space-7xl-40) + var(--bh-space-xs-4));
985
+ --bh-table-comfortable-min-width: calc(var(--bh-space-19xl-384) + var(--bh-space-16xl-256));
986
+ --bh-table-comfortable-radius: var(--bh-radius-2xl-12);
987
+ --bh-table-comfortable-row-height: var(--bh-space-9xl-64);
988
+ --bh-table-container-radius: var(--bh-radius-2xl-12);
1114
989
  --bh-table-min-width: 960px;
1115
990
  --bh-table-selection-column-min-width: 118px;
1116
991
  --bh-tag-active-border-width: calc(var(--bh-border-width-default) + (var(--bh-border-width-default) / 2));
1117
992
  --bh-tag-focus-ring-inset: calc(var(--bh-space-xxxs-1) * -1);
1118
993
  --bh-tag-focus-ring-width: var(--bh-space-xs-4);
994
+ --bh-task-list-icon-size: var(--bh-space-3xl-16);
995
+ --bh-task-list-stagger: 50ms;
1119
996
  --bh-text-base-font-size: var(--bh-text-body-md-regular-font-size);
1120
997
  --bh-text-base-font-weight: var(--bh-text-body-md-regular-font-weight);
1121
998
  --bh-text-base-letter-spacing: var(--bh-text-body-md-regular-letter-spacing);
@@ -1315,6 +1192,9 @@
1315
1192
  --bh-textarea-tag-avatar-size: var(--bh-space-3xl-16);
1316
1193
  --bh-textarea-tag-height: var(--bh-space-5xl-24);
1317
1194
  --bh-textarea-width: var(--bh-space-18xl-320);
1195
+ --bh-thinking-reasoning-fade: var(--bh-space-3xl-16);
1196
+ --bh-thinking-reasoning-max-height: 180px;
1197
+ --bh-thinking-reasoning-width: 360px;
1318
1198
  --bh-timeline-grid-width: 1000px;
1319
1199
  --bh-timeline-narrow-width: 600px;
1320
1200
  --bh-timeline-sidebar-width: 240px;
@@ -1344,125 +1224,373 @@
1344
1224
  --bh-z-overlay: 50;
1345
1225
  --bh-z-popover: 20;
1346
1226
  --bh-z-raised: 10;
1347
- --border: var(--bh-border-default);
1348
- --card: var(--bh-bg-raised);
1349
- --card-foreground: var(--bh-content-default);
1350
- --danger-ring: var(--bh-border-focus-danger);
1351
- --destructive: var(--bh-interactive-danger-default);
1352
- --destructive-foreground: var(--bh-content-on-color);
1353
- --destructive-hover: var(--bh-interactive-danger-hover);
1354
- --destructive-pressed: var(--bh-interactive-danger-pressed);
1355
- --destructive-soft: var(--bh-interactive-danger-soft-default);
1356
- --destructive-soft-foreground: var(--bh-content-danger-default);
1357
- --destructive-soft-hover: var(--bh-interactive-danger-soft-hover);
1358
- --destructive-soft-pressed: var(--bh-interactive-danger-soft-pressed);
1359
1227
  --font-sans: var(--bh-font-family);
1360
- --foreground: var(--bh-content-default);
1361
- --ghost: var(--bh-interactive-ghost-default);
1362
- --ghost-hover: var(--bh-interactive-ghost-hover);
1363
- --ghost-pressed: var(--bh-interactive-ghost-pressed);
1364
- --input: var(--bh-border-input);
1365
- --muted: var(--bh-bg-muted);
1366
- --muted-foreground: var(--bh-content-muted);
1367
- --outline: var(--bh-interactive-outlined-default);
1368
- --outline-hover: var(--bh-interactive-outlined-hover);
1369
- --outline-pressed: var(--bh-interactive-outlined-pressed);
1370
- --popover: var(--bh-bg-raised);
1371
- --popover-foreground: var(--bh-content-default);
1372
- --primary: var(--bh-interactive-brand-default);
1373
- --primary-foreground: var(--bh-content-on-brand);
1374
- --primary-hover: var(--bh-interactive-brand-hover);
1375
- --primary-pressed: var(--bh-interactive-brand-pressed);
1376
1228
  --radius: var(--bh-control-default);
1377
1229
  --radius-lg: var(--bh-radius-lg-8);
1378
1230
  --radius-md: var(--bh-radius-md-6);
1379
1231
  --radius-sm: var(--bh-radius-sm-4);
1380
1232
  --radius-xl: var(--bh-radius-xl-10);
1381
- --ring: var(--bh-border-focus);
1382
- --secondary: var(--bh-interactive-secondary-default);
1383
- --secondary-foreground: var(--bh-content-default);
1384
- --secondary-hover: var(--bh-interactive-secondary-hover);
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);
1388
- --shadow-accordion-item: none;
1389
- --shadow-avatar-badge: none;
1390
- --shadow-badge: none;
1391
- --shadow-button: var(--shadow-button-raised);
1392
- --shadow-button-active: var(--shadow-button-raised);
1393
- --shadow-button-danger-focus: var(--shadow-component-danger-focus-ring);
1394
- --shadow-button-focus: var(--shadow-component-focus-ring);
1395
- --shadow-button-group: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-button-group-border), var(--shadow-component-default);
1396
- --shadow-button-group-focus: var(--shadow-button-group), var(--shadow-component-focus-ring);
1397
- --shadow-button-group-focus-ring: var(--shadow-component-focus-ring);
1398
- --shadow-button-hover: var(--shadow-button-raised);
1399
- --shadow-button-raised: var(--shadow-component-raised);
1400
- --shadow-button-secondary: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-button-secondary-border, var(--bh-border-default)), var(--shadow-button-surface);
1401
- --shadow-button-secondary-focus: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-button-secondary-focus-border, var(--bh-border-brand-strong)), var(--shadow-button-surface), var(--shadow-button-focus);
1402
- --shadow-button-soft: inset 0px 1px 0px 0px rgb(255 255 255 / 0);
1403
- --shadow-button-surface: var(--shadow-component-surface);
1404
- --shadow-checkbox: var(--shadow-checkbox-control);
1405
- --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);
1406
- --shadow-checkbox-card-focus: var(--shadow-checkbox-card), var(--shadow-button-focus);
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);
1408
- --shadow-checkbox-focus: var(--shadow-checkbox), var(--shadow-button-focus);
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);
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);
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);
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);
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);
1416
- --shadow-date-month-year-list: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-border-subtle);
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);
1418
- --shadow-date-time-input: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-border-input);
1419
- --shadow-input: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-input-border, var(--bh-border-input)), var(--shadow-component-default);
1420
- --shadow-input-focus-ring: var(--shadow-component-focus-stroke);
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);
1424
- --shadow-pagination-active: var(--shadow-button-raised);
1425
- --shadow-pagination-control: var(--shadow-button-soft);
1426
- --shadow-pagination-focus: var(--shadow-button-focus);
1427
- --shadow-popover: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-popover-border), var(--shadow-lg);
1428
- --shadow-progress-slider-thumb-focus: var(--shadow-component-focus-ring);
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);
1430
- --shadow-radio-card-disabled: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-border-disabled);
1431
- --shadow-radio-card-surface: var(--shadow-component-default);
1432
- --shadow-radio-control: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-radio-control-border, var(--bh-border-input)), var(--shadow-component-default);
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);
1434
- --shadow-select-danger-focus-ring: var(--shadow-component-danger-focus-stroke);
1435
- --shadow-select-focus-ring: var(--shadow-component-focus-stroke);
1436
- --shadow-select-menu: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-select-menu-border), var(--shadow-lg);
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);
1438
- --shadow-sidebar: inset calc(var(--bh-border-width-default) * -1) 0px 0px 0px var(--bh-sidebar-border), var(--shadow-component-surface);
1439
- --shadow-slider-thumb: var(--shadow-md);
1440
- --shadow-slider-thumb-focus: var(--shadow-slider-thumb), var(--shadow-component-focus-ring);
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);
1443
- --shadow-social-button: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-social-button-border, transparent), var(--shadow-component-default);
1444
- --shadow-social-button-focus: var(--shadow-social-button), var(--shadow-component-focus-ring);
1445
- --shadow-social-button-focus-ring: var(--shadow-component-focus-ring);
1446
- --shadow-textarea: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-textarea-border, var(--bh-border-input)), var(--shadow-component-default);
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);
1449
- --soft: var(--bh-interactive-soft-default);
1450
- --soft-hover: var(--bh-interactive-soft-hover);
1451
- --soft-pressed: var(--bh-interactive-soft-pressed);
1452
- --success: var(--bh-bg-success-default);
1453
- --success-foreground: var(--bh-content-on-color);
1454
- --success-hover: var(--bh-bg-success-bold);
1455
- --success-pressed: var(--bh-bg-success-strong);
1456
- --warning: var(--bh-bg-warning-default);
1457
- --warning-foreground: var(--bh-content-on-light);
1458
- --warning-hover: var(--bh-bg-warning-bold);
1459
- --warning-pressed: var(--bh-bg-warning-strong);
1460
- --warning-soft: var(--bh-bg-warning-subtle);
1461
- --warning-soft-foreground: var(--bh-content-warning-default);
1462
- --warning-soft-hover: var(--bh-bg-warning-soft);
1463
1233
  }
1464
1234
 
1465
- /* Banhaten brand theme light token modes: generated from tokens/banhaten.tokens.json. */
1235
+ :root,
1236
+ [data-theme="gray"],
1237
+ [data-theme="blue"],
1238
+ [data-theme="brown"],
1239
+ [data-theme="orange"],
1240
+ [data-theme="green"],
1241
+ [data-theme="purple"],
1242
+ [data-theme="teal"] {
1243
+ --bh-alpha-alpha-transparent: rgb(255 255 255 / 0);
1244
+ --bh-alpha-alpha-transparent-to-100: rgb(255 255 255 / 0);
1245
+ --bh-alpha-alpha-transparent-to-500: rgb(255 255 255 / 0);
1246
+ --bh-amber-100: #FFE7BE;
1247
+ --bh-amber-50: #FFF2DB;
1248
+ --bh-amber-700: #AC4C03;
1249
+ --bh-aqua-100: #BBFAEA;
1250
+ --bh-aqua-200: #87F0D5;
1251
+ --bh-aqua-50: #DBFFF6;
1252
+ --bh-aqua-600: #03906E;
1253
+ --bh-aqua-700: #076F57;
1254
+ --bh-bg-accent-amber-default: var(--bh-amber-500);
1255
+ --bh-bg-accent-amber-soft: var(--bh-amber-100);
1256
+ --bh-bg-accent-amber-subtle: var(--bh-amber-50);
1257
+ --bh-bg-accent-aqua-soft: var(--bh-aqua-100);
1258
+ --bh-bg-accent-aqua-subtle: var(--bh-aqua-50);
1259
+ --bh-bg-accent-blue-soft: var(--bh-blue-100);
1260
+ --bh-bg-accent-blue-subtle: var(--bh-blue-50);
1261
+ --bh-bg-accent-fuchsia-soft: var(--bh-fuchsia-100);
1262
+ --bh-bg-accent-fuchsia-subtle: var(--bh-fuchsia-50);
1263
+ --bh-bg-accent-golden-bold: var(--bh-golden-600);
1264
+ --bh-bg-accent-golden-default: var(--bh-golden-400);
1265
+ --bh-bg-accent-golden-soft: var(--bh-golden-100);
1266
+ --bh-bg-accent-golden-subtle: var(--bh-golden-50);
1267
+ --bh-bg-accent-green-soft: var(--bh-green-100);
1268
+ --bh-bg-accent-green-subtle: var(--bh-green-50);
1269
+ --bh-bg-accent-lime-soft: var(--bh-lime-100);
1270
+ --bh-bg-accent-lime-subtle: var(--bh-lime-50);
1271
+ --bh-bg-accent-purple-soft: var(--bh-purple-100);
1272
+ --bh-bg-accent-purple-subtle: var(--bh-purple-50);
1273
+ --bh-bg-accent-red-default: var(--bh-red-500);
1274
+ --bh-bg-accent-red-soft: var(--bh-red-100);
1275
+ --bh-bg-accent-red-subtle: var(--bh-red-50);
1276
+ --bh-bg-accent-rose-soft: var(--bh-rose-100);
1277
+ --bh-bg-accent-rose-subtle: var(--bh-rose-50);
1278
+ --bh-bg-accent-sky-soft: var(--bh-sky-100);
1279
+ --bh-bg-accent-sky-subtle: var(--bh-sky-50);
1280
+ --bh-bg-always-dark: var(--bh-colors-neutral-900);
1281
+ --bh-bg-brand-bold: var(--bh-colors-brand-surface-bold-light);
1282
+ --bh-bg-brand-default: var(--bh-colors-brand-surface-base);
1283
+ --bh-bg-brand-soft: var(--bh-colors-brand-surface-soft-light);
1284
+ --bh-bg-brand-strong: var(--bh-colors-brand-surface-strong-light);
1285
+ --bh-bg-brand-subtle: var(--bh-colors-brand-surface-subtle-light);
1286
+ --bh-bg-danger-default: var(--bh-red-500);
1287
+ --bh-bg-danger-soft: var(--bh-red-100);
1288
+ --bh-bg-danger-subtle: var(--bh-red-50);
1289
+ --bh-bg-default: var(--bh-base-white);
1290
+ --bh-bg-default-hover: var(--bh-colors-neutral-50);
1291
+ --bh-bg-dim: var(--bh-colors-neutral-200);
1292
+ --bh-bg-dim-hover: var(--bh-colors-neutral-300);
1293
+ --bh-bg-disabled: var(--bh-colors-neutral-50);
1294
+ --bh-bg-divider: var(--bh-colors-neutral-alpha-300);
1295
+ --bh-bg-grouped: var(--bh-colors-neutral-100);
1296
+ --bh-bg-grouped-surface: var(--bh-base-white);
1297
+ --bh-bg-info-bold: var(--bh-blue-600);
1298
+ --bh-bg-info-default: var(--bh-blue-500);
1299
+ --bh-bg-info-soft: var(--bh-blue-100);
1300
+ --bh-bg-info-strong: var(--bh-blue-700);
1301
+ --bh-bg-info-subtle: var(--bh-blue-50);
1302
+ --bh-bg-inverse: var(--bh-colors-neutral-950);
1303
+ --bh-bg-muted: var(--bh-colors-neutral-100);
1304
+ --bh-bg-muted-hover: var(--bh-colors-neutral-200);
1305
+ --bh-bg-neutral-bold: var(--bh-colors-neutral-800);
1306
+ --bh-bg-neutral-default: var(--bh-colors-neutral-700);
1307
+ --bh-bg-neutral-medium: var(--bh-colors-neutral-500);
1308
+ --bh-bg-neutral-soft: var(--bh-colors-neutral-alpha-200);
1309
+ --bh-bg-neutral-subtle: var(--bh-colors-neutral-alpha-100);
1310
+ --bh-bg-raised: var(--bh-base-white);
1311
+ --bh-bg-raised-hover: var(--bh-colors-neutral-50);
1312
+ --bh-bg-raised-subtle: var(--bh-colors-neutral-50);
1313
+ --bh-bg-subtle: var(--bh-colors-neutral-50);
1314
+ --bh-bg-subtle-alpha: var(--bh-colors-neutral-50);
1315
+ --bh-bg-subtle-hover: var(--bh-colors-neutral-100);
1316
+ --bh-bg-success-bold: var(--bh-green-600);
1317
+ --bh-bg-success-default: var(--bh-green-500);
1318
+ --bh-bg-success-soft: var(--bh-green-100);
1319
+ --bh-bg-success-strong: var(--bh-green-700);
1320
+ --bh-bg-success-subtle: var(--bh-green-50);
1321
+ --bh-bg-warning-bold: var(--bh-amber-600);
1322
+ --bh-bg-warning-default: var(--bh-amber-500);
1323
+ --bh-bg-warning-soft: var(--bh-amber-100);
1324
+ --bh-bg-warning-strong: var(--bh-amber-700);
1325
+ --bh-bg-warning-subtle: var(--bh-amber-50);
1326
+ --bh-blue-100: #D6EAFF;
1327
+ --bh-blue-50: #EBF5FF;
1328
+ --bh-blue-700: #1D49BF;
1329
+ --bh-border-accent-amber-subtle: var(--bh-amber-300);
1330
+ --bh-border-accent-aqua-subtle: var(--bh-aqua-200);
1331
+ --bh-border-accent-blue-subtle: var(--bh-blue-200);
1332
+ --bh-border-accent-fuchsia-subtle: var(--bh-fuchsia-200);
1333
+ --bh-border-accent-golden-strong: var(--bh-golden-600);
1334
+ --bh-border-accent-golden-subtle: var(--bh-golden-300);
1335
+ --bh-border-accent-green-subtle: var(--bh-green-200);
1336
+ --bh-border-accent-lime-strong: var(--bh-lime-600);
1337
+ --bh-border-accent-lime-subtle: var(--bh-lime-200);
1338
+ --bh-border-accent-purple-subtle: var(--bh-purple-200);
1339
+ --bh-border-accent-red-subtle: var(--bh-red-200);
1340
+ --bh-border-accent-rose-subtle: var(--bh-rose-200);
1341
+ --bh-border-accent-sky-subtle: var(--bh-sky-200);
1342
+ --bh-border-brand-strong: var(--bh-colors-brand-border-border-strong);
1343
+ --bh-border-brand-subtle: var(--bh-colors-brand-border-border-subtle);
1344
+ --bh-border-danger-subtle: var(--bh-red-300);
1345
+ --bh-border-default: var(--bh-colors-neutral-alpha-400);
1346
+ --bh-border-disabled: var(--bh-colors-neutral-alpha-200);
1347
+ --bh-border-focus: var(--bh-colors-brand-focused-light);
1348
+ --bh-border-focus-danger: var(--bh-red-400);
1349
+ --bh-border-info-subtle: var(--bh-blue-200);
1350
+ --bh-border-input: var(--bh-colors-neutral-alpha-400);
1351
+ --bh-border-inverse: var(--bh-base-white);
1352
+ --bh-border-inverse-subtle: rgb(255 255 255 / 0.15);
1353
+ --bh-border-strong: var(--bh-colors-neutral-800);
1354
+ --bh-border-subtle: var(--bh-colors-neutral-alpha-300);
1355
+ --bh-border-success-subtle: var(--bh-green-200);
1356
+ --bh-border-warning-subtle: var(--bh-amber-300);
1357
+ --bh-chart-categorical-2: var(--bh-purple-700);
1358
+ --bh-chart-categorical-3: var(--bh-amber-500);
1359
+ --bh-chart-categorical-4: var(--bh-rose-700);
1360
+ --bh-chart-categorical-5: var(--bh-blue-900);
1361
+ --bh-chart-categorical-7: var(--bh-rose-950);
1362
+ --bh-chart-categorical-8: var(--bh-amber-700);
1363
+ --bh-chart-neutral-default: var(--bh-colors-neutral-400);
1364
+ --bh-content-accent-amber-default: var(--bh-amber-600);
1365
+ --bh-content-accent-amber-strong: var(--bh-amber-800);
1366
+ --bh-content-accent-aqua-default: var(--bh-aqua-600);
1367
+ --bh-content-accent-aqua-strong: var(--bh-aqua-700);
1368
+ --bh-content-accent-blue-default: var(--bh-blue-600);
1369
+ --bh-content-accent-blue-strong: var(--bh-blue-700);
1370
+ --bh-content-accent-fuchsia-default: var(--bh-fuchsia-600);
1371
+ --bh-content-accent-fuchsia-strong: var(--bh-fuchsia-700);
1372
+ --bh-content-accent-golden-default: var(--bh-golden-700);
1373
+ --bh-content-accent-golden-strong: var(--bh-golden-800);
1374
+ --bh-content-accent-green-default: var(--bh-green-600);
1375
+ --bh-content-accent-green-strong: var(--bh-green-700);
1376
+ --bh-content-accent-lime-default: var(--bh-lime-600);
1377
+ --bh-content-accent-lime-strong: var(--bh-lime-700);
1378
+ --bh-content-accent-purple-default: var(--bh-purple-600);
1379
+ --bh-content-accent-purple-strong: var(--bh-purple-700);
1380
+ --bh-content-accent-red-default: var(--bh-red-600);
1381
+ --bh-content-accent-red-strong: var(--bh-red-700);
1382
+ --bh-content-accent-rose-default: var(--bh-rose-600);
1383
+ --bh-content-accent-rose-strong: var(--bh-rose-700);
1384
+ --bh-content-accent-sky-default: var(--bh-sky-600);
1385
+ --bh-content-accent-sky-strong: var(--bh-sky-700);
1386
+ --bh-content-brand-default: var(--bh-colors-brand-content-light);
1387
+ --bh-content-brand-strong: var(--bh-colors-brand-content-strong-light);
1388
+ --bh-content-danger-default: var(--bh-red-600);
1389
+ --bh-content-danger-strong: var(--bh-red-700);
1390
+ --bh-content-default: var(--bh-colors-neutral-950);
1391
+ --bh-content-disabled: var(--bh-colors-neutral-600);
1392
+ --bh-content-information-default: var(--bh-blue-600);
1393
+ --bh-content-information-strong: var(--bh-blue-700);
1394
+ --bh-content-inverse: var(--bh-base-white);
1395
+ --bh-content-link: var(--bh-colors-brand-link-light);
1396
+ --bh-content-link-hover: var(--bh-colors-brand-link-hover-light);
1397
+ --bh-content-muted: #627084;
1398
+ --bh-content-on-brand: var(--bh-colors-brand-color-on-brand-light);
1399
+ --bh-content-on-light: var(--bh-colors-neutral-950);
1400
+ --bh-content-on-neutral: var(--bh-base-white);
1401
+ --bh-content-on-success: var(--bh-base-white);
1402
+ --bh-content-on-warning: var(--bh-base-white);
1403
+ --bh-content-subtle: var(--bh-colors-neutral-800);
1404
+ --bh-content-success-default: var(--bh-green-600);
1405
+ --bh-content-success-strong: var(--bh-green-700);
1406
+ --bh-content-warning-default: var(--bh-amber-600);
1407
+ --bh-content-warning-strong: var(--bh-amber-700);
1408
+ --bh-fuchsia-100: #FED6FF;
1409
+ --bh-fuchsia-200: #FEB9FF;
1410
+ --bh-fuchsia-50: #FFEBFF;
1411
+ --bh-fuchsia-600: #C20AC5;
1412
+ --bh-fuchsia-700: #92089F;
1413
+ --bh-golden-100: #FFEDAE;
1414
+ --bh-golden-300: #FAD658;
1415
+ --bh-golden-50: #FFF5D1;
1416
+ --bh-golden-600: #C98B04;
1417
+ --bh-golden-700: #A96C03;
1418
+ --bh-green-100: #BCFAD2;
1419
+ --bh-green-200: #89EBAC;
1420
+ --bh-green-50: #DBFFE8;
1421
+ --bh-green-700: #07712C;
1422
+ --bh-interactive-brand-default: var(--bh-colors-brand-interactive-default);
1423
+ --bh-interactive-brand-disabled: var(--bh-colors-neutral-alpha-100);
1424
+ --bh-interactive-brand-hover: var(--bh-colors-brand-interactive-hover);
1425
+ --bh-interactive-brand-pressed: var(--bh-colors-brand-interactive-pressed);
1426
+ --bh-interactive-checkbox-content: var(--bh-base-white);
1427
+ --bh-interactive-checkbox-default: var(--bh-colors-brand-checkbox-bg-default);
1428
+ --bh-interactive-checkbox-hover: var(--bh-colors-brand-checkbox-bg-hover);
1429
+ --bh-interactive-danger-default: var(--bh-red-500);
1430
+ --bh-interactive-danger-disabled: var(--bh-colors-neutral-alpha-100);
1431
+ --bh-interactive-danger-hover: var(--bh-red-600);
1432
+ --bh-interactive-danger-pressed: var(--bh-red-500);
1433
+ --bh-interactive-danger-soft-default: var(--bh-red-50);
1434
+ --bh-interactive-danger-soft-disabled: var(--bh-colors-neutral-alpha-100);
1435
+ --bh-interactive-danger-soft-hover: var(--bh-red-100);
1436
+ --bh-interactive-danger-soft-pressed: var(--bh-red-50);
1437
+ --bh-interactive-ghost-active: var(--bh-colors-neutral-alpha-100);
1438
+ --bh-interactive-ghost-default: rgb(0 0 0 / 0);
1439
+ --bh-interactive-ghost-disabled: rgb(0 0 0 / 0);
1440
+ --bh-interactive-ghost-hover: var(--bh-colors-neutral-alpha-50);
1441
+ --bh-interactive-ghost-pressed: var(--bh-colors-neutral-alpha-100);
1442
+ --bh-interactive-indicator-default: var(--bh-colors-brand-indicator);
1443
+ --bh-interactive-input-default: var(--bh-base-white);
1444
+ --bh-interactive-input-disabled: var(--bh-colors-neutral-alpha-50);
1445
+ --bh-interactive-input-soft: var(--bh-colors-neutral-alpha-100);
1446
+ --bh-interactive-input-soft-disabled: var(--bh-colors-neutral-alpha-50);
1447
+ --bh-interactive-outlined-default: rgb(0 0 0 / 0);
1448
+ --bh-interactive-outlined-disabled: rgb(0 0 0 / 0);
1449
+ --bh-interactive-outlined-hover: var(--bh-colors-neutral-alpha-50);
1450
+ --bh-interactive-outlined-pressed: var(--bh-colors-neutral-alpha-100);
1451
+ --bh-interactive-radiobutton-default: var(--bh-colors-brand-radiobutton-bg-default);
1452
+ --bh-interactive-radiobutton-hover: var(--bh-colors-brand-radiobutton-bg-hover);
1453
+ --bh-interactive-secondary-default: var(--bh-colors-neutral-50);
1454
+ --bh-interactive-secondary-disabled: var(--bh-colors-neutral-alpha-100);
1455
+ --bh-interactive-secondary-hover: var(--bh-colors-neutral-100);
1456
+ --bh-interactive-secondary-pressed: var(--bh-colors-neutral-200);
1457
+ --bh-interactive-soft-default: var(--bh-colors-neutral-alpha-100);
1458
+ --bh-interactive-soft-disabled: var(--bh-colors-neutral-alpha-100);
1459
+ --bh-interactive-soft-hover: var(--bh-colors-neutral-alpha-200);
1460
+ --bh-interactive-soft-pressed: var(--bh-colors-neutral-alpha-300);
1461
+ --bh-interactive-success-default: var(--bh-green-700);
1462
+ --bh-interactive-success-hover: var(--bh-green-800);
1463
+ --bh-interactive-success-pressed: var(--bh-green-900);
1464
+ --bh-interactive-switch-active-disabled: var(--bh-green-100);
1465
+ --bh-interactive-switch-default: var(--bh-colors-neutral-400);
1466
+ --bh-interactive-switch-disabled: var(--bh-colors-neutral-alpha-100);
1467
+ --bh-interactive-switch-handle-disabled: var(--bh-colors-neutral-50);
1468
+ --bh-interactive-switch-hover: var(--bh-colors-neutral-500);
1469
+ --bh-interactive-table-header: var(--bh-colors-neutral-alpha-50);
1470
+ --bh-interactive-warning-default: var(--bh-amber-700);
1471
+ --bh-interactive-warning-hover: var(--bh-amber-800);
1472
+ --bh-interactive-warning-pressed: var(--bh-amber-900);
1473
+ --bh-lime-100: #E8FCA8;
1474
+ --bh-lime-200: #D4F273;
1475
+ --bh-lime-50: #F4FFD1;
1476
+ --bh-lime-600: #7CA203;
1477
+ --bh-lime-700: #668303;
1478
+ --bh-purple-100: #F0DEFF;
1479
+ --bh-purple-200: #E3C3FF;
1480
+ --bh-purple-50: #F7EDFF;
1481
+ --bh-purple-600: #8216DB;
1482
+ --bh-purple-700: #610FAD;
1483
+ --bh-red-100: #FFDBDF;
1484
+ --bh-red-200: #FFBFC6;
1485
+ --bh-red-50: #FFEDEF;
1486
+ --bh-rose-100: #FFD6E7;
1487
+ --bh-rose-50: #FFEBF3;
1488
+ --bh-rose-700: #A7094D;
1489
+ --bh-rose-950: #44071F;
1490
+ --bh-sky-100: #CFF0FF;
1491
+ --bh-sky-200: #A4E2FF;
1492
+ --bh-sky-50: #EDF9FF;
1493
+ --bh-sky-700: #036EA4;
1494
+ --elevation-01: 0px 0px 0px 1px rgb(0 0 0 / 0.06), inset 0px 0px 0px 1px rgb(255 255 255 / 0);
1495
+ --elevation-02: 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);
1496
+ --elevation-03: 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);
1497
+ --elevation-04: 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);
1498
+ --elevation-05: 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);
1499
+ --elevation-06: 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);
1500
+ --elevation-07: 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);
1501
+ --elevation-component-default: 0px 1px 2px 0px rgb(15 17 20 / 0.05), inset 0px -1px 0px 0px rgb(0 0 0 / 0.08);
1502
+ --elevation-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);
1503
+ --elevation-component-surface: inset 0px -1px 0px 0px rgb(0 0 0 / 0.08), 0px 1px 2px 0px rgb(15 17 20 / 0.05);
1504
+ }
1505
+
1506
+ :root,
1507
+ [data-theme="gray"],
1508
+ [data-theme="blue"],
1509
+ [data-theme="brown"],
1510
+ [data-theme="green"],
1511
+ [data-theme="purple"],
1512
+ [data-theme="teal"] {
1513
+ --bh-colors-brand-color-on-brand-light: var(--bh-base-white);
1514
+ }
1515
+
1516
+ :root,
1517
+ [data-theme="gray"],
1518
+ [data-theme="blue"] {
1519
+ --bh-colors-neutral-100: var(--bh-gray-100);
1520
+ --bh-colors-neutral-200: var(--bh-gray-200);
1521
+ --bh-colors-neutral-300: var(--bh-gray-300);
1522
+ --bh-colors-neutral-400: var(--bh-gray-400);
1523
+ --bh-colors-neutral-50: var(--bh-gray-50);
1524
+ --bh-colors-neutral-500: var(--bh-gray-500);
1525
+ --bh-colors-neutral-600: var(--bh-gray-600);
1526
+ --bh-colors-neutral-700: var(--bh-gray-700);
1527
+ --bh-colors-neutral-800: var(--bh-gray-800);
1528
+ --bh-colors-neutral-900: var(--bh-gray-900);
1529
+ --bh-colors-neutral-950: var(--bh-gray-950);
1530
+ --bh-colors-neutral-alpha-100: var(--bh-gray-alpha-100);
1531
+ --bh-colors-neutral-alpha-200: var(--bh-gray-alpha-200);
1532
+ --bh-colors-neutral-alpha-300: var(--bh-gray-alpha-300);
1533
+ --bh-colors-neutral-alpha-400: var(--bh-gray-alpha-400);
1534
+ --bh-colors-neutral-alpha-50: var(--bh-gray-alpha-50);
1535
+ --bh-colors-neutral-alpha-500: var(--bh-gray-alpha-500);
1536
+ --bh-gray-100: #F5F5F5;
1537
+ --bh-gray-200: #F0F0F0;
1538
+ --bh-gray-300: #EBEBEB;
1539
+ --bh-gray-400: #DBDBDB;
1540
+ --bh-gray-50: #FAFAFA;
1541
+ --bh-gray-500: #BFBFBF;
1542
+ --bh-gray-600: #ADADAD;
1543
+ --bh-gray-700: #8C8C8C;
1544
+ --bh-gray-800: #595959;
1545
+ --bh-gray-900: #2E2E2E;
1546
+ --bh-gray-950: #1A1A1A;
1547
+ --bh-gray-alpha-100: rgb(0 0 0 / 0.06);
1548
+ --bh-gray-alpha-200: rgb(0 0 0 / 0.08);
1549
+ --bh-gray-alpha-300: rgb(0 0 0 / 0.1);
1550
+ --bh-gray-alpha-400: rgb(0 0 0 / 0.14);
1551
+ --bh-gray-alpha-50: rgb(0 0 0 / 0.04);
1552
+ --bh-gray-alpha-500: rgb(0 0 0 / 0.25);
1553
+ }
1554
+
1555
+ :root,
1556
+ [data-theme="gray"],
1557
+ [data-theme="blue"],
1558
+ [data-theme="brown"] {
1559
+ --bh-colors-neutral-alpha-dark-100: var(--bh-gray-dark-alpha-100);
1560
+ --bh-colors-neutral-alpha-dark-200: var(--bh-gray-dark-alpha-200);
1561
+ --bh-colors-neutral-alpha-dark-300: var(--bh-gray-dark-alpha-300);
1562
+ --bh-colors-neutral-alpha-dark-400: var(--bh-gray-dark-alpha-400);
1563
+ --bh-colors-neutral-alpha-dark-50: var(--bh-gray-dark-alpha-50);
1564
+ --bh-colors-neutral-alpha-dark-500: var(--bh-gray-dark-alpha-500);
1565
+ --bh-colors-neutral-dark-100: var(--bh-gray-dark-100);
1566
+ --bh-colors-neutral-dark-200: var(--bh-gray-dark-200);
1567
+ --bh-colors-neutral-dark-300: var(--bh-gray-dark-300);
1568
+ --bh-colors-neutral-dark-400: var(--bh-gray-dark-400);
1569
+ --bh-colors-neutral-dark-50: var(--bh-gray-dark-50);
1570
+ --bh-colors-neutral-dark-500: var(--bh-gray-dark-500);
1571
+ --bh-colors-neutral-dark-600: var(--bh-gray-dark-600);
1572
+ --bh-colors-neutral-dark-700: var(--bh-gray-dark-700);
1573
+ --bh-colors-neutral-dark-800: var(--bh-gray-dark-800);
1574
+ --bh-colors-neutral-dark-900: var(--bh-gray-dark-900);
1575
+ --bh-colors-neutral-dark-950: var(--bh-gray-dark-950);
1576
+ --bh-gray-dark-100: #141414;
1577
+ --bh-gray-dark-200: #1A1A1A;
1578
+ --bh-gray-dark-300: #242424;
1579
+ --bh-gray-dark-400: #3B3B3B;
1580
+ --bh-gray-dark-50: #0E0E0F;
1581
+ --bh-gray-dark-500: #4D4D4D;
1582
+ --bh-gray-dark-600: #5E5E5E;
1583
+ --bh-gray-dark-700: #7A7A7A;
1584
+ --bh-gray-dark-800: #A3A3A3;
1585
+ --bh-gray-dark-900: #E8E8E8;
1586
+ --bh-gray-dark-950: #FCFCFC;
1587
+ --bh-gray-dark-alpha-100: rgb(255 255 255 / 0.08);
1588
+ --bh-gray-dark-alpha-200: rgb(255 255 255 / 0.11);
1589
+ --bh-gray-dark-alpha-300: rgb(255 255 255 / 0.12);
1590
+ --bh-gray-dark-alpha-400: rgb(255 255 255 / 0.19);
1591
+ --bh-gray-dark-alpha-50: rgb(255 255 255 / 0.05);
1592
+ --bh-gray-dark-alpha-500: rgb(255 255 255 / 0.3);
1593
+ }
1466
1594
 
1467
1595
  [data-theme="blue"] {
1468
1596
  --bh-blue-300: #8DBDFF;
@@ -1477,7 +1605,6 @@
1477
1605
  --bh-colors-brand-checkbox-bg-default-dark: var(--bh-blue-500);
1478
1606
  --bh-colors-brand-checkbox-bg-hover: var(--bh-blue-600);
1479
1607
  --bh-colors-brand-checkbox-bg-hover-dark: var(--bh-blue-600);
1480
- --bh-colors-brand-color-on-brand-dark: var(--bh-base-white);
1481
1608
  --bh-colors-brand-content-dark: var(--bh-blue-500);
1482
1609
  --bh-colors-brand-content-light: var(--bh-blue-600);
1483
1610
  --bh-colors-brand-content-strong-dark: var(--bh-blue-400);
@@ -1513,6 +1640,14 @@
1513
1640
  --bh-derived-blue-550-reviewed: #2B6BED;
1514
1641
  }
1515
1642
 
1643
+ [data-theme="blue"],
1644
+ [data-theme="brown"],
1645
+ [data-theme="green"],
1646
+ [data-theme="purple"],
1647
+ [data-theme="teal"] {
1648
+ --bh-colors-brand-color-on-brand-dark: var(--bh-base-white);
1649
+ }
1650
+
1516
1651
  [data-theme="brown"] {
1517
1652
  --bh-amber-400: #FFA136;
1518
1653
  --bh-amber-alpha10: rgb(238 115 0 / 0.1);
@@ -1540,7 +1675,6 @@
1540
1675
  --bh-colors-brand-checkbox-bg-default-dark: var(--bh-amber-600);
1541
1676
  --bh-colors-brand-checkbox-bg-hover: var(--bh-amber-700);
1542
1677
  --bh-colors-brand-checkbox-bg-hover-dark: var(--bh-amber-700);
1543
- --bh-colors-brand-color-on-brand-dark: var(--bh-base-white);
1544
1678
  --bh-colors-brand-content-dark: var(--bh-amber-500);
1545
1679
  --bh-colors-brand-content-light: var(--bh-amber-700);
1546
1680
  --bh-colors-brand-content-strong-dark: var(--bh-amber-400);
@@ -1635,6 +1769,20 @@
1635
1769
  --bh-colors-brand-surface-strong-light: var(--bh-orange-900);
1636
1770
  --bh-colors-brand-surface-subtle-dark: var(--bh-orange-alpha10);
1637
1771
  --bh-colors-brand-surface-subtle-light: var(--bh-orange-50);
1772
+ --bh-orange-100: #FFEDD5;
1773
+ --bh-orange-300: #FDBA74;
1774
+ --bh-orange-400: #FB923C;
1775
+ --bh-orange-50: #FFF7ED;
1776
+ --bh-orange-500: #F97316;
1777
+ --bh-orange-600: #EA580C;
1778
+ --bh-orange-700: #C2410C;
1779
+ --bh-orange-800: #9A3412;
1780
+ --bh-orange-900: #7C2D12;
1781
+ --bh-orange-alpha10: rgb(249 115 22 / 0.1);
1782
+ }
1783
+
1784
+ [data-theme="orange"],
1785
+ [data-theme="teal"] {
1638
1786
  --bh-colors-neutral-100: var(--bh-slate-100);
1639
1787
  --bh-colors-neutral-200: var(--bh-slate-200);
1640
1788
  --bh-colors-neutral-300: var(--bh-slate-300);
@@ -1669,16 +1817,6 @@
1669
1817
  --bh-colors-neutral-dark-800: var(--bh-slate-dark-800);
1670
1818
  --bh-colors-neutral-dark-900: var(--bh-slate-dark-900);
1671
1819
  --bh-colors-neutral-dark-950: var(--bh-slate-dark-950);
1672
- --bh-orange-100: #FFEDD5;
1673
- --bh-orange-300: #FDBA74;
1674
- --bh-orange-400: #FB923C;
1675
- --bh-orange-50: #FFF7ED;
1676
- --bh-orange-500: #F97316;
1677
- --bh-orange-600: #EA580C;
1678
- --bh-orange-700: #C2410C;
1679
- --bh-orange-800: #9A3412;
1680
- --bh-orange-900: #7C2D12;
1681
- --bh-orange-alpha10: rgb(249 115 22 / 0.1);
1682
1820
  --bh-slate-100: #F2F4F5;
1683
1821
  --bh-slate-200: #EBEEF0;
1684
1822
  --bh-slate-300: #E6EBF0;
@@ -1724,7 +1862,6 @@
1724
1862
  --bh-colors-brand-checkbox-bg-default-dark: var(--bh-derived-green-600-dark-reviewed);
1725
1863
  --bh-colors-brand-checkbox-bg-hover: var(--bh-emerald-800);
1726
1864
  --bh-colors-brand-checkbox-bg-hover-dark: var(--bh-emerald-800);
1727
- --bh-colors-brand-color-on-brand-dark: var(--bh-base-white);
1728
1865
  --bh-colors-brand-content-dark: var(--bh-emerald-500);
1729
1866
  --bh-colors-brand-content-light: var(--bh-emerald-700);
1730
1867
  --bh-colors-brand-content-strong-dark: var(--bh-emerald-400);
@@ -1847,7 +1984,6 @@
1847
1984
  --bh-colors-brand-checkbox-bg-default-dark: var(--bh-violet-600);
1848
1985
  --bh-colors-brand-checkbox-bg-hover: var(--bh-violet-800);
1849
1986
  --bh-colors-brand-checkbox-bg-hover-dark: var(--bh-violet-700);
1850
- --bh-colors-brand-color-on-brand-dark: var(--bh-base-white);
1851
1987
  --bh-colors-brand-content-dark: var(--bh-violet-500);
1852
1988
  --bh-colors-brand-content-light: var(--bh-violet-700);
1853
1989
  --bh-colors-brand-content-strong-dark: var(--bh-violet-400);
@@ -1969,108 +2105,39 @@
1969
2105
  --bh-colors-brand-checkbox-bg-default-dark: var(--bh-derived-teal-600-dark-reviewed);
1970
2106
  --bh-colors-brand-checkbox-bg-hover: var(--bh-teal-800);
1971
2107
  --bh-colors-brand-checkbox-bg-hover-dark: var(--bh-teal-800);
1972
- --bh-colors-brand-color-on-brand-dark: var(--bh-base-white);
1973
2108
  --bh-colors-brand-content-dark: var(--bh-teal-500);
1974
2109
  --bh-colors-brand-content-light: var(--bh-teal-700);
1975
2110
  --bh-colors-brand-content-strong-dark: var(--bh-teal-300);
1976
- --bh-colors-brand-content-strong-light: var(--bh-teal-800);
1977
- --bh-colors-brand-focused-dark: var(--bh-teal-300);
1978
- --bh-colors-brand-focused-light: var(--bh-teal-600);
1979
- --bh-colors-brand-indicator: var(--bh-teal-600);
1980
- --bh-colors-brand-indicator-dark: var(--bh-teal-500);
1981
- --bh-colors-brand-interactive-default: var(--bh-teal-700);
1982
- --bh-colors-brand-interactive-default-dark: var(--bh-derived-teal-600-dark-reviewed);
1983
- --bh-colors-brand-interactive-hover: var(--bh-teal-800);
1984
- --bh-colors-brand-interactive-hover-dark: var(--bh-teal-800);
1985
- --bh-colors-brand-interactive-pressed: var(--bh-teal-900);
1986
- --bh-colors-brand-interactive-pressed-dark: var(--bh-derived-teal-600-dark-reviewed);
1987
- --bh-colors-brand-link-dark: var(--bh-teal-500);
1988
- --bh-colors-brand-link-hover-dark: var(--bh-teal-300);
1989
- --bh-colors-brand-link-hover-light: var(--bh-teal-800);
1990
- --bh-colors-brand-link-light: var(--bh-teal-700);
1991
- --bh-colors-brand-radiobutton-bg-default: var(--bh-teal-700);
1992
- --bh-colors-brand-radiobutton-bg-default-dark: var(--bh-derived-teal-600-dark-reviewed);
1993
- --bh-colors-brand-radiobutton-bg-hover: var(--bh-teal-800);
1994
- --bh-colors-brand-radiobutton-bg-hover-dark: var(--bh-teal-800);
1995
- --bh-colors-brand-surface-base: var(--bh-teal-700);
1996
- --bh-colors-brand-surface-base-dark: var(--bh-derived-teal-600-dark-reviewed);
1997
- --bh-colors-brand-surface-bold-dark: var(--bh-teal-700);
1998
- --bh-colors-brand-surface-bold-light: var(--bh-teal-800);
1999
- --bh-colors-brand-surface-soft-dark: var(--bh-teal-900);
2000
- --bh-colors-brand-surface-soft-light: var(--bh-teal-100);
2001
- --bh-colors-brand-surface-strong-dark: var(--bh-teal-900);
2002
- --bh-colors-brand-surface-strong-light: var(--bh-teal-900);
2003
- --bh-colors-brand-surface-subtle-dark: var(--bh-teal-alpha10);
2004
- --bh-colors-brand-surface-subtle-light: var(--bh-teal-50);
2005
- --bh-colors-neutral-100: var(--bh-slate-100);
2006
- --bh-colors-neutral-200: var(--bh-slate-200);
2007
- --bh-colors-neutral-300: var(--bh-slate-300);
2008
- --bh-colors-neutral-400: var(--bh-slate-400);
2009
- --bh-colors-neutral-50: var(--bh-slate-50);
2010
- --bh-colors-neutral-500: var(--bh-slate-500);
2011
- --bh-colors-neutral-600: var(--bh-slate-600);
2012
- --bh-colors-neutral-700: var(--bh-slate-700);
2013
- --bh-colors-neutral-800: var(--bh-slate-800);
2014
- --bh-colors-neutral-900: var(--bh-slate-900);
2015
- --bh-colors-neutral-950: var(--bh-slate-950);
2016
- --bh-colors-neutral-alpha-100: var(--bh-slate-alpha-100);
2017
- --bh-colors-neutral-alpha-200: var(--bh-slate-alpha-200);
2018
- --bh-colors-neutral-alpha-300: var(--bh-slate-alpha-300);
2019
- --bh-colors-neutral-alpha-400: var(--bh-slate-alpha-400);
2020
- --bh-colors-neutral-alpha-50: var(--bh-slate-alpha-50);
2021
- --bh-colors-neutral-alpha-500: var(--bh-slate-alpha-500);
2022
- --bh-colors-neutral-alpha-dark-100: var(--bh-slate-alpha-dark-100);
2023
- --bh-colors-neutral-alpha-dark-200: var(--bh-slate-alpha-dark-200);
2024
- --bh-colors-neutral-alpha-dark-300: var(--bh-slate-alpha-dark-300);
2025
- --bh-colors-neutral-alpha-dark-400: var(--bh-slate-alpha-dark-400);
2026
- --bh-colors-neutral-alpha-dark-50: var(--bh-slate-alpha-dark-50);
2027
- --bh-colors-neutral-alpha-dark-500: var(--bh-slate-alpha-dark-500);
2028
- --bh-colors-neutral-dark-100: var(--bh-slate-dark-100);
2029
- --bh-colors-neutral-dark-200: var(--bh-slate-dark-200);
2030
- --bh-colors-neutral-dark-300: var(--bh-slate-dark-300);
2031
- --bh-colors-neutral-dark-400: var(--bh-slate-dark-400);
2032
- --bh-colors-neutral-dark-50: var(--bh-slate-dark-50);
2033
- --bh-colors-neutral-dark-500: var(--bh-slate-dark-500);
2034
- --bh-colors-neutral-dark-600: var(--bh-slate-dark-600);
2035
- --bh-colors-neutral-dark-700: var(--bh-slate-dark-700);
2036
- --bh-colors-neutral-dark-800: var(--bh-slate-dark-800);
2037
- --bh-colors-neutral-dark-900: var(--bh-slate-dark-900);
2038
- --bh-colors-neutral-dark-950: var(--bh-slate-dark-950);
2039
- --bh-derived-teal-600-dark-reviewed: #0E8278;
2040
- --bh-slate-100: #F2F4F5;
2041
- --bh-slate-200: #EBEEF0;
2042
- --bh-slate-300: #E6EBF0;
2043
- --bh-slate-400: #D8E0E8;
2044
- --bh-slate-50: #F9FBFC;
2045
- --bh-slate-500: #C3D0DE;
2046
- --bh-slate-600: #ABB8C7;
2047
- --bh-slate-700: #7F8C9E;
2048
- --bh-slate-800: #4E596E;
2049
- --bh-slate-900: #232F40;
2050
- --bh-slate-950: #101B2E;
2051
- --bh-slate-alpha-100: rgb(88 123 140 / 0.1);
2052
- --bh-slate-alpha-200: rgb(88 123 140 / 0.13);
2053
- --bh-slate-alpha-300: rgb(55 83 122 / 0.13);
2054
- --bh-slate-alpha-400: rgb(22 64 112 / 0.15);
2055
- --bh-slate-alpha-50: rgb(88 123 140 / 0.07);
2056
- --bh-slate-alpha-500: rgb(24 68 120 / 0.25);
2057
- --bh-slate-alpha-dark-100: rgb(195 216 247 / 0.09);
2058
- --bh-slate-alpha-dark-200: rgb(195 216 247 / 0.11);
2059
- --bh-slate-alpha-dark-300: rgb(217 229 247 / 0.13);
2060
- --bh-slate-alpha-dark-400: rgb(195 216 247 / 0.23);
2061
- --bh-slate-alpha-dark-50: rgb(195 216 247 / 0.05);
2062
- --bh-slate-alpha-dark-500: rgb(198 219 247 / 0.3);
2063
- --bh-slate-dark-100: #121721;
2064
- --bh-slate-dark-200: #181F29;
2065
- --bh-slate-dark-300: #1F252E;
2066
- --bh-slate-dark-400: #2E3742;
2067
- --bh-slate-dark-50: #0B111A;
2068
- --bh-slate-dark-500: #434E5C;
2069
- --bh-slate-dark-600: #515E6E;
2070
- --bh-slate-dark-700: #6F7E8F;
2071
- --bh-slate-dark-800: #98A5B5;
2072
- --bh-slate-dark-900: #DDE5EB;
2073
- --bh-slate-dark-950: #FAFBFC;
2111
+ --bh-colors-brand-content-strong-light: var(--bh-teal-800);
2112
+ --bh-colors-brand-focused-dark: var(--bh-teal-300);
2113
+ --bh-colors-brand-focused-light: var(--bh-teal-600);
2114
+ --bh-colors-brand-indicator: var(--bh-teal-600);
2115
+ --bh-colors-brand-indicator-dark: var(--bh-teal-500);
2116
+ --bh-colors-brand-interactive-default: var(--bh-teal-700);
2117
+ --bh-colors-brand-interactive-default-dark: var(--bh-derived-teal-600-dark-reviewed);
2118
+ --bh-colors-brand-interactive-hover: var(--bh-teal-800);
2119
+ --bh-colors-brand-interactive-hover-dark: var(--bh-teal-800);
2120
+ --bh-colors-brand-interactive-pressed: var(--bh-teal-900);
2121
+ --bh-colors-brand-interactive-pressed-dark: var(--bh-derived-teal-600-dark-reviewed);
2122
+ --bh-colors-brand-link-dark: var(--bh-teal-500);
2123
+ --bh-colors-brand-link-hover-dark: var(--bh-teal-300);
2124
+ --bh-colors-brand-link-hover-light: var(--bh-teal-800);
2125
+ --bh-colors-brand-link-light: var(--bh-teal-700);
2126
+ --bh-colors-brand-radiobutton-bg-default: var(--bh-teal-700);
2127
+ --bh-colors-brand-radiobutton-bg-default-dark: var(--bh-derived-teal-600-dark-reviewed);
2128
+ --bh-colors-brand-radiobutton-bg-hover: var(--bh-teal-800);
2129
+ --bh-colors-brand-radiobutton-bg-hover-dark: var(--bh-teal-800);
2130
+ --bh-colors-brand-surface-base: var(--bh-teal-700);
2131
+ --bh-colors-brand-surface-base-dark: var(--bh-derived-teal-600-dark-reviewed);
2132
+ --bh-colors-brand-surface-bold-dark: var(--bh-teal-700);
2133
+ --bh-colors-brand-surface-bold-light: var(--bh-teal-800);
2134
+ --bh-colors-brand-surface-soft-dark: var(--bh-teal-900);
2135
+ --bh-colors-brand-surface-soft-light: var(--bh-teal-100);
2136
+ --bh-colors-brand-surface-strong-dark: var(--bh-teal-900);
2137
+ --bh-colors-brand-surface-strong-light: var(--bh-teal-900);
2138
+ --bh-colors-brand-surface-subtle-dark: var(--bh-teal-alpha10);
2139
+ --bh-colors-brand-surface-subtle-light: var(--bh-teal-50);
2140
+ --bh-derived-teal-600-dark-reviewed: #0E8278;
2074
2141
  --bh-teal-100: #CCFBF1;
2075
2142
  --bh-teal-300: #5EEAD4;
2076
2143
  --bh-teal-50: #F0FDFA;
@@ -2084,68 +2151,59 @@
2084
2151
 
2085
2152
  /* End Banhaten brand theme light token modes. */
2086
2153
 
2154
+ /* Banhaten brand theme dark token modes: generated from tokens/banhaten.tokens.json. */
2155
+
2087
2156
  .dark,
2157
+ .dark[data-theme="blue"],
2158
+ .dark [data-theme="blue"],
2088
2159
  .dark[data-theme="gray"],
2089
- .dark [data-theme="gray"] {
2090
- --accent: var(--bh-interactive-ghost-hover);
2091
- --accent-foreground: var(--bh-content-default);
2092
- --accent-hover: var(--bh-interactive-ghost-pressed);
2093
- --background: var(--bh-bg-default);
2160
+ .dark [data-theme="gray"],
2161
+ .dark[data-theme="brown"],
2162
+ .dark [data-theme="brown"],
2163
+ .dark[data-theme="orange"],
2164
+ .dark [data-theme="orange"],
2165
+ .dark[data-theme="green"],
2166
+ .dark [data-theme="green"],
2167
+ .dark[data-theme="purple"],
2168
+ .dark [data-theme="purple"],
2169
+ .dark[data-theme="teal"],
2170
+ .dark [data-theme="teal"] {
2094
2171
  --bh-alpha-alpha-transparent: rgb(14 13 13 / 0);
2095
2172
  --bh-alpha-alpha-transparent-to-100: var(--bh-colors-neutral-alpha-dark-300);
2096
2173
  --bh-alpha-alpha-transparent-to-500: var(--bh-colors-neutral-alpha-dark-500);
2097
- --bh-amber-300: #FFC369;
2098
2174
  --bh-amber-400: #FFA136;
2099
- --bh-amber-500: #EE7300;
2100
- --bh-amber-600: #CD6103;
2101
- --bh-amber-800: #863E07;
2102
- --bh-amber-900: #652C07;
2103
2175
  --bh-amber-alpha10: rgb(238 115 0 / 0.1);
2104
2176
  --bh-aqua-400: #2CC8A1;
2105
- --bh-aqua-500: #03A980;
2106
2177
  --bh-aqua-800: #075443;
2107
2178
  --bh-aqua-900: #043F33;
2108
2179
  --bh-aqua-alpha10: rgb(3 169 128 / 0.1);
2109
- --bh-base-white: #FFFFFF;
2110
2180
  --bh-bg-accent-amber-default: var(--bh-amber-600);
2111
2181
  --bh-bg-accent-amber-soft: var(--bh-amber-900);
2112
2182
  --bh-bg-accent-amber-subtle: var(--bh-amber-alpha10);
2113
- --bh-bg-accent-aqua-default: var(--bh-aqua-500);
2114
2183
  --bh-bg-accent-aqua-soft: var(--bh-aqua-900);
2115
2184
  --bh-bg-accent-aqua-subtle: var(--bh-aqua-alpha10);
2116
- --bh-bg-accent-blue-bold: var(--bh-blue-600);
2117
- --bh-bg-accent-blue-default: var(--bh-blue-500);
2118
2185
  --bh-bg-accent-blue-soft: var(--bh-blue-900);
2119
2186
  --bh-bg-accent-blue-subtle: var(--bh-blue-alpha10);
2120
- --bh-bg-accent-fuchsia-default: var(--bh-fuchsia-500);
2121
2187
  --bh-bg-accent-fuchsia-soft: var(--bh-fuchsia-900);
2122
2188
  --bh-bg-accent-fuchsia-subtle: var(--bh-fuchsia-alpha10);
2123
2189
  --bh-bg-accent-golden-bold: var(--bh-golden-400);
2124
2190
  --bh-bg-accent-golden-default: var(--bh-golden-500);
2125
2191
  --bh-bg-accent-golden-soft: var(--bh-golden-900);
2126
2192
  --bh-bg-accent-golden-subtle: var(--bh-golden-alpha10);
2127
- --bh-bg-accent-green-default: var(--bh-green-500);
2128
2193
  --bh-bg-accent-green-soft: var(--bh-green-900);
2129
2194
  --bh-bg-accent-green-subtle: var(--bh-green-alpha10);
2130
- --bh-bg-accent-lime-default: var(--bh-lime-500);
2131
2195
  --bh-bg-accent-lime-soft: var(--bh-lime-900);
2132
2196
  --bh-bg-accent-lime-subtle: var(--bh-lime-alpha10);
2133
- --bh-bg-accent-purple-default: var(--bh-purple-500);
2134
2197
  --bh-bg-accent-purple-soft: var(--bh-purple-900);
2135
2198
  --bh-bg-accent-purple-subtle: var(--bh-purple-alpha10);
2136
2199
  --bh-bg-accent-red-default: var(--bh-red-600);
2137
2200
  --bh-bg-accent-red-soft: var(--bh-red-900);
2138
2201
  --bh-bg-accent-red-subtle: var(--bh-red-alpha10);
2139
- --bh-bg-accent-rose-bold: var(--bh-rose-600);
2140
- --bh-bg-accent-rose-default: var(--bh-rose-500);
2141
2202
  --bh-bg-accent-rose-soft: var(--bh-rose-900);
2142
2203
  --bh-bg-accent-rose-subtle: var(--bh-rose-alpha10);
2143
- --bh-bg-accent-sky-base: var(--bh-sky-500);
2144
2204
  --bh-bg-accent-sky-soft: var(--bh-sky-900);
2145
2205
  --bh-bg-accent-sky-subtle: var(--bh-sky-alpha10);
2146
2206
  --bh-bg-always-dark: var(--bh-colors-neutral-dark-200);
2147
- --bh-bg-always-white: var(--bh-base-white);
2148
- --bh-bg-backdrop: rgb(0 0 0 / 0.5);
2149
2207
  --bh-bg-brand-bold: var(--bh-colors-brand-surface-bold-dark);
2150
2208
  --bh-bg-brand-default: var(--bh-colors-brand-surface-base-dark);
2151
2209
  --bh-bg-brand-soft: var(--bh-colors-brand-surface-soft-dark);
@@ -2191,62 +2249,42 @@
2191
2249
  --bh-bg-warning-soft: var(--bh-amber-800);
2192
2250
  --bh-bg-warning-strong: var(--bh-amber-400);
2193
2251
  --bh-bg-warning-subtle: var(--bh-amber-alpha10);
2194
- --bh-blue-200: #BBDAFF;
2195
2252
  --bh-blue-400: #5B97FF;
2196
- --bh-blue-500: #3276FF;
2197
- --bh-blue-600: #245DED;
2198
2253
  --bh-blue-800: #11318F;
2199
- --bh-blue-900: #0A1B63;
2200
2254
  --bh-blue-alpha10: rgb(50 118 255 / 0.1);
2201
2255
  --bh-blue-alpha25: rgb(50 118 255 / 0.25);
2202
- --bh-border-accent-amber-strong: var(--bh-amber-500);
2203
2256
  --bh-border-accent-amber-subtle: var(--bh-amber-800);
2204
- --bh-border-accent-aqua-strong: var(--bh-aqua-500);
2205
2257
  --bh-border-accent-aqua-subtle: var(--bh-aqua-800);
2206
- --bh-border-accent-blue-strong: var(--bh-blue-500);
2207
2258
  --bh-border-accent-blue-subtle: var(--bh-blue-alpha25);
2208
- --bh-border-accent-fuchsia-strong: var(--bh-fuchsia-500);
2209
2259
  --bh-border-accent-fuchsia-subtle: var(--bh-fuchsia-800);
2210
2260
  --bh-border-accent-golden-strong: var(--bh-golden-500);
2211
2261
  --bh-border-accent-golden-subtle: var(--bh-golden-800);
2212
- --bh-border-accent-green-strong: var(--bh-green-500);
2213
2262
  --bh-border-accent-green-subtle: var(--bh-green-alpha20);
2214
2263
  --bh-border-accent-lime-strong: var(--bh-lime-500);
2215
2264
  --bh-border-accent-lime-subtle: var(--bh-lime-800);
2216
- --bh-border-accent-purple-strong: var(--bh-purple-500);
2217
2265
  --bh-border-accent-purple-subtle: var(--bh-purple-800);
2218
- --bh-border-accent-red-strong: var(--bh-red-500);
2219
2266
  --bh-border-accent-red-subtle: var(--bh-red-alpha20);
2220
- --bh-border-accent-rose-strong: var(--bh-rose-500);
2221
2267
  --bh-border-accent-rose-subtle: var(--bh-rose-800);
2222
- --bh-border-accent-sky-strong: var(--bh-sky-500);
2223
2268
  --bh-border-accent-sky-subtle: var(--bh-sky-800);
2224
2269
  --bh-border-brand-strong: var(--bh-colors-brand-border-border-strong-dark);
2225
2270
  --bh-border-brand-subtle: var(--bh-colors-brand-border-border-subtle-dark);
2226
- --bh-border-danger-strong: var(--bh-red-500);
2227
2271
  --bh-border-danger-subtle: var(--bh-red-800);
2228
2272
  --bh-border-default: var(--bh-colors-neutral-alpha-dark-400);
2229
2273
  --bh-border-disabled: var(--bh-colors-neutral-alpha-dark-200);
2230
2274
  --bh-border-focus: var(--bh-colors-brand-focused-dark);
2231
2275
  --bh-border-focus-danger: var(--bh-red-300);
2232
- --bh-border-info-strong: var(--bh-blue-500);
2233
2276
  --bh-border-info-subtle: var(--bh-blue-800);
2234
2277
  --bh-border-input: var(--bh-colors-neutral-alpha-dark-400);
2235
2278
  --bh-border-inverse: var(--bh-colors-neutral-dark-50);
2236
2279
  --bh-border-inverse-subtle: rgb(255 255 255 / 0.1);
2237
2280
  --bh-border-strong: var(--bh-colors-neutral-dark-800);
2238
2281
  --bh-border-subtle: var(--bh-colors-neutral-alpha-dark-200);
2239
- --bh-border-success-strong: var(--bh-green-500);
2240
2282
  --bh-border-success-subtle: var(--bh-green-800);
2241
- --bh-border-warning-strong: var(--bh-amber-500);
2242
2283
  --bh-border-warning-subtle: var(--bh-amber-800);
2243
- --bh-chart-brand-default: var(--bh-colors-brand-surface-base);
2244
- --bh-chart-categorical-1: var(--bh-sky-600);
2245
2284
  --bh-chart-categorical-2: var(--bh-purple-300);
2246
2285
  --bh-chart-categorical-3: var(--bh-amber-400);
2247
2286
  --bh-chart-categorical-4: var(--bh-rose-400);
2248
2287
  --bh-chart-categorical-5: var(--bh-blue-200);
2249
- --bh-chart-categorical-6: var(--bh-purple-500);
2250
2288
  --bh-chart-categorical-7: var(--bh-rose-200);
2251
2289
  --bh-chart-categorical-8: var(--bh-amber-300);
2252
2290
  --bh-chart-neutral-default: var(--bh-colors-neutral-dark-400);
@@ -2285,7 +2323,6 @@
2285
2323
  --bh-content-link-hover: var(--bh-colors-brand-link-hover-dark);
2286
2324
  --bh-content-muted: #808080;
2287
2325
  --bh-content-on-brand: var(--bh-colors-brand-color-on-brand-dark);
2288
- --bh-content-on-color: var(--bh-base-white);
2289
2326
  --bh-content-on-light: var(--bh-colors-neutral-dark-50);
2290
2327
  --bh-content-on-neutral: var(--bh-colors-neutral-dark-50);
2291
2328
  --bh-content-on-success: var(--bh-colors-neutral-dark-50);
@@ -2296,21 +2333,14 @@
2296
2333
  --bh-content-warning-default: var(--bh-amber-500);
2297
2334
  --bh-content-warning-strong: var(--bh-amber-400);
2298
2335
  --bh-fuchsia-400: #FC54FF;
2299
- --bh-fuchsia-500: #E703EB;
2300
2336
  --bh-fuchsia-800: #6D0776;
2301
2337
  --bh-fuchsia-900: #500659;
2302
2338
  --bh-fuchsia-alpha10: rgb(231 3 235 / 0.1);
2303
- --bh-golden-400: #F7C407;
2304
2339
  --bh-golden-500: #E5AB08;
2305
- --bh-golden-800: #7E4F03;
2306
2340
  --bh-golden-900: #603B03;
2307
2341
  --bh-golden-alpha10: rgb(229 171 8 / 0.1);
2308
2342
  --bh-green-300: #51E585;
2309
2343
  --bh-green-400: #2CC863;
2310
- --bh-green-500: #0BAE45;
2311
- --bh-green-600: #039536;
2312
- --bh-green-800: #075622;
2313
- --bh-green-900: #043F18;
2314
2344
  --bh-green-alpha10: rgb(11 174 69 / 0.1);
2315
2345
  --bh-green-alpha20: rgb(11 174 69 / 0.2);
2316
2346
  --bh-green-alpha25: rgb(11 174 69 / 0.25);
@@ -2318,6 +2348,7 @@
2318
2348
  --bh-interactive-brand-disabled: var(--bh-colors-neutral-alpha-dark-100);
2319
2349
  --bh-interactive-brand-hover: var(--bh-colors-brand-interactive-hover-dark);
2320
2350
  --bh-interactive-brand-pressed: var(--bh-colors-brand-interactive-pressed-dark);
2351
+ --bh-interactive-checkbox-content: var(--bh-colors-brand-color-on-brand-dark);
2321
2352
  --bh-interactive-checkbox-default: var(--bh-colors-brand-checkbox-bg-default-dark);
2322
2353
  --bh-interactive-checkbox-hover: var(--bh-colors-brand-checkbox-bg-hover-dark);
2323
2354
  --bh-interactive-danger-default: var(--bh-red-600);
@@ -2333,7 +2364,7 @@
2333
2364
  --bh-interactive-ghost-disabled: rgb(255 255 255 / 0);
2334
2365
  --bh-interactive-ghost-hover: var(--bh-colors-neutral-alpha-dark-50);
2335
2366
  --bh-interactive-ghost-pressed: var(--bh-colors-neutral-alpha-dark-100);
2336
- --bh-interactive-indicator-default: var(--bh-colors-brand-indicator);
2367
+ --bh-interactive-indicator-default: var(--bh-colors-brand-indicator-dark);
2337
2368
  --bh-interactive-input-default: var(--bh-colors-neutral-alpha-dark-50);
2338
2369
  --bh-interactive-input-disabled: var(--bh-colors-neutral-alpha-dark-50);
2339
2370
  --bh-interactive-input-soft: var(--bh-colors-neutral-alpha-dark-100);
@@ -2355,12 +2386,9 @@
2355
2386
  --bh-interactive-success-default: var(--bh-green-400);
2356
2387
  --bh-interactive-success-hover: var(--bh-green-300);
2357
2388
  --bh-interactive-success-pressed: var(--bh-green-500);
2358
- --bh-interactive-switch-active: var(--bh-green-500);
2359
2389
  --bh-interactive-switch-active-disabled: var(--bh-green-alpha25);
2360
- --bh-interactive-switch-active-hover: var(--bh-green-600);
2361
2390
  --bh-interactive-switch-default: var(--bh-colors-neutral-alpha-dark-400);
2362
2391
  --bh-interactive-switch-disabled: var(--bh-colors-neutral-alpha-dark-100);
2363
- --bh-interactive-switch-handle: var(--bh-base-white);
2364
2392
  --bh-interactive-switch-handle-disabled: var(--bh-colors-neutral-alpha-dark-300);
2365
2393
  --bh-interactive-switch-hover: var(--bh-colors-neutral-alpha-dark-500);
2366
2394
  --bh-interactive-table-header: var(--bh-colors-neutral-alpha-dark-50);
@@ -2368,221 +2396,39 @@
2368
2396
  --bh-interactive-warning-hover: var(--bh-amber-300);
2369
2397
  --bh-interactive-warning-pressed: var(--bh-amber-500);
2370
2398
  --bh-lime-400: #A4D10E;
2371
- --bh-lime-500: #8EB903;
2372
2399
  --bh-lime-800: #4E6503;
2373
2400
  --bh-lime-900: #384C03;
2374
2401
  --bh-lime-alpha10: rgb(142 185 3 / 0.1);
2375
- --bh-pagination-action-gap: var(--bh-space-md-8);
2376
- --bh-pagination-active-bg: var(--bh-interactive-brand-default);
2377
- --bh-pagination-active-border: var(--bh-border-subtle);
2378
- --bh-pagination-active-content: var(--bh-content-on-brand);
2379
- --bh-pagination-caption-content: var(--bh-content-subtle);
2380
- --bh-pagination-caption-font-weight: var(--bh-text-body-md-regular-font-weight);
2381
- --bh-pagination-caption-width: 254px;
2382
- --bh-pagination-control-content: var(--bh-content-default);
2383
- --bh-pagination-control-gap: var(--bh-space-lg-10);
2384
- --bh-pagination-control-ghost-bg: var(--bh-interactive-ghost-default);
2385
- --bh-pagination-control-ghost-hover: var(--bh-interactive-ghost-hover);
2386
- --bh-pagination-control-ghost-pressed: var(--bh-interactive-ghost-pressed);
2387
- --bh-pagination-control-label-padding-x: var(--bh-space-xxs-2);
2388
- --bh-pagination-control-label-rtl-padding-x: var(--bh-space-xs-4);
2389
- --bh-pagination-control-soft-bg: var(--bh-interactive-soft-default);
2390
- --bh-pagination-control-soft-hover: var(--bh-interactive-soft-hover);
2391
- --bh-pagination-control-soft-pressed: var(--bh-interactive-soft-pressed);
2392
- --bh-pagination-control-text-gap: var(--bh-space-xs-4);
2393
- --bh-pagination-control-text-padding-x: var(--bh-space-md-8);
2394
- --bh-pagination-control-text-rtl-gap: var(--bh-space-xxs-2);
2395
- --bh-pagination-control-text-rtl-padding-x: var(--bh-space-sm-6);
2396
- --bh-pagination-font-size: var(--bh-text-body-md-medium-font-size);
2397
- --bh-pagination-icon-size: var(--bh-icon-size-default);
2398
- --bh-pagination-icon-slot-size: var(--bh-icon-slot-size-default);
2399
- --bh-pagination-item-size: var(--bh-space-6xl-32);
2400
- --bh-pagination-label-font-weight: var(--bh-text-body-md-medium-font-weight);
2401
- --bh-pagination-letter-spacing: var(--bh-text-body-md-medium-letter-spacing);
2402
- --bh-pagination-line-height: var(--bh-text-body-md-medium-line-height);
2403
- --bh-pagination-numeric-width: 560px;
2404
- --bh-pagination-page-bg: var(--bh-interactive-ghost-default);
2405
- --bh-pagination-page-content: var(--bh-content-subtle);
2406
- --bh-pagination-page-gap: var(--bh-space-xs-4);
2407
- --bh-pagination-page-hover: var(--bh-interactive-ghost-hover);
2408
- --bh-pagination-page-pressed: var(--bh-interactive-ghost-pressed);
2409
- --bh-pagination-radius: var(--bh-control-default);
2410
- --bh-pagination-root-gap: var(--bh-space-3xl-16);
2411
- --bh-pagination-simple-width: 458px;
2412
2402
  --bh-purple-300: #D097FF;
2413
2403
  --bh-purple-400: #B65CFF;
2414
- --bh-purple-500: #A135FA;
2415
2404
  --bh-purple-800: #4A0B87;
2416
2405
  --bh-purple-900: #340865;
2417
2406
  --bh-purple-alpha10: rgb(182 92 255 / 0.1);
2418
- --bh-red-300: #FF96A1;
2419
- --bh-red-400: #FC5666;
2420
- --bh-red-500: #E8172C;
2421
- --bh-red-600: #CA1224;
2422
- --bh-red-700: #A60C1B;
2423
2407
  --bh-red-800: #820A16;
2424
2408
  --bh-red-900: #5C0810;
2425
2409
  --bh-red-alpha10: rgb(232 23 44 / 0.1);
2426
2410
  --bh-red-alpha15: rgb(232 23 44 / 0.15);
2427
2411
  --bh-red-alpha20: rgb(232 23 44 / 0.2);
2428
- --bh-rose-200: #FFB9D7;
2429
2412
  --bh-rose-400: #FF4F9B;
2430
- --bh-rose-500: #F01071;
2431
- --bh-rose-600: #D10A60;
2432
2413
  --bh-rose-800: #810838;
2433
2414
  --bh-rose-900: #60082B;
2434
2415
  --bh-rose-alpha10: rgb(240 16 113 / 0.1);
2435
- --bh-select-avatar-font-size: var(--bh-space-lg-10);
2436
- --bh-select-check-color: var(--bh-interactive-indicator-default);
2437
- --bh-select-checkbox-icon-size: var(--bh-space-xl-12);
2438
- --bh-select-checkbox-radius: var(--bh-radius-sm-4);
2439
- --bh-select-checkbox-size: var(--bh-space-3xl-16);
2440
- --bh-select-company-icon-size: 18px;
2441
- --bh-select-content-gap: var(--bh-space-xxs-2);
2442
- --bh-select-field-gap: var(--bh-space-sm-6);
2443
- --bh-select-icon-size: var(--bh-space-3xl-16);
2444
- --bh-select-icon-slot-size: var(--bh-space-4xl-20);
2445
- --bh-select-item-check-offset: var(--bh-space-3xl-16);
2446
- --bh-select-item-content-padding: var(--bh-space-sm-6);
2447
- --bh-select-item-gap: var(--bh-space-xs-4);
2448
- --bh-select-item-hover-bg: var(--bh-interactive-ghost-hover);
2449
- --bh-select-item-min-height: var(--bh-space-6xl-32);
2450
- --bh-select-item-padding-x: var(--bh-space-sm-6);
2451
- --bh-select-item-radius: var(--bh-radius-md-6);
2452
- --bh-select-item-selected-padding-end: var(--bh-space-6xl-32);
2453
- --bh-select-item-value-padding-x: var(--bh-space-xs-4);
2454
- --bh-select-label-gap: var(--bh-space-xs-4);
2455
- --bh-select-media-inset: var(--bh-space-xxs-2);
2456
- --bh-select-menu-bg: var(--bh-bg-raised);
2457
- --bh-select-menu-border: var(--bh-border-subtle);
2458
- --bh-select-menu-list-gap: var(--bh-space-xxs-2);
2459
- --bh-select-menu-offset: var(--bh-space-xs-4);
2460
- --bh-select-menu-padding-y: var(--bh-space-sm-6);
2461
- --bh-select-menu-radius: var(--bh-radius-xl-10);
2462
- --bh-select-menu-width: var(--bh-select-width);
2463
- --bh-select-payment-height: var(--bh-space-4xl-20);
2464
- --bh-select-payment-mark-offset: 7px;
2465
- --bh-select-payment-mark-size: 9px;
2466
- --bh-select-payment-radius: var(--bh-radius-sm-4);
2467
- --bh-select-payment-width: 28.333px;
2468
- --bh-select-status-dot-size: var(--bh-space-md-8);
2469
- --bh-select-trigger-bg: var(--bh-interactive-input-default);
2470
- --bh-select-trigger-bg-disabled: var(--bh-interactive-input-disabled);
2471
- --bh-select-trigger-bg-soft: var(--bh-interactive-input-soft);
2472
- --bh-select-trigger-border: var(--bh-border-input);
2473
- --bh-select-trigger-border-disabled: var(--bh-border-disabled);
2474
- --bh-select-trigger-border-error: var(--bh-border-danger-strong);
2475
- --bh-select-trigger-border-focus: var(--bh-border-focus);
2476
- --bh-select-trigger-gap: var(--bh-space-sm-6);
2477
- --bh-select-trigger-icon-color: var(--bh-content-muted);
2478
- --bh-select-trigger-padding-x: var(--bh-space-md-8);
2479
- --bh-select-trigger-padding-y-comfortable: var(--bh-space-md-8);
2480
- --bh-select-trigger-padding-y-lg: var(--bh-space-sm-6);
2481
- --bh-select-trigger-padding-y-md: var(--bh-space-xs-4);
2482
- --bh-select-trigger-radius: var(--bh-radius-lg-8);
2483
- --bh-select-value-padding-inline: var(--bh-space-xs-4);
2484
- --bh-select-width: var(--bh-space-18xl-320);
2485
2416
  --bh-sky-400: #1BB6FC;
2486
- --bh-sky-500: #059FE5;
2487
- --bh-sky-600: #0C85C3;
2488
2417
  --bh-sky-800: #03537E;
2489
2418
  --bh-sky-900: #073D5B;
2490
2419
  --bh-sky-alpha10: rgb(5 159 229 / 0.1);
2491
- --border: var(--bh-border-default);
2492
- --card: var(--bh-bg-raised);
2493
- --card-foreground: var(--bh-content-default);
2494
- --danger-ring: var(--bh-border-focus-danger);
2495
- --destructive: var(--bh-interactive-danger-default);
2496
- --destructive-foreground: var(--bh-content-on-color);
2497
- --destructive-hover: var(--bh-interactive-danger-hover);
2498
- --destructive-pressed: var(--bh-interactive-danger-pressed);
2499
- --destructive-soft: var(--bh-interactive-danger-soft-default);
2500
- --destructive-soft-foreground: var(--bh-content-danger-default);
2501
- --destructive-soft-hover: var(--bh-interactive-danger-soft-hover);
2502
- --destructive-soft-pressed: var(--bh-interactive-danger-soft-pressed);
2503
- --foreground: var(--bh-content-default);
2504
- --ghost: var(--bh-interactive-ghost-default);
2505
- --ghost-hover: var(--bh-interactive-ghost-hover);
2506
- --ghost-pressed: var(--bh-interactive-ghost-pressed);
2507
- --input: var(--bh-border-input);
2508
- --muted: var(--bh-bg-muted);
2509
- --muted-foreground: var(--bh-content-muted);
2510
- --outline: var(--bh-interactive-outlined-default);
2511
- --outline-hover: var(--bh-interactive-outlined-hover);
2512
- --outline-pressed: var(--bh-interactive-outlined-pressed);
2513
- --popover: var(--bh-bg-raised);
2514
- --popover-foreground: var(--bh-content-default);
2515
- --primary: var(--bh-interactive-brand-default);
2516
- --primary-foreground: var(--bh-content-on-brand);
2517
- --primary-hover: var(--bh-interactive-brand-hover);
2518
- --primary-pressed: var(--bh-interactive-brand-pressed);
2519
- --ring: var(--bh-border-focus);
2520
- --secondary: var(--bh-interactive-secondary-default);
2521
- --secondary-foreground: var(--bh-content-default);
2522
- --secondary-hover: var(--bh-interactive-secondary-hover);
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);
2526
- --shadow-button-danger-focus: var(--shadow-component-danger-focus-ring);
2527
- --shadow-button-focus: var(--shadow-component-focus-ring);
2528
- --shadow-button-group: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-button-group-border), var(--shadow-component-default);
2529
- --shadow-button-group-focus: var(--shadow-button-group), var(--shadow-component-focus-ring);
2530
- --shadow-button-group-focus-ring: var(--shadow-component-focus-ring);
2531
- --shadow-button-raised: var(--shadow-component-raised);
2532
- --shadow-button-secondary: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-button-secondary-border, var(--bh-border-default)), var(--shadow-button-surface);
2533
- --shadow-button-secondary-focus: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-button-secondary-focus-border, var(--bh-border-brand-strong)), var(--shadow-button-surface), var(--shadow-button-focus);
2534
- --shadow-button-surface: var(--shadow-component-surface);
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);
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);
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);
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);
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);
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);
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);
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);
2545
- --shadow-input: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-input-border, var(--bh-border-input)), var(--shadow-component-default);
2546
- --shadow-input-focus-ring: var(--shadow-component-focus-stroke);
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);
2550
- --shadow-progress-slider-thumb-focus: var(--shadow-component-focus-ring);
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);
2552
- --shadow-radio-card-disabled: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-border-disabled);
2553
- --shadow-radio-control: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-radio-control-border, var(--bh-border-input)), var(--shadow-component-default);
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);
2555
- --shadow-select-danger-focus-ring: var(--shadow-component-danger-focus-stroke);
2556
- --shadow-select-focus-ring: var(--shadow-component-focus-stroke);
2557
- --shadow-select-menu: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-select-menu-border), var(--shadow-lg);
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);
2559
- --shadow-slider-thumb-focus: var(--shadow-slider-thumb), var(--shadow-component-focus-ring);
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);
2562
- --shadow-social-button: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-social-button-border, transparent), var(--shadow-component-default);
2563
- --shadow-social-button-focus: var(--shadow-social-button), var(--shadow-component-focus-ring);
2564
- --shadow-social-button-focus-ring: var(--shadow-component-focus-ring);
2565
- --shadow-textarea: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-textarea-border, var(--bh-border-input)), var(--shadow-component-default);
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);
2568
- --soft: var(--bh-interactive-soft-default);
2569
- --soft-hover: var(--bh-interactive-soft-hover);
2570
- --soft-pressed: var(--bh-interactive-soft-pressed);
2571
- --success: var(--bh-bg-success-default);
2572
- --success-foreground: var(--bh-content-on-color);
2573
- --success-hover: var(--bh-bg-success-bold);
2574
- --success-pressed: var(--bh-bg-success-strong);
2575
- --warning: var(--bh-bg-warning-default);
2576
- --warning-foreground: var(--bh-content-on-light);
2577
- --warning-hover: var(--bh-bg-warning-bold);
2578
- --warning-pressed: var(--bh-bg-warning-strong);
2579
- --warning-soft: var(--bh-bg-warning-subtle);
2580
- --warning-soft-foreground: var(--bh-content-warning-default);
2581
- --warning-soft-hover: var(--bh-bg-warning-soft);
2420
+ --elevation-01: 0px 0px 0px 1px rgb(0 0 0 / 0), inset 0px 0px 0px 1px rgb(255 255 255 / 0.04);
2421
+ --elevation-02: 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);
2422
+ --elevation-03: 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);
2423
+ --elevation-04: 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);
2424
+ --elevation-05: 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);
2425
+ --elevation-06: 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);
2426
+ --elevation-07: 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);
2427
+ --elevation-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);
2428
+ --elevation-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);
2429
+ --elevation-component-surface: inset 0px -1px 0px 0px rgb(0 0 0 / 0.32), 0px 1px 2px 0px rgb(0 0 0 / 0.32);
2582
2430
  }
2583
2431
 
2584
- /* Banhaten brand theme dark token modes: generated from tokens/banhaten.tokens.json. */
2585
-
2586
2432
  /* End Banhaten brand theme dark token modes. */
2587
2433
 
2588
2434
  [data-radius="default"] {
@@ -2659,6 +2505,40 @@
2659
2505
 
2660
2506
  /* Banhaten authored token utilities. */
2661
2507
 
2508
+ /* Remove Tailwind's parallel depth scale; Banhaten publishes elevation only. */
2509
+ @theme {
2510
+ --shadow-*: initial;
2511
+ --inset-shadow-*: initial;
2512
+ --drop-shadow-*: initial;
2513
+ --text-shadow-*: initial;
2514
+ }
2515
+
2516
+ /* Neutralize Tailwind's emitted defaults when this file is imported after it. */
2517
+ :root,
2518
+ :host {
2519
+ --shadow-2xs: unset;
2520
+ --shadow-xs: unset;
2521
+ --shadow-sm: unset;
2522
+ --shadow-md: unset;
2523
+ --shadow-lg: unset;
2524
+ --shadow-xl: unset;
2525
+ --shadow-2xl: unset;
2526
+ --inset-shadow-2xs: initial;
2527
+ --inset-shadow-xs: initial;
2528
+ --inset-shadow-sm: initial;
2529
+ --drop-shadow-xs: initial;
2530
+ --drop-shadow-sm: initial;
2531
+ --drop-shadow-md: initial;
2532
+ --drop-shadow-lg: initial;
2533
+ --drop-shadow-xl: initial;
2534
+ --drop-shadow-2xl: initial;
2535
+ --text-shadow-2xs: initial;
2536
+ --text-shadow-xs: initial;
2537
+ --text-shadow-sm: initial;
2538
+ --text-shadow-md: initial;
2539
+ --text-shadow-lg: initial;
2540
+ }
2541
+
2662
2542
  @theme inline {
2663
2543
  --font-sans: var(--bh-font-family);
2664
2544
  --default-border-width: var(--bh-border-width-default);
@@ -2716,6 +2596,30 @@
2716
2596
  }
2717
2597
  }
2718
2598
 
2599
+ @keyframes collapsible-down {
2600
+ from {
2601
+ height: 0;
2602
+ opacity: var(--bh-opacity-0);
2603
+ }
2604
+
2605
+ to {
2606
+ height: var(--radix-collapsible-content-height);
2607
+ opacity: var(--bh-opacity-100);
2608
+ }
2609
+ }
2610
+
2611
+ @keyframes collapsible-up {
2612
+ from {
2613
+ height: var(--radix-collapsible-content-height);
2614
+ opacity: var(--bh-opacity-100);
2615
+ }
2616
+
2617
+ to {
2618
+ height: 0;
2619
+ opacity: var(--bh-opacity-0);
2620
+ }
2621
+ }
2622
+
2719
2623
  @keyframes bh-spinner-steady {
2720
2624
  to {
2721
2625
  transform: rotate(360deg);