Redefine default heading values in Grommet theme

[seanmiller26]

Package

Choose from the list:

• app-content-pages
• app-project
• lib-classifier
• lib-panoptes-js
• lib-react-components
• unknown

Is your feature request related to a problem? Please describe.

The default font sizes are poorly defined. This list should help organize our defaults

Describe the solution you'd like

The defaults should be:

S
Heading 1: 1.5rem (24px)
Heading 2: 1.15rem (18px)
Heading 3: 1rem (16px)
Heading 4: .75rem (12px)
Paragraph: .75rem (12px)
Text: .625rem (10px)
M
Heading 1: 2rem (32px)
Heading 2: 1.5rem (24px)
Heading 3: 1.15rem (18px)
Heading 4: 1rem (16px)
Paragraph: 1rem (16px)
Text: .75rem (12px)
L
Heading 1: 2.25rem (36px)
Heading 2: 2rem (32px)
Heading 3: 1.5rem (24px)
Heading 4: 1.15rem (18px)
Paragraph: 1.15rem (18px)
Text: .875rem (14px)
XL
Heading 1: 3rem (48px)
Heading 2: 2.25rem (36px)
Heading 3: 2rem (32px)
Heading 4: 1.5rem (24px)
Paragraph: 1.5rem (24px)
Text: 1rem (16px)

Note specific font styling:
Headings: Bold, 5% letter spacing
Paragraph: Medium
Text: Medium

For the time being, this does not touch on breakpoint values.

Grommet theme for reference

Additional context

Link to Github repos using the FEM Grommet theme: https://github.com/zooniverse/front-end-monorepo/network/dependents

[goplayoutside3]

Follow-up from today's standup:

The difference between level and size in Grommet components

The distinction between level and size in the theme is important when considering Grommet components such as Heading, Paragraph, or Text. The size property is for styling while the level property generates h1, h2, h3, etc. All webpages should follow the semantic order of one h1, then nested headings for h2, h3, etc like in the example docs below. There are three important sections: Usage Notes, Examples, and Accessibility Concerns in the MDN Web Docs for heading elements on a webpage. In our case, the small, medium, large, and xlarge options for headings in the FEM Grommet theme object are STRICTLY for presentational use (changing the font-size). See the same pattern in Grommet's default base theme object.

Headings and Breakpoints:

There is a responsiveBreakpoint property in the heading section of the Grommet theme (link). This property tells a Heading component when to scale the font-size down. For example in the Grommet Heading component code, when someone's viewing a page and breakpoint is "small", each heading component takes the font-size of one level down. So the regular font-size of h3 gets applied to h2, font-size of h4 gets applied to h3, etc.

    if (props.responsive && headingTheme.responsiveBreakpoint) {
      const breakpoint =
        props.theme.global.breakpoints[headingTheme.responsiveBreakpoint];
      if (breakpoint) {
        const responsiveData = headingTheme.level[props.level + 1]
          ? headingTheme.level[props.level + 1][size]
          : headingTheme.level[props.level][size];
        if (responsiveData) {
          styles.push(
            breakpointStyle(
              breakpoint,
              `
            font-size: ${responsiveData.size};
            line-height: ${responsiveData.height};

That's the default Grommet behavior which we can keep in our theme, or customize differently.

[seanmiller26]

I have updated the default sizes above based on the frontend discussion.