Skip to content

Commit 53d269c

Browse files
skjnldsvskjnldsv
authored
Merge pull request #13520 from nextcloud/chore/32-colors
feat(developer): document new CSS variables for status colors
2 parents 42a995c + f312205 commit 53d269c

2 files changed

Lines changed: 47 additions & 17 deletions

File tree

‎developer_manual/app_publishing_maintenance/app_upgrade_guide/upgrade_to_32.rst‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,27 @@ General
1212
Front-end changes
1313
-----------------
1414

15+
Status colors are now based on secondary styling
16+
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
17+
18+
The status colors like ``error``, ``success`` or ``warning`` are now based on the secondary style rather than the primary style.
19+
This means they are now much lighter and thus cannot be used for usage such as text or border colors.
20+
To mitigate this following new CSS variables are introduced:
21+
22+
- ``--color-text-error`` for text that needs error highlight on **normal** background colors.
23+
- ``--color-text-success`` for text that needs success highlight on **normal** background colors.
24+
- ``--color-border-error`` to be used as border color for elements having an error state such as input elements with failing validity.
25+
- ``--color-border-success`` to be used as border color for elements having a success state such as an input was saved or similar.
26+
27+
Please note that there are no text and border variants for ``warning`` and ``info`` as we design wise discourage them on text and elements.
28+
29+
This existing variables have changed to a secondary style:
30+
31+
- ``--color-error`` to be used as the background color of error style elements (like error state button or note-card).
32+
- ``--color-error-text`` to be used as the background color of such elements on hover.
33+
- ``--color-error-text`` to be used as the foreground color of such elements.
34+
- Same applies to ``--color-info``, ``--color-success``, ``--color-warning`` and their variants.
35+
1536
Added APIs
1637
^^^^^^^^^^
1738

@@ -25,7 +46,8 @@ Changed APIs
2546
Deprecated APIs
2647
^^^^^^^^^^^^^^^
2748

28-
- TBD
49+
- ``--color-error-rgb``, ``--color-info-rgb``, ``--color-success-rgb``, ``--color-warning-rgb`` are deprecated.
50+
Instead use the native CSS color utils with the the existing variables like ``--color-error`` and similar.
2951

3052
Removed APIs
3153
^^^^^^^^^^^^

‎developer_manual/html_css_design/css.rst‎

Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -129,39 +129,47 @@ State colors variables
129129
+----------------------------------------------+-----------------+-------------------------------------------------------------------------------------------+
130130
| Variable | Example | Usage |
131131
+==============================================+=================+===========================================================================================+
132+
| ``--color-text-error`` | ``#c90000`` | For text on **normal** background that should have an error state |
133+
+----------------------------------------------+-----------------+-------------------------------------------------------------------------------------------+
134+
| ``--color-text-success`` | ``#099f05`` | For text on **normal** background that should have an success state |
135+
+----------------------------------------------+-----------------+-------------------------------------------------------------------------------------------+
136+
| ``--color-border-error`` | ``#c90000`` | Border color for elements which have an error state like inputs with failing validity |
137+
+----------------------------------------------+-----------------+-------------------------------------------------------------------------------------------+
138+
| ``--color-border-success`` | ``#099f05`` | Border color for elements which have a success state like inputs which have been saved |
139+
+----------------------------------------------+-----------------+-------------------------------------------------------------------------------------------+
132140
| ``--color-favorite`` | ``#a37200`` | Color to mark favorites, can be used to color e.g. a star icon for favorites |
133141
+----------------------------------------------+-----------------+-------------------------------------------------------------------------------------------+
134-
| ``--color-error`` | ``#db0606`` | Element color to show error state, this should not be used for text |
142+
| ``--color-error`` | ``#FFE7E7`` | Color to show error state, this should not be used for text but for element backgrounds |
135143
+----------------------------------------------+-----------------+-------------------------------------------------------------------------------------------+
136-
| ``--color-error-rgb`` | ``219,6,6`` | RGB variant of ``--color-error`` |
144+
| ``--color-error-hover`` | ``#ffc3c3`` | Background color for hover effects of ``--color-error`` |
137145
+----------------------------------------------+-----------------+-------------------------------------------------------------------------------------------+
138-
| ``--color-error-hover`` | ``#df2525`` | Element color for hover effects of ``--color-error`` |
146+
| ``--color-error-text`` | ``#8A0000`` | Text color on elements using ``--color-error`` as background |
139147
+----------------------------------------------+-----------------+-------------------------------------------------------------------------------------------+
140-
| ``--color-error-text`` | ``#c20505`` | Text color to show error state |
148+
| ``--color-warning`` | ``#FFEEC5`` | Color to show warning state, this should not be used for text but for element backgrounds |
141149
+----------------------------------------------+-----------------+-------------------------------------------------------------------------------------------+
142-
| ``--color-warning`` | ``#a37200`` | Element color to show warning state, this should not be used for text |
150+
| ``--color-warning-hover`` | ``#ffe4a1`` | Background color for hover effects of ``--color-warning`` |
143151
+----------------------------------------------+-----------------+-------------------------------------------------------------------------------------------+
144-
| ``--color-warning-rgb`` | ``163,114,0`` | RGB variant of ``--color-warning`` |
152+
| ``--color-warning-text`` | ``#664700`` | Text color on elements using ``--color-warning`` as background |
145153
+----------------------------------------------+-----------------+-------------------------------------------------------------------------------------------+
146-
| ``--color-warning-hover`` | ``#8a6000`` | Element color for hover effects of ``--color-warning`` |
154+
| ``--color-success`` | ``#D8F3DA`` | Color to show success state, this should not be used for text but for element backgrounds |
147155
+----------------------------------------------+-----------------+-------------------------------------------------------------------------------------------+
148-
| ``--color-warning-text`` | ``#7f5900`` | Text color to show warning state |
156+
| ``--color-success-hover`` | ``#bdebc0`` | Background color for hover effects of ``--color-success`` |
149157
+----------------------------------------------+-----------------+-------------------------------------------------------------------------------------------+
150-
| ``--color-success`` | ``#2d7b41`` | Element color to show success state, this should not be used for text |
158+
| ``--color-success-text`` | ``#005416`` | Text color on elements using ``--color-success`` as background |
151159
+----------------------------------------------+-----------------+-------------------------------------------------------------------------------------------+
152-
| ``--color-success-rgb`` | ``45,123,65`` | RGB variant of ``--color-success`` |
160+
| ``--color-info`` | ``#D5F1FA`` | Color to show info state, this should not be used for text but for element backgrounds |
153161
+----------------------------------------------+-----------------+-------------------------------------------------------------------------------------------+
154-
| ``--color-success-hover`` | ``#428854`` | Element color for hover effects of ``--color-success`` |
162+
| ``--color-info-hover`` | ``#b5e6f6`` | Background color for hover effects of ``--color-info`` |
155163
+----------------------------------------------+-----------------+-------------------------------------------------------------------------------------------+
156-
| ``--color-success-text`` | ``#286c39`` | Text color to show success state |
164+
| ``--color-info-text`` | ``#0066AC`` | Text color on elements using ``--color-info`` as background |
157165
+----------------------------------------------+-----------------+-------------------------------------------------------------------------------------------+
158-
| ``--color-info`` | ``#0071ad`` | Element color to show info state, this should not be used for text |
166+
| ``--color-error-rgb`` | ``219,6,6`` | (⚠️ deprecated since 32.0.0) RGB variant of ``--color-error`` |
159167
+----------------------------------------------+-----------------+-------------------------------------------------------------------------------------------+
160-
| ``--color-info-rgb`` | ``0,113,173`` | RGB variant of ``--color-info`` |
168+
| ``--color-info-rgb`` | ``0,113,173`` | (⚠️ deprecated since 32.0.0) RGB variant of ``--color-info`` |
161169
+----------------------------------------------+-----------------+-------------------------------------------------------------------------------------------+
162-
| ``--color-info-hover`` | ``#197fb5`` | Element color for hover effects of ``--color-info`` |
170+
| ``--color-success-rgb`` | ``45,123,65`` | (⚠️ deprecated since 32.0.0) RGB variant of ``--color-success`` |
163171
+----------------------------------------------+-----------------+-------------------------------------------------------------------------------------------+
164-
| ``--color-info-text`` | ``#006499`` | Text color to show info state |
172+
| ``--color-warning-rgb`` | ``163,114,0`` | (⚠️ deprecated since 32.0.0) RGB variant of ``--color-warning`` |
165173
+----------------------------------------------+-----------------+-------------------------------------------------------------------------------------------+
166174

167175
Element structure variables

0 commit comments

Comments
 (0)