Content
View differences
Updated by Marc Alcobé about 3 years ago
The current naming **As** a _\[enter role of the colours is not accurate enough to be used in the design system, therefore there is a need to rename the current colours in the "Design" admin page. This always will follow the SPOT colours specified in <mention class="mention" data-id="46832" data-type="work_package" data-text="#46832">#46832</mention>. user\]_
**I want to** _\[enter objective\]_
**so that** _\[enter desired result\]_
**Acceptance criteria**
Rename the current strings for advance settings colours in the "Design" admin page following:
<figure class="table op-uc-figure_align-center op-uc-figure"><table class="op-uc-table"><tbody><tr class="op-uc-table--row"><td class="op-uc-p op-uc-table--cell" style="background-color:hsl(0, 0%, 90%);"><strong>Current name</strong></td><td class="op-uc-p op-uc-table--cell" style="background-color:hsl(0, 0%, 90%);"><strong>New name</strong></td></tr><tr class="op-uc-table--row"><td class="op-uc-p op-uc-table--cell">Primary</td><td class="op-uc-p op-uc-table--cell">Main</td></tr><tr class="op-uc-table--row"><td class="op-uc-p op-uc-table--cell">Primary (dark)</td><td class="op-uc-p op-uc-table--cell">❌ Removed (will deviate from main)</td></tr><tr class="op-uc-table--row"><td class="op-uc-p op-uc-table--cell">Alternative</td><td class="op-uc-p op-uc-table--cell">Accent</td></tr><tr class="op-uc-table--row"><td class="op-uc-p op-uc-table--cell">Link font</td><td class="op-uc-p op-uc-table--cell">❌ Removed (will be main)</td></tr><tr class="op-uc-table--row"><td class="op-uc-p op-uc-table--cell">Header background</td><td class="op-uc-p op-uc-table--cell">Navigation bar background</td></tr><tr class="op-uc-table--row"><td class="op-uc-p op-uc-table--cell">Header background on hover</td><td class="op-uc-p op-uc-table--cell">Navigation bar hover</td></tr><tr class="op-uc-table--row"><td class="op-uc-p op-uc-table--cell">Header font</td><td class="op-uc-p op-uc-table--cell">Navigation bar text</td></tr><tr class="op-uc-table--row"><td class="op-uc-p op-uc-table--cell">Header font on hover</td><td class="op-uc-p op-uc-table--cell">Navigation bar text hover</td></tr><tr class="op-uc-table--row"><td class="op-uc-p op-uc-table--cell">Header border</td><td class="op-uc-p op-uc-table--cell">❌ Removed (will be generated if needed)</td></tr><tr class="op-uc-table--row"><td class="op-uc-p op-uc-table--cell">Main menu background</td><td class="op-uc-p op-uc-table--cell">Sidebar menu background</td></tr><tr class="op-uc-table--row"><td class="op-uc-p op-uc-table--cell">Main menu when selected</td><td class="op-uc-p op-uc-table--cell">Sidebar menu active and hover</td></tr><tr class="op-uc-table--row"><td class="op-uc-p op-uc-table--cell">Main menu on hover</td><td class="op-uc-p op-uc-table--cell">❌ Removed</td></tr><tr class="op-uc-table--row"><td class="op-uc-p op-uc-table--cell">Main menu font</td><td class="op-uc-p op-uc-table--cell">Sidebar menu text</td></tr><tr class="op-uc-table--row"><td class="op-uc-p op-uc-table--cell">Main menu font when selected</td><td class="op-uc-p op-uc-table--cell">Sidebar menu text active and hover</td></tr><tr class="op-uc-table--row"><td class="op-uc-p op-uc-table--cell">Main menu font on hover</td><td class="op-uc-p op-uc-table--cell">❌ Removed</td></tr><tr class="op-uc-table--row"><td class="op-uc-p op-uc-table--cell">Main menu border</td><td class="op-uc-p op-uc-table--cell">❌ Removed (will be generated if needed)</td></tr></tbody></table></figure>
For the specific removed colours this will be mapped with the following approach:
* **Primary (dark):** The deviation **Main/Major 3** from the main colour will be used. _\[enter acceptance criteria\]_
* **Link font:** The links will take **Main** as colour.
* **Header border:** The borders with **Grey 4: #CCCCCC** will be automatically created when using white navigation bar in light mode (in the future will also need to be added with black background and dark mode).
* **Main menu on hover:** The hover and active colour will be the same therefore one can be removed.
* **Main menu font on hover:** The hover and active colour will be the same therefore one can be removed.
* **Main menu border:** The borders with **Grey 4: #CCCCCC** will be automatically created when using white navigation bar in light mode (in the future will also need to be added with black background and dark mode). _..._
**I want to** _\[enter objective\]_
**so that** _\[enter desired result\]_
**Acceptance criteria**
Rename the current strings for advance settings colours in the "Design" admin page following:
<figure class="table op-uc-figure_align-center op-uc-figure"><table class="op-uc-table"><tbody><tr class="op-uc-table--row"><td class="op-uc-p op-uc-table--cell" style="background-color:hsl(0, 0%, 90%);"><strong>Current name</strong></td><td class="op-uc-p op-uc-table--cell" style="background-color:hsl(0, 0%, 90%);"><strong>New name</strong></td></tr><tr class="op-uc-table--row"><td class="op-uc-p op-uc-table--cell">Primary</td><td class="op-uc-p op-uc-table--cell">Main</td></tr><tr class="op-uc-table--row"><td class="op-uc-p op-uc-table--cell">Primary (dark)</td><td class="op-uc-p op-uc-table--cell">❌ Removed (will deviate from main)</td></tr><tr class="op-uc-table--row"><td class="op-uc-p op-uc-table--cell">Alternative</td><td class="op-uc-p op-uc-table--cell">Accent</td></tr><tr class="op-uc-table--row"><td class="op-uc-p op-uc-table--cell">Link font</td><td class="op-uc-p op-uc-table--cell">❌ Removed (will be main)</td></tr><tr class="op-uc-table--row"><td class="op-uc-p op-uc-table--cell">Header background</td><td class="op-uc-p op-uc-table--cell">Navigation bar background</td></tr><tr class="op-uc-table--row"><td class="op-uc-p op-uc-table--cell">Header background on hover</td><td class="op-uc-p op-uc-table--cell">Navigation bar hover</td></tr><tr class="op-uc-table--row"><td class="op-uc-p op-uc-table--cell">Header font</td><td class="op-uc-p op-uc-table--cell">Navigation bar text</td></tr><tr class="op-uc-table--row"><td class="op-uc-p op-uc-table--cell">Header font on hover</td><td class="op-uc-p op-uc-table--cell">Navigation bar text hover</td></tr><tr class="op-uc-table--row"><td class="op-uc-p op-uc-table--cell">Header border</td><td class="op-uc-p op-uc-table--cell">❌ Removed (will be generated if needed)</td></tr><tr class="op-uc-table--row"><td class="op-uc-p op-uc-table--cell">Main menu background</td><td class="op-uc-p op-uc-table--cell">Sidebar menu background</td></tr><tr class="op-uc-table--row"><td class="op-uc-p op-uc-table--cell">Main menu when selected</td><td class="op-uc-p op-uc-table--cell">Sidebar menu active and hover</td></tr><tr class="op-uc-table--row"><td class="op-uc-p op-uc-table--cell">Main menu on hover</td><td class="op-uc-p op-uc-table--cell">❌ Removed</td></tr><tr class="op-uc-table--row"><td class="op-uc-p op-uc-table--cell">Main menu font</td><td class="op-uc-p op-uc-table--cell">Sidebar menu text</td></tr><tr class="op-uc-table--row"><td class="op-uc-p op-uc-table--cell">Main menu font when selected</td><td class="op-uc-p op-uc-table--cell">Sidebar menu text active and hover</td></tr><tr class="op-uc-table--row"><td class="op-uc-p op-uc-table--cell">Main menu font on hover</td><td class="op-uc-p op-uc-table--cell">❌ Removed</td></tr><tr class="op-uc-table--row"><td class="op-uc-p op-uc-table--cell">Main menu border</td><td class="op-uc-p op-uc-table--cell">❌ Removed (will be generated if needed)</td></tr></tbody></table></figure>
For the specific removed colours this will be mapped with the following approach:
* **Primary (dark):** The deviation **Main/Major 3** from the main colour will be used.
* **Link font:** The links will take **Main** as colour.
* **Header border:** The borders with **Grey 4: #CCCCCC** will be automatically created when using white navigation bar in light mode (in the future will also need to be added with black background and dark mode).
* **Main menu on hover:** The hover and active colour will be the same therefore one can be removed.
* **Main menu font on hover:** The hover and active colour will be the same therefore one can be removed.
* **Main menu border:** The borders with **Grey 4: #CCCCCC** will be automatically created when using white navigation bar in light mode (in the future will also need to be added with black background and dark mode).