Skip to content

Commit 4d15a99

Browse files
susnuxsusnux
authored
Merge pull request #12103 from nextcloud/update-border-radius-doc
Update border radius documentation with new variables
2 parents cd2c8ae + 9a87818 commit 4d15a99

File tree

2 files changed

+26
-9
lines changed

2 files changed

+26
-9
lines changed

‎developer_manual/app_publishing_maintenance/app_upgrade_guide/upgrade_to_30.rst

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,12 +37,12 @@ The size of the CSS variable ``--clickable-area`` variable has shrunk from ``44p
3737
This will result in several regressions and paper-cuts in your app that will need to be manually fixed.
3838
It's recommended to:
3939

40-
1) Link the @nextcloud/vue current master to your app (pull often cause fixes are getting in there too);
40+
1) Link the ``@nextcloud/vue`` current master to your app (pull often cause fixes are getting in there too);
4141
2) Do a codebase-wide search of `44px` and replace with the variable `--default-clickable-area` if appropriate;
4242
3) Check for regressions and visual bugs;
4343
4) Report the regression of your app in this issue (you can create a heading with the name of your own app);
44-
5) Also report @nextlcoud/vue library regressions if they're not reported already in their list;
45-
6) Fix regression in your app (only the ones that are unrelated to the @nextcloud/vue components);
44+
5) Also report ``@nextlcoud/vue`` library regressions if they're not reported already in their list;
45+
6) Fix regression in your app (only the ones that are unrelated to the ``@nextcloud/vue`` components);
4646

4747
Line height
4848
^^^^^^^^^^^
@@ -58,6 +58,25 @@ Nextcloud now provides meaningful default styles for heading elements.
5858
This can cause visual regressions if your code does not explicitly set font size and weight.
5959
If you need to use heading elements outside of text content, you might need to adjust their styles.
6060

61+
Border radius
62+
^^^^^^^^^^^^^
63+
64+
The border radius CSS variables have been refactored:
65+
66+
- Added
67+
68+
- ``--border-radius-small`` was added for smaller elements like chips.
69+
- ``--border-radius-container`` was added for smaller containers like action menus.
70+
- ``--border-radius-container-large`` was added for larger containers like body or modals.
71+
- ``--border-radius-element`` was added for interactive elements such as buttons, input, navigation and list items.
72+
73+
- Deprecated
74+
75+
- ``--border-radius`` is deprecated now in favor of ``--border-radius-small``.
76+
- ``--border-radius-large`` is deprecated now in favor of ``--border-radius-element``.
77+
- ``--border-radius-pill`` is deprecated now in favor of ``--border-radius-element``.
78+
- ``--border-radius-rounded`` is deprecated now in favor of ``--border-radius-container``.
79+
6180
Added APIs
6281
^^^^^^^^^^
6382

‎developer_manual/html_css_design/css.rst

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -190,15 +190,13 @@ Element structure variables
190190
+----------------------------------------------+------------------------------------------------+-----------------------------------------------------------------------------------------------------------+
191191
| ``--border-width-element-focused`` | ``2px`` | Border width for interactive elements when focussed (adjusted for accessibility) |
192192
+----------------------------------------------+------------------------------------------------+-----------------------------------------------------------------------------------------------------------+
193-
| ``--border-radius`` | ``3px`` | Default border radius |
193+
| ``--border-radius-small`` | ``4px`` | Border radius used for smaller elements |
194194
+----------------------------------------------+------------------------------------------------+-----------------------------------------------------------------------------------------------------------+
195-
| ``--border-radius-large`` | ``10px`` | Larger border radius |
196-
+----------------------------------------------+------------------------------------------------+-----------------------------------------------------------------------------------------------------------+
197-
| ``--border-radius-rounded`` | ``28px`` | Even larger border radius for elements which should be look rounded |
195+
| ``--border-radius-element`` | ``8px`` | Border radius of interactive elements such as buttons, input, navigation and list items. |
198196
+----------------------------------------------+------------------------------------------------+-----------------------------------------------------------------------------------------------------------+
199-
| ``--border-radius-pill`` | ``calc(var(--default-clickable-area) / 2)`` | Border radius for pill-style elements |
197+
| ``--border-radius-container`` | ``12px`` | For smaller containers like action menus. |
200198
+----------------------------------------------+------------------------------------------------+-----------------------------------------------------------------------------------------------------------+
201-
| ``--border-radius-element`` | ``8px`` | Border radius of interactive elements such as buttons, input, navigation and list items. |
199+
| ``--border-radius-container-large`` | ``16px`` | For larger containers like body or modals. |
202200
+----------------------------------------------+------------------------------------------------+-----------------------------------------------------------------------------------------------------------+
203201
| ``--default-clickable-area`` | ``34px`` | Default size (width and height) for interactive elements like buttons |
204202
+----------------------------------------------+------------------------------------------------+-----------------------------------------------------------------------------------------------------------+

0 commit comments

Comments
 (0)