khanh.pndc/nextcloud-docs
1
0
Fork 0
mirror of https://github.com/nextcloud/documentation.git synced 2026-01-04 10:46:21 +07:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #13555 from nextcloud/fix/nc32-colors

Browse Source 
fix(developer): document new status colors for elements like icons
This commit is contained in:
Ferdinand Thiessen
2025-08-29 08:15:32 +02:00
committed by GitHub
parent c68ed57bb8 881c0c1067
commit 270892eab1
2 changed files with 17 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
developer_manual/app_publishing_maintenance/app_upgrade_guide/upgrade_to_32.rst
View File

@@ -24,12 +24,19 @@ To mitigate this following new CSS variables are introduced:
- ``--color-border-error`` to be used as border color for elements having an error state such as input elements with failing validity.
- ``--color-border-success`` to be used as border color for elements having a success state such as an input was saved or similar.
Please note that there are no text and border variants for ``warning`` and ``info`` as we design wise discourage them on text and elements.
Please note that there are no text and border variants for ``warning`` and ``info`` as we design wise discourage them on text and borders.
Additionally as sometimes elements need a status color with proper contrast we now provide following variables for status elements like icons:
- ``--color-element-error``
- ``--color-element-info``
- ``--color-element-success``
- ``--color-element-warning``
This existing variables have changed to a secondary style:
- ``--color-error`` to be used as the background color of error style elements (like error state button or note-card).
- ``--color-error-text`` to be used as the background color of such elements on hover.
- ``--color-error-hover`` to be used as the background color of such elements on hover.
- ``--color-error-text`` to be used as the foreground color of such elements.
- Same applies to ``--color-info``, ``--color-success``, ``--color-warning`` and their variants.

8
developer_manual/html_css_design/css.rst
View File

@@ -133,6 +133,14 @@ State colors variables
+----------------------------------------------+-----------------+-------------------------------------------------------------------------------------------+
| ``--color-text-success`` | ``#099f05`` | For text on **normal** background that should have an success state |
+----------------------------------------------+-----------------+-------------------------------------------------------------------------------------------+
| ``--color-element-error`` | ``#c90000`` | Color with proper contrast for elements which have an error state for example icons |
+----------------------------------------------+-----------------+-------------------------------------------------------------------------------------------+
| ``--color-element-info`` | ``#0077C7`` | Color with proper contrast for elements which have an info state for example icons |
+----------------------------------------------+-----------------+-------------------------------------------------------------------------------------------+
| ``--color-element-success`` | ``#099f05`` | Color with proper contrast for elements which have an success state for example icons |
+----------------------------------------------+-----------------+-------------------------------------------------------------------------------------------+
| ``--color-element-warning`` | ``#BF7900`` | Color with proper contrast for elements which have an warning state for example icons |
+----------------------------------------------+-----------------+-------------------------------------------------------------------------------------------+
| ``--color-border-error`` | ``#c90000`` | Border color for elements which have an error state like inputs with failing validity |
+----------------------------------------------+-----------------+-------------------------------------------------------------------------------------------+
| ``--color-border-success`` | ``#099f05`` | Border color for elements which have a success state like inputs which have been saved |