/* ============================================================================= Light theme. Swapped against dark.css by RevelationContext.tsx:38, which rewrites .href (declared in public/index.html:19) and sets documentElement[data-theme]. Both files must declare the same property names or a mode gets its values from a fallback instead of a token — see §1 below. Three groups: 1. Kendo properties the packaged theme does not emit at :root. 2. --ticket-* — the app's own long-standing palette. 3. --rev-* — the 2026 design tokens. See docs/claude/plans/rev-design-tokens.md. !important rule: group 1 uses it only where the packaged Kendo theme also declares the property and would otherwise win. Groups 2 and 3 are the app's own names, nothing else declares them, so they never need it. Do not add !important by reflex — it is the reason overriding anything here is hard. ============================================================================= */ :root .revelation-helpdesk { /* --------------------------------------------------------------------------- 1. Kendo properties with no light-mode definition Verified against node_modules/@progress/kendo-theme-default/dist/ default-ocean-blue-a11y.css: the packaged theme does NOT declare these at :root, and dark.css did. So until now light mode resolved them through `var(--x, fallback)` and every author picked their own fallback — which is how six different accent greens and four different border greys accumulated without anyone noticing, because dark mode looked correct throughout. Each value below is the fallback the code already uses most often, so filling these in is a visual no-op. Changing the look is a separate, reviewable decision; this file only makes the values nameable. The properties the packaged theme DOES declare (--kendo-color-primary, -info, -success, -warning, -error, -border, -surface, -on-app-surface, -base-hover) are deliberately left alone. They are a11y-tuned in the ocean-blue-a11y build, and dark.css replaces them with Bootstrap hexes — the two are not perceptually matched pairs. See decision 5 in rev-design-tokens.md. --------------------------------------------------------------------------- */ --kendo-component-bg: #ffffff; /* 34 reads */ --kendo-component-text: #000000; /* 5 reads */ --kendo-subtle-text: #6b7480; /* 36 reads */ --kendo-base-bg: #ffffff; /* 8 reads */ --kendo-base-text: #000000; /* 8 reads */ --kendo-hover-bg: rgba(0, 0, 0, 0.05); /* 13 reads */ --kendo-hover-text: #000000; --kendo-button-bg: #ffffff; --kendo-button-text: #000000; --kendo-link-text: #535353; --kendo-disabled-text: #8a8a8a; --kendo-input-placeholder-text: #6b7480; /* Read as an accent palette, not as chart series — TicketStoryLine2/3 and TicketDetailsPage.scss use --kendo-series-d as a green. Values are the dominant fallbacks already in the code. */ --kendo-series-a: #0d6efd; --kendo-series-b: #828282; --kendo-series-c: #697cc1; --kendo-series-d: #73a913; --kendo-series-e: #edc04d; --kendo-series-f: #d14836; /* --------------------------------------------------------------------------- 2. --ticket-* — the app's own palette --------------------------------------------------------------------------- */ --kendo-body-text: #000 !important; --kendo-body-bg: #fff !important; --kendo-color-on-base: #000 !important; --kendo-color-on-app-surface: #000 !important; --ticket-grid-header-bg: #e8e8e8; --ticket-header-bg: #e8e8e8; --ticket-group-header-bg: #e8e8e8; --ticket-monitor-group-header-bg: #e8e8e8 !important; --revelation-ticket-header: #ddd !important; --ticket-panelbar-header-bg: #c4c4c4 !important; --ticket-panelbar-header-text: #000000; --ticket-panelbar-bg: #e8e8e8 !important; /* Previously light-only-by-omission. 37 reads, all resolving to #c7c7c780. */ --ticket-section-border: #c7c7c780; --ticket-toolbar-button-bg: #bfbfbf; --ticket-info-bg: #969595; --ticket-action-header: #efecec; /* Ticket state — the one palette in the codebase that was already a complete, matched, light+dark token set. Unchanged. */ --ticket-state-red-bg: #F2A6A0 !important; --ticket-state-red-text: #B8473D !important; --ticket-state-blue-bg: #C5CBE4 !important; --ticket-state-blue-text: #4B5E8A !important; --ticket-state-green-bg: #C7D9A8 !important; --ticket-state-green-text: #5D7635 !important; --ticket-state-yellow-bg: #F6E2A4 !important; --ticket-state-yellow-text: #A67C2E !important; --ticket-state-gray-bg: unset; /* --------------------------------------------------------------------------- 3. --rev-* — the 2026 design tokens Kendo's properties describe Kendo's controls. They have no name for a card, a gutter, or an AD-sync lock, so those get their own namespace. Every value below is taken from shipped 2026 code — the homepage, the nav bar, the view banner and the user profile page — not invented. Provenance for each is in docs/claude/plans/rev-design-tokens.md. --------------------------------------------------------------------------- */ /* -- surfaces. Two backgrounds and no more: a page and a card. Everything else is a tint of one of them. (contact-profile-design-handoff.md §5) */ --rev-surface-page: #f4f5f7; /* only where the host theme is absent */ --rev-surface-card: #ffffff; --rev-surface-raised: #fbfcfd; /* banner strips sitting on a card */ --rev-surface-sunken: #f9fafb; /* inset panels inside a card */ --rev-surface-subtle: #f1f5f9; /* chips, icon discs, nav hover */ --rev-surface-hover: rgba(0, 0, 0, 0.05); --rev-backdrop: rgba(0, 0, 0, 0.35); /* -- borders */ --rev-border: #c7c7c780; /* the app's default edge, 37 reads */ --rev-border-strong: #e3e5e8; /* opaque; cards and sticky headers */ --rev-border-subtle: #e5e7eb; /* inset panels, meter tracks */ /* -- text */ --rev-text: #111827; --rev-text-muted: #6b7480; /* matches --kendo-subtle-text */ --rev-text-label: #374151; --rev-text-on-accent: #ffffff; /* -- accent. The real accent is the host's own Nav_Hex_Color, injected as --accent-color by RevelationContext.tsx:75. This is only what shows if that injection has not happened yet. #73a942 is the value stated in contact-profile-design-handoff.md §5 and named rev-green in tailwind.config.js — see decision 1. */ --rev-accent-fallback: #73a942; /* -- starred. A filled star read as just another dark grey icon in the ticket toolbar rail, because the rail paints every icon --rev-text-muted. Gold rather than the host accent: the accent already belongs to the Edit CTA sitting beside it, and a gold star is what the control means everywhere else. */ --rev-star-on: #E0A200; /* -- semantic. The app's own, matched across modes, for banners and chrome. Kendo's --kendo-color-{success,warning,error,info} stay Kendo's, for Kendo's controls. Keeping the two separate is what stops a Kendo version bump silently restyling an alert. */ --rev-success: #1e7a45; --rev-success-bg: #e8f6ed; --rev-success-border: #b7dcc4; --rev-warning: #a56a08; --rev-warning-bg: #fdf3e3; --rev-warning-border: #eed7ab; --rev-danger: #b32121; --rev-danger-bg: #fdecec; --rev-danger-border: #eec0c0; --rev-info: #1b5588; --rev-info-bg: #eaf2fb; --rev-info-border: #c3d9f0; /* -- reserved meanings. Amber is AD-sync and warnings, nothing else; grey is "you do not have permission". Two visually distinct non-editable states, per contact-profile-design-handoff.md §3. */ --rev-lock-bg: #fffbeb; --rev-lock-border: #fcd34d; --rev-lock-pill-bg: #fef3c7; --rev-lock-pill-text: #92400e; --rev-disabled-bg: #f3f4f6; --rev-disabled-text: #6b7280; /* -- shape. 6px is the card radius the 2026 pages converged on (27 uses, and Homepage.scss:1270 explicitly matches .rev-view-card). The profile page's 8px is the outlier — see decision 3. */ --rev-radius-card: 6px; --rev-radius-control: 8px; --rev-radius-sm: 4px; --rev-radius-pill: 999px; /* -- elevation. Two shadows, not six. Note the dark-mode rule at Homepage.scss:1751: a black shadow on a black page is invisible, so dark.css swaps the card shadow for an actual edge. */ --rev-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.12); --rev-shadow-popover: 0 4px 16px rgba(0, 0, 0, 0.14); /* Paired with --rev-shadow-card. A card sets both; in light the shadow does the work and the edge is none, in dark it is the other way round, so no consumer needs a dark branch to get a visible card. */ --rev-card-edge: none; /* -- space. A 4px grid. The 5px and 7px values scattered through the codebase are hand-tuning, not a scale; they map to 4 or 8 on conversion. */ --rev-space-1: 4px; --rev-space-2: 8px; --rev-space-3: 12px; --rev-space-4: 16px; --rev-space-5: 24px; --rev-space-6: 32px; /* -- layout invariants. These are contracts with the homepage: a page that uses different values shifts the content edges when you navigate to it. */ --rev-gutter: 8px; /* Homepage.scss:1238, :1248 */ --rev-card-gap: 12px; /* Homepage.scss:1259 */ --rev-control-height: 32px; /* ViewBanner.scss:17 */ --rev-sidebar-width: 270px; /* Homepage.scss:1246 */ --rev-content-max: 1200px; --rev-sticky-offset: 88px; /* scroll-margin-top under a sticky head */ /* -- type. px, six steps, from the sizes actually in use (13px ×36, 12px ×28, 14px ×24, 18px ×17, 16px ×11, 11px ×9). 13px is the body and control size. See decision 7. */ --rev-font-size-xs: 11px; --rev-font-size-sm: 12px; --rev-font-size-md: 13px; --rev-font-size-lg: 14px; --rev-font-size-xl: 16px; --rev-font-size-2xl: 18px; --rev-weight-regular: 400; --rev-weight-medium: 500; --rev-weight-semibold: 600; /* -- stacking. The 10000 / 12000 / 15000 / 20000 values in the codebase are artifacts of fighting Kendo, not a scale. Retire them as surfaces convert; Kendo's own Window manages its own stacking. */ --rev-z-raised: 1; --rev-z-sticky: 20; --rev-z-drawer-backdrop: 30; --rev-z-drawer: 40; --rev-z-popover: 100; } html, body { color: var(--kendo-body-text, #000); background-color: var(--kendo-body-bg, #fff); } .toggle-light-mode-button { display: none !important; }