@bet-cloud/style-system NPM

@bet-cloud/style-system

@bet-cloud/style-system is a Style System/UI Toolkit built on top of Chakra UI, the Simple, Modular & Accessible UI Components library. Designed to add additional BC customisation & components to ease things up for fast development with better accessibility and performance in mind.

Usage

⚙️ Installation

yarn add @bet-cloud/style-system

⚡️ Quickstart

Add the BCProvider to your Providers file.

import React from 'react';
import { BCProvider } from '@bet-cloud/style-system';

export default function Providers({ children }: TProviders) {
  return (
    <BCProvider>
      <AxiosProvider>{children}</AxiosProvider>
    </BCProvider>
  );
}

BCProvider adds the default BC core styling to the application. The BCProvider is an extension of ChakraProvider and accepts all of ChakraProvider default props. See here.

💅 Customising the theme

By default, all Chakra components inherit values from the default theme. In some scenarios, you might need to customize the theme tokens to match your design requirements. See here.

🏗 Architecture

Due to the way some applications switch themes & to ensure the project can continue to grow, all architecture needs to follow this structure.

src
|-- theme
|-- |-- [themeName] // <- This will match the REACT_APP_THEME variable camelcase
|-- |-- |-- foundations
|-- |-- |--|-- colors.ts // <- Color overwrites
|-- |-- |-- components
|-- |-- |--|-- button.ts // <- Button overwrites
|-- |-- |-- index.ts // <- Theme entrypoint
|-- |-- |-- styles.ts // <- Global styles

If an application has just one theme, the structure should remain the same, however, have no themeName directory.