Add SDG background color classes: 2-5, 8-11, 13, 16, 17 #4344
Description
Dependency
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 theElementssection, 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
Dependencysection are closed or checked off. If the dependencies are all closed or checked, move those issues into theNew Issue Approvalcolumn, remove theDependencylabel on it, and add aready for dev leadlabel to it.