Solving #3234 included a (temporary) solution based on hardcoded opaque colors. This issue should enhance that solution to work with themes (dark, light, white).
Describe the solution you'd like
❗️NEEDS REFINEMENT
The current theme mixins utilizes semi-transparent colors (hsl with alpha). Because they are transparent they cannot be used for covering content such as the platform native calendar icon on <input type="date"> elements.
See libs/core/src/scss/themes/_component-themes.scss
One solution could be to add the opaque colors as custom properties / tokens and use those for the existing theme color tokens combined with transparency as well as for form fields (especially date input). Look into CSS relative color functions (https://developer.chrome.com/blog/css-relative-color-syntax#adjust_opacity_a_color) and/or CSS color-mix().
Have you considered any alternatives?
Are there any additional context?
Checklist:
The following tasks should be carried out in sequence in order to follow the process of contributing correctly.
Refinement
[ ] Request that the issue is UX refined; do not proceed until this is done.
[ ] Request that the issue is tech refined; do not proceed until this is done.
Implementation
The contributor who wants to implement this issue should:
Describe the enhancement
Solving #3234 included a (temporary) solution based on hardcoded opaque colors. This issue should enhance that solution to work with themes (dark, light, white).
Describe the solution you'd like
❗️NEEDS REFINEMENT
The current theme mixins utilizes semi-transparent colors (hsl with alpha). Because they are transparent they cannot be used for covering content such as the platform native calendar icon on
<input type="date">elements.See
libs/core/src/scss/themes/_component-themes.scssOne solution could be to add the opaque colors as custom properties / tokens and use those for the existing theme color tokens combined with transparency as well as for form fields (especially date input). Look into CSS relative color functions (https://developer.chrome.com/blog/css-relative-color-syntax#adjust_opacity_a_color) and/or CSS
color-mix().Have you considered any alternatives?
Are there any additional context?
Checklist:
The following tasks should be carried out in sequence in order to follow the process of contributing correctly.
Refinement
Implementation
The contributor who wants to implement this issue should:
Review
Once the issue has been implemented and is ready for review: