The NavigationBadge component defines its colors via hardcoded Tailwind classes in ColorMap and ColorMapInvert:
export const ColorMap = {
green: "bg-green-400 dark:bg-green-800",
blue: "bg-sky-400 dark:bg-sky-800",
yellow: "bg-yellow-400 dark:bg-yellow-800",
red: "bg-red-400 dark:bg-red-800",
purple: "bg-purple-400 dark:bg-purple-600",
indigo: "bg-indigo-400 dark:bg-indigo-600",
gray: "bg-gray-400 dark:bg-gray-600",
outline: "border border-border rounded-md text-foreground",
};Unlike the rest of the Zudoku design system, these colors don't go through CSS theme tokens (--color-* / custom variables), which means:
It's not possible to override them through the site's theme configuration.
Although the component accepts a className prop, it's only merged with the existing classes (via cn) rather than replacing them, so it can't easily be used to override the colors either without resorting to !important.
This causes real contrast issues depending on the theme/branding in use: for example, the PATCH badge has a measured text/background contrast ratio of 3.79, below the WCAG AA threshold of 4.5:1 recommended for small text.
PATCH badge with insufficient contrast (3.79), measured via DevTools
Expected behavior
Be able to override navigation badge colors (via site theme configuration, CSS variables, or a dedicated prop), to allow reaching sufficient contrast depending on the branding in use.
Ideally, have ColorMap / ColorMapInvert rely on CSS theme tokens rather than fixed Tailwind classes, in line with the rest of the design system's components.
Context
File: packages/zudoku/src/lib/components/navigation/NavigationBadge.tsx
The NavigationBadge component defines its colors via hardcoded Tailwind classes in ColorMap and ColorMapInvert:
Unlike the rest of the Zudoku design system, these colors don't go through CSS theme tokens (--color-* / custom variables), which means:
It's not possible to override them through the site's theme configuration.
Although the component accepts a className prop, it's only merged with the existing classes (via cn) rather than replacing them, so it can't easily be used to override the colors either without resorting to !important.
This causes real contrast issues depending on the theme/branding in use: for example, the PATCH badge has a measured text/background contrast ratio of 3.79, below the WCAG AA threshold of 4.5:1 recommended for small text.
PATCH badge with insufficient contrast (3.79), measured via DevTools
Expected behavior
Be able to override navigation badge colors (via site theme configuration, CSS variables, or a dedicated prop), to allow reaching sufficient contrast depending on the branding in use.
Ideally, have ColorMap / ColorMapInvert rely on CSS theme tokens rather than fixed Tailwind classes, in line with the rest of the design system's components.
Context
File: packages/zudoku/src/lib/components/navigation/NavigationBadge.tsx