Refactoring the SCSS color palette for better reusability and maintainability

[loiclaudet]

Overview

The current SCSS color palette includes various naming conventions tied to specific components and functional roles (e.g. primary, secondary...).

As the project grows and the color palettes in our design system have recently been updated, we probably need a more generic approach to make palette management more maintainable.

Here is a proposal to improve our current palette. Feel free to comment/update it, or to provide alternative proposals.

Proposed changes

1. Extract base colors
   Extract the base colors and their variants (e.g., 100, 200, ..., 900) from the Figma file (OKP4 - Design System > Atoms > Colors).
   We can use the Figma's Styler plugin.
   We first need to select the colors (using cmd + R), then generate style using the plugin.
   

2. Add base colors in the palette
   Add color variables in the existing palette.scss file, extracted colors variables might look like this:

   // orange palette
   $orange-100: #ffccbc;
   $orange-200: #ffab91;
   // ...
   
   // neutral palette
   $neutral-100: #E3E3E3;
   $neutral-200: #E5EBF0; // Disable BG Contained Buttons
   // ...
   
   // other
   $success: #00ff00;
   // ...

3. Remove Component-Specific Colors
   Colors that are specifically tied to a particular component can be removed from the global color palette. Instead, it might be more appropriate to define them within the component's own SCSS file.

4. Gradients
   For gradients, define them separately and map them to the base color variants.

   $gradient-1: linear-gradient(270deg, $blue-500 17.51%, $blue-700 100%);

5. Transparency
   

   Levels of transparency are manageable using the themed function.
   Example for the blue color with 500 variant and 60% transparency:

     div {
        color: rgba(themed($blue-500), 0.6)
     }

Benefits

• Reusability: The new palette will be more versatile, allowing colors to be easily reused across different components.

• Maintainability: The new structure will make it easier to update or extend the color palette in the future.

Next steps

1. Review the proposed changes and provide feedback.
2. Once approved, start implementing the changes in the SCSS files.
3. Test rigorously to ensure that the changes have not broken any existing functionalities.

@lolottetheclash @fredericvilcot @SpicySalm0n please lmk wyt. Thanks!

[lolottetheclash]

@0xLodz Thank you for your attention to the redesign of our colors, as it was an improvement we had to address!
The plugin seems perfectly suited to simplify our lives on this feature.
I think we need to schedule a meeting with @SpicySalm0n and the team to make sure we can go ahead with this new color designation.
Once things have settled down, we'll be able to launch development of the feature, which will have to be carefully addressed to avoid any possible UI regression.
I'm not sure about defining specific colors in the style sheet of the targeted component...
It seems appropriate to me, but if the color is ultimately to be reused later, it would have been simpler if it had been in the global file... we'll have to discuss this together!

[loiclaudet]

@lolottetheclash Thanks for your feedback!

I'm not sure about defining specific colors in the style sheet of the targeted component.

Highly likely that any colors outside of the Figma palettes would be for specialized use. Hence placing them in the component-specific CSS seems most fitting. If such colors end up needing reuse, perhaps that signals they should join the design system's color palettes.

[fredericvilcot]

Done in #475