/* ============================================================================= * omx.css - GENERATED. Do not edit. * * Built by ci/build-assets.py from the co-located component sources. Edit the * file named in the section banner below, then rebuild: * * python ci/build-assets.py --root Omnixa.Web.Shared * * Order is load-bearing and is defined by LAYERS in that script. * ========================================================================== */ /* --- Foundation/tokens.css ----------------------------------------- */ /* ============================================================================= * L0 · Foundation · tokens.css * * THE ONLY FILE IN THIS PACKAGE THAT DEFINES A --omx-* CUSTOM PROPERTY. * A --omx-* declaration anywhere else fails `check-omx` C1, with one exception: * a component may declare a LOCAL variable scoped to its own block, derived from * a token here (see "Component-local variables" at the foot of this file). * * Derived with the imported `design-tokens` skill. Philosophy: **Dieter Rams / * functionalist** — restrained palette, colour as information, mathematical * spacing, borders over shadows, motion only where it carries meaning. That is * the honest match for a dense multi-tenant ERP; see docs/03_TOKEN_SPEC.md for * the three places the skill was deliberately not followed. * ========================================================================== */ /* ----------------------------------------------------------------------------- * CASCADE LAYER ORDER — declared once, here, because tokens.css is the first * stylesheet every layout loads. Later wins. * * omx.reset normalize + box-sizing * omx.base these tokens, and bare-element defaults inside .omx-ui * omx.layout L2 — page, region, grid, split, stack, cluster * omx.component L1 + L3..L9 — every component's own CSS * omx.utility token-driven utilities; a utility must beat a component * omx.module EMPTY ON PURPOSE. The supported seat for a consuming module * that must override us: put the rule in this layer and it wins * by LAYER, not by out-specifying the design system. * * 🔴 Anything a module writes UNLAYERED still beats all of the above. That is * intended — a module must be able to win — but it means "it works in my * module" is not evidence the component is right. * -------------------------------------------------------------------------- */ @layer omx.reset, omx.base, omx.layout, omx.component, omx.utility, omx.module; /* Self-hosted brand face. Used ONLY by the wordmark, never by UI text. * SIL OFL, latin subset. ⛔ No CDN: this package must render identically on an * air-gapped on-prem install. */ @font-face { font-family: "Omnixa Display"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/Poppins/poppins-600.woff2") format("woff2"); } @font-face { font-family: "Omnixa Display"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/Poppins/poppins-700.woff2") format("woff2"); } @layer omx.base { /* =========================================================================== * SCOPE — `.omx-ui`, never `:root`. * A host page that embeds our UI must not be repainted by us, and our UI must * not be repainted by a host that happens to define `--color-accent`. The * `--omx-` prefix and this scope are the same defence applied twice. * ======================================================================== */ .omx-ui { color-scheme: light dark; /* -- BRAND --------------------------------------------------------------- * Identity, not theme. These five do NOT change between light and dark. */ --omx-brand-blue: #1e63e8; --omx-brand-cyan: #29c3e0; --omx-brand-violet: #8b5cf6; /* ⭐⭐ THE INSTRUMENT TONE. One value for every technical mark on the * brand plate: the mark's own ring, the node-graph datum, the divider and * the dashed baseline. * 🔴 FLAT, not light-dark(), and that is the point — it was chosen by * measuring BOTH grounds and picking the value with near-equal presence: * 2.89 on the light rail, 2.55 on the dark one. A light-dark pair would * be two values to keep in agreement for a mark that does not need it. * ⚠️ The two mark SVGs bake this same hex, because an asset cannot read * a token. This names the value they already use; change both together. */ --omx-brand-instrument: #4a72be; --omx-brand-accent-a: #4f83ff; --omx-brand-accent-b: #a78bfa; /* -- TYPEFACE ------------------------------------------------------------ * ⚠️ DEVIATION from the `frontend-design` skill, which says to avoid Inter * and system stacks and to load a distinctive face from a CDN. Rejected: * (a) on-prem installs have no outbound network, (b) a data grid at 13px * needs a face with real hinting and tabular figures, not personality, * (c) a webfont round-trip on every module's first paint is a cost the * design does not repay. Distinctiveness lives in the brand face and the * palette instead. */ --omx-font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; --omx-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace; --omx-font-display: "Omnixa Display", var(--omx-font-sans); --omx-font-weight-regular: 400; --omx-font-weight-medium: 500; --omx-font-weight-semibold: 600; --omx-font-weight-bold: 700; /* -- TYPE RAMP ----------------------------------------------------------- * Rams: "one size scale, used strictly." Seven steps, no in-between values. * * ✅ RULED 2026-09-13 — THE BODY SIZE IS 14px, AND THE FLOOR IS 12px. * * The question was open because 13px is what the FIRST RCL actually renders * 2–18 times per page, while its token named `body` claimed 16px and was * used almost nowhere. 13px was therefore the measured truth of the old * package — but "what the old one does" is not a design decision, and the * brief for this package was explicitly to be BETTER than the old one. * * Why 14px and not 13: * · It is the modal size across comparable ERPs (SAP Fiori, Dynamics 365, * Xero all sit at 14). 13 is the dense end; 14 is dense AND readable. * · This is software people look at for eight hours. One pixel of body * text is the cheapest readability the package will ever buy. * · It let the whole ramp move OFF 11px. An 11px caption carries hints, * placeholders, timestamps and validation text — the small print is * exactly the text a person most needs to be able to read. * * What did NOT move: `display` (28) and `metric` (32). Page titles and KPI * figures were already right, so the top of the ramp is untouched and no * page header reflows. * * ⭐ AND THE DENSITY ANSWER IS NOT "PICK ONE". Anyone who wants the old * 13px density sets `data-text-scale="compact"` on the root; anyone who * needs more sets `"large"`. Every size below is multiplied by * `--omx-text-scale`, so the ramp keeps its proportions at every setting. * * 🔴 FIXED 2026-09-19 — that last sentence was FALSE for `display` and * `metric`, the only two sizes that were not multiplied. The comment said * they were, and nothing checked. At `data-text-scale="board"` (×2.4) the * caption reached 28.8px while the page title stayed at 28px, so the * display board rendered EVERY TITLE SMALLER THAN ITS OWN CAPTIONS — on the * one screen in the package designed to be read from across a room. * A single global choice was always going to be wrong for somebody. * * 🔴 iOS ZOOM: a form control below 16px makes mobile Safari zoom on focus. * `--omx-font-size-control` is therefore 16px under 768px — see the * breakpoint block below. ⛔ That override is ABSOLUTE and is NOT scaled: * a "compact" preference must not reintroduce the zoom it prevents. * Do not "simplify" it away. */ --omx-text-scale: 1; --omx-font-size-display: calc(1.75rem * var(--omx-text-scale)); /* 28px page title */ --omx-font-size-metric: calc(2rem * var(--omx-text-scale)); /* 32px KPI figure */ /* ⭐ OWNER RULING 2026-09-19 — "yes add a 22px step between 18 and 28". * 28 -> 18 was a 1.556 jump with nothing in it, the only gap above 1.15 in * the whole ramp, while the BOTTOM holds four steps inside 6px. Crowded * where it did not need to be, empty exactly where page headers live. * With 22: 28/22 = 1.273 and 22/18 = 1.222 — both comfortably perceptible. * ⛔ THE calc() IS NOT OPTIONAL. `display` and `metric` were added without it * and inverted the display board at data-text-scale="board" — the page title * rendered SMALLER than its own captions (item 1.8). A new size without the * multiplier is that same bug, and nothing catches it until someone opens a * board. */ --omx-font-size-title-lg: calc(1.375rem * var(--omx-text-scale)); /* 22px a heading with presence */ --omx-font-size-title: calc(1.125rem * var(--omx-text-scale)); /* 18px section title */ --omx-font-size-lead: calc(1rem * var(--omx-text-scale)); /* 16px intro */ --omx-font-size-body: calc(0.875rem * var(--omx-text-scale)); /* 14px THE body size */ --omx-font-size-label: calc(0.8125rem * var(--omx-text-scale));/* 13px labels, th */ --omx-font-size-caption: calc(0.75rem * var(--omx-text-scale)); /* 12px captions, meta */ --omx-font-size-control: var(--omx-font-size-body); --omx-line-height-tight: 1.2; --omx-line-height-body: 1.5; --omx-line-height-relaxed: 1.7; --omx-letter-spacing-tight: -0.01em; --omx-letter-spacing-normal: 0; --omx-letter-spacing-wide: 0.06em; /* all-caps labels only */ --omx-measure: 68ch; /* max comfortable line length */ /* -- SPACE --------------------------------------------------------------- * 4px base. The first RCL started at 8px with no 4px step, which is where * its stray 2/3/5/6px paddings came from — there was nothing legal to use. */ --omx-space-0: 0; --omx-space-1: 2px; --omx-space-2: 4px; --omx-space-3: 6px; --omx-space-4: 8px; --omx-space-5: 12px; --omx-space-6: 16px; --omx-space-7: 20px; --omx-space-8: 24px; --omx-space-9: 32px; --omx-space-10: 40px; --omx-space-11: 48px; --omx-space-12: 64px; /* -- SIZE ---------------------------------------------------------------- * Control heights are density-driven; see the [data-density] block. */ --omx-size-icon-inline: 16px; /* an icon sitting in a line of text */ --omx-size-icon-action: 18px; /* an icon acting as a button */ --omx-size-icon-feature: 24px; --omx-size-avatar-sm: 24px; --omx-size-avatar-md: 32px; --omx-size-touch: 44px; /* WCAG 2.5.8 / iOS minimum target */ /* ⚠️ The OTHER floor. WCAG 2.5.8 AA is 24x24; 44 is the AAA/iOS * comfort size this package defaults to. 24 is for the few places * where 44 would push a whole region down a line - the rail's module * row is the first. ⛔ Not a licence to shrink targets generally. */ --omx-size-touch-min: 24px; /* WCAG 2.5.8 AA absolute minimum */ /* ⭐⭐ THE BRAND PLATE'S HEIGHT. It is NOT the topbar's height any * more, and that is a deliberate, costed decision rather than drift. * The rail head used to be exactly `--omx-topbar-height` so the chrome read * as one L. The mark is now the full dimensioned cut, which needs real size * to carry its ring, its crossing and its lattice ⚠️ measured on a * rendered ladder: at 28px it is a smudge, at 52 it reads. * ⛔ A 52px mark cannot live in a 52px row. So the head becomes its own * PLATE, framed with corner ticks, which is what stops the taller box * reading as a misalignment instead of a decision. */ --omx-sidebar-plate-height: 80px; /* Shell chrome. 🔧 Moved here from Shell.css 2026-09-12: Topbar.css consumed * --omx-topbar-height while Shell.css declared it, so one component depended * on a variable another one owned. `check-omx` C1 named it. */ --omx-topbar-height: 52px; --omx-sidebar-width: 248px; --omx-sidebar-rail: 56px; /* The brand navigation palette. Literals lived in Shell.css until C6 found * them; brand colour is identity and belongs with the other brand tokens. */ --omx-brand-nav-1: #132f59; --omx-brand-nav-2: #10284c; --omx-brand-nav-3: #0e2343; --omx-brand-nav-fg: #edf4ff; --omx-brand-nav-fg-dim: #bfd0eb; --omx-brand-nav-rule: rgb(162 181 215 / 30%); /* -- RADIUS -------------------------------------------------------------- * Rams: sparing and consistent. Five steps; 3px and 5px are not values. */ --omx-radius-xs: 2px; --omx-radius-sm: 4px; --omx-radius-md: 6px; --omx-radius-lg: 10px; --omx-radius-xl: 16px; --omx-radius-pill: 9999px; /* -- BORDER -------------------------------------------------------------- * Rams prefers a rule to a shadow. These carry most of our separation. */ --omx-border-width: 1px; --omx-border-width-strong: 2px; /* -- COLOUR · surfaces --------------------------------------------------- * Colour is information. Five neutral planes and nothing decorative. * * 🔴 CHANGED 2026-09-19 — canvas→surface MEASURED 1.047:1. Nothing in the * market goes below ~1.08 (Ant 1.122 · Carbon 1.100 · Atlassian 1.091 · * Fluent 1.090 · Fiori 1.082), and under 1.05 a panel does not read as a * panel — it reads as a slightly different white, which is what made this * package look undecided rather than restrained. canvas is now 1.132 below * surface. * * ⭐ `surface` AND `surface-raised` ARE BOTH #ffffff, AND THAT IS THE POINT. * The market separates two near-white planes with a SHADOW, not a third * colour — there is not enough luminance left above a white panel to spend * on one. Raised is `--omx-shadow-md`; see Stage 1.5. * * ⚠️ HOW DARK THE RECESSED PLANES CAN GO IS FIXED BY THE TEXT TOKENS, not * by taste. `--omx-color-text-subtle` (#616e80, itself a 09-12 contrast * fix) must clear 4.5:1 on EVERY plane, and `--omx-color-border-control` * must clear 3.0:1. That puts the floor at #edf0f5 = 1.142 below white. * ⇒ THREE recessed planes each 1.08 apart need 1.166 and DO NOT FIT. So * `sunken` is not a third step below canvas; it is the recessed plane seen * from inside a white panel (1.144 below surface). canvas and sunken never * touch each other, so they do not need to separate from each other. * ⛔ Going darker means darkening `text-subtle` toward `text-muted`, which * would undo 09-12 and flatten a three-step text ramp into two. * * 🔴 `sunken` PASSES BY +0.033. MEASURED: `text-subtle` #616e80 on #ecf0f6 is * **4.5333** against a 4.5 floor, and `border-control` is 3.0602 against 3.0. * ⛔ DO NOT NUDGE THIS TOKEN DARKER "a shade" — one step down the hex and it * is a WCAG 1.4.3 failure on every caption, hint, placeholder and timestamp * sitting in a well. The spec that handed this over proposed #e6eaf2, which * measures 4.30 and fails. There is no room here; the CT check is the only * thing that will tell you. */ --omx-color-canvas: light-dark(#eef1f6, #0f1622); /* behind everything */ --omx-color-surface: light-dark(#ffffff, #161f2e); /* a panel, a card */ --omx-color-surface-raised: light-dark(#ffffff, #1d283a); /* a thing above a panel */ --omx-color-surface-sunken: light-dark(#ecf0f6, #111a26); /* a well, an input track */ --omx-color-surface-overlay: light-dark(rgba(16, 25, 40, 0.44), rgba(4, 8, 14, 0.62)); /* -- COLOUR · the chrome plane ⭐ THE TENANT-THEMEABLE SURFACE ------------- * The sidebar and the topbar, as ONE plane. Added 2026-09-20 for per-tenant * theming (owner ruling: A+B split, one brand colour, per-tenant only). * * ⭐⭐ WHY ONE TOKEN AND NOT TWO. The R1 ruling put the rail and the bar on * the SAME surface deliberately -- "the chrome reads as a single L around a * tinted content canvas rather than as two rectangles that happen to touch" * (Sidebar.css). Two independent tenant colours would let that be broken on * the first afternoon. ⇒ one input, both surfaces follow, and the L * survives whatever colour is chosen. * * ⚠️ THESE DEFAULTS ARE TODAY'S VALUES EXACTLY -- `surface`, `text`, * `text-muted`, `border-subtle`. Introducing them is a REFACTOR with no * visual change, and the snapshot is what proves that. * * 🔴 WHY A GLOBAL AND NOT THE COMPONENT-LOCAL `--omx-sidebar-bg`. A runtime * tenant override lands on `.omx-ui`; `.omx-sidebar` REDECLARES * `--omx-sidebar-bg` in its own block, which is more specific AND later, so * the tenant value would never reach it. The local now resolves to this * global instead: the local stays private, and the global is the seam. * * ⛔ A tenant sets these four names and NOTHING ELSE touches the chrome. * That is what `check-omx` C25 enforces on the emitter's allow-list. */ --omx-color-chrome: var(--omx-color-surface); --omx-color-chrome-text: var(--omx-color-text); --omx-color-chrome-muted: var(--omx-color-text-muted); --omx-color-chrome-rule: var(--omx-color-border-subtle); /* -- COLOUR · text ------------------------------------------------------- */ --omx-color-text: light-dark(#1b2434, #e3e9f2); /* 🔴 FIXED 2026-09-12 — `subtle` was #7a8798 and MEASURED 3.40:1 on canvas: * a WCAG 1.4.3 failure, and it is the colour every caption, hint and * placeholder in the system uses, so it failed in hundreds of places at * once. #616e80 measures 4.83 canvas / 5.05 surface / 4.65 sunken — it * clears on all three planes, not just the one it was tested against. * `muted` was darkened with it: at 4.89 it would otherwise have been * indistinguishable from the repaired `subtle`, and a three-step ramp whose * last two steps look identical is a two-step ramp with extra tokens. */ --omx-color-text-muted: light-dark(#505f74, #9aa8bd); --omx-color-text-subtle: light-dark(#616e80, #8693a8); --omx-color-text-inverse: light-dark(#eef3fb, #101827); --omx-color-text-link: light-dark(#2059cf, #82aaff); /* -- COLOUR · borders ---------------------------------------------------- */ --omx-color-border-subtle: light-dark(#e2e9f2, #1f2a3b); --omx-color-border: light-dark(#d7e0ec, #2a374b); --omx-color-border-strong: light-dark(#adbbcd, #3d4c64); --omx-color-border-control: light-dark(#7c8aa0, #637591); /* an input must read as an input */ /* -- COLOUR · accent ----------------------------------------------------- */ --omx-color-accent: light-dark(#2660d8, #5b8cf0); --omx-color-accent-hover: light-dark(#2059cf, #6f9bf5); --omx-color-accent-active: light-dark(#1b4cb4, #86abf8); /* 🔴 CHANGED 2026-09-19 — SELECTED AND HOVER WERE ONE COLOUR. This was * #e5eeff against `--omx-color-control-hover` #e7eef9: ΔE2000 2.40 and a * luminance ratio of 1.001. A selected row and a row under the pointer were * the same pixel value to within rounding, so the table could not say which * row you had chosen — only which one your mouse was over. * ⭐ ΔE, NOT CONTRAST RATIO. Contrast ratio is a luminance relationship and * reads 1.001 as "identical" even when two colours differ in hue; ΔE is the * metric for two fills. #d8e5fc measures ΔE 5.01 and ratio 1.088 — over the * ~2.3 JND with margin, and over the 1.08 plane floor as well, so it * survives a cheap panel and a colour-blind reader both. */ --omx-color-accent-subtle: light-dark(#d8e5fc, #243a5c); --omx-color-accent-text: light-dark(#f2f7ff, #0b1424); /* text ON accent */ --omx-color-accent-ring: light-dark(rgba(47, 111, 235, 0.3), rgba(91, 140, 240, 0.38)); /* -- COLOUR · the brand mark ⛔ CHROME ONLY ------------------------------ * ⭐ OWNER RULING 2026-09-19 — "professional and exclusive not traditional". * * 🔴 THE PACKAGE SHIPPED FIVE BRAND COLOURS AND USED NONE OF THEM. Measured * before this change: `brand-violet`, `brand-accent-a` and `brand-accent-b` * appeared ZERO times outside their own declaration; `brand-blue` and * `brand-cyan` once each. Every accent a person actually saw was * `--omx-color-accent`, a safe blue — which is precisely the default-SaaS * look the ruling rejects. The brand was declared, not worn. * * ⭐⭐ AND THE SHIPPED ARTWORK ALREADY CARRIES THIS. `Foundation/Brand` says * the lockup has "the gradient x and violet tagline". So the logo has been * sweeping blue into violet the whole time and the CSS never echoed it once. * This token is not a new idea — it is the CSS finally agreeing with the * file beside it. * * ⛔⛔ WHY VIOLET AND NOT THE LITERAL BRAND SWEEP. The obvious move is * blue → cyan → violet, straight off the brand sheet. MEASURED against * WCAG 1.4.11 (3.0 for a non-text indicator), worst plane in each theme: * * brand-blue #1e63e8 light 4.58 dark 2.83 ✗ fails dark * brand-cyan #29c3e0 light 1.84 dark 7.04 ✗ fails light * brand-accent-b #a78bfa light 2.38 dark 5.45 ✗ fails light * brand-violet #8b5cf6 light 3.70 dark 3.50 ✅ * brand-accent-a #4f83ff light 3.05 dark 4.25 ✅ * * ⇒ The cyan is a LIGHT-MODE FAILURE at 1.84 and the blue a dark-mode one. * Only violet clears 3.0 in both themes unchanged, so the sweep runs * accent → violet, and the dark side steps up to accent-b (5.45 there, * where its light-mode 2.38 cannot reach it). * * ⛔ CHROME ONLY — the nav indicator, the identity mark, the determinate * progress fill. ⛔ NEVER status, never a chart series, never a table state, * never anything a person reads a VALUE from. Those stay functionalist: in * the data layer, a colour must mean something, and a colour that means * "we are Omnixa" means nothing about the row. * ⛔ And NOT the focus ring — `--omx-color-accent-ring` stays as it is. * The ring is an accessibility instrument before it is a brand surface, and * it is not the place to spend novelty. */ /* 🔧 CORRECTED 2026-09-19 — THESE WERE LITERAL HEX AND THAT WAS A DEFECT. * `#8b5cf6` and `#a78bfa` are `--omx-brand-violet` and `--omx-brand-accent-b` * copied by value. ⇒ The brand ramp above and the chrome that is supposed to * BE the brand could drift apart silently: re-point `--omx-brand-violet` at a * new brand sheet and the nav indicator, the progress fill and the sign-in * mark would all keep the old colour, with nothing failing anywhere. * ⭐ One fact, one place. The ramp is the fact; this is a name for it. */ --omx-color-brand-mark: light-dark(var(--omx-brand-violet), var(--omx-brand-accent-b)); --omx-brand-sweep: linear-gradient(135deg, var(--omx-color-accent) 0%, var(--omx-color-brand-mark) 100%); /* -- COLOUR · control surfaces ------------------------------------------- * 🔴 CHANGED 2026-09-19 — `control-active` was #dde7f6, ΔE2000 **2.35** * from `control-hover`. The just-noticeable difference is about 2.3, so the * pressed state sat at the threshold of being a different colour at all. * That mattered the moment `:active` went onto 30 more controls: a press * nobody can perceive is indistinguishable from a control that did not * register the press, which is what makes people click twice. * #ced8e7 measures ΔE 5.26 from hover. * ⭐ IT IS DELIBERATELY NEUTRAL, NOT BLUE. `accent-subtle` means SELECTED * and persists; a press is transient and means "your finger is down". Two * states that mean different things must not converge on one blue — the * same defect as 1.2, one layer down. Measured ΔE 4.11 apart. * ⚠️ `text-subtle` measures 3.60 on it, under the 4.5 the PLANES are held * to. Accepted, and already true of `control-hover`: a press lasts while a * button is held down. It is not a state anybody reads text in. */ --omx-color-control: light-dark(#f1f5fc, #1a2434); --omx-color-control-hover: light-dark(#e7eef9, #223044); --omx-color-control-active: light-dark(#ced8e7, #36414f); /* -- COLOUR · status ----------------------------------------------------- * A FIVE-STEP RAMP per tone, because a pair was not enough and every * component invented its own fifth step: Toast.css used `-text` as a BORDER * colour, Banner.css declared a local `--omx-banner-fg`, Badge and Button * each did something else again. Four components, four answers, one missing * token. * * bg the wash a block of status text sits on * subtle the same wash one step stronger — hover on bg, or a nested fill * border the rule, bar or icon stroke. NON-TEXT, so the bar is 3.0:1 * solid a filled chip or button in the tone * on the text that goes ON solid * text the text that goes ON bg or subtle * * ⛔ `-text` is a TEXT colour. Using it for a border was never wrong by * eye — it is dark and it showed up — but it is the step that has to clear * 4.5:1, so it drags every bar to a weight the design never asked for. * ⭐ MEASURED, both themes, worst plane: text/bg 4.99–8.46 · text/subtle * 4.60–6.96 · on/solid 4.63–6.32 · border ≥3.06 · solid ≥3.20. */ --omx-color-info-bg: light-dark(#e9f1ff, #14263f); --omx-color-info-subtle: light-dark(#dbe8ff, #1b3557); --omx-color-info-border: light-dark(#4a84e8, #4a7ac9); --omx-color-info-solid: light-dark(#2660d8, #4d85e6); --omx-color-info-on: light-dark(#ffffff, #08111f); --omx-color-info-text: light-dark(#295fd4, #8fb6ff); --omx-color-success-bg: light-dark(#e9f8f0, #12291f); --omx-color-success-subtle: light-dark(#cdeade, #17392a); --omx-color-success-border: light-dark(#2e9265, #2f8f63); --omx-color-success-solid: light-dark(#1f7a52, #3aa876); --omx-color-success-on: light-dark(#ffffff, #06140d); --omx-color-success-text: light-dark(#1f6d4a, #6fd3a3); --omx-color-warning-bg: light-dark(#fff7e9, #2e2314); --omx-color-warning-subtle: light-dark(#fdeed6, #3f301a); --omx-color-warning-border: light-dark(#b3760f, #a3782f); --omx-color-warning-solid: light-dark(#9c5c17, #c08b38); --omx-color-warning-on: light-dark(#ffffff, #1a1206); /* 🔴 FIXED 2026-09-12 — was #a7641d, inherited verbatim from the first RCL. * MEASURED at 4.40:1 on its own wash: a WCAG 1.4.3 AA failure for normal * text, and the ONLY status pair in the set that failed. #9c5c17 measures * 4.99:1, which puts it with the rest of the family (info 5.02 · danger * 5.09 · success 5.73) instead of alone below the line. * ⭐ It was never going to be found by eye — amber on cream looks fine and * is not. Only the number said otherwise. */ --omx-color-warning-text: light-dark(#9c5c17, #e3b273); --omx-color-danger-bg: light-dark(#ffedf1, #2f1720); --omx-color-danger-subtle: light-dark(#fddfe5, #43202c); --omx-color-danger-border: light-dark(#d9505e, #b8515f); --omx-color-danger-text: light-dark(#a84652, #f09aa6); --omx-color-danger-solid: light-dark(#d12f3d, #d13f50); /* The text that goes ON danger-solid. Declared as a token because * Button.css used to hardcode #fff — a literal colour in a component * is exactly what the status-pair rule exists to prevent, and it is * what made the dark-mode danger button fail at 3.74:1. */ --omx-color-danger-on: #ffffff; --omx-color-neutral-bg: light-dark(#eef2f7, #1c2533); --omx-color-neutral-subtle: light-dark(#dee5ee, #273243); --omx-color-neutral-border: light-dark(#7c8aa0, #6a7890); --omx-color-neutral-solid: light-dark(#4a5568, #7b8a9f); --omx-color-neutral-on: light-dark(#ffffff, #080d14); --omx-color-neutral-text: light-dark(#4a5568, #a4b0c2); /* -- COLOUR · selection + marks ------------------------------------------ */ --omx-color-selection-bg: light-dark(rgba(47, 111, 235, 0.2), rgba(91, 140, 240, 0.28)); --omx-color-selection-text: var(--omx-color-text); --omx-color-rating-on: light-dark(#a86f12, #f5a623); /* a filled star. 4.6:1 on surface. */ --omx-color-rating-off: light-dark(#c7d2e0, #3d4c64); /* -- CHART SERIES -------------------------------------------------------- * Six categorical colours, ordered so the FIRST TWO are distinguishable by * everyone: blue and amber differ in hue and in lightness, which is what * survives deuteranopia and protanopia. Most ERP charts have two series. * ⚠️ Colour is never the only encoding — Chart also emits a data table, and * a line chart varies its dash pattern. */ --omx-chart-1: light-dark(#2660d8, #7aa5f5); --omx-chart-2: light-dark(#b3730f, #e3b273); --omx-chart-3: light-dark(#1f6d4a, #6fd3a3); --omx-chart-4: light-dark(#a84652, #f09aa6); --omx-chart-5: light-dark(#6b46c1, #b4a0f0); --omx-chart-6: light-dark(#0e7490, #5bc0d8); --omx-chart-grid: light-dark(#e2e9f2, #2a374b); /* -- SHADOW -------------------------------------------------------------- * Used only where something genuinely floats. A panel gets a border. * * ⭐ SINCE 1.1 THE SHADOW IS ALSO THE ONLY THING SEPARATING `surface` FROM * `surface-raised` — both are #ffffff — so this scale now carries plane * information, not decoration. * * 🔴 `xl` ADDED 2026-09-19. THE ELEVATION ORDER WAS INVERTED ABOVE THE * MODAL: drawer and modal were both `lg` — byte-identical, though a modal * opens ON TOP of a drawer — while popover, toast and tooltip, every one of * which can be painted OVER a modal, were `md`: a LIGHTER shadow than the * thing they cover. * * ⛔ THE Z SCALE DOES NOT GOVERN THESE. Modal, Drawer and Popover are * /[popover] elements in the browser's TOP LAYER; their own files * say so and set no z-index. Top-layer order is invocation order, so the * invariant is not "shadow tracks z-index" — it is: * * ⭐ AN OVERLAY'S SHADOW IS NEVER LIGHTER THAN THE SHADOW OF ANYTHING IT * CAN BE PAINTED OVER. * * Five steps against more than five ranks means ties are unavoidable; the * rule is monotonicity, not a one-to-one mapping. ⇒ drawer `lg` (an * edge-anchored panel casts on one edge only), modal/popover/toast/tooltip * `xl`. */ --omx-shadow-xs: 0 1px 2px light-dark(rgba(16, 25, 40, 0.06), rgba(0, 0, 0, 0.30)); --omx-shadow-sm: 0 1px 3px light-dark(rgba(16, 25, 40, 0.08), rgba(0, 0, 0, 0.38)), 0 1px 2px light-dark(rgba(16, 25, 40, 0.04), rgba(0, 0, 0, 0.24)); --omx-shadow-md: 0 4px 12px light-dark(rgba(16, 25, 40, 0.10), rgba(0, 0, 0, 0.45)); --omx-shadow-lg: 0 12px 32px light-dark(rgba(16, 25, 40, 0.14), rgba(0, 0, 0, 0.55)); --omx-shadow-xl: 0 16px 40px light-dark(rgba(16, 25, 40, 0.20), rgba(0, 0, 0, 0.66)); --omx-shadow-focus: 0 0 0 3px var(--omx-color-accent-ring); /* A hairline that works on ANY background — it is the surface's own colour * at low alpha, not a colour of its own, which is why it is black in light * and white in dark rather than a pair of picked greys. Stops a pale avatar * or chip dissolving into a pale surface. */ --omx-color-hairline: light-dark(rgb(0 0 0 / 8%), rgb(255 255 255 / 8%)); /* -- Z ------------------------------------------------------------------ * Twelve steps, each named for what sits there. A raw z-index in a * component is C5. */ /* 🔧 Added 2026-09-12 by L9 Print. The scale had a floor of 0 and no way to * say "behind the content" — a watermark, a decorative wash. The first use * wrote a raw -1 and C5 caught it. A scale with twelve rungs upward and * none downward is a scale with a hole, not a rule. */ --omx-z-behind: -1; --omx-z-base: 0; --omx-z-raised: 10; --omx-z-sticky: 100; --omx-z-topbar: 200; --omx-z-sidebar: 300; --omx-z-dropdown: 400; --omx-z-scrim: 500; --omx-z-drawer: 600; --omx-z-modal: 700; --omx-z-popover: 800; --omx-z-toast: 900; --omx-z-tooltip: 1000; /* -- MOTION -------------------------------------------------------------- * Rams: purposeful transitions only. Nothing here is decorative. * ⛔ `transition: all` is forbidden — name the properties. */ --omx-duration-instant: 60ms; --omx-duration-fast: 140ms; --omx-duration-normal: 220ms; --omx-duration-slow: 320ms; --omx-easing-standard: cubic-bezier(0.2, 0, 0, 1); --omx-easing-in: cubic-bezier(0.4, 0, 1, 1); --omx-easing-out: cubic-bezier(0, 0, 0.2, 1); /* -- BREAKPOINTS --------------------------------------------------------- * FOUR widths. Only these four. * * 640px phone 768px tablet * 960px content grids collapse to one column * 1024px the shell sidebar changes * * 🔴 THESE CANNOT BE USED IN A MEDIA QUERY, and that is a CSS limitation, * not an oversight: a media condition is evaluated before custom * properties resolve, so `@media (max-width: var(--omx-bp-md))` silently * never matches. `@custom-media` is a Level-5 draft nobody ships and this * package has no build step to polyfill it. The tokens exist for JS and * for CONTAINER queries, which can read them. Media queries must repeat * the literal — `check-omx` C4 enforces that only these four appear. * * ⭐ Prefer a CONTAINER query. A component does not care how wide the * window is; it cares how wide its slot is. Media queries are for the * shell. */ --omx-bp-sm: 640px; --omx-bp-md: 768px; --omx-bp-lg: 960px; --omx-bp-xl: 1024px; } /* =========================================================================== * DARK * Not an inversion. The dark canvas is a cool slate to match the palette's * blue accent; text is off-white, never #fff; shadows go deeper and more * transparent rather than keeping their light values; the accent is lifted so * it still clears 4.5:1 on a dark surface. * * 🔴 IT USED TO BE DEFINED THREE TIMES. One light block, then the whole dark * palette written out TWICE — once for `[data-theme="dark"]` and once, byte * for byte, inside `@media (prefers-color-scheme: dark)` for the system state. * 71 tokens, 142 duplicated lines, and nothing but discipline keeping the two * copies equal. (They were still equal when this was collapsed — measured, 0 * drift — which is luck, not a guarantee.) * * ⭐ NOW EACH TOKEN IS DECLARED ONCE, as `light-dark(light, dark)`, and the * THEME IS SELECTED BY `color-scheme` ALONE: * * .omx-ui color-scheme: light dark -> follows the OS * .omx-ui[data-theme="dark"] color-scheme: dark -> explicit * .omx-ui[data-theme="light"] color-scheme: light -> explicit * * ⭐⭐ THAT IS WHY THIS IS WORTH MORE THAN THE LINE COUNT. The three-state * rule used to be hand-written per component as * `.omx-ui:not([data-theme="light"])` INSIDE a media query — and on 2026-09-19 * five of the seven files that tried it got it wrong, shipping a dark avatar * and a 2.41:1 select chevron onto light pages. `color-scheme` makes the * system state structural: there is no third branch left to forget. * ⇒ see `check-omx` C19, which guards the components that still do it by hand. * * ⚠️ `light-dark()` NEEDS `color-scheme` TO BE SET. It is set on `.omx-ui` * above; a token used outside that scope resolves to its LIGHT value. * * 🔴🔴 ⛔ ON A BROWSER WITHOUT `light-dark()` THIS DOES NOT DEGRADE TO LIGHT — * IT DEGRADES TO NOTHING. A custom property is not validated at parse time, so * the unknown function is stored happily; the failure happens at SUBSTITUTION, * which makes the consuming declaration invalid at computed-value time and * resets it to `initial`. MEASURED — background on an unsupporting engine: * * background: var(--token) -> rgba(0,0,0,0) * background: #eef1f6; background: var(--token) -> rgba(0,0,0,0) ⛔ * background: var(--token, #eef1f6) -> rgba(0,0,0,0) ⛔ * @supports (color: light-dark(#fff,#000)) { … } -> WORKS * * ⛔⛔ THE TWO OBVIOUS FALLBACKS BOTH DO NOTHING. The earlier safe declaration * is discarded with the invalid one, and the `var()` fallback never fires * because the property IS set — to garbage. ⭐ Only `@supports` gates it. * * ✅ RULED AND CLOSED 2026-09-20 — option B. `ci/build-assets.py` GENERATES an * `@supports not (color: light-dark(#fff, #000))` block from these very * declarations and appends it to `wwwroot/css/omx.css`, last in `omx.base`. * A browser WITH `light-dark()` skips the block and keeps both themes; a * browser without it gets the LIGHT palette — a readable product instead of * transparent backgrounds and black text. * * ⭐⭐ IT IS GENERATED, NOT WRITTEN, AND THAT IS THE WHOLE POINT. The fallback * was rejected once because it meant writing the light palette out a second * time — the duplication this section removed. That objection dies when the * second copy is DERIVED from the first: one place to author, and * `build-assets.py --check` fails the build the moment the two disagree. * ⚠️ 69 declarations, not the 64 a whole-value regex finds: `light-dark()` is * embedded inside the shadow values, twice in `--omx-shadow-sm`. The * generator matches parens rather than trusting a pattern. */ * ⚠️ Shadows merge per COLOUR, not per value — the geometry is identical in * both themes, so only the rgba() inside each layer flips. * ======================================================================== */ /* -- TEXT SCALE ------------------------------------------------------------ * The type counterpart to `data-density`, and deliberately separate from it: * density is GEOMETRY (row height, cell padding) and this is TYPE. Changing * one should not change the other — a person who wants tight rows does not * necessarily want small text, and the old RCL conflated them. * * ⚠️ Applies to the element AND its descendants, for the same reason density * does: matching the root only meant nesting a second `.omx-ui` was the only * way to scope it, and that region then silently fell back to the system theme. */ .omx-ui[data-text-scale="compact"], .omx-ui[data-text-scale="compact"] .omx-ui { /* 14 -> 13px body, 12 -> 11px caption. The old package's density, for a * register-heavy tenant that asks for it. */ --omx-text-scale: 0.93; } /* ⭐ THE WALL. A display board is read from across a factory floor, not from * arm's length, so it needs a scale no seated user would ever choose — which * is exactly why it lives here beside the other two rather than being set on * the page. Same multiplier, same ramp, same one place to change it. */ .omx-ui[data-text-scale="board"], .omx-ui[data-text-scale="board"] .omx-ui { --omx-text-scale: 2.4; } .omx-ui[data-text-scale="large"], .omx-ui[data-text-scale="large"] .omx-ui { /* 14 -> 16px body. Not an accessibility substitute — browser zoom and the * rem base already do that — but a comfortable default for a shared screen. */ --omx-text-scale: 1.14; } /* -- THE THEME SWITCH, ENTIRE ------------------------------------------------ * Two declarations. Everything else is `light-dark()` in the block above. */ .omx-ui[data-theme="dark"] { color-scheme: dark; } .omx-ui[data-theme="light"] { color-scheme: light; } /* =========================================================================== * DENSITY — an attribute, never a stylesheet. * One build serves all three. Only sizes change; colour and type ramp do not. * * comfortable the default. Reading and light entry. * cozy a full working day in a grid. * compact a data-entry operator who wants rows on screen. * ======================================================================== */ /* 🔧 REVISED 2026-09-12 — these were `.omx-ui[data-density=…]` only, which * made density a property of the ROOT and nothing else. Two things broke: * · a dense grid inside a comfortable page was not expressible at all * · the only workaround was nesting a second `.omx-ui`, which re-declares * the light palette and then loses it to the system-dark media query — * a nested region silently flipped to dark inside a light page. * Matching descendants too makes density a REGION property, which is what a * data-entry screen actually needs. `.omx-ui` stays the single THEME root. */ .omx-ui, .omx-ui[data-density="comfortable"], .omx-ui [data-density="comfortable"] { --omx-control-height: 32px; --omx-control-pad-x: var(--omx-space-5); --omx-row-height: 36px; --omx-cell-pad-y: var(--omx-space-4); --omx-cell-pad-x: var(--omx-space-5); --omx-panel-pad: var(--omx-space-6); --omx-stack-gap: var(--omx-space-6); --omx-field-gap: var(--omx-space-5); } .omx-ui[data-density="cozy"], .omx-ui [data-density="cozy"] { --omx-control-height: 28px; --omx-control-pad-x: var(--omx-space-4); --omx-row-height: 30px; --omx-cell-pad-y: var(--omx-space-3); --omx-cell-pad-x: var(--omx-space-4); --omx-panel-pad: var(--omx-space-5); --omx-stack-gap: var(--omx-space-5); --omx-field-gap: var(--omx-space-4); } .omx-ui[data-density="compact"], .omx-ui [data-density="compact"] { --omx-control-height: 24px; --omx-control-pad-x: var(--omx-space-3); --omx-row-height: 26px; --omx-cell-pad-y: var(--omx-space-1); --omx-cell-pad-x: var(--omx-space-3); --omx-panel-pad: var(--omx-space-4); --omx-stack-gap: var(--omx-space-4); --omx-field-gap: var(--omx-space-3); } /* =========================================================================== * SMALL VIEWPORTS * Two things change, and only these two. * 1. Controls grow to 16px type and a 44px target — below 16px mobile Safari * zooms the page on input focus, and 44px is the WCAG 2.5.8 comfortable * target (its hard minimum is 24). * 2. The OPERABLE sizes stop following the stored density: a 26px row is * not operable with a thumb. ⚠️ Comfort sizes — `control-pad-x`, * `panel-pad`, `stack-gap`, `field-gap` — deliberately keep following it. * * 🔴🔴 THE SELECTOR LIST IS DUPLICATED FROM THE DENSITY BLOCK ABOVE, AND THAT * IS THE WHOLE FIX. This rule used to be `.omx-ui` alone, and every * declaration in it was inert whenever a density was stored: * `.omx-ui[data-density="cozy"]` is specificity (0,2,0), `.omx-ui` is (0,1,0), * and A MEDIA QUERY ADDS NO SPECIFICITY. The stored preference simply won. * * MEASURED 2026-09-20 at 375px, with this media query matching and * ``: `--omx-control-height` resolved * to **28px** and `--omx-row-height` to **30px** against * `--omx-size-touch: 44px`. Twenty-two buttons and six menu items all * rendered 28–29px. Every control in the package, on every phone, whenever * density was cozy or compact. * * ⭐⭐ AND IT READ AS WORKING, WHICH IS WHY IT SURVIVED. The one declaration * here that NOTHING else competes for — `--omx-font-size-control` — applied * perfectly, so the half that stops iOS zooming on focus worked while the * half that sizes the target did not. One rule, five declarations, one winner. * * ⛔ A NEW DENSITY VALUE MUST BE ADDED HERE TOO. Equal specificity plus later * source order is what makes this win, so the two lists have to stay the same * list. There is no way to say "whatever the density block matched" in CSS. * ======================================================================== */ @media (max-width: 768px) { .omx-ui, .omx-ui[data-density="comfortable"], .omx-ui [data-density="comfortable"], .omx-ui[data-density="cozy"], .omx-ui [data-density="cozy"], .omx-ui[data-density="compact"], .omx-ui [data-density="compact"] { --omx-font-size-control: 1rem; /* 16px — stops the iOS zoom */ --omx-control-height: var(--omx-size-touch); --omx-row-height: var(--omx-size-touch); --omx-cell-pad-y: var(--omx-space-5); --omx-cell-pad-x: var(--omx-space-5); } } /* =========================================================================== * REDUCED MOTION — collapse the durations at the token level so that every * component honours it without writing its own media query. * ======================================================================== */ @media (prefers-reduced-motion: reduce) { .omx-ui { --omx-duration-instant: 0ms; --omx-duration-fast: 0ms; --omx-duration-normal: 0ms; --omx-duration-slow: 0ms; } } } /* ============================================================================= * Component-local variables — the one legal exception to "tokens live here" * * A component may declare variables scoped to its own block when it needs a * derived value in several rules. They must be named for the component and must * resolve to a token: * * .omx-sidebar { * --omx-sidebar-width: 248px; * --omx-sidebar-bg: var(--omx-color-surface-sunken); * } * * What that buys: the first RCL promoted nineteen `--color-sidebar-*` entries * into the global token set, so every consumer inherited a sidebar's private * business. Keep private things private. * ========================================================================== */ /* --- Foundation/reset.css ------------------------------------------ */ /* ============================================================================= * L0 · Foundation · reset.css * * Scoped to `.omx-ui`. This package never restyles a host page's bare elements. * That is the difference between a design system and a stylesheet that fights * whatever it is dropped into. * ========================================================================== */ @layer omx.reset { /* \U0001f534\U0001f534 [hidden] ON ITS OWN DOES NOT HIDE ANYTHING HERE. * * The UA stylesheet gives `[hidden]` `display: none`, and that rule loses to * ANY author `display:` declaration — including `.omx-button { display: flex }`. * * ⚠️ MEASURED, and it had already shipped: `Board.js` sets `.hidden` on its * four "Move" buttons once the script is running, and all four rendered * `hidden = true`, `display: flex`, 32px tall and fully visible. Its own * comment says "with JS, changing the select IS the action, so a second click * would be a step for nothing" — an intent that had never once taken effect. * * ⛔ !important is deliberate and is the only one in this file. `hidden` is * not a style, it is a statement that the element is not part of the page; * a component that needs an exception has the wrong element. */ [hidden] { display: none !important; } .omx-ui, .omx-ui *, .omx-ui *::before, .omx-ui *::after { box-sizing: border-box; } .omx-ui { margin: 0; font-family: var(--omx-font-sans); font-size: var(--omx-font-size-body); line-height: var(--omx-line-height-body); color: var(--omx-color-text); background-color: var(--omx-color-canvas); -webkit-font-smoothing: antialiased; text-size-adjust: 100%; /* Stops the double-tap zoom delay on every interactive element at once. */ touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* Headings carry no margin of their own — spacing is the layout's job, so a * heading in a panel and a heading in a table header behave the same. */ .omx-ui :is(h1, h2, h3, h4, h5, h6) { margin: 0; font-weight: var(--omx-font-weight-semibold); line-height: var(--omx-line-height-tight); letter-spacing: var(--omx-letter-spacing-tight); text-wrap: balance; /* no single-word last lines in a title */ } /* 🔴 THIS PACKAGE HAD NO HEADING HIERARCHY AT ALL. The rule above said * `font-size: inherit`, so an

and an

rendered at exactly the same * size as the paragraph beside them, differing only in weight. Every gate * passed: the markup was semantic, the outline was correct, screen readers * announced the levels. It was only ever wrong for people reading the screen. * * ⭐ THIS STAYS IN `omx.reset`, THE WEAKEST LAYER, ON PURPOSE. `inherit` was * not arbitrary — it let a component put

inside a card and control the * size itself. Any component that sets a font-size lives in `omx.component` * and still wins, so those are untouched; what changes is a heading NOBODY * sized, which previously fell back to body text. * * ⚠️ h1 → h2 IS A 28px → 18px CLIFF, and it is the ramp's, not this mapping's. * The ramp is 32/28/18/16/14/13/12: crowded at the bottom, and empty between * 18 and 28. Mapping onto it as it stands is what makes that gap visible * instead of theoretical. ⛔ Owner decision — not pre-empted here. */ /* ⚠️ THE WHOLE MAP SHIFTED WITH THE 22px STEP, NOT JUST h2 — and it had to. * Remapping h2 alone (18 -> 22) left h3 on `lead` (16), so the 28->18 cliff the * ruling removed reappeared one level down as 22->16 = 1.375, WORSE than the * 18->16 it replaced. It would also have orphaned `title` (18): a named step in * the ramp that no heading used. * ⭐ Every step now carries a level, and no gap exceeds 1.27: * h1 28 h2 22 h3 18 h4 16 h5 14 h6 13 * 1.273 1.222 1.125 1.143 1.077 * ⛔ `caption` (12) is deliberately NOT a heading level — it is for captions, * meta and footnotes, and an h6 that small stops reading as a heading at all. */ /* ⭐ THE BRAND FACE ON h1 ONLY — and it was `:is(h1, h2)` for about an hour. * * 🔴 A TAG IS NOT A SIZE, AND THIS FILE SAYS SO TWELVE LINES ABOVE. The map * below is a DEFAULT that components override freely — deliberately, so a * card can put an

in it and set its own size. So "h2" does not mean * "the 22px step"; it means "second-level structure, at whatever size the * component chose". MEASURED at render across 20 routes with the h2 rule in: * * h2.omx-panel__title 18px 12 per page, wearing it * h2.omx-appearance__caption 18px 1 per page, wearing it * h2.omx-sidebar__section-label 12px UPPERCASE 3 per page, wearing it * * ⇒ The rule put a display face on a 12px uppercase nav label. The ruling * gave the face to the TOP OF THE RAMP; that is a size claim, and binding it * to a tag handed it to three components that had opted out by resizing. * * ⭐ h1 SURVIVES BECAUSE IT WAS MEASURED, not because it is a heading. Every * h1 this package renders is 28px or 22px — `statepage__title` 28 (7), * `print__title` 28 (2), `auth__app` 22 (1), across all 20 routes. Nothing * overrides h1 downward, so on h1 the tag and the step still agree. * ⛔ Everything below h1 reaches the face through `.omx-text-display`, by * asking for the step by name. `check-omx` C22 holds the allow-list. */ .omx-ui h1 { font-family: var(--omx-font-display); } .omx-ui h1 { font-size: var(--omx-font-size-display); } .omx-ui h2 { font-size: var(--omx-font-size-title-lg); } .omx-ui h3 { font-size: var(--omx-font-size-title); } .omx-ui h4 { font-size: var(--omx-font-size-lead); } .omx-ui h5 { font-size: var(--omx-font-size-body); } .omx-ui h6 { font-size: var(--omx-font-size-label); } .omx-ui :is(p, figure, blockquote, dl, dd, ul, ol) { margin: 0; } .omx-ui :is(ul, ol) { padding: 0; list-style: none; } /* An anchor with an href is a link. An anchor without one is not, and must not * look clickable. */ .omx-ui a { color: var(--omx-color-text-link); text-decoration: none; } .omx-ui a[href]:hover { text-decoration: underline; } .omx-ui a[href]:active { color: var(--omx-color-accent-active); } .omx-ui a:not([href]) { color: inherit; cursor: default; } /* Form controls inherit type by default; the platform default is a different * face at a different size, which is where most "why is this font wrong" * bugs come from. */ .omx-ui :is(button, input, select, textarea, optgroup) { font: inherit; font-size: var(--omx-font-size-control); color: inherit; margin: 0; } .omx-ui button { background: none; border: 0; padding: 0; cursor: pointer; } .omx-ui :is(button, [role="button"]):disabled { cursor: not-allowed; } .omx-ui textarea { resize: vertical; } /* Images and media never overflow their column, and never shift layout. */ .omx-ui :is(img, svg, video, canvas) { display: block; max-width: 100%; } .omx-ui img { height: auto; } /* Tables are data, not layout. */ .omx-ui table { border-collapse: collapse; border-spacing: 0; } .omx-ui :is(th, td) { text-align: start; padding: 0; font-weight: inherit; } /* Numbers line up in columns or they are unreadable. */ .omx-ui :is([data-omx-numeric], .omx-numeric) { font-variant-numeric: tabular-nums; text-align: end; } .omx-ui ::selection { background: var(--omx-color-selection-bg); color: var(--omx-color-selection-text); } .omx-ui hr { border: 0; border-top: var(--omx-border-width) solid var(--omx-color-border-subtle); margin: 0; } .omx-ui code, .omx-ui kbd, .omx-ui samp, .omx-ui pre { font-family: var(--omx-font-mono); font-size: 0.95em; } /* A heading linked to from a hash must not land under a sticky topbar. */ .omx-ui :is(h1, h2, h3, h4, h5, h6)[id] { scroll-margin-top: var(--omx-space-11); } /* Native selects in Windows dark mode inherit the OS colours and become * unreadable unless both are set explicitly. */ .omx-ui select { background-color: var(--omx-color-surface); color: var(--omx-color-text); } } /* --- Foundation/a11y.css ------------------------------------------- */ /* ============================================================================= * L0 · Foundation · a11y.css * * The accessibility primitives every layer above inherits. Three of the rules * here exist because the first RCL failed them in a way no gate could see: * * 1. `.tags input { border:0; outline:none }` with no focus rule anywhere — * keyboard focus was invisible on that control. (components.css:564) * 2. `.range input[type=range] { outline:none }`, no focus style on track or * thumb. (components.css:538) * 3. `.drawer-body { overflow-y:auto }` with no overscroll containment, so * reaching the end of a drawer scrolled the page behind it. * (components.css:396) * * All three are handled below as defaults, so a component has to opt OUT to be * broken rather than opt IN to be correct. * ========================================================================== */ @layer omx.base { /* =========================================================================== * FOCUS * One ring, everywhere, on :focus-visible only — so a mouse click does not * leave a ring behind but a Tab key always does. * * ⛔ `outline: none` is forbidden in this package without a replacement in the * SAME rule. `check-omx` C8 fails the build otherwise. * ======================================================================== */ .omx-ui :focus-visible { outline: var(--omx-border-width-strong) solid var(--omx-color-accent); outline-offset: 2px; border-radius: var(--omx-radius-xs); } /* Controls that draw their own border replace the outline with a ring, so the * focus indicator follows the control's shape instead of boxing it. */ .omx-ui :is(input, select, textarea, [data-omx-control]):focus-visible { outline: none; border-color: var(--omx-color-accent); box-shadow: var(--omx-shadow-focus); } /* A compound control (a field with an addon, a tag input, a stepper) shows the * ring on the wrapper, because the thing the user perceives as focused is the * whole control, not the bare inside it. */ .omx-ui [data-omx-focus-group]:focus-within { border-color: var(--omx-color-accent); box-shadow: var(--omx-shadow-focus); } .omx-ui [data-omx-focus-group]:focus-within :is(input, textarea):focus-visible { outline: none; box-shadow: none; } /* Range inputs get no outline from the browser worth keeping — the thumb is * what the user watches, so the thumb is what gets the ring. */ .omx-ui input[type="range"]:focus-visible { outline: none; } .omx-ui input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: var(--omx-shadow-focus); } .omx-ui input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: var(--omx-shadow-focus); } /* Windows High Contrast: system colours replace ours, and a box-shadow ring * disappears entirely. Force a real outline back. */ @media (forced-colors: active) { .omx-ui :focus-visible, .omx-ui :is(input, select, textarea, [data-omx-control]):focus-visible { outline: 2px solid Highlight; outline-offset: 2px; } } /* =========================================================================== * SCROLL CONTAINMENT * Any element that scrolls contains its overscroll by default. Reaching the * bottom of a drawer, a modal body or a table viewport must not start * scrolling the page behind it. * ======================================================================== */ .omx-ui [data-omx-scroll] { overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; } /* =========================================================================== * SCREEN-READER-ONLY * `.omx-sr-only` hides visually and keeps the text in the accessibility tree. * The `focusable` variant reveals itself on focus — that is the skip link. * ======================================================================== */ /* =========================================================================== * IMPLICIT GRID TRACKS * 🔴🔴 A grid with no `grid-template-columns` places its items in an IMPLICIT * column, and an implicit track is `auto` — sized by its widest child. So one * long string sets the width for the whole component, and the parent's * constraint is ignored. * * Measured three times in this package, in both directions: * · `.omx-signin` inside a 206px card rendered a 320px track, because the * SSO button's label is long — the auth page scrolled sideways at 320px. * · `.omx-auth__stage` sized its card to the card's own max-content. * · `.omx-page` with `place-content: center` collapsed to ZERO, because the * card asked for `100%` of a track that was sized by the card. * * ⭐ ONE rule instead of 97: `grid-auto-columns` controls exactly the implicit * track and nothing else. A grid that declares its own columns is untouched, * and a `grid-auto-flow: column` component (Board, Calendar) that sets its own * `grid-auto-columns` still wins on specificity of intent — it declares one. * * ⚠️ `minmax(0, 1fr)` rather than `1fr`: a bare `1fr` still has an `auto` * minimum, which is the half that refuses to shrink. */ .omx-ui [class*="omx-"] { grid-auto-columns: minmax(0, 1fr); } .omx-sr-only, .omx-sr-only-focusable:not(:focus):not(:focus-within) { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; /* 🔴🔴 WITHOUT THIS, A 1px HIDDEN ELEMENT WIDENS THE WHOLE DOCUMENT. * `position: absolute` with no inset keeps the element's STATIC position — * and inside a horizontally-scrolled region (a board, a wide pivot, a * table) that static position is hundreds of pixels to the right. Being * absolute, it resolves against the nearest positioned ancestor, which for * most of these is the INITIAL CONTAINING BLOCK — so it escapes the * scroller that was clipping everything else and pushes the page out. * * Measured at 375px, before: /gallery/archetype/card-board scrolled * sideways by 203px, /gallery/datadisplay by 220px — and the offender was * ONE `.omx-sr-only` span 1px wide sitting at x=577. `document.body` * measured a correct 375px throughout; only `documentElement` was wider, * which is what made it so hard to attribute. * * ⭐ Pinning it costs nothing: the element is 1px and clipped, so where it * sits is invisible either way. What it must not do is take part in * deciding how wide the page is. */ inset-inline-start: 0; } .omx-skip-link { position: absolute; inset-block-start: var(--omx-space-2); inset-inline-start: var(--omx-space-2); z-index: var(--omx-z-tooltip); padding: var(--omx-space-4) var(--omx-space-6); background: var(--omx-color-surface-raised); color: var(--omx-color-text-link); border: var(--omx-border-width) solid var(--omx-color-accent); border-radius: var(--omx-radius-md); box-shadow: var(--omx-shadow-md); } /* =========================================================================== * LIVE REGIONS * Async results — a saved toast, a validation summary, a filtered row count — * must announce. A visually empty live region is correct and intentional. * ======================================================================== */ .omx-ui [data-omx-live] { position: relative; } /* =========================================================================== * TOUCH TARGETS * Anything interactive that renders smaller than 44px gets its hit area * extended with a pseudo-element rather than by growing the visual control. * Opt in with `data-omx-target="extend"`. * ======================================================================== */ .omx-ui [data-omx-target="extend"] { position: relative; } .omx-ui [data-omx-target="extend"]::after { content: ""; position: absolute; inset: 50% auto auto 50%; translate: -50% -50%; min-width: var(--omx-size-touch); min-height: var(--omx-size-touch); width: 100%; height: 100%; } /* =========================================================================== * MOTION * Durations already collapse to 0ms under prefers-reduced-motion (tokens.css). * This is the belt for anything that animates without using a token — it must * still stop, and an infinite loop must stop looping rather than run at 0ms. * ======================================================================== */ @media (prefers-reduced-motion: reduce) { .omx-ui *, .omx-ui *::before, .omx-ui *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } } /* =========================================================================== * PRINT * L9 owns document layout; this is only the baseline so that a page printed * without a print component is still legible. * ======================================================================== */ @media print { .omx-ui { background: #fff; color: #000; --omx-shadow-xs: none; --omx-shadow-sm: none; --omx-shadow-md: none; --omx-shadow-lg: none; } .omx-ui [data-omx-print="hide"] { display: none !important; } .omx-ui [data-omx-scroll] { overflow: visible !important; height: auto !important; } } } /* --- Foundation/absence.css ---------------------------------------- */ /* ============================================================================= * L0 · Foundation · Absence — a value that is not a value. * * 🔴🔴 THE DEFECT THIS EXISTS FOR IS RENDERING ABSENCE AS `0`, BLANK, OR AN EM * DASH. All three occupy the position of an answer. The rule the markup follows * is that the REASON goes where the number would have gone — so this file's * whole job is to make sure that reason cannot be mistaken for a figure. * * ⭐ THREE CUES, AND NOT ONE OF THEM IS COLOUR ALONE (WCAG 1.4.1): * 1. it leaves the numeric rhythm — `omx-table__cell--absent` start-aligns it * inside an end-aligned money column, which is the loudest signal of the * three and the only one visible from across a printed page; * 2. italic, which survives a monochrome laser; * 3. the muted text colour, which is a designed token and clears 4.5:1. * ========================================================================== */ @layer omx.base { .omx-absent { font-style: italic; color: var(--omx-color-text-muted); /* ⛔ Undo tabular figures. The reason is prose, and prose set in tabular * figures has the letter-spacing of a ledger column — it looks like a * number that failed to format. */ font-variant-numeric: normal; /* It is not a figure, so it does not carry the figure's weight. */ font-weight: var(--omx-font-weight-regular); } /* ⚠️ The totals row is bold, and an inherited bold would make a refusal look * like the loudest number on the page. */ .omx-absent--total { font-weight: var(--omx-font-weight-regular); } /* 🔴 In forced-colors the author colour is discarded, so cue 3 is gone and * cue 2 is all that is left of the typography. GrayText is the system's own * "de-emphasised" slot and is the one value guaranteed to still contrast. */ @media (forced-colors: active) { .omx-absent { color: GrayText; } } /* Ink. The muted grey is a designed SCREEN value; on paper it prints as a * wash that photocopies to nothing, and "the figure is missing" is exactly * the sentence that must survive a photocopy. Italic still carries it. */ @media print { .omx-absent { color: #000; } } } /* --- Foundation/effective.css -------------------------------------- */ /* ============================================================================= * L0 · Foundation · Effective — where a version sits in time. * * 🔴🔴 THE DEFECT THIS EXISTS FOR IS "THE LATEST ROW WINS". A rule is a value * WITH A DATE RANGE; which one applies depends on the date being asked about, * not on which row was saved last. The failure is silent — nothing looks broken * until somebody backdates, and then the number is confidently wrong. * * ⛔⛔ THE ROW IS NOT DIMMED, AND THAT IS THE WHOLE DESIGN. The requirement is * that a superseded version stays "addressable and visible". A superseded rule * was CORRECT IN ITS TIME — it is not an error, not deleted, and not less true * than the current one for the dates it covered. Dimming it, striking it * through, or hiding it in a drawer all say otherwise. So the row's own text * keeps full contrast and only this chip differs. * * ⭐ AND THE CHIP CARRIES WORDS, NOT JUST A COLOUR (WCAG 1.4.1). "1 Jan – 30 * Jun 2026 · superseded" is legible with every colour stripped out — and the * window IS the reason the row is superseded, so it is the honest label rather * than a decoration beside one. * ========================================================================== */ @layer omx.base { .omx-effective { display: inline-block; margin-inline-start: var(--omx-space-2); padding-inline: var(--omx-space-2); font-size: var(--omx-font-size-caption); line-height: 1.5; white-space: nowrap; border-radius: var(--omx-radius-sm); /* 🔴 --omx-color-border-subtle measures 1.22 light / 1.14 dark on this * plane and is INVISIBLE — the same value that made the brand plate's * first instrument marks present in the DOM and absent on screen. * `superseded`, whose only mark is a DASHED border, therefore showed no * border at all: three of four states drew a boundary and the fourth * silently did not. * ⛔ Not made loud. The structure register (1.95 / 1.90) is perceptible * as a boundary and still far quieter than the toned states at * 3.65-4.16 — a superseded rule was correct in its time. */ border: var(--omx-border-width) solid var(--omx-color-border-strong); color: var(--omx-color-text-muted); /* Dates are figures. A column of windows that does not line up is a column * nobody reads down. */ font-variant-numeric: tabular-nums; } /* In force on the date asked about. ⚠️ Rendered at all only because a table * showing several versions needs to say WHICH one is live — on a single-row * view it is noise the caller can leave off by not setting AsOf. */ .omx-effective[data-omx-effective="current"] { border-color: var(--omx-color-success-border); color: var(--omx-color-success-text); } /* Decided, not yet in force. */ .omx-effective[data-omx-effective="future"] { border-color: var(--omx-color-info-border); color: var(--omx-color-info-text); } /* Ended, and something took over. The NORMAL end of a version's life, so it * is the quietest of the four — neutral border, muted text, no alarm. */ .omx-effective[data-omx-effective="superseded"] { border-style: dashed; } /* 🔴 Ended and NOTHING replaced it ⇒ the system has no answer for today. * The only one of the four that is a DEFECT rather than a lifecycle stage, * so it is the only one that gets a warning tone. */ .omx-effective[data-omx-effective="expired"] { border-color: var(--omx-color-warning-border); color: var(--omx-color-warning-text); font-weight: var(--omx-font-weight-medium); } /* 🔴 In forced-colors the author colour is discarded entirely, so all four * states would look identical — which is exactly the collapse the chip's * WORDS are there to survive. The border style is kept because it is the one * differentiator the system palette does not flatten. */ @media (forced-colors: active) { .omx-effective { border-color: CanvasText; color: CanvasText; } } /* Ink. The muted grey photocopies to nothing, and "this version was replaced" * is exactly the sentence that has to survive a photocopy. */ @media print { .omx-effective { color: #000; border-color: #000; } } } /* --- Foundation/field-lock.css ------------------------------------- */ /* ========================================================================== * L0 · Foundation · FieldLock — a value you cannot change, and why. * * 🔴 IT IS NOT A GREYED CONTROL. A disabled box looks typeable and is not, and * the reader's conclusion is that the software is broken. The value renders as * TEXT; the reason renders as a sentence under it. * * ⭐ THE STRUCTURE REGISTER, deliberately — 1px --omx-color-border-strong, * measured 1.95 light / 1.90 dark. A lock is a fact about the FORM's shape, the * same class of fact as a group boundary. ⛔ Not the instrument register: that * one says "which thing am I looking at", and spending it here would let a * locked quantity out-rank the page's own identity. * * ⛔ Lives in Foundation because both an L1 primitive (Input, rendering the * value) and an L5 field (rendering the sentence) write these classes — the * same argument that puts FieldContext at L0. * ========================================================================== */ @layer omx.base { /* ⚠️ min-block-size is the CONTROL height, not a round number. A form with some fields locked and some editable must stay on one grid; without this the text collapses to its line box and every locked row sits 12px shorter than its neighbours. */ .omx-field-lock__value { display: flex; align-items: center; min-block-size: var(--omx-control-height); margin: 0; padding-inline-start: var(--omx-space-4); font-size: var(--omx-font-size-body); line-height: var(--omx-line-height-body); color: var(--omx-color-text); /* The quiet mark that says STATED, not ENTERED. ⛔ No background, no box: anything that fills a rectangle here starts to read as a control again, which is the entire defect. */ border-inline-start: var(--omx-border-width) solid var(--omx-color-border-strong); /* A locked value is still a value someone may need to copy. */ user-select: text; overflow-wrap: anywhere; } /* Numbers line up with the numbers in the editable fields above and below. ⚠️ The absence inside a locked-and-empty value undoes this for itself -- absence.css sets font-variant-numeric: normal, because a reason set in tabular figures reads as a number that failed to format. */ .omx-field--fixed .omx-field-lock__value { font-variant-numeric: tabular-nums; } .omx-field-lock { display: flex; align-items: flex-start; flex-wrap: wrap; gap: var(--omx-space-1) var(--omx-space-2); margin: var(--omx-space-2) 0 0; font-size: var(--omx-font-size-caption); line-height: var(--omx-line-height-body); color: var(--omx-color-text-muted); } .omx-field-lock__icon { inline-size: 1em; block-size: 1em; flex: none; /* Optical: a 1em glyph beside a 1.5 line-height caption rides high. */ margin-block-start: .25em; } /* ⛔ The reason is NOT dimmed further than the caption already is. It is the only thing on screen that explains why the field is dead, so it is the last text that should be hard to read. */ .omx-field-lock__reason { min-inline-size: 0; } /* The route out — quieter than the reason, because it is the second question a reader asks, not the first. */ .omx-field-lock__route { min-inline-size: 0; color: var(--omx-color-text-subtle); } /* ⛔ NOT colour alone (WCAG 1.4.1). The icon and the sentence both carry the state; this rule only stops the mark vanishing where the border colour cannot be trusted. */ @media (forced-colors: active) { .omx-field-lock__value { border-inline-start-color: CanvasText; } .omx-field-lock { color: CanvasText; } } /* Ink. The muted grey is a designed SCREEN value; on paper "you cannot change this" is exactly the sentence that must survive a photocopy. */ @media print { .omx-field-lock { color: #000; } } } /* --- Foundation/provenance.css ------------------------------------- */ @layer omx.base { /* L0 · Foundation · provenance — which source won, at the cell. * * ⭐ THE SUMMARY IS THE ANSWER. A reader who never opens anything still sees * which source produced the figure; opening it shows what that source beat. * ⛔ So this is styled as a QUIET LABEL, not a control: it sits with the * value, it does not compete with it, and it is legible before any hover. */ .omx-prov { display: inline; } .omx-prov__tag { display: inline; cursor: pointer; color: var(--omx-color-text-muted); font-size: var(--omx-font-size-caption); /* \u26d4 The default triangle is removed, because in a dense column of figures a * row of triangles reads as a column of controls — the tag itself is the * affordance, and it is underlined on focus and hover like the link it * behaves as. */ list-style: none; } .omx-prov__tag::-webkit-details-marker { display: none; } .omx-prov__tag:hover, .omx-prov__tag:focus-visible { text-decoration: underline; } /* ⛔ A :hover with no :active does nothing for touch or for a keyboard, and * this element TOGGLES — a press that gives no feedback reads as a dead * control on exactly the devices that cannot hover. */ .omx-prov__tag:active { color: var(--omx-color-text); } /* ⛔ NO FOCUS RULE HERE ON PURPOSE. `a11y.css` already gives every * :focus-visible element a ring, and a is focusable by default — * a second declaration would be the same fact in two files, which is how * the two drift. The underline above is an EXTRA affordance, not a copy. */ /* ⚠️ An ASSUMED value is marked on the face of the cell, never only inside * the disclosure. ASSUMED_LIVE is not LIVE, and a distinction that requires a * click is a distinction nobody makes. */ /* 🔴 STYLED FROM THE ATTRIBUTE, NOT A SECOND CLASS. This shipped as both * `data-omx-prov="assumed"` and `.omx-prov--assumed`, which is one fact in two * places — and `check-omx` C16 caught the attribute as a promise nothing read. * ⭐ The attribute wins because a CONSUMING module styles by it too; a modifier * class only this file knows about would have to be mirrored downstream. */ .omx-prov[data-omx-prov="assumed"] .omx-prov__tag { color: var(--omx-color-warning-text); font-style: italic; } .omx-prov__body { margin-block-start: var(--omx-space-1); padding-inline-start: var(--omx-space-2); border-inline-start: var(--omx-border-width) solid var(--omx-color-border-strong); color: var(--omx-color-text-muted); font-size: var(--omx-font-size-caption); line-height: var(--omx-line-height-tight); text-align: start; /* ⛔ A chain in a numeric column must not inherit the column's end-alignment * or tabular figures — it is prose about the number, not another number. */ font-variant-numeric: normal; } .omx-prov__step { display: block; } /* ⭐ The winner is the only one that reads at full strength. The losers are * evidence, and evidence that shouts competes with the answer. */ .omx-prov__step[data-omx-source="supplied"], .omx-prov__step[data-omx-source="assumed"] { color: var(--omx-color-text); font-weight: var(--omx-font-weight-medium); } /* \U0001f534 A withheld source is marked, because "there is no contract rate" and * "there is one and you may not see it" send a reader in opposite directions * — and creating a second rate is how a duplicate gets into a system. */ .omx-prov__step[data-omx-source="not-permitted"] { font-style: italic; } .omx-prov__shadowed { display: block; margin-block-start: var(--omx-space-1); } } /* --- Foundation/row-age.css ---------------------------------------- */ @layer omx.base { /* L0 · Foundation · row age — how old one row's figure is. * * 🔴🔴 ONE RULE, AND NO STATE SELECTORS. There is no "stale" variant and never * will be: PLANNING forbids inventing a bound, and KNITDYE requires the row to * fail open. A figure three days old looks exactly like one three minutes old * except for the words — the reader judges, the component does not. */ .omx-row-age { display: block; margin-block-start: var(--omx-space-1); color: var(--omx-color-text-muted); font-size: var(--omx-font-size-caption); font-variant-numeric: tabular-nums; text-align: start; } } /* --- Foundation/Brand/Brand.css ------------------------------------ */ /* ========================================================================== * L0 · Foundation · Brand — the Omnixa identity lockup. * * 🔴 THE THEME SWAP IS THE WHOLE POINT OF THIS FILE. The wordmark ink is * #1F2C3A and vanishes on a dark panel, and the dark asset is a REMAPPED image * (ink lifted to white by brightness; the gradient x and violet tagline lifted * separately) — `filter: invert()` would wreck both. So both images are in the * DOM and exactly one is shown. * * ⚠️ THREE THEME STATES, NOT TWO — the same trap the rest of this package * documents. An explicit choice stamps `data-theme` on the root; the DEFAULT * ("system") stamps nothing and only `prefers-color-scheme` separates light * from dark. So the dark wordmark must be selected by BOTH, and the light one * restored under `[data-theme="light"]`, or a light-mode toggle inside a * dark-OS session shows the wrong file. * * ⚠️ @layer omx.base, NOT omx.component — and that is enforced, not chosen. * `check-omx` C10 allows a file under Foundation/ to write only into omx.base * or omx.reset, and it failed this file's first version. The architecture doc * calls Brand "identity plumbing, not a widget", and the layer rule agrees with * it: the lockup sits with the tokens and the reset, beneath every component. * ========================================================================== */ @layer omx.base { .omx-brand { /* ⚠️ DEFAULTS DECLARED HERE, not only in the inline style. The view sets * these three per instance, but a var() with no declaration anywhere is * unresolvable to a reader and to C1 — and if the inline style is ever * dropped the lockup would collapse to zero rather than fall back. */ --omx-brand-size: 28px; --omx-brand-word-w: 86px; --omx-brand-word-h: 20px; display: inline-flex; flex-direction: column; gap: var(--omx-space-1); text-decoration: none; color: inherit; /* The lockup is one object: it never stretches to its container. */ inline-size: fit-content; } /* omx-no-press: this SUPPRESSES the underline reset.css gives every a[href]:hover — it is not an affordance. The lockup is deliberately inert-looking; a logo that flashes on press reads as a bug */ a.omx-brand:hover { text-decoration: none; } /* ⛔ NO FOCUS RULE HERE, DELIBERATELY. `a11y.css` already gives every * focusable thing in `.omx-ui` one ring on :focus-visible. This file's first * version re-declared it against two tokens that do not exist — which is both * "a second way to do what the package already does" and the reason C1 fired. * The global ring is the right ring. */ .omx-brand__row { display: inline-flex; align-items: center; /* ⭐ 0.34, not 0.28. The old PNG monogram carried internal padding, so * its INK stopped short of its box and the box gap overstated the optical * one. The vector mark's ring touches its box edge, so the same number * reads tighter ⚠️ measured: ink-to-ink fell by roughly the padding the * raster used to carry. The box gap grows to hold the optical gap still. */ /* ⭐ 0.14, down from 0.34 across two steps. The gap was tuned against a * box that was a third empty; now that the box is the letters, the same * number read as a hole. Owner: start the title nearer the mark — and * the 3px it returns goes straight into the title's width. */ gap: calc(var(--omx-brand-size) * 0.14); /* 🔴 A LOGO DOES NOT MIRROR. Everything else in this package is built from * logical properties so it flips correctly under `dir="rtl"` — and the first * RTL render flipped the lockup too, putting the wordmark before the mark. * ⚠️ That is a composition the brand never approved: the artwork is a fixed * arrangement, and the pack ships no RTL variant of it. `direction: ltr` * pins the lockup's internal order while the PAGE around it still mirrors. * ⭐ Found by looking at the Arabic screenshot, not by reading the CSS. */ direction: ltr; } /* Sized from the model, not from the file. The width/height attributes are on * the element too, so the box is right on the FIRST paint — a logo that * resizes when its image lands is a layout shift on the most looked-at * element on the page. */ .omx-brand__mark { inline-size: var(--omx-brand-size); block-size: var(--omx-brand-size); /* The artwork is square; say so, so a wrong asset cannot distort silently. */ aspect-ratio: 1 / 1; object-fit: contain; flex: none; } /* 🔴🔴 A GLOW BEHIND THE MARK WAS BUILT HERE AND THEN REMOVED, * BECAUSE IT WAS MEASURED AND IT WAS INVISIBLE. A radial brand wash sat * behind the monogram at 24% accent; sampling the rendered pixels either * side of it gave a channel delta of **1 in light and 0 in dark**. It was * decoration that decorated nothing, plus two hover states and a press state * wired to something no one could see. * ⭐ The idea was wrong at this size, not merely too faint: a glow needs a * dark ground or a large mark, and this is a 28px monogram on near-white. * What actually carries the identity zone was measured too -- the seam at * delta 195/224, the accent rule at 397/383, the plinth at 25/19. Three of * the four moves were doing the work; this one was not. * ⛔ Do not reintroduce it without measuring it. An effect nobody can see * is the same defect class as a `data-omx-*` nothing reads. */ /* 🔴🔴 SIZED BY ITS LETTERS, NOT BY ITS CANVAS ⛔ the fix for "the * title is smaller than it should be". The artwork is 900x173 but every * letter's ink is in rows 46..158: 113px, 65.3% of the box. The model now * divides by that share, so a ratio means LETTERS at that ratio. * ⚠️ The artwork is untouched; only the arithmetic changed. */ .omx-brand__word { inline-size: var(--omx-brand-word-w); block-size: var(--omx-brand-word-h); aspect-ratio: 900 / 173; object-fit: contain; flex: none; /* 🔴 AND THE SECOND HALF OF THE SAME DEFECT. The letter band's centre is * row 102; the canvas centre is row 86. The letters sit 16px LOW in a 173 * canvas — 9.2% of the box — so centring the BOX leaves the LETTERS below * the mark's centre line. This lifts them back onto it. */ translate: 0 calc(var(--omx-brand-word-h) * -0.092); } /* ⚠️ The raster wordmark's sizing block lived here and is gone with * it. `WordWidth`/`WordHeight` on the model are what fed it; they remain * only so a consumer still drawing the PNG from its own markup can size * it correctly. Nothing in this package renders it. */ /* -- a tenant's own logo ------------------------------------------------- * Sized by HEIGHT only: the package cannot know a customer logo's aspect * ratio, so constraining width would distort it. `max-inline-size` keeps a * very wide lockup from pushing the sidebar apart. */ .omx-brand__tenant { block-size: var(--omx-brand-size); inline-size: auto; max-inline-size: calc(var(--omx-brand-size) * 8); object-fit: contain; flex: none; } /* ⚠️ These two rules exist ONLY when a dark file was supplied -- the view does * not emit `--dark` otherwise, so a single tenant image is never hidden by * them. Same three-state theme handling as the wordmark below. */ .omx-brand__tenant--dark { display: none; } @media (prefers-color-scheme: dark) { .omx-ui:not([data-theme="light"]) .omx-brand__tenant--light { display: none; } .omx-ui:not([data-theme="light"]) .omx-brand__tenant--dark { display: block; } } .omx-ui[data-theme="dark"] .omx-brand__tenant--light { display: none; } .omx-ui[data-theme="dark"] .omx-brand__tenant--dark { display: block; } .omx-ui[data-theme="light"] .omx-brand__tenant--light { display: block; } .omx-ui[data-theme="light"] .omx-brand__tenant--dark { display: none; } /* -- the theme swap ------------------------------------------------------ * 🔴 The ink is #1F2C3A and vanishes on a dark panel, and the dark asset is * a REMAPPED image, not something `filter: invert()` can fake. Both are in * the DOM and exactly one is shown. * ⚠️ THREE theme states: an explicit choice stamps `data-theme`, the * default stamps nothing and only `prefers-color-scheme` separates them. * 🔴 And these key off `.omx-ui`, NOT `:root` ⛔ this package puts * `data-theme` on the BODY, and when this one file disagreed, a user who * switched the app to dark kept the light wordmark. * ⚠️ A live-text title was tried here and REVERTED on the owner's call; * the diagnosis it produced is what the sizing fix above is built on. */ .omx-brand__word--dark { display: none; } @media (prefers-color-scheme: dark) { .omx-ui:not([data-theme="light"]) .omx-brand__word--light { display: none; } .omx-ui:not([data-theme="light"]) .omx-brand__word--dark { display: block; } } .omx-ui[data-theme="dark"] .omx-brand__word--light { display: none; } .omx-ui[data-theme="dark"] .omx-brand__word--dark { display: block; } .omx-ui[data-theme="light"] .omx-brand__word--light { display: block; } .omx-ui[data-theme="light"] .omx-brand__word--dark { display: none; } .omx-on-dark .omx-brand__word--light, .omx-brand--on-dark .omx-brand__word--light { display: none; } .omx-on-dark .omx-brand__word--dark, .omx-brand--on-dark .omx-brand__word--dark { display: block; } /* Ink on white, always ⛔ never the dark wordmark, whatever theme * the screen was in when Print was pressed. */ @media print { .omx-brand__word--light { display: block; } .omx-brand__word--dark { display: none; } } /* Windows High Contrast drops background images and can flatten artwork; * keep the lockup from being repainted into the forced palette. */ @media (forced-colors: active) { .omx-brand__mark, .omx-brand__word { forced-color-adjust: none; } } } /* --- Primitives/Avatar/Avatar.css ---------------------------------- */ /* ============================================================================= * L1 · Primitives · Avatar * ========================================================================== */ @layer omx.component { .omx-avatar { /* The hue is set inline from a hash of the person's NAME, so one person is * one colour everywhere — across pages, across modules, across sessions. * Hashing the name and not the row index is what makes that true. * Saturation and lightness are fixed here, so no generated hue can drift * out of contrast with the initials sitting on it. */ --omx-avatar-hue: 220; display: inline-grid; place-items: center; inline-size: var(--omx-size-avatar-sm); block-size: var(--omx-size-avatar-sm); flex: 0 0 auto; overflow: hidden; border-radius: var(--omx-radius-pill); background: hsl(var(--omx-avatar-hue) 42% 88%); color: hsl(var(--omx-avatar-hue) 55% 26%); /* A hairline stops a pale avatar dissolving into a pale surface. */ box-shadow: inset 0 0 0 1px var(--omx-color-hairline); } .omx-avatar--lg { inline-size: var(--omx-size-avatar-md); block-size: var(--omx-size-avatar-md); } .omx-avatar__img { inline-size: 100%; block-size: 100%; object-fit: cover; } .omx-avatar__initials { font-size: var(--omx-font-size-caption); font-weight: var(--omx-font-weight-semibold); line-height: 1; letter-spacing: 0.02em; user-select: none; } .omx-avatar--lg .omx-avatar__initials { font-size: var(--omx-font-size-label); } /* 🔴🔴 FIXED 2026-09-19 — THE SECOND SELECTOR WAS NOT INSIDE THE MEDIA QUERY. * `.omx-ui:not([data-theme="light"])` matches the DEFAULT, UNSTAMPED state — * which tokens.css documents as "system", the state every user is in until * they open Appearance and pick something. So this dark rule applied on a * LIGHT page: MEASURED at OS colorScheme=light with no attribute, the canvas * was rgb(238,241,246) and the avatar was rgb(46,86,80) — a dark teal chip on * a near-white page, for everyone who never touched the theme setting. * ⭐ THREE STATES, NOT TWO: explicit dark · explicit light · system. Only the * media query separates the third, and tokens.css and Brand.css both wrap it. * This file was the one that did not. */ .omx-ui[data-theme="dark"] .omx-avatar { background: hsl(var(--omx-avatar-hue) 30% 26%); color: hsl(var(--omx-avatar-hue) 60% 84%); /* The hairline no longer needs a dark override — it is a token now, and * the token already flips. */ } @media (prefers-color-scheme: dark) { .omx-ui:not([data-theme="light"]) .omx-avatar { background: hsl(var(--omx-avatar-hue) 30% 26%); color: hsl(var(--omx-avatar-hue) 60% 84%); } } } /* --- Primitives/Badge/Badge.css ------------------------------------ */ /* ============================================================================= * L1 · Primitives · Badge * * Six tones × three variants from two local variables. Every tone is a token * PAIR — a wash and a text colour that clears 4.5:1 on it — so a badge can * never be assembled from a background without its matching foreground. * ========================================================================== */ @layer omx.component { .omx-badge { --omx-badge-bg: var(--omx-color-neutral-bg); --omx-badge-fg: var(--omx-color-neutral-text); display: inline-flex; align-items: center; gap: var(--omx-space-3); /* Does NOT follow --omx-control-height: a badge sits inside a line of text, * so it is sized by the type it sits in, not by the control scale. A badge * as tall as a button would wreck a table row. */ padding: var(--omx-space-1) var(--omx-space-4); font-size: var(--omx-font-size-caption); font-weight: var(--omx-font-weight-medium); line-height: 1.45; white-space: nowrap; color: var(--omx-badge-fg); background: var(--omx-badge-bg); border: var(--omx-border-width) solid transparent; border-radius: var(--omx-radius-sm); } .omx-badge__text { overflow: hidden; text-overflow: ellipsis; } .omx-badge__dot { inline-size: 6px; block-size: 6px; border-radius: var(--omx-radius-pill); background: currentColor; flex: 0 0 auto; } .omx-badge__icon { inline-size: 12px; block-size: 12px; flex: 0 0 auto; fill: currentColor; } /* -- tones: each sets the PAIR, never one half ---------------------------- */ .omx-badge--neutral { --omx-badge-bg: var(--omx-color-neutral-bg); --omx-badge-fg: var(--omx-color-neutral-text); } .omx-badge--info { --omx-badge-bg: var(--omx-color-info-bg); --omx-badge-fg: var(--omx-color-info-text); } .omx-badge--success { --omx-badge-bg: var(--omx-color-success-bg); --omx-badge-fg: var(--omx-color-success-text); } .omx-badge--warning { --omx-badge-bg: var(--omx-color-warning-bg); --omx-badge-fg: var(--omx-color-warning-text); } .omx-badge--danger { --omx-badge-bg: var(--omx-color-danger-bg); --omx-badge-fg: var(--omx-color-danger-text); } .omx-badge--accent { --omx-badge-bg: var(--omx-color-accent-subtle); --omx-badge-fg: var(--omx-color-accent-hover); } /* -- variants ------------------------------------------------------------- */ /* Solid inverts the pair: the former foreground becomes the fill, and the * text takes the surface colour. Keeps the contrast relationship intact * instead of inventing a second palette. */ .omx-badge--solid { background: var(--omx-badge-fg); color: var(--omx-color-surface); border-color: var(--omx-badge-fg); } .omx-badge--outline { background: transparent; border-color: color-mix(in srgb, var(--omx-badge-fg) 38%, transparent); } @media (forced-colors: active) { /* HCM strips the wash, so tone becomes invisible. The border is what keeps * the badge legible as a distinct object — the WORD is what keeps it * meaningful, which is why Text has no null path. */ .omx-badge { border-color: CanvasText; background: Canvas; color: CanvasText; } } @media print { .omx-badge { border-color: #000; background: transparent; color: #000; } } } /* --- Primitives/Break/Break.css ------------------------------------ */ /* ============================================================================= * L1 · Primitives · Break — where a printed document is allowed to split. * * ⭐ THE ONE PAGINATION CONTROL THAT WORKS IN EVERY ENGINE. The page NUMBER * needs CSS Paged Media margin boxes, which today only Chromium implements; * `break-before: page` is not in that position — it is supported everywhere, * and it is what a caller needs in order to say "this section starts its own * sheet". Measured 2026-09-21 against a real PDF: a probe with one forced break * produced exactly the expected page count, and a named landscape page flipped * that page's MediaBox to 842x595. * * 🔴 WHY A UTILITY LAYER AND NOT THE COMPONENT ONE. Components already set * `break-inside: avoid` on `.omx-table__row`, `.omx-card`, `.omx-list__item` and * a dozen more. A break class in `@layer omx.component` would tie with those and * be decided by source order — which file the bundler happened to write first. * `omx.utility` sits ABOVE `omx.component`, so a caller's explicit instruction * wins over a component's default, every time. * * ⚠️ NO `@media print` WRAPPER. `break-before`/`break-after` are inert on a * continuous screen anyway, and wrapping them would hide them from a paged * preview — which is the only way anyone looks at pagination without printing. * ========================================================================== */ @layer omx.utility { /* Start this element on a new sheet. */ .omx-break-before { break-before: page; } /* End the sheet after this element. */ .omx-break-after { break-after: page; } /* Keep this block whole. * ⛔ NOT the same kind of thing as the two above — this one DOES act on * screen, inside a multi-column container. */ .omx-break-avoid { break-inside: avoid; } } /* --- Primitives/Button/Button.css ---------------------------------- */ /* ============================================================================= * L1 · Primitives · Button * * Five variants, one geometry. Height, padding and gap all come from the * density block in Foundation/tokens.css, so a button is 32px comfortable, * 28px cozy, 24px compact and 44px on a phone without this file knowing that. * ========================================================================== */ @layer omx.component { .omx-button { /* Component-local derivations. Named for the component, resolved from * tokens — the one legal exception to "tokens live in tokens.css". */ --omx-button-bg: var(--omx-color-control); --omx-button-bg-hover: var(--omx-color-control-hover); --omx-button-bg-active: var(--omx-color-control-active); --omx-button-fg: var(--omx-color-text); --omx-button-border: var(--omx-color-border-strong); display: inline-flex; align-items: center; justify-content: center; gap: var(--omx-space-3); /* 🔧 `min-block-size`, NOT `block-size`. A hard height CLIPS whatever the * larger text scales put inside it instead of growing — the same trap the * topbar was fixed for, one layer down and on every control in the package. * MEASURED at `data-text-scale="board"` (×2.4) on /gallery/primitives: * **12 of 17 buttons clipped**, a 24px box holding a label that needed * 33.6px. At `large` (×1.14) nothing clips, which is why it survived — the * scale most people actually move to is the one that still fits. * ⭐ Nothing moves at the default scale: the min IS the height until the * content asks for more, which is the property a hard height was only * pretending to have. */ min-block-size: var(--omx-control-height); padding-inline: var(--omx-control-pad-x); min-inline-size: 0; /* lets a long label truncate, not overflow */ font: inherit; font-size: var(--omx-font-size-control); font-weight: var(--omx-font-weight-medium); line-height: 1; white-space: nowrap; text-decoration: none; color: var(--omx-button-fg); background: var(--omx-button-bg); border: var(--omx-border-width) solid var(--omx-button-border); border-radius: var(--omx-radius-md); cursor: pointer; user-select: none; /* ⛔ Never `transition: all` — it animates layout properties by accident and * makes every hover a compositor job. Name them. */ transition: background-color var(--omx-duration-fast) var(--omx-easing-standard), border-color var(--omx-duration-fast) var(--omx-easing-standard), color var(--omx-duration-fast) var(--omx-easing-standard); } .omx-button__label { overflow: hidden; text-overflow: ellipsis; } .omx-button__icon { inline-size: var(--omx-size-icon-inline); block-size: var(--omx-size-icon-inline); flex: 0 0 auto; fill: currentColor; } /* -- interaction --------------------------------------------------------- * Hover and active must be MORE contrasty than rest, never less — a state * that reduces contrast reads as "going away", not "responding". */ .omx-button:hover { background: var(--omx-button-bg-hover); } .omx-button:active { background: var(--omx-button-bg-active); } /* Focus ring is Foundation's job (a11y.css). Nothing here overrides it. */ /* -- unavailable ---------------------------------------------------------- * Two shapes, on purpose. `disabled` leaves the tab order and can say * nothing; `aria-disabled` stays reachable and keeps its tooltip. Both look * identical, because to a sighted user they mean the same thing. */ /* 🔴 FIXED 2026-09-12, found by looking at the gallery — not by any gate. * This block used to set `background` directly and leave the foreground * alone. On `--primary` the foreground is `--omx-color-accent-text` * (near-white, correct on the blue fill), so a disabled primary button * rendered WHITE LABEL ON PALE GREY: an empty box. Every variant was one * `Disabled = true` away from an invisible label. * The fix is to re-point the three LOCAL variables instead of the final * properties, so one rule is correct for all five variants and any future * one. ⭐ A component that overrides half of a variant's contract is worse * than one that overrides none of it. */ .omx-button:disabled, .omx-button[aria-disabled="true"] { --omx-button-bg: var(--omx-color-control); --omx-button-bg-hover: var(--omx-color-control); --omx-button-bg-active: var(--omx-color-control); --omx-button-fg: var(--omx-color-text-muted); --omx-button-border: var(--omx-color-border); opacity: 0.65; cursor: not-allowed; } /* Link and ghost have no fill to grey out; keep them flat so a disabled * inline action does not grow a box it never had. */ .omx-button--link:disabled, .omx-button--link[aria-disabled="true"], .omx-button--ghost:disabled, .omx-button--ghost[aria-disabled="true"] { --omx-button-bg: transparent; --omx-button-bg-hover: transparent; --omx-button-bg-active: transparent; --omx-button-border: transparent; } .omx-button[aria-disabled="true"] { pointer-events: none; } .omx-button[aria-disabled="true"]:focus-visible { pointer-events: auto; } /* -- busy ----------------------------------------------------------------- * The control keeps its width while the label swaps, so a row of buttons * does not reflow the moment one is clicked. */ .omx-button[aria-busy="true"] { cursor: progress; pointer-events: none; } .omx-button__spinner { inline-size: var(--omx-size-icon-inline); block-size: var(--omx-size-icon-inline); flex: 0 0 auto; border: 2px solid currentColor; border-block-start-color: transparent; border-radius: var(--omx-radius-pill); opacity: 0.75; animation: omx-button-spin 620ms linear infinite; } @keyframes omx-button-spin { to { rotate: 360deg; } } /* prefers-reduced-motion is handled globally in a11y.css: the animation is * clamped to one 1ms iteration, so this becomes a static ring rather than a * spinner running invisibly fast. */ /* ========================================================================= * VARIANTS — each one only re-points the four local variables. * ====================================================================== */ .omx-button--primary { --omx-button-bg: var(--omx-color-accent); --omx-button-bg-hover: var(--omx-color-accent-hover); --omx-button-bg-active: var(--omx-color-accent-active); --omx-button-fg: var(--omx-color-accent-text); --omx-button-border: var(--omx-color-accent); } .omx-button--secondary { --omx-button-bg: var(--omx-color-surface); --omx-button-bg-hover: var(--omx-color-control-hover); --omx-button-bg-active: var(--omx-color-control-active); } .omx-button--ghost { --omx-button-bg: transparent; --omx-button-bg-hover: var(--omx-color-control-hover); --omx-button-bg-active: var(--omx-color-control-active); --omx-button-fg: var(--omx-color-text-muted); --omx-button-border: transparent; } .omx-button--ghost:hover { --omx-button-fg: var(--omx-color-text); } .omx-button--ghost:active { --omx-button-fg: var(--omx-color-text); } .omx-button--danger { --omx-button-bg: var(--omx-color-danger-solid); --omx-button-bg-hover: color-mix(in srgb, var(--omx-color-danger-solid) 86%, black); --omx-button-bg-active: color-mix(in srgb, var(--omx-color-danger-solid) 74%, black); --omx-button-fg: var(--omx-color-danger-on); --omx-button-border: var(--omx-color-danger-solid); } .omx-button--link { --omx-button-bg: transparent; --omx-button-bg-hover: transparent; --omx-button-bg-active: transparent; --omx-button-fg: var(--omx-color-text-link); --omx-button-border: transparent; /* 🔴 IT LOOKS LIKE A LINK. IT IS STILL A TARGET. * `block-size: auto` is right and stays — it drops the base's HARD height so * the variant never grows a box it never had. But auto alone made the whole * control the height of its own text: MEASURED at 375px, **17.6 x 30px**, * under WCAG 2.5.8's hard floor of 24 x 24, on the one control in the set * that has no fill to aim at. * ⇒ `min-block-size` gives it the target without giving it a box: the * background and border are transparent, so the extra height is invisible * and clickable, and it follows --omx-control-height, which is the 44px * touch size below 768px. * * ⚠️ WHY THIS IS SAFE HERE AND WOULD NOT BE INLINE IN PROSE. The base is * `display: inline-flex`, so a 44px one sitting in a sentence would inflate * that line box. MEASURED across the eight gallery routes: two instances, * both standalone controls — a cluster of variants and the filter bar's * "Clear all" — and NEITHER has a text sibling. ⛔ If this variant is ever * put inside a sentence, the fix is a pseudo-element hit area, not this. * * ⚠️ The INLINE axis is still the label's own width: `padding-inline: 0` is * what makes it read as a link. Both instances measure 30px or wider, so * nothing fails today, but a two-character label would. * * 🔧 The `block-size: auto` that used to sit here is GONE. It existed only * to escape the base's hard height, and the base no longer has one — two * rules quietly claiming the same thing is how they drift apart. */ min-block-size: var(--omx-control-height); padding-inline: 0; font-weight: var(--omx-font-weight-regular); } .omx-button--link:hover { text-decoration: underline; } .omx-button--link:active { --omx-button-fg: var(--omx-color-accent-active); } /* ========================================================================= * SHAPES * ====================================================================== */ .omx-button--icon { inline-size: var(--omx-control-height); /* square */ padding-inline: 0; } .omx-button--icon .omx-button__icon { inline-size: var(--omx-size-icon-action); block-size: var(--omx-size-icon-action); } .omx-button--block { display: flex; inline-size: 100%; } /* An icon-only button below the touch minimum gets its hit area extended * rather than its visual size grown — a 24px compact toolbar stays compact * and stays operable. */ @media (pointer: coarse) { .omx-button--icon { position: relative; } .omx-button--icon::after { content: ""; position: absolute; inset: 50% auto auto 50%; translate: -50% -50%; min-inline-size: var(--omx-size-touch); min-block-size: var(--omx-size-touch); inline-size: 100%; block-size: 100%; } } /* Windows High Contrast strips background colours, so variants become * indistinguishable. Give every button a real border back. */ @media (forced-colors: active) { .omx-button { border-color: ButtonBorder; color: ButtonText; } .omx-button--primary { border-width: var(--omx-border-width-strong); } } @media print { .omx-button { display: none; } } } /* --- Primitives/Checkbox/Checkbox.css ------------------------------ */ /* ============================================================================= * L1 · Primitives · Checkbox * * The native input is kept and restyled with `appearance: none`, rather than * hidden behind a decorative span. That keeps it focusable, keeps it in the * accessibility tree, keeps form autofill and reset working, and means the * :checked / :indeterminate / :disabled states come from the browser instead of * from JavaScript that can fall out of sync with the DOM. * ========================================================================== */ @layer omx.component { .omx-checkbox { /* The