5.2.1 • Published 1 year ago

@up42/gatsby-theme-core v5.2.1

Weekly downloads
-
License
-
Repository
-
Last release
1 year ago

@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:

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" />