fix(branding): admin sidebar uses accent-dark, primary buttons follow CI token
This commit is contained in:
@@ -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
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user