Docz: font size isn't changing

[socker210]

Bug Report

Describe the bug
Font-size of h1 isn't changing when fontSize's data type is Array.

my doczrc.js:

const path = require('path')

module.exports = {
  title: 'the title',
  description: 'description of component',
  src: path.resolve(__dirname, 'examples'),
  dest: './dist',
  codeSandbox: false,
  themeConfig: {
    styles: {
      h1: {
        fontFamily: '\'Source Sans Pro\', Helvetica, sans-serif',
        fontWeight: 100,
        fontSize: [36, 38, 42]
      }
    }
  }
}

But, the font-size is ...

1120px: 36px
920px: 70px
420px: 50px

I expected ...

1120px: 42px
920px: 38px
420px: 36px

Environment

• OS: OS X (Mojave)
• Node/npm version: v11.4.0 / v6.5.0
• docz: 0.13.7
• docz-theme-default: 0.13.7

[kachkaev]

Similar thing. I'm unable to change font sizes for body, menu etc. – it's always default and it looks too big. Can the issue be related to https://github.com/pedronauck/docz/commit/825612edc6ad599be3f0727e35352b825f80117f#diff-1a78deda6004651f093ed4d38f859d88R16?

This part of the theme docs seems to be misleading ATM: https://github.com/pedronauck/docz/tree/master/packages/docz-theme-default#default-themeconfig

UPD: Changing font style for container / h1...h6 works, but not for body or side menu. E.g. H1...H6 components include a line like this:

https://github.com/pedronauck/docz/blob/89e1d03a8ea489fb6dd244588221c8d62aaf1122/packages/docz-theme-default/src/components/ui/H1.tsx#L9

It can grab data from themeConfig → styles → h1 → fontSize.

Similarly, I'd expect styles.body to appear anywhere in the code, but this seems to be not the case.

[kachkaev]

I finally manage to reduce font size in the menu on the left and in the main area by using the following workaround:

{
  themeConfig: {
    styles: {
      blockquote: {
        fontSize: 14,
      },
      body: { // <-- @emotion/css accepts nested objects with styles [1]
        "nav a": {
          fontSize: "14px !important",
        },
      },
      container: {
        fontSize: 14,
      },
      h1: {
        fontWeight: "normal",
        fontSize: 48,
      }
    }
  }
}

[pedronauck]

Is this already solved? Can I close here?

[socker210]

@kachkaev Thank you! I will try your solution 👍 @pedronauck Sorry for late reply. I closed this issue thanks.

[kachkaev]

My solution is a workaround. It'd be nice if the font in the menu could be tweaked in a slightly less crazy way 🙂

[yyynnn]

Yeah like in the readme

[yyynnn]

It is also kinda stupid to do this to avoid min-width css rule on the container:

styles: {
      container: {
        width: '100%!important'
      }
    }

Also @kachkaev solution not working on 1.2.0

The only way to do it now is to include custom css:

htmlContext: {
    head: {
      raw: `<style>${fs.readFileSync(process.cwd() + '/config/docz.css')}</style>`,