Color balance

[oleole39]

Hello @greyaz, Thank you for sharing this nice design work. I am happy with the default color theme, but I found a few contrast issues (particularly visible with the dark theme) that I share here in case you would like to merge them:

• form's placeholder's texts are not really legible; as a fix I set them as greyscale-1; see below Before & After pictures:
• task list icons were set with an opacity of ".08" (almost invisible) which is likely to be a typo for the expected value "0.8" which I restored here (although to my mind it could be 1 as the hover effect doesn't bring much meaning on this very part). See below Before & After pictures:
• task summary text on yellow background required better contrast. No commit - I let you consider this point, I simply changed greyscale-1 color in dark theme settings to #DDDDDD. See below Belore & After pictures:

[greyaz]

Hi oleole39,

Thank you for your efforts. Finally, someone is talking about the theme itself~😄 I agree there are some contrast issues with the dark theme, but the solutions need to be adjusted:

Placeholders texts As the light and dark themes share the same style sheet, changing greyscale-2 to greyscale-1 will also affect the light theme. Just updating the value of greyscale-2 is a better way.

Task list icons The opacity of "0.08" is actually on purpose. The contents in the card footer could be very long. Long texts with a big amount of cards lead to a cluttered feeling. Please look at this: I may provide an option on the settings page about this issue.

Task summary text Yes, you are right. "#CCC" or "#DDD" can provide more contrast.

[oleole39]

Hi greyaz,

• Regarding placeholder texts, I actually did think about that at the first place, but found them more legible after the commit even for light theme. See before & after pictures (with greyscale-1 set to "#DDD" in the theme's settings)

• Regarding task-list-icons & task-board-icons, I get your point. Since those information may be important to me, having to click accurately on those invisible texts to make them visible looks like an unnecessary effort (especially if I want to check several). I don't have a table template as full as yours to realize how annoying the "cluttered" view is, but how about changing opacity to 1 when hovering anywhere in the task-board or the table-list-row instead of specifically the icons? That would save the uncluttered view, but at the same time make it a bit easier to check the data when required. I have just pushed a new commit for this.

But in case you would feel it is more a matter of personal preferences, I would be able to live with it. Best

PS: I didn't notice other major contrast issue so far in the theme. Maybe with the dark version of the Gantt chart though (I saw an issue had been opened for it) but I don't have a template yet to try it, and thus do not plan to change it for now.

[hoducha]

@greyaz Thanks for explaining why the opacity of the card footer (task list icons) is .08. I thought it was a typo, and I believe many people think so. Because the length of the card footer depends on the theme settings, it would be great if there was an option to change its opacity.

[greyaz]

@oleole39 Sorry for replying so late. I've been quite busy recently😬. The --color-greyscale-1 in light theme can not be "#DDD", as all general texts share this color, if we change it to "#DDD", the light theme will look like this:

There are two ways to update the color of placeholders:

1. Change the color to greyscale-1，and add an extra style to control the opacity
2. Keep it as greyscale-2, but adjust the value of it

You can update your PR by following those ways.

@hoducha No problem. I've added it into my task list already.

[oleole39]

Hi greyaz,

The --color-greyscale-1 in light theme can not be "#DDD", as all general texts share this color, if we change it to "#DDD"

Yes sorry, my explanation was confusing (and probably I had not in mind anymore at the time of writing that there are 2 distinct palettes in the theme's settings) - I had actually set #DDD to greyscale-1 only in the dark palette, as mentioned in my first message. Therefore, my previous message has to be understood that way - there seems to be no problem shifting this element from greyscale-2 to greyscale-1 (which I verified again just now, applying the commits attached to this PR to a fresh install of the theme), never mind the theme's variant (light/dark) one could be using. I had indeed set greyscale-1 color to "#DDD" in the dark palette but this is actually not for the same purpose - it improves the contrast on yellow as shown in my first message. If you wish to get this value hardcoded as default, I can add a commit for this (not done so far). To conclude, I am quite happy with the results of this PR's commits using the dark theme, and I think you would be fine too with the light theme.

I have just added a last commit which makes the "edit" icon in the cards of the table view behave the same as the other icons' of those cards (due to my previous commits in this PR), i.e. opacity to 0.08 at default state shifting to 1 when "task-board" element is hovered.

[greyaz]

@oleole39 All updates in board-task-list.css are good, thank you for your efforts. But as placeholders are also used in text inputs, they should differ from general text to help users recognize current status. Keeping the color of placeholders with general text the same is not a good idea.

Current Placeholders: Users can recognize the difference after input something:

The default effect after setting color to greyscale-1

So as said before, there are two ways to update the color of placeholders:

1. Change the color to greyscale-1，and add an extra style to control the opacity
2. Keep it as greyscale-2, but adjust the value of it

[greyaz]

@oleole39

For releasing the next version，I am going to revise (restore codes in form-components.css) and merge your PR. You can open another PR, if you have some new ideas about the color of placeholders.