@beehexa/design-rules 2611.3.2 → 2611.4.1

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 (68) hide show
  1. package/README.md +1 -1
  2. package/dist/AGENTS.md +1 -7
  3. package/dist/catalog.json +153 -125
  4. package/dist/docs/scripts/color-pairs.mjs +5 -1
  5. package/dist/docs/scripts/token-utils.mjs +16 -1
  6. package/dist/docs/src/components/ColorDemo.astro +5 -5
  7. package/dist/docs/src/components/ElevationDemo.astro +196 -0
  8. package/dist/docs/src/components/LayoutDemo.astro +1 -1
  9. package/dist/docs/src/components/OpacityDemo.astro +95 -0
  10. package/dist/docs/src/components/ShapeDemo.astro +11 -10
  11. package/dist/docs/src/components/ShapePin.astro +5 -3
  12. package/dist/docs/src/components/ZIndexDemo.astro +102 -0
  13. package/dist/docs/src/content/foundations/styles/border.mdx +3 -3
  14. package/dist/docs/src/content/foundations/styles/color/usage.mdx +11 -4
  15. package/dist/docs/src/content/foundations/styles/data-visualization.mdx +74 -6
  16. package/dist/docs/src/content/foundations/styles/elevation.mdx +66 -3
  17. package/dist/docs/src/content/foundations/styles/icons/usage.mdx +9 -6
  18. package/dist/docs/src/content/foundations/styles/layout/app-frame.mdx +10 -0
  19. package/dist/docs/src/content/foundations/styles/opacity.mdx +43 -5
  20. package/dist/docs/src/content/foundations/styles/size-and-density.mdx +7 -0
  21. package/dist/docs/src/content/foundations/styles/typography/code.mdx +1 -1
  22. package/dist/docs/src/content/foundations/styles/z-index.mdx +63 -5
  23. package/dist/docs/src/content/tools/ant-design-vue-theme.mdx +125 -18
  24. package/dist/docs/src/content/tools/application-content.mdx +42 -0
  25. package/dist/docs/src/content/tools/editors.mdx +27 -0
  26. package/dist/docs/src/content/tools/mermaid.mdx +95 -0
  27. package/dist/docs/src/content/tools/vueflow.mdx +121 -0
  28. package/dist/docs/src/content-vi/foundations/styles/border.mdx +3 -3
  29. package/dist/docs/src/content-vi/foundations/styles/color/usage.mdx +11 -4
  30. package/dist/docs/src/content-vi/foundations/styles/data-visualization.mdx +75 -6
  31. package/dist/docs/src/content-vi/foundations/styles/elevation.mdx +75 -0
  32. package/dist/docs/src/content-vi/foundations/styles/icons/usage.mdx +9 -6
  33. package/dist/docs/src/content-vi/foundations/styles/layout/app-frame.mdx +10 -0
  34. package/dist/docs/src/content-vi/foundations/styles/opacity.mdx +43 -5
  35. package/dist/docs/src/content-vi/foundations/styles/size-and-density.mdx +7 -0
  36. package/dist/docs/src/content-vi/foundations/styles/typography/code.mdx +1 -1
  37. package/dist/docs/src/content-vi/foundations/styles/z-index.mdx +63 -5
  38. package/dist/docs/src/lib/token-descriptions-vi.ts +21 -5
  39. package/dist/docs/src/styles/chrome.css +14 -14
  40. package/dist/docs/src/styles/color.css +19 -32
  41. package/dist/docs/src/styles/docs.css +18 -34
  42. package/dist/docs/src/styles/elevation.css +83 -0
  43. package/dist/docs/src/styles/global.css +1 -10
  44. package/dist/docs/src/styles/icons.css +11 -15
  45. package/dist/docs/src/styles/kit.css +112 -0
  46. package/dist/docs/src/styles/layout.css +1 -6
  47. package/dist/docs/src/styles/opacity.css +43 -0
  48. package/dist/docs/src/styles/shapes.css +15 -19
  49. package/dist/docs/src/styles/tokens.css +1282 -3
  50. package/dist/docs/src/styles/tokens.js +358 -3
  51. package/dist/docs/src/styles/typography.css +4 -7
  52. package/dist/docs/src/styles/zindex.css +56 -0
  53. package/dist/docs/tokens/border.json +1 -1
  54. package/dist/docs/tokens/color.json +57 -3
  55. package/dist/docs/tokens/content.json +19 -0
  56. package/dist/docs/tokens/diagram.json +48 -0
  57. package/dist/docs/tokens/editor.json +129 -0
  58. package/dist/docs/tokens/elevation.json +15 -5
  59. package/dist/docs/tokens/flow.json +497 -0
  60. package/dist/docs/tokens/opacity.json +9 -0
  61. package/dist/docs/tokens/resize.json +67 -0
  62. package/dist/docs/tokens/size.json +6 -0
  63. package/dist/docs/tokens/spacing.json +4 -4
  64. package/dist/docs/tokens/typography.json +5 -0
  65. package/dist/docs/tokens/visualization.json +123 -0
  66. package/dist/docs/tokens/z-index.json +49 -0
  67. package/dist/index.js +153 -125
  68. package/package.json +6 -1
@@ -152,6 +152,11 @@
152
152
  --bh-color-surface: var(--bh-color-brand-white);
153
153
  --bh-color-surface-page: var(--bh-color-brand-white);
154
154
  --bh-color-surface-subtle: var(--bh-color-graphite-2);
155
+ --bh-color-surface-overlay: var(--bh-color-brand-white);
156
+ --bh-color-surface-overlay-hover: var(--bh-color-graphite-2);
157
+ --bh-color-surface-overlay-pressed: var(--bh-color-graphite-3);
158
+ --bh-color-surface-overlay-selected: var(--bh-color-graphite-3);
159
+ --bh-color-surface-overlay-selected-hover: var(--bh-color-graphite-4);
155
160
  --bh-color-surface-inverse: var(--bh-color-graphite-12);
156
161
  --bh-color-surface-scrim: rgb(43 42 40 / 40%);
157
162
  --bh-color-border: var(--bh-color-graphite-6);
@@ -173,8 +178,156 @@
173
178
  --bh-color-skeleton-subtle: var(--bh-color-graphite-3);
174
179
  --bh-color-code-background: var(--bh-color-brand-graphite);
175
180
  --bh-color-code-text: var(--bh-color-graphite-2);
181
+ --bh-content-partner-logo-size: 2.5rem;
182
+ --bh-content-partner-logo-image-size: 1.75rem;
183
+ --bh-content-avatar-size: 2.5rem;
184
+ --bh-content-identity-mark-size: 2.75rem;
185
+ --bh-content-identity-mark-image-size: 1.5rem;
186
+ --bh-content-empty-illustration-size: 6rem;
187
+ --bh-diagram-canvas: var(--bh-color-surface-page);
188
+ --bh-diagram-node-fill: var(--bh-color-surface);
189
+ --bh-diagram-node-border: var(--bh-color-border-bold);
190
+ --bh-diagram-node-title: var(--bh-color-text);
191
+ --bh-diagram-node-desc: var(--bh-color-text-subtle);
192
+ --bh-diagram-tile-bg: var(--bh-color-background-neutral);
193
+ --bh-diagram-tile-glyph: var(--bh-color-icon);
194
+ --bh-diagram-state-ran-ok: var(--bh-color-text-subtle);
195
+ --bh-diagram-ran-ok-fill: var(--bh-color-surface);
196
+ --bh-diagram-fail-stroke: var(--bh-color-border-danger);
197
+ --bh-diagram-fail-fill: var(--bh-color-background-danger-subtle);
198
+ --bh-diagram-fail-title: var(--bh-color-text-danger);
199
+ --bh-diagram-fail-desc: var(--bh-color-text-danger);
200
+ --bh-diagram-unreached-fill: var(--bh-color-surface-subtle);
201
+ --bh-diagram-unreached-stroke: var(--bh-color-border-bold);
202
+ --bh-diagram-unreached-title: var(--bh-color-text-subtle);
203
+ --bh-diagram-unreached-desc: var(--bh-color-text-subtle);
204
+ --bh-diagram-nottaken-stroke: var(--bh-color-text-subtle);
205
+ --bh-diagram-nottaken-fill: var(--bh-color-surface);
206
+ --bh-diagram-nottaken-title: var(--bh-color-text);
207
+ --bh-diagram-nottaken-desc: var(--bh-color-text-subtle);
208
+ --bh-diagram-badge-bg: var(--bh-color-surface);
209
+ --bh-diagram-badge-text: var(--bh-color-text-subtle);
210
+ --bh-diagram-badge-border: var(--bh-color-border-bold);
211
+ --bh-diagram-edge: var(--bh-color-border-bold);
212
+ --bh-diagram-edge-label-text: var(--bh-color-text-subtle);
213
+ --bh-diagram-edge-label-bg: var(--bh-color-surface-page);
214
+ --bh-diagram-panel-bg: var(--bh-color-surface);
215
+ --bh-diagram-panel-border: var(--bh-color-border);
216
+ --bh-diagram-code-bg: var(--bh-color-surface);
217
+ --bh-diagram-code-key: var(--bh-color-text-subtle);
218
+ --bh-diagram-code-value: var(--bh-color-text);
219
+ --bh-diagram-selection-ring: var(--bh-color-border-focus);
220
+ --bh-diagram-node-font: var(--bh-font-body-default);
221
+ --bh-diagram-card-width: 15rem;
222
+ --bh-diagram-tile-size: 2.75rem;
223
+ --bh-diagram-glyph-size: 2rem;
224
+ --bh-diagram-preview-height: 45rem;
225
+ --bh-diagram-minimum-height: 20rem;
226
+ --bh-diagram-evidence-height: 13.75rem;
227
+ --bh-diagram-evidence-minimum-height: 12rem;
228
+ --bh-diagram-padding: var(--bh-space-100);
229
+ --bh-diagram-export-padding: var(--bh-space-300);
230
+ --bh-editor-background: var(--bh-color-surface);
231
+ --bh-editor-text: var(--bh-color-text);
232
+ --bh-editor-gutter: var(--bh-color-surface-subtle);
233
+ --bh-editor-lineNumber: var(--bh-color-text-subtlest);
234
+ --bh-editor-selection: var(--bh-color-background-selected);
235
+ --bh-editor-lineHighlight: var(--bh-color-surface-subtle);
236
+ --bh-editor-cursor: var(--bh-color-text);
237
+ --bh-editor-border: var(--bh-color-border);
238
+ --bh-editor-syntax-comment: var(--bh-color-text-subtlest);
239
+ --bh-editor-syntax-string: var(--bh-color-text-success);
240
+ --bh-editor-syntax-number: var(--bh-color-text-warning);
241
+ --bh-editor-syntax-keyword: var(--bh-color-text-info);
242
+ --bh-editor-syntax-type: var(--bh-color-text);
243
+ --bh-editor-syntax-delimiter: var(--bh-color-text-subtle);
244
+ --bh-editor-diff-inserted-background: var(--bh-color-background-success-subtle);
245
+ --bh-editor-diff-inserted-text: var(--bh-color-text-success);
246
+ --bh-editor-diff-removed-background: var(--bh-color-background-danger-subtle);
247
+ --bh-editor-diff-removed-text: var(--bh-color-text-danger);
248
+ --bh-editor-font-family: var(--bh-font-family-mono);
249
+ --bh-editor-font-size: var(--bh-font-size-200);
250
+ --bh-editor-font-lineHeight: 1.25rem;
251
+ --bh-editor-font-weight: var(--bh-font-weight-regular);
176
252
  --bh-elevation-shadow-raised: 0 1px 2px rgb(43 42 40 / 8%), 0 1px 3px rgb(43 42 40 / 6%);
177
- --bh-elevation-shadow-overlay: 0 24px 80px rgb(43 42 40 / 14%);
253
+ --bh-elevation-shadow-overlay: 0 4px 12px rgb(43 42 40 / 15%);
254
+ --bh-elevation-shadow-modal: 0 8px 24px rgb(43 42 40 / 15%);
255
+ --bh-flow-category-task-foreground: var(--bh-color-blue-11);
256
+ --bh-flow-category-task-background: var(--bh-color-blue-3);
257
+ --bh-flow-category-task-border: var(--bh-color-blue-9);
258
+ --bh-flow-category-task-hover: var(--bh-color-blue-4);
259
+ --bh-flow-category-dependency-foreground: var(--bh-color-red-11);
260
+ --bh-flow-category-dependency-background: var(--bh-color-red-3);
261
+ --bh-flow-category-dependency-border: var(--bh-color-red-9);
262
+ --bh-flow-category-dependency-hover: var(--bh-color-red-4);
263
+ --bh-flow-category-transformation-foreground: var(--bh-color-green-11);
264
+ --bh-flow-category-transformation-background: var(--bh-color-green-3);
265
+ --bh-flow-category-transformation-border: var(--bh-color-green-9);
266
+ --bh-flow-category-transformation-hover: var(--bh-color-green-4);
267
+ --bh-flow-category-validation-foreground: var(--bh-color-red-11);
268
+ --bh-flow-category-validation-background: var(--bh-color-red-3);
269
+ --bh-flow-category-validation-border: var(--bh-color-red-11);
270
+ --bh-flow-category-validation-hover: var(--bh-color-red-4);
271
+ --bh-flow-category-pushStep-foreground: var(--bh-color-yellow-11);
272
+ --bh-flow-category-pushStep-background: var(--bh-color-yellow-3);
273
+ --bh-flow-category-pushStep-border: var(--bh-color-yellow-9);
274
+ --bh-flow-category-pushStep-hover: var(--bh-color-yellow-4);
275
+ --bh-flow-category-decision-foreground: #087f8c;
276
+ --bh-flow-category-decision-background: #e8f8fa;
277
+ --bh-flow-category-decision-border: #087f8c;
278
+ --bh-flow-category-decision-hover: #e8f8fa;
279
+ --bh-flow-category-loop-foreground: #ad2171;
280
+ --bh-flow-category-loop-background: #fcecf5;
281
+ --bh-flow-category-loop-border: #ad2171;
282
+ --bh-flow-category-loop-hover: #fcecf5;
283
+ --bh-flow-category-grouped-foreground: #7040a0;
284
+ --bh-flow-category-grouped-background: #f3ecfa;
285
+ --bh-flow-category-grouped-border: #7040a0;
286
+ --bh-flow-category-grouped-hover: #f3ecfa;
287
+ --bh-flow-geometry-task-width: 450px;
288
+ --bh-flow-geometry-task-height: 130px;
289
+ --bh-flow-geometry-task_dependency-width: 450px;
290
+ --bh-flow-geometry-task_dependency-height: 130px;
291
+ --bh-flow-geometry-task_transformation-width: 450px;
292
+ --bh-flow-geometry-task_transformation-height: 130px;
293
+ --bh-flow-geometry-task_data-width: 450px;
294
+ --bh-flow-geometry-task_data-height: 130px;
295
+ --bh-flow-geometry-validationGroup-width: 350px;
296
+ --bh-flow-geometry-validationGroup-height: 130px;
297
+ --bh-flow-geometry-transformationGroup-width: 350px;
298
+ --bh-flow-geometry-transformationGroup-height: 130px;
299
+ --bh-flow-geometry-pushStepsGroup-width: 350px;
300
+ --bh-flow-geometry-pushStepsGroup-height: 130px;
301
+ --bh-flow-geometry-validation-width: 200px;
302
+ --bh-flow-geometry-validation-height: 130px;
303
+ --bh-flow-geometry-transformation-width: 200px;
304
+ --bh-flow-geometry-transformation-height: 130px;
305
+ --bh-flow-geometry-push_step-width: 200px;
306
+ --bh-flow-geometry-push_step-height: 130px;
307
+ --bh-flow-geometry-decision-width: 160px;
308
+ --bh-flow-geometry-decision-height: 160px;
309
+ --bh-flow-geometry-loop-width: 120px;
310
+ --bh-flow-geometry-loop-height: 120px;
311
+ --bh-flow-geometry-profile-width: 240px;
312
+ --bh-flow-geometry-profile-height: 100px;
313
+ --bh-flow-grid-HORIZONTAL: 80px;
314
+ --bh-flow-grid-VERTICAL: 40px;
315
+ --bh-flow-grid-TASK_DATA_X_GAP: 300px;
316
+ --bh-flow-grid-GROUP_Y_OFFSET: 200px;
317
+ --bh-flow-layout-VALIDATION_NODE_Y_GAP: 100px;
318
+ --bh-flow-layout-TRANSFORMATION_NODE_Y_GAP: 100px;
319
+ --bh-flow-layout-PUSH_STEP_NODE_Y_GAP: 80px;
320
+ --bh-flow-layout-PUSH_STEP_NODE_X_GAP: 120px;
321
+ --bh-flow-layout-PUSH_STEP_BRANCH_X_GAP: 200px;
322
+ --bh-flow-layout-EXPANDED_GROUP_X: 50px;
323
+ --bh-flow-layout-EXPANDED_GROUP_Y_START: 50px;
324
+ --bh-flow-layout-TREE_LEVEL_Y_GAP: 150px;
325
+ --bh-flow-layout-TREE_SIBLING_X_GAP: 250px;
326
+ --bh-flow-layout-TREE_MIN_WIDTH: 200px;
327
+ --bh-flow-edge-width: 2px;
328
+ --bh-flow-edge-marker: 15px;
329
+ --bh-flow-edge-radius: 20px;
330
+ --bh-flow-edge-handle: 12px;
178
331
  --bh-layout-header-height: var(--bh-space-600);
179
332
  --bh-layout-sidebar-expanded: 17.5rem;
180
333
  --bh-layout-sidebar-collapsed: var(--bh-space-800);
@@ -191,6 +344,7 @@
191
344
  --bh-motion-duration-default: 200ms;
192
345
  --bh-motion-duration-slow: 300ms;
193
346
  --bh-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
347
+ --bh-opacity-disabled: 0.4;
194
348
  --bh-radius-0: 0;
195
349
  --bh-radius-100: 0.5rem;
196
350
  --bh-radius-150: 0.75rem;
@@ -199,6 +353,22 @@
199
353
  --bh-radius-050: 0.25rem;
200
354
  --bh-radius-075: 0.375rem;
201
355
  --bh-radius-full: 999px;
356
+ --bh-resize-divider: var(--bh-border-width-accent);
357
+ --bh-resize-target: var(--bh-size-target-minimum);
358
+ --bh-resize-touchTarget: var(--bh-size-target-touch);
359
+ --bh-resize-handle-width: var(--bh-space-200);
360
+ --bh-resize-handle-height: var(--bh-space-400);
361
+ --bh-resize-handle-radius: var(--bh-radius-050);
362
+ --bh-resize-handle-background: var(--bh-color-surface);
363
+ --bh-resize-handle-activeBackground: var(--bh-color-background-neutral-bold);
364
+ --bh-resize-color: var(--bh-color-border-bold);
365
+ --bh-resize-active: var(--bh-color-border-focus);
366
+ --bh-resize-grip: var(--bh-color-icon);
367
+ --bh-resize-activeGrip: var(--bh-color-text-inverse);
368
+ --bh-size-icon-default: 1rem;
369
+ --bh-size-icon-medium: 1.25rem;
370
+ --bh-size-icon-large: 1.5rem;
371
+ --bh-size-icon-empty: 2rem;
202
372
  --bh-size-control-small: 1.5rem;
203
373
  --bh-size-control-default: 2rem;
204
374
  --bh-size-control-large: 2.5rem;
@@ -219,6 +389,7 @@
219
389
  --bh-space-050: 0.25rem;
220
390
  --bh-space-075: 0.375rem;
221
391
  --bh-state-focus-offset: 2px;
392
+ --bh-font-features: "cv05", "cv08";
222
393
  --bh-font-family-sans: Inter, "Noto Sans", system-ui, sans-serif;
223
394
  --bh-font-family-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
224
395
  --bh-font-size-100: 0.75rem;
@@ -248,6 +419,65 @@
248
419
  --bh-font-label-default: var(--bh-font-weight-medium) var(--bh-font-size-200)/1.25rem var(--bh-font-family-sans);
249
420
  --bh-font-label-small: var(--bh-font-weight-medium) var(--bh-font-size-100)/1rem var(--bh-font-family-sans);
250
421
  --bh-font-code-default: var(--bh-font-weight-regular) var(--bh-font-size-200)/1.25rem var(--bh-font-family-mono);
422
+ --bh-visualization-metric-total-jobs: var(--bh-color-text-info);
423
+ --bh-visualization-metric-success-rate: var(--bh-color-text-success);
424
+ --bh-visualization-metric-completed: var(--bh-color-text-success);
425
+ --bh-visualization-metric-failed: var(--bh-color-text-danger);
426
+ --bh-visualization-metric-active-jobs: var(--bh-color-text-info);
427
+ --bh-visualization-metric-avg-execution-time: var(--bh-color-text-subtle);
428
+ --bh-visualization-metric-queue-depth: var(--bh-color-text);
429
+ --bh-visualization-job-type-queue-status: var(--bh-color-blue-11);
430
+ --bh-visualization-job-type-sync-history: var(--bh-color-green-11);
431
+ --bh-visualization-job-type-polling-jobs: var(--bh-color-orange-11);
432
+ --bh-visualization-job-type-generic-jobs: var(--bh-color-graphite-11);
433
+ --bh-visualization-priority-1: var(--bh-color-text-danger);
434
+ --bh-visualization-priority-2: var(--bh-color-text-warning);
435
+ --bh-visualization-priority-3: var(--bh-color-text-info);
436
+ --bh-visualization-priority-4: var(--bh-color-text-subtle);
437
+ --bh-visualization-priority-5: var(--bh-color-text-subtlest);
438
+ --bh-visualization-traffic-healthy-fill: var(--bh-color-background-success-subtle);
439
+ --bh-visualization-traffic-healthy-outline: var(--bh-color-border-success);
440
+ --bh-visualization-traffic-attention-fill: var(--bh-color-background-warning-subtle);
441
+ --bh-visualization-traffic-attention-outline: var(--bh-color-border-warning);
442
+ --bh-visualization-traffic-degraded-fill: var(--bh-color-background-warning-subtle);
443
+ --bh-visualization-traffic-degraded-outline: var(--bh-color-border-warning);
444
+ --bh-visualization-traffic-critical-fill: var(--bh-color-background-danger-subtle);
445
+ --bh-visualization-traffic-critical-outline: var(--bh-color-border-danger);
446
+ --bh-visualization-traffic-unavailable-fill: var(--bh-color-surface-subtle);
447
+ --bh-visualization-traffic-unavailable-outline: var(--bh-color-border-bold);
448
+ --bh-visualization-traffic-fault-fill: var(--bh-color-background-danger-subtle);
449
+ --bh-visualization-traffic-fault-outline: var(--bh-color-border-danger);
450
+ --bh-visualization-line-width: 2px;
451
+ --bh-visualization-sparkline-width: 1.5px;
452
+ --bh-visualization-grid-width: 1px;
453
+ --bh-visualization-sparkline-point-radius: 2px;
454
+ --bh-visualization-timeline-node-size: 16px;
455
+ --bh-visualization-timeline-node-inner-size: 8px;
456
+ --bh-visualization-timeline-node-touch-size: 18px;
457
+ --bh-visualization-timeline-node-touch-inner-size: 10px;
458
+ --bh-visualization-timeline-node-tablet-inner-size: 9px;
459
+ --bh-visualization-timeline-cluster-size: 24px;
460
+ --bh-visualization-chart-height: 120px;
461
+ --bh-visualization-chart-initial-width: 400px;
462
+ --bh-visualization-sparkline-height: 40px;
463
+ --bh-visualization-sparkline-compact-height: 32px;
464
+ --bh-visualization-sparkline-initial-width: 100px;
465
+ --bh-visualization-point-radius: 3px;
466
+ --bh-visualization-hover-point-radius: 5px;
467
+ --bh-visualization-ring-width: 10;
468
+ --bh-visualization-ring-size: 140px;
469
+ --bh-visualization-ring-gap: 75;
470
+ --bh-visualization-timeline-track-height: 6px;
471
+ --bh-visualization-activity-track-height: 10px;
472
+ --bh-z-index-sticky: 100;
473
+ --bh-z-index-navigation: 200;
474
+ --bh-z-index-overlay: 300;
475
+ --bh-z-index-modal: 400;
476
+ --bh-z-index-fullscreen: 450;
477
+ --bh-z-index-spotlight: 500;
478
+ --bh-z-index-tooltip: 600;
479
+ --bh-z-index-toast: 700;
480
+ --bh-z-index-loading: 650;
251
481
  }
252
482
  :root[data-theme='dark'] {
253
483
  --bh-color-graphite-1: #181717;
@@ -330,6 +560,11 @@
330
560
  --bh-color-background-selected-hover: var(--bh-color-graphite-5);
331
561
  --bh-color-surface: var(--bh-color-graphite-2);
332
562
  --bh-color-surface-page: var(--bh-color-graphite-1);
563
+ --bh-color-surface-overlay: var(--bh-color-graphite-3);
564
+ --bh-color-surface-overlay-hover: var(--bh-color-graphite-4);
565
+ --bh-color-surface-overlay-pressed: var(--bh-color-graphite-5);
566
+ --bh-color-surface-overlay-selected: var(--bh-color-graphite-5);
567
+ --bh-color-surface-overlay-selected-hover: var(--bh-color-graphite-5);
333
568
  --bh-color-surface-scrim: rgb(0 0 0 / 60%);
334
569
  --bh-color-border-danger: var(--bh-color-red-10);
335
570
  --bh-color-border-warning: var(--bh-color-orange-10);
@@ -338,7 +573,20 @@
338
573
  --bh-color-code-background: var(--bh-color-graphite-1);
339
574
  --bh-color-code-text: var(--bh-color-graphite-12);
340
575
  --bh-elevation-shadow-raised: 0 1px 2px rgb(0 0 0 / 40%), 0 1px 3px rgb(0 0 0 / 30%);
341
- --bh-elevation-shadow-overlay: 0 24px 80px rgb(0 0 0 / 50%);
576
+ --bh-elevation-shadow-overlay: 0 4px 12px rgb(0 0 0 / 50%);
577
+ --bh-elevation-shadow-modal: 0 8px 24px rgb(0 0 0 / 50%);
578
+ --bh-flow-category-decision-foreground: #7bdce5;
579
+ --bh-flow-category-decision-background: #123c43;
580
+ --bh-flow-category-decision-border: #7bdce5;
581
+ --bh-flow-category-decision-hover: #123c43;
582
+ --bh-flow-category-loop-foreground: #f3a0d1;
583
+ --bh-flow-category-loop-background: #411b34;
584
+ --bh-flow-category-loop-border: #f3a0d1;
585
+ --bh-flow-category-loop-hover: #411b34;
586
+ --bh-flow-category-grouped-foreground: #c9a2ee;
587
+ --bh-flow-category-grouped-background: #30213f;
588
+ --bh-flow-category-grouped-border: #c9a2ee;
589
+ --bh-flow-category-grouped-hover: #30213f;
342
590
  }
343
591
  @media (prefers-color-scheme: dark) {
344
592
  :root:not([data-theme='light']) {
@@ -422,6 +670,11 @@
422
670
  --bh-color-background-selected-hover: var(--bh-color-graphite-5);
423
671
  --bh-color-surface: var(--bh-color-graphite-2);
424
672
  --bh-color-surface-page: var(--bh-color-graphite-1);
673
+ --bh-color-surface-overlay: var(--bh-color-graphite-3);
674
+ --bh-color-surface-overlay-hover: var(--bh-color-graphite-4);
675
+ --bh-color-surface-overlay-pressed: var(--bh-color-graphite-5);
676
+ --bh-color-surface-overlay-selected: var(--bh-color-graphite-5);
677
+ --bh-color-surface-overlay-selected-hover: var(--bh-color-graphite-5);
425
678
  --bh-color-surface-scrim: rgb(0 0 0 / 60%);
426
679
  --bh-color-border-danger: var(--bh-color-red-10);
427
680
  --bh-color-border-warning: var(--bh-color-orange-10);
@@ -430,10 +683,24 @@
430
683
  --bh-color-code-background: var(--bh-color-graphite-1);
431
684
  --bh-color-code-text: var(--bh-color-graphite-12);
432
685
  --bh-elevation-shadow-raised: 0 1px 2px rgb(0 0 0 / 40%), 0 1px 3px rgb(0 0 0 / 30%);
433
- --bh-elevation-shadow-overlay: 0 24px 80px rgb(0 0 0 / 50%);
686
+ --bh-elevation-shadow-overlay: 0 4px 12px rgb(0 0 0 / 50%);
687
+ --bh-elevation-shadow-modal: 0 8px 24px rgb(0 0 0 / 50%);
688
+ --bh-flow-category-decision-foreground: #7bdce5;
689
+ --bh-flow-category-decision-background: #123c43;
690
+ --bh-flow-category-decision-border: #7bdce5;
691
+ --bh-flow-category-decision-hover: #123c43;
692
+ --bh-flow-category-loop-foreground: #f3a0d1;
693
+ --bh-flow-category-loop-background: #411b34;
694
+ --bh-flow-category-loop-border: #f3a0d1;
695
+ --bh-flow-category-loop-hover: #411b34;
696
+ --bh-flow-category-grouped-foreground: #c9a2ee;
697
+ --bh-flow-category-grouped-background: #30213f;
698
+ --bh-flow-category-grouped-border: #c9a2ee;
699
+ --bh-flow-category-grouped-hover: #30213f;
434
700
  }
435
701
  }
436
702
  :lang(vi) {
703
+ --bh-editor-font-lineHeight: 1.5rem;
437
704
  --bh-font-display-large: var(--bh-font-weight-bold) var(--bh-font-size-900)/6.75rem var(--bh-font-family-sans);
438
705
  --bh-font-display-medium: var(--bh-font-weight-bold) var(--bh-font-size-800)/5.5rem var(--bh-font-family-sans);
439
706
  --bh-font-display-small: var(--bh-font-weight-bold) var(--bh-font-size-700)/4.5rem var(--bh-font-family-sans);
@@ -447,6 +714,7 @@
447
714
  --bh-font-label-small: var(--bh-font-weight-medium) var(--bh-font-size-100)/1.25rem var(--bh-font-family-sans);
448
715
  }
449
716
  [lang]:not(:lang(vi)) {
717
+ --bh-editor-font-lineHeight: 1.25rem;
450
718
  --bh-font-display-large: var(--bh-font-weight-bold) var(--bh-font-size-900)/5rem var(--bh-font-family-sans);
451
719
  --bh-font-display-medium: var(--bh-font-weight-bold) var(--bh-font-size-800)/4.25rem var(--bh-font-family-sans);
452
720
  --bh-font-display-small: var(--bh-font-weight-bold) var(--bh-font-size-700)/3.5rem var(--bh-font-family-sans);
@@ -459,3 +727,1014 @@
459
727
  --bh-font-label-default: var(--bh-font-weight-medium) var(--bh-font-size-200)/1.25rem var(--bh-font-family-sans);
460
728
  --bh-font-label-small: var(--bh-font-weight-medium) var(--bh-font-size-100)/1rem var(--bh-font-family-sans);
461
729
  }
730
+ .bh-scope-light {
731
+ --bh-border-width-default: 1px;
732
+ --bh-border-width-selected: 2px;
733
+ --bh-border-width-focused: 2px;
734
+ --bh-border-width-accent: 4px;
735
+ --bh-breakpoint-xs: 0px;
736
+ --bh-breakpoint-md: 768px;
737
+ --bh-breakpoint-lg: 1024px;
738
+ --bh-breakpoint-xl: 1440px;
739
+ --bh-color-brand-yellow: #fcb017;
740
+ --bh-color-brand-graphite: #2b2a28;
741
+ --bh-color-brand-white: #ffffff;
742
+ --bh-color-static-white: #ffffff;
743
+ --bh-color-static-black: #000000;
744
+ --bh-color-graphite-1: #fdfdfc;
745
+ --bh-color-graphite-2: #f8f8f8;
746
+ --bh-color-graphite-3: #f2f2f1;
747
+ --bh-color-graphite-4: #e8e8e7;
748
+ --bh-color-graphite-5: #dfdedd;
749
+ --bh-color-graphite-6: #d0cfce;
750
+ --bh-color-graphite-7: #bcbbb9;
751
+ --bh-color-graphite-8: #a3a29f;
752
+ --bh-color-graphite-9: #878582;
753
+ --bh-color-graphite-10: #676663;
754
+ --bh-color-graphite-11: #494846;
755
+ --bh-color-graphite-12: #2b2a28;
756
+ --bh-color-yellow-1: #fefdf4;
757
+ --bh-color-yellow-2: #fff9dd;
758
+ --bh-color-yellow-3: #fff1bd;
759
+ --bh-color-yellow-4: #ffe59c;
760
+ --bh-color-yellow-5: #ffd87c;
761
+ --bh-color-yellow-6: #ffc757;
762
+ --bh-color-yellow-7: #fcb017;
763
+ --bh-color-yellow-8: #d68b00;
764
+ --bh-color-yellow-9: #a96700;
765
+ --bh-color-yellow-10: #905600;
766
+ --bh-color-yellow-11: #764400;
767
+ --bh-color-yellow-12: #4a3015;
768
+ --bh-color-blue-1: #fbfdff;
769
+ --bh-color-blue-2: #f4faff;
770
+ --bh-color-blue-3: #e6f4fe;
771
+ --bh-color-blue-4: #d5efff;
772
+ --bh-color-blue-5: #c2e5ff;
773
+ --bh-color-blue-6: #acd8fc;
774
+ --bh-color-blue-7: #8ec8f6;
775
+ --bh-color-blue-8: #52a1e6;
776
+ --bh-color-blue-9: #0077d5;
777
+ --bh-color-blue-10: #0064b5;
778
+ --bh-color-blue-11: #005195;
779
+ --bh-color-blue-12: #113264;
780
+ --bh-color-green-1: #fbfefc;
781
+ --bh-color-green-2: #f4fbf6;
782
+ --bh-color-green-3: #e6f6eb;
783
+ --bh-color-green-4: #d6f1df;
784
+ --bh-color-green-5: #c4e8d1;
785
+ --bh-color-green-6: #adddc0;
786
+ --bh-color-green-7: #8eceaa;
787
+ --bh-color-green-8: #51ac7d;
788
+ --bh-color-green-9: #008753;
789
+ --bh-color-green-10: #007246;
790
+ --bh-color-green-11: #005c3a;
791
+ --bh-color-green-12: #193b2d;
792
+ --bh-color-orange-1: #fefcfb;
793
+ --bh-color-orange-2: #fff7ed;
794
+ --bh-color-orange-3: #ffefd6;
795
+ --bh-color-orange-4: #ffdfb5;
796
+ --bh-color-orange-5: #ffd19a;
797
+ --bh-color-orange-6: #ffc182;
798
+ --bh-color-orange-7: #f5ae73;
799
+ --bh-color-orange-8: #df8547;
800
+ --bh-color-orange-9: #ba4e00;
801
+ --bh-color-orange-10: #a74500;
802
+ --bh-color-orange-11: #8a3600;
803
+ --bh-color-orange-12: #582d1d;
804
+ --bh-color-red-1: #fffcfc;
805
+ --bh-color-red-2: #fff7f6;
806
+ --bh-color-red-3: #feebe9;
807
+ --bh-color-red-4: #ffdbd7;
808
+ --bh-color-red-5: #ffcec8;
809
+ --bh-color-red-6: #fdbeb7;
810
+ --bh-color-red-7: #f4aaa2;
811
+ --bh-color-red-8: #eb7a71;
812
+ --bh-color-red-9: #d83b39;
813
+ --bh-color-red-10: #ba2d2d;
814
+ --bh-color-red-11: #9b1e20;
815
+ --bh-color-red-12: #641817;
816
+ --bh-color-text: var(--bh-color-graphite-12);
817
+ --bh-color-text-subtle: var(--bh-color-graphite-11);
818
+ --bh-color-text-subtlest: var(--bh-color-graphite-10);
819
+ --bh-color-text-disabled: var(--bh-color-graphite-8);
820
+ --bh-color-text-inverse: var(--bh-color-graphite-1);
821
+ --bh-color-text-on-bold: var(--bh-color-static-white);
822
+ --bh-color-text-on-brand: var(--bh-color-brand-graphite);
823
+ --bh-color-text-danger: var(--bh-color-red-11);
824
+ --bh-color-text-warning: var(--bh-color-orange-11);
825
+ --bh-color-text-success: var(--bh-color-green-11);
826
+ --bh-color-text-info: var(--bh-color-blue-11);
827
+ --bh-color-icon: var(--bh-color-graphite-11);
828
+ --bh-color-icon-subtle: var(--bh-color-graphite-10);
829
+ --bh-color-icon-disabled: var(--bh-color-graphite-8);
830
+ --bh-color-icon-inverse: var(--bh-color-graphite-1);
831
+ --bh-color-icon-on-bold: var(--bh-color-static-white);
832
+ --bh-color-icon-danger: var(--bh-color-red-11);
833
+ --bh-color-icon-warning: var(--bh-color-orange-11);
834
+ --bh-color-icon-success: var(--bh-color-green-11);
835
+ --bh-color-icon-info: var(--bh-color-blue-11);
836
+ --bh-color-link: var(--bh-color-blue-11);
837
+ --bh-color-link-hover: var(--bh-color-blue-12);
838
+ --bh-color-background-neutral: var(--bh-color-graphite-3);
839
+ --bh-color-background-neutral-hover: var(--bh-color-graphite-4);
840
+ --bh-color-background-neutral-pressed: var(--bh-color-graphite-5);
841
+ --bh-color-background-neutral-subtle: transparent;
842
+ --bh-color-background-neutral-subtle-hover: var(--bh-color-graphite-2);
843
+ --bh-color-background-neutral-subtle-pressed: var(--bh-color-graphite-3);
844
+ --bh-color-background-neutral-bold: var(--bh-color-graphite-12);
845
+ --bh-color-background-neutral-bold-hover: var(--bh-color-graphite-11);
846
+ --bh-color-background-neutral-bold-pressed: var(--bh-color-graphite-10);
847
+ --bh-color-background-selected: var(--bh-color-graphite-3);
848
+ --bh-color-background-selected-hover: var(--bh-color-graphite-4);
849
+ --bh-color-background-disabled: var(--bh-color-graphite-3);
850
+ --bh-color-background-brand-subtle: var(--bh-color-yellow-2);
851
+ --bh-color-background-brand-bold: var(--bh-color-brand-yellow);
852
+ --bh-color-background-danger-subtle: var(--bh-color-red-3);
853
+ --bh-color-background-danger-subtle-hover: var(--bh-color-red-4);
854
+ --bh-color-background-danger-subtle-pressed: var(--bh-color-red-5);
855
+ --bh-color-background-danger: var(--bh-color-red-5);
856
+ --bh-color-background-danger-bold: var(--bh-color-red-9);
857
+ --bh-color-background-danger-bold-hover: var(--bh-color-red-10);
858
+ --bh-color-background-danger-bold-pressed: var(--bh-color-red-11);
859
+ --bh-color-background-warning-subtle: var(--bh-color-orange-3);
860
+ --bh-color-background-warning-subtle-hover: var(--bh-color-orange-4);
861
+ --bh-color-background-warning-subtle-pressed: var(--bh-color-orange-5);
862
+ --bh-color-background-warning: var(--bh-color-orange-5);
863
+ --bh-color-background-warning-bold: var(--bh-color-orange-9);
864
+ --bh-color-background-warning-bold-hover: var(--bh-color-orange-10);
865
+ --bh-color-background-warning-bold-pressed: var(--bh-color-orange-11);
866
+ --bh-color-background-success-subtle: var(--bh-color-green-3);
867
+ --bh-color-background-success-subtle-hover: var(--bh-color-green-4);
868
+ --bh-color-background-success-subtle-pressed: var(--bh-color-green-5);
869
+ --bh-color-background-success: var(--bh-color-green-5);
870
+ --bh-color-background-success-bold: var(--bh-color-green-9);
871
+ --bh-color-background-success-bold-hover: var(--bh-color-green-10);
872
+ --bh-color-background-success-bold-pressed: var(--bh-color-green-11);
873
+ --bh-color-background-info-subtle: var(--bh-color-blue-3);
874
+ --bh-color-background-info-subtle-hover: var(--bh-color-blue-4);
875
+ --bh-color-background-info-subtle-pressed: var(--bh-color-blue-5);
876
+ --bh-color-background-info: var(--bh-color-blue-5);
877
+ --bh-color-background-info-bold: var(--bh-color-blue-9);
878
+ --bh-color-background-info-bold-hover: var(--bh-color-blue-10);
879
+ --bh-color-background-info-bold-pressed: var(--bh-color-blue-11);
880
+ --bh-color-surface: var(--bh-color-brand-white);
881
+ --bh-color-surface-page: var(--bh-color-brand-white);
882
+ --bh-color-surface-subtle: var(--bh-color-graphite-2);
883
+ --bh-color-surface-overlay: var(--bh-color-brand-white);
884
+ --bh-color-surface-overlay-hover: var(--bh-color-graphite-2);
885
+ --bh-color-surface-overlay-pressed: var(--bh-color-graphite-3);
886
+ --bh-color-surface-overlay-selected: var(--bh-color-graphite-3);
887
+ --bh-color-surface-overlay-selected-hover: var(--bh-color-graphite-4);
888
+ --bh-color-surface-inverse: var(--bh-color-graphite-12);
889
+ --bh-color-surface-scrim: rgb(43 42 40 / 40%);
890
+ --bh-color-border: var(--bh-color-graphite-6);
891
+ --bh-color-border-bold: var(--bh-color-graphite-9);
892
+ --bh-color-border-disabled: var(--bh-color-graphite-6);
893
+ --bh-color-border-focus: var(--bh-color-blue-11);
894
+ --bh-color-border-selected: var(--bh-color-brand-yellow);
895
+ --bh-color-border-brand: var(--bh-color-brand-yellow);
896
+ --bh-color-border-brand-subtle: var(--bh-color-yellow-6);
897
+ --bh-color-border-danger: var(--bh-color-red-9);
898
+ --bh-color-border-danger-subtle: var(--bh-color-red-7);
899
+ --bh-color-border-warning: var(--bh-color-orange-9);
900
+ --bh-color-border-warning-subtle: var(--bh-color-orange-7);
901
+ --bh-color-border-success: var(--bh-color-green-9);
902
+ --bh-color-border-success-subtle: var(--bh-color-green-7);
903
+ --bh-color-border-info: var(--bh-color-blue-9);
904
+ --bh-color-border-info-subtle: var(--bh-color-blue-7);
905
+ --bh-color-skeleton: var(--bh-color-graphite-4);
906
+ --bh-color-skeleton-subtle: var(--bh-color-graphite-3);
907
+ --bh-color-code-background: var(--bh-color-brand-graphite);
908
+ --bh-color-code-text: var(--bh-color-graphite-2);
909
+ --bh-content-partner-logo-size: 2.5rem;
910
+ --bh-content-partner-logo-image-size: 1.75rem;
911
+ --bh-content-avatar-size: 2.5rem;
912
+ --bh-content-identity-mark-size: 2.75rem;
913
+ --bh-content-identity-mark-image-size: 1.5rem;
914
+ --bh-content-empty-illustration-size: 6rem;
915
+ --bh-diagram-canvas: var(--bh-color-surface-page);
916
+ --bh-diagram-node-fill: var(--bh-color-surface);
917
+ --bh-diagram-node-border: var(--bh-color-border-bold);
918
+ --bh-diagram-node-title: var(--bh-color-text);
919
+ --bh-diagram-node-desc: var(--bh-color-text-subtle);
920
+ --bh-diagram-tile-bg: var(--bh-color-background-neutral);
921
+ --bh-diagram-tile-glyph: var(--bh-color-icon);
922
+ --bh-diagram-state-ran-ok: var(--bh-color-text-subtle);
923
+ --bh-diagram-ran-ok-fill: var(--bh-color-surface);
924
+ --bh-diagram-fail-stroke: var(--bh-color-border-danger);
925
+ --bh-diagram-fail-fill: var(--bh-color-background-danger-subtle);
926
+ --bh-diagram-fail-title: var(--bh-color-text-danger);
927
+ --bh-diagram-fail-desc: var(--bh-color-text-danger);
928
+ --bh-diagram-unreached-fill: var(--bh-color-surface-subtle);
929
+ --bh-diagram-unreached-stroke: var(--bh-color-border-bold);
930
+ --bh-diagram-unreached-title: var(--bh-color-text-subtle);
931
+ --bh-diagram-unreached-desc: var(--bh-color-text-subtle);
932
+ --bh-diagram-nottaken-stroke: var(--bh-color-text-subtle);
933
+ --bh-diagram-nottaken-fill: var(--bh-color-surface);
934
+ --bh-diagram-nottaken-title: var(--bh-color-text);
935
+ --bh-diagram-nottaken-desc: var(--bh-color-text-subtle);
936
+ --bh-diagram-badge-bg: var(--bh-color-surface);
937
+ --bh-diagram-badge-text: var(--bh-color-text-subtle);
938
+ --bh-diagram-badge-border: var(--bh-color-border-bold);
939
+ --bh-diagram-edge: var(--bh-color-border-bold);
940
+ --bh-diagram-edge-label-text: var(--bh-color-text-subtle);
941
+ --bh-diagram-edge-label-bg: var(--bh-color-surface-page);
942
+ --bh-diagram-panel-bg: var(--bh-color-surface);
943
+ --bh-diagram-panel-border: var(--bh-color-border);
944
+ --bh-diagram-code-bg: var(--bh-color-surface);
945
+ --bh-diagram-code-key: var(--bh-color-text-subtle);
946
+ --bh-diagram-code-value: var(--bh-color-text);
947
+ --bh-diagram-selection-ring: var(--bh-color-border-focus);
948
+ --bh-diagram-node-font: var(--bh-font-body-default);
949
+ --bh-diagram-card-width: 15rem;
950
+ --bh-diagram-tile-size: 2.75rem;
951
+ --bh-diagram-glyph-size: 2rem;
952
+ --bh-diagram-preview-height: 45rem;
953
+ --bh-diagram-minimum-height: 20rem;
954
+ --bh-diagram-evidence-height: 13.75rem;
955
+ --bh-diagram-evidence-minimum-height: 12rem;
956
+ --bh-diagram-padding: var(--bh-space-100);
957
+ --bh-diagram-export-padding: var(--bh-space-300);
958
+ --bh-editor-background: var(--bh-color-surface);
959
+ --bh-editor-text: var(--bh-color-text);
960
+ --bh-editor-gutter: var(--bh-color-surface-subtle);
961
+ --bh-editor-lineNumber: var(--bh-color-text-subtlest);
962
+ --bh-editor-selection: var(--bh-color-background-selected);
963
+ --bh-editor-lineHighlight: var(--bh-color-surface-subtle);
964
+ --bh-editor-cursor: var(--bh-color-text);
965
+ --bh-editor-border: var(--bh-color-border);
966
+ --bh-editor-syntax-comment: var(--bh-color-text-subtlest);
967
+ --bh-editor-syntax-string: var(--bh-color-text-success);
968
+ --bh-editor-syntax-number: var(--bh-color-text-warning);
969
+ --bh-editor-syntax-keyword: var(--bh-color-text-info);
970
+ --bh-editor-syntax-type: var(--bh-color-text);
971
+ --bh-editor-syntax-delimiter: var(--bh-color-text-subtle);
972
+ --bh-editor-diff-inserted-background: var(--bh-color-background-success-subtle);
973
+ --bh-editor-diff-inserted-text: var(--bh-color-text-success);
974
+ --bh-editor-diff-removed-background: var(--bh-color-background-danger-subtle);
975
+ --bh-editor-diff-removed-text: var(--bh-color-text-danger);
976
+ --bh-editor-font-family: var(--bh-font-family-mono);
977
+ --bh-editor-font-size: var(--bh-font-size-200);
978
+ --bh-editor-font-lineHeight: 1.25rem;
979
+ --bh-editor-font-weight: var(--bh-font-weight-regular);
980
+ --bh-elevation-shadow-raised: 0 1px 2px rgb(43 42 40 / 8%), 0 1px 3px rgb(43 42 40 / 6%);
981
+ --bh-elevation-shadow-overlay: 0 4px 12px rgb(43 42 40 / 15%);
982
+ --bh-elevation-shadow-modal: 0 8px 24px rgb(43 42 40 / 15%);
983
+ --bh-flow-category-task-foreground: var(--bh-color-blue-11);
984
+ --bh-flow-category-task-background: var(--bh-color-blue-3);
985
+ --bh-flow-category-task-border: var(--bh-color-blue-9);
986
+ --bh-flow-category-task-hover: var(--bh-color-blue-4);
987
+ --bh-flow-category-dependency-foreground: var(--bh-color-red-11);
988
+ --bh-flow-category-dependency-background: var(--bh-color-red-3);
989
+ --bh-flow-category-dependency-border: var(--bh-color-red-9);
990
+ --bh-flow-category-dependency-hover: var(--bh-color-red-4);
991
+ --bh-flow-category-transformation-foreground: var(--bh-color-green-11);
992
+ --bh-flow-category-transformation-background: var(--bh-color-green-3);
993
+ --bh-flow-category-transformation-border: var(--bh-color-green-9);
994
+ --bh-flow-category-transformation-hover: var(--bh-color-green-4);
995
+ --bh-flow-category-validation-foreground: var(--bh-color-red-11);
996
+ --bh-flow-category-validation-background: var(--bh-color-red-3);
997
+ --bh-flow-category-validation-border: var(--bh-color-red-11);
998
+ --bh-flow-category-validation-hover: var(--bh-color-red-4);
999
+ --bh-flow-category-pushStep-foreground: var(--bh-color-yellow-11);
1000
+ --bh-flow-category-pushStep-background: var(--bh-color-yellow-3);
1001
+ --bh-flow-category-pushStep-border: var(--bh-color-yellow-9);
1002
+ --bh-flow-category-pushStep-hover: var(--bh-color-yellow-4);
1003
+ --bh-flow-category-decision-foreground: #087f8c;
1004
+ --bh-flow-category-decision-background: #e8f8fa;
1005
+ --bh-flow-category-decision-border: #087f8c;
1006
+ --bh-flow-category-decision-hover: #e8f8fa;
1007
+ --bh-flow-category-loop-foreground: #ad2171;
1008
+ --bh-flow-category-loop-background: #fcecf5;
1009
+ --bh-flow-category-loop-border: #ad2171;
1010
+ --bh-flow-category-loop-hover: #fcecf5;
1011
+ --bh-flow-category-grouped-foreground: #7040a0;
1012
+ --bh-flow-category-grouped-background: #f3ecfa;
1013
+ --bh-flow-category-grouped-border: #7040a0;
1014
+ --bh-flow-category-grouped-hover: #f3ecfa;
1015
+ --bh-flow-geometry-task-width: 450px;
1016
+ --bh-flow-geometry-task-height: 130px;
1017
+ --bh-flow-geometry-task_dependency-width: 450px;
1018
+ --bh-flow-geometry-task_dependency-height: 130px;
1019
+ --bh-flow-geometry-task_transformation-width: 450px;
1020
+ --bh-flow-geometry-task_transformation-height: 130px;
1021
+ --bh-flow-geometry-task_data-width: 450px;
1022
+ --bh-flow-geometry-task_data-height: 130px;
1023
+ --bh-flow-geometry-validationGroup-width: 350px;
1024
+ --bh-flow-geometry-validationGroup-height: 130px;
1025
+ --bh-flow-geometry-transformationGroup-width: 350px;
1026
+ --bh-flow-geometry-transformationGroup-height: 130px;
1027
+ --bh-flow-geometry-pushStepsGroup-width: 350px;
1028
+ --bh-flow-geometry-pushStepsGroup-height: 130px;
1029
+ --bh-flow-geometry-validation-width: 200px;
1030
+ --bh-flow-geometry-validation-height: 130px;
1031
+ --bh-flow-geometry-transformation-width: 200px;
1032
+ --bh-flow-geometry-transformation-height: 130px;
1033
+ --bh-flow-geometry-push_step-width: 200px;
1034
+ --bh-flow-geometry-push_step-height: 130px;
1035
+ --bh-flow-geometry-decision-width: 160px;
1036
+ --bh-flow-geometry-decision-height: 160px;
1037
+ --bh-flow-geometry-loop-width: 120px;
1038
+ --bh-flow-geometry-loop-height: 120px;
1039
+ --bh-flow-geometry-profile-width: 240px;
1040
+ --bh-flow-geometry-profile-height: 100px;
1041
+ --bh-flow-grid-HORIZONTAL: 80px;
1042
+ --bh-flow-grid-VERTICAL: 40px;
1043
+ --bh-flow-grid-TASK_DATA_X_GAP: 300px;
1044
+ --bh-flow-grid-GROUP_Y_OFFSET: 200px;
1045
+ --bh-flow-layout-VALIDATION_NODE_Y_GAP: 100px;
1046
+ --bh-flow-layout-TRANSFORMATION_NODE_Y_GAP: 100px;
1047
+ --bh-flow-layout-PUSH_STEP_NODE_Y_GAP: 80px;
1048
+ --bh-flow-layout-PUSH_STEP_NODE_X_GAP: 120px;
1049
+ --bh-flow-layout-PUSH_STEP_BRANCH_X_GAP: 200px;
1050
+ --bh-flow-layout-EXPANDED_GROUP_X: 50px;
1051
+ --bh-flow-layout-EXPANDED_GROUP_Y_START: 50px;
1052
+ --bh-flow-layout-TREE_LEVEL_Y_GAP: 150px;
1053
+ --bh-flow-layout-TREE_SIBLING_X_GAP: 250px;
1054
+ --bh-flow-layout-TREE_MIN_WIDTH: 200px;
1055
+ --bh-flow-edge-width: 2px;
1056
+ --bh-flow-edge-marker: 15px;
1057
+ --bh-flow-edge-radius: 20px;
1058
+ --bh-flow-edge-handle: 12px;
1059
+ --bh-layout-header-height: var(--bh-space-600);
1060
+ --bh-layout-sidebar-expanded: 17.5rem;
1061
+ --bh-layout-sidebar-collapsed: var(--bh-space-800);
1062
+ --bh-layout-page-narrow: 48rem;
1063
+ --bh-layout-page-wide: 80rem;
1064
+ --bh-layout-page-margin-small: var(--bh-space-200);
1065
+ --bh-layout-page-margin-medium: var(--bh-space-300);
1066
+ --bh-layout-page-margin-large: var(--bh-space-400);
1067
+ --bh-layout-overlay-default: max(50vw, 900px);
1068
+ --bh-layout-overlay-wide: 70vw;
1069
+ --bh-layout-overlay-mobile: 100vw;
1070
+ --bh-layout-description-minimum: 12.5rem;
1071
+ --bh-motion-duration-fast: 100ms;
1072
+ --bh-motion-duration-default: 200ms;
1073
+ --bh-motion-duration-slow: 300ms;
1074
+ --bh-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
1075
+ --bh-opacity-disabled: 0.4;
1076
+ --bh-radius-0: 0;
1077
+ --bh-radius-100: 0.5rem;
1078
+ --bh-radius-150: 0.75rem;
1079
+ --bh-radius-200: 1rem;
1080
+ --bh-radius-025: 0.125rem;
1081
+ --bh-radius-050: 0.25rem;
1082
+ --bh-radius-075: 0.375rem;
1083
+ --bh-radius-full: 999px;
1084
+ --bh-resize-divider: var(--bh-border-width-accent);
1085
+ --bh-resize-target: var(--bh-size-target-minimum);
1086
+ --bh-resize-touchTarget: var(--bh-size-target-touch);
1087
+ --bh-resize-handle-width: var(--bh-space-200);
1088
+ --bh-resize-handle-height: var(--bh-space-400);
1089
+ --bh-resize-handle-radius: var(--bh-radius-050);
1090
+ --bh-resize-handle-background: var(--bh-color-surface);
1091
+ --bh-resize-handle-activeBackground: var(--bh-color-background-neutral-bold);
1092
+ --bh-resize-color: var(--bh-color-border-bold);
1093
+ --bh-resize-active: var(--bh-color-border-focus);
1094
+ --bh-resize-grip: var(--bh-color-icon);
1095
+ --bh-resize-activeGrip: var(--bh-color-text-inverse);
1096
+ --bh-size-icon-default: 1rem;
1097
+ --bh-size-icon-medium: 1.25rem;
1098
+ --bh-size-icon-large: 1.5rem;
1099
+ --bh-size-icon-empty: 2rem;
1100
+ --bh-size-control-small: 1.5rem;
1101
+ --bh-size-control-default: 2rem;
1102
+ --bh-size-control-large: 2.5rem;
1103
+ --bh-size-target-minimum: 1.5rem;
1104
+ --bh-size-target-touch: 2.75rem;
1105
+ --bh-space-0: 0;
1106
+ --bh-space-100: 0.5rem;
1107
+ --bh-space-150: 0.75rem;
1108
+ --bh-space-200: 1rem;
1109
+ --bh-space-250: 1.25rem;
1110
+ --bh-space-300: 1.5rem;
1111
+ --bh-space-400: 2rem;
1112
+ --bh-space-500: 2.5rem;
1113
+ --bh-space-600: 3rem;
1114
+ --bh-space-800: 4rem;
1115
+ --bh-space-1000: 5rem;
1116
+ --bh-space-025: 0.125rem;
1117
+ --bh-space-050: 0.25rem;
1118
+ --bh-space-075: 0.375rem;
1119
+ --bh-state-focus-offset: 2px;
1120
+ --bh-visualization-metric-total-jobs: var(--bh-color-text-info);
1121
+ --bh-visualization-metric-success-rate: var(--bh-color-text-success);
1122
+ --bh-visualization-metric-completed: var(--bh-color-text-success);
1123
+ --bh-visualization-metric-failed: var(--bh-color-text-danger);
1124
+ --bh-visualization-metric-active-jobs: var(--bh-color-text-info);
1125
+ --bh-visualization-metric-avg-execution-time: var(--bh-color-text-subtle);
1126
+ --bh-visualization-metric-queue-depth: var(--bh-color-text);
1127
+ --bh-visualization-job-type-queue-status: var(--bh-color-blue-11);
1128
+ --bh-visualization-job-type-sync-history: var(--bh-color-green-11);
1129
+ --bh-visualization-job-type-polling-jobs: var(--bh-color-orange-11);
1130
+ --bh-visualization-job-type-generic-jobs: var(--bh-color-graphite-11);
1131
+ --bh-visualization-priority-1: var(--bh-color-text-danger);
1132
+ --bh-visualization-priority-2: var(--bh-color-text-warning);
1133
+ --bh-visualization-priority-3: var(--bh-color-text-info);
1134
+ --bh-visualization-priority-4: var(--bh-color-text-subtle);
1135
+ --bh-visualization-priority-5: var(--bh-color-text-subtlest);
1136
+ --bh-visualization-traffic-healthy-fill: var(--bh-color-background-success-subtle);
1137
+ --bh-visualization-traffic-healthy-outline: var(--bh-color-border-success);
1138
+ --bh-visualization-traffic-attention-fill: var(--bh-color-background-warning-subtle);
1139
+ --bh-visualization-traffic-attention-outline: var(--bh-color-border-warning);
1140
+ --bh-visualization-traffic-degraded-fill: var(--bh-color-background-warning-subtle);
1141
+ --bh-visualization-traffic-degraded-outline: var(--bh-color-border-warning);
1142
+ --bh-visualization-traffic-critical-fill: var(--bh-color-background-danger-subtle);
1143
+ --bh-visualization-traffic-critical-outline: var(--bh-color-border-danger);
1144
+ --bh-visualization-traffic-unavailable-fill: var(--bh-color-surface-subtle);
1145
+ --bh-visualization-traffic-unavailable-outline: var(--bh-color-border-bold);
1146
+ --bh-visualization-traffic-fault-fill: var(--bh-color-background-danger-subtle);
1147
+ --bh-visualization-traffic-fault-outline: var(--bh-color-border-danger);
1148
+ --bh-visualization-line-width: 2px;
1149
+ --bh-visualization-sparkline-width: 1.5px;
1150
+ --bh-visualization-grid-width: 1px;
1151
+ --bh-visualization-sparkline-point-radius: 2px;
1152
+ --bh-visualization-timeline-node-size: 16px;
1153
+ --bh-visualization-timeline-node-inner-size: 8px;
1154
+ --bh-visualization-timeline-node-touch-size: 18px;
1155
+ --bh-visualization-timeline-node-touch-inner-size: 10px;
1156
+ --bh-visualization-timeline-node-tablet-inner-size: 9px;
1157
+ --bh-visualization-timeline-cluster-size: 24px;
1158
+ --bh-visualization-chart-height: 120px;
1159
+ --bh-visualization-chart-initial-width: 400px;
1160
+ --bh-visualization-sparkline-height: 40px;
1161
+ --bh-visualization-sparkline-compact-height: 32px;
1162
+ --bh-visualization-sparkline-initial-width: 100px;
1163
+ --bh-visualization-point-radius: 3px;
1164
+ --bh-visualization-hover-point-radius: 5px;
1165
+ --bh-visualization-ring-width: 10;
1166
+ --bh-visualization-ring-size: 140px;
1167
+ --bh-visualization-ring-gap: 75;
1168
+ --bh-visualization-timeline-track-height: 6px;
1169
+ --bh-visualization-activity-track-height: 10px;
1170
+ --bh-z-index-sticky: 100;
1171
+ --bh-z-index-navigation: 200;
1172
+ --bh-z-index-overlay: 300;
1173
+ --bh-z-index-modal: 400;
1174
+ --bh-z-index-fullscreen: 450;
1175
+ --bh-z-index-spotlight: 500;
1176
+ --bh-z-index-tooltip: 600;
1177
+ --bh-z-index-toast: 700;
1178
+ --bh-z-index-loading: 650;
1179
+ color-scheme: light;
1180
+ }
1181
+ .bh-scope-dark {
1182
+ --bh-border-width-default: 1px;
1183
+ --bh-border-width-selected: 2px;
1184
+ --bh-border-width-focused: 2px;
1185
+ --bh-border-width-accent: 4px;
1186
+ --bh-breakpoint-xs: 0px;
1187
+ --bh-breakpoint-md: 768px;
1188
+ --bh-breakpoint-lg: 1024px;
1189
+ --bh-breakpoint-xl: 1440px;
1190
+ --bh-color-brand-yellow: #fcb017;
1191
+ --bh-color-brand-graphite: #2b2a28;
1192
+ --bh-color-brand-white: #ffffff;
1193
+ --bh-color-static-white: #ffffff;
1194
+ --bh-color-static-black: #000000;
1195
+ --bh-color-graphite-1: #fdfdfc;
1196
+ --bh-color-graphite-2: #f8f8f8;
1197
+ --bh-color-graphite-3: #f2f2f1;
1198
+ --bh-color-graphite-4: #e8e8e7;
1199
+ --bh-color-graphite-5: #dfdedd;
1200
+ --bh-color-graphite-6: #d0cfce;
1201
+ --bh-color-graphite-7: #bcbbb9;
1202
+ --bh-color-graphite-8: #a3a29f;
1203
+ --bh-color-graphite-9: #878582;
1204
+ --bh-color-graphite-10: #676663;
1205
+ --bh-color-graphite-11: #494846;
1206
+ --bh-color-graphite-12: #2b2a28;
1207
+ --bh-color-yellow-1: #fefdf4;
1208
+ --bh-color-yellow-2: #fff9dd;
1209
+ --bh-color-yellow-3: #fff1bd;
1210
+ --bh-color-yellow-4: #ffe59c;
1211
+ --bh-color-yellow-5: #ffd87c;
1212
+ --bh-color-yellow-6: #ffc757;
1213
+ --bh-color-yellow-7: #fcb017;
1214
+ --bh-color-yellow-8: #d68b00;
1215
+ --bh-color-yellow-9: #a96700;
1216
+ --bh-color-yellow-10: #905600;
1217
+ --bh-color-yellow-11: #764400;
1218
+ --bh-color-yellow-12: #4a3015;
1219
+ --bh-color-blue-1: #fbfdff;
1220
+ --bh-color-blue-2: #f4faff;
1221
+ --bh-color-blue-3: #e6f4fe;
1222
+ --bh-color-blue-4: #d5efff;
1223
+ --bh-color-blue-5: #c2e5ff;
1224
+ --bh-color-blue-6: #acd8fc;
1225
+ --bh-color-blue-7: #8ec8f6;
1226
+ --bh-color-blue-8: #52a1e6;
1227
+ --bh-color-blue-9: #0077d5;
1228
+ --bh-color-blue-10: #0064b5;
1229
+ --bh-color-blue-11: #005195;
1230
+ --bh-color-blue-12: #113264;
1231
+ --bh-color-green-1: #fbfefc;
1232
+ --bh-color-green-2: #f4fbf6;
1233
+ --bh-color-green-3: #e6f6eb;
1234
+ --bh-color-green-4: #d6f1df;
1235
+ --bh-color-green-5: #c4e8d1;
1236
+ --bh-color-green-6: #adddc0;
1237
+ --bh-color-green-7: #8eceaa;
1238
+ --bh-color-green-8: #51ac7d;
1239
+ --bh-color-green-9: #008753;
1240
+ --bh-color-green-10: #007246;
1241
+ --bh-color-green-11: #005c3a;
1242
+ --bh-color-green-12: #193b2d;
1243
+ --bh-color-orange-1: #fefcfb;
1244
+ --bh-color-orange-2: #fff7ed;
1245
+ --bh-color-orange-3: #ffefd6;
1246
+ --bh-color-orange-4: #ffdfb5;
1247
+ --bh-color-orange-5: #ffd19a;
1248
+ --bh-color-orange-6: #ffc182;
1249
+ --bh-color-orange-7: #f5ae73;
1250
+ --bh-color-orange-8: #df8547;
1251
+ --bh-color-orange-9: #ba4e00;
1252
+ --bh-color-orange-10: #a74500;
1253
+ --bh-color-orange-11: #8a3600;
1254
+ --bh-color-orange-12: #582d1d;
1255
+ --bh-color-red-1: #fffcfc;
1256
+ --bh-color-red-2: #fff7f6;
1257
+ --bh-color-red-3: #feebe9;
1258
+ --bh-color-red-4: #ffdbd7;
1259
+ --bh-color-red-5: #ffcec8;
1260
+ --bh-color-red-6: #fdbeb7;
1261
+ --bh-color-red-7: #f4aaa2;
1262
+ --bh-color-red-8: #eb7a71;
1263
+ --bh-color-red-9: #d83b39;
1264
+ --bh-color-red-10: #ba2d2d;
1265
+ --bh-color-red-11: #9b1e20;
1266
+ --bh-color-red-12: #641817;
1267
+ --bh-color-text: var(--bh-color-graphite-12);
1268
+ --bh-color-text-subtle: var(--bh-color-graphite-11);
1269
+ --bh-color-text-subtlest: var(--bh-color-graphite-10);
1270
+ --bh-color-text-disabled: var(--bh-color-graphite-8);
1271
+ --bh-color-text-inverse: var(--bh-color-graphite-1);
1272
+ --bh-color-text-on-bold: var(--bh-color-static-white);
1273
+ --bh-color-text-on-brand: var(--bh-color-brand-graphite);
1274
+ --bh-color-text-danger: var(--bh-color-red-11);
1275
+ --bh-color-text-warning: var(--bh-color-orange-11);
1276
+ --bh-color-text-success: var(--bh-color-green-11);
1277
+ --bh-color-text-info: var(--bh-color-blue-11);
1278
+ --bh-color-icon: var(--bh-color-graphite-11);
1279
+ --bh-color-icon-subtle: var(--bh-color-graphite-10);
1280
+ --bh-color-icon-disabled: var(--bh-color-graphite-8);
1281
+ --bh-color-icon-inverse: var(--bh-color-graphite-1);
1282
+ --bh-color-icon-on-bold: var(--bh-color-static-white);
1283
+ --bh-color-icon-danger: var(--bh-color-red-11);
1284
+ --bh-color-icon-warning: var(--bh-color-orange-11);
1285
+ --bh-color-icon-success: var(--bh-color-green-11);
1286
+ --bh-color-icon-info: var(--bh-color-blue-11);
1287
+ --bh-color-link: var(--bh-color-blue-11);
1288
+ --bh-color-link-hover: var(--bh-color-blue-12);
1289
+ --bh-color-background-neutral: var(--bh-color-graphite-3);
1290
+ --bh-color-background-neutral-hover: var(--bh-color-graphite-4);
1291
+ --bh-color-background-neutral-pressed: var(--bh-color-graphite-5);
1292
+ --bh-color-background-neutral-subtle: transparent;
1293
+ --bh-color-background-neutral-subtle-hover: var(--bh-color-graphite-2);
1294
+ --bh-color-background-neutral-subtle-pressed: var(--bh-color-graphite-3);
1295
+ --bh-color-background-neutral-bold: var(--bh-color-graphite-12);
1296
+ --bh-color-background-neutral-bold-hover: var(--bh-color-graphite-11);
1297
+ --bh-color-background-neutral-bold-pressed: var(--bh-color-graphite-10);
1298
+ --bh-color-background-selected: var(--bh-color-graphite-3);
1299
+ --bh-color-background-selected-hover: var(--bh-color-graphite-4);
1300
+ --bh-color-background-disabled: var(--bh-color-graphite-3);
1301
+ --bh-color-background-brand-subtle: var(--bh-color-yellow-2);
1302
+ --bh-color-background-brand-bold: var(--bh-color-brand-yellow);
1303
+ --bh-color-background-danger-subtle: var(--bh-color-red-3);
1304
+ --bh-color-background-danger-subtle-hover: var(--bh-color-red-4);
1305
+ --bh-color-background-danger-subtle-pressed: var(--bh-color-red-5);
1306
+ --bh-color-background-danger: var(--bh-color-red-5);
1307
+ --bh-color-background-danger-bold: var(--bh-color-red-9);
1308
+ --bh-color-background-danger-bold-hover: var(--bh-color-red-10);
1309
+ --bh-color-background-danger-bold-pressed: var(--bh-color-red-11);
1310
+ --bh-color-background-warning-subtle: var(--bh-color-orange-3);
1311
+ --bh-color-background-warning-subtle-hover: var(--bh-color-orange-4);
1312
+ --bh-color-background-warning-subtle-pressed: var(--bh-color-orange-5);
1313
+ --bh-color-background-warning: var(--bh-color-orange-5);
1314
+ --bh-color-background-warning-bold: var(--bh-color-orange-9);
1315
+ --bh-color-background-warning-bold-hover: var(--bh-color-orange-10);
1316
+ --bh-color-background-warning-bold-pressed: var(--bh-color-orange-11);
1317
+ --bh-color-background-success-subtle: var(--bh-color-green-3);
1318
+ --bh-color-background-success-subtle-hover: var(--bh-color-green-4);
1319
+ --bh-color-background-success-subtle-pressed: var(--bh-color-green-5);
1320
+ --bh-color-background-success: var(--bh-color-green-5);
1321
+ --bh-color-background-success-bold: var(--bh-color-green-9);
1322
+ --bh-color-background-success-bold-hover: var(--bh-color-green-10);
1323
+ --bh-color-background-success-bold-pressed: var(--bh-color-green-11);
1324
+ --bh-color-background-info-subtle: var(--bh-color-blue-3);
1325
+ --bh-color-background-info-subtle-hover: var(--bh-color-blue-4);
1326
+ --bh-color-background-info-subtle-pressed: var(--bh-color-blue-5);
1327
+ --bh-color-background-info: var(--bh-color-blue-5);
1328
+ --bh-color-background-info-bold: var(--bh-color-blue-9);
1329
+ --bh-color-background-info-bold-hover: var(--bh-color-blue-10);
1330
+ --bh-color-background-info-bold-pressed: var(--bh-color-blue-11);
1331
+ --bh-color-surface: var(--bh-color-brand-white);
1332
+ --bh-color-surface-page: var(--bh-color-brand-white);
1333
+ --bh-color-surface-subtle: var(--bh-color-graphite-2);
1334
+ --bh-color-surface-overlay: var(--bh-color-brand-white);
1335
+ --bh-color-surface-overlay-hover: var(--bh-color-graphite-2);
1336
+ --bh-color-surface-overlay-pressed: var(--bh-color-graphite-3);
1337
+ --bh-color-surface-overlay-selected: var(--bh-color-graphite-3);
1338
+ --bh-color-surface-overlay-selected-hover: var(--bh-color-graphite-4);
1339
+ --bh-color-surface-inverse: var(--bh-color-graphite-12);
1340
+ --bh-color-surface-scrim: rgb(43 42 40 / 40%);
1341
+ --bh-color-border: var(--bh-color-graphite-6);
1342
+ --bh-color-border-bold: var(--bh-color-graphite-9);
1343
+ --bh-color-border-disabled: var(--bh-color-graphite-6);
1344
+ --bh-color-border-focus: var(--bh-color-blue-11);
1345
+ --bh-color-border-selected: var(--bh-color-brand-yellow);
1346
+ --bh-color-border-brand: var(--bh-color-brand-yellow);
1347
+ --bh-color-border-brand-subtle: var(--bh-color-yellow-6);
1348
+ --bh-color-border-danger: var(--bh-color-red-9);
1349
+ --bh-color-border-danger-subtle: var(--bh-color-red-7);
1350
+ --bh-color-border-warning: var(--bh-color-orange-9);
1351
+ --bh-color-border-warning-subtle: var(--bh-color-orange-7);
1352
+ --bh-color-border-success: var(--bh-color-green-9);
1353
+ --bh-color-border-success-subtle: var(--bh-color-green-7);
1354
+ --bh-color-border-info: var(--bh-color-blue-9);
1355
+ --bh-color-border-info-subtle: var(--bh-color-blue-7);
1356
+ --bh-color-skeleton: var(--bh-color-graphite-4);
1357
+ --bh-color-skeleton-subtle: var(--bh-color-graphite-3);
1358
+ --bh-color-code-background: var(--bh-color-brand-graphite);
1359
+ --bh-color-code-text: var(--bh-color-graphite-2);
1360
+ --bh-content-partner-logo-size: 2.5rem;
1361
+ --bh-content-partner-logo-image-size: 1.75rem;
1362
+ --bh-content-avatar-size: 2.5rem;
1363
+ --bh-content-identity-mark-size: 2.75rem;
1364
+ --bh-content-identity-mark-image-size: 1.5rem;
1365
+ --bh-content-empty-illustration-size: 6rem;
1366
+ --bh-diagram-canvas: var(--bh-color-surface-page);
1367
+ --bh-diagram-node-fill: var(--bh-color-surface);
1368
+ --bh-diagram-node-border: var(--bh-color-border-bold);
1369
+ --bh-diagram-node-title: var(--bh-color-text);
1370
+ --bh-diagram-node-desc: var(--bh-color-text-subtle);
1371
+ --bh-diagram-tile-bg: var(--bh-color-background-neutral);
1372
+ --bh-diagram-tile-glyph: var(--bh-color-icon);
1373
+ --bh-diagram-state-ran-ok: var(--bh-color-text-subtle);
1374
+ --bh-diagram-ran-ok-fill: var(--bh-color-surface);
1375
+ --bh-diagram-fail-stroke: var(--bh-color-border-danger);
1376
+ --bh-diagram-fail-fill: var(--bh-color-background-danger-subtle);
1377
+ --bh-diagram-fail-title: var(--bh-color-text-danger);
1378
+ --bh-diagram-fail-desc: var(--bh-color-text-danger);
1379
+ --bh-diagram-unreached-fill: var(--bh-color-surface-subtle);
1380
+ --bh-diagram-unreached-stroke: var(--bh-color-border-bold);
1381
+ --bh-diagram-unreached-title: var(--bh-color-text-subtle);
1382
+ --bh-diagram-unreached-desc: var(--bh-color-text-subtle);
1383
+ --bh-diagram-nottaken-stroke: var(--bh-color-text-subtle);
1384
+ --bh-diagram-nottaken-fill: var(--bh-color-surface);
1385
+ --bh-diagram-nottaken-title: var(--bh-color-text);
1386
+ --bh-diagram-nottaken-desc: var(--bh-color-text-subtle);
1387
+ --bh-diagram-badge-bg: var(--bh-color-surface);
1388
+ --bh-diagram-badge-text: var(--bh-color-text-subtle);
1389
+ --bh-diagram-badge-border: var(--bh-color-border-bold);
1390
+ --bh-diagram-edge: var(--bh-color-border-bold);
1391
+ --bh-diagram-edge-label-text: var(--bh-color-text-subtle);
1392
+ --bh-diagram-edge-label-bg: var(--bh-color-surface-page);
1393
+ --bh-diagram-panel-bg: var(--bh-color-surface);
1394
+ --bh-diagram-panel-border: var(--bh-color-border);
1395
+ --bh-diagram-code-bg: var(--bh-color-surface);
1396
+ --bh-diagram-code-key: var(--bh-color-text-subtle);
1397
+ --bh-diagram-code-value: var(--bh-color-text);
1398
+ --bh-diagram-selection-ring: var(--bh-color-border-focus);
1399
+ --bh-diagram-node-font: var(--bh-font-body-default);
1400
+ --bh-diagram-card-width: 15rem;
1401
+ --bh-diagram-tile-size: 2.75rem;
1402
+ --bh-diagram-glyph-size: 2rem;
1403
+ --bh-diagram-preview-height: 45rem;
1404
+ --bh-diagram-minimum-height: 20rem;
1405
+ --bh-diagram-evidence-height: 13.75rem;
1406
+ --bh-diagram-evidence-minimum-height: 12rem;
1407
+ --bh-diagram-padding: var(--bh-space-100);
1408
+ --bh-diagram-export-padding: var(--bh-space-300);
1409
+ --bh-editor-background: var(--bh-color-surface);
1410
+ --bh-editor-text: var(--bh-color-text);
1411
+ --bh-editor-gutter: var(--bh-color-surface-subtle);
1412
+ --bh-editor-lineNumber: var(--bh-color-text-subtlest);
1413
+ --bh-editor-selection: var(--bh-color-background-selected);
1414
+ --bh-editor-lineHighlight: var(--bh-color-surface-subtle);
1415
+ --bh-editor-cursor: var(--bh-color-text);
1416
+ --bh-editor-border: var(--bh-color-border);
1417
+ --bh-editor-syntax-comment: var(--bh-color-text-subtlest);
1418
+ --bh-editor-syntax-string: var(--bh-color-text-success);
1419
+ --bh-editor-syntax-number: var(--bh-color-text-warning);
1420
+ --bh-editor-syntax-keyword: var(--bh-color-text-info);
1421
+ --bh-editor-syntax-type: var(--bh-color-text);
1422
+ --bh-editor-syntax-delimiter: var(--bh-color-text-subtle);
1423
+ --bh-editor-diff-inserted-background: var(--bh-color-background-success-subtle);
1424
+ --bh-editor-diff-inserted-text: var(--bh-color-text-success);
1425
+ --bh-editor-diff-removed-background: var(--bh-color-background-danger-subtle);
1426
+ --bh-editor-diff-removed-text: var(--bh-color-text-danger);
1427
+ --bh-editor-font-family: var(--bh-font-family-mono);
1428
+ --bh-editor-font-size: var(--bh-font-size-200);
1429
+ --bh-editor-font-lineHeight: 1.25rem;
1430
+ --bh-editor-font-weight: var(--bh-font-weight-regular);
1431
+ --bh-elevation-shadow-raised: 0 1px 2px rgb(43 42 40 / 8%), 0 1px 3px rgb(43 42 40 / 6%);
1432
+ --bh-elevation-shadow-overlay: 0 4px 12px rgb(43 42 40 / 15%);
1433
+ --bh-elevation-shadow-modal: 0 8px 24px rgb(43 42 40 / 15%);
1434
+ --bh-flow-category-task-foreground: var(--bh-color-blue-11);
1435
+ --bh-flow-category-task-background: var(--bh-color-blue-3);
1436
+ --bh-flow-category-task-border: var(--bh-color-blue-9);
1437
+ --bh-flow-category-task-hover: var(--bh-color-blue-4);
1438
+ --bh-flow-category-dependency-foreground: var(--bh-color-red-11);
1439
+ --bh-flow-category-dependency-background: var(--bh-color-red-3);
1440
+ --bh-flow-category-dependency-border: var(--bh-color-red-9);
1441
+ --bh-flow-category-dependency-hover: var(--bh-color-red-4);
1442
+ --bh-flow-category-transformation-foreground: var(--bh-color-green-11);
1443
+ --bh-flow-category-transformation-background: var(--bh-color-green-3);
1444
+ --bh-flow-category-transformation-border: var(--bh-color-green-9);
1445
+ --bh-flow-category-transformation-hover: var(--bh-color-green-4);
1446
+ --bh-flow-category-validation-foreground: var(--bh-color-red-11);
1447
+ --bh-flow-category-validation-background: var(--bh-color-red-3);
1448
+ --bh-flow-category-validation-border: var(--bh-color-red-11);
1449
+ --bh-flow-category-validation-hover: var(--bh-color-red-4);
1450
+ --bh-flow-category-pushStep-foreground: var(--bh-color-yellow-11);
1451
+ --bh-flow-category-pushStep-background: var(--bh-color-yellow-3);
1452
+ --bh-flow-category-pushStep-border: var(--bh-color-yellow-9);
1453
+ --bh-flow-category-pushStep-hover: var(--bh-color-yellow-4);
1454
+ --bh-flow-category-decision-foreground: #087f8c;
1455
+ --bh-flow-category-decision-background: #e8f8fa;
1456
+ --bh-flow-category-decision-border: #087f8c;
1457
+ --bh-flow-category-decision-hover: #e8f8fa;
1458
+ --bh-flow-category-loop-foreground: #ad2171;
1459
+ --bh-flow-category-loop-background: #fcecf5;
1460
+ --bh-flow-category-loop-border: #ad2171;
1461
+ --bh-flow-category-loop-hover: #fcecf5;
1462
+ --bh-flow-category-grouped-foreground: #7040a0;
1463
+ --bh-flow-category-grouped-background: #f3ecfa;
1464
+ --bh-flow-category-grouped-border: #7040a0;
1465
+ --bh-flow-category-grouped-hover: #f3ecfa;
1466
+ --bh-flow-geometry-task-width: 450px;
1467
+ --bh-flow-geometry-task-height: 130px;
1468
+ --bh-flow-geometry-task_dependency-width: 450px;
1469
+ --bh-flow-geometry-task_dependency-height: 130px;
1470
+ --bh-flow-geometry-task_transformation-width: 450px;
1471
+ --bh-flow-geometry-task_transformation-height: 130px;
1472
+ --bh-flow-geometry-task_data-width: 450px;
1473
+ --bh-flow-geometry-task_data-height: 130px;
1474
+ --bh-flow-geometry-validationGroup-width: 350px;
1475
+ --bh-flow-geometry-validationGroup-height: 130px;
1476
+ --bh-flow-geometry-transformationGroup-width: 350px;
1477
+ --bh-flow-geometry-transformationGroup-height: 130px;
1478
+ --bh-flow-geometry-pushStepsGroup-width: 350px;
1479
+ --bh-flow-geometry-pushStepsGroup-height: 130px;
1480
+ --bh-flow-geometry-validation-width: 200px;
1481
+ --bh-flow-geometry-validation-height: 130px;
1482
+ --bh-flow-geometry-transformation-width: 200px;
1483
+ --bh-flow-geometry-transformation-height: 130px;
1484
+ --bh-flow-geometry-push_step-width: 200px;
1485
+ --bh-flow-geometry-push_step-height: 130px;
1486
+ --bh-flow-geometry-decision-width: 160px;
1487
+ --bh-flow-geometry-decision-height: 160px;
1488
+ --bh-flow-geometry-loop-width: 120px;
1489
+ --bh-flow-geometry-loop-height: 120px;
1490
+ --bh-flow-geometry-profile-width: 240px;
1491
+ --bh-flow-geometry-profile-height: 100px;
1492
+ --bh-flow-grid-HORIZONTAL: 80px;
1493
+ --bh-flow-grid-VERTICAL: 40px;
1494
+ --bh-flow-grid-TASK_DATA_X_GAP: 300px;
1495
+ --bh-flow-grid-GROUP_Y_OFFSET: 200px;
1496
+ --bh-flow-layout-VALIDATION_NODE_Y_GAP: 100px;
1497
+ --bh-flow-layout-TRANSFORMATION_NODE_Y_GAP: 100px;
1498
+ --bh-flow-layout-PUSH_STEP_NODE_Y_GAP: 80px;
1499
+ --bh-flow-layout-PUSH_STEP_NODE_X_GAP: 120px;
1500
+ --bh-flow-layout-PUSH_STEP_BRANCH_X_GAP: 200px;
1501
+ --bh-flow-layout-EXPANDED_GROUP_X: 50px;
1502
+ --bh-flow-layout-EXPANDED_GROUP_Y_START: 50px;
1503
+ --bh-flow-layout-TREE_LEVEL_Y_GAP: 150px;
1504
+ --bh-flow-layout-TREE_SIBLING_X_GAP: 250px;
1505
+ --bh-flow-layout-TREE_MIN_WIDTH: 200px;
1506
+ --bh-flow-edge-width: 2px;
1507
+ --bh-flow-edge-marker: 15px;
1508
+ --bh-flow-edge-radius: 20px;
1509
+ --bh-flow-edge-handle: 12px;
1510
+ --bh-layout-header-height: var(--bh-space-600);
1511
+ --bh-layout-sidebar-expanded: 17.5rem;
1512
+ --bh-layout-sidebar-collapsed: var(--bh-space-800);
1513
+ --bh-layout-page-narrow: 48rem;
1514
+ --bh-layout-page-wide: 80rem;
1515
+ --bh-layout-page-margin-small: var(--bh-space-200);
1516
+ --bh-layout-page-margin-medium: var(--bh-space-300);
1517
+ --bh-layout-page-margin-large: var(--bh-space-400);
1518
+ --bh-layout-overlay-default: max(50vw, 900px);
1519
+ --bh-layout-overlay-wide: 70vw;
1520
+ --bh-layout-overlay-mobile: 100vw;
1521
+ --bh-layout-description-minimum: 12.5rem;
1522
+ --bh-motion-duration-fast: 100ms;
1523
+ --bh-motion-duration-default: 200ms;
1524
+ --bh-motion-duration-slow: 300ms;
1525
+ --bh-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
1526
+ --bh-opacity-disabled: 0.4;
1527
+ --bh-radius-0: 0;
1528
+ --bh-radius-100: 0.5rem;
1529
+ --bh-radius-150: 0.75rem;
1530
+ --bh-radius-200: 1rem;
1531
+ --bh-radius-025: 0.125rem;
1532
+ --bh-radius-050: 0.25rem;
1533
+ --bh-radius-075: 0.375rem;
1534
+ --bh-radius-full: 999px;
1535
+ --bh-resize-divider: var(--bh-border-width-accent);
1536
+ --bh-resize-target: var(--bh-size-target-minimum);
1537
+ --bh-resize-touchTarget: var(--bh-size-target-touch);
1538
+ --bh-resize-handle-width: var(--bh-space-200);
1539
+ --bh-resize-handle-height: var(--bh-space-400);
1540
+ --bh-resize-handle-radius: var(--bh-radius-050);
1541
+ --bh-resize-handle-background: var(--bh-color-surface);
1542
+ --bh-resize-handle-activeBackground: var(--bh-color-background-neutral-bold);
1543
+ --bh-resize-color: var(--bh-color-border-bold);
1544
+ --bh-resize-active: var(--bh-color-border-focus);
1545
+ --bh-resize-grip: var(--bh-color-icon);
1546
+ --bh-resize-activeGrip: var(--bh-color-text-inverse);
1547
+ --bh-size-icon-default: 1rem;
1548
+ --bh-size-icon-medium: 1.25rem;
1549
+ --bh-size-icon-large: 1.5rem;
1550
+ --bh-size-icon-empty: 2rem;
1551
+ --bh-size-control-small: 1.5rem;
1552
+ --bh-size-control-default: 2rem;
1553
+ --bh-size-control-large: 2.5rem;
1554
+ --bh-size-target-minimum: 1.5rem;
1555
+ --bh-size-target-touch: 2.75rem;
1556
+ --bh-space-0: 0;
1557
+ --bh-space-100: 0.5rem;
1558
+ --bh-space-150: 0.75rem;
1559
+ --bh-space-200: 1rem;
1560
+ --bh-space-250: 1.25rem;
1561
+ --bh-space-300: 1.5rem;
1562
+ --bh-space-400: 2rem;
1563
+ --bh-space-500: 2.5rem;
1564
+ --bh-space-600: 3rem;
1565
+ --bh-space-800: 4rem;
1566
+ --bh-space-1000: 5rem;
1567
+ --bh-space-025: 0.125rem;
1568
+ --bh-space-050: 0.25rem;
1569
+ --bh-space-075: 0.375rem;
1570
+ --bh-state-focus-offset: 2px;
1571
+ --bh-visualization-metric-total-jobs: var(--bh-color-text-info);
1572
+ --bh-visualization-metric-success-rate: var(--bh-color-text-success);
1573
+ --bh-visualization-metric-completed: var(--bh-color-text-success);
1574
+ --bh-visualization-metric-failed: var(--bh-color-text-danger);
1575
+ --bh-visualization-metric-active-jobs: var(--bh-color-text-info);
1576
+ --bh-visualization-metric-avg-execution-time: var(--bh-color-text-subtle);
1577
+ --bh-visualization-metric-queue-depth: var(--bh-color-text);
1578
+ --bh-visualization-job-type-queue-status: var(--bh-color-blue-11);
1579
+ --bh-visualization-job-type-sync-history: var(--bh-color-green-11);
1580
+ --bh-visualization-job-type-polling-jobs: var(--bh-color-orange-11);
1581
+ --bh-visualization-job-type-generic-jobs: var(--bh-color-graphite-11);
1582
+ --bh-visualization-priority-1: var(--bh-color-text-danger);
1583
+ --bh-visualization-priority-2: var(--bh-color-text-warning);
1584
+ --bh-visualization-priority-3: var(--bh-color-text-info);
1585
+ --bh-visualization-priority-4: var(--bh-color-text-subtle);
1586
+ --bh-visualization-priority-5: var(--bh-color-text-subtlest);
1587
+ --bh-visualization-traffic-healthy-fill: var(--bh-color-background-success-subtle);
1588
+ --bh-visualization-traffic-healthy-outline: var(--bh-color-border-success);
1589
+ --bh-visualization-traffic-attention-fill: var(--bh-color-background-warning-subtle);
1590
+ --bh-visualization-traffic-attention-outline: var(--bh-color-border-warning);
1591
+ --bh-visualization-traffic-degraded-fill: var(--bh-color-background-warning-subtle);
1592
+ --bh-visualization-traffic-degraded-outline: var(--bh-color-border-warning);
1593
+ --bh-visualization-traffic-critical-fill: var(--bh-color-background-danger-subtle);
1594
+ --bh-visualization-traffic-critical-outline: var(--bh-color-border-danger);
1595
+ --bh-visualization-traffic-unavailable-fill: var(--bh-color-surface-subtle);
1596
+ --bh-visualization-traffic-unavailable-outline: var(--bh-color-border-bold);
1597
+ --bh-visualization-traffic-fault-fill: var(--bh-color-background-danger-subtle);
1598
+ --bh-visualization-traffic-fault-outline: var(--bh-color-border-danger);
1599
+ --bh-visualization-line-width: 2px;
1600
+ --bh-visualization-sparkline-width: 1.5px;
1601
+ --bh-visualization-grid-width: 1px;
1602
+ --bh-visualization-sparkline-point-radius: 2px;
1603
+ --bh-visualization-timeline-node-size: 16px;
1604
+ --bh-visualization-timeline-node-inner-size: 8px;
1605
+ --bh-visualization-timeline-node-touch-size: 18px;
1606
+ --bh-visualization-timeline-node-touch-inner-size: 10px;
1607
+ --bh-visualization-timeline-node-tablet-inner-size: 9px;
1608
+ --bh-visualization-timeline-cluster-size: 24px;
1609
+ --bh-visualization-chart-height: 120px;
1610
+ --bh-visualization-chart-initial-width: 400px;
1611
+ --bh-visualization-sparkline-height: 40px;
1612
+ --bh-visualization-sparkline-compact-height: 32px;
1613
+ --bh-visualization-sparkline-initial-width: 100px;
1614
+ --bh-visualization-point-radius: 3px;
1615
+ --bh-visualization-hover-point-radius: 5px;
1616
+ --bh-visualization-ring-width: 10;
1617
+ --bh-visualization-ring-size: 140px;
1618
+ --bh-visualization-ring-gap: 75;
1619
+ --bh-visualization-timeline-track-height: 6px;
1620
+ --bh-visualization-activity-track-height: 10px;
1621
+ --bh-z-index-sticky: 100;
1622
+ --bh-z-index-navigation: 200;
1623
+ --bh-z-index-overlay: 300;
1624
+ --bh-z-index-modal: 400;
1625
+ --bh-z-index-fullscreen: 450;
1626
+ --bh-z-index-spotlight: 500;
1627
+ --bh-z-index-tooltip: 600;
1628
+ --bh-z-index-toast: 700;
1629
+ --bh-z-index-loading: 650;
1630
+ --bh-color-graphite-1: #181717;
1631
+ --bh-color-graphite-2: #201f1f;
1632
+ --bh-color-graphite-3: #282827;
1633
+ --bh-color-graphite-4: #302f2e;
1634
+ --bh-color-graphite-5: #373735;
1635
+ --bh-color-graphite-6: #434241;
1636
+ --bh-color-graphite-7: #555452;
1637
+ --bh-color-graphite-8: #6b6a67;
1638
+ --bh-color-graphite-9: #878682;
1639
+ --bh-color-graphite-10: #a8a6a3;
1640
+ --bh-color-graphite-11: #cac9c6;
1641
+ --bh-color-graphite-12: #eeeeed;
1642
+ --bh-color-yellow-1: #17130d;
1643
+ --bh-color-yellow-2: #1d170f;
1644
+ --bh-color-yellow-3: #32210a;
1645
+ --bh-color-yellow-4: #422902;
1646
+ --bh-color-yellow-5: #513304;
1647
+ --bh-color-yellow-6: #61400c;
1648
+ --bh-color-yellow-7: #74501c;
1649
+ --bh-color-yellow-8: #9a6613;
1650
+ --bh-color-yellow-9: #bd7e1b;
1651
+ --bh-color-yellow-10: #db9517;
1652
+ --bh-color-yellow-11: #fcb017;
1653
+ --bh-color-yellow-12: #f2dba4;
1654
+ --bh-color-blue-1: #0d1520;
1655
+ --bh-color-blue-2: #111927;
1656
+ --bh-color-blue-3: #0d2847;
1657
+ --bh-color-blue-4: #003362;
1658
+ --bh-color-blue-5: #004074;
1659
+ --bh-color-blue-6: #104d87;
1660
+ --bh-color-blue-7: #205d9e;
1661
+ --bh-color-blue-8: #1b6fc5;
1662
+ --bh-color-blue-9: #0088f1;
1663
+ --bh-color-blue-10: #3599fa;
1664
+ --bh-color-blue-11: #6bb3fa;
1665
+ --bh-color-blue-12: #b8dcf5;
1666
+ --bh-color-green-1: #0e1512;
1667
+ --bh-color-green-2: #121b17;
1668
+ --bh-color-green-3: #132d21;
1669
+ --bh-color-green-4: #113b29;
1670
+ --bh-color-green-5: #174933;
1671
+ --bh-color-green-6: #20573e;
1672
+ --bh-color-green-7: #28684a;
1673
+ --bh-color-green-8: #207d54;
1674
+ --bh-color-green-9: #1f9962;
1675
+ --bh-color-green-10: #37a971;
1676
+ --bh-color-green-11: #5ec18a;
1677
+ --bh-color-green-12: #a6e5c0;
1678
+ --bh-color-orange-1: #17120e;
1679
+ --bh-color-orange-2: #1e160f;
1680
+ --bh-color-orange-3: #331e0b;
1681
+ --bh-color-orange-4: #462100;
1682
+ --bh-color-orange-5: #562800;
1683
+ --bh-color-orange-6: #66350c;
1684
+ --bh-color-orange-7: #7e451d;
1685
+ --bh-color-orange-8: #ab5315;
1686
+ --bh-color-orange-9: #db6200;
1687
+ --bh-color-orange-10: #ef7200;
1688
+ --bh-color-orange-11: #f5974e;
1689
+ --bh-color-orange-12: #f1d2b4;
1690
+ --bh-color-red-1: #191110;
1691
+ --bh-color-red-2: #201312;
1692
+ --bh-color-red-3: #3b1310;
1693
+ --bh-color-red-4: #50100f;
1694
+ --bh-color-red-5: #611716;
1695
+ --bh-color-red-6: #722421;
1696
+ --bh-color-red-7: #8c3430;
1697
+ --bh-color-red-8: #bc403b;
1698
+ --bh-color-red-9: #ef4c48;
1699
+ --bh-color-red-10: #ff615a;
1700
+ --bh-color-red-11: #ff8e84;
1701
+ --bh-color-red-12: #facdc8;
1702
+ --bh-color-text-on-bold: var(--bh-color-graphite-1);
1703
+ --bh-color-icon-on-bold: var(--bh-color-graphite-1);
1704
+ --bh-color-background-neutral-subtle-hover: var(--bh-color-graphite-3);
1705
+ --bh-color-background-neutral-subtle-pressed: var(--bh-color-graphite-4);
1706
+ --bh-color-background-selected: var(--bh-color-graphite-4);
1707
+ --bh-color-background-selected-hover: var(--bh-color-graphite-5);
1708
+ --bh-color-surface: var(--bh-color-graphite-2);
1709
+ --bh-color-surface-page: var(--bh-color-graphite-1);
1710
+ --bh-color-surface-overlay: var(--bh-color-graphite-3);
1711
+ --bh-color-surface-overlay-hover: var(--bh-color-graphite-4);
1712
+ --bh-color-surface-overlay-pressed: var(--bh-color-graphite-5);
1713
+ --bh-color-surface-overlay-selected: var(--bh-color-graphite-5);
1714
+ --bh-color-surface-overlay-selected-hover: var(--bh-color-graphite-5);
1715
+ --bh-color-surface-scrim: rgb(0 0 0 / 60%);
1716
+ --bh-color-border-danger: var(--bh-color-red-10);
1717
+ --bh-color-border-warning: var(--bh-color-orange-10);
1718
+ --bh-color-border-success: var(--bh-color-green-10);
1719
+ --bh-color-border-info: var(--bh-color-blue-10);
1720
+ --bh-color-code-background: var(--bh-color-graphite-1);
1721
+ --bh-color-code-text: var(--bh-color-graphite-12);
1722
+ --bh-elevation-shadow-raised: 0 1px 2px rgb(0 0 0 / 40%), 0 1px 3px rgb(0 0 0 / 30%);
1723
+ --bh-elevation-shadow-overlay: 0 4px 12px rgb(0 0 0 / 50%);
1724
+ --bh-elevation-shadow-modal: 0 8px 24px rgb(0 0 0 / 50%);
1725
+ --bh-flow-category-decision-foreground: #7bdce5;
1726
+ --bh-flow-category-decision-background: #123c43;
1727
+ --bh-flow-category-decision-border: #7bdce5;
1728
+ --bh-flow-category-decision-hover: #123c43;
1729
+ --bh-flow-category-loop-foreground: #f3a0d1;
1730
+ --bh-flow-category-loop-background: #411b34;
1731
+ --bh-flow-category-loop-border: #f3a0d1;
1732
+ --bh-flow-category-loop-hover: #411b34;
1733
+ --bh-flow-category-grouped-foreground: #c9a2ee;
1734
+ --bh-flow-category-grouped-background: #30213f;
1735
+ --bh-flow-category-grouped-border: #c9a2ee;
1736
+ --bh-flow-category-grouped-hover: #30213f;
1737
+ color-scheme: dark;
1738
+ }
1739
+ /* Preserve source character variants through semantic font shorthands. */
1740
+ *, ::before, ::after { font-feature-settings: var(--bh-font-features) !important; }