@sumup/design-tokens

SumUp Design Tokens

Visual primitives such as typography, color, and spacing that are shared across platforms. Part of the SumUp Design System.

Table of contents

• Installation
• Usage
• Code of Conduct
• About SumUp

Installation

The SumUp design tokens can be installed as a node module. Depending on your preference, run one of the following in your terminal:

# With Yarn
$ yarn add @sumup/design-tokens

# With npm
$ npm install @sumup/design-tokens

Usage

The package currently exports a single light theme that is meant to be used in combination with the emotion-theming package.

import { light } from '@sumup/design-tokens';
import { ThemeProvider } from 'emotion-theming';
import styled from '@emotion/styled';

const App = () => (
  <ThemeProvider theme={light}>
    <Bold>This styled component has access to the theme.</Bold>
  </ThemeProvider>
);

const Bold = styled.strong`
  font-weight: ${(p) => p.theme.fontWeight.bold};
`;

With TypeScript

The package exports a Theme interface which can be used to type Emotion's styled function. Create a custom styled instance as described in the Emotion docs:

import styled, { CreateStyled } from '@emotion/styled';
import { Theme } from '@sumup/design-tokens';

export default styled as CreateStyled<Theme>;

Code of Conduct

We want to foster an inclusive and friendly community around our Open Source efforts. Like all SumUp Open Source projects, this project follows the Contributor Covenant Code of Conduct. Please, read it and follow it.

If you feel another member of the community violated our CoC or you are experiencing problems participating in our community because of another individual's behavior, please get in touch with our maintainers. We will enforce the CoC.

Maintainers

• Connor Bär

About SumUp

SumUp is a mobile-point of sale provider. It is our mission to make easy and fast card payments a reality across the entire world. You can pay with SumUp in more than 30 countries, already. Our engineers work in Berlin, Cologne, Sofia, and Sāo Paulo. They write code in JavaScript, Swift, Ruby, Go, Java, Erlang, Elixir, and more.

Want to come work with us? Head to our careers page to find out more.