# All files / src/Toast Toast.styles.ts

100% Statements 14/14
100% Branches 10/10
100% Functions 2/2
100% Lines 14/14

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    432x
    2x
    2x

    2x
    2x
    2x
    2x

    2x

    4x
    4x

    2x

    4x
    4x

    2x

     import styled from 'styled-components'
    import { Button } from '../Button'
    import {
      getTypographyIntent,
      typographyWeights,
    } from '../Typography/Typography.styles'
    import { borderRadius } from '../_styles/borderRadius'
    import { colors } from '../_styles/colors'
    import { getShadow } from '../_styles/shadows'
    import { spacing } from '../_styles/spacing'
    import { ToastVariant } from './Toast.types'

    export const StyledToast = styled.div<{ $variant: ToastVariant }>`
      ${getShadow(4, 'bottom')}

      align-items: center;
      background-color: ${({ $variant }) =>
        $variant === 'success' ? colors.green30 : colors.red50};
      border-radius: ${borderRadius.md}px;
      color: ${colors.white};
      display: flex;
      min-height: 48px;
      padding: ${spacing.md}px ${spacing.xl}px;
      width: 550px;
    `

    // $legacy is direct string inside Toast. Next is with subcomponents
    export const StyledToastText = styled.span<{ $legacy?: boolean }>`
      ${getTypographyIntent('body')}
      font-weight: ${typographyWeights.semibold};
      overflow: hidden;

      ${({ $legacy }) =>
        $legacy ? `margin-left: ${spacing.lg}px;` : `padding: 0 ${spacing.lg}px;`}
    `

    export const StyledToastButton = styled(Button)`
      line-height: 0;
      color: ${colors.white};
      padding: 0;
      margin-left: auto;
    `