diff --git a/apps/theming/css/default.css b/apps/theming/css/default.css index 97d8a6e2eee..c47c25b7f46 100644 --- a/apps/theming/css/default.css +++ b/apps/theming/css/default.css @@ -57,12 +57,19 @@ /** Border width for input elements such as text fields and selects */ --border-width-input: 1px; --border-width-input-focused: 2px; - --border-radius: 3px; - --border-radius-large: 10px; + + /* Border radii (new values) */ + --border-radius-small: 4px; /* For smaller elements */ + --border-radius-element: 8px; /* For interactive elements such as buttons, input, navigation and list items */ + --border-radius-container: 12px; /* For smaller containers like action menus */ + --border-radius-container-large: 16px; /* For larger containers like body or modals */ + + /* Border radii (deprecated) */ + --border-radius: var(--border-radius-small); + --border-radius-large: var(--border-radius-element); --border-radius-rounded: 28px; - /* Border radius of interactive elements such as buttons, input, navigation and list items. Available since Nextcloud 30. */ - --border-radius-element: 8px; --border-radius-pill: 100px; + --default-clickable-area: 34px; --clickable-area-large: 48px; --clickable-area-small: 24px; diff --git a/apps/theming/lib/Themes/DefaultTheme.php b/apps/theming/lib/Themes/DefaultTheme.php index ca4df747421..3481dc9681c 100644 --- a/apps/theming/lib/Themes/DefaultTheme.php +++ b/apps/theming/lib/Themes/DefaultTheme.php @@ -172,12 +172,18 @@ class DefaultTheme implements ITheme { // Border width for input elements such as text fields and selects '--border-width-input' => '1px', '--border-width-input-focused' => '2px', - '--border-radius' => '3px', - '--border-radius-large' => '10px', + + // Border radii (new values) + '--border-radius-small' => '4px', // For smaller elements + '--border-radius-element' => '8px', // For interactive elements such as buttons, input, navigation and list items + '--border-radius-container' => '12px', // For smaller containers like action menus + '--border-radius-container-large' => '16px', // For bigger containers like body or modals + + // Border radii (deprecated) + '--border-radius' => 'var(--border-radius-small)', + '--border-radius-large' => 'var(--border-radius-element)', '--border-radius-rounded' => '28px', - '--border-radius-element' => '8px', - // pill-style button, value is large so big buttons also have correct roundness - '--border-radius-pill' => '100px', + '--border-radius-pill' => '100px', '--default-clickable-area' => '34px', '--clickable-area-large' => '48px',