@escoleme/medesign-tokens v1.1.3

@escoleme/medesign-tokens

Visual primitives such as typography, color, and spacing that are shared between MeDesign ecosystem.

Installation

Install the npm package with yarn or npm.

# With Yarn
yarn add @escoleme/medesign-tokens

# With npm
npm install @escoleme/medesign-tokens

Usage

The package exports a light and dark theme that is meant to be used with EscoleMe's React component library, MeDesign. Pass the theme to Emotion's ThemeProvider:

import React from "react";
import styled, { ThemeProvider } from "styled-components";
import { light } from '@escoleme/medesign-tokens';

const Container = styled.div`
  color: ${props => props.theme.colors.blue500};
  font-family: ${props => props.theme.typeface.primary};
`;

const App = () => {
  return (
    <ThemeProvider theme={light}>
      <Container>
        <h1>Hello world!</h1>
        <h2>By the power of styled-components!</h2>
      </Container>
    </ThemeProvider>
  );
};

export default App;

The theme is a plain JavaScript object, so you can use it in other ways, too.