fix(branding): admin sidebar uses accent-dark, primary buttons follow CI token

This commit is contained in:
Luca
2026-05-06 00:57:54 +02:00
parent b19bb0c620
commit fc2bce3a01
2 changed files with 18 additions and 14 deletions
@@ -90,15 +90,17 @@ export const AdminSidebar: React.FC<AdminSidebarProps> = ({ isOpen, onClose }) =
onClick={() => onClose()}
className={`flex items-center px-3 py-2 text-sm font-medium rounded-lg transition-colors ${
isActive
? 'bg-primary-50 dark:bg-primary-900/30 text-accent-dark'
? 'bg-accent-dark text-white'
: 'text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 hover:text-neutral-900 dark:hover:text-neutral-100'
}`}
>
{/* Active icon/text use the theme's accent-dark token so the
sidebar follows the user's CI palette (LBM teal, custom
branding, etc.) instead of the legacy primary green. */}
{/* Selected item: solid accent-dark fill with white text/icon
for unambiguous high-contrast selection — matches the
.tile-selected pattern used in the customizer. The accent
-dark token defaults to the legacy primary green so users
who haven't set CI colours yet see no migration regression. */}
<item.icon className={`w-5 h-5 mr-3 ${
isActive ? 'text-accent-dark' : 'text-neutral-400'
isActive ? 'text-white' : 'text-neutral-400'
}`} />
{t(item.nameKey)}
</NavLink>
+11 -9
View File
@@ -134,14 +134,16 @@
/*
* Button styles.
*
* Migration note: .btn-primary / .btn-secondary / .btn-outline keep the
* exact same visual contract they had before the 8-token migration —
* --color-primary still drives .btn-primary's background, white text on
* primary, and the legacy --color-primary-dark hover. This guarantees
* existing themes render identically after upgrade. The new .btn-alt
* implements the LBM "Alternative" button (outlined, inverts on hover)
* and the focus ring switches to var(--color-accent) so it reads on
* every surface (light, dark, branded).
* Migration note: .btn-primary now binds to --color-accent-dark instead
* of --color-primary. The two tokens are kept in lockstep by the
* customizer (handleChange syncs primaryColor → accentDarkColor) and by
* the migration helper (legacy themes get accentDarkColor = primaryColor),
* so existing instances render identically after upgrade — but new themes
* that set only accentDarkColor (the 8-token CI flow) now drive primary
* buttons correctly. White text + accent-dark fill matches the rest of
* the selected-state visual language (sidebar, tile-selected, segmented
* buttons). Hover stays on --color-primary-dark for the auto-darkened
* legacy behaviour.
*/
.btn {
@apply inline-flex items-center justify-center font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
@@ -151,7 +153,7 @@
}
.btn-primary {
background-color: var(--color-primary);
background-color: var(--color-accent-dark);
color: white;
@apply hover:opacity-90;
}