Colours
Go to the installation documentation for the colour variables Go to the installation documentation for the colour utilities :root {
/* Colours */
--color-white: #ffffff;
--color-black: #000000;
/* Text greys */
--color-text: #282828;
--color-text-alt: #595959;
/* Grey backgrounds */
--color-grey-mid-light: #d8d8d8;
--color-grey-mid: #c4c4c4;
--color-grey-dark: #6e6e6e;
/* Neutral backgrounds */
--color-grey-neutral-light: #f3f3f3;
--color-grey-light: var(--color-grey-neutral-light);
--color-grey-neutral-warm: #f5f5f0;
--color-grey-neutral-cool: #dde9ed;
--color-grey-neutral-cool-light: #f2f4f7;
/* Links */
--color-link: #00729a;
--color-link-hover: #00394e;
--color-link-focus: #8d44d8;
--color-link-active: #002c3d;
--color-link-visited: var(--color-link-active);
/* Phasing out the '--' for modifiers as it causes issues with design token processing (EG lodash) */
--color-link--hover: var(--color-link-hover);
--color-link--focus: var(--color-link-focus);
--color-link--active: var(--color-link-active);
--color-link--visited: var(--color-link-active);
/* Buttons */
/* Primary green */
--color-button-green-primary: #0f8482;
--color-button-green-primary-hover: #1c6b6a;
--color-button-green-primary-active: #124948;
--color-button-primary: var(--color-button-green-primary);
--color-button-primary--hover: var(--color-button-green-primary-hover);
--color-button-primary--active: var(--color-button-green-primary-active);
/* Blue button */
--color-button-blue: #005878;
--color-button-blue-hover: #003e55;
--color-button-blue-active: #001f2b;
--color-button-dark: var(--color-button-blue);
--color-button-dark--hover: var(--color-button-blue-hover);
--color-button-dark--active: var(--color-button-blue-active);
/* Grey button */
--color-button-grey: #efefef;
--color-button-grey-hover: var(--color-grey-mid-light);
--color-button-grey-active: var(--color-grey-mid);
/* White button */
--color-button-white: var(--color-white);
--color-button-white-hover: var(--color-button-grey);
--color-button-white-active: var(--color-grey-mid-light);
/* default button */
--color-button: var(--color-button-blue);
--color-button--hover: var(--color-button-blue-hover);
--color-button--active: var(--color-button-blue-active);
/* Notifications */
--color-red-error: #d12430;
--color-red-error-light: #fcf1f1;
--color-orange-alert: #f8d156;
--color-orange-alert-light: #f8eec7;
--color-green-success: #50811b;
--color-green-success-light: #d7e3c6;
--color-blue-inform: #0761c2;
--color-blue-inform-light: #eef3fc;
--color-blue-notification: var(--color-blue-inform);
--color-blue-notification-light: var(--color-blue-inform-light);
/* The numeric value at the end tallies to the lightness value of the colours in HSL to give some granularity to the system */
/* Reds */
--color-red-dark-4: #ba2327;
--color-red-mid-5: #e20f14;
--color-red-light-7: #ff6a6d;
--color-red-light-8: #ffc1c3;
--color-red-light-9: #ffdbdb;
--color-red-light-10: #fcf1f1;
--color-red-dark: var(--color-red-dark-4);
--color-red-mid: var(--color-red-mid-5);
/* Oranges */
--color-orange-dark-4: #be4015;
--color-orange-mid-5: #fc5724;
--color-orange-mid-6: #fd7b3b;
--color-orange-mid-7: #fd9c59;
--color-orange-light-8: #fdb979;
--color-orange-light-9: #fee7c1;
--color-orange-light-10: #fff8e7;
--color-orange-mid: var(--color-orange-mid-5);
/* Yellows */
--color-yellow-dark-4: #cfb214;
--color-yellow-mid-5: #ffd309;
--color-yellow-mid-6: #ffe53b;
--color-yellow-mid-7: #fff372;
--color-yellow-light-8: #fffca9;
--color-yellow-light-9: #fffbcd;
--color-yellow-light-10: #fcf9ee;
--color-yellow-mid: var(--color-yellow-mid-5);
--color-yellow-light: var(--color-yellow-mid-7);
--color-yellow-bright: var(--color-yellow-mid-6);
/* Greens */
--color-green-dark-2: #3a6002;
--color-green-mid-3: #4f820d;
--color-green-mid-4: #72aa24;
--color-green-mid-5: #96cb48;
--color-green-light-6: #b9e277;
--color-green-light-8: #e7f7cb;
--color-green-light-10: #f6fce9;
--color-green-dark: var(--color-green-dark-2);
--color-green-mid: var(--color-green-mid-3);
--color-green-light: var(--color-green-mid-5);
--color-green-bright: var(--color-green-light-6);
/* Teals */
--color-teal-dark-2: #046062;
--color-teal-mid-3: #0f8482;
--color-teal-mid-4: #27aaab;
--color-teal-mid-6: #4bc7cc;
--color-teal-light-7: #79dce3;
--color-teal-light-9: #ccf2f7;
--color-teal-light-10: #e9fafc;
--color-turquoise-dark: var(--color-teal-dark-2);
--color-turquoise-mid: var(--color-teal-mid-3);
--color-turquoise-light: var(--color-teal-light-7);
--color-turquoise-bright: var(--color-teal-light-7);
/* Blues */
--color-blue-dark-3: #114d94;
--color-blue-mid-4: #0761c2;
--color-blue-mid-6: #519af5;
--color-blue-light-8: #80b7ff;
--color-blue-light-9: #cfe3ff;
--color-blue-light-10: #eef3fc;
--color-blue-dark: var(--color-blue-dark-3);
--color-blue-bright: var(--color-blue-mid-6);
--color-blue-light: var(--color-blue-light-9);
--color-blue-mid: var(--color-blue-mid-4);
/* Indigos */
--color-indigo-dark-4: #3b427f;
--color-indigo-mid-5: #4f52a8;
--color-indigo-mid-7: #8d9ae4;
--color-indigo-light-8: #afbdf5;
--color-indigo-light-9: #cfdbfe;
--color-indigo-light-10: #eff3fa;
/* Purples */
--color-purple-dark-3: #51178c;
--color-purple-mid-4: #6727b9;
--color-purple-mid-6: #8d44d8;
--color-purple-light-8: #d395fe;
--color-purple-light-9: #edc3ff;
--color-purple-light-10: #f9edfc;
--color-purple-dark: var(--color-purple-dark-3);
/* Magentas */
--color-magenta-dark-3: #812373;
--color-magenta-mid-4: #ab278d;
--color-magenta-mid-7: #f690f1;
--color-magenta-light-8: #feb8ff;
--color-magenta-light-9: #fad1fe;
--color-magenta-light-10: #faeafc;
--color-purple-mid: var(--color-magenta-mid-4);
--color-pink-light: var(--color-magenta-mid-7);
--color-pink-bright: var(--color-magenta-light-9);
}
.coop-u-text {
color: var(--color-text);
}
.coop-u-text-bg {
background: var(--color-text);
}
.coop-u-text-fill {
fill: var(--color-text);
}
.coop-u-text-alt {
color: var(--color-text-alt);
}
.coop-u-text-alt-bg {
background: var(--color-text-alt);
}
.coop-u-text-alt-fill {
fill: var(--color-text-alt);
}
.coop-u-white {
color: var(--color-white);
}
.coop-u-white-bg {
background: var(--color-white);
}
.coop-u-white-fill {
fill: var(--color-white);
}
.coop-u-white-stroke {
stroke: var(--color-white);
border-color: var(--color-white);
}
.coop-u-black {
color: var(--color-black);
}
.coop-u-black-bg {
background: var(--color-black);
}
.coop-u-black-fill {
fill: var(--color-black);
}
.coop-u-black-stroke {
stroke: var(--color-black);
border-color: var(--color-black);
}
.coop-u-grey-light {
color: var(--color-grey-light);
}
.coop-u-grey-light-bg {
background: var(--color-grey-light);
}
.coop-u-grey-light-fill {
fill: var(--color-grey-light);
}
.coop-u-grey-mid {
color: var(--color-grey-mid);
}
.coop-u-grey-mid-bg {
background: var(--color-grey-mid);
}
.coop-u-grey-mid-fill {
fill: var(--color-grey-mid);
}
.coop-u-grey-mid-light-bg {
background: var(--color-grey-mid-light);
}
.coop-u-grey-mid-light-fill {
fill: var(--color-grey-mid-light);
}
.coop-u-grey-dark {
color: var(--color-grey-dark);
}
.coop-u-grey-dark-bg {
background: var(--color-grey-dark);
}
.coop-u-grey-dark-fill {
fill: var(--color-grey-dark);
}
.coop-u-grey-neutral-light-bg {
background: var(--color-grey-neutral-light);
}
.coop-u-grey-neutral-light-fill {
fill: var(--color-grey-neutral-light);
}
.coop-u-grey-neutral-warm-bg {
background: var(--color-grey-neutral-warm);
}
.coop-u-grey-neutral-warm-fill {
fill: var(--color-grey-neutral-warm);
}
.coop-u-grey-neutral-cool-bg {
background: var(--color-grey-neutral-cool);
}
.coop-u-grey-neutral-cool-fill {
fill: var(--color-grey-neutral-cool);
}
.coop-u-grey-neutral-cool-light-bg {
background: var(--color-grey-neutral-cool-light);
}
.coop-u-grey-neutral-cool-light-fill {
fill: var(--color-grey-neutral-cool-light);
}
.coop-u-link-blue {
color: var(--color-link);
}
.coop-u-link-blue-bg {
background: var(--color-link);
}
.coop-u-link-blue-fill {
fill: var(--color-link);
}
.coop-u-link-hover-blue {
color: var(--color-link-hover);
}
.coop-u-link-hover-blue-bg {
background: var(--color-link-hover);
}
.coop-u-link-hover-blue-fill {
fill: var(--color-link-hover);
}
.coop-u-link-focus {
color: var(--color-link-focus);
}
.coop-u-link-focus-bg {
background: var(--color-link-focus);
}
.coop-u-link-focus-fill {
fill: var(--color-link-focus);
}
.coop-u-link-focus-outline {
outline: 4px solid var(--color-link-focus);
}
.coop-u-link-visited,
.coop-u-link-active {
color: var(--color-link-visited);
}
.coop-u-link-visited-bg,
.coop-u-link-active-bg {
background: var(--color-link-visited);
}
.coop-u-link-visited-fill,
.coop-u-link-active-fill {
fill: var(--color-link-visited);
}
.coop-u-button-primary {
color: var(--color-button-green-primary);
}
.coop-u-button-primary-bg {
background: var(--color-button-green-primary);
}
.coop-u-button-primary-fill {
fill: var(--color-button-green-primary);
}
.coop-u-button-primary-hover-bg {
background: var(--color-button-green-primary-hover);
}
.coop-u-button-primary-hover-fill {
fill: var(--color-button-green-primary-hover);
}
.coop-u-button-primary-active-bg {
background: var(--color-button-green-primary-active);
}
.coop-u-button-primary-active-fill {
fill: var(--color-button-green-primary-active);
}
.coop-u-button-dark,
.coop-u-button-blue {
color: var(--color-button-blue);
}
.coop-u-button-dark-bg,
.coop-u-button-blue-bg {
background: var(--color-button-blue);
}
.coop-u-button-blue-fill {
fill: var(--color-button-blue);
}
.coop-u-button-dark-hover-bg,
.coop-u-button-blue-hover-bg {
background: var(--color-button-blue-hover);
}
.coop-u-button-blue-hover-fill {
fill: var(--color-button-blue-hover);
}
.coop-u-button-dark-active-bg,
.coop-u-button-blue-active-bg {
background: var(--color-button-blue-active);
}
.coop-u-button-blue-active-fill {
fill: var(--color-button-blue-active);
}
.coop-u-button-white-hover-bg {
background: var(--color-button-white-hover);
}
.coop-u-button-white-hover-fill {
fill: var(--color-button-white-hover);
}
.coop-u-button-grey-bg {
background: var(--color-button-grey);
}
.coop-u-button-grey-fill {
fill: var(--color-button-grey);
}
.coop-u-red-dark-4,
.coop-u-red-dark {
color: var(--color-red-dark-4);
}
.coop-u-red-dark-4-bg,
.coop-u-red-dark-bg {
background: var(--color-red-dark-4);
}
.coop-u-red-dark-4-fill,
.coop-u-red-dark-fill {
fill: var(--color-red-dark-4);
}
.coop-u-red-mid-5,
.coop-u-red-mid {
color: var(--color-red-mid-5);
}
.coop-u-red-mid-5-bg,
.coop-u-red-mid-bg {
background: var(--color-red-mid-5);
}
.coop-u-red-mid-5-fill,
.coop-u-red-mid-fill {
fill: var(--color-red-mid-5);
}
.coop-u-red-light-7 {
color: var(--color-red-light-7);
}
.coop-u-red-light-7-bg {
background: var(--color-red-light-7);
}
.coop-u-red-light-7-fill {
fill: var(--color-red-light-7);
}
.coop-u-red-light-8 {
color: var(--color-red-light-8);
}
.coop-u-red-light-8-bg {
background: var(--color-red-light-8);
}
.coop-u-red-light-8-fill {
fill: var(--color-red-light-8);
}
.coop-u-red-light-9 {
color: var(--color-red-light-9);
}
.coop-u-red-light-9-bg {
background: var(--color-red-light-9);
}
.coop-u-red-light-9-fill {
fill: var(--color-red-light-9);
}
.coop-u-red-light-10 {
color: var(--color-red-light-10);
}
.coop-u-red-light-10-bg {
background: var(--color-red-light-10);
}
.coop-u-red-light-10-fill {
fill: var(--color-red-light-10);
}
.coop-u-orange-dark-4 {
color: var(--color-orange-dark-4);
}
.coop-u-orange-dark-4-bg {
background: var(--color-orange-dark-4);
}
.coop-u-orange-dark-4-fill {
fill: var(--color-orange-dark-4);
}
.coop-u-orange-mid-5,
.coop-u-orange-mid {
color: var(--color-orange-mid-5);
}
.coop-u-orange-mid-5-bg,
.coop-u-orange-mid-bg {
background: var(--color-orange-mid-5);
}
.coop-u-orange-mid-5-fill,
.coop-u-orange-mid-fill {
fill: var(--color-orange-mid-5);
}
.coop-u-orange-mid-6 {
color: var(--color-orange-mid-6);
}
.coop-u-orange-mid-6-bg {
background: var(--color-orange-mid-6);
}
.coop-u-orange-mid-6-fill {
fill: var(--color-orange-mid-6);
}
.coop-u-orange-mid-7 {
color: var(--color-orange-mid-7);
}
.coop-u-orange-mid-7-bg {
background: var(--color-orange-mid-7);
}
.coop-u-orange-mid-7-fill {
fill: var(--color-orange-mid-7);
}
.coop-u-orange-light-8 {
color: var(--color-orange-light-8);
}
.coop-u-orange-light-8-bg {
background: var(--color-orange-light-8);
}
.coop-u-orange-light-8-fill {
fill: var(--color-orange-light-8);
}
.coop-u-orange-light-9 {
color: var(--color-orange-light-9);
}
.coop-u-orange-light-9-bg {
background: var(--color-orange-light-9);
}
.coop-u-orange-light-9-fill {
fill: var(--color-orange-light-9);
}
.coop-u-orange-light-10 {
color: var(--color-orange-light-10);
}
.coop-u-orange-light-10-bg {
background: var(--color-orange-light-10);
}
.coop-u-orange-light-10-fill {
fill: var(--color-orange-light-10);
}
.coop-u-yellow-dark-4 {
color: var(--color-yellow-dark-4);
}
.coop-u-yellow-dark-4-bg {
background: var(--color-yellow-dark-4);
}
.coop-u-yellow-dark-4-fill {
fill: var(--color-yellow-dark-4);
}
.coop-u-yellow-mid-5,
.coop-u-yellow-mid {
color: var(--color-yellow-mid-5);
}
.coop-u-yellow-mid-5-bg,
.coop-u-yellow-mid-bg {
background: var(--color-yellow-mid-5);
}
.coop-u-yellow-mid-5-fill,
.coop-u-yellow-mid-fill {
fill: var(--color-yellow-mid-5);
}
.coop-u-yellow-mid-6,
.coop-u-yellow-bright {
color: var(--color-yellow-mid-6);
}
.coop-u-yellow-mid-6-bg,
.coop-u-yellow-bright-bg {
background: var(--color-yellow-mid-6);
}
.coop-u-yellow-mid-6-fill,
.coop-u-yellow-bright-fill {
fill: var(--color-yellow-mid-6);
}
.coop-u-yellow-mid-7,
.coop-u-yellow-light {
color: var(--color-yellow-mid-7);
}
.coop-u-yellow-mid-7-bg,
.coop-u-yellow-light-bg {
background: var(--color-yellow-mid-7);
}
.coop-u-yellow-mid-7-fill,
.coop-u-yellow-light-fill {
fill: var(--color-yellow-mid-7);
}
.coop-u-yellow-light-8 {
color: var(--color-yellow-light-8);
}
.coop-u-yellow-light-8-bg {
background: var(--color-yellow-light-8);
}
.coop-u-yellow-light-8-fill {
fill: var(--color-yellow-light-8);
}
.coop-u-yellow-light-9 {
color: var(--color-yellow-light-9);
}
.coop-u-yellow-light-9-bg {
background: var(--color-yellow-light-9);
}
.coop-u-yellow-light-9-fill {
fill: var(--color-yellow-light-9);
}
.coop-u-yellow-light-10 {
color: var(--color-yellow-light-10);
}
.coop-u-yellow-light-10-bg {
background: var(--color-yellow-light-10);
}
.coop-u-yellow-light-10-fill {
fill: var(--color-yellow-light-10);
}
.coop-u-green-dark-2,
.coop-u-green-dark {
color: var(--color-green-dark-2);
}
.coop-u-green-dark-2-bg,
.coop-u-green-dark-bg {
background: var(--color-green-dark-2);
}
.coop-u-green-dark-2-fill,
.coop-u-green-dark-fill {
fill: var(--color-green-dark-2);
}
.coop-u-green-mid-3,
.coop-u-green-mid {
color: var(--color-green-mid-3);
}
.coop-u-green-mid-3-bg,
.coop-u-green-mid-bg {
background: var(--color-green-mid-3);
}
.coop-u-green-mid-3-fill,
.coop-u-green-mid-fill {
fill: var(--color-green-mid-3);
}
.coop-u-green-mid-4 {
color: var(--color-green-mid-4);
}
.coop-u-green-mid-4-bg {
background: var(--color-green-mid-4);
}
.coop-u-green-mid-4-fill {
fill: var(--color-green-mid-4);
}
.coop-u-green-mid-5,
.coop-u-green-light {
color: var(--color-green-mid-5);
}
.coop-u-green-mid-5-bg,
.coop-u-green-light-bg {
background: var(--color-green-mid-5);
}
.coop-u-green-mid-5-fill,
.coop-u-green-light-fill {
fill: var(--color-green-mid-5);
}
.coop-u-green-light-6,
.coop-u-green-bright {
color: var(--color-green-light-6);
}
.coop-u-green-light-6-bg,
.coop-u-green-bright-bg {
background: var(--color-green-light-6);
}
.coop-u-green-light-6-fill,
.coop-u-green-bright-fill {
fill: var(--color-green-light-6);
}
.coop-u-green-light-8 {
color: var(--color-green-light-8);
}
.coop-u-green-light-8-bg {
background: var(--color-green-light-8);
}
.coop-u-green-light-8-fill {
fill: var(--color-green-light-8);
}
.coop-u-green-light-10 {
color: var(--color-green-light-10);
}
.coop-u-green-light-10-bg {
background: var(--color-green-light-10);
}
.coop-u-green-light-10-fill {
fill: var(--color-green-light-10);
}
.coop-u-teal-dark-2,
.coop-u-green-blue-dark {
color: var(--color-teal-dark-2);
}
.coop-u-teal-dark-2-bg,
.coop-u-green-blue-dark-bg {
background: var(--color-teal-dark-2);
}
.coop-u-teal-dark-2-fill,
.coop-u-green-blue-dark-fill {
fill: var(--color-teal-dark-2);
}
.coop-u-teal-mid-3,
.coop-u-green-blue-mid {
color: var(--color-teal-mid-3);
}
.coop-u-teal-mid-3-bg,
.coop-u-green-blue-mid-bg {
background: var(--color-teal-mid-3);
}
.coop-u-teal-mid-3-fill,
.coop-u-green-blue-mid-fill {
fill: var(--color-teal-mid-3);
}
.coop-u-teal-mid-4 {
color: var(--color-teal-mid-4);
}
.coop-u-teal-mid-4-bg {
background: var(--color-teal-mid-4);
}
.coop-u-teal-mid-4-fill {
fill: var(--color-teal-mid-4);
}
.coop-u-teal-mid-6 {
color: var(--color-teal-mid-6);
}
.coop-u-teal-mid-6-bg {
background: var(--color-teal-mid-6);
}
.coop-u-teal-mid-6-fill {
fill: var(--color-teal-mid-6);
}
.coop-u-teal-light-7,
.coop-u-green-blue-bright,
.coop-u-green-blue-light {
color: var(--color-teal-light-7);
}
.coop-u-teal-light-7-bg,
.coop-u-green-blue-bright-bg,
.coop-u-green-blue-light-bg {
background: var(--color-teal-light-7);
}
.coop-u-teal-light-7-fill,
.coop-u-green-blue-bright-fill,
.coop-u-green-blue-light-fill {
fill: var(--color-teal-light-7);
}
.coop-u-teal-light-9 {
color: var(--color-teal-light-9);
}
.coop-u-teal-light-9-bg {
background: var(--color-teal-light-9);
}
.coop-u-teal-light-9-fill {
fill: var(--color-teal-light-9);
}
.coop-u-teal-light-10 {
color: var(--color-teal-light-10);
}
.coop-u-teal-light-10-bg {
background: var(--color-teal-light-10);
}
.coop-u-teal-light-10-fill {
fill: var(--color-teal-light-10);
}
.coop-u-blue-dark-3,
.coop-u-blue-dark {
color: var(--color-blue-dark-3);
}
.coop-u-blue-dark-3-bg,
.coop-u-blue-dark-bg {
background: var(--color-blue-dark-3);
}
.coop-u-blue-dark-3-fill,
.coop-u-blue-dark-fill {
fill: var(--color-blue-dark-3);
}
.coop-u-blue-mid-4,
.coop-u-blue-mid {
color: var(--color-blue-mid-4);
}
.coop-u-blue-mid-4-bg,
.coop-u-blue-mid-bg {
background: var(--color-blue-mid-4);
}
.coop-u-blue-mid-4-fill,
.coop-u-blue-mid-fill {
fill: var(--color-blue-mid-4);
}
.coop-u-blue-mid-6,
.coop-u-blue-bright {
color: var(--color-blue-mid-6);
}
.coop-u-blue-mid-6-bg,
.coop-u-blue-bright-bg {
background: var(--color-blue-mid-6);
}
.coop-u-blue-mid-6-fill,
.coop-u-blue-bright-fill {
fill: var(--color-blue-mid-6);
}
.coop-u-blue-light-8 {
color: var(--color-blue-light-8);
}
.coop-u-blue-light-8-bg {
background: var(--color-blue-light-8);
}
.coop-u-blue-light-8-fill {
fill: var(--color-blue-light-8);
}
.coop-u-blue-light-9,
.coop-u-blue-light {
color: var(--color-blue-light-9);
}
.coop-u-blue-light-9-bg,
.coop-u-blue-light-bg {
background: var(--color-blue-light-9);
}
.coop-u-blue-light-9-fill,
.coop-u-blue-light-fill {
fill: var(--color-blue-light-9);
}
.coop-u-blue-light-10 {
color: var(--color-blue-light-10);
}
.coop-u-blue-light-10-bg {
background: var(--color-blue-light-10);
}
.coop-u-blue-light-10-fill {
fill: var(--color-blue-light-10);
}
.coop-u-indigo-dark-4 {
color: var(--color-indigo-dark-4);
}
.coop-u-indigo-dark-4-bg {
background: var(--color-indigo-dark-4);
}
.coop-u-indigo-dark-4-fill {
fill: var(--color-indigo-dark-4);
}
.coop-u-indigo-mid-5 {
color: var(--color-indigo-mid-5);
}
.coop-u-indigo-mid-5-bg {
background: var(--color-indigo-mid-5);
}
.coop-u-indigo-mid-5-fill {
fill: var(--color-indigo-mid-5);
}
.coop-u-indigo-mid-7 {
color: var(--color-indigo-mid-7);
}
.coop-u-indigo-mid-7-bg {
background: var(--color-indigo-mid-7);
}
.coop-u-indigo-mid-7-fill {
fill: var(--color-indigo-mid-7);
}
.coop-u-indigo-light-8 {
color: var(--color-indigo-light-8);
}
.coop-u-indigo-light-8-bg {
background: var(--color-indigo-light-8);
}
.coop-u-indigo-light-8-fill {
fill: var(--color-indigo-light-8);
}
.coop-u-indigo-light-9 {
color: var(--color-indigo-light-9);
}
.coop-u-indigo-light-9-bg {
background: var(--color-indigo-light-9);
}
.coop-u-indigo-light-9-fill {
fill: var(--color-indigo-light-9);
}
.coop-u-indigo-light-10 {
color: var(--color-indigo-light-10);
}
.coop-u-indigo-light-10-bg {
background: var(--color-indigo-light-10);
}
.coop-u-indigo-light-10-fill {
fill: var(--color-indigo-light-10);
}
.coop-u-purple-dark-3,
.coop-u-purple-dark {
color: var(--color-purple-dark-3);
}
.coop-u-purple-dark-3-bg,
.coop-u-purple-dark-bg {
background: var(--color-purple-dark-3);
}
.coop-u-purple-dark-3-fill,
.coop-u-purple-dark-fill {
fill: var(--color-purple-dark-3);
}
.coop-u-purple-mid-4 {
color: var(--color-purple-mid-4);
}
.coop-u-purple-mid-4-bg {
background: var(--color-purple-mid-4);
}
.coop-u-purple-mid-4-fill {
fill: var(--color-purple-mid-4);
}
.coop-u-purple-mid-6 {
color: var(--color-purple-mid-6);
}
.coop-u-purple-mid-6-bg {
background: var(--color-purple-mid-6);
}
.coop-u-purple-mid-6-fill {
fill: var(--color-purple-mid-6);
}
.coop-u-purple-light-8 {
color: var(--color-purple-light-8);
}
.coop-u-purple-light-8-bg {
background: var(--color-purple-light-8);
}
.coop-u-purple-light-8-fill {
fill: var(--color-purple-light-8);
}
.coop-u-purple-light-9 {
color: var(--color-purple-light-9);
}
.coop-u-purple-light-9-bg {
background: var(--color-purple-light-9);
}
.coop-u-purple-light-9-fill {
fill: var(--color-purple-light-9);
}
.coop-u-purple-light-10 {
color: var(--color-purple-light-10);
}
.coop-u-purple-light-10-bg {
background: var(--color-purple-light-10);
}
.coop-u-purple-light-10-fill {
fill: var(--color-purple-light-10);
}
.coop-u-magenta-dark-3 {
color: var(--color-magenta-dark-3);
}
.coop-u-magenta-dark-3-bg {
background: var(--color-magenta-dark-3);
}
.coop-u-magenta-dark-3-fill {
fill: var(--color-magenta-dark-3);
}
.coop-u-magenta-mid-4,
.coop-u-purple-mid {
color: var(--color-magenta-mid-4);
}
.coop-u-magenta-mid-4-bg,
.coop-u-purple-mid-bg {
background: var(--color-magenta-mid-4);
}
.coop-u-magenta-mid-4-fill,
.coop-u-purple-mid-fill {
fill: var(--color-magenta-mid-4);
}
.coop-u-magenta-mid-7,
.coop-u-pink-light {
color: var(--color-magenta-mid-7);
}
.coop-u-magenta-mid-7-bg,
.coop-u-pink-light-bg {
background: var(--color-magenta-mid-7);
}
.coop-u-magenta-mid-7-fill,
.coop-u-pink-light-fill {
fill: var(--color-magenta-mid-7);
}
.coop-u-magenta-light-8,
.coop-u-pink-bright {
color: var(--color-magenta-light-8);
}
.coop-u-magenta-light-8-bg,
.coop-u-pink-bright-bg {
background: var(--color-magenta-light-8);
}
.coop-u-magenta-light-8-fill,
.coop-u-pink-bright-fill {
fill: var(--color-magenta-light-8);
}
.coop-u-magenta-light-9 {
color: var(--color-magenta-light-9);
}
.coop-u-magenta-light-9-bg {
background: var(--color-magenta-light-9);
}
.coop-u-magenta-light-9-fill {
fill: var(--color-magenta-light-9);
}
.coop-u-magenta-light-10 {
color: var(--color-magenta-light-10);
}
.coop-u-magenta-light-10-bg {
background: var(--color-magenta-light-10);
}
.coop-u-magenta-light-10-fill {
fill: var(--color-magenta-light-10);
}