# chroma-lite

`chroma-lite` is the new base repo with a bare minimum config setup for all of the IAG brands.

## Default setup

Each brand has two predefined directories:

### `/scss`

`[brand]/main.scss` files in the `/scss` dir contains the tailwind imports and the brand font imports from the CDN. The brand config file contains brand colours, typography settings and minimal form styling settings. Each brand has its own subdirectory so that the scss can be extended with custom components and styling for your application - see [#custom components](#Custom-Components)

### `/src/config`

Each brand has a `/config/[brand].js` file which has been setup with basic brand attributes such as colours, typography styles, basic form styling. These are [tailwind theme config files](https://tailwindcss.com/docs/theme) and will include the brand scss files at compilation time.

## Cloning the repo

Clone `chroma-lite` as the base starter application. The repo is framework agnostic so can be used for `react`, `vue`, `ANGYOOLAH` etc.

By default all of the current IAG brands are setup and can be compiled using the config in the `webpack.mix.js` file, uncomment the brand(s) you would like to compile and run `yarn dev` or `yarn prod`, these files are setup by default to compile to the `/dist` directory, change the last line in this file for your desired output location.

Compilation using `yarn dev` does not run `purgecss` and does not minify the output so is perfect for development.

In order to take advantage of purgecss to minimise your css file down from the standard tailwind 2.5Mb, update the brand config `purge` array to point to your application files for example:

purge: [
  './react/src/**/*.js',
  './vue/src/**/*.vue'
],

When `yarn prod` is run, `purgecss` will analyse any files within the glob pattern and only include Tailwind classes that are used. Ensure that the paths are correct and check the terminal output to verify that the proceess is working and the file sizes are in the Kb range rather than Mb.

## Custom Components

In order to extend the build with custom components simply create new scss files inside the `/scss` directory, this can be done as global or brand specific files.

For example to create a shared component such as a button create a `/scss/components` dir and inside create `_button.scss`. These sass files can take advantage of Tailwind's [`@apply` directive](https://tailwindcss.com/docs/functions-and-directives#apply) or use vanilla css.

// scss/components/_button.scss

.btn {
    @apply rounded py-3 px-6;
}
.btn-primary {
    @apply bg-primary text-white;
    
    &:hover {
        @apply bg-primary-darken;
    }
}

*note `bg-primary` and `bg-primary-darken` refers to custom colours defined in the brand config theme. Tailwind generates classes for text and bg based on these values*

This file can now be imported by any of the brands:

// scss/nrma/main.scss

@layer components {
  @import '../components/button';
}

To create a brand specific component move the code inside the brand scss directory such as `/scss/nrma`