/* ============================================================================ TradeYoke theme · "Trusty" ---------------------------------------------------------------------------- A selectable platform theme (claude.ai/design · "TradeYoke brand identity" → Trusty direction): clean, calm, spec-true SaaS. Neutral Helvetica, led by window-cleaning blue, with the multi-domain colour system layered on top. SELF-CONTAINED & CONDITIONAL: every rule is gated by [data-theme="trusty"] on . With no data-theme (or data-theme="none") NONE of this applies and the app keeps its vanilla template styling. Link this file from every host (it self-activates); the shell reskin lives (theme-gated) in the shared MainLayout/NavMenu scoped CSS. Three-layer cascade (UI-Design.html §3): Layer 1 [data-theme="trusty"] → base tokens (below) Layer 2 [data-theme="trusty"] [data-module]→ re-points primary per domain Layer 3 [data-theme="trusty"] [data-tenant]→ tenant logo / brand / font ============================================================================ */ [data-theme="trusty"] { /* --- Domain palette source-of-truth (mirrors ModuleTheme.PrimaryColor) --- */ --ty-domain-window-cleaning: #1E6FD9; --ty-domain-gardening: #2E9E4F; --ty-domain-scaffolding: #D98A1E; --ty-domain-electrician: #7C3AED; --ty-domain-plumber: #0891B2; --ty-domain-solar-installer: #EA580C; --ty-domain-inspections: #BE185D; --ty-domain-surveys: #0F766E; /* --- Colour · semantic (brand blue leads) --- */ --ty-color-primary: #1E6FD9; --ty-color-primary-ink: #1457b0; --ty-color-primary-soft: #eaf2fd; --ty-color-primary-contrast: #ffffff; --ty-color-accent: var(--ty-color-primary-ink); --ty-color-surface: #ffffff; --ty-color-surface-2: #f6f8fa; --ty-color-surface-3: #eef1f4; --ty-color-text: #1c2128; --ty-color-text-muted: #57606a; --ty-color-text-subtle: #8a95a1; --ty-color-border: #e7ebf0; --ty-color-border-strong: #d0d7de; /* --- Status (base / on-text / soft surface) --- */ --ty-color-success: #26b050; --ty-color-success-ink: #1a7f37; --ty-color-success-soft: #e6f6ea; --ty-color-warning: #D98A1E; --ty-color-warning-ink: #9a5b00; --ty-color-warning-soft: #fdf1dd; --ty-color-danger: #e50000; --ty-color-danger-ink: #b32121; --ty-color-danger-soft: #fdecec; --ty-color-info: #1457b0; --ty-color-info-ink: #1457b0; --ty-color-info-soft: #eaf2fd; /* --- Added by the theme-coverage audit: semantic tokens components were already consuming but no layer defined, so they silently fell back to whatever light literal the component wrote inline (fine on Trusty, broken on Graft). --- */ --ty-color-primary-strong: #1457b0; --ty-color-surface-sunken: #f3f5f8; --ty-color-surface-muted: #eef1f5; --ty-color-surface-subtle: #f6f8fa; --ty-color-border-soft: #f1f4f7; --ty-color-border-subtle: rgba(0, 0, 0, .06); --ty-color-success-border: #bfe3cc; --ty-color-warning-border: #f2d9a4; --ty-color-danger-border: #f4d3cf; --ty-color-info-border: #cfe0f7; /* "ink" stays dark in BOTH themes: it is the reading colour on surfaces that are light-on-paper whatever the app chrome does (crash screen, rendered invoice/quote documents, the public quote page). Use --ty-color-text for normal app text. */ --ty-color-ink: #1b2733; --ty-color-ink-muted: #55636f; --ty-color-text-onink: #ffffff; --ty-color-text-onink-muted: rgba(255, 255, 255, .72); /* Scrim behind sheets / drawers / modals. -rgb is the bare triplet, for components that need their own opacity: rgba(var(--ty-color-overlay-rgb), .34). */ --ty-color-overlay: rgba(12, 18, 28, .55); --ty-color-overlay-rgb: 12, 18, 28; --ty-shadow-rgb: 12, 18, 28; /* Search-result highlight (the in document content search). Needs BOTH halves as tokens: a #fff1a8 highlight with `color: inherit` puts the dark theme's near-white body text on pale yellow at ~1.2:1 - unreadable. */ --ty-color-highlight-bg: #fff1a8; --ty-color-highlight-fg: #1c2128; /* Third-party brand marks. The solid fill is the brand's own colour and must not drift; -ink is the readable-on-our-surface variant, which DOES change per theme (GOV.UK green on Graft's #16202b card is ~2.3:1 and fails WCAG AA). */ --ty-brand-hmrc: #00703c; --ty-brand-hmrc-contrast: #ffffff; --ty-brand-hmrc-ink: #00703c; --ty-brand-hmrc-soft: #e6f0ea; /* Tooltip / hint bubble. INVERTED against the page by design (a dark bubble on a light app, a light bubble on a dark one) - a hardcoded #1f2937 bubble sits on Graft's #0f1720 page with almost no edge, so the hint reads as a smudge rather than a popover. */ --ty-color-tooltip-bg: #1f2937; --ty-color-tooltip-fg: #ffffff; /* Safe-area insets (notch / home indicator) - real values on iOS + Android. */ --ty-safe-top: env(safe-area-inset-top, 0px); --ty-safe-bottom: env(safe-area-inset-bottom, 0px); --ty-safe-left: env(safe-area-inset-left, 0px); --ty-safe-right: env(safe-area-inset-right, 0px); /* --- Spacing --- */ --ty-space-xs: 4px; --ty-space-sm: 8px; --ty-space-md: 12px; --ty-space-lg: 16px; --ty-space-xl: 24px; --ty-space-2xl: 32px; --ty-space-3xl: 48px; /* --- Radius --- */ --ty-radius-control: 8px; --ty-radius-card: 12px; --ty-radius-panel: 16px; --ty-radius-pill: 999px; /* --- Typography --- */ --ty-font-base: 'Helvetica Neue', Helvetica, Arial, sans-serif; --ty-font-mono: ui-monospace, Menlo, Consolas, monospace; --ty-font-xs: 12px; --ty-font-sm: 14px; --ty-font-base-size: 16px; --ty-font-lg: 20px; --ty-font-xl: 24px; --ty-font-2xl: 32px; --ty-weight-regular: 400; --ty-weight-medium: 500; --ty-weight-semibold: 600; --ty-weight-bold: 700; --ty-line-body: 1.5; --ty-line-heading: 1.25; --ty-tracking-tight: -0.02em; --ty-tracking-wide: 0.12em; /* --- Elevation --- */ --ty-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --ty-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.07), 0 12px 30px -18px rgba(0, 0, 0, 0.22); --ty-shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.08), 0 30px 60px -30px rgba(0, 0, 0, 0.40); /* --- Motion --- */ --ty-motion-micro: 120ms; --ty-motion-standard: 200ms; --ty-ease: cubic-bezier(0.2, 0, 0, 1); /* --- Focus --- */ --ty-focus-ring: 0 0 0 0.2rem rgba(30, 111, 217, 0.35); /* --- Z-index --- */ --ty-z-nav: 100; --ty-z-sticky: 200; --ty-z-dropdown: 300; --ty-z-modal: 400; --ty-z-toast: 500; /* --- Bridge to Bootstrap so its components inherit the theme --- */ --bs-primary: var(--ty-color-primary); --bs-body-color: var(--ty-color-text); --bs-body-bg: var(--ty-color-surface-2); --bs-border-color: var(--ty-color-border); /* Muted text: Bootstrap's .text-muted/.text-secondary read these; map to our semantic tokens so muted labels/help text stay legible in every theme (esp. on the dark Graft surfaces). */ --bs-secondary-color: var(--ty-color-text-muted); --bs-tertiary-color: var(--ty-color-text-subtle); --bs-emphasis-color: var(--ty-color-text); /* --- Document Library — the manila-folder file manager (docs/UI-Design.html §Documents). --ty-doc-accent is the amber "manila" accent (folder-body top rule, active tab icon, folder glyph); --ty-doc-folder-* styles the manila sub-folder tile/row; --ty-file-{kind}-bg/-fg give each file type its own colour-coded icon square + type badge (never raw hex in components — only these tokens). --- */ --ty-doc-accent: #D98A1E; --ty-doc-folder-bg: #faf1dc; --ty-doc-folder-border: #ecd9a9; --ty-doc-folder-name: #1c2128; --ty-doc-folder-meta: #796d4e; /* was #9a8b63 = 2.99:1 on the manila tile; now 4.54:1 */ --ty-file-pdf-bg: #fdeceb; --ty-file-pdf-fg: #c23e3b; /* was #d64541 = 3.84:1; now 4.54:1 */ --ty-file-doc-bg: #eef4fd; --ty-file-doc-fg: #1457b0; --ty-file-sheet-bg: #e8f5ec; --ty-file-sheet-fg: #1f7a38; --ty-file-video-bg: #f0ecfb; --ty-file-video-fg: #7658c9; /* was #7a5bd0 = 4.27:1; now 4.51:1 */ --ty-file-image-bg: #e4f4f4; --ty-file-image-fg: #137a7a; /* was #178f8f = 3.46:1; now 4.53:1 */ --ty-file-default-bg: #eef1f4; --ty-file-default-fg: #57606a; /* --- Access (docs/UI-Design.html "Team & Access" spec) — segmented tab control, member status badges, permission-matrix chips, the editable "act" toggle, and the role-rail selection state. The accent swatches (--ty-accent-N-bg/-fg) are picked by a stable hash of a role/member name (TradeYoke.Modules.Shared.Access.RoleAccent) — our roles/members are tenant-defined, not the fixed names the source design hardcodes. --- */ --ty-seg-bg: #eceef1; --ty-seg-border: transparent; --ty-seg-fg: #57606a; --ty-seg-on-bg: #ffffff; --ty-seg-on-fg: #1c2128; --ty-seg-on-shadow: 0 1px 3px rgba(0, 0, 0, .14); --ty-status-active-bg: #e6f6ea; --ty-status-active-fg: #1a7f37; --ty-status-invited-bg: #fdf1dd; --ty-status-invited-fg: #9a5b00; --ty-status-suspended-bg: #fdecea; --ty-status-suspended-fg: #c0392b; --ty-matrix-on-bg: #e6f6ea; --ty-matrix-on-fg: #1e8f4e; --ty-matrix-off-bg: #f4f5f7; --ty-matrix-off-fg: #cbd2da; --ty-matrix-del-bg: #fdecea; --ty-matrix-del-fg: #c0392b; --ty-act-bg: #f4f6f9; --ty-act-border: #e4e8ee; --ty-act-fg: #8a95a1; --ty-act-on-bg: #eef8f1; --ty-act-on-border: #a9dcb8; --ty-act-on-fg: #1e8f4e; --ty-act-del-bg: #fdecea; --ty-act-del-border: #f4c9c4; --ty-act-del-fg: #c0392b; --ty-rolerow-sel-bg: #ffffff; --ty-rolerow-sel-border: #cfe0f7; --ty-rolerow-sel-ring: 0 0 0 3px #eaf2fd, 0 6px 16px -12px rgba(30, 111, 217, .5); --ty-rolerail-on: #1E6FD9; --ty-accent-1-bg: #eaf2fd; --ty-accent-1-fg: #1457b0; --ty-accent-2-bg: #f0ecfb; --ty-accent-2-fg: #6b46c1; --ty-accent-3-bg: #e4f4f4; --ty-accent-3-fg: #0f6b6b; --ty-accent-4-bg: #e8f5ec; --ty-accent-4-fg: #1f7a38; --ty-accent-5-bg: #fbf0db; --ty-accent-5-fg: #9a5b00; --ty-accent-6-bg: #f1f4f7; --ty-accent-6-fg: #57606a; } /* ---------------------------------------------------------------------------- Layer 2 · Domain module themes — re-point primary within a [data-module] scope ---------------------------------------------------------------------------- */ [data-theme="trusty"] [data-module="window-cleaning"] { --ty-color-primary: var(--ty-domain-window-cleaning); --ty-color-primary-ink: #1457b0; --ty-color-primary-soft: #eef4fd; --ty-color-primary-strong: #1457b0; --ty-color-accent: #1457b0; --ty-color-primary-contrast: #ffffff; /* 4.85:1 on this trade's fill */ } [data-theme="trusty"] [data-module="gardening"] { --ty-color-primary: var(--ty-domain-gardening); --ty-color-primary-ink: #1f7a38; --ty-color-primary-soft: #e8f5ec; --ty-color-primary-strong: #1f7a38; --ty-color-accent: #1f7a38; --ty-color-primary-contrast: #0f1720; /* 5.26:1 on this trade's fill */ } [data-theme="trusty"] [data-module="scaffolding"] { --ty-color-primary: var(--ty-domain-scaffolding); --ty-color-primary-ink: #a5670f; --ty-color-primary-soft: #fbf0db; --ty-color-primary-strong: #a5670f; --ty-color-accent: #a5670f; --ty-color-primary-contrast: #0f1720; /* 6.53:1 on this trade's fill */ } [data-theme="trusty"] [data-module="electrician"] { --ty-color-primary: var(--ty-domain-electrician); --ty-color-primary-ink: #5b21b6; --ty-color-primary-soft: #f1ebfd; --ty-color-primary-strong: #5b21b6; --ty-color-accent: #5b21b6; --ty-color-primary-contrast: #ffffff; /* 5.70:1 on this trade's fill */ } [data-theme="trusty"] [data-module="plumber"] { --ty-color-primary: var(--ty-domain-plumber); --ty-color-primary-ink: #075e73; --ty-color-primary-soft: #e2f4f8; --ty-color-primary-strong: #075e73; --ty-color-accent: #075e73; --ty-color-primary-contrast: #0f1720; /* 4.90:1 on this trade's fill */ } [data-theme="trusty"] [data-module="solar-installer"] { --ty-color-primary: var(--ty-domain-solar-installer); --ty-color-primary-ink: #b4460b; --ty-color-primary-soft: #fdeee3; --ty-color-primary-strong: #b4460b; --ty-color-accent: #b4460b; --ty-color-primary-contrast: #0f1720; /* 5.07:1 on this trade's fill */ } [data-theme="trusty"] [data-module="inspections"] { --ty-color-primary: var(--ty-domain-inspections); --ty-color-primary-ink: #9d174d; --ty-color-primary-soft: #fce7f3; --ty-color-primary-strong: #9d174d; --ty-color-accent: #9d174d; --ty-color-primary-contrast: #ffffff; /* 6.1:1 on the rose fill */ } [data-theme="trusty"] [data-module="surveys"] { --ty-color-primary: var(--ty-domain-surveys); --ty-color-primary-ink: #0f5f59; --ty-color-primary-soft: #e6f4f1; --ty-color-primary-strong: #0f5f59; --ty-color-accent: #0f5f59; --ty-color-primary-contrast: #ffffff; /* 5.9:1 on the teal fill */ } /* ---------------------------------------------------------------------------- Layer 3 · Tenant brand (injected at runtime onto [data-tenant]). Hooks: --ty-color-brand, --ty-font-base, --ty-logo. Tints, never breaks. ---------------------------------------------------------------------------- */ /* ============================================================================ Global element skin — references tokens only. ============================================================================ */ [data-theme="trusty"] body { font-family: var(--ty-font-base); color: var(--ty-color-text); background-color: var(--ty-color-surface-2); } [data-theme="trusty"] a, [data-theme="trusty"] .btn-link { color: var(--ty-color-primary); } /* --- Buttons · full design-system re-skin of Bootstrap .btn variants (UI-Design §8: primary / secondary / subtle / danger). Token-driven, so every domain [data-module] re-points them too; mirrors the schedule board's .ty-btn-primary so buttons read the same everywhere. Only radius/weight/transition on the base (never padding — that would override .btn-sm/.btn-lg via higher specificity). --- */ [data-theme="trusty"] .btn { border-radius: var(--ty-radius-control); font-weight: var(--ty-weight-semibold); transition: background-color var(--ty-motion-micro) var(--ty-ease), border-color var(--ty-motion-micro) var(--ty-ease), color var(--ty-motion-micro) var(--ty-ease), box-shadow var(--ty-motion-micro) var(--ty-ease); } [data-theme="trusty"] .btn-primary { color: var(--ty-color-primary-contrast); background-color: var(--ty-color-primary); border-color: var(--ty-color-primary); } [data-theme="trusty"] .btn-primary:hover, [data-theme="trusty"] .btn-primary:active, [data-theme="trusty"] .btn-primary:focus-visible { color: var(--ty-color-primary-contrast); background-color: var(--ty-color-primary-ink); border-color: var(--ty-color-primary-ink); } [data-theme="trusty"] .btn-secondary { color: var(--ty-color-text); background-color: var(--ty-color-surface); border-color: var(--ty-color-border-strong); } [data-theme="trusty"] .btn-secondary:hover, [data-theme="trusty"] .btn-secondary:active, [data-theme="trusty"] .btn-secondary:focus-visible { color: var(--ty-color-text); background-color: var(--ty-color-surface-3); border-color: var(--ty-color-border-strong); } /* Subtle / ghost — outline that fills brand on interaction */ [data-theme="trusty"] .btn-outline-primary { color: var(--ty-color-primary); background-color: transparent; border-color: var(--ty-color-primary); } [data-theme="trusty"] .btn-outline-primary:hover, [data-theme="trusty"] .btn-outline-primary:active, [data-theme="trusty"] .btn-outline-primary:focus-visible { color: var(--ty-color-primary-contrast); background-color: var(--ty-color-primary); border-color: var(--ty-color-primary); } [data-theme="trusty"] .btn-outline-secondary { color: var(--ty-color-text-muted); background-color: transparent; border-color: var(--ty-color-border-strong); } [data-theme="trusty"] .btn-outline-secondary:hover, [data-theme="trusty"] .btn-outline-secondary:active, [data-theme="trusty"] .btn-outline-secondary:focus-visible { color: var(--ty-color-text); background-color: var(--ty-color-surface-3); border-color: var(--ty-color-border-strong); } /* Destructive */ [data-theme="trusty"] .btn-danger { color: #fff; background-color: var(--ty-color-danger); border-color: var(--ty-color-danger); } [data-theme="trusty"] .btn-danger:hover, [data-theme="trusty"] .btn-danger:active, [data-theme="trusty"] .btn-danger:focus-visible { color: #fff; background-color: var(--ty-color-danger-ink); border-color: var(--ty-color-danger-ink); } [data-theme="trusty"] .btn-outline-danger { color: var(--ty-color-danger); background-color: transparent; border-color: var(--ty-color-danger); } [data-theme="trusty"] .btn-outline-danger:hover, [data-theme="trusty"] .btn-outline-danger:active, [data-theme="trusty"] .btn-outline-danger:focus-visible { color: #fff; background-color: var(--ty-color-danger); border-color: var(--ty-color-danger); } /* Positive / caution — map to status tokens */ [data-theme="trusty"] .btn-success { color: #fff; background-color: var(--ty-color-success); border-color: var(--ty-color-success); } [data-theme="trusty"] .btn-success:hover, [data-theme="trusty"] .btn-success:active, [data-theme="trusty"] .btn-success:focus-visible { color: #fff; background-color: var(--ty-color-success-ink); border-color: var(--ty-color-success-ink); } [data-theme="trusty"] .btn-warning { color: #fff; background-color: var(--ty-color-warning); border-color: var(--ty-color-warning); } [data-theme="trusty"] .btn-warning:hover, [data-theme="trusty"] .btn-warning:active, [data-theme="trusty"] .btn-warning:focus-visible { color: #fff; background-color: var(--ty-color-warning-ink); border-color: var(--ty-color-warning-ink); } [data-theme="trusty"] .btn:disabled, [data-theme="trusty"] .btn.disabled { opacity: 0.55; } [data-theme="trusty"] .btn:focus, [data-theme="trusty"] .btn:active:focus, [data-theme="trusty"] .form-control:focus, [data-theme="trusty"] .form-check-input:focus { box-shadow: var(--ty-focus-ring); } [data-theme="trusty"] .valid.modified:not([type=checkbox]) { outline: 1px solid var(--ty-color-success); } [data-theme="trusty"] .invalid { outline: 1px solid var(--ty-color-danger); } [data-theme="trusty"] .validation-message { color: var(--ty-color-danger); } @media (prefers-reduced-motion: reduce) { [data-theme="trusty"] *, [data-theme="trusty"] *::before, [data-theme="trusty"] *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }