Design System Audit: Swap colors with color variables: Reds

[Aveline-art]

Overview

As a developer, hard-coding colors only makes things difficult when colors change. For this only change the red colors so we can use the color variables.

Action Items

• Refer to /_sass/variables/_colors.scss for the current color variables (reds)
• Identify an instance of the hard-coded color
  • Check to see what that code impacts on the site.
  • Switch out the hard-coded color with the appropriate variable
  • Check to see if it broke anything. Some changes might break the website
  • If the color doesn't stay the same or you get any other kind of error, you can try using the classes from this file website/_sass/elements/_color-styles.scss
    • Add a comment to this issue with any instances of needing to use the styles instead of colors.scss
• If a color variable is unused,
  • Check if its corresponding color class is used. See a list of classes here: /_sass/elements/_color-styles.scss
• If both the color variable itself and the color class are not used for a specific color,
  • Delete the color variable from this file: _sass/variables/_colors.scss
  • Delete its corresponding color class from this file: /_sass/elements/_color-styles.scss
• Release dependency on Design System Audit: Audit for hardcoded colors #2114, if conditions are met

Resources/Instructions

• website/_sass/variables/_colors.scss

  Lines 5 to 11 in 09d4b31

  	// Reds
  	$color-red: #fa114f;
  	$color-firebrick: #D7261B;
  	$color-mediumvioletred: #D11D69;
  	$color-deeppink: #FA207C;
  	$color-orangered: #ee412a;
  	$color-salmon: #ffadad;

Click here to see a visual example of search/replace for color variables within VS code

Search: hex color
Replace: color variable
files to include: ./
files to exclude: *.svg, _site, _colors.scss
Click on the `Replace All` button (shortcut: Ctrl+Alt+Enter) Click `Ok` to confirm replace

If the task seems tedious, this might smooth things along if your native IDE is VSCode. Other IDEs might also have similiar functionality.
Advanced find and replace options for VSCode

• Information about color CSS property: https://developer.mozilla.org/en-US/docs/Web/CSS/color

[ExperimentsInHonesty]

This issue got reopened, because we did an manual check and found that on one color alone there were at least 5 changeable instances that did not get changed.

• $color-red: #fa114f;
  • _sass/components/_guides.scss
    • text-decoration-color: #fa114f;
    • color: #fa114f;
  • _layouts/guides.html
    • ref="https://www.google.com/"style="color: #fa114f;" >
  • _guide-pages/how-to-set-reminders-in-slack.md
    • color: #FA114F;
  • pages/guides.html
    • href="https://www.google.com/"style="color: #fa114f;" >
    • color: #FA114F;

[esantiano]

ETA: 11/18/22
Availability: 3 Hours

[ExperimentsInHonesty]

There is activity on the PR as of 6 days ago

[esantiano]

Progress: changed all changeable instances of #fa114f to "$color-red". Checking pages for instances of "$color-salmon: #ffadad" and "rgb(250, 17, 79)"
Blockers: Recently started a new job.
Availability: 3 Hours
ETA: 12/03/2022