@up42/gatsby-theme-core v5.2.1

@up42/gatsby-theme-core

This is the base theme for building UP42-branded Gatsby sites. It contains a small amount of configuration, a Style Dictionary with the UP42 design system tokens and utility classes that make it easy to build consistent-looking UIs.

It comes with a few Gatsby plugins:

• gatsby-plugin-robots-txt: Creates a robots.txt file.
• gatsby-plugin-sitemap: Creates a sitemap.xml file.
• gatsby-plugin-google-tagmanager: Adds Google tag manager.
• gatsby-plugin-sass: Adds support for scss.
• gatsby-plugin-client-side-redirect: Generates client side redirects.
• gatsby-plugin-react-svg: Enables import SVGs as React components.
• gatsby-plugin-nprogress: Shows the progress indicator.
• gatsby-plugin-manifest: Enables web app manifest.

Installation

npm i @up42/gatsby-theme-core

Configuration

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: '@up42/gatsby-theme-core',
      options: {
        // options
        title: 'Title',
        description: 'Description',
        gtm: 'GTM-XXX',
        siteMapExclude: []
      }
    }
  ]
}

Import the CSS file:

import '@up42/gatsby-theme-core/src/styles/index.scss';

Utilities

Tokens

Tokens are generated in three formats: scss/css variables and json.

import { tokens } from '@up42/gatsby-theme-core'

Utility classes

Responsive Typography

Typography classes and scss mixins are available and composed of different properties to generate the appropriate typography according to the this design system.

.headline-default 
.headline-large 

.heading-default 
.heading-medium 
.heading-small 
.heading-xsmall 
.heading-overline 

.caption-default 
.caption-small 
.caption-xsmall 

.body-default 
.body-large 
.body-small 

.label-default 
.label-small 
.label-xsmall 

Example:

// .jsx
<h3 className="heading-default">{title}</h3>

// .scss
h3 {
  @include heading-default;
}

Spacing

This theme also includes spacing utilities for margin and padding, more info here.

Example:

<span className="pt-2 my-4" />