Aurora theme
Aurora is the default backend theme in Scipio ERP 4.0: no CSS framework, one design for every application, a light and a dark scheme.
What Aurora is#
Aurora is the default backend theme of Scipio ERP, in place since version
4.0. It carries no CSS framework: no Bootstrap, no Foundation, no Bulma, and
no SASS, npm, or gulp build step. Every rule lives in plain CSS files under
webapp/aurora/css/, and the browser reads them as they are.
One design serves every application. The look is graphite and crimson: graphite chrome that lets the red Scipio logo lead, a warm white ground, soft white cards, and big bold titles. Crimson comes from the logo. It never carries text on graphite. It marks the current application, the current menu item and the active tab with a thin bar, and it marks the notification dot. Every text pair passes WCAG AA (4.5:1), and every bar passes 3:1.
The shell puts every application in a graphite rail at the left edge. Beside the rail, a white panel holds the menu of the current application, with a filter box over it. The header carries the breadcrumb, a search that jumps to an application or a page (Ctrl K), the notifications and the scheme switch. On a phone, the rail and the menu fold into a drawer. Aurora has a light scheme, the default, and a dark scheme, plus a switch between the two.
How the scheme switch works#
The palette lives twice in aurora-tokens.css: once under :root for the
light scheme, once under @media (prefers-color-scheme: dark) for a reader
with no saved choice, and once under :root[data-theme="dark"] (or
[data-theme="light"]), which always wins.
themeTemplate.ftl picks the scheme on the server, so the page never
flashes the wrong scheme. Its
htmlHeadOpen_markup macro checks the auroraScheme cookie first, then, for
a signed-in reader, the AURORA_SCHEME user preference, and writes the
result onto the <html> tag as data-theme. An empty value means “follow
the operating system.”
A click on the scheme switch runs Aurora.setScheme() in aurora.js. It
sets or removes data-theme on the <html> element, saves the choice in the
auroraScheme cookie for a year, and posts it as the AURORA_SCHEME user
preference, so the choice follows a signed-in reader to another machine.
The design tokens#
aurora-tokens.css defines every colour, size and font as a --au- custom
property. The main ones:
| Variable | Sets |
|---|---|
--au-ground | The page background, behind every panel. |
--au-surface, --au-surface-2, --au-surface-3 | Card and panel backgrounds. |
--au-chrome, --au-chrome-ink | The application rail, the phone bar and dark cards, and their text. |
--au-ink, --au-ink-2, --au-ink-3, --au-ink-4 | Body text, darkest to lightest. |
--au-rule, --au-rule-soft, --au-rule-strong | Borders and dividers. |
--au-accent, --au-accent-2 | The primary and secondary accent colours. |
--au-primary, --au-on-primary | The graphite submit button and its text. |
--au-signal, --au-bar, --au-bar-rail | The crimson of the notification dot, the menu and tab bars, and the rail bar. |
--au-ok, --au-warn, --au-danger, --au-info | The status colours, each with a -soft and a -line variant. |
--au-font, --au-font-display, --au-font-mono | The three type families: Geist for text and controls, Bricolage Grotesque for titles and figures, Geist Mono for IDs and paths. |
The three fonts ship as woff2 files inside the theme, under
webapp/aurora/fonts/, with their SIL Open Font License texts. Aurora loads
no font from a CDN.
To change the look, edit aurora-tokens.css. No other file in the theme
holds a colour.
File layout of themes/aurora#
| Path | Purpose |
|---|---|
scipio-theme.xml | The theme component descriptor. Depends on base-theme. |
data/AuroraThemeData.xml | The VisualTheme entity and its VisualThemeResource rows. |
includes/themeStyles.groovy | The style map: class names the widget macros emit. |
includes/themeTemplate.ftl | The macro overrides, including the <html> tag and the scheme. |
includes/header.ftl, footer.ftl, appbar*.ftl | The page shell. |
webapp/aurora/css/aurora-tokens.css | The colour palette, light and dark, the sizes and the fonts. |
webapp/aurora/css/aurora-fonts.css | The @font-face rules for the three fonts. |
webapp/aurora/fonts/ | The woff2 files and their licence texts. |
webapp/aurora/css/aurora-base.css | Reset, type, form controls, helpers. |
webapp/aurora/css/aurora-layout.css | Shell, grid, panels, tiles. |
webapp/aurora/css/aurora-components.css | Every widget the engine emits. |
webapp/aurora/css/aurora-rtl.css | The fixes for a right-to-left locale, loaded only for one. |
webapp/aurora/css/aurora-vendor.css | Theme tokens for jQuery UI, CodeMirror, jstree, DataTables, Trumbowyg, flatpickr. |
webapp/aurora/js/aurora.js | The shell, the scheme switch, the widgets, the legacy shims. |
How to select the theme#
VISUAL_THEME=AURORA in framework/common/config/general.properties sets
Aurora as the theme for a user with no saved choice. A signed-in reader can
override that default with their own VISUAL_THEME user preference, the
same way AURORA_SCHEME overrides the scheme.
How to extend it#
Three ways to change Aurora, smallest to largest:
- Override a token. Change a
--au-value inaurora-tokens.css. Every component reads from it. - Add a CSS file. Place it under
webapp/aurora/css/, then add aVisualThemeResourcerow withresourceTypeEnumId="VT_STYLESHEET"inAuroraThemeData.xml, so the theme loads it. - Add a template include.
includes/themeTemplate.ftlholds the macro overrides;header.ftl,footer.ftl, and theappbar*.ftlfiles hold the shell markup.
Where the legacy Bootstrap and Foundation calls go#
Aurora carries neither Bootstrap nor Foundation, but some application
templates still call them. aurora.js installs shims for $.fn.foundation,
$.fn.modal, and $.fn.tab, so those calls still work: a
foundation("reveal", "close") call closes the Aurora modal, and a
.modal() call opens or closes it, rather than failing quietly.