/* ============================================================ mPower.UI.Shared — Design Tokens ------------------------------------------------------------ Single source of truth for colors, spacing, radius, and typography used across app.css, isolated .razor.css files, and inline styles. The light-mode values mirror MpowerMudTheme (C#) so MudBlazor components and raw CSS stay visually in sync. Color values follow MPW Brand Guidelines R1.2: Plum 1 #920056 primary, Slate #05111B neutral, Cool Grays 1–7, brand-defined UI status palette. ============================================================ */ /* ── Self-hosted Montserrat (primary brand typeface). Arial fallback per brand guidelines p. 34. ─────────── */ @font-face { font-family: 'Montserrat'; src: url('fonts/montserrat/Montserrat-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('fonts/montserrat/Montserrat-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('fonts/montserrat/Montserrat-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('fonts/montserrat/Montserrat-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } :root { /* Tell the browser our scheme so native form controls (number inputs, scrollbars, date pickers) render with matching system colors. Without this, defaults to light-theme white bg even in dark mode, which makes cell editors inside mPowerGrid unreadable. */ color-scheme: light; /* ── Brand / Palette ────────────────────────────── */ --mp-color-primary: #621244; /* Plum 3 — deep plum lead */ --mp-color-primary-hover: #920056; /* Plum 1 — lighter on hover */ --mp-color-primary-dark: #4A0D34; /* darkened Plum 3 */ --mp-color-primary-subtle: #FFE1F6; /* Light Plum — Tertiary in theme */ /* Plum rendered AS TEXT (or icon/glyph) sitting ON a surface, vs Primary the FILL. They can't share a value in dark mode: dark Primary is Plum 2 #B30069, only 2.48:1 on --mp-color-surface and 2.40:1 on --mp-color-primary-subtle — fine behind white button text, unreadable as text. Light is Plum 3, unchanged. */ --mp-color-primary-text: #621244; --mp-color-secondary: #920056; /* Plum 1 — vivid plum accent */ --mp-color-secondary-dark: #621244; /* Plum 3 — secondary hover toward primary */ --mp-color-secondary-subtle: #FFE1F6; /* Light Plum */ /* CTA — Orange is the primary call-to-action emphasis (Save, Submit, + New, Confirm). Chosen over Magenta for high contrast against Plum 3 chrome — operators scanning grids can spot the conversion at a glance. Orange is also brand Warning; the hue is reserved for these two semantics only ("do this" + "watch out"). Pending status uses Blue/Info to keep the line clean. Magenta 1/2 intentionally unused. */ --mp-color-cta: #DB5C05; /* Orange */ --mp-color-cta-hover: #FF8E3C; /* lighter orange */ --mp-color-cta-subtle: #F9E0CF; /* Light Orange — soft CTA bg */ --mp-color-on-cta: #FFFFFF; /* white on orange CTA */ /* Surface roles that diverge from Primary in dark mode (Mud palette slots AppbarBackground / ActionDefault). Light mode reuses Primary; dark mode overrides below give the appbar a darker tone than the brighter Primary. */ --mp-color-appbar: #621244; /* Plum 3 — Mud AppbarBackground */ --mp-color-action-default: #621244; /* Plum 3 — Mud ActionDefault */ /* "On" (contrast) colors — what goes ON a filled colored background. These INVERT in dark mode because the brand color gets lighter. on-appbar tracks --mp-color-appbar (which diverges from Primary in dark). */ --mp-color-on-primary: #FFFFFF; /* white on Plum 3 */ --mp-color-on-primary-rgb: 255, 255, 255; /* OnPrimary as RGB triplet for rgba() alpha overlays */ --mp-color-on-appbar: #FFFFFF; /* white on Plum 3 appbar */ --mp-color-on-appbar-rgb: 255, 255, 255; /* OnAppbar RGB triplet for chrome alpha overlays — stays light in dark mode */ --mp-color-on-secondary: #FFFFFF; /* white on Plum 1 */ /* Header band on framed surfaces (SessionDialog, etc.). Light mode darkens the brand primary to keep separation from primary-filled buttons; dark mode uses the existing appbar tone so the band reads as chrome rather than a mid-tone plum stripe between dark surface and lavender button. */ --mp-color-dialog-header: color-mix(in srgb, var(--mp-color-primary) 55%, #000); --mp-color-on-success: #FFFFFF; --mp-color-on-warning: #1A2433; --mp-color-on-error: #FFFFFF; /* ── Catalog Health accent palette (WI 2628) ───── The ABC/Dead tier hues are deliberately OFF the brand status palette — they are a chart palette, and Dave picked these specifically. They live here so the widgets can stop hardcoding them and get a dark mode, NOT so they can be collapsed into success/info/warning (that was tried and rejected). Each tier is a PAIR because one value can't do both jobs: `fill` paints the proportional bar and the legend swatch (a colored band carrying a white label, identical in both modes), while `text` paints the money/percent lines that sit ON the card surface — those must lift in dark mode or they fall to ~3:1. */ --mp-catalog-a-fill: #2e7d4f; --mp-catalog-a-text: #2e7d4f; --mp-catalog-b-fill: #3b6fb0; --mp-catalog-b-text: #3b6fb0; --mp-catalog-c-fill: #b08a2e; --mp-catalog-c-text: #b08a2e; --mp-catalog-dead-fill: #a99fa6; --mp-catalog-dead-text: #a99fa6; --mp-catalog-star: #c8961f; --mp-catalog-alert: #c0392b; /* Label on a tier fill — white in both modes because the fills don't move. */ --mp-catalog-on-fill: #FFFFFF; /* ── Text (brand: Slate + Cool Gray ramp) ───────── */ --mp-color-text: #05111B; /* Slate — TextPrimary */ --mp-color-text-secondary: #52555A; /* Gray 7 */ --mp-color-text-muted: #75797C; /* Gray 6 */ --mp-color-text-disabled: #B2B5B5; /* Gray 4 */ /* ── Surfaces (brand: Cool Gray 1) ──────────────── */ --mp-color-surface: #FFFFFF; --mp-color-surface-sunken: #F2F2F2; /* Gray 1 — card background */ --mp-color-surface-page: #F2F2F2; /* Gray 1 — body background */ --mp-color-surface-drawer: #F2F2F2; /* Gray 1 — neutral drawer; brand chrome stays in appbar */ /* ── Lines / Borders (brand: Cool Gray 2) ───────── */ --mp-color-border: #DADAD9; /* Gray 2 — LinesDefault */ --mp-color-border-subtle: #DADAD9; /* Gray 2 */ --mp-color-border-light: #F2F2F2; /* Gray 1 */ --mp-color-border-lighter: #F2F2F2; /* Gray 1 */ /* ── Status (brand-defined UI palette, p. 31) ───── */ --mp-color-success: #028702; /* Positive — Green */ --mp-color-success-strong: #028702; /* Same as success (collapsed to brand) */ --mp-color-warning: #DB5C05; /* Warning — Orange */ --mp-color-error: #B5021C; /* Error — Red */ --mp-color-info: #004CA8; /* Info — Blue */ /* Status fills (soft backgrounds — brand Light variants) */ --mp-color-success-soft: #C1F4C1; /* Light Positive */ --mp-color-warning-soft: #F9E0CF; /* Light Warning */ --mp-color-error-soft: #FCD2D7; /* Light Error */ --mp-color-info-soft: #DBECFC; /* Light Info */ /* Editable / locked-in tint — Light Teal. Intentionally NOT plum-family because primary-subtle is Light Plum and using the same tone for hover and editable columns would erase the distinction. Header is more saturated so users can spot which columns they can type into; cell tint is barely-there so values remain readable. */ --mp-color-editable-header: #D9FCF5; /* Light Teal */ --mp-color-editable-cell: #EFFEFB; /* Light Teal at ~50% */ /* Display-data / reference column tint (mPowerGrid "Last *" informational columns). Light Info Blue separates them from model columns. Dark-mode override below keeps the contrast without blinding users. */ --mp-color-display-data-cell: #DBECFC; /* Light Info */ /* Deleted-row affordance (setup-list pages: Tenders/Sizes/etc.). Light pink matches the items-page convention; dark mode shifts to low-alpha pink so deleted rows whisper instead of blast the dark surface. */ --mp-color-deleted-soft: #FFC6D9; /* ── Urgency tier tiles (soft bg + border + strong text) Each tier draws from brand tertiary Light/Mid/Dark for the same hue. ─ */ --mp-tier-critical-bg: #FCD2D7; /* Light Red */ --mp-tier-critical-border: #B5021C; /* Red */ --mp-tier-critical-text: #89021B; /* Dark Red */ --mp-tier-warning-bg: #F9E0CF; /* Light Orange */ --mp-tier-warning-border: #DB5C05; /* Orange */ --mp-tier-warning-text: #8C3B03; /* Dark Orange */ --mp-tier-watch-bg: #DBECFC; /* Light Blue */ --mp-tier-watch-border: #004CA8; /* Blue */ --mp-tier-watch-text: #013A72; /* Dark Blue */ --mp-tier-success-bg: #C1F4C1; /* Light Green */ --mp-tier-success-border: #028702; /* Green */ --mp-tier-success-text: #035C03; /* Dark Green */ /* ── Sidebar nav group accents — brand tertiary mid-tones ─ */ --mp-color-nav-buying: #004CA8; /* Blue */ --mp-color-nav-inventory: #DB5C05; /* Orange */ --mp-color-nav-sales: #028702; /* Green */ --mp-color-nav-catalog: #7C02AF; /* Purple */ --mp-color-nav-people: #00B08E; /* Teal 1 */ --mp-color-nav-reports: #938C03; /* Dark Yellow (brand Yellow #D8D800 too neon) */ --mp-color-nav-integrations: #0499B5; /* Cyan */ --mp-color-nav-settings: #75797C; /* Gray 6 */ --mp-color-nav-tools: #7C02AF; /* Purple */ /* ── Radius ─────────────────────────────────────── */ --mp-radius-sm: 4px; --mp-radius: 6px; --mp-radius-lg: 8px; --mp-radius-xl: 12px; /* ── Card primitives (shared across widget / action-card / quick-card / doc-details-card / doc-stat-bar / people-card) ────────────────── */ --mp-card-bg: var(--mp-color-surface); --mp-card-border: 1px solid rgba(0, 0, 0, 0.06); --mp-card-radius: 10px; --mp-card-radius-sm: 8px; --mp-card-padding: 16px; --mp-card-padding-lg: 20px; --mp-card-shadow-hover: var(--mp-shadow-sm); /* ── Spacing (4/8pt scale) ──────────────────────── */ --mp-space-1: 4px; --mp-space-2: 8px; --mp-space-3: 12px; --mp-space-4: 16px; --mp-space-5: 24px; --mp-space-6: 32px; /* ── Typography (brand: Montserrat, Arial fallback) ─ */ --mp-font-sans: 'Montserrat', 'Arial', sans-serif; --mp-font-mono: 'JetBrains Mono', 'Cascadia Code', Consolas, 'Courier New', monospace; --mp-font-size-xs: 11px; --mp-font-size-sm: 12px; --mp-font-size-md: 14px; --mp-font-size-lg: 16px; --mp-font-size-xl: 20px; --mp-font-size-2xl: 28px; --mp-line-height-tight: 1.2; --mp-line-height: 1.4; --mp-line-height-relaxed: 1.6; /* ── Shadows ────────────────────────────────────── */ --mp-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); --mp-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08); --mp-shadow: 0 2px 12px rgba(0, 0, 0, 0.10); --mp-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); /* ── Motion ─────────────────────────────────────── */ --mp-transition-fast: 150ms ease; --mp-transition: 200ms ease; --mp-transition-slow: 300ms ease; } /* ────────────────────────────────────────────────────────── Dark theme. Toggled by ThemeService, which sets data-theme="dark" on . Values mirror MpowerMudTheme.PaletteDark. Brand book is silent on dark mode. Derivations: - Primary uses Plum 2 #B30069 — brighter than Plum 3 chrome so brand reads on dark surfaces; Magenta 1/2 not used. - CTA stays Orange in both modes (high contrast everywhere). - Surfaces shift toward plum-tinted near-Slate. ────────────────────────────────────────────────────────── */ [data-theme="dark"] { color-scheme: dark; --mp-color-primary: #B30069; /* Plum 2 — brighter plum for dark surfaces */ --mp-color-primary-hover: #C71E7C; /* lifted Plum 2 */ --mp-color-primary-dark: #920056; /* Plum 1 */ --mp-color-primary-subtle: #3D0F2A; /* Dark plum tint */ --mp-color-primary-text: #E87BB5; /* lifted Plum — Plum 2 is only 2.48:1 as text */ --mp-color-secondary: #920056; /* Plum 1 — vivid plum accent on dark */ --mp-color-secondary-dark: #B30069; /* Plum 2 hover */ --mp-color-secondary-subtle: rgba(146, 0, 86, 0.18); --mp-color-cta: #DB5C05; /* Orange — same hue both modes */ --mp-color-cta-hover: #FF8E3C; /* lighter orange */ --mp-color-cta-subtle: rgba(219, 92, 5, 0.18); --mp-color-on-cta: #FFFFFF; /* white on orange CTA */ --mp-color-appbar: #2E1226; /* deep plum chrome — lifts above #0F0810 page so doc-header bands read */ --mp-color-action-default: #B30069; /* matches dark Primary */ /* Dark Primary is Plum 2 (dark) → white text reads. The appbar uses its own light contrast (OnAppbar) since it stays dark plum in both modes. */ --mp-color-on-primary: #FFFFFF; /* white on Plum 2 */ --mp-color-on-primary-rgb: 255, 255, 255; --mp-color-on-appbar: #FFE1F6; /* Light Plum on dark plum appbar */ --mp-color-on-appbar-rgb: 255, 225, 246; /* Light Plum RGB triplet for chrome alpha overlays */ --mp-color-on-secondary: #FFFFFF; /* white on Plum 1 */ --mp-color-dialog-header: var(--mp-color-appbar); /* appbar chrome, distinct from light-magenta primary */ --mp-color-on-success: #05111B; --mp-color-on-warning: #05111B; --mp-color-on-error: #FFFFFF; /* Catalog Health accents — fills and on-fill stay put (a colored band reads the same on either surface); only the *-text values lift so the money/percent lines clear the dark card. */ --mp-catalog-a-text: #5CB585; --mp-catalog-b-text: #7FA6DC; --mp-catalog-c-text: #D4A94A; --mp-catalog-dead-text: #BDB2BA; --mp-catalog-star: #E0B24A; --mp-catalog-alert: #E5776A; --mp-color-text: #F2F2F2; /* Gray 1 */ --mp-color-text-secondary: #B2B5B5; /* Gray 4 */ --mp-color-text-muted: #989A9D; /* Gray 5 */ --mp-color-text-disabled: #52555A; /* Gray 7 */ /* Three distinct surface levels: page is darkest, cards lift above it. */ --mp-color-surface-page: #0F0810; --mp-color-surface-sunken: #1A1018; --mp-color-surface: #241B24; --mp-color-surface-drawer: #1A0F18; --mp-color-border: #3A2D38; --mp-color-border-subtle: #2C2128; --mp-color-border-light: #231A22; --mp-color-border-lighter: #1A1218; /* Card border on dark: visible white-alpha so cards pop above the page. */ --mp-card-border: 1px solid rgba(255, 255, 255, 0.09); --mp-color-success: #4FD39E; --mp-color-success-strong: #4FD39E; --mp-color-warning: #FFB347; --mp-color-error: #E06B5F; --mp-color-info: #8AA8E5; --mp-color-success-soft: rgba(79, 211, 158, 0.14); --mp-color-warning-soft: rgba(255, 179, 71, 0.14); --mp-color-error-soft: rgba(224, 107, 95, 0.14); --mp-color-info-soft: rgba(138, 168, 229, 0.14); /* Editable / locked-in tint (dark mode) — Teal alpha on dark bg. Header must be OPAQUE: it paints position:sticky grid header cells, and an alpha value lets scrolling rows bleed through (WI 2599). #195350 = rgba(0,212,181,.30) composited over --mp-color-surface. */ --mp-color-editable-header: #195350; --mp-color-editable-cell: rgba(0, 212, 181, 0.12); /* Display-data tint (dark mode) — soft blue alpha that reads on dark bg */ --mp-color-display-data-cell: rgba(138, 168, 229, 0.10); /* Deleted-row affordance (dark mode) — pink alpha so the row reads "deleted" without flashing pink against dark plum surfaces. */ --mp-color-deleted-soft: rgba(255, 198, 217, 0.16); /* Urgency tiers — soft tints of the hue, readable on dark bg */ --mp-tier-critical-bg: rgba(224, 107, 95, 0.12); --mp-tier-critical-border: rgba(224, 107, 95, 0.35); --mp-tier-critical-text: #F08579; --mp-tier-warning-bg: rgba(255, 179, 71, 0.12); --mp-tier-warning-border: rgba(255, 179, 71, 0.35); --mp-tier-warning-text: #FFC890; --mp-tier-watch-bg: rgba(138, 168, 229, 0.14); --mp-tier-watch-border: rgba(138, 168, 229, 0.35); --mp-tier-watch-text: #A8BFEB; --mp-tier-success-bg: rgba(79, 211, 158, 0.14); --mp-tier-success-border: rgba(79, 211, 158, 0.35); --mp-tier-success-text: #7BE0B5; --mp-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35); --mp-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.40); --mp-shadow: 0 2px 12px rgba(0, 0, 0, 0.45); --mp-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.50); }