overrideStyles: ({ rhythm }, { blockMarginBottom }) => {
const vr = verticalRhythm({
baseFontSize: '12.8px',
baseLineHeight: '19.2px',
})
const styles = {
[MOBILE_MEDIA_QUERY]: {
html: {
...vr.establishBaseline(),
},
},
blockquote: {
color: gray(26.6),
borderLeft: '4px solid #999',
paddingLeft: rhythm(blockMarginBottom),
marginLeft: rhythm(blockMarginBottom),
marginRight: rhythm(blockMarginBottom),
marginTop: rhythm(blockMarginBottom),
marginBottom: rhythm(blockMarginBottom),
},
a: {
fontWeight: 'bold',
color: '#00f',
textDecoration: 'none',
},
'a:hover': {
textDecoration: 'underline',
},
}
return styles
},
overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => {
const linkColor = '#1ca086'
const vr = verticalRhythm({
baseFontSize: '17px',
baseLineHeight: '24.65px',
})
return {
a: {
color: linkColor,
textDecoration: 'none',
textShadow:
'.03em 0 #fff,-.03em 0 #fff,0 .03em #fff,0 -.03em #fff,.06em 0 #fff,-.06em 0 #fff,.09em 0 #fff,-.09em 0 #fff,.12em 0 #fff,-.12em 0 #fff,.15em 0 #fff,-.15em 0 #fff', // eslint-disable-line
backgroundImage: `linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 1px, ${linkColor} 1px, ${linkColor} 2px, rgba(0, 0, 0, 0) 2px)`, // eslint-disable-line
},
'a:hover,a:active': {
textShadow: 'none',
backgroundImage: 'none',
},
'h1,h2,h3,h4,h5,h6': {
marginTop: rhythm(1.5),
marginBottom: rhythm(0.5),
},
// Blockquote styles.
blockquote: {
...scale(1 / 5),
borderLeft: `${rhythm(6 / 16)} solid ${linkColor}`,
color: gray(35),
paddingLeft: rhythm(10 / 16),
fontStyle: 'italic',
marginLeft: 0,
marginRight: 0,
},
'blockquote > :last-child': {
marginBottom: 0,
},
'blockquote cite': {
...adjustFontSizeTo(options.baseFontSize),
color: options.bodyColor,
fontStyle: 'normal',
fontWeight: options.bodyWeight,
},
'blockquote cite:before': {
content: '"— "',
},
[MOBILE_MEDIA_QUERY]: {
html: {
...vr.establishBaseline(),
},
blockquote: {
borderLeft: `${rhythm(3 / 16)} solid ${linkColor}`,
color: gray(41),
paddingLeft: rhythm(9 / 16),
fontStyle: 'italic',
marginLeft: rhythm(-3 / 4),
marginRight: 0,
},
},
}
},
overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => {
const vr = verticalRhythm({
baseFontSize: '15px',
baseLineHeight: '27.35px',
})
return {
a: {
color: '#375c85',
textDecoration: 'none',
boxShadow: '0 1px 0 0 currentColor',
},
'a:hover,a:active': {
boxShadow: 'none',
},
'h1,h2,h3,h4,h5,h6': {
marginTop: rhythm(2),
},
blockquote: {
...adjustFontSizeToMSValue(1/5),
color: gray(41),
paddingLeft: rhythm(18/16),
marginLeft: 0,
borderLeft: `${rhythm(6/16)} solid`,
borderColor: gray(90),
},
'blockquote > :last-child': {
marginBottom: 0,
},
'blockquote cite': {
...adjustFontSizeTo(options.baseFontSize),
color: gray(options.bodyGray),
fontWeight: options.bodyWeight,
},
'blockquote cite:before': {
content: '"— "',
},
[MOBILE_MEDIA_QUERY]: {
blockquote: {
marginLeft: rhythm(-3/4),
marginRight: 0,
borderLeft: `${rhythm(3/16)} solid`,
borderColor: gray(90),
paddingLeft: rhythm(9/16),
},
},
[TABLET_MEDIA_QUERY]: {
html: {
...vr.establishBaseline(),
},
},
}
},
const createStylesString = function (options) {
// Create styles for base theme + each subtheme.
let vr = verticalRhythm(options)
let styles = createStyles(vr, options)
if ((options.subThemes != null) && isObject(options.subThemes)) {
keys(options.subThemes).forEach((name) => {
const theme = options.subThemes[name]
vr = verticalRhythm(theme)
styles += createStyles(vr, theme, name, options)
})
}
return styles
}
overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => {
const vr = verticalRhythm({
baseFontSize: '16px',
baseLineHeight: '28.44px',
})
return {
a: {
color: '#ff5700',
textDecoration: 'none',
},
'a:hover,a:active': {
color: gray(options.bodyGray),
},
blockquote: {
...adjustFontSizeToMSValue(1/5),
color: gray(41),
fontStyle: 'italic',
paddingLeft: rhythm(13/16),
marginLeft: 0,
borderLeft: `${rhythm(3/16)} solid ${gray(10)}`,
},
'blockquote > :last-child': {
marginBottom: 0,
},
'blockquote cite': {
...adjustFontSizeTo(options.baseFontSize),
color: gray(options.bodyGray),
fontStyle: options.bodyWeight,
},
'blockquote cite:before': {
content: '"— "',
},
[MOBILE_MEDIA_QUERY]: {
html: {
...vr.establishBaseline(),
},
blockquote: {
marginLeft: rhythm(-3/4),
marginRight: 0,
paddingLeft: rhythm(9/16),
},
},
}
},
escapeHatch: (styles, setStyles, { adjustFontSizeTo, rhythm }, options) => {
let newStyles = setStyles(styles, 'blockquote', {
color: gray(26.6),
borderLeft: "4px solid #999",
paddingLeft: "1em",
marginLeft: "1em",
marginRight: "1em",
marginTop: "1em",
marginBottom: "1em",
})
newStyles = setStyles(styles, 'p, h1, h2, h3, h4, h5, h6', {
marginBottom: "1rem",
})
newStyles = setStyles(styles, 'a', {
fontWeight: "bold",
color: "#00f",
textDecoration: "none"
})
newStyles = setStyles(styles, 'a:hover', {
textDecoration: "underline"
})
const vr = verticalRhythm({
baseFontSize: '12.8px',
baseLineHeight: '19.2px'
})
newStyles[`@media only screen and (max-width:480px)`] = {
html: {
...vr.establishBaseline()
}
}
return newStyles
},
const Typography = function (opts) {
const defaults = {
baseFontSize: '18px',
baseLineHeight: '28.5px',
modularScales: [
{
scale: 'octave',
},
{
scale: 'golden',
maxWidth: '768px',
},
],
googleFonts: [],
headerFontFamily: `
-apple-system, BlinkMacSystemFont,
"Segoe UI","Roboto","Oxygen",
"Ubuntu","Cantarell","Fira Sans",
"Droid Sans","Helvetica Neue",sans-serif;`,
bodyFontFamily: 'georgia, serif',
headerGray: 20,
headerGrayHue: 0,
bodyGray: 20,
bodyGrayHue: 0,
headerWeight: 700,
bodyWeight: 400,
boldWeight: 700,
fontFaces: [],
}
const options = objectAssign(defaults, opts)
if ((options.subThemes != null) && isObject(options.subThemes)) {
keys(options.subThemes).forEach((name) => {
const theme = options.subThemes[name]
options.subThemes[name] = objectAssign({}, options, theme, { rhythmUnit: 'px' })
})
}
const vr = verticalRhythm(options)
return ({
options,
GoogleFont: require('./components/GoogleFont')(options),
TypographyStyle: require('./components/TypographyStyle')(() => createStylesString(options)),
rhythm: vr.rhythm,
createStyles () { return createStylesString(options) },
fontSizeToPx: vr.adjustFontSizeTo,
fontSizeToMS (scaler) {
// TODO detect which modular scale to use based on current screen width.
// or better, this should just generate styles and insert them in head
// with media queries? Perhaps do something similar to CSS Modules
// where this just returns a custom class name that you add to your
// component.
const baseFont = options.baseFontSize.slice(0, -2)
const newFontSize = `${ms(scaler, options.modularScales[0].scale) * baseFont}px`
return vr.adjustFontSizeTo(newFontSize)
},
injectStyles () {
if (typeof document !== 'undefined') {
// Replace existing
if (document.getElementById('typography.js')) {
const styleNode = document.getElementById('typography.js')
styleNode.innerHTML = createStylesString(options)
} else {
const node = document.createElement('style')
node.id = 'typography.js'
node.innerHTML = createStylesString(options)
document.head.appendChild(node)
}
}
},
})
}
keys(options.subThemes).forEach((name) => {
const theme = options.subThemes[name]
vr = verticalRhythm(theme)
styles += createStyles(vr, theme, name, options)
})
const typography = function (opts: OptionsType) {
const defaults: OptionsType = {
baseFontSize: '16px',
baseLineHeight: '24px',
modularScales: [
{
scale: 'octave',
},
{
scale: 'golden',
maxWidth: '768px',
},
],
googleFonts: [],
headerFontFamily: [
'-apple-system',
'BlinkMacSystemFont',
'Segoe UI',
'Roboto',
'Oxygen',
'Ubuntu',
'Cantarell',
'Fira Sans',
'Droid Sans',
'Helvetica Neue',
'sans-serif',
],
bodyFontFamily: ['georgia', 'serif'],
headerGray: 20,
headerGrayHue: 0,
bodyGray: 20,
bodyGrayHue: 0,
headerWeight: 'bold',
bodyWeight: 'normal',
boldWeight: 'bold',
includeNormalize: true,
blockMarginBottom: 1,
}
const options = objectAssign({}, defaults, opts)
const vr = verticalRhythm(options)
// 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
// 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.modularScales[0].scale) * baseFont}px`
return vr.adjustFontSizeTo(newFontSize)
}
// Depricated old names.
vr.fontSizeToMS = vr.adjustFontSizeToMSValue
vr.fontSizeToPx = vr.adjustFontSizeTo
return ({
options,
...vr,
createStyles () { return this.toString() }, // TODO remove in next breaking release.
toJSON () {
return createStyles(vr, options)
},
toString () {
return compileStyles(vr, options, this.toJSON())
},
injectStyles () {
if (typeof document !== 'undefined') {
// Replace existing
if (document.getElementById('typography.js')) {
const styleNode = document.getElementById('typography.js')
styleNode.innerHTML = this.toString()
} else {
const node = document.createElement('style')
node.id = 'typography.js'
node.innerHTML = this.toString()
document.head.appendChild(node)
}
}
},
})
}