5.2.1 • Published 1 year ago
@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" />