/* Beacon 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). theme-init.js puts data-base-color on before the first paint, 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 Beacon's. */ :root:root:root { /* Signal blue. The product is called Beacon; 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); } /* 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; }