В моем css файле множество правил, содержание которых соответствует их названиям классов. Как я могу их сократить?

В моем react приложении есть общие компоненты типа Text, в которые я через props передаю параметры типа color и size. В зависимости от этих параметров я присваиваю возвращаемому компоненту класс (например color_gray-194 или size_12). В итоге в css файле компонента разрастается колбаса из похожих друг на друга классов с одним единственным правилом:

.color_black-10 {
    color: var(--black-10);
}
.color_gray-194 {
    color: var(--gray-194);
}
.color_gray-128 {
    color: var(--gray-128);
} ...

Какими средствами я могу сократить это? На ум приходят миксины, но я их затестил и, мне показалось, что они для моей задачи не совсем подходят. Хотелось бы увидеть что-то вроде такого

.color_(variable) {
   color: var(variable);
}

Прилагаю код компонента (tsx и css файлы), чтобы можно было видеть как сейчас работает вариативность пробрасываемых свойств

//index.tsx
type TextSize = '12' | '14' | '16' | '28';

type TextColor = 'black-10' | 'gray-194' | 'gray-128' | 'purple- 
106' | 'purple-69';

type Props = {
  children?: React.ReactNode,
  size?: TextSize,
  color?: TextColor,
  className?: string,
};

const Text = ({
  children,
  size = '14',
  color = 'black-10',
  className,
}: Props) => {
  const rootClassName = cx(
    className,
    `color_${color}`,
    `size_${size}`,
  );

  return (
    <p className={cn(rootClassName, styles.text)}>
      {children}
    </p>
  );};

export default Text;


//styles.module.css
.text {
    margin: 0;
    padding: 0;

    font-weight: 400;
}
.color_black-10 {
    color: var(--black-10);
}
.color_gray-194 {
    color: var(--gray-194);
}
.color_gray-128 {
    color: var(--gray-128);
}
.color_purple-106 {
    color: var(--purple-106);
}
.color_purple-69 {
    color: var(--purple-69);
}
.size_12 {
    font-size: 12px;
}
.size_14 {
    font-size: 14px;
}
.size_16 {
    font-size: 16px;
}
.size_28 {
    font-size: 28px;
}