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()}
|
onClick={() => onClose()}
|
||||||
className={`flex items-center px-3 py-2 text-sm font-medium rounded-lg transition-colors ${
|
className={`flex items-center px-3 py-2 text-sm font-medium rounded-lg transition-colors ${
|
||||||
isActive
|
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'
|
: '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
|
{/* Selected item: solid accent-dark fill with white text/icon
|
||||||
sidebar follows the user's CI palette (LBM teal, custom
|
for unambiguous high-contrast selection — matches the
|
||||||
branding, etc.) instead of the legacy primary green. */}
|
.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 ${
|
<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)}
|
{t(item.nameKey)}
|
||||||
</NavLink>
|
</NavLink>
|
||||||
|
|||||||
+11
-9
@@ -134,14 +134,16 @@
|
|||||||
/*
|
/*
|
||||||
* Button styles.
|
* Button styles.
|
||||||
*
|
*
|
||||||
* Migration note: .btn-primary / .btn-secondary / .btn-outline keep the
|
* Migration note: .btn-primary now binds to --color-accent-dark instead
|
||||||
* exact same visual contract they had before the 8-token migration —
|
* of --color-primary. The two tokens are kept in lockstep by the
|
||||||
* --color-primary still drives .btn-primary's background, white text on
|
* customizer (handleChange syncs primaryColor → accentDarkColor) and by
|
||||||
* primary, and the legacy --color-primary-dark hover. This guarantees
|
* the migration helper (legacy themes get accentDarkColor = primaryColor),
|
||||||
* existing themes render identically after upgrade. The new .btn-alt
|
* so existing instances render identically after upgrade — but new themes
|
||||||
* implements the LBM "Alternative" button (outlined, inverts on hover)
|
* that set only accentDarkColor (the 8-token CI flow) now drive primary
|
||||||
* and the focus ring switches to var(--color-accent) so it reads on
|
* buttons correctly. White text + accent-dark fill matches the rest of
|
||||||
* every surface (light, dark, branded).
|
* the selected-state visual language (sidebar, tile-selected, segmented
|
||||||
|
* buttons). Hover stays on --color-primary-dark for the auto-darkened
|
||||||
|
* legacy behaviour.
|
||||||
*/
|
*/
|
||||||
.btn {
|
.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;
|
@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 {
|
.btn-primary {
|
||||||
background-color: var(--color-primary);
|
background-color: var(--color-accent-dark);
|
||||||
color: white;
|
color: white;
|
||||||
@apply hover:opacity-90;
|
@apply hover:opacity-90;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user