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

100% Statements 28/28
100% Branches 26/26
100% Functions 6/6
100% Lines 20/20

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
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110108x
    108x

    108x

    108x

    108x

    108x

    108x

    108x

    108x

    108x

    108x

    108x
    2099x

    108x
    374x

    108x
    367x
    367x
    367x
    367x

     import styled, { css, FlattenSimpleInterpolation } from 'styled-components'
    import { colors } from '../_styles/colors'
    import { Intent, TypographyProps, Weight } from './Typography.types'

    export interface StyledTypographyProps extends Omit<TypographyProps, 'color'> {
      $color?: TypographyProps['color']
    }

    export const typographyWeights: {
      [key in Weight]: number
    } = {
      regular: 400,
      semibold: 600,
      bold: 700,
    }

    export const typographyLineHeight: Record<Intent, number> = {
      small: 16,
      body: 20,
      h1: 32,
      h2: 28,
      h3: 24,
      label: 20,
    }

    const body = css`
      font-family: inherit;
      font-size: 14px;
      font-weight: ${typographyWeights.regular};
      letter-spacing: 0.15px;
      line-height: ${typographyLineHeight.body}px;
    `

    const h1 = css`
      font-family: inherit;
      font-size: 24px;
      font-weight: ${typographyWeights.bold};
      letter-spacing: 0.15px;
      line-height: ${typographyLineHeight.h1}px;
    `

    const h2 = css`
      font-family: inherit;
      font-size: 20px;
      font-weight: ${typographyWeights.semibold};
      letter-spacing: 0.15px;
      line-height: ${typographyLineHeight.h2}px;
    `

    const h3 = css`
      font-family: inherit;
      font-size: 16px;
      font-weight: ${typographyWeights.semibold};
      letter-spacing: 0.15px;
      line-height: ${typographyLineHeight.h3}px;
    `

    const small = css`
      font-family: inherit;
      font-size: 12px;
      font-weight: ${typographyWeights.regular};
      letter-spacing: 0.25px;
      line-height: ${typographyLineHeight.small}px;
    `

    const label = css`
      font-family: inherit;
      font-size: 14px;
      font-weight: ${typographyWeights.bold};
      letter-spacing: 0.15px;
      line-height: ${typographyLineHeight.label}px;
    `

    const typographyIntents: {
      [key in Intent]: FlattenSimpleInterpolation
    } = {
      body,
      h1,
      h2,
      h3,
      small,
      label,
    }

    export function getTypographyIntent(intent: Intent) {
      return typographyIntents[intent]
    }

    export const semiboldRules = () => {
      return css`
        & > strong,
        > b {
          font-weight: 600;
        }
      `
    }

    export const StyledTypography = styled.span<StyledTypographyProps>`
      ${({ intent = 'body' }) => typographyIntents[intent]}
      color: ${({ $color = 'gray15' }) => colors[$color]};
      font-style: ${({ italic = false }) => (italic ? 'italic' : 'inherit')};
      font-weight: ${({ weight }) => weight && typographyWeights[weight]};
      ${semiboldRules}

      em,
      i {
        font-style: italic;
      }
    `