/* AUTO-GENERATED by scripts/gen_ux_catalogue.py — do not edit by hand. */ /* Source: src/dazzle/page/runtime/static/css/{tokens,dz,dz}.css (+ HM components) + packages/hatchi-maxchi/components/*.css */ .dz-catalogue-preview { border: 1px solid var(--md-default-fg-color--lightest, #ddd); border-radius: 8px; padding: 1rem; margin: 0.5rem 0 1.5rem; background: #fff; overflow-x: auto; } /* --- tokens.css --- */ /* * tokens.css — Dazzle design system as CSS custom properties. * * Every length, colour, type-size, radius, shadow, and motion value * used in component CSS MUST resolve to a token defined here. * Literal values (px, rem, em, hex, hsl numerics) are permitted only * inside this file. Stylelint enforces this rule. * * UK English throughout: --colour-*, not --color-*. * * ───────────────────────────────────────────────────────────────── * * Portions of this file derived from Open Props by Adam Argyle (MIT). * Source: https://github.com/argyleink/open-props * Values have been renamed to Dazzle's vocabulary and selectively * adopted. Open Props is NOT a runtime dependency — values are * vendored in source. */ :root { /* ─────────────────────────────── spacing ───────────────────────── * 4px base. Geometric-ish progression: each step roughly 1.5x. * Use semantic names; fall back to scale when truly arbitrary. * ───────────────────────────────────────────────────────────────── */ --space-xs: 0.25rem; /* 4px */ --space-sm: 0.5rem; /* 8px */ --space-md: 0.75rem; /* 12px */ --space-lg: 1rem; /* 16px */ --space-xl: 1.5rem; /* 24px */ --space-2xl: 2rem; /* 32px */ --space-3xl: 3rem; /* 48px */ /* ─────────────────────────── fluid spacing ─────────────────────── * For responsive padding/gap that adapts smoothly. Lifted formulae * pattern from Open Props (props.sizes.css). */ --space-fluid-sm: clamp(0.5rem, 1vw, 0.75rem); --space-fluid-md: clamp(0.75rem, 1.5vw, 1rem); --space-fluid-lg: clamp(1rem, 2.5vw, 1.5rem); /* ────────────────────────────── type scale ─────────────────────── * Fluid via clamp(). Lifted from Open Props (props.fonts.css) * fluid-font-size block, renamed to Dazzle's vocabulary. The * clamp expressions are non-trivial to derive correctly. * ───────────────────────────────────────────────────────────────── */ --text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem); --text-sm: clamp(0.875rem, 0.8rem + 0.25vw, 1rem); --text-base: clamp(1rem, 0.9rem + 0.3vw, 1.125rem); --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); --text-xl: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); --text-2xl: clamp(1.75rem, 1.5rem + 1vw, 2.25rem); --text-3xl: clamp(2.25rem, 1.9rem + 1.5vw, 3rem); --text-display: clamp(3rem, 2.4rem + 2.5vw, 4.5rem); /* ─────────────────────────── heading scale (#983) ──────────────── * Two scales for two contexts. The app shell is dense and * compact (h1 ~18px); the marketing site is editorial and * expansive (h1 ~3.5rem). Pre-#983 every renderer hard-coded its * own font-size, so promoting `.dz-table-title` from `--text-base` * to `--text-lg` was a one-off tweak instead of a tokenised * decision. * * The marketing tokens are also defined in `design-system.css` * (canonical home for site/marketing variables). Mirroring them * here keeps app-shell + marketing token discovery in one file * for adopters reading tokens.css to understand the system. */ --dz-heading-app-page-title: var(--text-lg); --dz-heading-app-section-title: var(--text-base); --dz-heading-app-subsection-title: var(--text-sm); --dz-heading-marketing-hero: var(--dz-font-size-hero-headline, 3.5rem); --dz-heading-marketing-cta: var(--dz-font-size-cta-headline, 3rem); --dz-heading-marketing-section: var(--dz-font-size-section-headline, 2.25rem); /* ─────────────────────────── font families ───────────────────── * `--font-system` is the OS-default sans stack; `--font-mono` is * used by tabular numerics in chart summaries (bar_track etc.). */ --font-system: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Consolas, "Liberation Mono", monospace; /* ─────────────────────────── line height ───────────────────────── * Unitless; multiplies the font-size of the same element. */ --leading-tight: 1.2; --leading-normal: 1.5; --leading-loose: 1.8; /* ─────────────────────────── font weight ───────────────────────── * Variable-font friendly; only the weights we actually use. */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ─────────────────────────── radii ─────────────────────────────── * Use semantic names. Full = pill. */ /* Focus ring (HaTchi-MaXchi TASTE-1): accent at 40% alpha, 2px, offset 2px — one ring vocabulary for every interactive element. */ --focus-ring-color: color-mix(in oklab, var(--colour-brand) 40%, transparent); --focus-ring-width: 2px; --focus-ring-offset: 2px; --radius-sm: 0.25rem; /* 4px — small inputs, badges */ --radius-md: 0.375rem; /* 6px — cards, buttons */ --radius-lg: 0.75rem; /* 12px — large cards, modals */ --radius-full: 9999px; /* ─────────────────────────── shadows ───────────────────────────── * Layered for depth. Sources: Open Props shadow blocks adjusted * for Dazzle's visual identity (lower contrast, warmer ambient). */ --shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.04), 0 1px 3px hsl(0 0% 0% / 0.06); --shadow-md: 0 2px 4px hsl(0 0% 0% / 0.04), 0 4px 8px hsl(0 0% 0% / 0.08); --shadow-lg: 0 4px 8px hsl(0 0% 0% / 0.04), 0 12px 24px hsl(0 0% 0% / 0.12); /* ─────────────────────────── motion ────────────────────────────── * Easings lifted from Open Props (props.easings.css). The * cubic-bezier values for spring-like easings are well-tuned. */ --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.5, -0.5, 0.5, 1.5); /* Spring-easing ladder, Open Props convention. Progressively * more bounce — pick the smallest one that conveys the affordance. * #960 layer 1. */ --ease-spring-1: cubic-bezier(0.5, 0.75, 0.75, 1.25); --ease-spring-2: cubic-bezier(0.5, 1, 0.75, 1.25); --ease-spring-3: cubic-bezier(0.5, 1.25, 0.75, 1.25); --ease-spring-4: cubic-bezier(0.5, 1.5, 0.75, 1.25); --ease-spring-5: cubic-bezier(0.5, 1.75, 0.75, 1.25); /* Elastic easings — for dismiss/snap-back motion. */ --ease-elastic-1: cubic-bezier(0.5, 0.75, 0.75, 1.25); --ease-elastic-2: cubic-bezier(0.5, 1, 0.75, 1.25); --ease-elastic-3: cubic-bezier(0.5, 1.25, 0.75, 1.25); --duration-fast: 80ms; --duration-base: 150ms; --duration-slow: 300ms; /* Named animation shorthands, Open Props convention. Each combines * keyframe + duration + easing in one var so templates can write * `animation: var(--animation-fade-in)` directly. The keyframes * themselves are defined below the :root block. #960 layer 1. */ --animation-fade-in: dz-fade-in var(--duration-base) var(--ease-out); --animation-fade-out: dz-fade-out var(--duration-base) var(--ease-in); --animation-scale-up: dz-scale-up var(--duration-base) var(--ease-spring-2); --animation-scale-down: dz-scale-down var(--duration-base) var(--ease-in); --animation-slide-in-up: dz-slide-in-up var(--duration-base) var(--ease-out); --animation-slide-in-down: dz-slide-in-down var(--duration-base) var(--ease-out); --animation-slide-in-left: dz-slide-in-left var(--duration-base) var(--ease-out); --animation-slide-in-right: dz-slide-in-right var(--duration-base) var(--ease-out); --animation-slide-out-up: dz-slide-out-up var(--duration-base) var(--ease-in); --animation-slide-out-down: dz-slide-out-down var(--duration-base) var(--ease-in); --animation-slide-out-left: dz-slide-out-left var(--duration-base) var(--ease-in); --animation-slide-out-right: dz-slide-out-right var(--duration-base) var(--ease-in); --animation-shake-x: dz-shake-x 0.4s var(--ease-out); --animation-pulse: dz-pulse 2s var(--ease-in-out) infinite; /* ─────────────────────────── widths ────────────────────────────── * Common content widths. */ --width-prose: 65ch; --width-content: 56rem; --width-page: 80rem; /* ─────────────────────────── touch targets ─────────────────────── * Minimum hit-area on touch devices. Apple HIG calls for 44×44pt; * Material recommends 48×48dp. We use 44px as a good middle — * matches Apple, hits Material's 80% threshold, doesn't visually * inflate dense desktop UIs. * * The min-size is enforced under `@media (pointer: coarse)` only * (see `components/touch-targets.css`) so desktop pixel-perfect * sizing is preserved while touch users get a comfortable target. * * #958 cycle 1. */ --dz-touch-target-min: 44px; /* ─────────────────────────── colour ramps ──────────────────────── * Raw OKLCH ramps lifted from Open Props * (props.colors-oklch.css), renamed to Dazzle's vocabulary. Use * semantic tokens (--colour-*) below for almost all styling; * raw ramps only when no semantic token fits. * ───────────────────────────────────────────────────────────────── */ --neutral-50: oklch(98.5% 0.002 247.84); --neutral-100: oklch(96.7% 0.003 264.54); --neutral-200: oklch(92.8% 0.006 264.53); --neutral-300: oklch(86.9% 0.012 252.89); --neutral-400: oklch(70.6% 0.022 261.32); --neutral-500: oklch(55.1% 0.027 264.36); --neutral-600: oklch(44.6% 0.030 256.80); --neutral-700: oklch(37.3% 0.034 259.73); --neutral-800: oklch(27.8% 0.030 256.85); --neutral-900: oklch(21.0% 0.034 264.66); --neutral-950: oklch(13.0% 0.028 261.69); --brand-50: oklch(97.0% 0.014 254.60); --brand-100: oklch(93.2% 0.032 255.59); --brand-200: oklch(88.2% 0.059 254.13); --brand-300: oklch(80.9% 0.105 251.81); --brand-400: oklch(70.7% 0.165 254.62); --brand-500: oklch(62.3% 0.214 259.81); --brand-600: oklch(54.6% 0.245 262.88); --brand-700: oklch(48.8% 0.243 264.05); --brand-800: oklch(42.4% 0.199 265.64); --brand-900: oklch(37.9% 0.146 265.52); --brand-950: oklch(28.2% 0.091 267.94); --success-500: oklch(64.8% 0.150 142.50); --success-600: oklch(53.0% 0.140 142.50); /* 4.5:1 on the soft wash AND white (axe-verified) */ --warning-500: oklch(76.9% 0.188 70.08); --warning-600: oklch(52.0% 0.150 70.08); /* 4.5:1 on the soft wash AND white (axe-verified) */ --danger-500: oklch(63.7% 0.208 25.33); --danger-600: oklch(51.0% 0.195 25.33); /* 4.5:1 as text on wash/white; fills carry white text */ /* ─────────────────────────── colour: semantic ──────────────────── * Semantic tokens that components reference. Project themes * override THESE, not the raw ramps. light-dark() handles * scheme switching when supported; @media fallback below. * ───────────────────────────────────────────────────────────────── */ --colour-bg: light-dark(var(--neutral-50), var(--neutral-950)); --colour-surface: light-dark(white, var(--neutral-900)); --colour-surface-muted: light-dark(var(--neutral-100), var(--neutral-800)); --colour-text: light-dark(var(--neutral-900), var(--neutral-50)); --colour-text-muted: light-dark(var(--neutral-600), var(--neutral-400)); --colour-border: light-dark(var(--neutral-200), var(--neutral-700)); --colour-brand: var(--brand-600); /* Brand as TEXT (badges/avatars/tags on washes): scheme-aware, unlike --colour-brand which stays the vivid FILL accent in both schemes. */ --colour-brand-text: light-dark(var(--brand-600), var(--brand-300)); --colour-brand-contrast: white; /* foreground on filled brand fills (CTAs) */ --colour-accent: var(--brand-500); /* Tone TEXT semantics are scheme-aware: the -600 steps carry 4.5:1 on light washes/white; dark mode needs LIGHT tone text on dark washes. Solid fills that carry white text must use the fixed ramp steps (--success-600 etc.), never these flippable text tokens. */ --colour-success: light-dark(var(--success-600), oklch(74% 0.13 142.50)); --colour-warning: light-dark(var(--warning-600), oklch(80% 0.13 70.08)); --colour-danger: light-dark(var(--danger-600), oklch(75% 0.15 25.33)); /* Info: cyan-leaning so chart series stay distinguishable from * --colour-brand (hue ~263). Scheme-stable, like the tone hues. */ --colour-info: oklch(60% 0.13 220); /* Tone tints (background washes for surfaces) — semantic tokens * the dz-tones replacements consume. Authors don't hand-craft * `hsl(var(--success) / 0.08)` strings any more. */ --colour-success-soft: light-dark(oklch(from var(--colour-success) 96.5% 0.04 h), oklch(from var(--colour-success) 28% 0.06 h)); --colour-warning-soft: light-dark(oklch(from var(--colour-warning) 96.5% 0.04 h), oklch(from var(--colour-warning) 28% 0.06 h)); --colour-danger-soft: light-dark(oklch(from var(--colour-danger) 96.5% 0.04 h), oklch(from var(--colour-danger) 28% 0.06 h)); --colour-brand-soft: light-dark(oklch(from var(--colour-brand) 96.5% 0.04 h), oklch(from var(--colour-brand) 28% 0.06 h)); /* Default colour-scheme advertisement — lets browser-chrome * (scrollbars, form controls) pick appropriate variants. */ color-scheme: light dark; } /* #938 — bind `data-theme="dark"` (the JS toggle's output) to the * actual `color-scheme` property so `light-dark()` flips when the * user toggles. Without this, the toggle would set `data-theme` but * `light-dark()` would still resolve based on `prefers-color-scheme`, * leaving framework components stuck on the light variant of * `--colour-bg` / `--colour-text` / `--colour-border` even though * the topbar swapped its sun/moon icon. The marketing-site `site.js` * sets `style.colorScheme` imperatively for the same reason; this * CSS rule covers the in-app shell whose Alpine controller only * sets `data-theme`. */ [data-theme="dark"] { color-scheme: dark; } [data-theme="light"] { color-scheme: light; } /* Fallback for browsers without light-dark() support. Modern * Chrome / Firefox / Safari all support it as of 2024 but the * @supports gate keeps the door open for outliers. */ @media (prefers-color-scheme: dark) { @supports not (color: light-dark(white, black)) { :root { --colour-bg: var(--neutral-950); --colour-surface: var(--neutral-900); --colour-surface-muted: var(--neutral-800); --colour-text: var(--neutral-50); --colour-text-muted: var(--neutral-400); --colour-border: var(--neutral-700); --colour-success: oklch(74% 0.13 142.50); --colour-warning: oklch(80% 0.13 70.08); --colour-danger: oklch(75% 0.15 25.33); --colour-brand-text: var(--brand-300); --colour-success-soft: oklch(from var(--colour-success) 28% 0.06 h); --colour-warning-soft: oklch(from var(--colour-warning) 28% 0.06 h); --colour-danger-soft: oklch(from var(--colour-danger) 28% 0.06 h); --colour-brand-soft: oklch(from var(--colour-brand) 28% 0.06 h); } } } /* ─────────────────────────── animation keyframes ──────────────────── * Backing keyframes for the `--animation-*` named tokens above. * Prefixed `dz-` so they don't collide with project-defined * keyframes. Open Props convention; #960 layer 1. * * Honoured by `prefers-reduced-motion: reduce` further down. */ @keyframes dz-fade-in { from { opacity: 0; } } @keyframes dz-fade-out { to { opacity: 0; } } @keyframes dz-scale-up { from { transform: scale(0.92); opacity: 0; } } @keyframes dz-scale-down { to { transform: scale(0.92); opacity: 0; } } @keyframes dz-slide-in-up { from { transform: translateY(8%); opacity: 0; } } @keyframes dz-slide-in-down { from { transform: translateY(-8%); opacity: 0; } } @keyframes dz-slide-in-left { from { transform: translateX(8%); opacity: 0; } } @keyframes dz-slide-in-right { from { transform: translateX(-8%); opacity: 0; } } @keyframes dz-slide-out-up { to { transform: translateY(-8%); opacity: 0; } } @keyframes dz-slide-out-down { to { transform: translateY(8%); opacity: 0; } } @keyframes dz-slide-out-left { to { transform: translateX(-8%); opacity: 0; } } @keyframes dz-slide-out-right { to { transform: translateX(8%); opacity: 0; } } @keyframes dz-shake-x { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } } @keyframes dz-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* Reduced-motion guard: collapse all dz-* animations to a near-instant * fade so users who request reduced motion still get state changes * without parallax/translate/scale. Operates on the keyframe name * (`animation-name`) so component-local @keyframes definitions * (dashboard, etc.) aren't affected by this rule. */ @media (prefers-reduced-motion: reduce) { [style*="animation"], [class*="dz-anim-"], .dz-toast { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } /* --- hatchi-maxchi/components/accordion.css --- */ /* HYPERPART: accordion */ /* * dz-accordion — native
disclosure group. * * Zero JS. Single-open exclusivity is the HTML `name=` attribute: items * sharing a name auto-close their siblings (the shadcn `type="single"` * behaviour, with no controller). Drop `name` for an independent * (multi-open) group. Keyboard + AT semantics are the browser's own *
/ — nothing to re-implement. */ .dz-accordion { border: 1px solid var(--colour-border); border-radius: var(--radius-md); background: var(--colour-surface); overflow: hidden; } .dz-accordion__item + .dz-accordion__item { border-block-start: 1px solid var(--colour-border); } .dz-accordion__trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-md) var(--space-lg); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--colour-text); cursor: pointer; list-style: none; transition: background var(--duration-fast) var(--ease-out); } .dz-accordion__trigger::-webkit-details-marker { display: none; } .dz-accordion__trigger:hover { background: var(--colour-surface-muted); } .dz-accordion__trigger:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); /* inset: the accordion clips its corners (overflow:hidden), so an outward offset ring would be cropped at the item edges. */ outline-offset: calc(var(--focus-ring-offset) * -1); } /* CSS chevron — inherits currentColor, rotates when the item is open. */ .dz-accordion__trigger::after { content: ""; flex: none; width: 1rem; height: 1rem; background: currentColor; opacity: 0.55; mask: center / contain no-repeat url('data:image/svg+xml;utf8,'); transition: transform var(--duration-base) var(--ease-out); } .dz-accordion__item[open] .dz-accordion__trigger::after { transform: rotate(180deg); } .dz-accordion__panel { padding: 0 var(--space-lg) var(--space-md); font-size: var(--text-sm); color: var(--colour-text-muted); line-height: var(--leading-normal); } @media (prefers-reduced-motion: reduce) { .dz-accordion__trigger, .dz-accordion__trigger::after { transition: none; } } /* --- hatchi-maxchi/components/action-grid.css --- */ /* HYPERPART: action-grid */ /* Promoted VERBATIM from Dazzle regions.css (W1, fleet convergence). * The Dazzle emitter contract predates the move and is unchanged. */ /* ─────────────────────────── action_grid region ───────────────── * Responsive 1/2/3-col grid of CTA cards. Each card carries a * label, optional icon, optional count badge — and a tone token * (positive / warning / destructive / accent / neutral) routed * through dz-tones.css via data-dz-tone / data-dz-tone-badge * (unchanged). The hover/cursor affordance is gated on the * -vs-
wrapper choice in the template; the .dz-action-card * rule covers the shared shape. */ .dz-action-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); margin-block-start: var(--space-sm); } @media (min-width: 40rem) { .dz-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 64rem) { .dz-action-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .dz-action-card { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-md); border-radius: var(--radius-md); border: 1px solid var(--colour-border); background: var(--colour-surface); text-decoration: none; color: var(--colour-text); transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); } a.dz-action-card { cursor: pointer; } a.dz-action-card:hover { background: var(--colour-bg); } .dz-action-card-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); } .dz-action-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; color: var(--colour-text-muted); } .dz-action-card-icon-spacer { width: 1.25rem; /* height too — a label-only card (no icon, no count) otherwise * collapses its row to 0 height (the zero-paint gate's catch; the * bug shipped in Dazzle for as long as the spacer existed). */ height: 1.25rem; display: inline-block; } .dz-action-card-count { font-family: var(--font-mono); font-size: var(--text-xs); padding-inline: var(--space-sm); padding-block: 0.125rem; border-radius: var(--radius-full); } .dz-action-card-label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--colour-text); line-height: var(--leading-tight); } /* Tone tints (moved from Dazzle dz-tones.css with the component — * the tinting IS the component's point). */ /* v0.61.74 (#906 cleanup): action_grid was the second template using * the buried-dynamic-class pattern. Card surface tint + count-badge * tint both route via `data-dz-tone` / `data-dz-tone-badge`. * Hardcoded `hsl(145,55%,45%)` / `hsl(40,90%,55%)` literals in the * template are gone — both now use design-system slots so theming * applies. */ .dz-action-card[data-dz-tone="positive"] { border-color: var(--colour-success-soft); background: var(--colour-success-soft); } .dz-action-card[data-dz-tone="positive"]:hover { background: var(--colour-success-soft); } .dz-action-card[data-dz-tone="warning"] { border-color: var(--colour-warning-soft); background: var(--colour-warning-soft); } .dz-action-card[data-dz-tone="warning"]:hover { background: var(--colour-warning-soft); } .dz-action-card[data-dz-tone="destructive"] { border-color: var(--colour-danger-soft); background: var(--colour-danger-soft); } .dz-action-card[data-dz-tone="destructive"]:hover { background: var(--colour-danger-soft); } .dz-action-card[data-dz-tone="accent"] { border-color: var(--colour-brand-soft); background: var(--colour-brand-soft); } .dz-action-card[data-dz-tone="accent"]:hover { background: var(--colour-brand-soft); } .dz-action-card[data-dz-tone="neutral"], .dz-action-card:not([data-dz-tone]) { border-color: var(--colour-border); background: var(--colour-surface); } .dz-action-card[data-dz-tone="neutral"]:hover, .dz-action-card:not([data-dz-tone]):hover { background: color-mix(in oklab, var(--colour-surface-muted) 40%, transparent); } /* Count-badge tints — same five tones, slightly different opacities * so the badge reads as denser than the card surface. */ .dz-action-card-count[data-dz-tone-badge="positive"] { background: var(--colour-success-soft); color: var(--colour-success); } .dz-action-card-count[data-dz-tone-badge="warning"] { background: var(--colour-warning-soft); color: var(--colour-warning); } .dz-action-card-count[data-dz-tone-badge="destructive"] { background: var(--colour-danger-soft); color: var(--colour-danger); } .dz-action-card-count[data-dz-tone-badge="accent"] { background: var(--colour-brand-soft); /* the scheme-aware TEXT token (brand-600 light / brand-300 dark) — * raw --colour-brand fails contrast on the dark soft tint (axe). */ color: var(--colour-brand-text); } .dz-action-card-count[data-dz-tone-badge="neutral"], .dz-action-card-count:not([data-dz-tone-badge]) { background: var(--colour-surface-muted); color: var(--colour-text-muted); } /* ── Metric delta arrow colour (#884 / sibling #906 cleanup) ──────── */ /* v0.61.74: the period-over-period delta arrow used to compute its * tone via a dynamic Tailwind class string. Now driven by * `data-dz-delta-tone` matching the standard tone palette. The * hardcoded `hsl(142 76% 36%)` literal is gone — `--success` is the * canonical green slot. */ .dz-metric-delta[data-dz-delta-tone="positive"] { color: var(--colour-success); } .dz-metric-delta[data-dz-delta-tone="destructive"] { color: var(--colour-danger); } .dz-metric-delta[data-dz-delta-tone="neutral"], .dz-metric-delta:not([data-dz-delta-tone]) { color: var(--colour-text-muted); } /* ── Status list pill + icon colour (#3 / roadmap #3) ─────────────── */ /* Pill backgrounds (rendered only for non-neutral states; neutral * entries omit the pill via template branch). */ /* --- hatchi-maxchi/components/activity-feed.css --- */ /* HYPERPART: activity-feed */ /* Promoted VERBATIM from Dazzle regions.css (W2, fleet convergence). * The Dazzle emitter contract predates the move and is unchanged. */ /* ─────────────────────────── activity_feed region ─────────────── * Vertical timeline: dot on a left rail, time on the left of each * row, message bubble on the right. Bubble gets a hover-shadow * when wired to an action_url (HTMX-driven detail drawer open). */ .dz-activity-feed { position: relative; padding-inline-start: var(--space-md); border-inline-start: 1px solid var(--colour-border); display: flex; flex-direction: column; gap: var(--space-md); list-style: none; margin: 0; } .dz-activity-row { position: relative; } .dz-activity-dot { position: absolute; inset-inline-start: -1.3125rem; top: 0.375rem; display: inline-flex; align-items: center; justify-content: center; width: 0.75rem; height: 0.75rem; } .dz-activity-dot > svg { width: 0.75rem; height: 0.75rem; color: var(--colour-brand); } .dz-activity-row-inner { display: flex; gap: var(--space-md); } .dz-activity-time { font-size: var(--text-xs); color: var(--colour-text-muted); min-width: 5rem; padding-block-start: 0.25rem; } /* Bubble — no border (the dashboard slot already owns card chrome, * adding a border re-creates a card-within-a-card per #852). Subtle * background tint provides visual grouping. */ .dz-activity-bubble { flex: 1 1 0; padding-inline: var(--space-sm); padding-block: var(--space-xs); border-radius: var(--radius-sm); background: color-mix(in oklch, var(--colour-bg) 70%, transparent); font-size: var(--text-sm); color: var(--colour-text); } .dz-activity-bubble.is-clickable { cursor: pointer; transition: background var(--duration-fast) var(--ease-out); } .dz-activity-bubble.is-clickable:hover { background: var(--colour-bg); } .dz-activity-actor { font-weight: var(--weight-medium); } .dz-activity-empty { text-align: center; font-size: var(--text-sm); color: var(--colour-text-muted); padding-block: var(--space-2xl); } /* --- hatchi-maxchi/components/alert.css --- */ /* * dz-alert — HaTchi-MaXchi tranche 1 (spec: hatchi-maxchi-standalone). * * Identity signals: tone wash surface (--colour-*-soft) + registry icon + * text — colour never carries meaning alone (WCAG 1.4.1 as aesthetic). * * Contract: * * Tones: info (default) | success | warning | destructive | neutral. */ .dz-alert { display: flex; gap: var(--space-md); align-items: flex-start; padding: var(--space-md) var(--space-lg); border: 1px solid var(--colour-border); border-radius: var(--radius-md); background: var(--colour-surface); font-size: var(--text-sm); } .dz-alert__icon { display: inline-flex; width: 1.125rem; height: 1.125rem; flex-shrink: 0; margin-block-start: 0.125rem; } .dz-alert__icon svg { width: 100%; height: 100%; display: block; } .dz-alert__title { font-weight: var(--weight-semibold); margin-block-end: 0.125rem; } .dz-alert__description { color: var(--colour-text-muted); line-height: var(--leading-normal); } .dz-alert[data-dz-tone="info"] { background: var(--colour-brand-soft); border-color: color-mix(in oklab, var(--colour-brand) 25%, var(--colour-border)); } .dz-alert[data-dz-tone="info"] .dz-alert__icon { color: var(--colour-brand); } .dz-alert[data-dz-tone="success"] { background: var(--colour-success-soft); border-color: color-mix(in oklab, var(--colour-success) 25%, var(--colour-border)); } .dz-alert[data-dz-tone="success"] .dz-alert__icon { color: var(--colour-success); } .dz-alert[data-dz-tone="warning"] { background: var(--colour-warning-soft); border-color: color-mix(in oklab, var(--colour-warning) 25%, var(--colour-border)); } .dz-alert[data-dz-tone="warning"] .dz-alert__icon { color: var(--colour-warning); } .dz-alert[data-dz-tone="destructive"] { background: var(--colour-danger-soft); border-color: color-mix(in oklab, var(--colour-danger) 25%, var(--colour-border)); } .dz-alert[data-dz-tone="destructive"] .dz-alert__icon { color: var(--colour-danger); } /* ── dz-separator ────────────────────────────────────────────────────── */ /* HYPERPART: separator */ .dz-separator { border: none; border-block-start: 1px solid var(--colour-border); margin-block: var(--space-lg); /* The UA gives
margin-inline auto; in a column flexbox those auto * margins absorb ALL free space and the rule's width collapses to zero * (rendered as a blank line). Pin the inline margins. */ margin-inline: 0; } .dz-separator--vertical { display: inline-block; width: 0; align-self: stretch; border-block-start: none; border-inline-start: 1px solid var(--colour-border); margin-block: 0; margin-inline: var(--space-md); } /* ── data-dz-tooltip — CSS-only attribute tooltip ────────────────────── */ [data-dz-tooltip] { position: relative; } [data-dz-tooltip]::after { content: attr(data-dz-tooltip); position: absolute; inset-block-end: calc(100% + 0.375rem); inset-inline-start: 50%; translate: -50% 0; padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); background: var(--colour-text); color: var(--colour-bg); font-size: var(--text-xs); font-weight: var(--weight-medium); line-height: 1.3; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--duration-fast) var(--ease-out); z-index: 50; } [data-dz-tooltip]:hover::after, [data-dz-tooltip]:focus-visible::after { opacity: 1; transition-delay: 300ms; } @media (prefers-reduced-motion: reduce) { [data-dz-tooltip]::after { transition: none; } } /* ── dz-menu — details-based dropdown (the hypermedia answer) ────────── */ .dz-menu { position: relative; display: inline-block; } .dz-menu > summary { list-style: none; cursor: pointer; } .dz-menu > summary::-webkit-details-marker { display: none; } .dz-menu__panel { position: absolute; inset-block-start: calc(100% + 0.25rem); inset-inline-end: 0; min-width: 11rem; padding: var(--space-xs); background: var(--colour-surface); border: 1px solid var(--colour-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); z-index: 40; } .dz-menu__item { display: flex; align-items: center; gap: var(--space-sm); width: 100%; padding: var(--space-sm) var(--space-md); border: none; border-radius: var(--radius-sm); background: none; color: var(--colour-text); font-size: var(--text-sm); text-align: start; text-decoration: none; cursor: pointer; } .dz-menu__item:hover { background: var(--colour-bg); } .dz-menu__item[data-dz-tone="destructive"] { color: var(--colour-danger); } .dz-menu__separator { border: none; border-block-start: 1px solid var(--colour-border); margin-block: var(--space-xs); } /* ── dz-alert-dialog — designed hx-confirm surface ───────────────────── */ /* HYPERPART: confirm */ dialog.dz-alert-dialog { width: min(26rem, calc(100vw - 2rem)); padding: var(--space-2xl); border: 1px solid var(--colour-border); border-radius: var(--radius-lg); background: var(--colour-surface); color: var(--colour-text); box-shadow: var(--shadow-lg); text-align: center; } dialog.dz-alert-dialog::backdrop { background: oklch(13% 0.028 261.69 / 0.5); backdrop-filter: blur(2px); } .dz-alert-dialog__icon { display: inline-flex; width: 2rem; height: 2rem; color: var(--colour-danger); margin-block-end: var(--space-md); } .dz-alert-dialog__icon svg { width: 100%; height: 100%; } .dz-alert-dialog__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); margin: 0 0 var(--space-sm); } .dz-alert-dialog__message { color: var(--colour-text-muted); font-size: var(--text-sm); margin: 0 0 var(--space-xl); } .dz-alert-dialog__actions { display: flex; gap: var(--space-md); justify-content: center; } /* --- hatchi-maxchi/components/app-shell.css --- */ /* HYPERPART: app-shell */ /* app-shell — the modern SaaS/admin application shell: persistent left * navigation, optional sticky top bar, routed main workspace, and a * responsive/collapsible sidebar. Promoted VERBATIM from Dazzle's * fragments.css (2026-07-06 directive: all core UX expression from HM); * the emitted contract (`dz-app-shell` + `data-dz-sidebar` state on the * root) predates the move and is unchanged. * * NB this is a COMPONENT, not a layout primitive — the 64rem media query * is deliberate: "persistent-collapsible on desktop, off-canvas overlay * on narrow" is viewport policy, not intrinsic wrapping. The layout * primitives inside the shell stay media-query-free. * * State contract: `data-dz-sidebar="open|closed"` on `.dz-app-shell` * (server-rendered from the `dz_sidebar` cookie; the dz-app-shell.js * controller flips it and re-writes the cookie). */ /* ─────────────────────────── layouts/app_shell ────────────────── * Main application shell with collapsible left sidebar, sticky top * bar, and main content area. Sidebar open/collapsed state is * exposed on the shell root via `data-dz-sidebar="open"` so CSS * selectors can drive both the slide transform AND the content * area's left padding offset. */ .dz-app-shell { /* Root container — sidebarOpen attribute lives here. */ } .dz-app-content { display: flex; flex-direction: column; min-height: 100vh; transition: padding var(--duration-base) var(--ease-out); } @media (min-width: 64rem) { [data-dz-sidebar="open"] .dz-app-content { padding-inline-start: 16rem; /* matches sidebar width */ } } /* Top bar */ .dz-topbar { position: sticky; inset-block-start: 0; z-index: 30; display: flex; align-items: center; height: 3.5rem; padding-inline: var(--space-md); gap: var(--space-md); background: color-mix(in oklch, var(--colour-bg) 85%, transparent); backdrop-filter: blur(8px); border-block-end: 1px solid color-mix(in oklch, var(--colour-border) 50%, transparent); box-shadow: 0 1px 3px oklch(0% 0 0 / 0.04); } @media (min-width: 64rem) { .dz-topbar { padding-inline: var(--space-lg); } } .dz-topbar-leading, .dz-topbar-trailing { flex: none; display: flex; align-items: center; gap: var(--space-sm); } /* #1294 — sidebar toggle (hamburger) at the start of the topbar leading * area. Flips `data-dz-sidebar` on `.dz-app-shell` via dz-alpine.js so the * sidebar nav is reachable + collapsible at every viewport. */ .dz-sidebar-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: none; border-radius: var(--radius-md); background: transparent; color: var(--colour-text); cursor: pointer; } .dz-sidebar-toggle:hover { background: var(--colour-surface); } .dz-sidebar-toggle__icon, .dz-sidebar-toggle__icon::before, .dz-sidebar-toggle__icon::after { display: block; width: 1.125rem; height: 2px; background: currentColor; border-radius: 1px; } .dz-sidebar-toggle__icon { position: relative; } .dz-sidebar-toggle__icon::before, .dz-sidebar-toggle__icon::after { content: ""; position: absolute; inset-inline-start: 0; } .dz-sidebar-toggle__icon::before { inset-block-start: -6px; } .dz-sidebar-toggle__icon::after { inset-block-start: 6px; } .dz-topbar-title { flex: 1 1 0; min-width: 0; } .dz-topbar-title-text { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--colour-text); } .dz-topbar-user { font-size: var(--text-sm); color: var(--colour-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 12.5rem; display: none; } @media (min-width: 40rem) { .dz-topbar-user { display: inline; } } /* Generic icon button used in top bar + sidebar header */ .dz-icon-button { width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--colour-text-muted); background: transparent; border: 0; cursor: pointer; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .dz-icon-button:hover { background: var(--colour-bg); color: var(--colour-text); } .dz-icon-button > svg { width: 1.25rem; height: 1.25rem; } /* Mobile-only and desktop-only icon variants */ .dz-icon-button.is-mobile-only { display: inline-flex; } @media (min-width: 64rem) { .dz-icon-button.is-mobile-only { display: none; } } .dz-icon-button.is-desktop-only { display: none; } @media (min-width: 64rem) { .dz-icon-button.is-desktop-only { display: inline-flex; } } /* Main content area */ .dz-app-main { flex: 1 1 0; padding: var(--space-md); } @media (min-width: 64rem) { .dz-app-main { padding: var(--space-lg); } } .dz-page-purpose { font-size: var(--text-sm); color: var(--colour-text-muted); margin-block: 0.25rem var(--space-md); } /* Mobile backdrop overlay */ .dz-app-backdrop { position: fixed; inset: 0; background: oklch(0% 0 0 / 0.4); z-index: 30; } @media (min-width: 64rem) { .dz-app-backdrop { display: none !important; } } /* Sidebar */ .dz-sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 40; width: 16rem; background: var(--colour-surface); border-inline-end: 1px solid var(--colour-border); display: flex; flex-direction: column; transform: translateX(-100%); transition: transform var(--duration-base) var(--ease-out); } [data-dz-sidebar="open"] .dz-sidebar { transform: translateX(0); } .dz-sidebar-brand { padding: var(--space-md); border-block-end: 1px solid var(--colour-border); display: flex; align-items: center; justify-content: space-between; } .dz-sidebar-brand-text { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--colour-text); margin: 0; } .dz-sidebar-nav { flex: 1 1 0; overflow-y: auto; } .dz-sidebar-nav-list { padding: 0.75rem; display: flex; flex-direction: column; gap: 0.125rem; list-style: none; margin: 0; } .dz-sidebar-nav-link { display: flex; align-items: center; gap: var(--space-sm); padding-inline: var(--space-md); padding-block: 0.375rem; border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--colour-text-muted); text-decoration: none; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .dz-sidebar-nav-link:hover { background: var(--colour-bg); color: var(--colour-text); } /* Active link — keys off aria-current="page" so the visual state * and the accessibility attribute share one source of truth. */ .dz-sidebar-nav-link[aria-current="page"] { background: var(--colour-bg); color: var(--colour-text); font-weight: var(--weight-medium); } .dz-sidebar-nav-icon { width: 1rem; height: 1rem; flex-shrink: 0; } .dz-sidebar-nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Collapsible nav group */ .dz-sidebar-nav-group-summary { display: flex; align-items: center; gap: var(--space-sm); padding-inline: var(--space-md); padding-block: 0.375rem; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--colour-text); cursor: pointer; list-style: none; transition: background var(--duration-fast) var(--ease-out); } .dz-sidebar-nav-group-summary::-webkit-details-marker { display: none; } .dz-sidebar-nav-group-summary:hover { background: var(--colour-bg); } .dz-sidebar-nav-group-children { padding-inline-start: var(--space-md); margin-block-start: 0.125rem; display: flex; flex-direction: column; gap: 0.125rem; list-style: none; } /* Sidebar footer */ .dz-sidebar-footer { margin-block-start: auto; border-block-start: 1px solid var(--colour-border); } .dz-sidebar-user-block { padding: 0.75rem; padding-block-end: 0.25rem; } .dz-sidebar-user-name { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--colour-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-inline: var(--space-md); } .dz-sidebar-action-row { margin-block-start: 0.25rem; } .dz-sidebar-action-button { display: flex; align-items: center; gap: var(--space-sm); width: 100%; padding-inline: var(--space-md); padding-block: 0.375rem; border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--colour-text-muted); background: transparent; border: 0; cursor: pointer; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .dz-sidebar-action-button:hover { background: var(--colour-bg); color: var(--colour-text); } .dz-sidebar-action-button > svg { width: 1rem; height: 1rem; flex-shrink: 0; } .dz-sidebar-darkmode { padding: 0.75rem; padding-block-start: 0.25rem; display: none; } @media (min-width: 64rem) { .dz-sidebar-darkmode { display: block; } } /* --- hatchi-maxchi/components/badge.css --- */ /* * badge.css — status / state / enum badge component. * * Single semantic class (.dz-badge) plus tone modifier via * data-dz-tone attribute. Used by the render_status_badge macro * (templates/macros/status_badge.html) — 19 import sites across * tables, kanban cards, detail views, review queues. * * The macro owns the tone-resolution logic (Jinja `badge_tone` * filter resolves enum values to one of five tones); this CSS * file owns the visual styling. Authors don't think about * specific colour values — they invoke the macro with a value * and trust the design system. * * Wrapped in @layer components (declared in dazzle.css). All * lengths and colours route via design tokens — Stylelint enforces * this in components/. */ .dz-badge { display: inline-flex; align-items: center; border-radius: var(--radius-sm); font-weight: var(--weight-medium); /* Defaults match the macro's `size="md"` branch. The .dz-badge-sm * modifier overrides for dense regions (timeline, bar_chart). */ padding-inline: var(--space-sm); height: 1.25rem; font-size: var(--text-xs); } .dz-badge-sm { padding-inline: var(--space-xs); height: 1rem; /* Slightly smaller than the default --text-xs for micro contexts. */ font-size: 0.625rem; line-height: 1; } /* ── WCAG colour+icon+text (#1493 slice 2 part 3) ───────────────── * Non-neutral tones lead with a decorative glyph so state is never * conveyed by colour alone (WCAG 1.4.1). Emitted by `badge_icon_html` * as the first child of .dz-badge; neutral badges carry no icon. */ .dz-badge-icon { margin-inline-end: var(--space-xs); font-size: 0.875em; line-height: 1; } /* ── Tone tints ─────────────────────────────────────────────────── * Five tone tokens matching the wider Dazzle palette: neutral * (default), success, warning, info, destructive. Selected via * `data-dz-tone` attribute emitted by the macro. */ .dz-badge[data-dz-tone="success"] { background: var(--colour-success-soft); color: var(--colour-success); } .dz-badge[data-dz-tone="warning"] { background: var(--colour-warning-soft); color: var(--colour-warning); } .dz-badge[data-dz-tone="info"] { background: var(--colour-brand-soft); color: var(--colour-brand-text); } .dz-badge[data-dz-tone="destructive"] { background: var(--colour-danger-soft); color: var(--colour-danger); } .dz-badge[data-dz-tone="neutral"], .dz-badge:not([data-dz-tone]) { background: var(--colour-bg); color: var(--colour-text-muted); } /* ── Optional border ────────────────────────────────────────────── * The macro accepts a `bordered` boolean for emphasis (used in the * detail region). Border colour matches the tone. */ .dz-badge.bordered { border: 1px solid var(--colour-border); } .dz-badge.bordered[data-dz-tone="success"] { border-color: var(--colour-success); } .dz-badge.bordered[data-dz-tone="warning"] { border-color: var(--colour-warning); } .dz-badge.bordered[data-dz-tone="info"] { border-color: var(--colour-brand); } .dz-badge.bordered[data-dz-tone="destructive"] { border-color: var(--colour-danger); } /* ── Em-dash placeholder ────────────────────────────────────────── * When the macro is called with empty value, it renders a single- * char placeholder (—) for absent status. Same muted treatment as * any other "no value" token. */ .dz-badge-empty { color: var(--colour-text-muted); font-size: var(--text-xs); } /* Registry SVG badge glyphs (Phase 3, supersedes #1493 entity glyphs). */ .dz-badge-icon { display: inline-flex; width: 0.875em; height: 0.875em; flex-shrink: 0; } .dz-badge-icon svg { width: 100%; height: 100%; display: block; } /* --- hatchi-maxchi/components/bar-chart.css --- */ /* HYPERPART: bar-chart */ /* Promoted VERBATIM from Dazzle regions.css (Tier C-a, fleet * convergence). The Dazzle emitter contract is unchanged. */ /* ─────────────────────────── bar_chart region ─────────────────── * Horizontal bar rows: label (right) / track / value (right). The * track has rounded-full chrome; the fill is brand-coloured and * its width is the inline value-derived percentage. */ .dz-bar-chart-bars { display: flex; flex-direction: column; gap: var(--space-sm); margin-block-start: var(--space-sm); } .dz-bar-chart-row { display: flex; align-items: center; gap: var(--space-sm); } .dz-bar-chart-label { width: 6rem; text-align: end; font-size: var(--text-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dz-bar-chart-label.is-wide { width: 7rem; color: var(--colour-text-muted); } .dz-bar-chart-track { flex: 1 1 0; height: 1.25rem; background: var(--colour-bg); border-radius: var(--radius-full); overflow: hidden; } .dz-bar-chart-fill { height: 100%; background: var(--colour-brand); border-radius: var(--radius-full); transition: width var(--duration-base) var(--ease-out); } .dz-bar-chart-value { width: 2.5rem; text-align: end; font-size: var(--text-xs); font-family: var(--font-mono); color: var(--colour-text-muted); } .dz-bar-chart-value.is-wide { width: 2.5rem; color: var(--colour-text); } .dz-bar-chart-summary { font-size: var(--text-xs); color: var(--colour-text-muted); margin-block-start: var(--space-sm); } /* --- hatchi-maxchi/components/bar-track.css --- */ /* HYPERPART: bar-track */ /* Promoted VERBATIM from Dazzle regions.css (Tier C-b, fleet * convergence). The Dazzle emitter contract is unchanged. */ /* ─────────────────────────── bar_track region ─────────────────── * Compact horizontal value bars, one per group. Three columns per * row: fixed-width label (right-aligned) | flex-grow track | value. */ .dz-bar-track-rows { display: flex; flex-direction: column; gap: 0.375rem; margin-block-start: var(--space-sm); } .dz-bar-track-row { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-xs); } .dz-bar-track-label { width: 7rem; text-align: end; color: var(--colour-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dz-bar-track { flex: 1 1 0; position: relative; height: 1rem; background: var(--colour-bg); border-radius: var(--radius-full); overflow: hidden; } .dz-bar-track-fill { position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--colour-brand); border-radius: var(--radius-full); transition: width var(--duration-base) var(--ease-out); } .dz-bar-track-value { width: 4rem; text-align: end; font-family: var(--font-mono); color: var(--colour-text-muted); } .dz-bar-track-summary { font-size: var(--text-xs); color: var(--colour-text-muted); margin-block-start: var(--space-sm); font-family: var(--font-mono); } /* --- hatchi-maxchi/components/box-plot.css --- */ /* HYPERPART: box-plot */ /* Promoted VERBATIM from Dazzle regions.css (Tier C-b, fleet * convergence). The Dazzle emitter contract is unchanged. */ /* ─────────────────────────── box_plot region ──────────────────── * Server-rendered SVG quartile boxes per group. SVG fill/stroke * tokens stay inline (per-element shape colour); host wrapper sized * via .dz-box-plot-svg + summary uses .dz-box-plot-summary. */ .dz-box-plot-svg { width: 100%; height: auto; } .dz-box-plot-summary { font-size: var(--text-xs); color: var(--colour-text-muted); margin-block-start: var(--space-sm); font-family: var(--font-mono); } /* --- hatchi-maxchi/components/bullet.css --- */ /* HYPERPART: bullet */ /* Promoted VERBATIM from Dazzle regions.css (Tier C-b, fleet * convergence). The Dazzle emitter contract is unchanged. */ /* ─────────────────────────── bullet chart region ─────────────── * Stephen Few bullet rows. Three fixed columns: label (right) / * track / value. Track contains: optional reference bands behind, * actual bar, target tick. Band/bar/tick are absolutely positioned * inside the relative track. */ .dz-bullet-rows { display: flex; flex-direction: column; gap: var(--space-sm); margin-block-start: var(--space-sm); } .dz-bullet-row { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-xs); } .dz-bullet-label { width: 6rem; text-align: end; color: var(--colour-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dz-bullet-track { flex: 1 1 0; position: relative; height: 1.25rem; background: var(--colour-bg); border-radius: var(--radius-sm); overflow: hidden; } .dz-bullet-band { position: absolute; inset-block: 0; opacity: 0.18; } .dz-bullet-actual { position: absolute; inset-block: 0.25rem; inset-inline-start: 0; background: var(--colour-brand); border-radius: var(--radius-sm); } .dz-bullet-target { position: absolute; inset-block: 0; width: 2px; background: var(--colour-text); } .dz-bullet-value { width: 4rem; text-align: end; font-family: var(--font-mono); color: var(--colour-text-muted); } .dz-bullet-summary { font-size: var(--text-xs); color: var(--colour-text-muted); margin-block-start: var(--space-sm); font-family: var(--font-mono); } /* --- hatchi-maxchi/components/button.css --- */ /* * button.css — button component family. * * One semantic class `.dz-button` + a `data-dz-variant` attribute for the * visual variant (canonical, matching `data-dz-tone` on badges/alerts): * data-dz-variant="ghost" no border, hover-tint only (back, cancel) * data-dz-variant="outline" bordered neutral (default action button) * data-dz-variant="destructive" bordered danger (delete, revoke) * data-dz-variant="primary" filled brand (the recommended action) * and `data-dz-size="sm"` for the compact inline-row size. * * A variant NEVER drops the base class — `.dz-button` carries the shared * geometry, `[data-dz-variant]` layers the skin. (The standalone * `.dz-button-primary` rule in components/table.css is a separate, smaller * table-header variant and is intentionally left as a class.) * * The `