@import "tailwindcss"; @import "@edr/ui-common/theme.css" layer(theme); /* The backoffice is light-only — there is no theme toggle and nothing sets the `dark` class. This override is load-bearing: without it Tailwind v4 compiles `dark:` utilities to `@media (prefers-color-scheme: dark)`, so every leftover `dark:` class (the vendored IAM UI is full of them) would activate on an OS-level dark setting. Binding the variant to a class that is never rendered keeps those utilities inert no matter what the OS says. */ @custom-variant dark (&:where(.edr-dark-disabled)); /* Bridge the central Mantine theme into Tailwind. freightMantineTheme (createTheme) is the single source of truth; these just alias its generated CSS variables so `bg-edr-*`, `text-edr-*`, `border-edr-*` utilities resolve to the same tokens used by Mantine props. Mirrors edr-freight-web/portal. */ @theme { --color-edr-primary: var(--mantine-color-edr-green-5); --color-edr-primary-dark: var(--mantine-color-edr-green-7); --color-edr-bg: var(--mantine-color-edr-bg-6); --color-edr-card: var(--mantine-color-edr-card-6); --color-edr-border: var(--mantine-color-edr-border-6); --color-edr-divider: var(--mantine-color-edr-divider-6); --color-edr-text: var(--mantine-color-edr-text-6); --color-edr-muted: var(--mantine-color-edr-muted-6); --color-edr-soft: var(--mantine-color-edr-soft-6); --color-edr-ink: var(--mantine-color-edr-ink-6); --color-edr-accent: var(--mantine-color-edr-accent-6); /* Numeric `primary-*` scale used throughout the vendored IAM UI (src/user-management, src/shared, …). Aliased to the edr-green Mantine tuple (freight-brand.ts) so bg-primary-50 … text-primary-900 resolve to brand shades; without these the utilities are simply not generated. */ --color-primary-50: var(--mantine-color-edr-green-0); --color-primary-100: var(--mantine-color-edr-green-1); --color-primary-200: var(--mantine-color-edr-green-2); --color-primary-300: var(--mantine-color-edr-green-3); --color-primary-400: var(--mantine-color-edr-green-4); --color-primary-500: var(--mantine-color-edr-green-5); --color-primary-600: var(--mantine-color-edr-green-6); --color-primary-700: var(--mantine-color-edr-green-7); --color-primary-800: var(--mantine-color-edr-green-8); --color-primary-900: var(--mantine-color-edr-green-9); --color-primary-950: #022c22; } /* Main brand color. NOTE: at runtime TenantConfig.applyTenantTheme() sets --primary (and --ring/--accent/…) as INLINE styles on from the per-hostname tenant config, which beats any stylesheet — change the color there (localhost → #0EA371). This block is the pre-mount fallback and fixes --primary-foreground (the layered dark default is dark-on-dark). Same value in both modes so the brand doesn't shift when toggling. */ :root, .dark { --primary: #0EA371; --primary-foreground: #ffffff; } :root { --freight-brand: #1B9E7A; --freight-brand-dark: #15805F; --freight-brand-light: #2DBF95; --freight-brand-muted: #E7F8F2; --freight-brand-border: #B7EBDC; --freight-brand-ring: rgb(27 158 122 / 0.2); } html, body, #root { height: 100%; overflow: hidden; }