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 || ''}` | ||
|  | } |