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

100% Statements 12/12
100% Branches 8/8
100% Functions 2/2
100% Lines 12/12

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
    5125x
    25x
    25x
    25x
    25x

    25x

    25x

    2x
    2x

    25x

    1x
    1x

     import { Clear } from '@procore/core-icons/dist'
    import styled, { css } from 'styled-components'
    import { getTypographyIntent } from '../Typography/Typography.styles'
    import { spacing } from '../_styles/spacing'
    import { PillColorPalets } from './Pill.colorPalette'
    import { PillColor } from './Pill.types'

    const pillButtonSize = 16

    export const StyledPill = styled.span<{ $color: PillColor }>`
      ${getTypographyIntent('small')}
      display: inline-block;
      padding: 1px ${spacing.sm}px;
      border: 1px solid;
      border-radius: 10px;
      font-weight: 600;

      & + & {
        margin-left: ${spacing.xs}px;
      }

      ${({ $color }) => {
        return css`
          background-color: ${PillColorPalets[$color].backgroundColor};
          border-color: ${PillColorPalets[$color].borderColor};
          color: ${PillColorPalets[$color].color};
        `
      }}
    `
    export const StyledRemove = styled(Clear)<{
      $color: PillColor
    }>`
      border-radius: 100%;
      cursor: pointer;
      flex: 0 0 auto;
      height: ${pillButtonSize}px;
      /* if pillButtonSize is 16 => 8px is the radios - 2px padding = 6px */
      margin: 0 -${pillButtonSize / 2 - spacing.xxs}px 0 ${spacing.xxs}px;
      width: ${pillButtonSize}px;
      vertical-align: top;

      ${({ $color }) => {
        return css`
          &:hover {
            background: ${PillColorPalets[$color].color};
            color: ${PillColorPalets[$color].backgroundColor};
          }
        `
      }}
    `