Feat: update border radius variables

Signed-off-by: Marco Ambrosini <marcoambrosini@proton.me>
nextcloud · Aug 1, 2024 · 23c0844 · 23c0844
1 parent 29661b0
commit 23c0844
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 9 deletions.
diff --git 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
@@ -172,12 +172,18 @@ public function getCSSVariables(): array {
 			// 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',