Content
View differences
Updated by Marc Alcobé about 3 years ago
## **Acceptance criteria**
* Create the default theme for OpenProject.
* Add the two deviations of Main and Accent customisable colours to the libraries and documentation: SPOT foundations library:
* **Main** **Main:** #1A67A3
* **Main dark** **Accent:** #308720
* **Main light**
* **Accent**
* **Accent dark**
* **Accent light** **Danger:** #D01100
* Add the fix colours to the libraries and documentation: SPOT foundations library:
* **Gray scale:**
* **Black:** #000000
* **Grey #1:** #333333
* **Grey #2:** #555555
* **Grey #3:** #878787
* **Grey #4:** #CCCCCC
* **Grey #5:** #E0E0E0
* **Grey #6:** #F3F3F3
* **White:** #FFFFFF
* **Indication:**
* **Flagged:** #1CB6C0
* **Current date:** #FFFFE1
* **Enterprise:** #EF9E56
* **Focus:** #00A3FF
* **Feedback:**
* **Error Dark:** #CA3F3F
* **Error Light:** #FEDADA
* **Warning Dark:** #EF9E56
* **Warning Light:** #FFE6C6
* **Success Dark:** #35C53F
* **Success Light:** #D8FDD1
* **Info Dark:** #8FC0DB
* **Info Light:** #E3F5FF
* Make sure the customisable colours are able to be modified trough theming.
* The deviation of the Main and Accent is customisable colours are done through the already implemented SaaS plugin. in <mention class="mention" data-id="46833" data-type="work_package" data-text="#46833">#46833</mention>.
* The SPOT components should already follow this colour palettes. A revision pair to pair developer-designer might rest of OpenProject themes will be needed to ensure this. modified in <mention class="mention" data-id="47056" data-type="work_package" data-text="#47056">#47056</mention>.
* The documentation of this colours in the SPOT design system will be added by the product team to Storybook.
## TBD
* There is still an open discussion about which should be Do we want to include the Enterprise colour complimentary colours in <mention class="mention" data-id="47104" data-type="work_package" data-text="#47104">#47104</mention>. the design system? This ones are used for type or status in the application.
## Visuals
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/53519/content">
## Figma
https://www.figma.com/file/QT2DjrZkEcHiKE2dKxgzGp/Scale-Theming?node-id=248-52508 https://www.figma.com/file/QT2DjrZkEcHiKE2dKxgzGp/Scale-Theming-2023?node-id=0%3A1
*
*
* **Main**
* **Main dark**
* **Main light**
* **Accent**
* **Accent dark**
* **Accent light**
* Add the fix colours to the libraries and documentation:
* **Gray scale:**
* **Black:** #000000
* **Grey #1:** #333333
* **Grey #2:** #555555
* **Grey #3:** #878787
* **Grey #4:** #CCCCCC
* **Grey #5:** #E0E0E0
* **Grey #6:** #F3F3F3
* **White:** #FFFFFF
* **Indication:**
* **Flagged:** #1CB6C0
* **Current date:** #FFFFE1
* **Enterprise:** #EF9E56
* **Focus:** #00A3FF
* **Feedback:**
* **Error Dark:** #CA3F3F
* **Error Light:** #FEDADA
* **Warning Dark:** #EF9E56
* **Warning Light:** #FFE6C6
* **Success Dark:** #35C53F
* **Success Light:** #D8FDD1
* **Info Dark:** #8FC0DB
* **Info Light:** #E3F5FF
*
*
* The SPOT components should already follow this colour palettes. A revision pair to pair developer-designer might
* The documentation of this colours in the SPOT design system will be added by the product team to Storybook.
## TBD
* There is still an open discussion about which should be
## Visuals
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/53519/content">
## Figma
https://www.figma.com/file/QT2DjrZkEcHiKE2dKxgzGp/Scale-Theming?node-id=248-52508