/* * COLOUR TOKENS — GENERATED FILE. DO NOT EDIT BY HAND. * * Source of truth: design-context/brand/COLOUR_SYSTEM.md (SCOPE §2). * Regenerate: pnpm tokens:build Verify in CI: pnpm tokens:check * * Every value below is read out of that document's §3 role tables. None was * chosen here. Editing this file directly will be reverted by the next * regeneration and will fail `tokens:check` in the meantime. * * BUILD AGAINST THE ROLE NAMES, NOT THE RAMP STEPS. COLOUR_SYSTEM.md §3: "A * screen that references `teal-500` directly has hard-coded a decision; a * screen that references `action-primary` has expressed an intent." The ramps * are deliberately NOT emitted here — there is no --colour-teal-500 to reach * for, which is what makes the semantic layer the only available interface. * * TWO RULES FROM THAT DOCUMENT THAT A TOKEN FILE CANNOT ENFORCE ON ITS OWN: * * 1. amber-500 (--colour-action-accent) is DECORATION. Never text, never a * state icon, never a meaningful border. It measures 2.28:1 on white. Text * on an amber fill is --colour-text-on-accent (#1B1C1A, 7.49:1) and never * white. * 2. --colour-border-hairline is 1.27:1 and is exempt from WCAG 1.4.11 ONLY * because it is decorative. The moment it is the only thing showing where * a control begins, it is identifying that control and 1.4.11 applies in * full. Inputs, selects, checkboxes and radios take --colour-border-control. */ :root { /* Surfaces — depth is these tonal steps plus a hairline, never a shadow */ --colour-surface-page: #F7F6F3; --colour-surface-raised: #FFFFFF; --colour-surface-sunken: #EFEEEA; --colour-surface-inverse: #1B1C1A; /* Text */ --colour-text-primary: #1B1C1A; --colour-text-secondary: #4F4D48; --colour-text-muted: #6B6862; --colour-text-disabled: #B4B1AA; --colour-text-link: #0D5C63; --colour-text-inverse: #F7F6F3; --colour-text-on-primary: #FFFFFF; --colour-text-on-accent: #1B1C1A; /* Interactive */ --colour-action-primary: #0D5C63; --colour-action-primary-hover: #0B4B51; --colour-action-primary-active: #093F44; --colour-action-accent: #E09F3E; --colour-action-accent-hover: #E5AE5C; --colour-focus-ring: #0D5C63; /* Borders — hairline is decorative; the other three carry meaning at 3:1 */ --colour-border-hairline: #E5E4E1; --colour-border-control: #8A8781; --colour-border-accent: #B87A1E; --colour-border-focus: #0D5C63; /* Status — each is always accompanied by an icon AND a text label (Rule 2). Colour never carries a status on its own. */ --colour-status-success-text: #2D6A4F; --colour-status-success-fill: #2D6A4F; --colour-status-success-tint: #E8F2EC; --colour-status-warning-text: #8F5F17; --colour-status-warning-fill: #E09F3E; --colour-status-warning-tint: #FBF4E9; --colour-status-error-text: #BA1A1A; --colour-status-error-fill: #BA1A1A; --colour-status-error-tint: #FDECEA; --colour-status-info-text: #1A5E8A; --colour-status-info-fill: #1A5E8A; --colour-status-info-tint: #E8F1F7; } /* * THE BASE LAYER — and it is the reason axe's `color-contrast` rule could be * re-enabled. * * Until this existed, tokens.css DEFINED colour and APPLIED none: every custom * property sat on `:root` and no element used one. axe measures rendered * colour, so an enabled contrast rule would have measured browser defaults and * reported a vacuous pass — the exact failure a11y.spec.ts's header warned * about in those words, and the reason the rule stayed off through two earlier * stylesheets. * * These two declarations are what make the page's own colours real: * `#1B1C1A` on `#F7F6F3` measures **15.82:1**. Derived, not chosen — * COLOUR_SYSTEM.md §3 defines `surface-page` as "the page canvas" and * `text-primary` as "body copy, headings, values". */ body { background-color: var(--colour-surface-page); color: var(--colour-text-primary); } /* * ============================================================================ * PROTOTYPE SCALE — defined here for the first time anywhere in MAJAL. * * Everything above this line is the generated colour block from * apps/web/src/app/tokens.css on master, copied verbatim (its source is * design-context/brand/COLOUR_SYSTEM.md §3). Everything below is new and is * the SCOPE deliverable this prototype exists to propose: a type scale, a * spacing scale, a radius scale, the elevation recipe, focus geometry and * motion. It goes back into design-context/ after review and becomes the * real system. * * THE RULE: every numeric size, space, radius, duration and weight in the * prototype resolves to a token defined in THIS file. A literal anywhere * else is a defect, and scripts/check-scale.mjs fails on it. Two named * exceptions, and only two: (1) the two breakpoint literals 48rem and 64rem * inside @media preludes, because a media query cannot read a custom * property; (2) @font-face descriptor blocks, which describe font files, not * the scale. * ============================================================================ */ :root { /* ---- Type: 8 sizes. No ninth. ---------------------------------------- */ --text-1: 0.75rem; /* 12 timestamps, counts, badge text */ --text-2: 0.875rem; /* 14 labels, helper/error text, meta, chips */ --text-3: 1rem; /* 16 body, inputs, buttons */ --text-4: 1.125rem; /* 18 lead paragraph, card title, prose sub-labels */ --text-5: 1.25rem; /* 20 pay on a card, section sub-heading */ --text-6: 1.5rem; /* 24 section heading, job title on mobile */ --text-7: 2rem; /* 32 job title on desktop, page heading */ --text-8: 2.5rem; /* 40 homepage headline, desktop only */ /* Two weights — the two subsets that exist. RTL_AND_BILINGUAL: weight alone carries too little in Arabic, so every hierarchy step pairs a weight change with a size step or a colour role. */ --weight-regular: 400; --weight-strong: 600; /* ---- Leading, per script. MEASURED against Alan Sans, the decided face — design-context/typography/README.md, "Per-script leading, measured, not estimated." Latin held at 1.5/1.25; Arabic body 2.24 and heading 1.99 are transcribed from there, not re-derived. The MECHANISM — an inherited custom property switched on [lang=ar] — is fonts.css's, face-independent, and unchanged. */ --leading-body-latin: 1.5; --leading-body-arabic: 2.24; --leading-heading-latin: 1.25; --leading-heading-arabic: 1.99; --leading-body: var(--leading-body-latin); --leading-heading: var(--leading-heading-latin); /* Long-form measure — Wise's ~760px, tightened slightly for Arabic. */ --measure-prose: 44rem; /* ---- Space: 4px base, 9 steps. ---------------------------------------- */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-9: 6rem; /* 96 */ --gutter: var(--space-4); /* page gutter; desktop override below */ --container: 75rem; /* 1200 */ /* ---- Radius: four values, varied by role, restrained. ------------------ ANTI_PATTERNS: "Radius should vary by element role and stay restrained." Buttons are NOT pills. */ --radius-1: 0.25rem; /* 4 buttons, inputs, selects, textareas */ --radius-2: 0.5rem; /* 8 cards, panels, popovers, sticky bars, toasts */ --radius-3: 0.75rem; /* 12 dialogs, the search panel, mobile sheets */ --radius-full: 9999px; /* status badges, chips, segmented, avatars */ /* ---- Lines. hairline is decorative (1.27:1); control carries meaning. -- */ --hairline: 1px; --line-control: 1px; /* ---- Focus geometry. Invented — OPEN_QUESTIONS names it undefined. ----- */ --focus-width: 2px; --focus-offset: 2px; /* ---- Motion. Invented — interaction/ is empty. Restraint over motion. -- */ --duration-1: 120ms; /* hover, press, chip toggle */ --duration-2: 200ms; /* dialog, sheet, toast */ --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); /* ---- Component dimensions. Every fixed dimension is one of these. ------ */ --control-height: 2.75rem; /* 44 — the touch target */ --control-height-sm: 2.25rem; /* 36 — compact controls in dense rows */ --icon-1: 1rem; --icon-2: 1.25rem; --icon-3: 1.5rem; --avatar-1: 2.5rem; --avatar-2: 3.5rem; --logo-height: 2rem; /* header lockup */ --logo-height-lg: 2.75rem; /* homepage / footer lockup */ --sticky-bar-height: 4.5rem; --rail-width: 16rem; --sheet-width: 22rem; --popover-max-height: 18rem; --field-max-width: 28rem; /* short fields: salary, date, select */ --card-min-width: 18rem; /* grid auto-fit floor for cards */ --skeleton-line: 0.875rem; --dialog-width: 30rem; --overlay-nav-text: var(--text-6); /* Jazeera mobile overlay: large, labels only */ /* The dialog scrim: surface-inverse at 48%. Nothing is read on it, so COLOUR_SYSTEM's alpha caveat (ratios do not carry over) does not bite. */ --scrim: rgb(27 28 26 / 0.48); --z-sticky: 10; --z-overlay: 20; --z-toast: 30; } /* Per-script leading — the fonts.css mechanism: switch a VALUE that body's own line-height declaration resolves, not line-height itself. */ [lang='ar'] { --leading-body: var(--leading-body-arabic); --leading-heading: var(--leading-heading-arabic); } /* Named exception 1 of 2: the breakpoint literal. */ @media (min-width: 48rem) { :root { --gutter: var(--space-6); } }