/* Beaacon brand tokens. Loaded LAST, after the library's themes.css. Why the repeated :root: themes.css scopes its palettes to [data-base-color="zinc"] and .dark[data-base-color="zinc"], which are specificity (0,1,0) and (0,2,0). App.razor renders data-base-color on , so a plain :root here would lose. Repeating the pseudo-class lifts these rules to (0,3,0), which wins without !important. The neutral base — background, foreground, border, muted — is left to the library's zinc palette. Only the accent and the chart colours are Beaacon's. */ :root:root:root { /* Signal blue. The product is called Beaacon; the one saturated colour in the interface should be the one carrying the data. */ --primary: oklch(0.5200 0.1700 258); --primary-foreground: oklch(0.9900 0 0); --ring: oklch(0.5200 0.1700 258); --sidebar-primary: oklch(0.5200 0.1700 258); --sidebar-primary-foreground: oklch(0.9900 0 0); /* Blue, amber, teal, violet, coral. They separate by lightness as well as hue, so they stay distinguishable for the common forms of colour vision deficiency and in a greyscale print. */ --chart-1: oklch(0.5400 0.1800 258); --chart-2: oklch(0.7400 0.1500 70); --chart-3: oklch(0.6000 0.1100 190); --chart-4: oklch(0.5500 0.1900 310); --chart-5: oklch(0.6200 0.1800 22); /* The change indicators. Never the only signal: every indicator also carries an arrow and a sign. */ --trend-up: oklch(0.5400 0.1400 152); --trend-down: oklch(0.5600 0.2000 27); } .dark:root:root { --primary: oklch(0.7000 0.1500 256); --primary-foreground: oklch(0.1700 0.0100 258); --ring: oklch(0.7000 0.1500 256); --sidebar-primary: oklch(0.7000 0.1500 256); --sidebar-primary-foreground: oklch(0.1700 0.0100 258); --chart-1: oklch(0.7200 0.1500 256); --chart-2: oklch(0.8200 0.1400 74); --chart-3: oklch(0.7400 0.1000 190); --chart-4: oklch(0.7000 0.1700 310); --chart-5: oklch(0.7300 0.1600 24); --trend-up: oklch(0.7600 0.1600 152); --trend-down: oklch(0.7200 0.1800 25); } /* Supplied PNGs preserve the wordmark's lettering without a client-side font dependency. Frame their transparent margins without changing the originals. */ .brand-logo { position: relative; display: inline-block; flex-shrink: 0; width: 140px; aspect-ratio: 35 / 8; overflow: hidden; } .brand-logo-large { width: 196px; } .brand-logo img { position: absolute; left: 50%; top: 50%; width: 184%; max-width: none; height: auto; transform: translate(-50%, -45%); } .brand-logo-dark, .dark .brand-logo-light { display: none; } .dark .brand-logo-dark { display: block; } /* Login uses the complete SVG lockup, including both tagline lines. Preserve its natural aspect ratio instead of applying the wordmark's PNG crop. */ .brand-lockup { display: block; width: 320px; max-width: 100%; aspect-ratio: 1200 / 430; } .brand-lockup img { display: block; width: 100%; height: auto; } .brand-lockup .brand-lockup-dark, .dark .brand-lockup .brand-lockup-light { display: none; } .dark .brand-lockup .brand-lockup-dark { display: block; } /* Blazor's unhandled-error bar. The reconnect modal is styled by blazorblueprint.css, which reads these same theme variables. This one is not, so it is styled here to match. Blazor shows and hides it from the host page, which is why it cannot be a component. */ #blazor-error-ui { display: none; position: fixed; inset: auto 0 0 0; z-index: 2147482999; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background-color: var(--destructive); color: var(--destructive-foreground); font: inherit; font-size: 0.875rem; line-height: 1.5; box-shadow: 0 -2px 12px rgb(0 0 0 / 0.18); } #blazor-error-ui .bb-error-text { flex: 1 1 auto; } #blazor-error-ui .bb-error-button { flex: 0 0 auto; border: 1px solid color-mix(in oklab, var(--destructive-foreground) 45%, transparent); border-radius: var(--radius, 0.5rem); padding: 0.25rem 0.75rem; color: inherit; text-decoration: none; cursor: pointer; } #blazor-error-ui .bb-error-button:hover { background-color: color-mix(in oklab, var(--destructive-foreground) 14%, transparent); } #blazor-error-ui .bb-error-dismiss { flex: 0 0 auto; padding: 0 0.25rem; color: inherit; font-size: 1.25rem; line-height: 1; text-decoration: none; cursor: pointer; opacity: 0.75; } #blazor-error-ui .bb-error-dismiss:hover { opacity: 1; } #blazor-error-ui .bb-error-button:focus-visible, #blazor-error-ui .bb-error-dismiss:focus-visible { outline: 2px solid var(--destructive-foreground); outline-offset: 2px; }