You can not select more than 25 topics
			Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
		
		
		
		
		
			
		
			
				
					73 lines
				
				1.8 KiB
			
		
		
			
		
	
	
					73 lines
				
				1.8 KiB
			| 
								 
											3 years ago
										 
									 | 
							
								// @flow
							 | 
						||
| 
								 | 
							
								import getValueAndUnit from './getValueAndUnit'
							 | 
						||
| 
								 | 
							
								import PolishedError from '../internalHelpers/_errors'
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								import type { ModularScaleRatio } from '../types/modularScaleRatio'
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								export 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,
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								function getRatio(ratioName: string): number {
							 | 
						||
| 
								 | 
							
								  return ratioNames[ratioName]
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								/**
							 | 
						||
| 
								 | 
							
								 * Establish consistent measurements and spacial relationships throughout your projects by incrementing an em or rem value up or down a defined scale. We provide a list of commonly used scales as pre-defined variables.
							 | 
						||
| 
								 | 
							
								 * @example
							 | 
						||
| 
								 | 
							
								 * // Styles as object usage
							 | 
						||
| 
								 | 
							
								 * const styles = {
							 | 
						||
| 
								 | 
							
								 *    // Increment two steps up the default scale
							 | 
						||
| 
								 | 
							
								 *   'fontSize': modularScale(2)
							 | 
						||
| 
								 | 
							
								 * }
							 | 
						||
| 
								 | 
							
								 *
							 | 
						||
| 
								 | 
							
								 * // styled-components usage
							 | 
						||
| 
								 | 
							
								 * const div = styled.div`
							 | 
						||
| 
								 | 
							
								 *    // Increment two steps up the default scale
							 | 
						||
| 
								 | 
							
								 *   fontSize: ${modularScale(2)}
							 | 
						||
| 
								 | 
							
								 * `
							 | 
						||
| 
								 | 
							
								 *
							 | 
						||
| 
								 | 
							
								 * // CSS in JS Output
							 | 
						||
| 
								 | 
							
								 *
							 | 
						||
| 
								 | 
							
								 * element {
							 | 
						||
| 
								 | 
							
								 *   'fontSize': '1.77689em'
							 | 
						||
| 
								 | 
							
								 * }
							 | 
						||
| 
								 | 
							
								 */
							 | 
						||
| 
								 | 
							
								export default function modularScale(
							 | 
						||
| 
								 | 
							
								  steps: number,
							 | 
						||
| 
								 | 
							
								  base?: number | string = '1em',
							 | 
						||
| 
								 | 
							
								  ratio?: ModularScaleRatio = 1.333,
							 | 
						||
| 
								 | 
							
								): string {
							 | 
						||
| 
								 | 
							
								  if (typeof steps !== 'number') {
							 | 
						||
| 
								 | 
							
								    throw new PolishedError(42)
							 | 
						||
| 
								 | 
							
								  }
							 | 
						||
| 
								 | 
							
								  if (typeof ratio === 'string' && !ratioNames[ratio]) {
							 | 
						||
| 
								 | 
							
								    throw new PolishedError(43)
							 | 
						||
| 
								 | 
							
								  }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  const [realBase, unit] = typeof base === 'string' ? getValueAndUnit(base) : [base, '']
							 | 
						||
| 
								 | 
							
								  const realRatio = typeof ratio === 'string' ? getRatio(ratio) : ratio
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  if (typeof realBase === 'string') {
							 | 
						||
| 
								 | 
							
								    throw new PolishedError(44, base)
							 | 
						||
| 
								 | 
							
								  }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  return `${realBase * realRatio ** steps}${unit || ''}`
							 | 
						||
| 
								 | 
							
								}
							 |