Yoga - System - Getting Started

Getting Started

We use tokens as our options and our theme is built based on these options. We name it as a decision.

To make the usage of our decisions easier, we created the package @gympass/yoga-system

Installing

yarn add @gympass/yoga-system
// or
npm install @gympass/yoga-system

Usage

As a shorthand for all our system properties, we use the system module:

import styled from 'styled-components';
import { ThemeProvider } from '@gympass/yoga';
import { system } from '@gympass/yoga-system';
const Hero = styled.div`
  ${system}
`;
const App = () => (
  <ThemeProvider>
    <Hero
      border="small"
      padding="small"
      borderRadius="small"
      color="feedback.success.dark"
    >
      Making wellbeing universal
    </Hero>
  </ThemeProvider>
);