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

[JessicaLucindaCheng]

Overview

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

Action Items

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

/**
 * Sustainable Development Goal (SDG) Colors
 *
 * The hex color values for these variables match the SDG color icons provided by the United Nations (UN).
 * These hex values are from the last the page in the SDG Guidelines provided by the UN:
 * https://www.un.org/sustainabledevelopment/wp-content/uploads/2019/01/SDG_Guidelines_AUG_2019_Final.pdf
 */

$color-sdg2: #DDA63A;
$color-sdg3: #4C9F38;
$color-sdg4: #C5192D;
$color-sdg5: #FF3A21;
$color-sdg8: #A21942;
$color-sdg9: #FD6925;
$color-sdg10: #DD1367;
$color-sdg11: #FD9D24;
$color-sdg13: #3F7E44;
$color-sdg16: #00689D;
$color-sdg17: #19486A;

• In the _sass/main.scss, under the General Settings and Utilities section, add this:

@import 'variables/colors-sdg';

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.
  • Add SDG background color classes: 2-5, 8-11, 13, 16, 17 #4344

Resources/Instructions

• _sass/variables
• _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

[JessicaLucindaCheng]

Before I finalize this issue, I'm wondering

• Should the SDG colors be considered part of the Design System? Ans: From Bonnie, yes but like a special case
  • If no, then
    • Should we have a separate file for SDG color variables, such as _sdg-colors.scss? Ans: We can
    • Should we have a separate file for SDG background color classes, such as _sdg-background-colors.scss?
• How do we want to name the colors? Did we pick a convention/website to follow?
  • I was just going to use the color names in the last page of the UN's SDG guide and do the following:
  • UN provided color for SDG 11: golden yellow
    • Color variable: $color-sdg-goldenyellow
    • Background class: .background-sdg-goldenyellow { background: $color-sdg-goldenyellow; }

I will bring it up in Sun, Mar 26 All Team Meeting or Mon, Mar 27 Dev/PM Meeting.

Edit:

• From Bonnie, we can have a new variable SCSS file just for SDG color variables.
• Explain why we can't use the color-COLORNAME classes for background colors.
  • Example of color-COLORNAME classes:

    website/_sass/elements/_color-styles.scss

    Lines 53 to 55 in f6df44e

    	.color-pink { color: $color-pink; }
    	.color-whitesmoke { color: $color-whitesmoke; }
    	.color-white { color: $color-white; }

    • The SCSS color property specifies the color of the text (definition from https://www.w3schools.com/cssref/pr_text_color.php)
  • Background colors in SCSS:

    website/_sass/elements/_cards.scss

    Lines 51 to 68 in f6df44e

    	/*---------------------------
    	Page Card Colors
    	---------------------------*/
    	// White Page Card
    	.card-primary {
    	background: $color-white;
    	}
    	// Beige / Pink Page Card
    	.card-secondary {
    	background: $color-pink;
    	}

  • Code examples of its application:

    • website/_includes/forms/contact-us.html

      Line 5 in f6df44e

      <div class="page-card card-secondary page-card-md-VWU page-card--home page-card--home-volunteer">

    • website/_includes/forms/contact-us.html

      Line 19 in f6df44e

      <div class="page-card card-secondary page-card-md page-card--home">