Content
View differences
Updated by Parimal Satyal over 3 years ago
### Context
Today, the date picker only partially adapts to the current theme. This was as specified initially for 12.2 (<mention class="mention" data-id="42047" data-type="work_package" data-text="#42047">#42047</mention>) and then updated for 12.3 (to include non-working days, <mention class="mention" data-id="41341" data-type="work_package" data-text="#41341">#41341</mention>).
The active field colour, links and action bar take the theme colours but the date selections in the mini calendar and the switches do not. Iinstead, they use shades of the OpenProject blue: _Main/Main_ for the primary blue, and _Main/Light_ for the lighter blue to indicate selection.
Here's an example of what a date picker in a red SouvAP theme looks like, with the OpenProject blue mixing with the theme red:
<img class="op-uc-image op-uc-image_inline" style="width:577px;" src="/api/v3/attachments/51075/content">
### Known issues
The current theming system (in _Administration → Design_) does not use the colour system we use in our Design system, notably because we are still working on a consistent way to handle themed colours.
**To allow the current date picker to adapt to existing themes, we have to find a way to derive certain colours (for example** _**Main/Main Light**_**).**
For reference, there was a work package to map these colours for 12.2, which we descoped in favour of using the standard blue in the date picker: ###42165
* Our current theming system allows the user to select a **primary colour** (here: #9E292B) that we use for the buttons; we can use this for the start/end dates.
* We need a lighter colour for selections but can't use any user-defined value defined (the user can set "alternative" and "dark" colours but we can use neither, since they can be any colour).
This work package aims to make the date picker adapt to the current theme before we define a proper theme-sensitive colour system for our Design system.
### **Acceptance criteria**
For the mini calendar:
* Use **Primary colour of the theme** for the selected start and finish dates (instead of Main/Main).
* **Derive a lighter shade** for the background of dates in the selected range between the start and end dates (instead of Main/Main Light).
* Open question: how? What value?
* Use this lighter shade as foreground colour for non-working days when the selection spans non-working days, over the current grey.
For the switches:
* Use **Primary colour of the theme** for the main switch colour (instead of Main/Main), and for the outlinen when ON.
* Use the derived lighter shade of the primary colour of the theme as the background of the switch when ON.
### Visuals
**Themed date picker with a selected range:**
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/51077/content">
**Themed date picker with banner:**
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/51078/content">
**Themed date picker (basic):** (single date):**
<img class="op-uc-image op-uc-image_inline" src="/attachments/51405/Datepicker_Basic_red.png"> src="/api/v3/attachments/51079/content">
Today, the date picker only partially adapts to the current theme. This was as specified initially for 12.2 (<mention class="mention" data-id="42047" data-type="work_package" data-text="#42047">#42047</mention>) and then updated for 12.3 (to include non-working days, <mention class="mention" data-id="41341" data-type="work_package" data-text="#41341">#41341</mention>).
The active field colour, links and action bar take the theme colours but the date selections in the mini calendar and the switches do not. Iinstead, they use shades of the OpenProject blue: _Main/Main_ for the primary blue, and _Main/Light_ for the lighter blue to indicate selection.
Here's an example of what a date picker in a red SouvAP theme looks like, with the OpenProject blue mixing with the theme red:
<img class="op-uc-image op-uc-image_inline" style="width:577px;" src="/api/v3/attachments/51075/content">
### Known issues
The current theming system (in _Administration → Design_) does not use the colour system we use in our Design system, notably because we are still working on a consistent way to handle themed colours.
**To allow the current date picker to adapt to existing themes, we have to find a way to derive certain colours (for example** _**Main/Main Light**_**).**
For reference, there was a work package to map these colours for 12.2, which we descoped in favour of using the standard blue in the date picker: ###42165
* Our current theming system allows the user to select a **primary colour** (here: #9E292B) that we use for the buttons; we can use this for the start/end dates.
* We need a lighter colour for selections but can't use any user-defined value defined (the user can set "alternative" and "dark" colours but we can use neither, since they can be any colour).
This work package aims to make the date picker adapt to the current theme before we define a proper theme-sensitive colour system for our Design system.
### **Acceptance criteria**
For the mini calendar:
* Use **Primary colour of the theme** for the selected start and finish dates (instead of Main/Main).
* **Derive a lighter shade** for the background of dates in the selected range between the start and end dates (instead of Main/Main Light).
* Open question: how? What value?
* Use this lighter shade as foreground colour for non-working days when the selection spans non-working days, over the current grey.
For the switches:
* Use **Primary colour of the theme** for the main switch colour (instead of Main/Main), and for the outlinen when ON.
* Use the derived lighter shade of the primary colour of the theme as the background of the switch when ON.
### Visuals
**Themed date picker with a selected range:**
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/51077/content">
**Themed date picker with banner:**
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/51078/content">
**Themed date picker (basic):**
<img class="op-uc-image op-uc-image_inline" src="/attachments/51405/Datepicker_Basic_red.png">