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

Merge pull request #13520 from nextcloud/chore/32-colors

Browse Source 
feat(developer): document new CSS variables for status colors
This commit is contained in:
John Molakvoæ
2025-08-19 21:17:46 +02:00
committed by GitHub
parent 42a995cc17 f3122053b5
commit 53d269c6df
2 changed files with 47 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -12,6 +12,27 @@ General
Front-end changes
-----------------
Status colors are now based on secondary styling
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
The status colors like ``error``, ``success`` or ``warning`` are now based on the secondary style rather than the primary style.
This means they are now much lighter and thus cannot be used for usage such as text or border colors.
To mitigate this following new CSS variables are introduced:
- ``--color-text-error`` for text that needs error highlight on **normal** background colors.
- ``--color-text-success`` for text that needs success highlight on **normal** background colors.
- ``--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.
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-text`` to be used as the foreground color of such elements.
- Same applies to ``--color-info``, ``--color-success``, ``--color-warning`` and their variants.
Added APIs
^^^^^^^^^^
@@ -25,7 +46,8 @@ Changed APIs
Deprecated APIs
^^^^^^^^^^^^^^^
- TBD
- ``--color-error-rgb``, ``--color-info-rgb``, ``--color-success-rgb``, ``--color-warning-rgb`` are deprecated.
Instead use the native CSS color utils with the the existing variables like ``--color-error`` and similar.
Removed APIs
^^^^^^^^^^^^

40
developer_manual/html_css_design/css.rst
View File

@@ -129,39 +129,47 @@ State colors variables
+----------------------------------------------+-----------------+-------------------------------------------------------------------------------------------+
| Variable | Example | Usage |
+==============================================+=================+===========================================================================================+
| ``--color-text-error`` | ``#c90000`` | For text on **normal** background that should have an error state |
+----------------------------------------------+-----------------+-------------------------------------------------------------------------------------------+
| ``--color-text-success`` | ``#099f05`` | For text on **normal** background that should have an success state |
+----------------------------------------------+-----------------+-------------------------------------------------------------------------------------------+
| ``--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 |
+----------------------------------------------+-----------------+-------------------------------------------------------------------------------------------+
| ``--color-favorite`` | ``#a37200`` | Color to mark favorites, can be used to color e.g. a star icon for favorites |
+----------------------------------------------+-----------------+-------------------------------------------------------------------------------------------+
| ``--color-error`` | ``#db0606`` | Element color to show error state, this should not be used for text |
| ``--color-error`` | ``#FFE7E7`` | Color to show error state, this should not be used for text but for element backgrounds |
+----------------------------------------------+-----------------+-------------------------------------------------------------------------------------------+
| ``--color-error-rgb`` | ``219,6,6`` | RGB variant of ``--color-error`` |
| ``--color-error-hover`` | ``#ffc3c3`` | Background color for hover effects of ``--color-error`` |
+----------------------------------------------+-----------------+-------------------------------------------------------------------------------------------+
| ``--color-error-hover`` | ``#df2525`` | Element color for hover effects of ``--color-error`` |
| ``--color-error-text`` | ``#8A0000`` | Text color on elements using ``--color-error`` as background |
+----------------------------------------------+-----------------+-------------------------------------------------------------------------------------------+
| ``--color-error-text`` | ``#c20505`` | Text color to show error state |
| ``--color-warning`` | ``#FFEEC5`` | Color to show warning state, this should not be used for text but for element backgrounds |
+----------------------------------------------+-----------------+-------------------------------------------------------------------------------------------+
| ``--color-warning`` | ``#a37200`` | Element color to show warning state, this should not be used for text |
| ``--color-warning-hover`` | ``#ffe4a1`` | Background color for hover effects of ``--color-warning`` |
+----------------------------------------------+-----------------+-------------------------------------------------------------------------------------------+
| ``--color-warning-rgb`` | ``163,114,0`` | RGB variant of ``--color-warning`` |
| ``--color-warning-text`` | ``#664700`` | Text color on elements using ``--color-warning`` as background |
+----------------------------------------------+-----------------+-------------------------------------------------------------------------------------------+
| ``--color-warning-hover`` | ``#8a6000`` | Element color for hover effects of ``--color-warning`` |
| ``--color-success`` | ``#D8F3DA`` | Color to show success state, this should not be used for text but for element backgrounds |
+----------------------------------------------+-----------------+-------------------------------------------------------------------------------------------+
| ``--color-warning-text`` | ``#7f5900`` | Text color to show warning state |
| ``--color-success-hover`` | ``#bdebc0`` | Background color for hover effects of ``--color-success`` |
+----------------------------------------------+-----------------+-------------------------------------------------------------------------------------------+
| ``--color-success`` | ``#2d7b41`` | Element color to show success state, this should not be used for text |
| ``--color-success-text`` | ``#005416`` | Text color on elements using ``--color-success`` as background |
+----------------------------------------------+-----------------+-------------------------------------------------------------------------------------------+
| ``--color-success-rgb`` | ``45,123,65`` | RGB variant of ``--color-success`` |
| ``--color-info`` | ``#D5F1FA`` | Color to show info state, this should not be used for text but for element backgrounds |
+----------------------------------------------+-----------------+-------------------------------------------------------------------------------------------+
| ``--color-success-hover`` | ``#428854`` | Element color for hover effects of ``--color-success`` |
| ``--color-info-hover`` | ``#b5e6f6`` | Background color for hover effects of ``--color-info`` |
+----------------------------------------------+-----------------+-------------------------------------------------------------------------------------------+
| ``--color-success-text`` | ``#286c39`` | Text color to show success state |
| ``--color-info-text`` | ``#0066AC`` | Text color on elements using ``--color-info`` as background |
+----------------------------------------------+-----------------+-------------------------------------------------------------------------------------------+
| ``--color-info`` | ``#0071ad`` | Element color to show info state, this should not be used for text |
| ``--color-error-rgb`` | ``219,6,6`` | (⚠️ deprecated since 32.0.0) RGB variant of ``--color-error`` |
+----------------------------------------------+-----------------+-------------------------------------------------------------------------------------------+
| ``--color-info-rgb`` | ``0,113,173`` | RGB variant of ``--color-info`` |
| ``--color-info-rgb`` | ``0,113,173`` | (⚠️ deprecated since 32.0.0) RGB variant of ``--color-info`` |
+----------------------------------------------+-----------------+-------------------------------------------------------------------------------------------+
| ``--color-info-hover`` | ``#197fb5`` | Element color for hover effects of ``--color-info`` |
| ``--color-success-rgb`` | ``45,123,65`` | (⚠️ deprecated since 32.0.0) RGB variant of ``--color-success`` |
+----------------------------------------------+-----------------+-------------------------------------------------------------------------------------------+
| ``--color-info-text`` | ``#006499`` | Text color to show info state |
| ``--color-warning-rgb`` | ``163,114,0`` | (⚠️ deprecated since 32.0.0) RGB variant of ``--color-warning`` |
+----------------------------------------------+-----------------+-------------------------------------------------------------------------------------------+
Element structure variables