Skip to content

feat(developer): document new CSS variables for status colors #13520

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
skjnldsv merged 1 commit into from
Aug 19, 2025
Merged

feat(developer): document new CSS variables for status colors #13520

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 23 additions & 1 deletion developer_manual/app_publishing_maintenance/app_upgrade_guide/upgrade_to_32.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
^^^^^^^^^^

Expand All @@ -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
^^^^^^^^^^^^
Expand Down
40 changes: 24 additions & 16 deletions developer_manual/html_css_design/css.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down