@beehexa/design-rules 2611.3.2 → 2611.4.1

package/dist/docs/src/styles/tokens.js

@@ -153,6 +153,11 @@ export const tokens = {
     "color.surface": "#ffffff",
     "color.surface.page": "#ffffff",
     "color.surface.subtle": "#f8f8f8",
+    "color.surface.overlay": "#ffffff",
+    "color.surface.overlay.hover": "#f8f8f8",
+    "color.surface.overlay.pressed": "#f2f2f1",
+    "color.surface.overlay.selected": "#f2f2f1",
+    "color.surface.overlay.selected.hover": "#e8e8e7",
     "color.surface.inverse": "#2b2a28",
     "color.surface.scrim": "rgb(43 42 40 / 40%)",
     "color.border": "#d0cfce",
@@ -174,8 +179,156 @@ export const tokens = {
     "color.skeleton.subtle": "#f2f2f1",
     "color.code.background": "#2b2a28",
     "color.code.text": "#f8f8f8",
+    "content.partner-logo.size": "2.5rem",
+    "content.partner-logo.image-size": "1.75rem",
+    "content.avatar.size": "2.5rem",
+    "content.identity-mark.size": "2.75rem",
+    "content.identity-mark.image-size": "1.5rem",
+    "content.empty-illustration.size": "6rem",
+    "diagram.canvas": "#ffffff",
+    "diagram.node-fill": "#ffffff",
+    "diagram.node-border": "#878582",
+    "diagram.node-title": "#2b2a28",
+    "diagram.node-desc": "#494846",
+    "diagram.tile-bg": "#f2f2f1",
+    "diagram.tile-glyph": "#494846",
+    "diagram.state-ran-ok": "#494846",
+    "diagram.ran-ok-fill": "#ffffff",
+    "diagram.fail-stroke": "#d83b39",
+    "diagram.fail-fill": "#feebe9",
+    "diagram.fail-title": "#9b1e20",
+    "diagram.fail-desc": "#9b1e20",
+    "diagram.unreached-fill": "#f8f8f8",
+    "diagram.unreached-stroke": "#878582",
+    "diagram.unreached-title": "#494846",
+    "diagram.unreached-desc": "#494846",
+    "diagram.nottaken-stroke": "#494846",
+    "diagram.nottaken-fill": "#ffffff",
+    "diagram.nottaken-title": "#2b2a28",
+    "diagram.nottaken-desc": "#494846",
+    "diagram.badge-bg": "#ffffff",
+    "diagram.badge-text": "#494846",
+    "diagram.badge-border": "#878582",
+    "diagram.edge": "#878582",
+    "diagram.edge-label-text": "#494846",
+    "diagram.edge-label-bg": "#ffffff",
+    "diagram.panel-bg": "#ffffff",
+    "diagram.panel-border": "#d0cfce",
+    "diagram.code-bg": "#ffffff",
+    "diagram.code-key": "#494846",
+    "diagram.code-value": "#2b2a28",
+    "diagram.selection-ring": "#005195",
+    "diagram.node-font": "400 0.875rem/1.25rem Inter, \"Noto Sans\", system-ui, sans-serif",
+    "diagram.card-width": "15rem",
+    "diagram.tile-size": "2.75rem",
+    "diagram.glyph-size": "2rem",
+    "diagram.preview-height": "45rem",
+    "diagram.minimum-height": "20rem",
+    "diagram.evidence-height": "13.75rem",
+    "diagram.evidence-minimum-height": "12rem",
+    "diagram.padding": "0.5rem",
+    "diagram.export-padding": "1.5rem",
+    "editor.background": "#ffffff",
+    "editor.text": "#2b2a28",
+    "editor.gutter": "#f8f8f8",
+    "editor.lineNumber": "#676663",
+    "editor.selection": "#f2f2f1",
+    "editor.lineHighlight": "#f8f8f8",
+    "editor.cursor": "#2b2a28",
+    "editor.border": "#d0cfce",
+    "editor.syntax.comment": "#676663",
+    "editor.syntax.string": "#005c3a",
+    "editor.syntax.number": "#8a3600",
+    "editor.syntax.keyword": "#005195",
+    "editor.syntax.type": "#2b2a28",
+    "editor.syntax.delimiter": "#494846",
+    "editor.diff.inserted.background": "#e6f6eb",
+    "editor.diff.inserted.text": "#005c3a",
+    "editor.diff.removed.background": "#feebe9",
+    "editor.diff.removed.text": "#9b1e20",
+    "editor.font.family": "\"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+    "editor.font.size": "0.875rem",
+    "editor.font.lineHeight": "1.25rem",
+    "editor.font.weight": "400",
     "elevation.shadow.raised": "0 1px 2px rgb(43 42 40 / 8%), 0 1px 3px rgb(43 42 40 / 6%)",
-    "elevation.shadow.overlay": "0 24px 80px rgb(43 42 40 / 14%)",
+    "elevation.shadow.overlay": "0 4px 12px rgb(43 42 40 / 15%)",
+    "elevation.shadow.modal": "0 8px 24px rgb(43 42 40 / 15%)",
+    "flow.category.task.foreground": "#005195",
+    "flow.category.task.background": "#e6f4fe",
+    "flow.category.task.border": "#0077d5",
+    "flow.category.task.hover": "#d5efff",
+    "flow.category.dependency.foreground": "#9b1e20",
+    "flow.category.dependency.background": "#feebe9",
+    "flow.category.dependency.border": "#d83b39",
+    "flow.category.dependency.hover": "#ffdbd7",
+    "flow.category.transformation.foreground": "#005c3a",
+    "flow.category.transformation.background": "#e6f6eb",
+    "flow.category.transformation.border": "#008753",
+    "flow.category.transformation.hover": "#d6f1df",
+    "flow.category.validation.foreground": "#9b1e20",
+    "flow.category.validation.background": "#feebe9",
+    "flow.category.validation.border": "#9b1e20",
+    "flow.category.validation.hover": "#ffdbd7",
+    "flow.category.pushStep.foreground": "#764400",
+    "flow.category.pushStep.background": "#fff1bd",
+    "flow.category.pushStep.border": "#a96700",
+    "flow.category.pushStep.hover": "#ffe59c",
+    "flow.category.decision.foreground": "#087f8c",
+    "flow.category.decision.background": "#e8f8fa",
+    "flow.category.decision.border": "#087f8c",
+    "flow.category.decision.hover": "#e8f8fa",
+    "flow.category.loop.foreground": "#ad2171",
+    "flow.category.loop.background": "#fcecf5",
+    "flow.category.loop.border": "#ad2171",
+    "flow.category.loop.hover": "#fcecf5",
+    "flow.category.grouped.foreground": "#7040a0",
+    "flow.category.grouped.background": "#f3ecfa",
+    "flow.category.grouped.border": "#7040a0",
+    "flow.category.grouped.hover": "#f3ecfa",
+    "flow.geometry.task.width": "450px",
+    "flow.geometry.task.height": "130px",
+    "flow.geometry.task_dependency.width": "450px",
+    "flow.geometry.task_dependency.height": "130px",
+    "flow.geometry.task_transformation.width": "450px",
+    "flow.geometry.task_transformation.height": "130px",
+    "flow.geometry.task_data.width": "450px",
+    "flow.geometry.task_data.height": "130px",
+    "flow.geometry.validationGroup.width": "350px",
+    "flow.geometry.validationGroup.height": "130px",
+    "flow.geometry.transformationGroup.width": "350px",
+    "flow.geometry.transformationGroup.height": "130px",
+    "flow.geometry.pushStepsGroup.width": "350px",
+    "flow.geometry.pushStepsGroup.height": "130px",
+    "flow.geometry.validation.width": "200px",
+    "flow.geometry.validation.height": "130px",
+    "flow.geometry.transformation.width": "200px",
+    "flow.geometry.transformation.height": "130px",
+    "flow.geometry.push_step.width": "200px",
+    "flow.geometry.push_step.height": "130px",
+    "flow.geometry.decision.width": "160px",
+    "flow.geometry.decision.height": "160px",
+    "flow.geometry.loop.width": "120px",
+    "flow.geometry.loop.height": "120px",
+    "flow.geometry.profile.width": "240px",
+    "flow.geometry.profile.height": "100px",
+    "flow.grid.HORIZONTAL": "80px",
+    "flow.grid.VERTICAL": "40px",
+    "flow.grid.TASK_DATA_X_GAP": "300px",
+    "flow.grid.GROUP_Y_OFFSET": "200px",
+    "flow.layout.VALIDATION_NODE_Y_GAP": "100px",
+    "flow.layout.TRANSFORMATION_NODE_Y_GAP": "100px",
+    "flow.layout.PUSH_STEP_NODE_Y_GAP": "80px",
+    "flow.layout.PUSH_STEP_NODE_X_GAP": "120px",
+    "flow.layout.PUSH_STEP_BRANCH_X_GAP": "200px",
+    "flow.layout.EXPANDED_GROUP_X": "50px",
+    "flow.layout.EXPANDED_GROUP_Y_START": "50px",
+    "flow.layout.TREE_LEVEL_Y_GAP": "150px",
+    "flow.layout.TREE_SIBLING_X_GAP": "250px",
+    "flow.layout.TREE_MIN_WIDTH": "200px",
+    "flow.edge.width": "2px",
+    "flow.edge.marker": "15px",
+    "flow.edge.radius": "20px",
+    "flow.edge.handle": "12px",
     "layout.header.height": "3rem",
     "layout.sidebar.expanded": "17.5rem",
     "layout.sidebar.collapsed": "4rem",
@@ -192,6 +345,7 @@ export const tokens = {
     "motion.duration.default": "200ms",
     "motion.duration.slow": "300ms",
     "motion.easing.standard": "cubic-bezier(0.2, 0, 0, 1)",
+    "opacity.disabled": "0.4",
     "radius.0": "0",
     "radius.100": "0.5rem",
     "radius.150": "0.75rem",
@@ -200,6 +354,22 @@ export const tokens = {
     "radius.050": "0.25rem",
     "radius.075": "0.375rem",
     "radius.full": "999px",
+    "resize.divider": "4px",
+    "resize.target": "1.5rem",
+    "resize.touchTarget": "2.75rem",
+    "resize.handle.width": "1rem",
+    "resize.handle.height": "2rem",
+    "resize.handle.radius": "0.25rem",
+    "resize.handle.background": "#ffffff",
+    "resize.handle.activeBackground": "#2b2a28",
+    "resize.color": "#878582",
+    "resize.active": "#005195",
+    "resize.grip": "#494846",
+    "resize.activeGrip": "#fdfdfc",
+    "size.icon.default": "1rem",
+    "size.icon.medium": "1.25rem",
+    "size.icon.large": "1.5rem",
+    "size.icon.empty": "2rem",
     "size.control.small": "1.5rem",
     "size.control.default": "2rem",
     "size.control.large": "2.5rem",
@@ -220,6 +390,7 @@ export const tokens = {
     "space.050": "0.25rem",
     "space.075": "0.375rem",
     "state.focus.offset": "2px",
+    "font.features": "\"cv05\", \"cv08\"",
     "font.family.sans": "Inter, \"Noto Sans\", system-ui, sans-serif",
     "font.family.mono": "\"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
     "font.size.100": "0.75rem",
@@ -248,7 +419,66 @@ export const tokens = {
     "font.body.small": "400 0.75rem/1rem Inter, \"Noto Sans\", system-ui, sans-serif",
     "font.label.default": "500 0.875rem/1.25rem Inter, \"Noto Sans\", system-ui, sans-serif",
     "font.label.small": "500 0.75rem/1rem Inter, \"Noto Sans\", system-ui, sans-serif",
-    "font.code.default": "400 0.875rem/1.25rem \"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"
+    "font.code.default": "400 0.875rem/1.25rem \"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+    "visualization.metric.total-jobs": "#005195",
+    "visualization.metric.success-rate": "#005c3a",
+    "visualization.metric.completed": "#005c3a",
+    "visualization.metric.failed": "#9b1e20",
+    "visualization.metric.active-jobs": "#005195",
+    "visualization.metric.avg-execution-time": "#494846",
+    "visualization.metric.queue-depth": "#2b2a28",
+    "visualization.job-type.queue-status": "#005195",
+    "visualization.job-type.sync-history": "#005c3a",
+    "visualization.job-type.polling-jobs": "#8a3600",
+    "visualization.job-type.generic-jobs": "#494846",
+    "visualization.priority.1": "#9b1e20",
+    "visualization.priority.2": "#8a3600",
+    "visualization.priority.3": "#005195",
+    "visualization.priority.4": "#494846",
+    "visualization.priority.5": "#676663",
+    "visualization.traffic.healthy.fill": "#e6f6eb",
+    "visualization.traffic.healthy.outline": "#008753",
+    "visualization.traffic.attention.fill": "#ffefd6",
+    "visualization.traffic.attention.outline": "#ba4e00",
+    "visualization.traffic.degraded.fill": "#ffefd6",
+    "visualization.traffic.degraded.outline": "#ba4e00",
+    "visualization.traffic.critical.fill": "#feebe9",
+    "visualization.traffic.critical.outline": "#d83b39",
+    "visualization.traffic.unavailable.fill": "#f8f8f8",
+    "visualization.traffic.unavailable.outline": "#878582",
+    "visualization.traffic.fault.fill": "#feebe9",
+    "visualization.traffic.fault.outline": "#d83b39",
+    "visualization.line-width": "2px",
+    "visualization.sparkline-width": "1.5px",
+    "visualization.grid-width": "1px",
+    "visualization.sparkline-point-radius": "2px",
+    "visualization.timeline-node-size": "16px",
+    "visualization.timeline-node-inner-size": "8px",
+    "visualization.timeline-node-touch-size": "18px",
+    "visualization.timeline-node-touch-inner-size": "10px",
+    "visualization.timeline-node-tablet-inner-size": "9px",
+    "visualization.timeline-cluster-size": "24px",
+    "visualization.chart-height": "120px",
+    "visualization.chart-initial-width": "400px",
+    "visualization.sparkline-height": "40px",
+    "visualization.sparkline-compact-height": "32px",
+    "visualization.sparkline-initial-width": "100px",
+    "visualization.point-radius": "3px",
+    "visualization.hover-point-radius": "5px",
+    "visualization.ring-width": "10",
+    "visualization.ring-size": "140px",
+    "visualization.ring-gap": "75",
+    "visualization.timeline-track-height": "6px",
+    "visualization.activity-track-height": "10px",
+    "z-index.sticky": "100",
+    "z-index.navigation": "200",
+    "z-index.overlay": "300",
+    "z-index.modal": "400",
+    "z-index.fullscreen": "450",
+    "z-index.spotlight": "500",
+    "z-index.tooltip": "600",
+    "z-index.toast": "700",
+    "z-index.loading": "650"
   },
   "dark": {
     "color.graphite.1": "#181717",
@@ -387,6 +617,11 @@ export const tokens = {
     "color.surface": "#201f1f",
     "color.surface.page": "#181717",
     "color.surface.subtle": "#201f1f",
+    "color.surface.overlay": "#282827",
+    "color.surface.overlay.hover": "#302f2e",
+    "color.surface.overlay.pressed": "#373735",
+    "color.surface.overlay.selected": "#373735",
+    "color.surface.overlay.selected.hover": "#373735",
     "color.surface.inverse": "#eeeeed",
     "color.surface.scrim": "rgb(0 0 0 / 60%)",
     "color.border": "#434241",
@@ -406,10 +641,130 @@ export const tokens = {
     "color.skeleton.subtle": "#282827",
     "color.code.background": "#181717",
     "color.code.text": "#eeeeed",
+    "diagram.canvas": "#181717",
+    "diagram.node-fill": "#201f1f",
+    "diagram.node-border": "#878682",
+    "diagram.node-title": "#eeeeed",
+    "diagram.node-desc": "#cac9c6",
+    "diagram.tile-bg": "#282827",
+    "diagram.tile-glyph": "#cac9c6",
+    "diagram.state-ran-ok": "#cac9c6",
+    "diagram.ran-ok-fill": "#201f1f",
+    "diagram.fail-stroke": "#ff615a",
+    "diagram.fail-fill": "#3b1310",
+    "diagram.fail-title": "#ff8e84",
+    "diagram.fail-desc": "#ff8e84",
+    "diagram.unreached-fill": "#201f1f",
+    "diagram.unreached-stroke": "#878682",
+    "diagram.unreached-title": "#cac9c6",
+    "diagram.unreached-desc": "#cac9c6",
+    "diagram.nottaken-stroke": "#cac9c6",
+    "diagram.nottaken-fill": "#201f1f",
+    "diagram.nottaken-title": "#eeeeed",
+    "diagram.nottaken-desc": "#cac9c6",
+    "diagram.badge-bg": "#201f1f",
+    "diagram.badge-text": "#cac9c6",
+    "diagram.badge-border": "#878682",
+    "diagram.edge": "#878682",
+    "diagram.edge-label-text": "#cac9c6",
+    "diagram.edge-label-bg": "#181717",
+    "diagram.panel-bg": "#201f1f",
+    "diagram.panel-border": "#434241",
+    "diagram.code-bg": "#201f1f",
+    "diagram.code-key": "#cac9c6",
+    "diagram.code-value": "#eeeeed",
+    "diagram.selection-ring": "#6bb3fa",
+    "editor.background": "#201f1f",
+    "editor.text": "#eeeeed",
+    "editor.gutter": "#201f1f",
+    "editor.lineNumber": "#a8a6a3",
+    "editor.selection": "#302f2e",
+    "editor.lineHighlight": "#201f1f",
+    "editor.cursor": "#eeeeed",
+    "editor.border": "#434241",
+    "editor.syntax.comment": "#a8a6a3",
+    "editor.syntax.string": "#5ec18a",
+    "editor.syntax.number": "#f5974e",
+    "editor.syntax.keyword": "#6bb3fa",
+    "editor.syntax.type": "#eeeeed",
+    "editor.syntax.delimiter": "#cac9c6",
+    "editor.diff.inserted.background": "#132d21",
+    "editor.diff.inserted.text": "#5ec18a",
+    "editor.diff.removed.background": "#3b1310",
+    "editor.diff.removed.text": "#ff8e84",
     "elevation.shadow.raised": "0 1px 2px rgb(0 0 0 / 40%), 0 1px 3px rgb(0 0 0 / 30%)",
-    "elevation.shadow.overlay": "0 24px 80px rgb(0 0 0 / 50%)"
+    "elevation.shadow.overlay": "0 4px 12px rgb(0 0 0 / 50%)",
+    "elevation.shadow.modal": "0 8px 24px rgb(0 0 0 / 50%)",
+    "flow.category.task.foreground": "#6bb3fa",
+    "flow.category.task.background": "#0d2847",
+    "flow.category.task.border": "#0088f1",
+    "flow.category.task.hover": "#003362",
+    "flow.category.dependency.foreground": "#ff8e84",
+    "flow.category.dependency.background": "#3b1310",
+    "flow.category.dependency.border": "#ef4c48",
+    "flow.category.dependency.hover": "#50100f",
+    "flow.category.transformation.foreground": "#5ec18a",
+    "flow.category.transformation.background": "#132d21",
+    "flow.category.transformation.border": "#1f9962",
+    "flow.category.transformation.hover": "#113b29",
+    "flow.category.validation.foreground": "#ff8e84",
+    "flow.category.validation.background": "#3b1310",
+    "flow.category.validation.border": "#ff8e84",
+    "flow.category.validation.hover": "#50100f",
+    "flow.category.pushStep.foreground": "#fcb017",
+    "flow.category.pushStep.background": "#32210a",
+    "flow.category.pushStep.border": "#bd7e1b",
+    "flow.category.pushStep.hover": "#422902",
+    "flow.category.decision.foreground": "#7bdce5",
+    "flow.category.decision.background": "#123c43",
+    "flow.category.decision.border": "#7bdce5",
+    "flow.category.decision.hover": "#123c43",
+    "flow.category.loop.foreground": "#f3a0d1",
+    "flow.category.loop.background": "#411b34",
+    "flow.category.loop.border": "#f3a0d1",
+    "flow.category.loop.hover": "#411b34",
+    "flow.category.grouped.foreground": "#c9a2ee",
+    "flow.category.grouped.background": "#30213f",
+    "flow.category.grouped.border": "#c9a2ee",
+    "flow.category.grouped.hover": "#30213f",
+    "resize.handle.background": "#201f1f",
+    "resize.handle.activeBackground": "#eeeeed",
+    "resize.color": "#878682",
+    "resize.active": "#6bb3fa",
+    "resize.grip": "#cac9c6",
+    "resize.activeGrip": "#181717",
+    "visualization.metric.total-jobs": "#6bb3fa",
+    "visualization.metric.success-rate": "#5ec18a",
+    "visualization.metric.completed": "#5ec18a",
+    "visualization.metric.failed": "#ff8e84",
+    "visualization.metric.active-jobs": "#6bb3fa",
+    "visualization.metric.avg-execution-time": "#cac9c6",
+    "visualization.metric.queue-depth": "#eeeeed",
+    "visualization.job-type.queue-status": "#6bb3fa",
+    "visualization.job-type.sync-history": "#5ec18a",
+    "visualization.job-type.polling-jobs": "#f5974e",
+    "visualization.job-type.generic-jobs": "#cac9c6",
+    "visualization.priority.1": "#ff8e84",
+    "visualization.priority.2": "#f5974e",
+    "visualization.priority.3": "#6bb3fa",
+    "visualization.priority.4": "#cac9c6",
+    "visualization.priority.5": "#a8a6a3",
+    "visualization.traffic.healthy.fill": "#132d21",
+    "visualization.traffic.healthy.outline": "#37a971",
+    "visualization.traffic.attention.fill": "#331e0b",
+    "visualization.traffic.attention.outline": "#ef7200",
+    "visualization.traffic.degraded.fill": "#331e0b",
+    "visualization.traffic.degraded.outline": "#ef7200",
+    "visualization.traffic.critical.fill": "#3b1310",
+    "visualization.traffic.critical.outline": "#ff615a",
+    "visualization.traffic.unavailable.fill": "#201f1f",
+    "visualization.traffic.unavailable.outline": "#878682",
+    "visualization.traffic.fault.fill": "#3b1310",
+    "visualization.traffic.fault.outline": "#ff615a"
   },
   "vi": {
+    "diagram.node-font": "400 0.875rem/1.5rem Inter, \"Noto Sans\", system-ui, sans-serif",
+    "editor.font.lineHeight": "1.5rem",
     "font.display.large": "700 4.5rem/6.75rem Inter, \"Noto Sans\", system-ui, sans-serif",
     "font.display.medium": "700 3.75rem/5.5rem Inter, \"Noto Sans\", system-ui, sans-serif",
     "font.display.small": "700 3rem/4.5rem Inter, \"Noto Sans\", system-ui, sans-serif",

package/dist/docs/src/styles/typography.css

@@ -31,20 +31,17 @@
 .ui-crumb, .ui-meta { color: var(--bh-color-text-subtlest); }
 .ui-card > span:first-child { color: var(--bh-color-text-subtle); }
 .ui-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bh-space-150); }
-.ui-card { display: grid; gap: var(--bh-space-025); padding: calc(var(--bh-space-150) - 1px); border: 1px solid var(--bh-color-border); border-radius: var(--bh-radius-100); }
+.ui-card { display: grid; gap: var(--bh-space-025); }
 .ui-panel { gap: var(--bh-space-100); padding-left: var(--bh-space-150); }
 .ui-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--bh-space-150) var(--bh-space-400); }
-.ui-btn { display: inline-flex; align-items: center; height: var(--bh-size-control-default); padding: 0 var(--bh-space-150); border-radius: var(--bh-radius-100); background: var(--bh-color-background-neutral-bold); color: var(--bh-color-text-inverse); white-space: nowrap; }
 .prose .ui-desc { margin: 0; color: var(--bh-color-text-subtle); }
 .prose .ui-table { width: 100%; margin: var(--bh-space-050) 0 0; }
-.prose .ui-table th { padding: var(--bh-space-075) var(--bh-space-100); color: var(--bh-color-text-subtle); border-bottom: 1px solid var(--bh-color-border); }
-.prose .ui-table td { padding: var(--bh-space-100); border-bottom: 1px solid var(--bh-color-border); vertical-align: baseline; } /* cells share one baseline, whatever their style */
+.prose .ui-table th { padding: var(--bh-space-100) var(--bh-space-150); color: var(--bh-color-text-subtle); background: var(--bh-color-surface-subtle); border-bottom: var(--bh-border-width-default) solid var(--bh-color-border); font: var(--bh-font-label-small); }
+.prose .ui-table td { padding: var(--bh-space-100) var(--bh-space-150); border-bottom: var(--bh-border-width-default) solid var(--bh-color-border); vertical-align: baseline; } /* cells share one baseline, whatever their style */
 /* The mock-up is a light screen in both themes, so it uses the light values of the role tokens
    as fixed colours: border.success / text.success (green 9 / 11) and border.danger / text.danger (red 9 / 11). */
-.ui-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 calc(var(--bh-space-100) - 1px); border: 1px solid var(--bh-color-border-success); border-radius: var(--bh-radius-full); color: var(--bh-color-text-success); }
-.ui-badge.is-error { border-color: var(--bh-color-border-danger); color: var(--bh-color-text-danger); }
 .type-ui [data-n] { position: relative; }
-.type-ui [data-n]::after { content: attr(data-n); position: absolute; top: 50%; right: calc(100% + var(--bh-space-100)); translate: 0 -50%; display: grid; place-items: center; box-sizing: border-box; min-width: 20px; height: 20px; padding: 0 var(--bh-space-050); border-radius: var(--bh-radius-100); background: var(--bh-color-background-brand-bold); color: var(--bh-color-text-on-brand); font: var(--bh-font-label-small); font-variant-numeric: tabular-nums; }
+.type-ui [data-n]::after { content: attr(data-n); position: absolute; top: 50%; right: calc(100% + var(--bh-space-100)); translate: 0 -50%; display: grid; place-items: center; box-sizing: border-box; min-width: 20px; height: 20px; padding: 0 var(--bh-space-050); border-radius: var(--bh-radius-100); background: var(--bh-color-background-neutral-bold); color: var(--bh-color-text-inverse); font: var(--bh-font-label-small); font-variant-numeric: tabular-nums; }
 .prose .type-ui-legend { align-self: start; display: grid; gap: var(--bh-space-075); margin: 0; padding-left: var(--bh-space-250); font: var(--bh-font-body-small); }
 .prose .type-ui-legend li { margin: 0; color: var(--c-muted); }
 .prose .type-ui-legend li::marker { color: var(--c-ink); }

package/dist/docs/src/styles/zindex.css

@@ -0,0 +1,56 @@
+/* Illustrations for the Z-index page. Layers use the z-index tokens; colours, shadows and sizes are tokens. */
+.zi-stack-fig { margin: var(--bh-space-300) 0; overflow: hidden; border: var(--bh-border-width-default) solid var(--bh-color-border); border-radius: var(--bh-radius-150); }
+.zi-stack-fig figcaption { padding: var(--bh-space-100) var(--bh-space-200); border-top: var(--bh-border-width-default) solid var(--bh-color-border); color: var(--bh-color-text-subtle); font: var(--bh-font-body-small); }
+.zi-stack { position: relative; isolation: isolate; height: calc(8 * var(--bh-space-400) + 7 * var(--bh-space-100) + var(--bh-space-600)); background: var(--bh-color-surface-subtle); }
+.zi-plate { position: absolute; left: calc(var(--bh-space-300) + var(--i, 0) * var(--bh-space-300)); bottom: calc(var(--bh-space-300) + var(--i, 0) * (var(--bh-space-400) + var(--bh-space-100))); display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: var(--bh-space-150); width: min(calc(100% - 9 * var(--bh-space-300)), 24rem); min-width: 14rem; height: calc(var(--bh-space-400) + var(--bh-space-200)); padding: 0 var(--bh-space-150); border: var(--bh-border-width-default) solid var(--bh-color-border); border-radius: var(--bh-radius-100); background: var(--bh-color-surface); }
+.zi-plate b { color: var(--bh-color-text); font: var(--bh-font-label-default); }
+.zi-plate code { color: var(--bh-color-text-subtle); font: var(--bh-font-code-default); font-size: var(--bh-font-size-100); font-variant-numeric: tabular-nums; }
+.zi-plate em { overflow: hidden; color: var(--bh-color-text-subtle); font: var(--bh-font-body-small); font-style: normal; white-space: nowrap; text-overflow: ellipsis; }
+.zi-plate.is-page { left: var(--bh-space-300); bottom: var(--bh-space-300); background: var(--bh-color-surface-page); border-style: dashed; border-color: var(--bh-color-border-bold); }
+.zi-plate.is-sticky, .zi-plate.is-navigation { background: var(--bh-color-surface-subtle); }
+.zi-plate.is-tooltip { border-color: transparent; background: var(--bh-color-surface-inverse); }
+.zi-plate.is-tooltip :is(b, code, em) { color: var(--bh-color-text-inverse); }
+.zi-plate.is-overlay, .zi-plate.is-toast { background: var(--bh-color-surface-overlay); border-color: transparent; box-shadow: var(--bh-elevation-shadow-overlay); }
+.zi-plate.is-modal, .zi-plate.is-spotlight { background: var(--bh-color-surface-overlay); border-color: transparent; box-shadow: var(--bh-elevation-shadow-modal); }
+@container prose (max-width: 560px) { .zi-plate em { display: none; } .zi-plate { min-width: 0; grid-template-columns: auto auto; } }
+
+/* A product screen with numbered layers and a legend. */
+.zi-screen-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bh-space-200); margin: var(--bh-space-300) 0; }
+@container prose (min-width: 640px) { .zi-screen-wrap { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; } }
+.zi-screen { position: relative; isolation: isolate; overflow: hidden; border: var(--bh-border-width-default) solid var(--bh-color-border); border-radius: var(--bh-radius-150); background: var(--bh-color-surface-page); }
+.zi-head { position: relative; z-index: var(--bh-z-index-navigation); display: flex; align-items: center; gap: var(--bh-space-100); height: var(--bh-space-600); padding: 0 var(--bh-space-200); border-bottom: var(--bh-border-width-default) solid var(--bh-color-border); background: var(--bh-color-surface-page); color: var(--bh-color-text); font: var(--bh-font-label-default); }
+.zi-head-r { margin-left: auto; }
+.zi-icon { display: inline-grid; place-items: center; width: var(--bh-size-control-default); height: var(--bh-size-control-default); border-radius: var(--bh-radius-100); color: var(--bh-color-icon-subtle); }
+.zi-body { position: relative; display: grid; gap: var(--bh-space-150); padding: var(--bh-space-200); min-height: calc(5 * var(--bh-space-600)); }
+.zi-table { overflow: hidden; border: var(--bh-border-width-default) solid var(--bh-color-border); border-radius: var(--bh-radius-150); }
+.zi-th, .zi-tr { display: grid; grid-template-columns: auto 1fr 1fr 1fr; align-items: center; gap: var(--bh-space-100); padding: var(--bh-space-100) var(--bh-space-150); font: var(--bh-font-body-default); color: var(--bh-color-text); }
+.zi-tr { grid-template-columns: 1fr 1fr 1fr; border-top: var(--bh-border-width-default) solid var(--bh-color-border); }
+.zi-th { position: relative; z-index: var(--bh-z-index-sticky); background: var(--bh-color-surface-subtle); color: var(--bh-color-text-subtle); font: var(--bh-font-label-small); }
+.zi-menu { position: absolute; z-index: var(--bh-z-index-overlay); top: calc(var(--bh-size-control-small) + var(--bh-space-250)); left: var(--bh-space-200); min-width: 10rem; }
+.zi-tip { position: absolute; z-index: var(--bh-z-index-tooltip); top: calc(-1 * var(--bh-space-050)); right: var(--bh-space-150); display: inline-flex; align-items: center; gap: var(--bh-space-050); }
+.zi-toast { position: absolute; z-index: var(--bh-z-index-toast); right: var(--bh-space-200); bottom: var(--bh-space-200); gap: var(--bh-space-100); align-items: center; font: var(--bh-font-body-default); }
+.zi-menu > .zi-n { position: absolute; top: calc(-1 * var(--bh-space-100)); left: calc(-1 * var(--bh-space-100)); }
+.zi-legend { display: grid; gap: var(--bh-space-100); margin: 0; padding: 0; list-style: none; }
+.zi-legend li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 var(--bh-space-100); align-items: center; }
+.zi-legend li > span:last-child { grid-column: 2; color: var(--bh-color-text-subtle); font: var(--bh-font-body-small); }
+.zi-legend code { font: var(--bh-font-code-default); font-size: var(--bh-font-size-100); }
+
+/* Do and don't: a small dialog scene. */
+.zi-dd { padding: var(--bh-space-150); }
+.zi-mini { position: relative; isolation: isolate; width: 100%; height: calc(5 * var(--bh-space-600)); overflow: hidden; border-radius: var(--bh-radius-100); background: var(--bh-color-surface-page); }
+.zi-mini .el-lines { position: absolute; inset: 0 0 auto; }
+.zi-mini-scrim { z-index: var(--bh-z-index-modal); }
+.zi-mini-dialog { position: absolute; z-index: var(--bh-z-index-modal); top: var(--bh-space-300); left: 50%; width: min(85%, 18rem); transform: translateX(-50%); }
+.zi-mini-text { color: var(--bh-color-text-subtle); font: var(--bh-font-body-default); }
+.zi-field { position: relative; }
+.zi-input { display: flex; align-items: center; justify-content: space-between; gap: var(--bh-space-050); height: var(--bh-size-control-default); padding: 0 var(--bh-space-150); border: var(--bh-border-width-default) solid var(--bh-color-border-bold); border-radius: var(--bh-radius-100); font: var(--bh-font-body-default); }
+.zi-mini-list { position: absolute; top: calc(100% + var(--bh-space-050)); left: 0; right: 0; min-width: 0; }
+.zi-mini.is-inside .zi-mini-dialog { top: var(--bh-space-200); }
+.zi-mini.is-inside.is-dont .zi-mini-dialog { overflow: hidden; height: calc(2 * var(--bh-space-600) + var(--bh-space-200)); }
+.zi-mini-toast { position: absolute; right: var(--bh-space-150); bottom: var(--bh-space-150); }
+.zi-mini.is-toast.is-do .zi-mini-toast { z-index: var(--bh-z-index-toast); }
+.zi-mini.is-toast.is-dont .zi-mini-toast { z-index: var(--bh-z-index-overlay); }
+.zi-mini.is-scrim.is-dont .zi-mini-scrim { z-index: calc(var(--bh-z-index-modal) + 1); }
+.prose .zi-plate code, .zi-plate code { padding: 0; background: transparent; }
+.prose .zi-legend code, .zi-legend code { padding: 0; background: transparent; }
+.zi-input svg { flex: none; color: var(--bh-color-icon-subtle); }

package/dist/docs/tokens/border.json

@@ -19,7 +19,7 @@
       "accent": {
         "$type": "dimension",
         "$value": "4px",
-        "$description": "4 px. A status or emphasis bar on one edge: alerts, banners, rows with an error, callouts and quotes. Pair with a status or brand border colour."
+        "$description": "4 px. A status or emphasis bar on one edge: rows with an error, callouts and quotes. Pair with a status or brand border colour."
       }
     }
   }

package/dist/docs/tokens/color.json

@@ -1166,7 +1166,7 @@
       "$root": {
         "$type": "color",
         "$value": "{color.brand.white}",
-        "$description": "Cards, panels, dialogs. One step lighter than the page in dark.",
+        "$description": "Cards and panels. One step lighter than the page in dark.",
         "$extensions": {
           "design.beehexa": {
             "dark": "{color.graphite.2}"
@@ -1186,12 +1186,66 @@
       "subtle": {
         "$type": "color",
         "$value": "{color.graphite.2}",
-        "$description": "Sidebars, table headers, quiet areas."
+        "$description": "Shared global header/sidebar shell surface, mobile navigation drawer, table headers and quiet areas."
+      },
+      "overlay": {
+        "$root": {
+          "$type": "color",
+          "$value": "{color.brand.white}",
+          "$description": "Menus, popovers, select lists, toasts, dialogs and drawers. One step lighter than color.surface in dark, so a floating layer reads above cards.",
+          "$extensions": {
+            "design.beehexa": {
+              "dark": "{color.graphite.3}"
+            }
+          }
+        },
+        "hover": {
+          "$type": "color",
+          "$value": "{color.graphite.2}",
+          "$description": "Menu item or option on hover, inside color.surface.overlay.",
+          "$extensions": {
+            "design.beehexa": {
+              "dark": "{color.graphite.4}"
+            }
+          }
+        },
+        "pressed": {
+          "$type": "color",
+          "$value": "{color.graphite.3}",
+          "$description": "Menu item or option when pressed, inside color.surface.overlay.",
+          "$extensions": {
+            "design.beehexa": {
+              "dark": "{color.graphite.5}"
+            }
+          }
+        },
+        "selected": {
+          "$root": {
+            "$type": "color",
+            "$value": "{color.graphite.3}",
+            "$description": "Selected option inside color.surface.overlay. Always add a second cue: a check or bold text.",
+            "$extensions": {
+              "design.beehexa": {
+                "dark": "{color.graphite.5}"
+              }
+            }
+          },
+          "hover": {
+            "$type": "color",
+            "$value": "{color.graphite.4}",
+            "$description": "Selected option on hover, inside color.surface.overlay. In dark it stays on graphite 5, as graphite 6 fails text and border contrast; the check mark carries the state.",
+            "$extensions": {
+              "design.beehexa": {
+                "dark": "{color.graphite.5}"
+              }
+            }
+          }
+        }
       },
       "inverse": {
         "$type": "color",
         "$value": "{color.graphite.12}",
-        "$description": "Inverse surface: tooltips, toasts. Text on top: text.inverse."
+        "$description": "Inverse surface: tooltips. Text on top: text.inverse."
       },
       "scrim": {
         "$type": "color",

package/dist/docs/tokens/content.json

@@ -0,0 +1,19 @@
+{
+  "content": {
+    "$description": "Reusable application-content identity and empty-state geometry. Identity colours never encode operational status.",
+    "partner-logo": {
+      "size": { "$type": "dimension", "$value": "2.5rem", "$description": "Neutral square partner-logo tile; preserves the brand image aspect ratio." },
+      "image-size": { "$type": "dimension", "$value": "1.75rem", "$description": "Maximum contained partner mark inside the standard partner-logo tile." }
+    },
+    "avatar": {
+      "size": { "$type": "dimension", "$value": "2.5rem", "$description": "Default person or permission-member identity avatar; a visual identity, not a hit target." }
+    },
+    "identity-mark": {
+      "size": { "$type": "dimension", "$value": "2.75rem", "$description": "System/provider identity container when shown beside content labels." },
+      "image-size": { "$type": "dimension", "$value": "1.5rem", "$description": "Contained system/provider identity glyph within the identity-mark container." }
+    },
+    "empty-illustration": {
+      "size": { "$type": "dimension", "$value": "6rem", "$description": "Empty-state illustration container. Standard icons inside retain their own source icon sizes." }
+    }
+  }
+}