Merge pull request #13431 from nextcloud/backport/13430/stable30

[stable30] fix(developer): use correct CSS variable name

Author: susnux

developer_manual/app_publishing_maintenance/app_upgrade_guide/upgrade_to_30.rst

@@ -36,7 +36,7 @@ as a part of this some CSS variables were added and other deprecated with Nextcl
 
 Clickable area
 ^^^^^^^^^^^^^^
-The size of the CSS variable ``--clickable-area`` variable has shrunk from ``44px`` to ``34px``.
+The size of the CSS variable ``--default-clickable-area`` variable has shrunk from ``44px`` to ``34px``.
 This will result in several regressions and paper-cuts in your app that will need to be manually fixed.
 It's recommended to:
 
@@ -47,6 +47,11 @@ It's recommended to:
 5) Also report ``@nextlcoud/vue`` library regressions if they're not reported already in their list;
 6) Fix regression in your app (only the ones that are unrelated to the ``@nextcloud/vue`` components);
 
+Moreover for different use cases also two new variables were added:
+
+- ``--clickable-area-large`` for main UI elements.
+- ``--clickable-area-small`` representing the smallest possible size of interactive elements, used by tertiary actions like filter chips.
+
 Line height
 ^^^^^^^^^^^
 The ``--default-line-height`` variable has changed from ``24px``` to ``1.5`` for the ``--default-font-size`` this

developer_manual/html_css_design/css.rst

@@ -182,7 +182,7 @@ Element structure variables
 +----------------------------------------------+------------------------------------------------+-----------------------------------------------------------------------------------------------------------+
 | ``--default-font-size``                      | ``15px``                                       | Font size for normal text                                                                                 |
 +----------------------------------------------+------------------------------------------------+-----------------------------------------------------------------------------------------------------------+
-| ``--default-line-height``                    | ``24px``                                       | Line height for normal text, for accessibility this should always be ``calc(1.5 * var(--font-size))``     |
+| ``--default-line-height``                    | ``1.5``                                        | Line height for normal text                                                                               |
 +----------------------------------------------+------------------------------------------------+-----------------------------------------------------------------------------------------------------------+
 | ``--default-grid-baseline``                  | ``4px``                                        | Foundation of all spacing sizes used on Nextcloud which are multiples of the baseline size                |
 +----------------------------------------------+------------------------------------------------+-----------------------------------------------------------------------------------------------------------+