/* * Tabler bridge -- adopts an open-source design system without rewriting a * single one of the 189 page templates. * * WHY A BRIDGE AND NOT AN ADAPTER PER CLASS * * The measured position: the app defines 104 classes, used 8,921 times across * 201 templates. Only 25% of those uses are Bootstrap vocabulary (.btn, .card, * .alert, .badge) that Tabler styles for free. The other 75% are ours -- * .field*, .data-table* -- and the obvious move would be an adapter mapping * each of ours onto a Tabler class. * * That is not necessary, because components.css was written to paint from * tokens (--color-surface, --color-border, --radius-2 ...) rather than from * literals. Redefining those tokens in terms of Tabler's own variables makes * every one of the 88 app-specific classes inherit Tabler's palette, radii and * type automatically. The blueprint's own rule -- "themes are data, a token * override set, not forked component code" -- is exactly the property that * makes this cheap, so this follows that rule rather than working around it. * * LOAD ORDER MATTERS. The shells load: * 1. tabler[.rtl].min.css (vendor -- defines --tblr-*) * 2. fonts.css (self-hosted faces) * 3. tokens.css (the app's own token definitions) * 4. tabler-bridge.css (THIS -- re-points those tokens at --tblr-*) * 5. components.css (unchanged, now painting with Tabler's values) * Putting this after tokens.css is what lets it override; putting it before * components.css is what lets components pick the new values up. * * DIRECTION: the shells choose tabler.rtl.min.css for Arabic and * tabler.min.css otherwise, from the SAME expression that sets , so * the stylesheet and the document direction can never disagree. */ :root { /* --- surfaces and text ------------------------------------------- */ --color-bg: var(--tblr-body-bg); --color-surface: var(--tblr-bg-surface, #fff); --color-text: var(--tblr-body-color); --color-text-muted: var(--tblr-secondary-color); --color-border: var(--tblr-border-color); /* --- status colours ---------------------------------------------- * Mapped to Tabler's semantic set rather than kept as the previous * hand-picked hexes, so a status pill in this app and a Tabler badge on * the same screen are the same green. Deliberately NOT touching * --color-brand-primary: that is the per-clinic brand override hook * (brand_css_vars.html publishes each clinic's own colour into it), and * overwriting it here would erase every customer's branding. */ --status-success: var(--tblr-success); --status-warning: var(--tblr-warning); --status-danger: var(--tblr-danger); --status-info: var(--tblr-info); --status-neutral: var(--tblr-secondary); --focus-ring-color: var(--tblr-primary); /* --- typography --------------------------------------------------- * Arabic first: IBM Plex Sans Arabic leads the stack because this * product's primary market reads Arabic, and Plex covers Latin in the * same superfamily with matching metrics -- so an Arabic name and a Latin * MRN in the same table row sit on the same baseline instead of jumping. */ --font-latin: "IBM Plex Sans Arabic", "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, sans-serif; --font-arabic: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif; /* --- radii --------------------------------------------------------- */ --radius-1: var(--tblr-border-radius); --radius-2: var(--tblr-border-radius); --radius-button: var(--tblr-border-radius); --radius-card: var(--tblr-border-radius-lg, 8px); } /* Tabler's own font stack is Latin-only; point it at ours so vendor components (cards, badges, nav) render Arabic in the same face as the app's own components rather than falling back mid-page. */ :root { --tblr-font-sans-serif: "IBM Plex Sans Arabic", "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif; } /* Arabic needs more leading than Tabler's Latin default of 1.43: the script has deeper descenders and carries dots above and below the baseline, which collide at that ratio in a dense table. Applied by direction, so Latin languages keep Tabler's intended rhythm. */ [dir="rtl"] body, [dir="rtl"] .table td, [dir="rtl"] .table th, [dir="rtl"] .data-table td, [dir="rtl"] .data-table th { line-height: 1.7; } /* --------------------------------------------------------------------- * The few places a token cannot reach: structural rules components.css * sets directly. Kept deliberately short -- every rule here is a rule that * has to be maintained, unlike the token mappings above which maintain * themselves. * ------------------------------------------------------------------- */ .field-input, .field-select, .field-textarea { line-height: var(--tblr-body-line-height, 1.4285714286); transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; } .field-input:focus, .field-select:focus, .field-textarea:focus { border-color: var(--tblr-primary); box-shadow: 0 0 0 .25rem rgba(var(--tblr-primary-rgb, 0, 84, 166), .25); outline: 0; } /* Give the app's own tables Tabler's row treatment. .data-table already sets width/border-collapse; this adds only what makes it read as the same component as a vendor .table sitting beside it. */ .data-table > thead > tr > th { background: var(--tblr-bg-surface-secondary, #f8fafc); border-bottom: 1px solid var(--tblr-border-color); font-weight: 600; text-transform: none; letter-spacing: 0; } .data-table > tbody > tr > td { border-bottom: 1px solid var(--tblr-border-color-translucent, rgba(4, 32, 69, .08)); } .data-table > tbody > tr:hover > td { background: var(--tblr-bg-surface-secondary, #f8fafc); } /* Digits in columns must line up -- patient IDs, amounts, lab values. Applied to the app's own table and to any explicitly numeric cell. */ .data-table td, .table td, .num { font-variant-numeric: tabular-nums; } /* The card grid left ragged gaps because cards were not stretched to their row. Observed live on /reports, where a two-card category left half a row empty and the section read as broken rather than sparse. */ .card-grid, .tile-grid, .report-grid { display: grid; gap: var(--spacing-4, 16px); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-items: stretch; } .card-grid > *, .tile-grid > *, .report-grid > * { height: 100%; }