/* ═════════════════════════════════════════════════════════════ MIRROR DESIGN TOKENS — single source of truth Phase 0, 2026-08-18. See docs/mirror-web-parity-phase-0-*.md ── DIRECTION OF TRUTH ─────────────────────────────────────── Mirror Web Parity means bringing the FLUTTER MOBILE APP experience to the web. The Flutter apps are the product/UX source of truth: Flutter-user-app/mirror_user-master/lib/app/theme/ Flutter-user-app/mirror_user-master/lib/app/utils/constants.dart (the provider app's theme/ is byte-identical) The existing website is EVIDENCE OF WHAT EXISTS TODAY, not the source of truth for how the product should look. Every value in the APP-DERIVED section below is traced to a Flutter declaration. Values that exist only on the web are quarantined in the LEGACY section, labelled with why they are still here and what replaces them. They are not the target. This file is infrastructure for screen-by-screen parity. It is NOT a web redesign and NOT the final design direction. Loaded FIRST by all four layouts: resources/views/layouts/site/head.blade.php resources/views/layouts/portal/master-account.blade.php resources/views/layouts/portal/master-provider.blade.php resources/views/layouts/guest.blade.php ═════════════════════════════════════════════════════════════ */ :root { /* ═══════════════════════════════════════════════════════ APP-DERIVED — traced to the Flutter theme ═══════════════════════════════════════════════════════ */ /* ── Brand ─────────────────────────────────────────────── constants.dart:9 static const mainColor = Color(0xff711D43) Decision D1 (frozen). Retires four web values: #721d43 (site), #7d1747 (portal), #741b47 (blades), #9c2d6b. ──────────────────────────────────────────────────────── */ --mirror-brand: #711D43; --mirror-brand-rgb: 113, 29, 67; /* same value, channel form for rgba() */ --mirror-brand-dark: #55162F; /* derived: hover / active / gradient end */ --mirror-brand-light: #8C2A55; /* derived: subtle accents */ /* Phase 3 step B — the app's stat-card gradient END. constants.dart:29 mainColorGradient = [mainColor, Colors.black] Used by the provider dashboard stat card's RadialGradient (custom_statistics_card.dart:19-24). This is the app's literal Colors.black, NOT --mirror-brand-dark (which is a derived hover tone and would not reproduce the app's gradient). */ --mirror-brand-gradient-end: #000000; /* ── Text ──────────────────────────────────────────────── text_theme.dart — the app's type colours. ──────────────────────────────────────────────────────── */ --mirror-ink: #023047; /* :9,:11,:13 headlineSmall/titleLarge/titleMedium */ --mirror-body: #3B3B3B; /* :18 bodySmall */ --mirror-hint: #979797; /* constants.dart:13 gray1Color — field hint */ --mirror-text-on-brand: #FFFFFF; /* ── Surfaces & lines ──────────────────────────────────── theme.dart:11 scaffoldBackgroundColor: Colors.white constants.dart greys. ──────────────────────────────────────────────────────── */ --mirror-surface: #FFFFFF; /* page + card background */ --mirror-field-fill: #F5F5F5; /* constants.dart:17 lightGrayColor — the app fills fields grey and borderless (custom_text_form_field.dart) */ --mirror-line: #CBCBCB; /* constants.dart:11 grayColor */ --mirror-line-soft: #E5E5E5; /* constants.dart:15 gray2Color */ --mirror-line-strong: #BABABA; /* constants.dart:19 grayDark1Color */ --mirror-disabled: #D9D9D9; /* constants.dart:23 grayBackBtnColor */ --mirror-chrome-dark: #313131; /* constants.dart:25 bottomGreyColor */ /* Phase 3 step E. Material `Colors.blueGrey` (#607D8B), the border the app draws around the two time controls in the working-hours stepper (vertical_stepper.dart:647). It is deliberately OFF-SYSTEM in the app — the plan's own note is that these boxes are "notably not the app's own input theme" — and it is recorded here rather than inlined so the surface still resolves every colour through this file. Measures 4.42:1 on --mirror-surface, above the 3:1 WCAG 1.4.11 non-text threshold. */ --mirror-blue-grey: #607D8B; /* vertical_stepper.dart:647 */ /* ── Spacing ───────────────────────────────────────────── The apps size everything through flutter_screenutil against a 428x926 design. Dominant page gutter is 24.r → --mirror-space-5 (signin_screen.dart:215, home_view.dart:29, settings_view.dart:46). ──────────────────────────────────────────────────────── */ --mirror-space-1: 4px; --mirror-space-2: 8px; --mirror-space-3: 12px; /* standard form-field gap */ --mirror-space-4: 16px; /* card padding */ --mirror-space-5: 24px; /* PAGE GUTTER */ --mirror-space-6: 32px; --mirror-space-7: 48px; --mirror-space-8: 64px; /* ── Radius ────────────────────────────────────────────── input_decoration_theme.dart:17,23,29 → 12 on all four states CustomButton default → 50 (pill); dialogs → 8; exit dialog → 4 ──────────────────────────────────────────────────────── */ --mirror-radius-sm: 4px; --mirror-radius-md: 8px; --mirror-radius-lg: 12px; --mirror-radius-xl: 16px; /* Phase 1 screen (3) — employee avatar box. single_order_screen.dart:127-128 width: 50.w, height: 50.h (clipped by BorderRadius.circular(25) == a full circle on a 50px box). */ --mirror-avatar-employee: 50px; /* Phase 1 screen (1) — profile avatar box. Row B (2026-08-23). profile_view.dart:48-49 height/width: context.mq.size.width * 0.25, resolved against this layer's own 428x926 design frame: 428 * .25 = 107. The app expresses it as a PERCENTAGE OF SCREEN WIDTH, which is not portable to a desktop viewport, so the design-frame pixel value is used. Registered as an adaptation (ruling B4), not claimed as parity. */ --mirror-avatar-profile: 107px; --mirror-radius-pill: 999px; --mirror-radius-input: var(--mirror-radius-lg); /* 12px — apps */ --mirror-radius-panel: var(--mirror-radius-md); --mirror-radius-button: var(--mirror-radius-pill); /* apps: CustomButton is a pill */ --mirror-radius-button-dense: var(--mirror-radius-md); /* web adaptation: dense portal tables */ /* ── Type scale ────────────────────────────────────────── text_theme.dart at fontSizeFactor 1.0. ──────────────────────────────────────────────────────── */ --mirror-text-xs: 12px; /* bodySmall :18 */ --mirror-text-sm: 14px; /* bodyMedium :17 / labelLarge :5 / titleSmall :15 */ --mirror-text-md: 16px; /* titleMedium :13 */ --mirror-text-lg: 20px; /* titleLarge :11, app-bar title */ --mirror-text-xl: 24px; /* headlineSmall :9 */ --mirror-text-2xl: 34px; /* headlineMedium :7 */ --mirror-weight-regular: 400; --mirror-weight-medium: 500; /* titleMedium, titleSmall */ --mirror-weight-semibold: 600; /* titleLarge, bodyMedium */ --mirror-weight-bold: 700; /* labelLarge, headlineMedium, headlineSmall */ --mirror-weight-black: 800; --mirror-leading-tight: 1.2; --mirror-leading-body: 1.55; /* ── Semantic status ───────────────────────────────────── PARITY NOTE — a documented, deliberate exception. The apps do NOT have a status token system: they use raw Material presets (checkbox check #14D176; Colors.red for errorStyle and titleSmall; pending=Colors.orange and processing=Colors.blue in order.dart:250-266). That is weaker than what the web already has, and the discovery report concluded this is the one dimension that should flow WEB → APP rather than app → web. So: the app's colour INTENT is preserved (errors are red, success is green) while accessible bg/fg PAIRS are kept for banners and badges. This exception is recorded rather than silently inherited from the website. Phase 0 correction: before this file the portal's --portal-error-* aliased the WARNING honey pair, so the error role could not render red anywhere on the portal. The red below already shipped hard-coded at portal.css:2329 for cancelled badges; Phase 0 promotes it to the semantic role. ──────────────────────────────────────────────────────── */ --mirror-error: #F44336; /* app intent: Colors.red — inline/field errors */ --mirror-error-bg: #FEE2E2; --mirror-error-fg: #991B1B; /* accessible on --mirror-error-bg */ --mirror-success: #14D176; /* checkbox_theme.dart:14 checkColor */ --mirror-success-bg: #DFF4E8; --mirror-success-fg: #1F7450; --mirror-warning-bg: #FFF7E7; --mirror-warning-fg: #9B6918; --mirror-info-bg: #E2F0F7; --mirror-info-fg: #1F4A6B; /* ── App status palette — Row D (2026-08-23), rulings D5 + D6 ────── The user app paints the booking status pill with a SOLID colour and a WHITE label (order.dart:250-265 getStatusColor, single_order_screen.dart :244-255), and outlines its cancel button in the same red (single_order_screen.dart:223-225). These four are the Flutter FRAMEWORK Material constants the app uses directly — `Colors.green/orange/red/blue` — not values this project chose. The fifth branch of getStatusColor is `Constants.gray1Color`, which this layer already carries as --mirror-hint, so it is aliased rather than duplicated. ⚠️ These are ported under an explicit ruling that Flutter's appearance wins. White-on-fill contrast FAILS WCAG AA on several of them; that is measured and registered as an open finding, NOT corrected here. */ --mirror-app-green: #4CAF50; /* Colors.green — 'complete' */ --mirror-app-orange: #FF9800; /* Colors.orange — 'pending' */ --mirror-app-red: #F44336; /* Colors.red — 'cancel' */ --mirror-app-blue: #2196F3; /* Colors.blue — 'processing'/'in_progress' */ --mirror-app-status-unmapped: var(--mirror-hint); /* gray1Color — the else branch */ /* ── Elevation ───────────────────────────────────────────── */ --mirror-shadow-sm: 0 3px 12px rgba(18, 32, 51, .05); --mirror-shadow-md: 0 10px 28px rgba(18, 32, 51, .07); --mirror-shadow-lg: 0 24px 70px rgba(43, 22, 35, .12); /* ═══════════════════════════════════════════════════════ LEGACY — web-only values, PENDING MIGRATION Not the target. Each is here only so existing rules keep resolving while surfaces are migrated screen by screen. ═══════════════════════════════════════════════════════ */ /* Operational neutrals introduced by the web's Round 10.59 "admin-inspired" portal skin. They have NO counterpart in the Flutter apps, whose scaffold is plain white. Retained because the live portal depends on them (189 usages) and because the skin was an explicit product choice — but the parity target is the app palette above, and reconciling the two is an open product question (see decisions doc addendum A2), not settled by this file. */ --mirror-legacy-canvas: #F4F6FA; --mirror-legacy-canvas-soft: #F8FAFC; --mirror-legacy-line: #DFE5EE; --mirror-legacy-ink: #122033; --mirror-legacy-muted: #667085; --mirror-legacy-navy: #12243B; /* Warm "Atelier OS" surfaces (Rounds 10.57–10.58), largely superseded by the 10.59 skin. No app counterpart. */ --mirror-legacy-cream: #FFF8F1; --mirror-legacy-pearl: #FBF4EF; --mirror-legacy-brand-rose: #C66B8F; --mirror-legacy-tint: #FFF0F5; --mirror-legacy-tint-2: #F6D9E4; --mirror-gold: #D4A574; --mirror-legacy-gold-soft: #F2C06B; /* ═══════════════════════════════════════════════════════ TYPOGRAPHY FAMILIES — DEFERRED, deliberately not resolved ═══════════════════════════════════════════════════════ PARITY TARGET: the apps ship ONE typeface for both languages — family "NeoSans", six weights, from NeoSansArabic*.ttf (pubspec.yaml fonts block). theme.dart:22 fontFamily: 'NeoSans'. Step 0.4 is gated on TWO open questions: 1. LICENCE — Neo Sans Arabic is a commercial Monotype face. A licence covering embedding in a compiled mobile binary does not automatically permit web @font-face serving. 2. PRODUCT — the portals currently run Inter by explicit decision (Round 10.59). Moving them to the app typeface is a parity call that overrides that decision, and is Dr. Khaled's to make, not engineering's. Until both are answered, these variables carry TODAY'S PER- SURFACE STACKS so nothing re-renders. They are the current state, NOT the target. When resolved, parity is a one-line change here. ─────────────────────────────────────────────────────── */ --mirror-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* legacy: portal */ --mirror-font-display: Georgia, "Times New Roman", serif; /* legacy: portal headings */ --mirror-font-site: "Sora", sans-serif; /* legacy: marketing site */ --mirror-font-site-display: "Marcellus", serif; /* legacy: marketing site */ /* --mirror-font-target: 'NeoSans' ← activated when 0.4 unblocks */ }