nextcloud-libraries
color-text-maxcontrast needs to use darker value in new left navigation
Since the new left navigation is slightly transparent, we need to use a slightly darker --color-text-maxcontrast value when it’s used in there.
To be clear: Only for the usage in there, we should not increase the value of the variable overall, as then it will reduce the contrast/difference to --color-main-text.
Of course there are different backgrounds, but let’s start out by making sure it works for the default background.
With current #767676 (maxcontrast) for subline |
With better #646464 |
|---|---|
 |
 |
 |
 |
Also, .line-two__subtitle uses the outdated variable var(--color-text-lighter) – we only use --color-main-text and --color-text-maxcontrast, as per the design guidelines: https://docs.nextcloud.com/server/latest/developer_manual/design/foundations.html#text-color
@juliushaertl @CarlSchwan we should ideally fix this for the release as it relates to the accessibility of a very prominent element. What do you think of the proposal?
Sounds good to me 👍 Also the change is very subtle - thus not impacting screenshots
This uses server-side calculated color variables so splitting up calculations with new client-side logic wouldn't be an option, seems that adding a new variable would be the way to go then @skjnldsv?
Would mean replacing --color-text-lighter in NcListItem with the new variable
@Pytal note that --color-text-lighter and --color-text-light are actually not recommended to use. We use:
--color-main-text--color-text-maxcontrast
And while we could introduce a new --color-text-maxcontrast-more or something like that, it would even be better if we just say that on certain backgrounds (like the one in the navigation), the maxcontrast is just upped a little. That way developers don’t have to specifically set it, and also sometimes the background of the navigation might not be transparent, like on mobile.
We can only increase the contrast by darkening the variable server-side with $this->util->darken($colorTextMaxcontrast, 7) (#767676 -> #646464) as CSS does not allow you to darken a color variable at runtime and we have to scope it to maxcontrast text within AppNavigation with a light theme applied
Fix in https://github.com/nextcloud/nextcloud-vue/pull/3307 and https://github.com/nextcloud/server/pull/34299