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);
}

1
src/app.css
View File

@@ -41,6 +41,7 @@ html.light {
@import './ae-firefly-steelblue.css';
@import './ae-firefly-indigo.css';
@import './ae-firefly-rainbow.css';
@import './ae-firefly-axonius.css';
@source '../node_modules/@skeletonlabs/skeleton-svelte/dist';

1
src/lib/app_components/e_app_sys_bar.svelte
View File

@@ -220,6 +220,7 @@ const theme_options = [
{ value: 'AE_Firefly_SteelBlue', label: 'Firefly SteelBlue ✦' },
{ value: 'AE_Firefly_Indigo', label: 'Firefly Indigo ✦' },
{ value: 'AE_Firefly_Rainbow', label: 'Firefly Rainbow ✨' },
{ value: 'AE_Firefly_Axonius', label: 'Firefly Axonius ✦' },
{ value: 'AE_c_IDAA_light', label: 'IDAA – light' },
{ value: 'AE_c_LCI', label: 'LCI' }
];

1
src/lib/app_components/e_app_theme.svelte
View File

@@ -111,6 +111,7 @@ if ($ae_loc.app_cfg.theme_mode == 'light') {
<option value="AE_Firefly_SteelBlue">Firefly SteelBlue ✦</option>
<option value="AE_Firefly_Indigo">Firefly Indigo ✦</option>
<option value="AE_Firefly_Rainbow">Firefly Rainbow ✨</option>
<option value="AE_Firefly_Axonius">Firefly Axonius ✦</option>
<!-- <option value="AE_Firefly_new-name">Firefly new-name ✦</option> -->
<option value="AE_c_IDAA_light">IDAA - light</option>
<option value="AE_c_LCI">LCI</option>

1
src/lib/app_components/e_app_url_builder.svelte
View File

@@ -98,6 +98,7 @@ const theme_options = [
{ value: 'AE_Firefly_SteelBlue', label: 'Firefly SteelBlue ✦' },
{ value: 'AE_Firefly_Indigo', label: 'Firefly Indigo ✦' },
{ value: 'AE_Firefly_Rainbow', label: 'Firefly Rainbow ✨' },
{ value: 'AE_Firefly_Axonius', label: 'Firefly Axonius ✦' },
{ value: 'AE_c_IDAA_light', label: 'IDAA – light' },
{ value: 'AE_c_LCI', label: 'LCI' }
];

22
src/routes/events/+layout.svelte
View File

@@ -228,9 +228,13 @@ function clear_sess() {
left-0 z-20 m-auto flex
min-h-12 w-full
max-w-7xl flex-col
items-center justify-between gap-1 rounded-b-lg
items-center justify-between gap-1
border-b-2 bg-gray-200
rounded-b-lg border-b-2
border-primary-200 dark:border-primary-800
bg-primary-200/80 dark:bg-primary-800/80
text-primary-900 dark:text-primary-100
backdrop-blur-sm
p-1 px-2
transition-all duration-1000
@@ -238,7 +242,7 @@ function clear_sess() {
sm:flex-wrap md:min-h-14
dark:bg-gray-800 print:hidden
print:hidden
">
<span class="justify-self-start">
<!-- Be sure to explain what &AElig; (Aether) means in the title text or similar! -->
@@ -371,19 +375,23 @@ function clear_sess() {
left-0 z-20 m-auto flex
w-full max-w-7xl
flex-row flex-wrap
items-center justify-between gap-1
rounded-t-lg border-t-2
border-gray-200 bg-gray-200 p-1
border-primary-200 dark:border-primary-800
bg-primary-200/80 dark:bg-primary-800/80
text-primary-700 dark:text-primary-400
backdrop-blur-sm
p-1
text-xs
transition-all duration-1000 hover:text-base
hover:opacity-100
sm:flex-row md:items-center
md:justify-between dark:border-gray-600
md:justify-between
dark:bg-gray-800 print:hidden
print:hidden
"
class:ae_debug={$ae_loc.debug}>
<Element_data_store

2
src/routes/events/[event_id]/(pres_mgmt)/pres_mgmt/+page.svelte
View File

@@ -422,7 +422,7 @@ function prevent_default<T extends Event>(fn: (event: T) => void) {
</header>
{#if !pres_mgmt_loc.current.show_content__event_view || pres_mgmt_loc.current.show_content__event_view == 'default'}
<div class="ae_container_actions">
<div class="preset-tonal-primary rounded-xl">
<form
onsubmit={prevent_default(() => handle_search_trigger())}
autocomplete="off"