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

2026-05-11 11:27:16 +02:00
parent 2f00bbdd90
commit bf7ef14626
5 changed files with 37 additions and 12 deletions
@@ -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',
            )}
          >