tfgm-ui-kit v1.0.20

TfGM UI Kit

Overview

This project is responsible for managing re-usable components and styling dependencies that can be utilitised into a React based website.

Colour Palette

The toolkit defines a set of pre-defined colours to use across all Tfgm websites.

The following demonstrates the usage of the colour palette.

To use the 'default' colour in a website:

<!-- For foreground text colour -->
<span class="text-default">Hello</span>

<!-- For background colour -->
<span class="bg-default">Hello</span>

To use a site specific colour scheme, for example for Bee Network, the extends section in the tailwindcss-config.js file contains a section, "bee-network" under "colors":

extend: {
      colors: {
        ...
        "bee-network": {
          navy: "#294260",
          yellow: "#ffda4f",
          "light-grey": "#e2eded"
        }
        ...
      }
    }

Example of using the Bee Network colours:

<!-- For foreground text colour -->
<span class="text-bee-network-navy">Hello</span>

<!-- For background colour -->
<span class="bg-bee-network-yellow">Hello</span>