@sinchsmb/ui-kit/src/components/Toast/styled.ts

UI kit for SinchSMB frontend

import styled from 'styled-components/macro';

import { color, radius, shadow } from '../../theme';
import { assertUnreachable } from '../../utils/assertUnreachable';
import { Icon } from '../Icon/Icon';

import { ToastButton } from './components/ToastButton/ToastButton';
import { ToastAppearance } from './constants';

export const StyledToast = styled.div<{ $appearance: ToastAppearance }>`
  align-items: center;
  background-color: ${(props) => {
    switch (props.$appearance) {
      case ToastAppearance.Default:
        return color('sys/color/white');
      case ToastAppearance.Success:
        return color('ref/palette/green/50');
      case ToastAppearance.Warning:
        return color('ref/palette/orange/50');
      case ToastAppearance.Error:
        return color('ref/palette/red/50');
      /* istanbul ignore next */
      default:
        assertUnreachable(props.$appearance);
    }
  }};
  border-color: ${(props) => {
    switch (props.$appearance) {
      case ToastAppearance.Default:
        return color('ref/palette/blue/100');
      case ToastAppearance.Success:
        return color('ref/palette/green/200');
      case ToastAppearance.Warning:
        return color('ref/palette/orange/200');
      case ToastAppearance.Error:
        return color('ref/palette/red/100');
      /* istanbul ignore next */
      default:
        assertUnreachable(props.$appearance);
    }
  }};
  border-radius: ${radius('comp/modal/radius')};
  border-style: solid;
  border-width: 1px;
  box-shadow: ${shadow('sys/shadow/elevation/16')};
  box-sizing: border-box;
  color: ${color('sys/color/text/primary')};
  display: flex;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  max-width: 500px;
  padding-bottom: 8px;
  padding-left: 12px;
  padding-right: 8px;
  padding-top: 8px;
  width: 95vw;
`;

export const TunedIcon = styled(Icon)<{ $appearance: ToastAppearance }>`
  color: ${(props) => {
    switch (props.$appearance) {
      case ToastAppearance.Default:
        return color('sys/color/primary/default');
      case ToastAppearance.Success:
        return color('sys/color/success');
      case ToastAppearance.Warning:
        return color('sys/color/warning');
      case ToastAppearance.Error:
        return color('sys/color/danger');
      /* istanbul ignore next */
      default:
        assertUnreachable(props.$appearance);
    }
  }};
  height: 24px;
  margin-right: 12px;
  min-width: 24px;
  width: 24px;
`;

export const TunedCloseIcon = styled(Icon)`
  height: 22px;
  width: 22px;
`;

export const TunedToastButton = styled(ToastButton)``;