From 881c0c1067a41cc4822ca0258abf34576966c4a0 Mon Sep 17 00:00:00 2001 From: Ferdinand Thiessen Date: Tue, 26 Aug 2025 19:55:44 +0200 Subject: [PATCH] fix(developer): document new status colors for elements like icons Signed-off-by: Ferdinand Thiessen --- .../app_upgrade_guide/upgrade_to_32.rst | 11 +++++++++-- developer_manual/html_css_design/css.rst | 8 ++++++++ 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/developer_manual/app_publishing_maintenance/app_upgrade_guide/upgrade_to_32.rst b/developer_manual/app_publishing_maintenance/app_upgrade_guide/upgrade_to_32.rst index 437088f7de4..a74080035e2 100644 --- a/developer_manual/app_publishing_maintenance/app_upgrade_guide/upgrade_to_32.rst +++ b/developer_manual/app_publishing_maintenance/app_upgrade_guide/upgrade_to_32.rst @@ -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. diff --git a/developer_manual/html_css_design/css.rst b/developer_manual/html_css_design/css.rst index c46defee76b..d8d4814926c 100644 --- a/developer_manual/html_css_design/css.rst +++ b/developer_manual/html_css_design/css.rst @@ -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 |