Skip to content

fix(developer): document new status colors for elements like icons #13555

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
susnux merged 1 commit into from
Aug 29, 2025
Merged

fix(developer): document new status colors for elements like icons #13555

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
11 changes: 9 additions & 2 deletions 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 @@ -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.

Expand Down
8 changes: 8 additions & 0 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 @@ -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 |
Expand Down
Loading