From 3c1bc4c87e9123b92753f4f8bfeef1e92f0922fe Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Wed, 21 Sep 2016 21:25:42 -0700 Subject: [PATCH] Fix terminology around scale/scale ratio + change function to 'scale' from 'adjustFontSizeToMS' --- .flowconfig | 11 +++++++-- .gitignore | 1 + README.md | 6 ++--- Types.js | 13 ++++++---- docs/what.md | 7 +++--- package.json | 24 +++++++++---------- .../typography-design-tools/src/DesignTool.js | 4 ++-- .../src/ModularScaleTool.js | 6 ++--- packages/typography-theme-alton/src/index.js | 4 ++-- .../typography-theme-bootstrap/src/index.js | 16 ++++++------- .../typography-theme-de-young/src/index.js | 2 +- .../typography-theme-doelger/src/index.js | 5 ++-- .../typography-theme-elk-glen/src/index.js | 4 ++-- .../typography-theme-fairy-gates/src/index.js | 4 ++-- .../typography-theme-funston/src/index.js | 4 ++-- .../typography-theme-grand-view/src/index.js | 4 ++-- packages/typography-theme-irving/src/index.js | 6 ++--- packages/typography-theme-judah/src/index.js | 4 ++-- .../typography-theme-kirkham/src/index.js | 4 ++-- .../typography-theme-lincoln/src/index.js | 4 ++-- packages/typography-theme-moraga/src/index.js | 6 ++--- .../typography-theme-ocean-beach/src/index.js | 4 ++-- .../typography-theme-parnassus/src/index.js | 4 ++-- .../typography-theme-st-annes/src/index.js | 4 ++-- .../typography-theme-stern-grove/src/index.js | 4 ++-- .../typography-theme-stow-lake/src/index.js | 4 ++-- packages/typography-theme-sutro/src/index.js | 8 +++---- .../typography-theme-twin-peaks/src/index.js | 4 ++-- .../src/index.js | 16 ++++++------- .../src/index.js | 4 ++-- .../src/index.js | 10 ++++---- .../src/index.js | 4 ++-- .../src/index.js | 4 ++-- .../src/index.js | 4 ++-- packages/typography/README.md | 15 +++++++----- packages/typography/src/index.js | 14 ++++------- packages/typography/src/utils/createStyles.js | 12 +++++----- 37 files changed, 132 insertions(+), 122 deletions(-) diff --git a/.flowconfig b/.flowconfig index 389f89a9..9ff2061a 100644 --- a/.flowconfig +++ b/.flowconfig @@ -1,7 +1,14 @@ +[version] +0.32.0 + [ignore] -.*/website/.* +.*/test/.* +.*/www/.* +.*/node_modules/typography/.* +.*/node_modules/fbjs/.* +.*/node_modules/react-side-effect/.* + [include] -./* [libs] diff --git a/.gitignore b/.gitignore index 07973feb..8653d662 100644 --- a/.gitignore +++ b/.gitignore @@ -31,3 +31,4 @@ npm-debug* examples/bundle.js .gatsby-context.js .idea/ +www/public diff --git a/README.md b/README.md index 8af88bc0..b5b70ebd 100644 --- a/README.md +++ b/README.md @@ -206,12 +206,12 @@ When creating a new instance of Typography, you can pass in an * **title**: The theme title. * **baseFontSize**: The base font size in pixels, defaults to `16px`. * **baseLineHeight**: The base line height using the css unitless number, defaults to `1.5`. -* **scale**: The "scale ratio" for the theme. This scale is the ratio - between the `h1` font size and the `baseFontSize`. So if the scale is `2` +* **scaleRatio**: The "scale ratio" for the theme. This value is the ratio + between the `h1` font size and the `baseFontSize`. So if the scale ratio is `2` and the `baseFontSize` is `16px` then the `h1` font size is `32px`. ```javascript { - scale: 2, + scaleRatio: 2, } ``` * **googleFonts**: An array specifying Google Fonts for this project. diff --git a/Types.js b/Types.js index 8d6860f2..9637bbce 100644 --- a/Types.js +++ b/Types.js @@ -1,11 +1,16 @@ // @flow type GoogleFontsType = {name: string; styles: string[]} +type VerticalRhythmType = { + rhythm: (value: number) => string, + scale: (value: number) => Object, + adjustFontSizeTo: (value?: number | string) => Object, +} export type OptionsType = { title: string, baseFontSize?: string, baseLineHeight?: number, - scale?: number, + scaleRatio?: number, googleFonts?: GoogleFontsType[], headerFontFamily?: string[], bodyFontFamily?: string[], @@ -16,15 +21,15 @@ export type OptionsType = { headerWeight?: number | string, bodyWeight?: number | string, boldWeight?: number | string, - blockMarginBottom?: number | string, + blockMarginBottom?: number, includeNormalize?: boolean, overrideStyles?: ( - verticalRhythm: mixed, // TODO Create flow type for compass-vertical-rhythm and import here. + verticalRhythm: VerticalRhythmType, // TODO Create flow type for compass-vertical-rhythm and import here. options: OptionsType, styles: mixed, ) => Object, overrideThemeStyles?: ( - verticalRhythm: mixed, // TODO Create flow type for compass-vertical-rhythm and import here. + verticalRhythm: VerticalRhythmType, // TODO Create flow type for compass-vertical-rhythm and import here. options: OptionsType, styles: mixed, ) => Object, diff --git a/docs/what.md b/docs/what.md index 76695c6b..7af48de5 100644 --- a/docs/what.md +++ b/docs/what.md @@ -31,16 +31,15 @@ font size will be `32px`. If you decide to change the scale ratio to Typography.js, all sizes should be set using a scale value so all non-base-font-size text can be resized together. -You can set custom font sizes using the `adjustFontSizeToMSValue` -function. +You can set custom font sizes using the `scale` function. ```javascript -import { adjustFontSizeToMSValue } from '../utils/typography' +import { scale } from '../utils/typography'

Hello world diff --git a/package.json b/package.json index 96f2e44e..4eb2e8c4 100644 --- a/package.json +++ b/package.json @@ -1,22 +1,22 @@ { "devDependencies": { - "babel-cli": "^6.10.1", + "babel-cli": "^6.14.0", "babel-eslint": "^6.1.2", - "babel-plugin-transform-flow-strip-types": "^6.8.0", + "babel-plugin-transform-flow-strip-types": "^6.14.0", "babel-plugin-transform-object-rest-spread": "^6.8.0", - "babel-preset-es2015": "^6.9.0", + "babel-preset-es2015": "^6.14.0", "babel-preset-stage-0": "^6.5.0", - "eslint": "^3.0.1", - "eslint-config-airbnb": "^9.0.1", - "eslint-plugin-flow-vars": "^0.4.0", - "eslint-plugin-import": "^1.10.2", - "eslint-plugin-jsx-a11y": "^2.0.1", - "eslint-plugin-react": "^5.2.2", - "flow-bin": "^0.28.0", - "glob": "^7.0.5", + "eslint": "^3.5.0", + "eslint-config-airbnb": "^11.1.0", + "eslint-plugin-flow-vars": "^0.5.0", + "eslint-plugin-import": "^1.15.0", + "eslint-plugin-jsx-a11y": "^2.2.2", + "eslint-plugin-react": "^6.3.0", + "flow-bin": "^0.32.0", + "glob": "^7.1.0", "json2md": "^1.5.2", "lerna": "^2.0.0-beta.24", - "lodash": "^4.13.1", + "lodash": "^4.16.1", "phantom": "^2.1.12", "phantomjs-prebuilt": "^2.1.7" }, diff --git a/packages/typography-design-tools/src/DesignTool.js b/packages/typography-design-tools/src/DesignTool.js index bc0b0918..52ec9ab8 100644 --- a/packages/typography-design-tools/src/DesignTool.js +++ b/packages/typography-design-tools/src/DesignTool.js @@ -228,10 +228,10 @@ class DesignTool extends React.Component { { const newOptions = { ...this.state.options } - newOptions.scale = newScale + newOptions.scaleRatio = newScale this.setState({ options: newOptions }) }} /> diff --git a/packages/typography-design-tools/src/ModularScaleTool.js b/packages/typography-design-tools/src/ModularScaleTool.js index 8a1430d0..e58d524f 100644 --- a/packages/typography-design-tools/src/ModularScaleTool.js +++ b/packages/typography-design-tools/src/ModularScaleTool.js @@ -8,11 +8,11 @@ class ModularScale extends React.Component { render () { return ( { + overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => { const vr = verticalRhythm({ baseFontSize: '16px', baseLineHeight: '28.44px', @@ -47,7 +47,7 @@ const theme: OptionsType = { color: gray(options.bodyGray), }, blockquote: { - ...adjustFontSizeToMSValue(1/5), + ...scale(1/5), color: gray(41), fontStyle: 'italic', paddingLeft: rhythm(13/16), diff --git a/packages/typography-theme-bootstrap/src/index.js b/packages/typography-theme-bootstrap/src/index.js index 343a6f33..2e322bd1 100644 --- a/packages/typography-theme-bootstrap/src/index.js +++ b/packages/typography-theme-bootstrap/src/index.js @@ -23,18 +23,18 @@ const theme: OptionsType = { bodyWeight: 400, headerWeight: 500, boldWeight: 'bold', - overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => ({ + overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => ({ body: { color: gray(23, 204), }, - h1: adjustFontSizeToMSValue(4/4), - h2: adjustFontSizeToMSValue(3/4), - h3: adjustFontSizeToMSValue(2/4), - h4: adjustFontSizeToMSValue(1/6), - h5: adjustFontSizeToMSValue(-1/6), - h6: adjustFontSizeToMSValue(-2/6), + h1: scale(4/4), + h2: scale(3/4), + h3: scale(2/4), + h4: scale(1/6), + h5: scale(-1/6), + h6: scale(-2/6), blockquote: { - ...adjustFontSizeToMSValue(1/4), + ...scale(1/4), borderLeft: `${rhythm(1/6)} solid #eceeef`, paddingTop: rhythm(1/3), paddingBottom: rhythm(1/3), diff --git a/packages/typography-theme-de-young/src/index.js b/packages/typography-theme-de-young/src/index.js index 43a23037..6e9a1fae 100644 --- a/packages/typography-theme-de-young/src/index.js +++ b/packages/typography-theme-de-young/src/index.js @@ -32,7 +32,7 @@ const theme: OptionsType = { headerWeight: 500, bodyWeight: 400, boldWeight: 700, - overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => { + overrideStyles: ({ rhythm }) => { const vr = verticalRhythm({ baseFontSize: '18px', baseLineHeight: '29.7px', diff --git a/packages/typography-theme-doelger/src/index.js b/packages/typography-theme-doelger/src/index.js index 09c421d7..71655f05 100644 --- a/packages/typography-theme-doelger/src/index.js +++ b/packages/typography-theme-doelger/src/index.js @@ -30,7 +30,7 @@ const theme: OptionsType = { headerWeight: '700', bodyWeight: 400, boldWeight: 700, - overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => { + overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => { const linkColor = '#ff483b' return { a: { @@ -49,7 +49,7 @@ const theme: OptionsType = { }, // Blockquote styles. blockquote: { - ...adjustFontSizeToMSValue(1/5), + ...scale(1/5), borderLeft: `${rhythm(6/16)} solid ${linkColor}`, color: gray(35), paddingLeft: rhythm(10/16), @@ -83,4 +83,3 @@ const theme: OptionsType = { } export default theme - diff --git a/packages/typography-theme-elk-glen/src/index.js b/packages/typography-theme-elk-glen/src/index.js index 11ff72e0..3b62df2b 100644 --- a/packages/typography-theme-elk-glen/src/index.js +++ b/packages/typography-theme-elk-glen/src/index.js @@ -31,7 +31,7 @@ const theme: OptionsType = { headerWeight: '700', bodyWeight: 400, boldWeight: 700, - overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => { + overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => { const linkColor = '#292d35' const vr = verticalRhythm({ baseFontSize: '17px', @@ -53,7 +53,7 @@ const theme: OptionsType = { }, // Blockquote styles. blockquote: { - ...adjustFontSizeToMSValue(1/5), + ...scale(1/5), borderLeft: `${rhythm(6/16)} solid ${linkColor}`, color: gray(35), paddingLeft: rhythm(10/16), diff --git a/packages/typography-theme-fairy-gates/src/index.js b/packages/typography-theme-fairy-gates/src/index.js index 6fdd8c40..db25d534 100644 --- a/packages/typography-theme-fairy-gates/src/index.js +++ b/packages/typography-theme-fairy-gates/src/index.js @@ -31,7 +31,7 @@ const theme: OptionsType = { headerWeight: '600', bodyWeight: 400, boldWeight: 700, - overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => { + overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => { const linkColor = '#1ca086' const vr = verticalRhythm({ baseFontSize: '17px', @@ -54,7 +54,7 @@ const theme: OptionsType = { }, // Blockquote styles. blockquote: { - ...adjustFontSizeToMSValue(1/5), + ...scale(1/5), borderLeft: `${rhythm(6/16)} solid ${linkColor}`, color: gray(35), paddingLeft: rhythm(10/16), diff --git a/packages/typography-theme-funston/src/index.js b/packages/typography-theme-funston/src/index.js index ddbabfe1..185db73b 100644 --- a/packages/typography-theme-funston/src/index.js +++ b/packages/typography-theme-funston/src/index.js @@ -29,7 +29,7 @@ const theme: OptionsType = { headerWeight: '400', bodyWeight: 400, boldWeight: 700, - overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => ({ + overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => ({ html: { '-webkit-font-smoothing': 'antialiased', }, @@ -43,7 +43,7 @@ const theme: OptionsType = { color: '#3498DB', }, blockquote: { - ...adjustFontSizeToMSValue(1/5), + ...scale(1/5), color: gray(40), paddingLeft: rhythm(13/16), marginLeft: rhythm(-1), diff --git a/packages/typography-theme-grand-view/src/index.js b/packages/typography-theme-grand-view/src/index.js index a602a9ff..6c519032 100644 --- a/packages/typography-theme-grand-view/src/index.js +++ b/packages/typography-theme-grand-view/src/index.js @@ -30,7 +30,7 @@ const theme: OptionsType = { headerWeight: 700, bodyWeight: 400, boldWeight: 700, - overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => ({ + overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => ({ a: { color: '#d65947', textDecoration: 'none', @@ -42,7 +42,7 @@ const theme: OptionsType = { marginTop: rhythm(2), }, blockquote: { - ...adjustFontSizeToMSValue(1/5), + ...scale(1/5), color: gray(41), paddingLeft: rhythm(13/16), marginLeft: 0, diff --git a/packages/typography-theme-irving/src/index.js b/packages/typography-theme-irving/src/index.js index ecf15c9d..a22cef1b 100644 --- a/packages/typography-theme-irving/src/index.js +++ b/packages/typography-theme-irving/src/index.js @@ -30,7 +30,7 @@ const theme: OptionsType = { headerWeight: 700, bodyWeight: 400, boldWeight: 700, - overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => { + overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => { const styles = { a: { color: gray(options.bodyGray), @@ -39,7 +39,7 @@ const theme: OptionsType = { color: '#3498DB', }, blockquote: { - ...adjustFontSizeToMSValue(1/5), + ...scale(1/5), color: gray(30), paddingLeft: rhythm(3/4), marginLeft: 0, @@ -50,7 +50,7 @@ const theme: OptionsType = { marginBottom: rhythm(1/2), }, table: { - ...adjustFontSizeToMSValue(-1/5), + ...scale(-1/5), }, // Mobile styles. [TABLET_MEDIA_QUERY]: { diff --git a/packages/typography-theme-judah/src/index.js b/packages/typography-theme-judah/src/index.js index b0ba6f9c..7f3de5ca 100644 --- a/packages/typography-theme-judah/src/index.js +++ b/packages/typography-theme-judah/src/index.js @@ -31,7 +31,7 @@ const theme: OptionsType = { headerWeight: 400, bodyWeight: 400, boldWeight: 700, - overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => ({ + overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => ({ a: { color: '#e51937', textDecoration: 'none', @@ -41,7 +41,7 @@ const theme: OptionsType = { textDecoration: 'none', }, blockquote: { - ...adjustFontSizeToMSValue(1/5), + ...scale(1/5), color: gray(0), fontStyle: 'italic', paddingLeft: rhythm(13/16), diff --git a/packages/typography-theme-kirkham/src/index.js b/packages/typography-theme-kirkham/src/index.js index ba95ea53..be626a52 100644 --- a/packages/typography-theme-kirkham/src/index.js +++ b/packages/typography-theme-kirkham/src/index.js @@ -31,12 +31,12 @@ const theme: OptionsType = { headerWeight: 700, bodyWeight: 400, boldWeight: 700, - overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => ({ + overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => ({ a: { color: '#9f392b', }, blockquote: { - ...adjustFontSizeToMSValue(1/5), + ...scale(1/5), color: gray(41), fontStyle: 'italic', paddingLeft: rhythm(13/16), diff --git a/packages/typography-theme-lincoln/src/index.js b/packages/typography-theme-lincoln/src/index.js index 16b3b486..500dd151 100644 --- a/packages/typography-theme-lincoln/src/index.js +++ b/packages/typography-theme-lincoln/src/index.js @@ -31,7 +31,7 @@ const theme: OptionsType = { headerWeight: '400', bodyWeight: 400, boldWeight: 700, - overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => { + overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => { const linkColor = '#134896' const vr = verticalRhythm({ baseFontSize: '17px', @@ -59,7 +59,7 @@ const theme: OptionsType = { }, // Blockquote styles. blockquote: { - ...adjustFontSizeToMSValue(1/5), + ...scale(1/5), borderLeft: `${rhythm(6/16)} solid ${linkColor}`, color: gray(35), paddingLeft: rhythm(10/16), diff --git a/packages/typography-theme-moraga/src/index.js b/packages/typography-theme-moraga/src/index.js index f0eeb551..258b565b 100644 --- a/packages/typography-theme-moraga/src/index.js +++ b/packages/typography-theme-moraga/src/index.js @@ -27,7 +27,7 @@ const theme: OptionsType = { headerWeight: '200', bodyWeight: 400, boldWeight: 700, - overrideStyles: ({ adjustFontSizeToMSValue, rhythm }, options) => { + overrideStyles: ({ scale, rhythm }, options) => { const vr = verticalRhythm({ baseFontSize: '16px', baseLineHeight: '24.88px', @@ -47,7 +47,7 @@ const theme: OptionsType = { textDecoration: 'underline', }, blockquote: { - ...adjustFontSizeToMSValue(1/5), + ...scale(1/5), color: gray(40), paddingLeft: rhythm(3/4), marginLeft: 0, @@ -64,7 +64,7 @@ const theme: OptionsType = { paddingLeft: rhythm(1/2), }, table: { - ...adjustFontSizeToMSValue(-1/5), + ...scale(-1/5), }, }, } diff --git a/packages/typography-theme-ocean-beach/src/index.js b/packages/typography-theme-ocean-beach/src/index.js index f5d1f9ba..b9b41207 100644 --- a/packages/typography-theme-ocean-beach/src/index.js +++ b/packages/typography-theme-ocean-beach/src/index.js @@ -31,7 +31,7 @@ const theme: OptionsType = { headerWeight: 700, bodyWeight: 400, boldWeight: 700, - overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => { + overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => { const linkColor = '#950451' const vr = verticalRhythm({ baseFontSize: '17px', @@ -58,7 +58,7 @@ const theme: OptionsType = { }, // Blockquote styles. blockquote: { - ...adjustFontSizeToMSValue(1/5), + ...scale(1/5), borderLeft: `${rhythm(6/16)} solid ${linkColor}`, color: gray(35), paddingLeft: rhythm(10/16), diff --git a/packages/typography-theme-parnassus/src/index.js b/packages/typography-theme-parnassus/src/index.js index 1bd41cd3..a9ee43be 100644 --- a/packages/typography-theme-parnassus/src/index.js +++ b/packages/typography-theme-parnassus/src/index.js @@ -32,7 +32,7 @@ const theme: OptionsType = { headerWeight: 800, bodyWeight: 400, boldWeight: 700, - overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => { + overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => { const vr = verticalRhythm({ baseFontSize: '15px', baseLineHeight: '27.35px', @@ -51,7 +51,7 @@ const theme: OptionsType = { marginTop: rhythm(2), }, blockquote: { - ...adjustFontSizeToMSValue(1/5), + ...scale(1/5), color: gray(41), paddingLeft: rhythm(18/16), marginLeft: 0, diff --git a/packages/typography-theme-st-annes/src/index.js b/packages/typography-theme-st-annes/src/index.js index b3928f0c..aed43db0 100644 --- a/packages/typography-theme-st-annes/src/index.js +++ b/packages/typography-theme-st-annes/src/index.js @@ -30,7 +30,7 @@ const theme: OptionsType = { headerWeight: 600, bodyWeight: 400, boldWeight: 700, - overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => ({ + overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => ({ a: { color: '#fb251b', textDecoration: 'none', @@ -42,7 +42,7 @@ const theme: OptionsType = { marginTop: rhythm(2), }, blockquote: { - ...adjustFontSizeToMSValue(1/5), + ...scale(1/5), color: gray(41), paddingLeft: rhythm(18/16), marginLeft: 0, diff --git a/packages/typography-theme-stern-grove/src/index.js b/packages/typography-theme-stern-grove/src/index.js index 313afdf6..bdb6ab57 100644 --- a/packages/typography-theme-stern-grove/src/index.js +++ b/packages/typography-theme-stern-grove/src/index.js @@ -22,7 +22,7 @@ const theme: OptionsType = { headerWeight: 400, bodyWeight: 400, boldWeight: 700, - overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => ({ + overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => ({ a: { color: '#07e', textDecoration: 'none', @@ -31,7 +31,7 @@ const theme: OptionsType = { color: '#e32', }, blockquote: { - ...adjustFontSizeToMSValue(1/5), + ...scale(1/5), background: gray(97), color: gray(31), paddingLeft: rhythm(14/16), diff --git a/packages/typography-theme-stow-lake/src/index.js b/packages/typography-theme-stow-lake/src/index.js index a1a705a2..c37cf041 100644 --- a/packages/typography-theme-stow-lake/src/index.js +++ b/packages/typography-theme-stow-lake/src/index.js @@ -30,7 +30,7 @@ const theme: OptionsType = { headerWeight: 700, bodyWeight: 400, boldWeight: 700, - overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => ({ + overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => ({ a: { color: '#4665b7', textDecoration: 'none', @@ -42,7 +42,7 @@ const theme: OptionsType = { marginTop: rhythm(2), }, blockquote: { - ...adjustFontSizeToMSValue(1/5), + ...scale(1/5), color: gray(41), paddingLeft: rhythm(18/16), marginLeft: 0, diff --git a/packages/typography-theme-sutro/src/index.js b/packages/typography-theme-sutro/src/index.js index 903dfaf5..4b94e54f 100644 --- a/packages/typography-theme-sutro/src/index.js +++ b/packages/typography-theme-sutro/src/index.js @@ -31,7 +31,7 @@ const theme: OptionsType = { headerWeight: 700, bodyWeight: 300, boldWeight: 700, - overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => ({ + overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => ({ a: { color: '#f92300', textDecoration: 'none', @@ -40,7 +40,7 @@ const theme: OptionsType = { textDecoration: 'underline', }, blockquote: { - ...adjustFontSizeToMSValue(1/5), + ...scale(1/5), color: gray(41), fontStyle: 'italic', paddingLeft: rhythm(13/16), @@ -76,14 +76,14 @@ const theme: OptionsType = { }, [TABLET_MEDIA_QUERY]: { h1: { - ...adjustFontSizeToMSValue(5/5), + ...scale(5/5), }, }, 'h1,h2,h3,h4,h5,h6': { marginTop: rhythm(2), }, h1: { - ...adjustFontSizeToMSValue(6/5), + ...scale(6/5), letterSpacing: '-2px', }, h6: { diff --git a/packages/typography-theme-twin-peaks/src/index.js b/packages/typography-theme-twin-peaks/src/index.js index d074ee07..f32780af 100644 --- a/packages/typography-theme-twin-peaks/src/index.js +++ b/packages/typography-theme-twin-peaks/src/index.js @@ -31,7 +31,7 @@ const theme: OptionsType = { headerWeight: '700', bodyWeight: 400, boldWeight: 600, - overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => { + overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => { const linkColor = '#ff5700' const vr = verticalRhythm({ baseFontSize: '19px', @@ -62,7 +62,7 @@ const theme: OptionsType = { }, // Blockquote styles. blockquote: { - ...adjustFontSizeToMSValue(1/5), + ...scale(1/5), borderLeft: `${rhythm(3/16)} solid ${linkColor}`, color: gray(41), paddingLeft: rhythm(13/16), diff --git a/packages/typography-theme-us-web-design-standards/src/index.js b/packages/typography-theme-us-web-design-standards/src/index.js index 02f5cb1b..57066ba7 100644 --- a/packages/typography-theme-us-web-design-standards/src/index.js +++ b/packages/typography-theme-us-web-design-standards/src/index.js @@ -30,14 +30,14 @@ const theme: OptionsType = { headerWeight: 700, bodyWeight: 400, boldWeight: 700, - overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => ({ - h1: adjustFontSizeToMSValue(5/5), - h2: adjustFontSizeToMSValue(3/5), - h3: adjustFontSizeToMSValue(1/5), - h4: adjustFontSizeToMSValue(0/5), - h5: adjustFontSizeToMSValue(-1/8), + overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => ({ + h1: scale(5/5), + h2: scale(3/5), + h3: scale(1/5), + h4: scale(0/5), + h5: scale(-1/8), h6: { - ...adjustFontSizeToMSValue(-2/8), + ...scale(-2/8), fontFamily: options.bodyFontFamily.join(','), fontWeight: options.bodyWeight, textTransform: 'uppercase', @@ -49,7 +49,7 @@ const theme: OptionsType = { color: '#4c2c92', }, blockquote: { - ...adjustFontSizeToMSValue(1/4), + ...scale(1/4), borderLeft: `${rhythm(1/6)} solid`, borderColor: gray(93), paddingTop: rhythm(1/3), diff --git a/packages/typography-theme-wordpress-2012/src/index.js b/packages/typography-theme-wordpress-2012/src/index.js index bc8e0feb..eadf04d0 100644 --- a/packages/typography-theme-wordpress-2012/src/index.js +++ b/packages/typography-theme-wordpress-2012/src/index.js @@ -24,7 +24,7 @@ const theme: OptionsType = { headerWeight: '700', bodyWeight: 400, boldWeight: 700, - overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => ({ + overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => ({ blockquote: { fontStyle: 'italic', paddingLeft: rhythm(1), @@ -49,7 +49,7 @@ const theme: OptionsType = { marginLeft: rhythm(1.5), }, table: { - ...adjustFontSizeToMSValue(-1/5), + ...scale(-1/5), color: gray(46), }, th: { diff --git a/packages/typography-theme-wordpress-2013/src/index.js b/packages/typography-theme-wordpress-2013/src/index.js index cbf58bd1..c0d73f6b 100644 --- a/packages/typography-theme-wordpress-2013/src/index.js +++ b/packages/typography-theme-wordpress-2013/src/index.js @@ -30,13 +30,13 @@ const theme: OptionsType = { headerWeight: '700', bodyWeight: 400, boldWeight: 700, - overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => ({ + overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => ({ h1: { - ...adjustFontSizeToMSValue(8/5), + ...scale(8/5), }, [TABLET_MEDIA_QUERY]: { h1: { - ...adjustFontSizeToMSValue(5/5), + ...scale(5/5), }, }, a: { @@ -56,7 +56,7 @@ const theme: OptionsType = { paddingLeft: rhythm(1.5), }, blockquote: { - ...adjustFontSizeToMSValue(1/5), + ...scale(1/5), fontWeight: 300, fontStyle: 'italic', marginLeft: rhythm(1.5), @@ -72,7 +72,7 @@ const theme: OptionsType = { marginBottom: rhythm(1.25), }, table: { - ...adjustFontSizeToMSValue(-1/5), + ...scale(-1/5), }, th: { fontWeight: options.boldWeight, diff --git a/packages/typography-theme-wordpress-2014/src/index.js b/packages/typography-theme-wordpress-2014/src/index.js index 5e999f1a..450274bf 100644 --- a/packages/typography-theme-wordpress-2014/src/index.js +++ b/packages/typography-theme-wordpress-2014/src/index.js @@ -25,7 +25,7 @@ const theme: OptionsType = { headerWeight: 600, bodyWeight: 400, boldWeight: 600, - overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => ({ + overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => ({ 'h1,h2,h3,h4,h5,h6': { marginTop: rhythm(1.5), marginBottom: rhythm(0.5), @@ -40,7 +40,7 @@ const theme: OptionsType = { }, // Blockquote styles. blockquote: { - ...adjustFontSizeToMSValue(1/5), + ...scale(1/5), fontWeight: 300, color: gray(46), fontStyle: 'italic', diff --git a/packages/typography-theme-wordpress-2015/src/index.js b/packages/typography-theme-wordpress-2015/src/index.js index 1e76f152..26ddbe0c 100644 --- a/packages/typography-theme-wordpress-2015/src/index.js +++ b/packages/typography-theme-wordpress-2015/src/index.js @@ -23,7 +23,7 @@ const theme: OptionsType = { headerWeight: '700', bodyWeight: 400, boldWeight: 700, - overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => ({ + overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => ({ 'h5,h6': { letterSpacing: '0.1em', textTransform: 'uppercase', @@ -44,7 +44,7 @@ const theme: OptionsType = { }, // Blockquote. blockquote: { - ...adjustFontSizeToMSValue(1/5), + ...scale(1/5), color: gray(41), fontStyle: 'italic', paddingLeft: rhythm(5/8), diff --git a/packages/typography-theme-wordpress-2016/src/index.js b/packages/typography-theme-wordpress-2016/src/index.js index e4110fe0..2a96a0d8 100644 --- a/packages/typography-theme-wordpress-2016/src/index.js +++ b/packages/typography-theme-wordpress-2016/src/index.js @@ -34,12 +34,12 @@ const theme: OptionsType = { headerWeight: 900, bodyWeight: 400, boldWeight: 700, - overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => ({ + overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => ({ h1: { fontFamily: ['Montserrat', 'sans-serif'].join(','), }, blockquote: { - ...adjustFontSizeToMSValue(1/5), + ...scale(1/5), color: gray(41), fontStyle: 'italic', paddingLeft: rhythm(13/16), diff --git a/packages/typography/README.md b/packages/typography/README.md index a406386a..b5b70ebd 100644 --- a/packages/typography/README.md +++ b/packages/typography/README.md @@ -45,7 +45,7 @@ import Typography from 'typography' const typography = new Typography({ baseFontSize: '18px', - baseLineHeight: '30px', + baseLineHeight: 1.666, headerFontFamily: ['Avenir Next', 'Helvetica Neue', 'Segoe UI', 'Helvetica', 'Arial', 'sans-serif'], bodyFontFamily: ['Georgia', 'serif'], // See below for the full list of options. @@ -88,7 +88,6 @@ increase the base font size slightly: import Typography from 'typography' import funstonTheme from 'typography-theme-funston' funstonTheme.baseFontSize = '22px' // was 20px. -funstonTheme.baseLineHeight = '31px' // was 28px. const typography = new Typography(funstonTheme) ``` @@ -207,12 +206,12 @@ When creating a new instance of Typography, you can pass in an * **title**: The theme title. * **baseFontSize**: The base font size in pixels, defaults to `16px`. * **baseLineHeight**: The base line height using the css unitless number, defaults to `1.5`. -* **scale**: The "scale ratio" for the theme. This scale is the ratio - between the `h1` font size and the `baseFontSize`. So if the scale is `2` +* **scaleRatio**: The "scale ratio" for the theme. This value is the ratio + between the `h1` font size and the `baseFontSize`. So if the scale ratio is `2` and the `baseFontSize` is `16px` then the `h1` font size is `32px`. ```javascript { - scale: 2, + scaleRatio: 2, } ``` * **googleFonts**: An array specifying Google Fonts for this project. @@ -255,7 +254,7 @@ to `20`. * **boldWeight**: Specify the font weight for "bold" (b, strong, dt, th) elements. Defaults to `bold`. * **blockMarginBottom**: Specify the default margin-bottom for block - elements. Defaults to one "rhythm unit" or the base line height. + elements. Defaults to one "rhythm unit" (i.e. the height of the base line height). * **includeNormalize**: Include normalize.css. Normalize.css is an excellent project which works to normalize the base browser CSS across browsers and serves as an excellent foundation @@ -299,6 +298,10 @@ overrideThemeStyles: ({ rhythm }, options, styles) => ({ }) ``` +## Related + +- [postcss-typography](https://github.com/BarryThePenguin/postcss-typography) + ## Developing Typography.js Typography.js is a monorepo facilitated by [Lerna](https://github.com/lerna/lerna). diff --git a/packages/typography/src/index.js b/packages/typography/src/index.js index 819577c4..0b073135 100644 --- a/packages/typography/src/index.js +++ b/packages/typography/src/index.js @@ -11,7 +11,7 @@ const typography = function (opts: OptionsType) { const defaults: OptionsType = { baseFontSize: '16px', baseLineHeight: 1.5, - scale: 2, + scaleRatio: 2, googleFonts: [], headerFontFamily: [ '-apple-system', @@ -45,19 +45,15 @@ const typography = function (opts: OptionsType) { // Add this function to the vertical rhythm object so it'll be passed around // as well and be available. Not related really but this is the easiest // way to pass around extra utility functions atm... :-\ - vr.adjustFontSizeToMSValue = (value: number) => { - // This doesn't pick the right scale if a theme has more than one scale. - // Perhaps add optional parameter for a width and it'll get the scale + vr.scale = (value: number) => { + // This doesn't pick the right scale ratio if a theme has more than one ratio. + // Perhaps add optional parameter for a width and it'll get the ratio // for this width. Tricky part is maxWidth could be set in non-pixels. const baseFont = options.baseFontSize.slice(0, -2) - const newFontSize = `${ms(value, options.scale) * baseFont}px` + const newFontSize = `${ms(value, options.scaleRatio) * baseFont}px` return vr.adjustFontSizeTo(newFontSize) } - // Depricated old names. - vr.fontSizeToMS = vr.adjustFontSizeToMSValue - vr.fontSizeToPx = vr.adjustFontSizeTo - return ({ options, ...vr, diff --git a/packages/typography/src/utils/createStyles.js b/packages/typography/src/utils/createStyles.js index 45847699..246eac41 100644 --- a/packages/typography/src/utils/createStyles.js +++ b/packages/typography/src/utils/createStyles.js @@ -195,12 +195,12 @@ module.exports = (vr: any, options: OptionsType) => { }) // Set header sizes. - const h1 = vr.adjustFontSizeToMSValue(5/5) - const h2 = vr.adjustFontSizeToMSValue(3/5) - const h3 = vr.adjustFontSizeToMSValue(2/5) - const h4 = vr.adjustFontSizeToMSValue(0/5) - const h5 = vr.adjustFontSizeToMSValue(-1/5) - const h6 = vr.adjustFontSizeToMSValue(-1.5/5) + const h1 = vr.scale(5/5) + const h2 = vr.scale(3/5) + const h3 = vr.scale(2/5) + const h4 = vr.scale(0/5) + const h5 = vr.scale(-1/5) + const h6 = vr.scale(-1.5/5) each([h1, h2, h3, h4, h5, h6], (header, i) => { styles = set(styles, `h${i + 1}.fontSize`, header.fontSize)