Using semantic tokens instead of colorScheme= prop with <Alert>

[richardgill]

Our designer has defined semantic tokens for lightmode and darkmode. We're loosely following Primer.

For simple components e.g. Badge and Tooltip we were able to use the theme and then wrapped the Chakra component.

Here is an example for Badge:

// eslint-disable-next-line no-restricted-imports
import { Badge as ChakraBadge, BadgeProps as ChakraBadgeProps } from '@chakra-ui/react';
import { capitalize } from 'lodash';
import { Statuses } from '~/theme';

export type BadgeProps = Omit<ChakraBadgeProps, 'backgroundColor' | 'color' | 'colorScheme' | 'variant'> & {
  color: Statuses;
};

export const Badge: React.FC<BadgeProps> = ({ color, ...props }) => {
  return <ChakraBadge {...props} backgroundColor={`status${capitalize(color)}`} color="textControl" variant="solid" />;
};

But this approach does not work well for <Alert>, <AlertTitle> etc... because they fundamentally use colorScheme. But we'd prefer to be more precise which specific semantic tokens we've hand picked.

Because Alert uses useContext internally this seems tricky. Is there a good way to achieve this with Chakra?

Thanks for a great library!