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 02bfa49e073..fcc4bfb2a14 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 @@ -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 ^^^^^^^^^^^^ diff --git a/developer_manual/html_css_design/css.rst b/developer_manual/html_css_design/css.rst index 3966562511a..c46defee76b 100644 --- a/developer_manual/html_css_design/css.rst +++ b/developer_manual/html_css_design/css.rst @@ -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