@beehexa/design-rules 0.0.0-stage → 2611.3.2

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

@@ -0,0 +1,425 @@
+// Generated from beehexa.design tokens/*.json. Do not edit.
+export const tokens = {
+  "light": {
+    "border.width.default": "1px",
+    "border.width.selected": "2px",
+    "border.width.focused": "2px",
+    "border.width.accent": "4px",
+    "breakpoint.xs": "0px",
+    "breakpoint.md": "768px",
+    "breakpoint.lg": "1024px",
+    "breakpoint.xl": "1440px",
+    "color.brand.yellow": "#fcb017",
+    "color.brand.graphite": "#2b2a28",
+    "color.brand.white": "#ffffff",
+    "color.static.white": "#ffffff",
+    "color.static.black": "#000000",
+    "color.graphite.1": "#fdfdfc",
+    "color.graphite.2": "#f8f8f8",
+    "color.graphite.3": "#f2f2f1",
+    "color.graphite.4": "#e8e8e7",
+    "color.graphite.5": "#dfdedd",
+    "color.graphite.6": "#d0cfce",
+    "color.graphite.7": "#bcbbb9",
+    "color.graphite.8": "#a3a29f",
+    "color.graphite.9": "#878582",
+    "color.graphite.10": "#676663",
+    "color.graphite.11": "#494846",
+    "color.graphite.12": "#2b2a28",
+    "color.yellow.1": "#fefdf4",
+    "color.yellow.2": "#fff9dd",
+    "color.yellow.3": "#fff1bd",
+    "color.yellow.4": "#ffe59c",
+    "color.yellow.5": "#ffd87c",
+    "color.yellow.6": "#ffc757",
+    "color.yellow.7": "#fcb017",
+    "color.yellow.8": "#d68b00",
+    "color.yellow.9": "#a96700",
+    "color.yellow.10": "#905600",
+    "color.yellow.11": "#764400",
+    "color.yellow.12": "#4a3015",
+    "color.blue.1": "#fbfdff",
+    "color.blue.2": "#f4faff",
+    "color.blue.3": "#e6f4fe",
+    "color.blue.4": "#d5efff",
+    "color.blue.5": "#c2e5ff",
+    "color.blue.6": "#acd8fc",
+    "color.blue.7": "#8ec8f6",
+    "color.blue.8": "#52a1e6",
+    "color.blue.9": "#0077d5",
+    "color.blue.10": "#0064b5",
+    "color.blue.11": "#005195",
+    "color.blue.12": "#113264",
+    "color.green.1": "#fbfefc",
+    "color.green.2": "#f4fbf6",
+    "color.green.3": "#e6f6eb",
+    "color.green.4": "#d6f1df",
+    "color.green.5": "#c4e8d1",
+    "color.green.6": "#adddc0",
+    "color.green.7": "#8eceaa",
+    "color.green.8": "#51ac7d",
+    "color.green.9": "#008753",
+    "color.green.10": "#007246",
+    "color.green.11": "#005c3a",
+    "color.green.12": "#193b2d",
+    "color.orange.1": "#fefcfb",
+    "color.orange.2": "#fff7ed",
+    "color.orange.3": "#ffefd6",
+    "color.orange.4": "#ffdfb5",
+    "color.orange.5": "#ffd19a",
+    "color.orange.6": "#ffc182",
+    "color.orange.7": "#f5ae73",
+    "color.orange.8": "#df8547",
+    "color.orange.9": "#ba4e00",
+    "color.orange.10": "#a74500",
+    "color.orange.11": "#8a3600",
+    "color.orange.12": "#582d1d",
+    "color.red.1": "#fffcfc",
+    "color.red.2": "#fff7f6",
+    "color.red.3": "#feebe9",
+    "color.red.4": "#ffdbd7",
+    "color.red.5": "#ffcec8",
+    "color.red.6": "#fdbeb7",
+    "color.red.7": "#f4aaa2",
+    "color.red.8": "#eb7a71",
+    "color.red.9": "#d83b39",
+    "color.red.10": "#ba2d2d",
+    "color.red.11": "#9b1e20",
+    "color.red.12": "#641817",
+    "color.text": "#2b2a28",
+    "color.text.subtle": "#494846",
+    "color.text.subtlest": "#676663",
+    "color.text.disabled": "#a3a29f",
+    "color.text.inverse": "#fdfdfc",
+    "color.text.on-bold": "#ffffff",
+    "color.text.on-brand": "#2b2a28",
+    "color.text.danger": "#9b1e20",
+    "color.text.warning": "#8a3600",
+    "color.text.success": "#005c3a",
+    "color.text.info": "#005195",
+    "color.icon": "#494846",
+    "color.icon.subtle": "#676663",
+    "color.icon.disabled": "#a3a29f",
+    "color.icon.inverse": "#fdfdfc",
+    "color.icon.on-bold": "#ffffff",
+    "color.icon.danger": "#9b1e20",
+    "color.icon.warning": "#8a3600",
+    "color.icon.success": "#005c3a",
+    "color.icon.info": "#005195",
+    "color.link": "#005195",
+    "color.link.hover": "#113264",
+    "color.background.neutral": "#f2f2f1",
+    "color.background.neutral.hover": "#e8e8e7",
+    "color.background.neutral.pressed": "#dfdedd",
+    "color.background.neutral.subtle": "transparent",
+    "color.background.neutral.subtle.hover": "#f8f8f8",
+    "color.background.neutral.subtle.pressed": "#f2f2f1",
+    "color.background.neutral.bold": "#2b2a28",
+    "color.background.neutral.bold.hover": "#494846",
+    "color.background.neutral.bold.pressed": "#676663",
+    "color.background.selected": "#f2f2f1",
+    "color.background.selected.hover": "#e8e8e7",
+    "color.background.disabled": "#f2f2f1",
+    "color.background.brand.subtle": "#fff9dd",
+    "color.background.brand.bold": "#fcb017",
+    "color.background.danger.subtle": "#feebe9",
+    "color.background.danger.subtle.hover": "#ffdbd7",
+    "color.background.danger.subtle.pressed": "#ffcec8",
+    "color.background.danger": "#ffcec8",
+    "color.background.danger.bold": "#d83b39",
+    "color.background.danger.bold.hover": "#ba2d2d",
+    "color.background.danger.bold.pressed": "#9b1e20",
+    "color.background.warning.subtle": "#ffefd6",
+    "color.background.warning.subtle.hover": "#ffdfb5",
+    "color.background.warning.subtle.pressed": "#ffd19a",
+    "color.background.warning": "#ffd19a",
+    "color.background.warning.bold": "#ba4e00",
+    "color.background.warning.bold.hover": "#a74500",
+    "color.background.warning.bold.pressed": "#8a3600",
+    "color.background.success.subtle": "#e6f6eb",
+    "color.background.success.subtle.hover": "#d6f1df",
+    "color.background.success.subtle.pressed": "#c4e8d1",
+    "color.background.success": "#c4e8d1",
+    "color.background.success.bold": "#008753",
+    "color.background.success.bold.hover": "#007246",
+    "color.background.success.bold.pressed": "#005c3a",
+    "color.background.info.subtle": "#e6f4fe",
+    "color.background.info.subtle.hover": "#d5efff",
+    "color.background.info.subtle.pressed": "#c2e5ff",
+    "color.background.info": "#c2e5ff",
+    "color.background.info.bold": "#0077d5",
+    "color.background.info.bold.hover": "#0064b5",
+    "color.background.info.bold.pressed": "#005195",
+    "color.surface": "#ffffff",
+    "color.surface.page": "#ffffff",
+    "color.surface.subtle": "#f8f8f8",
+    "color.surface.inverse": "#2b2a28",
+    "color.surface.scrim": "rgb(43 42 40 / 40%)",
+    "color.border": "#d0cfce",
+    "color.border.bold": "#878582",
+    "color.border.disabled": "#d0cfce",
+    "color.border.focus": "#005195",
+    "color.border.selected": "#fcb017",
+    "color.border.brand": "#fcb017",
+    "color.border.brand.subtle": "#ffc757",
+    "color.border.danger": "#d83b39",
+    "color.border.danger.subtle": "#f4aaa2",
+    "color.border.warning": "#ba4e00",
+    "color.border.warning.subtle": "#f5ae73",
+    "color.border.success": "#008753",
+    "color.border.success.subtle": "#8eceaa",
+    "color.border.info": "#0077d5",
+    "color.border.info.subtle": "#8ec8f6",
+    "color.skeleton": "#e8e8e7",
+    "color.skeleton.subtle": "#f2f2f1",
+    "color.code.background": "#2b2a28",
+    "color.code.text": "#f8f8f8",
+    "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%)",
+    "layout.header.height": "3rem",
+    "layout.sidebar.expanded": "17.5rem",
+    "layout.sidebar.collapsed": "4rem",
+    "layout.page.narrow": "48rem",
+    "layout.page.wide": "80rem",
+    "layout.page.margin.small": "1rem",
+    "layout.page.margin.medium": "1.5rem",
+    "layout.page.margin.large": "2rem",
+    "layout.overlay.default": "max(50vw, 900px)",
+    "layout.overlay.wide": "70vw",
+    "layout.overlay.mobile": "100vw",
+    "layout.description.minimum": "12.5rem",
+    "motion.duration.fast": "100ms",
+    "motion.duration.default": "200ms",
+    "motion.duration.slow": "300ms",
+    "motion.easing.standard": "cubic-bezier(0.2, 0, 0, 1)",
+    "radius.0": "0",
+    "radius.100": "0.5rem",
+    "radius.150": "0.75rem",
+    "radius.200": "1rem",
+    "radius.025": "0.125rem",
+    "radius.050": "0.25rem",
+    "radius.075": "0.375rem",
+    "radius.full": "999px",
+    "size.control.small": "1.5rem",
+    "size.control.default": "2rem",
+    "size.control.large": "2.5rem",
+    "size.target.minimum": "1.5rem",
+    "size.target.touch": "2.75rem",
+    "space.0": "0",
+    "space.100": "0.5rem",
+    "space.150": "0.75rem",
+    "space.200": "1rem",
+    "space.250": "1.25rem",
+    "space.300": "1.5rem",
+    "space.400": "2rem",
+    "space.500": "2.5rem",
+    "space.600": "3rem",
+    "space.800": "4rem",
+    "space.1000": "5rem",
+    "space.025": "0.125rem",
+    "space.050": "0.25rem",
+    "space.075": "0.375rem",
+    "state.focus.offset": "2px",
+    "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",
+    "font.size.200": "0.875rem",
+    "font.size.300": "1rem",
+    "font.size.400": "1.25rem",
+    "font.size.500": "1.5rem",
+    "font.size.600": "2rem",
+    "font.size.700": "3rem",
+    "font.size.800": "3.75rem",
+    "font.size.900": "4.5rem",
+    "font.weight.regular": "400",
+    "font.weight.medium": "500",
+    "font.weight.semibold": "600",
+    "font.weight.bold": "700",
+    "font.display.large": "700 4.5rem/5rem Inter, \"Noto Sans\", system-ui, sans-serif",
+    "font.display.medium": "700 3.75rem/4.25rem Inter, \"Noto Sans\", system-ui, sans-serif",
+    "font.display.small": "700 3rem/3.5rem Inter, \"Noto Sans\", system-ui, sans-serif",
+    "font.heading.xlarge": "600 2rem/2.5rem Inter, \"Noto Sans\", system-ui, sans-serif",
+    "font.heading.large": "600 1.5rem/2rem Inter, \"Noto Sans\", system-ui, sans-serif",
+    "font.heading.medium": "600 1.25rem/1.75rem Inter, \"Noto Sans\", system-ui, sans-serif",
+    "font.heading.small": "600 1rem/1.5rem Inter, \"Noto Sans\", system-ui, sans-serif",
+    "font.heading.xsmall": "600 0.875rem/1.25rem Inter, \"Noto Sans\", system-ui, sans-serif",
+    "font.body.large": "400 1rem/1.5rem Inter, \"Noto Sans\", system-ui, sans-serif",
+    "font.body.default": "400 0.875rem/1.25rem Inter, \"Noto Sans\", system-ui, sans-serif",
+    "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"
+  },
+  "dark": {
+    "color.graphite.1": "#181717",
+    "color.graphite.2": "#201f1f",
+    "color.graphite.3": "#282827",
+    "color.graphite.4": "#302f2e",
+    "color.graphite.5": "#373735",
+    "color.graphite.6": "#434241",
+    "color.graphite.7": "#555452",
+    "color.graphite.8": "#6b6a67",
+    "color.graphite.9": "#878682",
+    "color.graphite.10": "#a8a6a3",
+    "color.graphite.11": "#cac9c6",
+    "color.graphite.12": "#eeeeed",
+    "color.yellow.1": "#17130d",
+    "color.yellow.2": "#1d170f",
+    "color.yellow.3": "#32210a",
+    "color.yellow.4": "#422902",
+    "color.yellow.5": "#513304",
+    "color.yellow.6": "#61400c",
+    "color.yellow.7": "#74501c",
+    "color.yellow.8": "#9a6613",
+    "color.yellow.9": "#bd7e1b",
+    "color.yellow.10": "#db9517",
+    "color.yellow.11": "#fcb017",
+    "color.yellow.12": "#f2dba4",
+    "color.blue.1": "#0d1520",
+    "color.blue.2": "#111927",
+    "color.blue.3": "#0d2847",
+    "color.blue.4": "#003362",
+    "color.blue.5": "#004074",
+    "color.blue.6": "#104d87",
+    "color.blue.7": "#205d9e",
+    "color.blue.8": "#1b6fc5",
+    "color.blue.9": "#0088f1",
+    "color.blue.10": "#3599fa",
+    "color.blue.11": "#6bb3fa",
+    "color.blue.12": "#b8dcf5",
+    "color.green.1": "#0e1512",
+    "color.green.2": "#121b17",
+    "color.green.3": "#132d21",
+    "color.green.4": "#113b29",
+    "color.green.5": "#174933",
+    "color.green.6": "#20573e",
+    "color.green.7": "#28684a",
+    "color.green.8": "#207d54",
+    "color.green.9": "#1f9962",
+    "color.green.10": "#37a971",
+    "color.green.11": "#5ec18a",
+    "color.green.12": "#a6e5c0",
+    "color.orange.1": "#17120e",
+    "color.orange.2": "#1e160f",
+    "color.orange.3": "#331e0b",
+    "color.orange.4": "#462100",
+    "color.orange.5": "#562800",
+    "color.orange.6": "#66350c",
+    "color.orange.7": "#7e451d",
+    "color.orange.8": "#ab5315",
+    "color.orange.9": "#db6200",
+    "color.orange.10": "#ef7200",
+    "color.orange.11": "#f5974e",
+    "color.orange.12": "#f1d2b4",
+    "color.red.1": "#191110",
+    "color.red.2": "#201312",
+    "color.red.3": "#3b1310",
+    "color.red.4": "#50100f",
+    "color.red.5": "#611716",
+    "color.red.6": "#722421",
+    "color.red.7": "#8c3430",
+    "color.red.8": "#bc403b",
+    "color.red.9": "#ef4c48",
+    "color.red.10": "#ff615a",
+    "color.red.11": "#ff8e84",
+    "color.red.12": "#facdc8",
+    "color.text": "#eeeeed",
+    "color.text.subtle": "#cac9c6",
+    "color.text.subtlest": "#a8a6a3",
+    "color.text.disabled": "#6b6a67",
+    "color.text.inverse": "#181717",
+    "color.text.on-bold": "#181717",
+    "color.text.danger": "#ff8e84",
+    "color.text.warning": "#f5974e",
+    "color.text.success": "#5ec18a",
+    "color.text.info": "#6bb3fa",
+    "color.icon": "#cac9c6",
+    "color.icon.subtle": "#a8a6a3",
+    "color.icon.disabled": "#6b6a67",
+    "color.icon.inverse": "#181717",
+    "color.icon.on-bold": "#181717",
+    "color.icon.danger": "#ff8e84",
+    "color.icon.warning": "#f5974e",
+    "color.icon.success": "#5ec18a",
+    "color.icon.info": "#6bb3fa",
+    "color.link": "#6bb3fa",
+    "color.link.hover": "#b8dcf5",
+    "color.background.neutral": "#282827",
+    "color.background.neutral.hover": "#302f2e",
+    "color.background.neutral.pressed": "#373735",
+    "color.background.neutral.subtle.hover": "#282827",
+    "color.background.neutral.subtle.pressed": "#302f2e",
+    "color.background.neutral.bold": "#eeeeed",
+    "color.background.neutral.bold.hover": "#cac9c6",
+    "color.background.neutral.bold.pressed": "#a8a6a3",
+    "color.background.selected": "#302f2e",
+    "color.background.selected.hover": "#373735",
+    "color.background.disabled": "#282827",
+    "color.background.brand.subtle": "#1d170f",
+    "color.background.danger.subtle": "#3b1310",
+    "color.background.danger.subtle.hover": "#50100f",
+    "color.background.danger.subtle.pressed": "#611716",
+    "color.background.danger": "#611716",
+    "color.background.danger.bold": "#ef4c48",
+    "color.background.danger.bold.hover": "#ff615a",
+    "color.background.danger.bold.pressed": "#ff8e84",
+    "color.background.warning.subtle": "#331e0b",
+    "color.background.warning.subtle.hover": "#462100",
+    "color.background.warning.subtle.pressed": "#562800",
+    "color.background.warning": "#562800",
+    "color.background.warning.bold": "#db6200",
+    "color.background.warning.bold.hover": "#ef7200",
+    "color.background.warning.bold.pressed": "#f5974e",
+    "color.background.success.subtle": "#132d21",
+    "color.background.success.subtle.hover": "#113b29",
+    "color.background.success.subtle.pressed": "#174933",
+    "color.background.success": "#174933",
+    "color.background.success.bold": "#1f9962",
+    "color.background.success.bold.hover": "#37a971",
+    "color.background.success.bold.pressed": "#5ec18a",
+    "color.background.info.subtle": "#0d2847",
+    "color.background.info.subtle.hover": "#003362",
+    "color.background.info.subtle.pressed": "#004074",
+    "color.background.info": "#004074",
+    "color.background.info.bold": "#0088f1",
+    "color.background.info.bold.hover": "#3599fa",
+    "color.background.info.bold.pressed": "#6bb3fa",
+    "color.surface": "#201f1f",
+    "color.surface.page": "#181717",
+    "color.surface.subtle": "#201f1f",
+    "color.surface.inverse": "#eeeeed",
+    "color.surface.scrim": "rgb(0 0 0 / 60%)",
+    "color.border": "#434241",
+    "color.border.bold": "#878682",
+    "color.border.disabled": "#434241",
+    "color.border.focus": "#6bb3fa",
+    "color.border.brand.subtle": "#61400c",
+    "color.border.danger": "#ff615a",
+    "color.border.danger.subtle": "#8c3430",
+    "color.border.warning": "#ef7200",
+    "color.border.warning.subtle": "#7e451d",
+    "color.border.success": "#37a971",
+    "color.border.success.subtle": "#28684a",
+    "color.border.info": "#3599fa",
+    "color.border.info.subtle": "#205d9e",
+    "color.skeleton": "#302f2e",
+    "color.skeleton.subtle": "#282827",
+    "color.code.background": "#181717",
+    "color.code.text": "#eeeeed",
+    "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%)"
+  },
+  "vi": {
+    "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",
+    "font.heading.xlarge": "600 2rem/3rem Inter, \"Noto Sans\", system-ui, sans-serif",
+    "font.heading.large": "600 1.5rem/2.5rem Inter, \"Noto Sans\", system-ui, sans-serif",
+    "font.heading.medium": "600 1.25rem/2rem Inter, \"Noto Sans\", system-ui, sans-serif",
+    "font.heading.xsmall": "600 0.875rem/1.5rem Inter, \"Noto Sans\", system-ui, sans-serif",
+    "font.body.default": "400 0.875rem/1.5rem Inter, \"Noto Sans\", system-ui, sans-serif",
+    "font.body.small": "400 0.75rem/1.25rem Inter, \"Noto Sans\", system-ui, sans-serif",
+    "font.label.default": "500 0.875rem/1.5rem Inter, \"Noto Sans\", system-ui, sans-serif",
+    "font.label.small": "500 0.75rem/1.25rem Inter, \"Noto Sans\", system-ui, sans-serif"
+  }
+};

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

@@ -0,0 +1,91 @@
+/* Typography page examples. */
+.type-faces { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bh-space-200); margin: 0 0 var(--bh-space-300); }
+.type-face { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--bh-space-250); margin: 0; padding: var(--bh-space-250); border: 1px solid var(--c-line); border-radius: var(--bh-radius-150); }
+.prose .type-face-sample { margin: 0; font: var(--bh-font-display-large); }
+.type-face figcaption { display: grid; gap: var(--bh-space-025); color: var(--c-muted); font: var(--bh-font-body-default); }
+.type-face figcaption b { color: var(--c-ink); font: var(--bh-font-heading-small); }
+.type-face-line { margin-top: var(--bh-space-075); color: var(--c-ink); }
+.type-face.is-mono .type-face-sample, .type-face.is-mono .type-face-line { font-family: var(--bh-font-family-mono); font-weight: var(--bh-font-weight-regular); }
+@container prose (min-width: 640px) { .type-faces { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+
+.type-num { white-space: nowrap; font-variant-numeric: tabular-nums; }
+
+/* Text style specimen: one row per style. */
+.type-styles { display: grid; gap: var(--bh-space-400); margin: 0 0 var(--bh-space-300); }
+.prose .type-group-name { margin: 0 0 var(--bh-space-050); color: var(--c-muted); font: var(--bh-font-heading-xsmall); }
+.type-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bh-space-050) var(--bh-space-300); padding: var(--bh-space-150) 0; border-top: 1px solid var(--c-line); }
+.type-meta { display: grid; grid-row: auto; align-content: start; gap: var(--bh-space-025); }
+.type-meta code { justify-self: start; }
+.type-meta .type-num { color: var(--c-muted); font: var(--bh-font-body-small); }
+.type-specimen { min-width: 0; overflow-wrap: anywhere; color: var(--c-ink); }
+.prose .type-use { grid-column: 1; margin: 0; color: var(--c-muted); font: var(--bh-font-body-small); }
+@container prose (min-width: 640px) { .type-row { grid-template-columns: 180px minmax(0, 1fr); } .type-meta { grid-row: span 2; } .prose .type-use { grid-column: 2; } }
+
+/* Product UI example with numbered markers. */
+.type-ui { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bh-space-300); margin: 0 0 var(--bh-space-300); padding: var(--bh-space-300); border: 1px solid var(--c-line); border-radius: var(--bh-radius-150); background: var(--c-surf); }
+/* The mock-up fits its column: no sideways scrolling. The legend sits under it, in two columns where there is room. */
+.type-ui-scroll { min-width: 0; }
+.type-ui-screen { display: grid; gap: var(--bh-space-200); min-width: 0; padding: var(--bh-space-250) var(--bh-space-250) var(--bh-space-250) var(--bh-space-500); border-radius: var(--bh-radius-100); background: var(--bh-color-surface); color: var(--bh-color-text); box-shadow: var(--bh-elevation-shadow-raised); }
+.ui-page-head { display: grid; gap: var(--bh-space-025); }
+/* The mock-up screen uses the same colour tokens as a product screen. */
+.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-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 */
+/* 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; }
+.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); }
+.prose .type-ui-legend b { color: var(--c-ink); }
+/* In a narrow column the mock-up reflows like a product screen on a phone: each order is one
+   row of ID and status, with the total on the line below. */
+@container prose (width < 560px) {
+  .type-ui-screen { padding-left: var(--bh-space-400); padding-right: var(--bh-space-200); }
+  .prose .ui-table thead th:last-child { display: none; }
+  .prose .ui-table tr { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: var(--bh-space-400); border-bottom: 1px solid var(--bh-color-border); }
+  .prose .ui-table th, .prose .ui-table td { border-bottom: 0; padding-inline: 0; }
+  .prose .ui-table th:first-child, .prose .ui-table td:first-child { padding-left: var(--bh-space-100); }
+  .prose .ui-table td:last-child { grid-column: 1 / -1; padding-top: 0; text-align: left !important; padding-left: var(--bh-space-100); }
+}
+@container prose (min-width: 560px) { .prose .type-ui-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--bh-space-400); } }
+@container prose (min-width: 1000px) { .type-ui { grid-template-columns: minmax(0, 1fr) 240px; } .prose .type-ui-legend { grid-template-columns: minmax(0, 1fr); } }
+
+.type-glyphs { color: var(--c-ink); font: var(--bh-font-heading-medium); }
+.prose .type-features td { vertical-align: baseline; }
+
+.type-numbers { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bh-space-200); margin: 0 0 var(--bh-space-300); }
+.type-numbers figure { margin: 0; padding: var(--bh-space-200) var(--bh-space-250); border: 1px solid var(--c-line); border-radius: var(--bh-radius-150); }
+.type-numbers figcaption { margin-bottom: var(--bh-space-100); color: var(--c-muted); font: var(--bh-font-body-small); }
+.prose .type-numbers p { margin: 0; font: var(--bh-font-heading-medium); text-align: right; font-variant-numeric: proportional-nums; }
+.prose .type-numbers p.is-tabular { font-variant-numeric: tabular-nums; }
+
+.type-vi { display: grid; margin: 0 0 var(--bh-space-300); }
+.type-vi-head, .type-vi-row { display: grid; grid-template-columns: 180px minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: var(--bh-space-100) var(--bh-space-300); padding: var(--bh-space-150) 0; border-top: 1px solid var(--c-line); }
+.type-vi-row .type-meta { grid-row: auto; }
+.type-vi-head { padding-top: 0; border-top: 0; color: var(--c-muted); font: var(--bh-font-label-small); }
+/* One line that clips its overflow: a mark that leaves the line box is cut off, as in a
+   truncated table cell or button label. The outline shows the line box. */
+.type-vi-box { display: block; min-width: 0; overflow: hidden; color: var(--c-ink); white-space: nowrap; text-overflow: clip; outline: 1px dashed var(--bh-color-border-bold); outline-offset: 0; }
+@container prose (min-width: 560px) { .type-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+@container prose (width < 640px) { .type-vi-head { display: none; } .type-vi-row { grid-template-columns: minmax(0, 1fr); } }
+
+/* Line height over several lines: English and Vietnamese side by side */
+.type-leading { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bh-space-200); margin: 0 0 var(--bh-space-300); }
+.type-leading figure { margin: 0; overflow: hidden; border: 1px solid var(--c-line); border-radius: var(--bh-radius-150); }
+.type-leading figure.is-bad { border-color: var(--bh-color-border-danger); }
+.type-leading-text { margin: 0; padding: var(--bh-space-200); color: var(--bh-color-text); background: repeating-linear-gradient(to bottom, var(--bh-color-background-neutral) 0 var(--lh), transparent var(--lh) calc(var(--lh) * 2)); background-origin: content-box; background-clip: content-box; }
+.type-leading figcaption { display: grid; gap: var(--bh-space-025); padding: var(--bh-space-150) var(--bh-space-200); border-top: 1px solid var(--c-line); font: var(--bh-font-body-small); }
+.type-leading figure.is-bad figcaption b { color: var(--bh-color-text-danger); }
+@container prose (min-width: 640px) { .type-leading { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

package/dist/docs/tokens/border.json

@@ -0,0 +1,26 @@
+{
+  "border": {
+    "width": {
+      "default": {
+        "$type": "dimension",
+        "$value": "1px",
+        "$description": "1 px. Inputs, secondary buttons, cards, tables and dividers."
+      },
+      "selected": {
+        "$type": "dimension",
+        "$value": "2px",
+        "$description": "2 px. The bar under a selected tab or beside a selected side navigation item, and the edge of a selected card. Pair with color.border.selected."
+      },
+      "focused": {
+        "$type": "dimension",
+        "$value": "2px",
+        "$description": "2 px. The focus ring. Pair with color.border.focus and state.focus.offset."
+      },
+      "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."
+      }
+    }
+  }
+}

package/dist/docs/tokens/breakpoints.json

@@ -0,0 +1,8 @@
+{
+  "breakpoint": {
+    "xs": { "$type": "dimension", "$value": "0px", "$description": "Phones and small windows, below 768 px. One fluid layout: 4 columns, gutter and margin 16 px, side navigation in a drawer. Must work down to 320 px." },
+    "md": { "$type": "dimension", "$value": "768px", "$description": "Tablets and narrow windows. 8 columns, gutter and margin 24 px. Side navigation still in a drawer." },
+    "lg": { "$type": "dimension", "$value": "1024px", "$description": "Laptops from 1024 px, including 1280 and 1366 px screens. 12 columns. Side navigation open at 280 px; people can collapse it to the 64 px rail." },
+    "xl": { "$type": "dimension", "$value": "1440px", "$description": "Desktops, including 1536 and 1920 px screens. Page margin 32 px." }
+  }
+}