Получить цветовой код из названия цвета палитры MUI

Я хотел бы знать, есть ли какой-нибудь способ получить шестнадцатеричный код или любой цветовой код из имени цвета палитры в пользовательском интерфейсе материала?

Мой вариант использования следующий:

У меня есть стилизованный значок, который я хотел бы настроить, как и обычные значки со свойством цвета. Итак, мой компонент выглядит так:

import { styled, alpha } from "@mui/material/styles";
import Badge, { BadgeProps } from "@mui/material/Badge";

const PulsingBadge = styled(Badge)<BadgeProps>(({ theme, color }) => ({
  position: "relative",
  "&:before": {
    content: '""',
    position: "absolute",
    top: "50%",
    left: "50%",
    transform: "translate(-50%, -50%)",
    width: "5px",
    height: "5px",
    borderRadius: "50%",
    background: color,
    opacity: 0.7,
    animation: `pulsing 1500ms ${theme.transitions.easing.easeOut} infinite`,
  },
  "@keyframes pulsing": {
    "0%": {
      width: "5px",
      height: "5px",
      opacity: 0.7,
    },
    "70%": {
      width: "24px",
      height: "24px",
      opacity: 0.05,
    },
    "100%": {
      width: "26px",
      height: "26px",
      opacity: 0.0,
    },
  },
}));

export default PulsingBadge;

Особенно важна эта строка:

background: color,

но в результате получается background: warning, который явно не распознается как цвет. Также, если я попробую использовать такой метод, как alpha(color, 0.5), я также получу следующую ошибку:

MUI: неподдерживаемый цвет warning. Поддерживаются следующие форматы: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), цвет().

Мне было интересно, есть ли что-то вроде геттера из палитры типа theme.palette.get(color). Я попробовал theme.palette[color], но поскольку, очевидно, свойство цвета может быть неопределенным, я получаю следующую ошибку:

Тип «неопределенный» не может использоваться в качестве индекса.

Вот коды и коробка с минимально воспроизводимым примером!

Я чувствую, что что-то упускаю, потому что это очень простая функция, которая, вероятно, включена в MUI, но я нигде не могу найти решение...

Спасибо за вашу помощь!

🤔 А знаете ли вы, что...
React обеспечивает высокую производительность благодаря эффективной обработке изменений DOM.