Colours
: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); }