refactor: replace hardcoded color values with SCSS variables for consistency

[germa89]

TO BE MERGED IN #696

I believe we should use variables for colors too. So we can use them across all the files.

I also believe, we should consider (when possible) to use name colors instead of our own.

For example, we have defined #686666 which is very similar to color dimgray (#696969). Having standarised colors is interesting, helps to talk about the colors, and helps the autocomplete tools.

$fire-brick is not detected:

but $firebrick (standard name) is:

But the preview shows here matches the standard definition of the color firebrick (​#b22222) which might differ from our own definition (#b72e2a).

I do acknowledge that the preview is provided by externals tools (VSCode extension: https://marketplace.visualstudio.com/items?itemName=bierner.color-info). Yet I find the approach and concept presented here important/useful.

Color names

The name of the variables are obtained (sort of) from the following script.

I also used it to find similar colors in for the #695

import matplotlib.colors as mcolors
from matplotlib.colors import to_rgb
from scipy.spatial import KDTree

colors = []
mapping = {}

def closest_named_color(hex_color):
    # Remove alpha if present
    hex_color = hex_color[:7].lower()
    rgb = to_rgb(hex_color)

    # Prepare named colors RGB dict
    color_dict = mcolors.XKCD_COLORS
    color_dict.update(mcolors.TABLEAU_COLORS)
    color_dict.update(mcolors.CSS4_COLORS)  # you can also combine with BASE_COLORS, XKCD_COLORS, etc.
    color_dict.update(mcolors.BASE_COLORS)

    names = list(color_dict.keys())
    rgb_values = [to_rgb(color_dict[name]) for name in names]

    # Find closest using KDTree
    tree = KDTree(rgb_values)
    dist, idx = tree.query(rgb)
    print(f"Color definition: '{hex_color}' Similar color name: '{names[idx]}' (Hex: {color_dict[names[idx]]}) Distance: {dist}")
    
    color_name = names[idx]

    if color_name in mapping:
        if dist > 0.07:
            raise ValueError(f"Color '{color_name}' is too far from the existing color. Distance: {dist}.")
        elif dist == 0.0:
            # print()
            pass
        else:
            print(f"Color '{color_name}' already exists in the list. Replacing {hex_color} with {color_dict[names[idx]]} (Distance: {dist})")
    else:
        mapping[color_name] = hex_color

# Example
closest_named_color("#353535")