fix(settings): readable contrast on accent-tinted icon tiles + pills

This commit is contained in:
Luca
2026-05-11 11:27:16 +02:00
parent 2f00bbdd90
commit bf7ef14626
5 changed files with 37 additions and 12 deletions
@@ -47,14 +47,14 @@ export const FeatureCard: React.FC<FeatureCardProps> = ({
>
<div className="flex items-start gap-4 p-5">
{/* Icon tile — enabled state uses the admin's CI accent (via
.bg-accent-soft / .text-accent-dark from index.css) so the
tile colour follows the configured brand palette. Previously
hard-coded to Tailwind's primary-50 green. */}
.bg-accent-soft + .text-on-accent-soft) so it follows the
configured brand palette. The foreground token resolves to
a high-contrast colour in both light and dark mode. */}
<div
className={clsx(
'flex-shrink-0 w-10 h-10 rounded-lg flex items-center justify-center',
enabled
? 'bg-accent-soft text-accent-dark'
? 'bg-accent-soft text-on-accent-soft'
: 'bg-neutral-100 text-neutral-500 dark:bg-neutral-800 dark:text-neutral-400',
)}
>
@@ -61,10 +61,11 @@ export const SidebarPreview: React.FC<SidebarPreviewProps> = ({ staged }) => {
className={clsx(
'inline-flex items-center gap-2 px-2.5 py-1.5 rounded-md text-xs font-medium border',
// Feature-driven pills pick up the admin's CI accent via
// .bg-accent-soft / .border-accent-soft / .text-accent-dark
// — previously hard-coded to Tailwind primary-50 green.
// .bg-accent-soft / .border-accent-soft, with
// .text-on-accent-soft as the legible foreground (the
// accent token itself washes out on its own tint).
item.featureDriven
? 'border-accent-soft bg-accent-soft text-accent-dark'
? 'border-accent-soft bg-accent-soft text-on-accent-soft'
: 'border-neutral-200 bg-neutral-50 text-neutral-700 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-300',
)}
>