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