Add SDG background color classes: 2-5, 8-11, 13, 16, 17

[JessicaLucindaCheng]

Dependency

• Add SDG color variables: 2-5, 8-11, 13, 16, 17 #4233

Overview

We need to add background color classes using the SDG (Sustainable Development Goal) color variables to our repo so we can use these classes with their corresponding, matching SDG icons.

Action Items

• In the _sass/elements, create a new file: _background-sdg-colors.scss
• In the file you just created, add the following:

/**
 * Sustainable Development Goal (SDG) Background Colors
 *
 * These background color classes match the colors of the SDG icons provided by the United Nations (UN):
 * https://www.un.org/sustainabledevelopment/news/communications-material/
 */

.background-color-sdg2 { background-color: $color-sdg2; }
.background-color-sdg3 { background-color: $color-sdg3; }
.background-color-sdg4 { background-color: $color-sdg4; }
.background-color-sdg5 { background-color: $color-sdg5; }
.background-color-sdg8 { background-color: $color-sdg8; }
.background-color-sdg9 { background-color: $color-sdg9; }
.background-color-sdg10 { background-color: $color-sdg10; }
.background-color-sdg11 { background-color: $color-sdg11; }
.background-color-sdg13 { background-color: $color-sdg13; }
.background-color-sdg16 { background-color: $color-sdg16; }
.background-color-sdg17 { background-color: $color-sdg17; }

• In the _sass/main.scss, under the Elements section, add this:

@import 'elements/background-sdg-colors';

Merge Team, Technical Lead, or Product Manager

• Once the pull request associated with this issue is merged, go to each of the following issues and check if all the issues/dependencies listed under the Dependency section are closed or checked off. If the dependencies are all closed or checked, move those issues into the New Issue Approval column, remove the Dependency label on it, and add a ready for dev lead label to it.
  • Fix SDG background color on project pages so that it matches the SDG icons #4187

Resources/Instructions

• _sass/elements
• _sass/main.scss
• SDGs_HEX_Colors tab in HfLA: Projects: SDG and Targets Google Sheet
• This issue is tracked in Rollout Plan: Move, refactor, and add SDG info and images #4153

[jdingeman]

Hi @wKategianes - when you take on an issue, please remember to move the issue into the In Progress column. Thanks!

[github-actions]

Hi @jenny-alexander, thank you for taking up this issue! Hfla appreciates you :)

Do let fellow developers know about your:-
i. Availability: (When are you available to work on the issue/answer questions other programmers might have about your issue?)
ii. ETA: (When do you expect this issue to be completed?)

You're awesome!

P.S. - You may not take up another issue until this issue gets merged (or closed). Thanks again :)

[jenny-alexander]

Availability: Friday May 19 10-12pm.
ETA: Friday May 19 10-12pm.