chore: add variant prop to Counter (#105141)

* chore: add className prop to counter

* chore: make className optional

* chore: wrap in cx

* chore: add variant to counter

* chore: run prettier fix

packages/grafana-ui/src/components/Tabs/Counter.tsx

@@ -4,22 +4,24 @@ import { GrafanaTheme2, locale } from '@grafana/data';
 
 import { useStyles2 } from '../../themes';
 
+type CounterVariant = 'primary' | 'secondary';
 export interface CounterProps {
   value: number;
+  variant?: CounterVariant;
 }
 
-export const Counter = ({ value }: CounterProps) => {
-  const styles = useStyles2(getStyles);
+export const Counter = ({ value, variant = 'secondary' }: CounterProps) => {
+  const styles = useStyles2(getStyles, variant);
 
   return <span className={styles.counter}>{locale(value, 0).text}</span>;
 };
 
-const getStyles = (theme: GrafanaTheme2) => ({
+const getStyles = (theme: GrafanaTheme2, variant: CounterVariant) => ({
   counter: css({
     label: 'counter',
     marginLeft: theme.spacing(1),
     borderRadius: theme.spacing(3),
-    backgroundColor: theme.colors.action.hover,
+    backgroundColor: variant === 'primary' ? theme.colors.primary.main : theme.colors.action.hover,
     padding: theme.spacing(0.25, 1),
     color: theme.colors.text.secondary,
     fontWeight: theme.typography.fontWeightMedium,