Design System Audit: Swap colors with color variables: blues #2204
Description
Overview
As a developer, hard-coding colors only makes things difficult when colors change. For this only change the blue colors so we can use the color variables.
Action Items
- Refer to /_sass/variables/_colors.scss for the current color variables (blues)
- Replace all instances of the hard-coded colors with the color variables
- Make sure to do this carefully, as some changes might break the website
- If it breaks, investigate why and make edits accordingly. Ask for help if needed.
- If a color variable is unused, delete it from the files noted above.
- Release dependency on Design System Audit: Audit for hardcoded colors #2114 , if conditions are met
Resources/Instructions
website/_sass/variables/_colors.scss
Lines 31 to 40 in 09d4b31
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
You can do a search within VS Code with the following values:
Search: hex color goes here
Replace: color variable goes here
files to include: ./
files to exclude: *.svg, _site, _colors.scss
Once the values are in the search form, do the following actions:
- Click on the
Replace Allbutton (shortcut: Ctrl+Alt+Enter) - Click
Okto confirm replace
Click here to see visual example of search/replace for color variables within VS code
