Better handling of `UButton`, `UBadge`, … colors on colored backgrounds

Description

When adding UButton component with ghost or link variant inside a UBanner with links attribute, they remain displayed in black text, even if the banner has a dark background (e.g., primary color). Unlike the Banner close button, which has specific Tailwind classes that adapt it to dark mode (white text), these elements do not automatically adjust their colors.

  <UBanner to="/guide-gouvernance-associative-crise" icon="i-ph-books-duotone" title="Guide Gouvernance Associative" :actions="[{label: 'Lire le guide', to: '/guide-gouvernance-associative-crise', variant: 'ghost', size: 'md', trailingIcon: 'i-ph-arrow-right'}, {label: 'Lire le guide', to: '/guide-gouvernance-associative-crise', variant: 'link', size: 'md'}]" close />

Would it be relevant to add a global attribute to components like Button, Badge, etc., to force their appearance in dark (or light) mode, regardless of the global setting? This would ensure better visual consistency when these elements are placed on a colored background (e.g., UPageCTA with solid variant).

Additional context

No response

Start by tracing how UButton, UBadge, and UBanner action colors are defined, comparing them with the Banner close button's dark-background classes. Clarify the intended global appearance API and its scope for dark and light backgrounds; done means ghost and link controls remain readable and visually consistent on colored backgrounds such as a primary UBanner or solid UPageCTA.