(Refactor) Determination of a color palette.

[SamuelPelletierEvraire]

Description

As part of the ongoing efforts to refactor the FertiScan project, there is a need to standardize the visual aspects of our application for a more cohesive and professional look. One foundational element of a project's aesthetics is its color palette. A well-defined color palette ensures consistency across all visual components of the software, improves brand recognition, and enhances user experience.

Therefore, we are seeking to determine a color palette that reflects the values and functionality of the FertiScan project. This palette will be used across the entire user interface, including charts, dialogs, buttons, and other graphic elements.

Task

• [ ] Creation of a new file in the github wiki.
• [ ] Documentation of the color palette. (See with ACP) (Meeting pending) See link here for documentation about color palette of governmental site.

Acceptance criteria

• [ ] The color palette must use the Material UI color palette
• [ ] The color palette should reflect the colors of the government, specifically those of the CFIA (Canadian Food Inspection Agency).
• [ ] The palette must include 4 themes: light, dark, and two themes for color blindness.

Parent task

Ensure that all prerequisite or parent tasks are completed before commencing this task.

188

Child tasks

Next task to do

190

[SamuelPelletierEvraire]

Here's an example code of what the new workflow for color checking should look like:

const glob = require("glob");
const fs = require("fs");

// List of allowed hexadecimal colors (add your own Material UI values)
const allowedHexColors = new Set([
  '#F44336', // red
  '#E91E63', // pink
  '#9C27B0', // purple
  // ... Add all colors from the Material UI palette
]);

// Add allowed RGB colors if necessary
const allowedRgbColors = new Set([
  'rgb(244, 67, 54)', // red
  'rgb(233, 30, 99)', // pink
  'rgb(156, 39, 176)', // purple
  // ... Add all colors from the Material UI palette in RGB format
]);

glob("**/*.{js,jsx,ts,tsx,css,scss}", {}, (err, files) => {
  if (err) {
    console.error(err);
    process.exit(1);
  }

  files.forEach((file) => {
    const content = fs.readFileSync(file, 'utf-8');

    // Check hexadecimal colors
    const hexColorRegex = /\#[0-9A-Fa-f]{6}/g;
    const hexMatches = content.match(hexColorRegex);
    if (hexMatches) {
      hexMatches.forEach((color) => {
        if (!allowedHexColors.has(color.toUpperCase())) {
          console.error(`Forbidden hexadecimal color found: ${color} in file ${file}`);
          process.exit(1);
        }
      });
    }

    // Check RGB colors
    const rgbColorRegex = /rgb\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*\)/g;
    const rgbMatches = content.match(rgbColorRegex);
    if (rgbMatches) {
      rgbMatches.forEach((color) => {
        // Normalize color representation (remove superfluous spaces, etc.)
        const normalizedColor = color.replace(/\s+/g, '');
        if (!allowedRgbColors.has(normalizedColor)) {
          console.error(`Forbidden RGB color found: ${color} in file ${file}`);
          process.exit(1);
        }
      });
    }
  });

  console.log('Color validation successful.');
});