Merge branch 'develop' into dependabot/npm_and_yarn/multi-339deb07ce

Author: raclim

contributor_docs/preparing_a_pull_request.md

@@ -51,7 +51,17 @@ Then ask git about the latest changes.
     git status       
 
 ## Pull Request Templates
-Once you've opened your pull request, please ensure that you follow the guidelines.
+
+Once you've opened your pull request, please ensure that you follow the guidelines **and verify the following before submitting for review:**
+
+- ✅ Your code has no linting errors (`npm run lint`)
+- ✅ All tests pass successfully (`npm run test`)
+- ✅ Your branch name is unique and based off the latest `develop` branch
+- ✅ The pull request title and description clearly describe the change
+- ✅ Your pull request links to the related issue number (e.g., `Fixes #1234`)
+- ✅ Screenshots or videos are included if the change affects the user interface
+
+Following these steps helps maintain code quality and makes it easier for maintainers to review and merge your contribution.
 
 ## CONFLICTS
 You may have some conflicts! It's okay. Feel free to ask for help. If merging with the latest upstream `develop` branch causes conflicts, you can always make a pull request with the upstream repository, which makes the merge conflicts public.

contributor_docs/styling.md

@@ -3,5 +3,11 @@
 Currently in progress. 
 
 ---
+Additional Resources: 
 - [Zeplin File with Official Colors](google.com/url?q=https://github.com/processing/p5.js-web-editor/wiki/Color-Combinations-for-Accessibility&sa=D&source=docs&ust=1769528946688435&usg=AOvVaw2626esAvAi1JMEjarRcDcT)
 - [Accessible Links Color Combinations](https://scene.zeplin.io/project/55f746c54a02e1e50e0632c3)
+
+Tips when making styling contributions: 
+- Define color specifications and other design tokens as CSS custom properties (e.g. `--var(primary-color)`) instead of hard coded values like HEX, RGB ..etc.
+- Ensure your changes only affect what you intend. For example, review what uses a variable before modifying it to avoid unintended changes. 
+- Before creating a new CSS, check for utility classes and variables that provide styling you need.