@betomorrow/design-system

Betomorrow's React component library, aligned with the reference design system (reference/design-system).

Install

yarn add @betomorrow/design-system

Usage

Import styles once in your app root:

import "@betomorrow/design-system/styles.css";

Wrap your app with the design system root and a theme:

import { Button, Text, Tag } from "@betomorrow/design-system";

export function Example() {
  return (
    <div className="bds-root bds-light-theme">
      <Text variant="headline" size="m">
        Innovation digitale
      </Text>
      <Text variant="body">Nous concevons des produits numériques utiles.</Text>
      <Button variant="primary">Get started</Button>
      <Tag variant="primary">Design</Tag>
    </div>
  );
}

Use bds-dark-theme instead of bds-light-theme for dark mode.

Fonts

Brand fonts (PP Neue Montreal & Parabole) are included in the package via styles.css. You must still acquire the appropriate licenses yourself before using them in your project — the files are provided for convenience, but distribution rights are not granted by this package.

Design tokens

Import tokens only when you need custom styling:

@import "@betomorrow/design-system/tokens.css";

Semantic theme tokens are available via .bds-light-theme and .bds-dark-theme classes.

Development

yarn install
yarn storybook   # component playground
yarn test        # unit tests
yarn build       # production build

Publishing

yarn build
npm publish --access public