fix(theme): apply navy palette to login hero panel under navy theme

The data-theme attribute on base_login.html was previously a no-op
because the login page CSS only references the legacy --primary
family, not the --ds-* tokens that the theme blocks override.
Add a single :root[data-theme=navy] .login-features rule so the
left hero panel flips from brand-blue to the deep-navy gradient
on navy-configured instances. Default (blue) instances are
unchanged.
This commit is contained in:
David Rybar 2026-05-21 11:34:31 +02:00
parent a2a7b845e6
commit 391cacdee6
2 changed files with 17 additions and 4 deletions

View file

@ -20,10 +20,11 @@ CalVer image tags (`stable-YYYY.MM.N`, `dev-YYYY.MM.N`) are produced for every C
### Fixed
- Pre-login pages (`/login`, magic-link screens, first-time `/setup`)
now honour the configured `instance.theme` instead of always
rendering with the default `:root` palette. Eliminates the
jarring blue → navy flip after sign-in on navy-configured
instances.
now honour the configured `instance.theme`. `base_login.html` sets
`<html data-theme="...">` from `instance_theme`, and the navy
variant flips the `.login-features` hero panel from brand-blue
`--primary` to the deep-navy gradient — eliminating the jarring
blue → navy flip after sign-in on navy-configured instances.
### Added
- `/home` now opens with a value-first intro hero — eyebrow greeting,

View file

@ -2788,6 +2788,18 @@ a.slack-badge:hover {
justify-content: center;
}
/* Navy theme when the instance opts in via
`AGNES_INSTANCE_THEME=navy` / `instance.theme=navy`, the
`<html data-theme="navy">` attribute is set by base_login.html and
we flip the login-page hero panel from the legacy brand-blue
`--primary` to the deep-navy gradient used by the design-system
hero so /login matches the rest of the navy-themed app. Only
`.login-features` carries a brand colour on the pre-login screens;
the rest of the login chrome is theme-neutral. */
:root[data-theme="navy"] .login-features {
background: linear-gradient(135deg, #0f1b3a 0%, #0a1430 100%);
}
.features-content {
max-width: 480px;
}