Current Behavior
While auditing the CustomCatalogCard component for accessibility and theme compliance, I found that the metrics text (downloads, views, clones) at the bottom of the card becomes nearly invisible when the Meshery dashboard is toggled to Dark Mode.
The root cause is in src/custom/CustomCatalog/style.tsx. The MetricsDiv styled component hardcodes the text color to rgba(26, 26, 26, .8) without any theme awareness. Because the parent container (MetricsContainerFront) correctly switches its background to a dark teal in Dark Mode, this hardcoded near-black text fails WCAG contrast standards and becomes unreadable.
Expected Behavior
The metric text color should adapt dynamically to the active theme mode. Instead of a hardcoded RGBA string, it should utilize Sistent's theme tokens (specifically theme.palette.text.default), ensuring high contrast and readability against both the light and dark background states.
Screenshots/Logs
(I have attached the visual regression report showing the contrast failure in dark mode). ### Environment
- OS: Windows
- Environment: Local Development
- Browser: Chrome / Edge
- Component: Sistent
CustomCatalogCard (MetricsDiv)
To Reproduce
- Start the Meshery UI or Sistent Storybook locally.
- Navigate to the Catalog page (or view
CustomCatalogCard in Storybook).
- Toggle the application theme to Dark Mode.
- Scroll down to the bottom footer of any Catalog Card.
- Observe the text color of the metrics (Downloads, Views) blending into the dark background.
Contributor Guides and Resources
Sistent_Bug_Report_MetricsDiv.pdf
Current Behavior
While auditing the
CustomCatalogCardcomponent for accessibility and theme compliance, I found that the metrics text (downloads, views, clones) at the bottom of the card becomes nearly invisible when the Meshery dashboard is toggled to Dark Mode.The root cause is in
src/custom/CustomCatalog/style.tsx. TheMetricsDivstyled component hardcodes the text color torgba(26, 26, 26, .8)without any theme awareness. Because the parent container (MetricsContainerFront) correctly switches its background to a dark teal in Dark Mode, this hardcoded near-black text fails WCAG contrast standards and becomes unreadable.Expected Behavior
The metric text color should adapt dynamically to the active theme mode. Instead of a hardcoded RGBA string, it should utilize Sistent's theme tokens (specifically
theme.palette.text.default), ensuring high contrast and readability against both the light and dark background states.Screenshots/Logs
(I have attached the visual regression report showing the contrast failure in dark mode). ### Environment
CustomCatalogCard(MetricsDiv)To Reproduce
CustomCatalogCardin Storybook).Contributor Guides and Resources
Sistent_Bug_Report_MetricsDiv.pdf