Content
View differences
Updated by Christophe Bliard about 4 years ago
**As** an OpenProject user with a custom theme
**I want to** have newer design-system-based components to adapt to my custom colours
**so that** new components blend visually with the custom colour space
### **Acceptance criteria**
The larger goal in a future release is to restructure how custom colours are defined so they better match our design system colour space/naming conventions. But this is a separate work stream that is out of the context of 12.2. For more context, see the "[Context](https://community.openproject.org/#context)" section below.
**In 12.2, the goal is simply to adapt existing custom colours and map them to our design system colour space, such that no additional action is required of users using custom themes.**
* Take these four values from a custom theme and map them to these existing DS colours:
* Primary → **Main/Main**
* Primary (dark) → **Main/Main Dark**
* Alternative → **Accent/Accent**
* Link font → **Link (legacy)**
* Automatically calculate these additional colours that are needed but missing from the custom colours:
* **Main/Main Light** = calculated from Primary
* **Accent/Accent Light** = calculated from Alternative
* **Accent/Accent Dark** = calculated from Alternative
This should allow the new components to correctly "take" the custom theme colours.
### Open
* (Devs) How should we calculate/derive the three missing colours based on existing values?
* We prefer having the "link" colour be derived from Primary; nevertheless, for now, it is defined separately, so we can either:
* Consider defining a serpate "link" colour in the design system colour space
* Leave the link colour as is (as a legacy value) until we can work on redesigning the theming system with new colour names in a later version.
### Context
Version 12.1 is the first one to integrate new components based on our new design system. Namely, the new components are:
* Drop-down modal
* Text field
* Toggle
* Checkboxes
* Checkbox list
* Buttons
* Action Bar
These components are used in:
* The newly-introduceed "Include projects" feature
* The create button on the sidebar in certain modules (Calendar, Team planner and Board)
* Team planner
In order create a consistent design grammar in OpenProject, the design system also defines "Foundations", which define things like text styles, shadows, spacing, iconography but most notably, colour palette. This new colour palette introduces a new, more consistent colour space with logical colour naming:
<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/31591/content"></div></figure>
* Basic (six shades of grey, between and including white and black)
* Main
* Main
* Light Light
* Dark
* Accent
* Accent Accent
* Light
* Dark
* Danger
* Danger
* Light
* Dark
* Indication
* Attention
* Flagged
* Current date
* Feedback
* Error
* Dark
* Light
* Warning
* Dark
* Light
* Info
* Dark
* Light
* Success
* Dark
* Light
For the 12.1 release, the new components only take the _default_ design system palette and do adapt to custom colours.
**I want to** have newer design-system-based components to adapt to my custom colours
**so that** new components blend visually with the custom colour space
### **Acceptance criteria**
The larger goal in a future release is to restructure how custom colours are defined so they better match our design system colour space/naming conventions. But this is a separate work stream that is out of the context of 12.2. For more context, see the "[Context](https://community.openproject.org/#context)" section below.
**In 12.2, the goal is simply to adapt existing custom colours and map them to our design system colour space, such that no additional action is required of users using custom themes.**
* Take these four values from a custom theme and map them to these existing DS colours:
* Primary → **Main/Main**
* Primary (dark) → **Main/Main Dark**
* Alternative → **Accent/Accent**
* Link font → **Link (legacy)**
* Automatically calculate these additional colours that are needed but missing from the custom colours:
* **Main/Main Light** = calculated from Primary
* **Accent/Accent Light** = calculated from Alternative
* **Accent/Accent Dark** = calculated from Alternative
This should allow the new components to correctly "take" the custom theme colours.
### Open
* (Devs) How should we calculate/derive the three missing colours based on existing values?
* We prefer having the "link" colour be derived from Primary; nevertheless, for now, it is defined separately, so we can either:
* Consider defining a serpate "link" colour in the design system colour space
* Leave the link colour as is (as a legacy value) until we can work on redesigning the theming system with new colour names in a later version.
### Context
Version 12.1 is the first one to integrate new components based on our new design system. Namely, the new components are:
* Drop-down modal
* Text field
* Toggle
* Checkboxes
* Checkbox list
* Buttons
* Action Bar
These components are used in:
* The newly-introduceed "Include projects" feature
* The create button on the sidebar in certain modules (Calendar, Team planner and Board)
* Team planner
In order create a consistent design grammar in OpenProject, the design system also defines "Foundations", which define things like text styles, shadows, spacing, iconography but most notably, colour palette. This new colour palette introduces a new, more consistent colour space with logical colour naming:
<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/31591/content"></div></figure>
* Basic (six shades of grey, between and including white and black)
* Main
* Main
* Light
* Dark
* Accent
* Accent
* Light
* Dark
* Danger
* Danger
* Light
* Dark
* Indication
* Attention
* Flagged
* Current date
* Feedback
* Error
* Dark
* Light
* Warning
* Dark
* Light
* Info
* Dark
* Light
* Success
* Dark
* Light
For the 12.1 release, the new components only take the _default_ design system palette and do adapt to custom colours.