Skip to content

Commit 9a87818

Browse files
marcoambrosinisusnux
authored andcommitted
chore: Update border radius documentation with new variables
Signed-off-by: Marco Ambrosini <[email protected]>
1 parent 49cabc4 commit 9a87818

File tree

1 file changed

+4
-6
lines changed
  • developer_manual/html_css_design

1 file changed

+4
-6
lines changed

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)