score:1

Accepted answer
type ColorMapKeys = 'standard' | 'accent' | 'neutral' | 'flat' | 'text' | 'disabled';

type ColorMap = Record<ColorMapKeys, ColorsInterface>;

const colorMap: ColorMap = {
  'standard': { bgColor: 'primaryNormal', textColor: 'white' },
  'accent': { bgColor: 'accentNormal', textColor: 'white' },
  'neutral': { bgColor: 'grayExtraDark', textColor: 'white' },
  'flat': { bgColor: 'white', textColor: 'primaryNormal' },
  'text': { bgColor: 'white', textColor: 'grayExtraDark' },
  'disabled': { bgColor: 'grayLight', textColor: 'grayDark' },
};

export const ButtonWrapper = styled.button<ButtonInterface>`
${(props: Props) =>
    props.buttonType &&
    css`
      background-color: ${props.theme.colors[colorMap[props.buttonType].bgColor]};
      color: ${colorMap[props.buttonType].textColor};
    `}  
`;

Related Query

More Query from same tag