[TASK] Add Webb colours to UI kit

[dutterbutter]

Task Description

The purpose of this task is to add Webb specific colours into the Webb UI kit for easy, consistent and quick use.

Task Deliverable

• [ ] Add relevant colours to styled theme
• [ ] Mark the appropriate Primary colours for each hue (e.g. each colour has a primary hex)
• [ ] Ensure the colours accurately reflects the intended design

Color Code:

/* Color Variables  */

:root {

    /* Monochrome */
    --mono00: #fff; /* Card Background Light Mode */
    --mono20: #F8F8F7; /* Body Background Light Mode */
    --mono40: #E9E9E9; /* h1-h5 text Dark Mode */
    --mono60: #DEDEDE;
    --mono80: #CCCCCC;
    --mono100: #B5B5B5; /* P color Dark Mode */
    --mono120: #646464; /* P color Light Mode */
    --mono140: #404040;
    --mono160: #2C2C2C;
    --mono180: #242424; /* Body Background Dark Mode */
    --mono200: #100A0C; /* h1-h5 Light Mode */ /* Card Background Dark Mode */

    /* Purple */
    --purple00: #F6F4FF;
    --purple10: #E7E2FF;
    --purple20: #D5CDFF;
    --purple30: #C6BBFA;
    --purple40: #B5A9F2;
    --purple50: #A99CEC;
    --purple60: #9F90EA; /* Primary */
    --purple70: #8775E2;
    --purple80: #7968D0;
    --purple90: #624FBE;
    --purple100: #4B3AA4;
    --purple110: #37268D;
    --purple120: #2E284D;

    /* Blue */
    --blue00: #ECF4FF;
    --blue10: #D5E6FF;
    --blue20: #B8D6FF;
    --blue30: #9BC5FC;
    --blue40: #81B3F7;
    --blue50: #67A0EE;
    --blue60: #4E8CDF; /* Primary */
    --blue70: #3D7BCE;
    --blue80: #2864B5;
    --blue90: #1C529A;
    --blue100: #0F4285;
    --blue110: #153A69;
    --blue120: #252D39;

    /* Green */
    --green00: #E5FFE7;
    --green10: #C7FFCC;
    --green20: #ACF1B3;
    --green30: #85DC8E;
    --green40: #6CCA76;
    --green50: #4CB457;
    --green60: #3B9E46;
    --green70: #288E32;
    --green80: #038311; /* Primary */
    --green90: #00710C;
    --green100: #01550A;
    --green110: #0F4214;
    --green120: #0F3413;

    /* Yellow */
    --yellow00: #FFF5D8;
    --yellow10: #FFF2CA;
    --yellow20: #FFEAA6;
    --yellow30: #FFE07C;
    --yellow40: #F8D567;
    --yellow50: #F9CE46;
    --yellow60: #F4C328;
    --yellow70: #F4C328; /* Primary */
    --yellow80: #D2A618;
    --yellow90: #AF8C1E;
    --yellow100: #8D721A;
    --yellow110: #634F11;
    --yellow120: #3F3517;

    /* Red */
    --red00: #FFEDE4;
    --red10: #FFCEB7;
    --red20: #FFB18B;
    --red30: #FF874D;
    --red40: #FC6015;
    --red50: #EF570D;
    --red60: #DD4800; /* Primary */
    --red70: #C64A17;
    --red80: #B6400F;   
    --red90: #A0370B;
    --red100: #892F0A;
    --red110: #622910;
    --red120:  #422417;
  }

Relevant links

• Figma Design System

[dutterbutter]

Closed in #530