Skip to content

Commit 3c1bc4c

Browse files
KyleAMathewsKyleAMathews
committed
Fix terminology around scale/scale ratio + change function to 'scale' from 'adjustFontSizeToMS'
1 parent a97488f commit 3c1bc4c

File tree

37 files changed

+132
-122
lines changed

37 files changed

+132
-122
lines changed

‎.flowconfig

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,14 @@
1+
[version]
2+
0.32.0
3+
14
[ignore]
2-
.*/website/.*
5+
.*/test/.*
6+
.*/www/.*
7+
.*/node_modules/typography/.*
8+
.*/node_modules/fbjs/.*
9+
.*/node_modules/react-side-effect/.*
10+
311
[include]
4-
./*
512

613
[libs]
714

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,3 +31,4 @@ npm-debug*
3131
examples/bundle.js
3232
.gatsby-context.js
3333
.idea/
34+
www/public

‎README.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -206,12 +206,12 @@ When creating a new instance of Typography, you can pass in an
206206
* **title**: The theme title.
207207
* **baseFontSize**: The base font size in pixels, defaults to `16px`.
208208
* **baseLineHeight**: The base line height using the css unitless number, defaults to `1.5`.
209-
* **scale**: The "scale ratio" for the theme. This scale is the ratio
210-
between the `h1` font size and the `baseFontSize`. So if the scale is `2`
209+
* **scaleRatio**: The "scale ratio" for the theme. This value is the ratio
210+
between the `h1` font size and the `baseFontSize`. So if the scale ratio is `2`
211211
and the `baseFontSize` is `16px` then the `h1` font size is `32px`.
212212
```javascript
213213
{
214-
scale: 2,
214+
scaleRatio: 2,
215215
}
216216
```
217217
* **googleFonts**: An array specifying Google Fonts for this project.

‎Types.js

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
11
// @flow
22
type GoogleFontsType = {name: string; styles: string[]}
3+
type VerticalRhythmType = {
4+
rhythm: (value: number) => string,
5+
scale: (value: number) => Object,
6+
adjustFontSizeTo: (value?: number | string) => Object,
7+
}
38

49
export type OptionsType = {
510
title: string,
611
baseFontSize?: string,
712
baseLineHeight?: number,
8-
scale?: number,
13+
scaleRatio?: number,
914
googleFonts?: GoogleFontsType[],
1015
headerFontFamily?: string[],
1116
bodyFontFamily?: string[],
@@ -16,15 +21,15 @@ export type OptionsType = {
1621
headerWeight?: number | string,
1722
bodyWeight?: number | string,
1823
boldWeight?: number | string,
19-
blockMarginBottom?: number | string,
24+
blockMarginBottom?: number,
2025
includeNormalize?: boolean,
2126
overrideStyles?: (
22-
verticalRhythm: mixed, // TODO Create flow type for compass-vertical-rhythm and import here.
27+
verticalRhythm: VerticalRhythmType, // TODO Create flow type for compass-vertical-rhythm and import here.
2328
options: OptionsType,
2429
styles: mixed,
2530
) => Object,
2631
overrideThemeStyles?: (
27-
verticalRhythm: mixed, // TODO Create flow type for compass-vertical-rhythm and import here.
32+
verticalRhythm: VerticalRhythmType, // TODO Create flow type for compass-vertical-rhythm and import here.
2833
options: OptionsType,
2934
styles: mixed,
3035
) => Object,

‎docs/what.md

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,16 +31,15 @@ font size will be `32px`. If you decide to change the scale ratio to
3131
Typography.js, all sizes should be set using a scale value so all
3232
non-base-font-size text can be resized together.
3333

34-
You can set custom font sizes using the `adjustFontSizeToMSValue`
35-
function.
34+
You can set custom font sizes using the `scale` function.
3635

3736
```javascript
38-
import { adjustFontSizeToMSValue } from '../utils/typography'
37+
import { scale } from '../utils/typography'
3938

4039
<div>
4140
<h1
4241
style={{
43-
...adjustFontSizeToMSValue(1.5),
42+
...scale(1.5),
4443
}}
4544
>
4645
Hello world

‎package.json

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
{
22
"devDependencies": {
3-
"babel-cli": "^6.10.1",
3+
"babel-cli": "^6.14.0",
44
"babel-eslint": "^6.1.2",
5-
"babel-plugin-transform-flow-strip-types": "^6.8.0",
5+
"babel-plugin-transform-flow-strip-types": "^6.14.0",
66
"babel-plugin-transform-object-rest-spread": "^6.8.0",
7-
"babel-preset-es2015": "^6.9.0",
7+
"babel-preset-es2015": "^6.14.0",
88
"babel-preset-stage-0": "^6.5.0",
9-
"eslint": "^3.0.1",
10-
"eslint-config-airbnb": "^9.0.1",
11-
"eslint-plugin-flow-vars": "^0.4.0",
12-
"eslint-plugin-import": "^1.10.2",
13-
"eslint-plugin-jsx-a11y": "^2.0.1",
14-
"eslint-plugin-react": "^5.2.2",
15-
"flow-bin": "^0.28.0",
16-
"glob": "^7.0.5",
9+
"eslint": "^3.5.0",
10+
"eslint-config-airbnb": "^11.1.0",
11+
"eslint-plugin-flow-vars": "^0.5.0",
12+
"eslint-plugin-import": "^1.15.0",
13+
"eslint-plugin-jsx-a11y": "^2.2.2",
14+
"eslint-plugin-react": "^6.3.0",
15+
"flow-bin": "^0.32.0",
16+
"glob": "^7.1.0",
1717
"json2md": "^1.5.2",
1818
"lerna": "^2.0.0-beta.24",
19-
"lodash": "^4.13.1",
19+
"lodash": "^4.16.1",
2020
"phantom": "^2.1.12",
2121
"phantomjs-prebuilt": "^2.1.7"
2222
},

‎packages/typography-design-tools/src/DesignTool.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -228,10 +228,10 @@ class DesignTool extends React.Component {
228228
<SectionRow>
229229
<ModularScaleTool
230230
key='scale'
231-
scale={this.state.options.scale}
231+
scaleRatio={this.state.options.scaleRatio}
232232
onChange={(newScale) => {
233233
const newOptions = { ...this.state.options }
234-
newOptions.scale = newScale
234+
newOptions.scaleRatio = newScale
235235
this.setState({ options: newOptions })
236236
}}
237237
/>

‎packages/typography-design-tools/src/ModularScaleTool.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,11 @@ class ModularScale extends React.Component {
88
render () {
99
return (
1010
<SectionTool
11-
title="Scale"
11+
title="Scale Ratio"
1212
>
1313
<NumberEditor
14-
unit="scale"
15-
value={msToRatio(this.props.scale)}
14+
unit="ratio"
15+
value={msToRatio(this.props.scaleRatio)}
1616
min={1}
1717
max={6}
1818
step={0.1}

‎packages/typography-theme-alton/src/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const theme: OptionsType = {
3232
headerWeight: 700,
3333
bodyWeight: 400,
3434
boldWeight: 700,
35-
overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => {
35+
overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => {
3636
const vr = verticalRhythm({
3737
baseFontSize: '16px',
3838
baseLineHeight: '28.44px',
@@ -47,7 +47,7 @@ const theme: OptionsType = {
4747
color: gray(options.bodyGray),
4848
},
4949
blockquote: {
50-
...adjustFontSizeToMSValue(1/5),
50+
...scale(1/5),
5151
color: gray(41),
5252
fontStyle: 'italic',
5353
paddingLeft: rhythm(13/16),

‎packages/typography-theme-bootstrap/src/index.js

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -23,18 +23,18 @@ const theme: OptionsType = {
2323
bodyWeight: 400,
2424
headerWeight: 500,
2525
boldWeight: 'bold',
26-
overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => ({
26+
overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => ({
2727
body: {
2828
color: gray(23, 204),
2929
},
30-
h1: adjustFontSizeToMSValue(4/4),
31-
h2: adjustFontSizeToMSValue(3/4),
32-
h3: adjustFontSizeToMSValue(2/4),
33-
h4: adjustFontSizeToMSValue(1/6),
34-
h5: adjustFontSizeToMSValue(-1/6),
35-
h6: adjustFontSizeToMSValue(-2/6),
30+
h1: scale(4/4),
31+
h2: scale(3/4),
32+
h3: scale(2/4),
33+
h4: scale(1/6),
34+
h5: scale(-1/6),
35+
h6: scale(-2/6),
3636
blockquote: {
37-
...adjustFontSizeToMSValue(1/4),
37+
...scale(1/4),
3838
borderLeft: `${rhythm(1/6)} solid #eceeef`,
3939
paddingTop: rhythm(1/3),
4040
paddingBottom: rhythm(1/3),

‎packages/typography-theme-de-young/src/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const theme: OptionsType = {
3232
headerWeight: 500,
3333
bodyWeight: 400,
3434
boldWeight: 700,
35-
overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => {
35+
overrideStyles: ({ rhythm }) => {
3636
const vr = verticalRhythm({
3737
baseFontSize: '18px',
3838
baseLineHeight: '29.7px',

‎packages/typography-theme-doelger/src/index.js

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const theme: OptionsType = {
3030
headerWeight: '700',
3131
bodyWeight: 400,
3232
boldWeight: 700,
33-
overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => {
33+
overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => {
3434
const linkColor = '#ff483b'
3535
return {
3636
a: {
@@ -49,7 +49,7 @@ const theme: OptionsType = {
4949
},
5050
// Blockquote styles.
5151
blockquote: {
52-
...adjustFontSizeToMSValue(1/5),
52+
...scale(1/5),
5353
borderLeft: `${rhythm(6/16)} solid ${linkColor}`,
5454
color: gray(35),
5555
paddingLeft: rhythm(10/16),
@@ -83,4 +83,3 @@ const theme: OptionsType = {
8383
}
8484

8585
export default theme
86-

‎packages/typography-theme-elk-glen/src/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const theme: OptionsType = {
3131
headerWeight: '700',
3232
bodyWeight: 400,
3333
boldWeight: 700,
34-
overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => {
34+
overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => {
3535
const linkColor = '#292d35'
3636
const vr = verticalRhythm({
3737
baseFontSize: '17px',
@@ -53,7 +53,7 @@ const theme: OptionsType = {
5353
},
5454
// Blockquote styles.
5555
blockquote: {
56-
...adjustFontSizeToMSValue(1/5),
56+
...scale(1/5),
5757
borderLeft: `${rhythm(6/16)} solid ${linkColor}`,
5858
color: gray(35),
5959
paddingLeft: rhythm(10/16),

‎packages/typography-theme-fairy-gates/src/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const theme: OptionsType = {
3131
headerWeight: '600',
3232
bodyWeight: 400,
3333
boldWeight: 700,
34-
overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => {
34+
overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => {
3535
const linkColor = '#1ca086'
3636
const vr = verticalRhythm({
3737
baseFontSize: '17px',
@@ -54,7 +54,7 @@ const theme: OptionsType = {
5454
},
5555
// Blockquote styles.
5656
blockquote: {
57-
...adjustFontSizeToMSValue(1/5),
57+
...scale(1/5),
5858
borderLeft: `${rhythm(6/16)} solid ${linkColor}`,
5959
color: gray(35),
6060
paddingLeft: rhythm(10/16),

‎packages/typography-theme-funston/src/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ const theme: OptionsType = {
2929
headerWeight: '400',
3030
bodyWeight: 400,
3131
boldWeight: 700,
32-
overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => ({
32+
overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => ({
3333
html: {
3434
'-webkit-font-smoothing': 'antialiased',
3535
},
@@ -43,7 +43,7 @@ const theme: OptionsType = {
4343
color: '#3498DB',
4444
},
4545
blockquote: {
46-
...adjustFontSizeToMSValue(1/5),
46+
...scale(1/5),
4747
color: gray(40),
4848
paddingLeft: rhythm(13/16),
4949
marginLeft: rhythm(-1),

‎packages/typography-theme-grand-view/src/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const theme: OptionsType = {
3030
headerWeight: 700,
3131
bodyWeight: 400,
3232
boldWeight: 700,
33-
overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => ({
33+
overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => ({
3434
a: {
3535
color: '#d65947',
3636
textDecoration: 'none',
@@ -42,7 +42,7 @@ const theme: OptionsType = {
4242
marginTop: rhythm(2),
4343
},
4444
blockquote: {
45-
...adjustFontSizeToMSValue(1/5),
45+
...scale(1/5),
4646
color: gray(41),
4747
paddingLeft: rhythm(13/16),
4848
marginLeft: 0,

‎packages/typography-theme-irving/src/index.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const theme: OptionsType = {
3030
headerWeight: 700,
3131
bodyWeight: 400,
3232
boldWeight: 700,
33-
overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => {
33+
overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => {
3434
const styles = {
3535
a: {
3636
color: gray(options.bodyGray),
@@ -39,7 +39,7 @@ const theme: OptionsType = {
3939
color: '#3498DB',
4040
},
4141
blockquote: {
42-
...adjustFontSizeToMSValue(1/5),
42+
...scale(1/5),
4343
color: gray(30),
4444
paddingLeft: rhythm(3/4),
4545
marginLeft: 0,
@@ -50,7 +50,7 @@ const theme: OptionsType = {
5050
marginBottom: rhythm(1/2),
5151
},
5252
table: {
53-
...adjustFontSizeToMSValue(-1/5),
53+
...scale(-1/5),
5454
},
5555
// Mobile styles.
5656
[TABLET_MEDIA_QUERY]: {

‎packages/typography-theme-judah/src/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const theme: OptionsType = {
3131
headerWeight: 400,
3232
bodyWeight: 400,
3333
boldWeight: 700,
34-
overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => ({
34+
overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => ({
3535
a: {
3636
color: '#e51937',
3737
textDecoration: 'none',
@@ -41,7 +41,7 @@ const theme: OptionsType = {
4141
textDecoration: 'none',
4242
},
4343
blockquote: {
44-
...adjustFontSizeToMSValue(1/5),
44+
...scale(1/5),
4545
color: gray(0),
4646
fontStyle: 'italic',
4747
paddingLeft: rhythm(13/16),

‎packages/typography-theme-kirkham/src/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,12 +31,12 @@ const theme: OptionsType = {
3131
headerWeight: 700,
3232
bodyWeight: 400,
3333
boldWeight: 700,
34-
overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => ({
34+
overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => ({
3535
a: {
3636
color: '#9f392b',
3737
},
3838
blockquote: {
39-
...adjustFontSizeToMSValue(1/5),
39+
...scale(1/5),
4040
color: gray(41),
4141
fontStyle: 'italic',
4242
paddingLeft: rhythm(13/16),

‎packages/typography-theme-lincoln/src/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const theme: OptionsType = {
3131
headerWeight: '400',
3232
bodyWeight: 400,
3333
boldWeight: 700,
34-
overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => {
34+
overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => {
3535
const linkColor = '#134896'
3636
const vr = verticalRhythm({
3737
baseFontSize: '17px',
@@ -59,7 +59,7 @@ const theme: OptionsType = {
5959
},
6060
// Blockquote styles.
6161
blockquote: {
62-
...adjustFontSizeToMSValue(1/5),
62+
...scale(1/5),
6363
borderLeft: `${rhythm(6/16)} solid ${linkColor}`,
6464
color: gray(35),
6565
paddingLeft: rhythm(10/16),

0 commit comments

Comments
 (0)