Variables

Since Grundgesetz utilises styled-components and styled-system under the hood, changing the look and feel of it is as simple as changing variables inside the variables file. We’ve provided some sample variables for you to play around, so you won’t get overwhelmed.

Available Variables

These are the essential variables that you can play around with. There are more variables that are provided outside of the ones listed below, so don’t be afraid to peek around the variables file and the default theme provider.

Colors

Available color tokens for your docs. This will be mapped into the ThemeProvider as a styled-system color prop. By default we provided a bunch of colour options for you to get started. If you want to replace the colors with your own, feel free to do so:

export const colors = {
  white: '#FFF',
  black: '#000',
  danger: '#F00'
};

The color key can then be referenced as a prop in any color-related styled-system prop, for example:

import { Box } from 'components/foundations';

function SomeComponent() {
  return (
    <Box color="white" bgColor="danger">
      Alert!
    </Box>
  );
}

Fonts

Sets your application’s font stack, which will be mapped into styled-system’s typography prop. We provide 3 font keys, system (for system-based fonts), sansSerif (for extending system fonts with your own additional font), and monospace (for code blocks).

export const fonts = {
  system: systemFonts,
  // Example for including additional fonts to the default sans-serif stack.
  sansSerif: `Barlow, ${systemFonts}`,
  monospace: "'SF Mono', Inconsolata, Menlo, Monaco, Consolas, 'Courier New', Courier, monospace;"
};

import { Heading } from 'components/foundations';

function SomeComponent() {
  return <Heading fontFamily="sansSerif">Example Heading</Heading>;
}

Spacing

Spacing tokens for margins and padding, mapped into styled-system’s space prop.

export const space = {
  xxxs: 2,
  xxs: 4,
  xs: 8,
  sm: 12,
  md: 16,
  lg: 24,
  xl: 32,
  xxl: 48
};

import { Box } from 'components/foundations';

function SomeComponent() {
  return (
    <Box color="white" bgColor="blue" p="md">
      I'm inside a box!
    </Box>
  );
}