[full-ci] feat: introduce contrast colors in swatches #8563
Conversation
|
Thanks for opening this pull request! The maintainers of this repository would appreciate it if you would create a changelog item based on your changes. |
kulmann
force-pushed
the
enhancement-background-theming
branch
from
926e6c6 to
d707d89
Compare
| &-input input { | ||
| border: 1px solid var(--oc-color-swatch-inverse-muted); | ||
| } | ||
| &-checkbox input { | ||
| border: 2px solid var(--oc-color-swatch-inverse-muted); | ||
| } |
There was a problem hiding this comment.
Without this, the filter checkboxes are hidden in dark mode:
In light mode, the normal background color as well as the drop background color are white. TBH, I don't know why these colours differ in dark mode and why drops have this (ugly 😅 ) light background.
There was a problem hiding this comment.
The icon of the current view mode is displayed in a white color now, which is a bit harder to see than the dark color before.
Stupid / naive me, thinking the tokens referencing values of other tokens would be respected at runtime. That's not the case. Only at build time. So the theme actually does need to set color vars for the contrast swatch tokens. Grmpf, that's not what I wanted to achieve. But probably the way to go for now if we don't want to rebuild the tokens at runtime when switching / loading themes.
There was a problem hiding this comment.
Without this, the filter checkboxes are hidden in dark mode:
In light mode, the normal background color as well as the drop background color are white. TBH, I don't know why these colours differ in dark mode and why drops have this (ugly 😅 ) light background.
Can be solved by setting an input-border color value in dark mode which is not the same as the secondary background color. 
Did that in this PR. Checkbox needs some more fine tuning. Some of it is done in a PR from @hurradieweltgehtunter
|
When I pull this PR and don't change the themes.json manually some icons are just black, if I use the example theme.json it looks alright so far. Shouldn't we change the themes.json for master? |
|
@lookacat did you run |
kulmann
force-pushed
the
enhancement-background-theming
branch
from
d707d89 to
f5c575f
Compare
|
Results for e2e-tests oC10 https://drone.owncloud.com/owncloud/web/34019/11/1 💥 To see the trace, please open the link in the console ...
npx playwright show-trace https://cache.owncloud.com/public/owncloud/web/34019/tracing/alice-can-share-this-weeks-meal-plan-with-all-parents-alice-2023-3-22-08-37-24.zipnpx playwright show-trace https://cache.owncloud.com/public/owncloud/web/34019/tracing/alice-can-share-this-weeks-meal-plan-with-all-parents-brian-2023-3-22-08-37-53.zipnpx playwright show-trace https://cache.owncloud.com/public/owncloud/web/34019/tracing/alice-can-share-this-weeks-meal-plan-with-all-parents-carol-2023-3-22-08-37-59.zipnpx playwright show-trace https://cache.owncloud.com/public/owncloud/web/34019/tracing/public-link-alice-2023-3-22-08-40-09.zip |
|
Now the share indicators have a black icon in dark mode (as well as the checkboxes, though you already mentioned that those need more fine tuning anyway) 😅
|
kulmann
force-pushed
the
enhancement-background-theming
branch
2 times, most recently
from
e8e0c9b to
5e833b8
Compare
| <oc-button | ||
| :id="`files-role-${roleOption.label.toLowerCase()}`" | ||
| :id="`files-role-${roleOption.key}`" |
There was a problem hiding this comment.
Ahhh, that change causes the tests to fail because they look for the id including the role name. So either we switch to data-test-id for this, or revert it. What do you think?
There was a problem hiding this comment.
good catch, thank you! I took the third option / a variation of the first option: I changed the id prop again to use roleOption.name because that is a lower-case html safe attribute already. With labels you never know for sure, since they're meant for the human eye. That's why I wanted to remove it from the template for the id in the first place.
kulmann
changed the title
The token fallback values are only calculated during build time. They are not relevant / evaluated when we set new colors to the css vars later on. Reason for that is simply that css vars can't reference other css vars but need their own value instead.
kulmann
force-pushed
the
enhancement-background-theming
branch
2 times, most recently
from
b37a138 to
63228b5
Compare
|
Results for e2e-tests oCIS https://drone.owncloud.com/owncloud/web/34022/12/1 💥 To see the trace, please open the link in the console ...
npx playwright show-trace https://cache.owncloud.com/public/owncloud/web/34022/tracing/share-a-link-with-internal-role-alice-2023-3-22-09-39-32.zipnpx playwright show-trace https://cache.owncloud.com/public/owncloud/web/34022/tracing/share-a-link-with-internal-role-alice-2023-3-22-09-47-04.zip |
kulmann
force-pushed
the
enhancement-background-theming
branch
from
63228b5 to
5aa0cb3
Compare
|
Kudos, SonarCloud Quality Gate passed! |
Description
This PR introduces a
contrasttoken for all ourswatches(i.e. our color variations in the design system). Their purpose is to define a high contrast color in relation to thedefaulttoken of the swatches. This way thecontrasttoken can e.g. be used as text color if thedefaulttoken represents a background color.The
contrasttokens are mainly used in three components of the design system:The main difference in those components now is that they don't use a generic text color anymore, but instead use the
contrastcolor of the active variation. This brings us the flexibility of having light and dark swatches in parallel. Previously this was not possible because one single text color was used for all swatches/variations. Having a light brand color and a darkdangercolor was conflicting. One of the two always had bad readability for text.One additional goal was to completely get rid of the
inverseswatch. Because, come on,inverseto what exactly?! I'm not there, yet, there are still 4 usages of theinverseswatch in the code. Might push that to a followup.Motivation and Context
More flexibility in theming.
How Has This Been Tested?
Well, it's about colors. Manually.
Mainly there are two areas of interest:
ownclouddefault theme looks the same as before with this PR.brandcolor. E.g. the json at the end of this PR description.Types of changes
Checklist:
Example theme.json with light brand color
In order to test this, create a new theme folder in
packages/web-runtime/themes, insert the following content in atheme.jsonfile. Add logos as needed in an assets folder. Build web and set the theme path in thedocker-compose.yamlfile.{ "common": { "name": "Custom", "slogan": "Custom - Your custom cloud", "logo": "themes/custom/assets/logo.svg" }, "ios": {}, "web": { "default": { "general": { "name": "Custom", "slogan": "Custom - Your custom cloud" }, "logo": { "topbar": "themes/custom/assets/logo.svg", "favicon": "themes/custom/assets/favicon.ico", "login": "themes/custom/assets/logo.svg" }, "loginPage": { "autoRedirect": true, "backgroundImg": "themes/custom/assets/loginBackground.svg" }, "designTokens": { "colorPalette": { "background-accentuate": "rgba(255, 255, 5, 0.1)", "background-default": "#ffffff", "background-highlight": "#edf3fa", "background-muted": "#f8f8f8", "background-secondary": "#ffffff", "background-hover": "rgb(236, 236, 236)", "border": "#ecebee", "input-bg": "#f0f4f8", "input-border": "#ceddee", "input-text-default": "#041e42", "input-text-muted": "#4c5f79", "swatch-brand-default": "rgb(238, 238, 238)", "swatch-brand-hover": "#223959", "swatch-brand-muted": "#223959", "swatch-brand-contrast": "rgb(39, 77, 127)", "swatch-danger-default": "#e00000", "swatch-danger-hover": "#e96464", "swatch-danger-muted": "#b50000", "swatch-inverse-default": "#ffffff", "swatch-inverse-hover": "#ffffff", "swatch-inverse-muted": "#bfbfbf", "swatch-passive-default": "#4c5f79", "swatch-passive-hover": "#97a2b1", "swatch-passive-muted": "#283e5d", "swatch-primary-default": "#4a76ac", "swatch-primary-hover": "#80a7d7", "swatch-primary-muted": "#2c588e", "swatch-primary-gradient": "#4e85c8", "swatch-success-default": "#4f822f", "swatch-success-hover": "#93e054", "swatch-success-muted": "#53960a", "swatch-warning-default": "#c6501b", "swatch-warning-hover": "#fda94b", "swatch-warning-muted": "#b35100", "text-default": "#041e42", "text-inverse": "#ffffff", "text-muted": "#4c5f79", "icon-folder": "#4d7eaf", "icon-archive": "#fbbe54", "icon-image": "#ee6b3b", "icon-spreadsheet": "#15c286", "icon-document": "#3b44a6", "icon-video": "#045459", "icon-audio": "#700460", "icon-presentation": "#ee6b3b", "icon-pdf": "#ec0d47" } } } } }