# All files / helpers modularScale.js

100% Statements 10/10
92.86% Branches 13/14
100% Functions 1/1
100% Lines 10/10

    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

    1x

    25x
    1x

    24x
    1x

    23x
    23x

    23x
    1x

    22x

     // @flow

    import stripUnit from './stripUnit'

    const ratioNames = {
      minorSecond: 1.067,
      majorSecond: 1.125,
      minorThird: 1.2,
      majorThird: 1.25,
      perfectFourth: 1.333,
      augFourth: 1.414,
      perfectFifth: 1.5,
      minorSixth: 1.6,
      goldenSection: 1.618,
      majorSixth: 1.667,
      minorSeventh: 1.778,
      majorSeventh: 1.875,
      octave: 2,
      majorTenth: 2.5,
      majorEleventh: 2.667,
      majorTwelfth: 3,
      doubleOctave: 4,
    }

    /** */
    type Ratio =
      | number
      | 'minorSecond'
      | 'majorSecond'
      | 'minorThird'
      | 'majorThird'
      | 'perfectFourth'
      | 'augFourth'
      | 'perfectFifth'
      | 'minorSixth'
      | 'goldenSection'
      | 'majorSixth'
      | 'minorSeventh'
      | 'majorSeventh'
      | 'octave'
      | 'majorTenth'
      | 'majorEleventh'
      | 'majorTwelfth'
      | 'doubleOctave'

    /**
     * Establish consistent measurements and spacial relationships throughout your projects by incrementing up or down a defined scale. We provide a list of commonly used scales as pre-defined variables, see below.
     * @example
     * // Styles as object usage
     * const styles = {
     *    // Increment two steps up the default scale
     *   'font-size': modularScale(2)
     * }
     *
     * // styled-components usage
     * const div = styled.div`
     *    // Increment two steps up the default scale
     *   font-size: ${modularScale(2)}
     * `
     *
     * // CSS in JS Output
     *
     * element {
     *   'font-size': '1.77689em'
     * }
     */
    function modularScale(steps: number, base?: number|string = '1em', ratio?: Ratio = 'perfectFourth') {
      if (typeof steps !== 'number') {
        throw new Error('Please provide a number of steps to the modularScale helper.')
      }
      if (typeof ratio === 'string' && !ratioNames[ratio]) {
        throw new Error('Please pass a number or one of the predefined scales to the modularScale helper as the ratio.')
      }

      const realBase = typeof base === 'string' ? stripUnit(base) : base
      const realRatio = typeof ratio === 'string' ? ratioNames[ratio] : ratio

      if (typeof realBase === 'string') {
        throw new Error(`Invalid value passed as base to modularScale, expected number or em string but got "${base}"`)
      }

      return `${realBase * (realRatio ** steps)}em`
    }

    export { ratioNames }
    export default modularScale