Setting Up Moon TW Design System

Overview

Moon Design System (Moon DS) is a collection of reusable components set up and grouped according to simple and clear standards. Moon DS component collection is the single source of truth that can be used to build any number of applications.
Currently, to improve performance, Moon DS is moving to Tailwind CSS framework instead of the Styled-components (CSS-in-JS styling framework) that was used previously.

NB! Please note that the Moon DS, which is based on the Styled-components framework, is still maintained, but it is no longer updated with new components.

Prerequisites

Before you can use Moon DS, you need to do the following:

Installing Moon DS

Run:

pnpm i @heathmont/moon-core-tw

Configuring the Project

To configure your project to use Moon DS presets, add the following to tailwind.config.js file:

// tailwind.config
{ 
...
  content: [
    './node_modules/@heathmont/moon-core-tw/**/*.{js,ts,jsx,tsx}',
  ],
  presets: [
    require('@heathmont/moon-core-tw/src/private/presets/ds-moon-preset'),
  ],
...
}

NB! Make sure you have the content list in tailwind.config.js, that is pointing to all files using tailwind.

Project-specific configurations contained in the tailwind.config.js file are merged against presets in the same way they are merged against the default configuration. Also, you can always extend or redefine the existing classes in tailwind.config.js file.

For more information on configuring presets, see: Presets - Tailwind CSS

Installing and adding tailwindcss-rtl plugin

tailwindcss-rtl is a third-party plugin that provides new styles for Tailwind for right-to-left orientation.

1. Run:

npm i tailwindcss-rtl

2. Add the plugin to your config tailwind.config.js file:

// tailwind.config
{ 
...
  plugins: [    
    require('tailwindcss-rtl'),   
  ], 
...
}

Moon DS additional information

Packages

For now, Moon DS provides three packages ready for use in projects with Tailwind CSS.

Core Package

@heathmont/moon-core-tw

Installation (Optional)

Run:

pnpm i @heathmont/moon-core-tw

Description

This package contains the core components of Moon DS and a reusable preset with all configurations needed for using Moon DS.

For the description of all ready-to-use components with examples, see the Moon Design System page, under Tailwind.

This package is installed as part of Moon DS installation so you don’t need to install it separately.

Themes Package

@heathmont/moon-themes-tw

Installation (Optional)

Run:

pnpm i @heathmont/moon-themes-tw

Description

This package contains all available themes as CSS files with configured tokens as CSS variables: main colors, support colors, border radius, border width, etc.

For theming, we use CSS variables as tokens for styling various aspects of the website in a different way, while still maintaining the overall look and feel. You can import a CSS file with a particular theme from the package. The name of the CSS file corresponds to the name of the theme for a particular brand. Each file contains the Light and Dark modes.

CSS variables are defined globally in the :root element and also within the relevant class selector. To switch between Light and Dark mode, you need to change classes.

Below is an example of a CSS file configured for the Sportsbet.io page:

:root,
:root.theme-sb-light,
.theme-sb-light {
  --piccolo: 12 207 97; /* #0ccf61 */
  --hit: 223 224 226; /* #dfe0e2 */
  --beerus: 230, 230, 230; /* #e6e6e6 */
  --goku: 255 255 255; /* #ffffff */
  --gohan: 247 247 247; /* #f7f7f7 */
  --bulma: 26 33 42; /* #1a212a */
  --trunks: 96 118 128; /* #607680 */
  --goten: 255 255 255; /* #ffffff */
  --popo: 0 0 0; /* #000000 */

  /* support-colors  */
  --krillin: 255 179 25; /* #ffb319 */
  --krillin-60: 255 198 82; /* #ffc652 */
  --krillin-10: 255 217 141; /* #ffd98d */

  --chichi: 255 78 100; /* #ff4e64 */
  --chichi-60: 255 118 135; /* #ff7687 */
  --chichi-10: 255 150 163; /* #ff96a3 */

  --roshi: 74 209 95; /* #4ad15f */
  --roshi-60: 100 220 119; /* #64dc77 */
  --roshi-10: 127 242 145; /* #7ff291 */

  --dodoria: 211 48 48; /* #d33030 */
  --dodoria-60: 219 78 78; /* #db4e4e */
  --dodoria-10: 240 103 103; /* #f06767 */

  --cell: 149 241 213; /* #95f1d5 */
  --cell-60: 162 250 223; /* #a2fadf */
  --cell-10: 191 255 236; /* #bfffec */

  --raditz: 179 128 74; /* #b3804a */
  --raditz-60: 193 145 93; /* #c1915d */
  --raditz-10: 214 169 121; /* #d6a979 */

  --whis: 52 72 240; /* #3448f0 */
  --whis-60: 103 119 248; /* #6777f8 */
  --whis-10: 132 144 249; /* #8490f9 */

  --frieza: 92 51 207; /* #5c33cf */
  --frieza-60: 115 77 222; /* #734dde */
  --frieza-10: 146 113 239; /* #9271ef */

  --nappa: 114 85 80; /* #725550 */
  --nappa-60: 133 106 102; /* #856a66 */
  --nappa-10: 161 134 129; /* #a18681 */

  /* border-radius */
  --radius-i-xs: 624.938rem; /* 9999px */
  --radius-i-sm: 624.938rem; /* 9999px */
  --radius-i-md: 624.938rem; /* 9999px */
  --radius-s-xs: 0.25rem; /* 4px */
  --radius-s-sm: 0.5rem; /* 8px */
  --radius-s-md: 0.75rem; /* 12px */
  --radius-s-lg: 1rem; /* 16px */

  /* border-width */
  --border-width: 0.0625rem; /* 1px */
  --border-i-width: 0.125rem; /* 2px */
}

:root.theme-sb-dark,
.theme-sb-dark {
  --piccolo: 12 207 97; /* #0ccf61 */
  --hit: 57 62 71; /* #393e47 */
  --beerus: 49 55 63; /* #31373f */
  --goku: 35 42 51; /* #232a33 */
  --gohan: 26 33 42; /* #1a212a */
  --bulma: 255 255 255; /* #ffffff */
  --trunks: 134 151 162; /* #8697a2 */
  --goten: 255 255 255; /* #ffffff */
  --popo: 0 0 0; /* #000000 */

  --radius-i-xs: 624.938rem; /* 9999px */
  --radius-i-sm: 624.938rem; /* 9999px */
  --radius-i-md: 624.938rem; /* 9999px */
}

Setup theme in your project.

NB! Setting up themes is optional.

It is up to you how to set up themes inside your project.

  • - For example, you can do the following:
    @import '@heathmont/moon-themes-tw/src/sportsbet.css';
  • - Alternatively, you can copy-paste the tokens from moon-design, and add them to your project.

Warning! Do not delete any tokens, please, as it can affect the work of Moon DS.

Icons Package

@heathmont/moon-icons-tw

Installation

Run:

pnpm i @heathmont/moon-icons-tw

Description

This package contains all SVG assets that you might need to build an application. They are ready to work with Tailwind CSS, so you can change the size and color of icons with the help of TW classes.

Example:

import { FilesCopy } from '@heathmont/moon-icons-tw';

const Example = () => (
  <div className="flex justify-around gap-2 flex-wrap items-center w-full">
    <FilesCopy className="text-chiChi text-[1rem]" />
    <FilesCopy className="text-chiChi text-[2rem]" />
    <FilesCopy className="text-piccolo text-[3rem]" />
    <FilesCopy className="text-cell text-[3rem]" />
  </div>
);

export default Example;

For more information on Moon DS icons and icons preview, see: Moon Design System