search

KyleAMathews / typography.js

A powerful toolkit for building websites with beautiful design
http://kyleamathews.github.io/typography.js/
MIT License
3.83k stars 181 forks source link

fontSize theme override #222

Open jamesgrubb opened 5 years ago

jamesgrubb commented 5 years ago

I'm using kirkham theme with some overrides.

kirkhamTheme.overrideThemeStyles = ({scale, rhythm }) => ({
    "h1" : {
        marginBottom: rhythm(10),
        marginTop: rhythm(2),
        fontSize: scale(3)
    }
})

when I inspect the code it seems font size is output as an object rather than css readabel code

fontSize{font-size: 9.93837rem;
    line-height: 10.8rem;
    }
mbao01 commented 4 years ago

Hello @jamesgrubb I took a look at the overrideThemeStyles API. The scale method returns a BaseLine type which is an object containing font-size and line-height

What you need to do is spread scale(3). Here; 

kirkhamTheme.overrideThemeStyles = ({scale, rhythm }) => ({
    "h1" : {
        marginBottom: rhythm(10),
        marginTop: rhythm(2),
        ...scale(3)
    }
})

overrideThemeStyles: (VerticalRhythm: VerticalRhythm, . . . ) signature

baseline