/* * REMchannel global brand override. * * Source: wwwroot/assets/branding/Remchannel-Brand-CI-Guide-2023.pdf * ("REMchannel Visual Identity Guidelines", Dec 2022). * * MudBlazor components are themed via the RemChannelTheme MudTheme object in * MainLayout.razor (both the server and client copies) - that is the source of truth * for buttons, inputs, tables, dialogs, alerts etc. This file covers what the C# theme * does not reach: the base font stack, legacy Bootstrap-era classes still used in some * hand-rolled markup (app.css), and generic browser chrome (scrollbar, selection, focus). * * Loaded last in App.razor's , after app.css and MudBlazor's own stylesheet. */ :root { /* ---- Primary palette ---- */ --rem-steel-blue: #30505c; --rem-steel-blue-80: #58737c; --rem-steel-blue-60: #83969d; --rem-steel-blue-40: #acb9bf; --rem-green: #009677; --rem-green-80: #33ab92; --rem-green-60: #66c0ad; --rem-green-40: #99d5c9; --rem-black: #000000; --rem-black-80: #58595b; --rem-black-60: #808285; --rem-black-40: #a7a9ac; --rem-black-15: #dcddde; --rem-black-5: #f1f2f2; --rem-paper: #ffffff; /* Every filled primary CTA pill in the UI Elements Reference (toolbars.svg, form-input*.svg - "New job profile", "+ Label") renders near-black, not the brand green used elsewhere for selection/active-state tint (e.g. the A-Z letter filter's selected tab). Distinct from --rem-black so the source is traceable if the two ever need to diverge further. */ --rem-button-primary: #18181f; /* The Figma Button component names the same two values --rem-color-bg-action and --rem-color-text-on-action. Aliased rather than renamed: --rem-button-primary is used in eight places across datasubmission.css and the MudBlazor overrides, and a rename for tidiness is a rename that has to be right in all of them. */ --rem-color-bg-action: var(--rem-button-primary); --rem-color-text-on-action: #ffffff; /* ---- Secondary palette ---- */ --rem-orange: #f37021; --rem-orange-80: #f58d4d; --rem-orange-60: #f8a97a; --rem-orange-40: #fac6a6; --rem-rust: #a14732; --rem-rust-80: #b46c5b; --rem-rust-60: #c79184; --rem-rust-40: #d9b5ad; --rem-blue: #25408f; --rem-blue-80: #5166a5; --rem-blue-60: #7c8cbc; --rem-blue-40: #a8b3d2; --rem-grey: #5a5a5a; --rem-grey-80: #7a7a7a; --rem-grey-60: #9c9c9c; --rem-grey-40: #bcbcbc; /* ---- Accessible variants ---- The palette above is calibrated for fills and graphics, and several of those values do not survive being used as small text or as a pill behind white text. WCAG AA wants 4.5:1 for text under 18.66px bold, and the status pills are 10.9px bold. Measured, not estimated. Each ratio below was computed from the sRGB relative luminance formula against the ground the colour actually sits on - which for anything in a table means BOTH #FFFFFF and the #F1F2F2 canvas, because rows alternate. --rem-green #009677 as text .... 3.73:1 fails --rem-orange #F37021 as text .... 2.94:1 fails #8A9793 as text ............ 3.03:1 on white, 2.70 on canvas - fails both #A3A3A3 under white text ... 2.52:1 fails #16A34A under white text ... 3.30:1 fails #EA580C under white text ... 3.56:1 fails Keep using the palette colours for fills, borders, charts and icons. Use these when the colour carries text, or when white text sits on it. */ /* Text on a light ground */ --rem-ink-muted: var(--rem-color-text-muted); /* 5.11:1 white / 4.56:1 canvas - replaces #8A9793 and #808285 as text */ --rem-ink-green: var(--rem-color-feedback-success); /* 5.38:1 white / 4.80:1 canvas - green as small text */ --rem-ink-red: var(--rem-color-feedback-critical); /* 6.06:1 white / 5.41:1 canvas - the rust, as small text */ --rem-ink-orange: var(--rem-color-feedback-warning-ink); /* 5.38:1 white / 4.79:1 canvas - orange as small text */ /* Solid fills that carry white text */ --rem-fill-neutral: var(--rem-color-status-not-started); /* 4.61:1 - "Not started" */ --rem-fill-orange: var(--rem-color-status-pending); /* 5.18:1 - "Pending" */ --rem-fill-green: var(--rem-color-status-published); /* 5.02:1 - "Published" */ --rem-fill-warning: #b35418; /* 5.00:1 - warning severity */ /* ---- Design system tokens ---- Pulled from the "REMchannel Design System" Figma file (zX6oGzsvzGXA4SlK5z1xvH) via get_variable_defs, verbatim. That file's own cover states it was generated from this codebase against the Brand CI Guide 2023, so these are the same values as the palette above - what the file adds is a settled set of NAMES and a scale for spacing, radius and type, which the CSS here had been re-deriving per screen. Where a token below duplicates one of the accessible variants, the alias further down now points here rather than repeating the hex, so there is one definition per value. */ /* Text */ --rem-color-text-primary: #18181f; --rem-color-text-secondary: #5a5a5a; --rem-color-text-muted: #66706e; --rem-color-text-on-accent: #ffffff; /* Surfaces and rules */ --rem-color-bg-surface: #ffffff; --rem-color-bg-canvas: #f1f2f2; --rem-color-border-default: #ececec; --rem-color-border-strong: #dcddde; --rem-border-hairline: 1px; /* Per-application accent. REMadmin's is the brand steel blue; REMprofile's rail is the rust, REMeasure's accent is the orange. One token per app rather than a single "accent" that means something different on every screen. */ --rem-brand-remadmin-accent: #30505c; /* Feedback */ --rem-color-feedback-success: #00795f; --rem-color-feedback-warning: #f37021; --rem-color-feedback-warning-ink: #ad4f14; --rem-color-feedback-warning-wash: #fdeee4; --rem-color-feedback-critical: #a14732; /* Workflow status. Solid fills carrying white text - the design system draws these as filled pills everywhere, never as tinted washes. */ --rem-color-status-not-started: #757575; --rem-color-status-in-progress: #2563eb; --rem-color-status-pending: #c2410c; --rem-color-status-published: #15803d; --rem-color-status-rejected: #b91c1c; /* Type scale */ --rem-font-size-xs: 11px; --rem-font-size-sm: 12px; --rem-font-size-base: 13px; --rem-font-size-md: 14px; --rem-font-size-2xl: 28px; --rem-font-weight-regular: 400; --rem-font-weight-semibold: 600; --rem-font-weight-bold: 700; /* Spacing scale */ --rem-spacing-3xs: 2px; --rem-spacing-2xs: 4px; --rem-spacing-xs: 6px; --rem-spacing-sm: 8px; --rem-spacing-md: 12px; --rem-spacing-lg: 16px; /* Radius */ --rem-radius-sm: 6px; --rem-radius-md: 8px; --rem-radius-full: 999px; /* ---- Semantic aliases, for anything hand-rolled outside MudBlazor ---- */ --rem-font-primary: 'Montserrat', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; --rem-color-link: var(--rem-green); --rem-color-link-hover: var(--rem-steel-blue); --rem-color-focus-ring: var(--rem-green); --rem-color-cta: var(--rem-orange); --rem-color-disclaimer: var(--rem-black-80); } /* ---- Typography ---- */ /* Montserrat is the brand's primary font for all design applications (guide, p.3). MudBlazor components already pick this up from RemChannelTheme; this covers everything else - plain HTML, Bootstrap remnants, third-party markup. */ html, body { font-family: var(--rem-font-primary); } h1, h2, h3, h4, h5, h6 { font-family: var(--rem-font-primary); font-weight: 700; /* Montserrat Bold is used for headings */ } /* Links, buttons, form validation and focus rings are defined directly in app.css using the --rem-* tokens above (single source per rule, rather than overriding app.css's rules a second time here). */ /* ---- Hero text (photo band + dark scrim on the home page, UserSubscriptions.razor) ---- Needs guaranteed white contrast regardless of the photo underneath, independent of the theme's Tertiary colour (steel blue - correct for other uses, but unreliable here). Deliberately global rather than a component-scoped .razor.css: MudBlazor components don't propagate Blazor's CSS-isolation scope attribute to their own rendered root element, so a scoped rule targeting a bare class on a MudText silently never matches. */ .hero-text { color: var(--rem-paper) !important; } /* ---- Disclaimers / fine print (guide: Montserrat Regular, 80% black) ---- */ .disclaimer, small, .text-disclaimer { color: var(--rem-color-disclaimer); } /* ---- Primary CTA buttons ---- MudTheme.Primary (green) stays as-is: MudSelect focus rings, floating labels and selected-item highlighting all key off it and match the reference there. Only the filled-button fill itself needs the override - see --rem-button-primary above. */ .mud-button-filled.mud-button-filled-primary { background-color: var(--rem-button-primary); } /* ---- Header tenant/organisation selectors ---- UI Elements Reference (navigation.svg) shows the top-bar scope selectors as plain borderless text-links ("Country v Organisation v"), not boxed floating-label fields. This app still needs to show which tenant/org is active (not just a static label), so TenancyOrganization.razor keeps MudSelect/MudAutocomplete showing the selected value - only the outline/underline chrome is stripped here to match the reference's lighter weight. */ .header-plain-select .mud-input-underline:before, .header-plain-select .mud-input-underline:after { border-bottom: none !important; } .header-plain-select .mud-input-root { background: transparent !important; } /* ---- Selection & scrollbar, so even browser chrome reads on-brand ---- */ ::selection { background-color: var(--rem-green-40); color: var(--rem-black); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--rem-black-5); } ::-webkit-scrollbar-thumb { background: var(--rem-black-40); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: var(--rem-grey); } /* ==================================================================================== switch MudBlazor's Material-2 switch, made to read as on or off. As shipped it read as neither. Measured on the live control: off track rgba(0,0,0,.537) at opacity .48 thumb #35353B (near black), 20px on track #009677 at opacity .50 thumb #009677 (the SAME green as its track) So the track never reached full strength in either state - it was a faint smudge with no readable ends - and in the on state the thumb was the same colour as the track it sits on, so its position was invisible. What was left was a dark blob floating in a grey haze, which reads as a control halfway between its two states. The thumb was also larger than the track was tall (20px on 14px), so it overhung and blurred the ends further. The fix is the ordinary one: a solid track that reads as a channel, and a WHITE thumb whose position in that channel is the whole message. Colour then confirms the state rather than carrying it alone - which also means it survives being looked at by someone who cannot easily tell the green from the grey. The selectors mirror MudBlazor's own, because its rules for the checked state are written as `.mud-switch-base.mud-checked + .mud-switch-track` and simply outrank anything shorter: - track size comes from `.mud-switch-span`'s 12px padding around a 58x38 box, not from any width on the track itself, so the track is widened by reducing that padding - `opacity:.5` on the checked track needs a selector at least as specific to undo Kept in the brand sheet because switches appear in both the admin panel and the client apps and must not diverge; there were no .mud-switch rules anywhere in the codebase before this. */ /* The track fills this box minus its padding. 8px gives a 42x22 channel, which is taller than the 16px thumb rather than thinner than it. */ .mud-switch .mud-switch-span { padding: 8px; } .mud-switch .mud-switch-span .mud-switch-track, .mud-switch .mud-switch-base + .mud-switch-track, .mud-switch .mud-switch-base.mud-checked + .mud-switch-track { opacity: 1; border-radius: var(--rem-radius-full, 999px); background-color: var(--rem-black-15, #dcddde); transition: background-color .15s ease; } .mud-switch .mud-switch-base.mud-checked + .mud-switch-track { background-color: var(--rem-green, #009677); } /* The thumb class carries its size in the name (mud-switch-thumb-medium and friends), so this matches on the prefix rather than pinning one size. White in both states: its POSITION is what says on or off, and the track colour only confirms it. */ .mud-switch [class*="mud-switch-thumb"] { width: 16px; height: 16px; border-radius: 50%; background-color: var(--rem-color-bg-surface, #ffffff); box-shadow: 0 1px 3px rgba(0, 0, 0, .35); } /* Where the thumb rests. MudBlazor centres the thumb inside a 53px hit area that is itself centred in the 58px span, so with the wider track the thumb sat 10px inside the channel at rest and hung 4px past its far end when checked. Both ends are 7px out, so both are shifted by the same 7px; the 20px of travel between them is MudBlazor's and is already correct for a 42px track holding a 16px thumb (42 - 16 - 3 - 3 = 20). */ .mud-switch .mud-switch-base { transform: translateX(-7px); } .mud-switch .mud-switch-base.mud-checked { transform: translateX(13px); } /* Disabled reads as off and clearly inert, rather than as the half-lit look the ENABLED control used to have. MudBlazor drops the track to opacity .12 with !important, which is the one place here that has to be answered in kind. */ .mud-switch .mud-switch-base.mud-switch-disabled + .mud-switch-track { opacity: 1 !important; background-color: var(--rem-black-5, #f1f2f2); } .mud-switch .mud-switch-base.mud-switch-disabled [class*="mud-switch-thumb"] { background-color: var(--rem-black-15, #dcddde); box-shadow: none; } /* ------------------------------------------------------------------------- Admin editor dialogs on the REMadmin accent. The admin Add/Edit dialogs (subscription package, service, Power BI report, dashboard/email template) render through the shared MudDialogProvider, which sits at the layout root - OUTSIDE .admin-ui - so an .admin-ui-scoped rule cannot reach them, and a global .mud-dialog rule would wrongly recolour the respondent-side dialogs too. Every admin dialog already carries Class="admin-ui" on its , so .mud-dialog.admin-ui targets exactly them - this repoints MudBlazor's Material primary (the green #009677 theme colour) at the REMadmin steel-blue accent for those dialogs only; buttons, inputs, checkboxes and the close button follow. Respondent dialogs do not carry admin-ui, so they keep the REMchannel green. ------------------------------------------------------------------------- */ .mud-dialog.admin-ui { --mud-palette-primary: #30505c; --mud-palette-primary-rgb: 48, 80, 92; --mud-palette-primary-text: #ffffff; --mud-palette-lines-inputs: #dcddde; } .mud-dialog.admin-ui .mud-input-outlined.mud-focused .mud-input-outlined-border { border-color: #30505c !important; }