/* ============================================================================ TradeYoke theme · "Graft" ---------------------------------------------------------------------------- A selectable platform theme (claude.ai/design · "TradeYoke brand identity" → Graft direction): rugged, high-contrast, built for the van. Dark slate chrome, flat colour blocks, thick rails, big targets, uppercase labels. Glanceable in sunlight, sturdy with gloves on — the active job gets an amber outline. SELF-CONTAINED & CONDITIONAL: every rule is gated by [data-theme="graft"] on . Being a DARK theme, hosts also set data-bs-theme="dark" (see ThemeCatalog.IsDark) so Bootstrap's own components render dark. Three-layer cascade (UI-Design.html §3): Layer 1 [data-theme="graft"] → base tokens (below) Layer 2 [data-theme="graft"] [data-module]→ re-points primary per domain Layer 3 [data-theme="graft"] [data-tenant]→ tenant logo / brand / font ============================================================================ */ [data-theme="graft"] { color-scheme: dark; /* --- Domain palette source-of-truth (rails use the full brand hue) --- */ --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 (bright accents on slate) --- */ --ty-color-primary: #2c75d4; /* nudged from #2f7ce0: white label was 4.13:1, now 4.56:1 */ --ty-color-primary-ink: #5aa0f0; /* light accent — links, active text on dark */ --ty-color-primary-soft: #10243c; /* dark blue panel tint */ --ty-color-primary-contrast: #ffffff; --ty-color-accent: var(--ty-color-primary-ink); --ty-color-surface: #16202b; /* cards, nav, top bar (the slate) */ --ty-color-surface-2: #0f1720; /* page background (darker) */ --ty-color-surface-3: #23303d; /* inset controls */ --ty-color-text: #f2f6fa; --ty-color-text-muted: #9aa7b4; --ty-color-text-subtle: #7e8b99; --ty-color-border: #23303d; --ty-color-border-strong: #3a4c5e; /* --- Status: soft = dark tint, ink = readable colour (kv emphasis text). Flat solid badges for the board are applied separately below. --- */ --ty-color-success: #26b050; --ty-color-success-ink: #3fbf63; --ty-color-success-soft: #14331f; --ty-color-warning: #D98A1E; --ty-color-warning-ink: #e2a955; --ty-color-warning-soft: #3a2c10; --ty-color-danger: #e5484d; --ty-color-danger-ink: #ff6b6b; --ty-color-danger-soft: #3a1518; --ty-color-info: #5aa0f0; --ty-color-info-ink: #5aa0f0; --ty-color-info-soft: #10243c; /* --- Added by the theme-coverage audit: the dark counterparts of the semantic tokens components were already consuming. Before this, every one of them fell through to the component's inline LIGHT fallback, painting white/pale blocks on Graft's slate - the single biggest source of "one theme looks broken". --- */ --ty-color-primary-strong: #5aa0f0; --ty-color-surface-sunken: #0b131b; /* recessed well - deeper than the page bg */ --ty-color-surface-muted: #1b2732; --ty-color-surface-subtle: #131d27; --ty-color-border-soft: #1c2836; --ty-color-border-subtle: rgba(255, 255, 255, .08); --ty-color-success-border: #245c34; --ty-color-warning-border: #5c4620; --ty-color-danger-border: #5c2c2a; --ty-color-info-border: #1d3653; /* "ink" deliberately does NOT flip on the dark theme: it is the reading colour on surfaces that stay light-on-paper regardless of app chrome (crash screen, the rendered invoice/quote documents, the public quote page). Flipping it to white would put white text on white paper. 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: heavier on Graft, whose surfaces are already dark - a 12,18,28 scrim at .34 is nearly invisible over #0f1720, so the sheet would float with no separation. */ --ty-color-overlay: rgba(0, 0, 0, .68); --ty-color-overlay-rgb: 0, 0, 0; /* Shadows go pure black on the dark theme - a 12,18,28 shadow over #0f1720 is a LIGHTER smudge than the surface it is meant to lift off. */ --ty-shadow-rgb: 0, 0, 0; --ty-color-highlight-bg: #7a6410; /* dark amber block - the light #fff1a8 needs dark text */ --ty-color-highlight-fg: #fdf6d8; --ty-brand-hmrc: #00703c; --ty-brand-hmrc-contrast: #ffffff; --ty-brand-hmrc-ink: #4cb87f; /* lifted for AA on the slate card; the fill stays GOV green */ --ty-brand-hmrc-soft: #12281f; /* Tooltip inverts the other way on the dark theme: a pale bubble with dark text, so it still lifts off the page. */ --ty-color-tooltip-bg: #e8eef5; --ty-color-tooltip-fg: #0f1720; /* 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 (Graft is squarer / harder-edged) --- */ --ty-radius-control: 4px; --ty-radius-card: 4px; --ty-radius-panel: 6px; --ty-radius-pill: 3px; /* --- Typography (set heavy, wide-tracked uppercase labels via rules below) --- */ --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: 700; --ty-weight-bold: 800; --ty-line-body: 1.5; --ty-line-heading: 1.2; --ty-tracking-tight: 0.01em; --ty-tracking-wide: 0.14em; /* --- Elevation (flat: minimal, hard shadows) --- */ --ty-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --ty-shadow-md: 0 8px 24px -12px rgba(0, 0, 0, 0.6); --ty-shadow-lg: 0 24px 50px -24px rgba(0, 0, 0, 0.7); /* --- 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(90, 160, 240, 0.45); /* --- 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 (dark). data-bs-theme="dark" does the components; these keep the token-driven bits aligned. --- */ --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; unmapped they resolve to a dark secondary that's near-invisible on Graft's dark surfaces. Map to our semantic tokens so muted labels/help text stay legible (WCAG AA) app-wide in dark mode. */ --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 — Graft's dark manila-folder file manager. Same seam as Trusty (--ty-doc-*, --ty-file-{kind}-bg/-fg); values tuned for the dark slate surface (design-graft.css). --- */ --ty-doc-accent: #e2a955; --ty-doc-folder-bg: #2a2213; --ty-doc-folder-border: #4a3d1c; --ty-doc-folder-name: #ffffff; --ty-doc-folder-meta: #b39a5e; --ty-file-pdf-bg: #3a1f1e; --ty-file-pdf-fg: #f0776b; --ty-file-doc-bg: #12233b; --ty-file-doc-fg: #5aa0f0; --ty-file-sheet-bg: #12281a; --ty-file-sheet-fg: #3fbf63; --ty-file-video-bg: #241b3a; --ty-file-video-fg: #a98bee; --ty-file-image-bg: #10312f; --ty-file-image-fg: #3fc4c4; --ty-file-default-bg: #1b2732; --ty-file-default-fg: #9aa7b4; /* --- Access — Graft's dark treatment of the same seam as Trusty (--ty-seg-*, --ty-status-*, --ty-matrix-*, --ty-act-*, --ty-rolerow-*, --ty-accent-N-*). Same names, dark-tuned values. --- */ --ty-seg-bg: #0f1720; --ty-seg-border: #23303d; --ty-seg-fg: #7e8b99; --ty-seg-on-bg: #1E6FD9; --ty-seg-on-fg: #ffffff; --ty-seg-on-shadow: none; --ty-status-active-bg: #12281a; --ty-status-active-fg: #3fbf63; --ty-status-invited-bg: #2a2213; --ty-status-invited-fg: #e2a955; --ty-status-suspended-bg: #3a1f1e; --ty-status-suspended-fg: #f0776b; --ty-matrix-on-bg: #12281a; --ty-matrix-on-fg: #3fbf63; --ty-matrix-off-bg: #0f1720; --ty-matrix-off-fg: #3a4552; --ty-matrix-del-bg: #3a1f1e; --ty-matrix-del-fg: #f0776b; --ty-act-bg: #0f1720; --ty-act-border: #23303d; --ty-act-fg: #7e8b99; --ty-act-on-bg: #12281a; --ty-act-on-border: #245c34; --ty-act-on-fg: #3fbf63; --ty-act-del-bg: #3a1f1e; --ty-act-del-border: #5c2c2a; --ty-act-del-fg: #f0776b; --ty-rolerow-sel-bg: #1b2732; --ty-rolerow-sel-border: #1d3653; --ty-rolerow-sel-ring: 0 0 0 2px rgba(30, 111, 217, .4); --ty-rolerail-on: #5aa0f0; --ty-accent-1-bg: #12233b; --ty-accent-1-fg: #5aa0f0; --ty-accent-2-bg: #241b3a; --ty-accent-2-fg: #a98bee; --ty-accent-3-bg: #10312f; --ty-accent-3-fg: #3fc4c4; --ty-accent-4-bg: #12281a; --ty-accent-4-fg: #3fbf63; --ty-accent-5-bg: #2a2213; --ty-accent-5-fg: #e2a955; --ty-accent-6-bg: #23303d; --ty-accent-6-fg: #9aa7b4; } /* ---------------------------------------------------------------------------- Layer 2 · Domain module themes — dark soft tints per trade ---------------------------------------------------------------------------- */ [data-theme="graft"] [data-module="window-cleaning"] { --ty-color-primary: var(--ty-domain-window-cleaning); --ty-color-primary-ink: #5aa0f0; --ty-color-primary-soft: #10243c; --ty-color-primary-strong: #5aa0f0; --ty-color-accent: #5aa0f0; --ty-color-primary-contrast: #ffffff; /* 4.85:1 on this trade's fill */ } [data-theme="graft"] [data-module="gardening"] { --ty-color-primary: var(--ty-domain-gardening); --ty-color-primary-ink: #3fbf63; --ty-color-primary-soft: #113020; --ty-color-primary-strong: #3fbf63; --ty-color-accent: #3fbf63; --ty-color-primary-contrast: #0f1720; /* 5.26:1 on this trade's fill */ } [data-theme="graft"] [data-module="scaffolding"] { --ty-color-primary: var(--ty-domain-scaffolding); --ty-color-primary-ink: #e2a955; --ty-color-primary-soft: #33260f; --ty-color-primary-strong: #e2a955; --ty-color-accent: #e2a955; --ty-color-primary-contrast: #0f1720; /* 6.53:1 on this trade's fill */ } [data-theme="graft"] [data-module="electrician"] { --ty-color-primary: var(--ty-domain-electrician); --ty-color-primary-ink: #a78bfa; --ty-color-primary-soft: #241a3d; --ty-color-primary-strong: #a78bfa; --ty-color-accent: #a78bfa; --ty-color-primary-contrast: #ffffff; /* 5.70:1 on this trade's fill */ } [data-theme="graft"] [data-module="plumber"] { --ty-color-primary: var(--ty-domain-plumber); --ty-color-primary-ink: #22c3e6; --ty-color-primary-soft: #0d2b33; --ty-color-primary-strong: #22c3e6; --ty-color-accent: #22c3e6; --ty-color-primary-contrast: #0f1720; /* 4.90:1 on this trade's fill */ } [data-theme="graft"] [data-module="solar-installer"] { --ty-color-primary: var(--ty-domain-solar-installer); --ty-color-primary-ink: #fb923c; --ty-color-primary-soft: #3a2110; --ty-color-primary-strong: #fb923c; --ty-color-accent: #fb923c; --ty-color-primary-contrast: #0f1720; /* 5.07:1 on this trade's fill */ } [data-theme="graft"] [data-module="inspections"] { --ty-color-primary: var(--ty-domain-inspections); --ty-color-primary-ink: #f472b6; --ty-color-primary-soft: #3b1224; --ty-color-primary-strong: #f472b6; --ty-color-accent: #f472b6; --ty-color-primary-contrast: #ffffff; /* 6.1:1 on the rose fill */ } [data-theme="graft"] [data-module="surveys"] { --ty-color-primary: var(--ty-domain-surveys); --ty-color-primary-ink: #2dd4bf; --ty-color-primary-soft: #0f2b28; --ty-color-primary-strong: #2dd4bf; --ty-color-accent: #2dd4bf; --ty-color-primary-contrast: #ffffff; /* 5.9:1 on the teal fill */ } /* ============================================================================ Global element skin (references tokens only). ============================================================================ */ [data-theme="graft"] body { font-family: var(--ty-font-base); color: var(--ty-color-text); background-color: var(--ty-color-surface-2); } [data-theme="graft"] a, [data-theme="graft"] .btn-link { color: var(--ty-color-primary-ink); } /* --- Buttons · full design-system re-skin of Bootstrap .btn variants (UI-Design §8: primary / secondary / subtle / danger), token-driven and squared to Graft's radius. Rugged character: solid brand fills, bright light-accent hover with dark ink text. Only radius/weight/transition on the base (never padding — would override .btn-sm/lg). --- */ [data-theme="graft"] .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="graft"] .btn-primary { color: var(--ty-color-primary-contrast); background-color: var(--ty-color-primary); border-color: var(--ty-color-primary); } [data-theme="graft"] .btn-primary:hover, [data-theme="graft"] .btn-primary:active, [data-theme="graft"] .btn-primary:focus-visible { background-color: var(--ty-color-primary-ink); border-color: var(--ty-color-primary-ink); color: #0f1720; } [data-theme="graft"] .btn-secondary { color: var(--ty-color-text); background-color: var(--ty-color-surface-3); border-color: var(--ty-color-border-strong); } [data-theme="graft"] .btn-secondary:hover, [data-theme="graft"] .btn-secondary:active, [data-theme="graft"] .btn-secondary:focus-visible { color: var(--ty-color-text); background-color: var(--ty-color-border-strong); border-color: var(--ty-color-border-strong); } /* Subtle / ghost — outline that fills brand on interaction */ [data-theme="graft"] .btn-outline-primary { color: var(--ty-color-primary-ink); background-color: transparent; border-color: var(--ty-color-primary); } [data-theme="graft"] .btn-outline-primary:hover, [data-theme="graft"] .btn-outline-primary:active, [data-theme="graft"] .btn-outline-primary:focus-visible { color: #0f1720; background-color: var(--ty-color-primary-ink); border-color: var(--ty-color-primary-ink); } [data-theme="graft"] .btn-outline-secondary { color: var(--ty-color-text-muted); background-color: transparent; border-color: var(--ty-color-border-strong); } [data-theme="graft"] .btn-outline-secondary:hover, [data-theme="graft"] .btn-outline-secondary:active, [data-theme="graft"] .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="graft"] .btn-danger { color: #0f1720; background-color: var(--ty-color-danger); border-color: var(--ty-color-danger); } [data-theme="graft"] .btn-danger:hover, [data-theme="graft"] .btn-danger:active, [data-theme="graft"] .btn-danger:focus-visible { color: #0f1720; background-color: var(--ty-color-danger-ink); border-color: var(--ty-color-danger-ink); } [data-theme="graft"] .btn-outline-danger { color: var(--ty-color-danger-ink); background-color: transparent; border-color: var(--ty-color-danger); } [data-theme="graft"] .btn-outline-danger:hover, [data-theme="graft"] .btn-outline-danger:active, [data-theme="graft"] .btn-outline-danger:focus-visible { color: #0f1720; background-color: var(--ty-color-danger); border-color: var(--ty-color-danger); } /* Positive / caution — flat solid blocks (map to status tokens) */ [data-theme="graft"] .btn-success { color: #0f1720; background-color: var(--ty-color-success); border-color: var(--ty-color-success); } [data-theme="graft"] .btn-success:hover, [data-theme="graft"] .btn-success:active, [data-theme="graft"] .btn-success:focus-visible { color: #0f1720; background-color: var(--ty-color-success-ink); border-color: var(--ty-color-success-ink); } [data-theme="graft"] .btn-warning { color: #0f1720; background-color: var(--ty-color-warning); border-color: var(--ty-color-warning); } [data-theme="graft"] .btn-warning:hover, [data-theme="graft"] .btn-warning:active, [data-theme="graft"] .btn-warning:focus-visible { color: #0f1720; background-color: var(--ty-color-warning-ink); border-color: var(--ty-color-warning-ink); } [data-theme="graft"] .btn:disabled, [data-theme="graft"] .btn.disabled { opacity: 0.55; } [data-theme="graft"] .btn:focus, [data-theme="graft"] .btn:active:focus, [data-theme="graft"] .form-control:focus, [data-theme="graft"] .form-check-input:focus { box-shadow: var(--ty-focus-ring); } [data-theme="graft"] .valid.modified:not([type=checkbox]) { outline: 1px solid var(--ty-color-success); } [data-theme="graft"] .invalid { outline: 1px solid var(--ty-color-danger); } [data-theme="graft"] .validation-message { color: var(--ty-color-danger-ink); } /* ============================================================================ Scheduling board — Graft's rugged treatment (flat blocks, thick rails, uppercase, hard corners, amber outline on the active job). These override the token defaults in scheduling.css by higher specificity ([data-theme] + class). ============================================================================ */ [data-theme="graft"] .ty-sched-title, [data-theme="graft"] .ty-panel-title, [data-theme="graft"] .ty-jobcard-title { text-transform: uppercase; letter-spacing: 0.02em; } [data-theme="graft"] .ty-jobcard-title { font-weight: var(--ty-weight-bold); } [data-theme="graft"] .ty-sect-label { letter-spacing: 0.14em; } [data-theme="graft"] .ty-jobcard { border-radius: 4px; border-left-width: 5px; } [data-theme="graft"] .ty-jobcard:hover { box-shadow: var(--ty-shadow-md); } /* The Graft signature: active job wears an amber outline — no hunting. */ [data-theme="graft"] .ty-jobcard.selected { outline: 2px solid var(--ty-domain-scaffolding, #D98A1E); outline-offset: -1px; box-shadow: none; } [data-theme="graft"] .ty-jobchip { border-radius: 3px; border-left-width: 4px; } [data-theme="graft"] .ty-month-cell, [data-theme="graft"] .ty-week-cells, [data-theme="graft"] .ty-panel { border-radius: 4px; } /* Flat solid status badges (uppercase blocks) — distinct from the readable kv-emphasis ink/soft tokens above. */ [data-theme="graft"] .ty-pill { border-radius: 3px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: var(--ty-weight-bold); } [data-theme="graft"] .ty-pill.tone-success { background: #26b050; color: #0f1720; } [data-theme="graft"] .ty-pill.tone-warning { background: #D98A1E; color: #0f1720; } [data-theme="graft"] .ty-pill.tone-info { background: #1457b0; color: #ffffff; } [data-theme="graft"] .ty-pill.tone-neutral { background: #23303d; color: #9aa7b4; } [data-theme="graft"] .ty-pill.tone-danger { background: #e5484d; color: #0f1720; } /* Domain glyphs pop a touch brighter on the slate cards. */ [data-theme="graft"] .ty-jobcard-meta .ty-domain-glyph, [data-theme="graft"] .ty-jobchip .ty-domain-glyph { color: var(--ty-color-primary-ink); } @media (prefers-reduced-motion: reduce) { [data-theme="graft"] *, [data-theme="graft"] *::before, [data-theme="graft"] *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }