# All files / src/Token Token.styles.tsx

100% Statements 20/20
43.33% Branches 13/30
100% Functions 3/3
100% Lines 15/15

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
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    8915x
    15x
    15x
    15x
    15x
    15x

    15x

    15x

    15x

    205x
    205x

    205x
    205x

    205x
    205x

     import { Clear } from '@procore/core-icons/dist'
    import styled, { css } from 'styled-components'
    import { getTypographyIntent } from '../Typography/Typography.styles'
    import { colors } from '../_styles/colors'
    import { getEllipsis, getFocus } from '../_styles/mixins'
    import { spacing } from '../_styles/spacing'

    export const StyledLabel = styled.span`
      ${getTypographyIntent('body')}

      ${getEllipsis}

      flex: 0 1 auto;
    `

    export const StyledRemove = styled(Clear)`
      border-radius: 100%;
      cursor: pointer;
      flex: 0 0 auto;
      height: 16px;
      margin: 0 -${spacing.sm}px 0 ${spacing.sm}px;
      width: 16px;

      &:hover {
        background: ${colors.white};
        color: ${colors.blue40};
      }
    `

    export const StyledToken = styled.div<{
      $disabled: boolean
      $focused: boolean
      $error: boolean
    }>`
      align-items: center;
      background-color: ${colors.blue50};
      border-radius: 200px; // TODO investigate this magic number
      border: 1px solid transparent;
      color: ${colors.white};
      cursor: default;
      display: inline-flex;
      height: 24px;
      line-height: 1; // TODO investigate this magic number
      max-width: 360px; // TODO investigate this magic number
      min-width: 48px; // TODO investigate this magic number
      padding: ${spacing.xs}px ${spacing.md}px;

      &:hover,
      &.hover {
        background-color: ${colors.blue45};
      }

      ${({ $focused = false, $disabled = false }) =>
        $focused &&
        css`
          ${getFocus()}

          background-color: ${colors.blue45};

          ${
            !$disabled &&
            css`
              ${StyledRemove} {
                background-color: ${colors.white};
                color: ${colors.blue45};
              }
            `
          }}
        `}

      ${({ $disabled = false }) =>
        $disabled &&
        css`
          background-color: ${colors.gray70};
          border-color: transparent;
          box-shadow: none;
          pointer-events: none;
        `}

      ${({ $error = false }) =>
        $error &&
        css`
          &,
          &:hover {
            background-color: ${colors.red50};
          }
        `}
    `