Css is too complex to permit anyone to create new theme about lychee-front HOT 6 CLOSED

Hello all !
I made a big update of my POC.
I revert my change and i did 2 scss list:

• color name list with most color used (this probably need to be completed) using naming found with https://chir.ag/projects/name-that-color/ . I also organised these color by color, to make easier to find very close color. From the color only point of view, it easy to see that some color are too close to make sense to be keep. note: I don't remove any color, i'm waiting for suggestion.
• semantic-color list with semantic name of usage of the color
  • naming is far from perfect, so be free to suggest or just modify naming in place, after posting a comment here if you decide to do so.
  • This part is really hard for me, so i did just a part of the process. I will try to do some other part if i found some time to do so but i will be more confident if someone in the dev team help me there.

Note: i have removed the old color variable.
Note2: The best solution to work with css var and transparency seems to be like this: background-color: rgba(color(punch),0.8);

from lychee-front.

This is a good first step but you lose the semantic of the color.
What I mean by that is what does color a corresponds to ?

If you provide a solution which allow to more easily set-up the colors while preserving their meaning then yes this will be considered.

As is, there is absolutely no way to know which colors corresponds to what. :|

from lychee-front.

Hello !

This is a good first step but you lose the semantic of the color.
What I mean by that is what does color a corresponds to ?

If you provide a solution which allow to more easily set-up the colors while preserving their meaning then yes this will be considered.

As is, there is absolutely no way to know which colors corresponds to what. :|

I don't think we loose the semantic of the color, as there is not real semantic now. I can replace "a" by color name, but it's not really what we would expect for a semantic naming. But i can try it just to make thing a bit easier for now.

The problem i do face now, is that the css code is heavy, and i'm really new to the project, so i don't have clear clue about how to properly rationate color. In some case, we may expect 2 named colors for one real color (for example white foreground vs white background) and have naming more accordingly to the usage we do of the color than to the color itself like: "primary_background", "primary_foreground"… and with around 50 colors, it's really complicated to do so.

from lychee-front.

"primary_background", "primary_foreground"… and with around 50 colors, it's really complicated to do so.

That is indeed my intent.

You can also use the information where this color appear:
color--base--background
color--sidebar--background
color--album--thumb-border

etc...

Rather than foreground, I tend to prefer text as it is more explicit in my mind (maybe not for everyone though)

from lychee-front.

I agree that 50 colors seems unnecessary and I would sure like to see that number brought down to something more manageable. But first we need to understand how those colors are currently used...

from lychee-front.

Thank you @inkhey for working on this issue! I was going to suggest that a collection of themes would also made lychee more attractive and this is a great start. To add to the discussion, we might want to look to other projects and how colors are done there to ease the transition for others and perhaps make porting of themes easier. Eg. https://getbootstrap.com/docs/5.0/customize/color

from lychee-front.