@r3s-dev/design-system v1.0.4

Storybook

See https://r3s-dev.gitlab.io/design-system

TODO: Release

How to use the theme

import * as React from "react";
import * as ReactDOM from "react-dom";
import styled, { ThemeProvider } from "styled-components";
import { defaultTheme, theme, useTheme } from "@r3s-dev/design-system";

const StyledComponent = styled.div`
  color: ${theme.color("primary")};
  margin-top: ${theme.spacing(5)};
`;

function RegularComponent() {
  const theme = useTheme();

  return (
    <div
      style={{
        color: theme.color("secondary"),
        marginTop: theme.spacing(5),
      }}
    >
      We are accessing tokens inside a component :)!
    </div>
  );
}

function App() {
  return (
    <ThemeProvider theme={defaultTheme}>
      <div>
        <StyledComponent>Theme with styled-components!!!</StyledComponent>
        <RegularComponent />
      </div>
    </ThemeProvider>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));