@justeat/fozzie-colour-palette

Fozzie Colour Palette

This module allows projects to import the Just Eat brand colour palette, so that they can always stay up to date with any changes made.

Colours are made available by a number of Sass variables that once the module has been imported can be referenced in a projects Sass files.

Zeplin colour palette

Usage

1. The easiest way to use fozzie modules in your Sass setup is to use Eyeglass.

If you are using the fozzie gulp build tasks, then Eyeglass is automatically setup ready to use. If not, you can use it in one of the following ways:

• Gulp
• WebPack

1. Install the fozzie-colour-palette module using NPM or Yarn:

   yarn add @justeat/fozzie-colour-palette
   

2. Then within your Sass files, you will need to import this module.

   @import 'fozzie-colour-palette';
   

You can then use any of the colour variables contained in the module.

It’s recommended that you hook onto and use the variable abstractions such as $color-text and $color-link-default where it makes sense to, rather than directly onto the colour variables. That way your project will require less re-factoring should the colour palette ever get a major overhaul in the future and certain colours get replaced and/or renamed.

Available Colour Schemes

The fozzie-colour-palette allows for the definition of platform specific colour schemes. The colour schemes currently available are:

Just Eat Default Colour Scheme

To apply the default Just Eat colour scheme, simply import this module like so:

  @import 'fozzie-colour-palette';

If you are already importing the base fozzie module there will be no need to import fozzie-colour-palette as this is baked in by default to that module. The default colour scheme will therefore automatically be setup when importing the base fozzie module.

Menulog Colour Scheme

To apply the Menulog colour palette, you need to import the default colour scheme, and then call the applyScheme-menulog mixin, which provides a set of theme overrides.

To do this, define a $theme variable and set it to 'ml'. Then conditionally call the Menulog colour scheme mixin:

  $theme: 'ml';

  @import 'fozzie-colour-palette';

  @if ($theme == 'ml') {
      @include applyScheme-menulog;
  }

If you are using the base fozzie module, simply setting the $theme: 'ml'; before importing the fozzie module will automatically take care of this step for you:

  $theme: 'ml';

  @import 'fozzie'; // this will now load in the fozzie-colour-palette module with Menulog overrides