Design System Audit: Audit for hardcoded colors

[Aveline-art]

Dependency

• Design System Audit: Swap color with color variable in project.html #4138
• Design System Audit: Swap colors with color variables: Reds #2112
• Design System Audit: Swap colors with color variables: black, grey, and white #2113
• Design System Audit: Swap colors with color variables: Oranges #2198
• Design System Audit: Swap colors with color variables: Yellows #2199
• Design System Audit: Swap colors with color variables: Greens #2200
• Design System Audit: Swap colors with color variables: blues #2204
• Design System Audit: Swap colors with color variables: purples, #2205

Overview

We want to stop using hard-coded colors, and instead, use variables so future changes to colors in our color palette will be easier to implement on our website.

Action Items

• Check our entire code base for hard-coded colors (as opposed to a color variable).
  • Check for all of the color types listed in the Resource section below.
  • If a color is hard-coded*, and is not currently a variable (see files below), add a comment on this issue noting:
    • its location, including
      • file
      • code snippets
    • the type of color (reds, oranges, blacks, etc)
    • suggested color variable name
  • Else:
    • change the hard-coded color to a variable instead

Resources/Instructions

• HTML colors: https://htmlcolorcodes.com/
• Color variables and classes in our codebase
  • Color variables: https://github.com/hackforla/website/blob/gh-pages/_sass/variables/_colors.scss
  • Color classes: https://github.com/hackforla/website/blob/gh-pages/_sass/elements/_color-styles.scss
• If the task seems tedious, this might smooth things along if your native IDE is VSCode. Other IDEs might also have similar functionality.
  • Advanced find and replace options for VSCode

*Hard-coded colors can be one of the following color types:

• HTML color codes
• Hex color codes
• RGB
• HSL values
• HTML color names