Fix terminology around scale/scale ratio + change function to 'scale'…

… from 'adjustFontSizeToMS'
KyleAMathews · Sep 22, 2016 · 3c1bc4c · 3c1bc4c
1 parent a97488f
commit 3c1bc4c
Show file tree

Hide file tree

Showing 37 changed files with 132 additions and 122 deletions.
diff --git 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
@@ -31,3 +31,4 @@ npm-debug*
 examples/bundle.js
 .gatsby-context.js
 .idea/
+www/public
diff --git 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
@@ -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
@@ -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'
 
 <div>
   <h1
     style={{
-      ...adjustFontSizeToMSValue(1.5),
+      ...scale(1.5),
     }}
   >
     Hello world

diff --git 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
@@ -228,10 +228,10 @@ class DesignTool extends React.Component {
           <SectionRow>
             <ModularScaleTool
               key='scale'
-              scale={this.state.options.scale}
+              scaleRatio={this.state.options.scaleRatio}
               onChange={(newScale) => {
                 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
@@ -8,11 +8,11 @@ class ModularScale extends React.Component {
   render () {
     return (
       <SectionTool
-        title="Scale"
+        title="Scale Ratio"
       >
         <NumberEditor
-          unit="scale"
-          value={msToRatio(this.props.scale)}
+          unit="ratio"
+          value={msToRatio(this.props.scaleRatio)}
           min={1}
           max={6}
           step={0.1}

diff --git a/packages/typography-theme-alton/src/index.js b/packages/typography-theme-alton/src/index.js
@@ -32,7 +32,7 @@ const theme: OptionsType = {
   headerWeight: 700,
   bodyWeight: 400,
   boldWeight: 700,
-  overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => {
+  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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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),