Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Redefine default heading values in Grommet theme #5469

Open
6 tasks
seanmiller26 opened this issue Oct 16, 2023 · 2 comments
Open
6 tasks

Redefine default heading values in Grommet theme #5469

seanmiller26 opened this issue Oct 16, 2023 · 2 comments
Labels
design Design and/or UX documentation Add the documentation for something enhancement New feature or request

Comments

@seanmiller26
Copy link
Contributor

seanmiller26 commented Oct 16, 2023

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

@seanmiller26 seanmiller26 added enhancement New feature or request documentation Add the documentation for something design Design and/or UX labels Oct 16, 2023
@goplayoutside3
Copy link
Contributor

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
Copy link
Contributor Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
design Design and/or UX documentation Add the documentation for something enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants