mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-08-26 18:42:49 +00:00
71 lines
3.0 KiB
CSS
71 lines
3.0 KiB
CSS
@import "tailwindcss";
|
|
@import "@edr/ui-common/theme.css" layer(theme);
|
|
|
|
/* The app toggles dark mode by setting the `dark` class on <html> (see
|
|
main.tsx / FreightDashboardLayout). Without this, Tailwind v4 compiles
|
|
`dark:` utilities to `@media (prefers-color-scheme: dark)` and they follow
|
|
the OS setting instead of the in-app toggle. */
|
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
|
|
/* 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 <html> 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;
|
|
}
|