Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New style option for Axonius 2026. Set as default for them as well in their site config.

Browse Source 
Also general style clean ups
This commit is contained in:
Scott Idem
2026-04-08 10:21:08 -04:00
parent 372d79df2b
commit 590139e63a
7 changed files with 71 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/ae-firefly-axonius.css Normal file
View File

@@ -0,0 +1,51 @@
/*
* AE Firefly — Axonius variant
* Primary: #ff6112 (Axonius)
* A minimal variant file that provides the primary color ramp and
* a couple of anchor / spacing tokens. This file follows the
* AE_Firefly_<Variant> naming pattern so it can be selected at runtime
* via the `data-theme` attribute on <html>.
*/
html[data-theme='AE_Firefly_Axonius'] {
--text-scaling: 1.067;
--background: var(--color-surface-50) !important;
--base-font-color: var(--color-surface-950);
--base-font-color-dark: var(--color-surface-50);
--base-font-family: system-ui, sans-serif;
/* Anchors: Axonius orange in light, lighter in dark */
--anchor-font-color: var(--color-primary-600);
--anchor-font-color-dark: var(--color-primary-300);
--spacing: 0.25rem;
--radius-base: 0.375rem;
--radius-container: 0.875rem;
/* Primary ramp (hex fallbacks centered on #ff6112) */
--color-primary-50: #fff5ef;
--color-primary-100: #ffe0d1;
--color-primary-200: #ffc7a8;
--color-primary-300: #ffad7f;
--color-primary-400: #ff9356;
--color-primary-500: #ff6112;
--color-primary-600: #e6550f;
--color-primary-700: #bf4b0d;
--color-primary-800: #993f0b;
--color-primary-900: #7c3509;
--color-primary-950: #5f2b08;
--color-primary-contrast-dark: var(--color-primary-950);
--color-primary-contrast-light: var(--color-primary-50);
}
/* Dark mode tweaks */
html.dark[data-theme='AE_Firefly_Axonius'] {
--background: var(--color-surface-950) !important;
/* Keep a minimal set of contrast tokens in dark mode */
--color-primary-contrast-50: var(--color-primary-contrast-dark);
--color-primary-contrast-100: var(--color-primary-contrast-dark);
--color-primary-contrast-200: var(--color-primary-contrast-dark);
--color-primary-contrast-300: var(--color-primary-contrast-dark);
--color-primary-contrast-400: var(--color-primary-contrast-dark);
--color-primary-contrast-500: var(--color-primary-contrast-light);
}