/* ============================================================================= A4 — the token bridge. The control kit is ported from HealthExpress (D:\AI\EMR), whose components are styled entirely from its own --s-* tokens: 2,222 token references across the component stylesheets against roughly thirty Bootstrap selectors, none of them load-bearing. So the components need no Bootstrap, and the port is not a rewrite — it is this file. Two kinds of token, treated differently on purpose: IDENTITY colour, typeface, radius, elevation, focus. Re-pointed at Chairside's semantic tokens, so the kit inherits this product's brand and both of its themes for free, and there is exactly one place a colour is decided. STRUCTURAL spacing scale, type scale, transitions, z-index. Taken at HealthExpress's values, because they are considered design work with no brand in them, and re-deriving them would be inventing differences rather than removing them. Nothing here is a literal except the structural scales. Every colour resolves through Chairside's tokens, which is what keeps the A6 stylelint rule true. ========================================================================== */ :root { /* ---- IDENTITY: colour ------------------------------------------------- */ --s-primary: var(--accent); --s-primary-hover: color-mix(in srgb, var(--accent) 86%, var(--ink)); --s-primary-active: color-mix(in srgb, var(--accent) 74%, var(--ink)); --s-primary-light: var(--accent-soft); --s-primary-dark: color-mix(in srgb, var(--accent) 80%, var(--ink)); --s-on-primary: var(--on-accent); /* ink-2, not ink-3. Measured on the gallery: an outline-secondary button drawn in ink-3 lands at 4.47:1 against the dark card, which misses AA by 0.03 -- invisible to the eye, and exactly the kind of thing only a contrast check finds. ink-2 takes it to 7.2:1 and costs nothing. */ --s-secondary: var(--ink-2); --s-secondary-hover: var(--ink); --s-secondary-active: var(--ink); --s-secondary-light: var(--surface-2); --s-success: var(--pos); --s-success-hover: color-mix(in srgb, var(--pos) 86%, var(--ink)); --s-success-light: var(--pos-soft); --s-danger: var(--neg); --s-danger-hover: color-mix(in srgb, var(--neg) 86%, var(--ink)); --s-danger-light: var(--neg-soft); --s-warning: var(--warn); --s-warning-hover: color-mix(in srgb, var(--warn) 86%, var(--ink)); --s-warning-light: var(--warn-soft); --s-info: var(--info); --s-info-hover: color-mix(in srgb, var(--info) 86%, var(--ink)); --s-info-light: var(--info-soft); /* Surfaces, ink and lines. */ --s-body-bg: var(--bg); --s-body-color: var(--ink); --s-heading-color: var(--ink); --s-muted-color: var(--ink-3); --s-card-bg: var(--surface); --s-card-color: var(--ink); --s-card-border-color: var(--line); --s-border-color: var(--line); --s-input-bg: var(--surface); --s-input-color: var(--ink); --s-input-border-color: var(--line); --s-input-placeholder: var(--ink-3); --s-input-disabled-bg: var(--surface-2); --s-table-bg: transparent; --s-table-color: var(--ink); --s-table-border-color: var(--line-2); --s-table-hover-bg: var(--surface-2); --s-table-head-bg: var(--surface-2); --s-table-head-color: var(--ink-3); /* ---- IDENTITY: type, shape, elevation, focus -------------------------- */ --s-font-family-base: var(--font-ui); --s-font-family-sans: var(--font-ui); --s-font-family-mono: var(--font-mono); --s-border-width: 1px; --s-border-radius-sm: var(--r1); --s-border-radius: var(--r1); --s-border-radius-lg: var(--r2); --s-border-radius-xl: var(--r3); --s-border-radius-pill: 999px; --s-shadow-xs: var(--shadow-1); --s-shadow-sm: var(--shadow-1); --s-shadow: var(--shadow-2); --s-shadow-md: var(--shadow-2); --s-shadow-lg: var(--shadow-2); --s-shadow-xl: var(--shadow-3); /* Chairside has one focus policy for the whole application; the kit adopts it rather than bringing a second one. */ --s-focus-ring-color: var(--accent); --s-focus-ring-width: 2px; --s-focus-ring-offset: 2px; /* Density-aware, so the kit shrinks with the rest of the application instead of being the one thing on the page that ignores compact mode. */ --s-font-size-base: var(--ui); --s-font-size-md: var(--ui); --s-font-size-sm: var(--ui-sm); --s-font-size-xs: calc(var(--ui-sm) - 1px); --s-font-size-lg: var(--t-h3); --s-font-size-xl: var(--t-h2); --s-line-height-base: 1.5; --s-font-weight-normal: 400; --s-font-weight-medium: 500; --s-font-weight-semibold: 600; --s-font-weight-bold: 700; /* ---- STRUCTURAL: taken as designed ------------------------------------ */ --s-spacer: 1rem; --s-spacer-1: .25rem; --s-spacer-2: .5rem; --s-spacer-3: .75rem; --s-spacer-4: 1rem; --s-spacer-5: 1.25rem; --s-spacer-6: 1.5rem; --s-spacer-8: 2rem; --s-spacer-10: 3rem; --s-gap-1: .25rem; --s-gap-2: .5rem; --s-gap-3: .75rem; --s-gap-4: 1rem; --s-gap-5: 1.25rem; --s-gap-6: 1.5rem; --s-transition-bg: background-color var(--dur) var(--ease); --s-transition-color: color var(--dur) var(--ease); --s-transition-border: border-color var(--dur) var(--ease); --s-transition-shadow: box-shadow var(--dur) var(--ease); --s-transition-transform: transform var(--dur) var(--ease); --s-z-dropdown: 1000; --s-z-sticky: 1020; --s-z-fixed: 1030; --s-z-modal-backdrop: 1040; --s-z-modal: 1050; --s-z-popover: 1060; --s-z-toast: 1080; } /* HealthExpress tints with rgba(var(--s-*-rgb), a). An -rgb channel cannot be derived from a CSS variable, so the kit uses colour-mix against the surface instead — which has the further advantage of resolving correctly on a dark ground, where a fixed rgba tint does not. */ :root { --s-primary-tint: color-mix(in srgb, var(--accent) 22%, transparent); --s-secondary-tint: color-mix(in srgb, var(--ink-3) 22%, transparent); --s-success-tint: color-mix(in srgb, var(--pos) 22%, transparent); --s-danger-tint: color-mix(in srgb, var(--neg) 22%, transparent); --s-warning-tint: color-mix(in srgb, var(--warn) 22%, transparent); --s-info-tint: color-mix(in srgb, var(--info) 22%, transparent); } /* ---- Component tokens the ported stylesheets ask for ------------------- Found by build/kit/audit-tokens.py, not by eye. An undefined CSS variable is not an error -- the declaration is simply dropped -- so a missing token here renders as a card with no radius and no shadow, which reads as "plain" rather than "broken". The audit turns that into a list, and is worth re-running after every component is ported. */ :root { --s-card-border-radius: var(--r2); /* Bordered, so it does not also cast a shadow. Elevation is reserved for the things that genuinely float above the page -- menus, dialogs, a dragged card -- where it carries meaning rather than decoration. */ --s-card-box-shadow: none; --s-card-padding: var(--pad); --s-card-padding-sm: calc(var(--pad) * .7); --s-card-padding-lg: calc(var(--pad) * 1.5); --s-h5-font-size: var(--t-h3); --s-dark: var(--ink); --s-light: var(--surface-2); --s-light-color: var(--surface-2); /* Inputs sit on the same control height as the rest of the application, so a compact-density screen shrinks them with everything else rather than being the one row that does not move. */ --s-input-border-radius: var(--r1); --s-input-font-size: var(--ui); --s-input-line-height: 1.5; --s-input-padding-x: var(--ctl-px); --s-input-padding-y: calc((var(--ctl-h) - (var(--ui) * 1.5) - 2px) / 2); --s-input-focus-border: var(--accent); --s-input-focus-shadow: var(--focus-field); --s-table-striped-bg: color-mix(in srgb, var(--ink) 3%, transparent); --s-table-active-bg: var(--surface-3); --s-letter-spacing-wider: .04em; --s-form-columns: 2; --s-transition-opacity: opacity var(--dur) var(--ease); /* A tint of the body ink, for a hover or stripe that must read on both grounds. */ --s-body-color-tint: color-mix(in srgb, var(--ink) 6%, transparent); } /* Modal. --s-overlay-bg is unused in practice — paints ::backdrop from the platform and _extras.css styles that — but it is defined so the audit stays at zero and a stray rule does not silently resolve to nothing. */ :root { --s-line-height-tight: 1.25; --s-overlay-bg: color-mix(in srgb, var(--ink) 55%, transparent); --s-scrollbar-width: 0px; }