From dcdf9dbc78d239b1d59e62a88e2e8f5415021c41 Mon Sep 17 00:00:00 2001
From: David Oliver <david@doliver.co.uk>
Date: Mon, 27 Jan 2025 22:36:07 +0100
Subject: [PATCH 1/5] Use two border radii, inner and outer

---
 assets/css/autocomplete.css           | 4 ++--
 assets/css/content/admonition.css     | 2 +-
 assets/css/content/bottom-actions.css | 2 +-
 assets/css/content/cheatsheet.css     | 6 +++---
 assets/css/content/code.css           | 4 ++--
 assets/css/content/functions.css      | 3 ++-
 assets/css/content/general.css        | 2 +-
 assets/css/copy-button.css            | 2 +-
 assets/css/custom-props/common.css    | 5 +++--
 assets/css/keyboard-shortcuts.css     | 2 +-
 assets/css/modal.css                  | 2 +-
 assets/css/search-bar.css             | 4 ++--
 assets/css/settings.css               | 2 +-
 assets/css/tabset.css                 | 2 +-
 assets/css/toast.css                  | 2 +-
 assets/css/tooltips.css               | 2 +-
 16 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/assets/css/autocomplete.css b/assets/css/autocomplete.css
index d3ddd8321..9e88465e2 100644
--- a/assets/css/autocomplete.css
+++ b/assets/css/autocomplete.css
@@ -107,7 +107,7 @@
 
 .autocomplete-suggestions {
   background-color: var(--autocompleteBackground);
-  border-radius: var(--borderRadius);
+  border-radius: var(--borderRadiusOuter);
   box-shadow: 0px 15px 99px 0px var(--autocompleteBorder);
   overflow-y: auto;
   max-height: 450px;
@@ -167,7 +167,7 @@
   align-items: center;
   text-decoration: none;
   border: 1px solid var(--suggestionBorder);
-  border-radius: var(--borderRadius);
+  border-radius: var(--borderRadiusOuter);
   transition: var(--transition-colors);
   background-color: var(--autocompletePreview);
   cursor: pointer;
diff --git a/assets/css/content/admonition.css b/assets/css/content/admonition.css
index ea772ed87..80d5249dd 100644
--- a/assets/css/content/admonition.css
+++ b/assets/css/content/admonition.css
@@ -1,5 +1,5 @@
 .content-inner section.admonition {
-  border-radius: var(--borderRadius);
+  border-radius: var(--borderRadiusInner);
   border-left: 0;
 }
 
diff --git a/assets/css/content/bottom-actions.css b/assets/css/content/bottom-actions.css
index 50d5e3674..5f9050f48 100644
--- a/assets/css/content/bottom-actions.css
+++ b/assets/css/content/bottom-actions.css
@@ -13,7 +13,7 @@
   display: flex;
   text-decoration: none;
   flex-direction: column;
-  border-radius: var(--borderRadius);
+  border-radius: var(--borderRadiusOuter);
   border: 1px solid var(--bottomActionsBtnBorder);
   padding: 12px 16px;
   min-width: 150px;
diff --git a/assets/css/content/cheatsheet.css b/assets/css/content/cheatsheet.css
index 0839c3066..3a12c37c1 100644
--- a/assets/css/content/cheatsheet.css
+++ b/assets/css/content/cheatsheet.css
@@ -97,7 +97,7 @@
 
 .page-cheatmd .content-inner .h2 p > code {
   color: #eb5757;
-  border-radius: var(--borderRadius);
+  border-radius: var(--borderRadiusOuter);
   padding: 0.2em 0.4em;
 }
 
@@ -156,7 +156,7 @@
 
 .page-cheatmd .content-inner .h2 td code {
   color: #eb5757;
-  border-radius: var(--borderRadius);
+  border-radius: var(--borderRadiusOuter);
   padding: 0.2em 0.4em;
 }
 
@@ -195,7 +195,7 @@
 
 .page-cheatmd .content-inner .h2 li > code {
   color: #eb5757;
-  border-radius: var(--borderRadius);
+  border-radius: var(--borderRadiusOuter);
   padding: 0.2em 0.4em;
 }
 
diff --git a/assets/css/content/code.css b/assets/css/content/code.css
index b6908a16c..c2cb493f0 100644
--- a/assets/css/content/code.css
+++ b/assets/css/content/code.css
@@ -12,14 +12,14 @@
 .content-inner code {
   background-color: var(--codeBackground);
   vertical-align: baseline;
-  border-radius: var(--borderRadius);
+  border-radius: var(--borderRadiusInner);
   padding: .1em .2em;
   border: 1px solid var(--codeBorder);
   text-transform: none;
 }
 
 .content-inner code.inline {
-  border-radius: 4px;
+  border-radius: var(--borderRadiusInner);
   word-wrap: break-word;
 }
 
diff --git a/assets/css/content/functions.css b/assets/css/content/functions.css
index a9b3befc0..75584e063 100644
--- a/assets/css/content/functions.css
+++ b/assets/css/content/functions.css
@@ -20,6 +20,7 @@
   padding: 0.5em 0.85em 0.5em 1em;
   background-color: var(--textDetailBackground);
   border-left: 3px solid var(--textDetailAccent);
+  border-radius: var(--borderRadiusInner);
   font-size: 1em;
   font-family: var(--monoFontFamily);
   position: relative;
@@ -105,6 +106,6 @@
   display: block;
   padding: 1em;
   background-color: var(--fnDeprecated);
-  border-radius: var(--borderRadius);
+  border-radius: var(--borderRadiusOuter);
   margin: var(--baseLineHeight) 0;
 }
diff --git a/assets/css/content/general.css b/assets/css/content/general.css
index ea5c39180..d4b56789d 100644
--- a/assets/css/content/general.css
+++ b/assets/css/content/general.css
@@ -121,7 +121,7 @@
   padding: 0 1.2rem;
   overflow: auto;
   background-color: var(--blockquoteBackground);
-  border-radius: var(--borderRadius);
+  border-radius: var(--borderRadiusOuter);
 }
 .content-inner blockquote p:last-child, .content-inner section.admonition p:last-child  {
   padding-bottom: 1em;
diff --git a/assets/css/copy-button.css b/assets/css/copy-button.css
index 946862162..cc4598168 100644
--- a/assets/css/copy-button.css
+++ b/assets/css/copy-button.css
@@ -16,7 +16,7 @@ pre .copy-button:focus {
   padding: 8px;
   background-color: transparent;
   backdrop-filter: blur(8px);
-  border-radius: var(--borderRadius);
+  border-radius: var(--borderRadiusOuter);
   border: 1px solid var(--codeBorder);
   cursor: pointer;
   transition: var(--transition-all);
diff --git a/assets/css/custom-props/common.css b/assets/css/custom-props/common.css
index fb9dbb43c..319b3474a 100644
--- a/assets/css/custom-props/common.css
+++ b/assets/css/custom-props/common.css
@@ -2,7 +2,8 @@
   /* Layout & Whitespace */
   --content-width: 949px;
   --content-gutter: 60px;
-  --borderRadius: 8px;
+  --borderRadiusOuter: 12px;
+  --borderRadiusInner: 3px;
   --navTabBorderWidth: 2px;
 
   /* Font Families */
@@ -58,7 +59,7 @@
   --text-base: 1rem; /* 16px */
   --text-lg: 1.125rem; /* 18px */
   --text-xl: 1.25rem; /* 20px */
-  
+
   --transition-duration: 150ms;
   --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
 
diff --git a/assets/css/keyboard-shortcuts.css b/assets/css/keyboard-shortcuts.css
index 2d4f91628..ffbd511d5 100644
--- a/assets/css/keyboard-shortcuts.css
+++ b/assets/css/keyboard-shortcuts.css
@@ -22,7 +22,7 @@
 #keyboard-shortcuts-content kbd > kbd {
   background-color: var(--settingsInputBorder);
   color: var(--contrast);
-  border-radius: var(--borderRadius);
+  border-radius: var(--borderRadiusOuter);
   font-family: inherit;
   font-weight: bold;
   display: inline-block;
diff --git a/assets/css/modal.css b/assets/css/modal.css
index 2fba2ae2a..10a52028a 100644
--- a/assets/css/modal.css
+++ b/assets/css/modal.css
@@ -27,7 +27,7 @@
   margin: 75px auto 0 auto;
   max-width: 500px;
   background-color: var(--modalBackground);
-  border-radius: var(--borderRadius);
+  border-radius: var(--borderRadiusOuter);
   box-shadow: 2px 2px 8px rgba(0, 0, 0, .2);
   padding: 25px 35px 35px;
 }
diff --git a/assets/css/search-bar.css b/assets/css/search-bar.css
index d5e9f0e73..8b92fab51 100644
--- a/assets/css/search-bar.css
+++ b/assets/css/search-bar.css
@@ -17,7 +17,7 @@
 
 .search-bar {
   border: 1px solid var(--searchBarBorder);
-  border-radius: var(--borderRadius);
+  border-radius: var(--borderRadiusOuter);
   height: 48px;
   position: relative;
   width: 100%;
@@ -26,7 +26,7 @@
 .top-search .search-bar .search-input {
   background-color: var(--searchSearch);
   border: 1px solid transparent;
-  border-radius: var(--borderRadius);
+  border-radius: var(--borderRadiusOuter);
   color: var(--searchAccentMain);
   position: relative;
   height: 46px;
diff --git a/assets/css/settings.css b/assets/css/settings.css
index 49cda7f77..dd5e6d2e3 100644
--- a/assets/css/settings.css
+++ b/assets/css/settings.css
@@ -14,7 +14,7 @@
   background-color: var(--settingsInputBackground);
   color: var(--settingsInput);
   border: 1px solid var(--settingsInputBorder);
-  border-radius: var(--borderRadius);
+  border-radius: var(--borderRadiusOuter);
   transition: var(--transition-all);
 }
 #settings-modal-content .input:focus {
diff --git a/assets/css/tabset.css b/assets/css/tabset.css
index 2db66b7d3..53b2b9534 100644
--- a/assets/css/tabset.css
+++ b/assets/css/tabset.css
@@ -4,7 +4,7 @@
   margin: var(--baseLineHeight) 0;
   border: var(--borderWidth) solid var(--tabBorder);
   padding: 0 var(--tabsetPadding);
-  border-radius: var(--borderRadius);
+  border-radius: var(--borderRadiusOuter);
 }
 
 .tabset-tablist {
diff --git a/assets/css/toast.css b/assets/css/toast.css
index 3dde8d8c7..95a37ffa8 100644
--- a/assets/css/toast.css
+++ b/assets/css/toast.css
@@ -10,7 +10,7 @@
   padding: .7rem 1.2rem;
   text-align: center;
   font-weight: 700;
-  border-radius: var(--borderRadius);
+  border-radius: var(--borderRadiusOuter);
   border: 1px solid var(--codeBorder);
   background-color: var(--codeBackground);
   color: var(--textBody);
diff --git a/assets/css/tooltips.css b/assets/css/tooltips.css
index 9e44749b1..04b832049 100644
--- a/assets/css/tooltips.css
+++ b/assets/css/tooltips.css
@@ -29,7 +29,7 @@ as it has absolute positioning, so doesn't impact the layout and click events pa
 
 .tooltip .tooltip-body {
   border: 1px solid var(--codeBorder);
-  border-radius: var(--borderRadius);
+  border-radius: var(--borderRadiusOuter);
   overflow: auto;
 }
 

From 953153aa41394aab16eef8a7d68542b591f29814 Mon Sep 17 00:00:00 2001
From: David Oliver <david@doliver.co.uk>
Date: Tue, 28 Jan 2025 12:52:08 +0100
Subject: [PATCH 2/5] Introduce third border radius of 'middle'

---
 assets/css/content/admonition.css  | 2 +-
 assets/css/custom-props/common.css | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/assets/css/content/admonition.css b/assets/css/content/admonition.css
index 80d5249dd..71a8e1139 100644
--- a/assets/css/content/admonition.css
+++ b/assets/css/content/admonition.css
@@ -1,5 +1,5 @@
 .content-inner section.admonition {
-  border-radius: var(--borderRadiusInner);
+  border-radius: var(--borderRadiusMiddle);
   border-left: 0;
 }
 
diff --git a/assets/css/custom-props/common.css b/assets/css/custom-props/common.css
index 319b3474a..06913ccbc 100644
--- a/assets/css/custom-props/common.css
+++ b/assets/css/custom-props/common.css
@@ -2,7 +2,8 @@
   /* Layout & Whitespace */
   --content-width: 949px;
   --content-gutter: 60px;
-  --borderRadiusOuter: 12px;
+  --borderRadiusOuter: 14px;
+  --borderRadiusMiddle: 8px;
   --borderRadiusInner: 3px;
   --navTabBorderWidth: 2px;
 

From c596db42fb0a29a6a4469e1d34aa06538941f034 Mon Sep 17 00:00:00 2001
From: David Oliver <david@doliver.co.uk>
Date: Tue, 28 Jan 2025 13:03:07 +0100
Subject: [PATCH 3/5] Remove callback/function heading border radius

---
 assets/css/content/functions.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/assets/css/content/functions.css b/assets/css/content/functions.css
index 75584e063..4a082de30 100644
--- a/assets/css/content/functions.css
+++ b/assets/css/content/functions.css
@@ -20,7 +20,6 @@
   padding: 0.5em 0.85em 0.5em 1em;
   background-color: var(--textDetailBackground);
   border-left: 3px solid var(--textDetailAccent);
-  border-radius: var(--borderRadiusInner);
   font-size: 1em;
   font-family: var(--monoFontFamily);
   position: relative;

From ef06583073907d1fb6c9a003ac542378855e4e04 Mon Sep 17 00:00:00 2001
From: David Oliver <david@doliver.co.uk>
Date: Tue, 28 Jan 2025 16:39:16 +0100
Subject: [PATCH 4/5] Re-set rest of rounded elements' border-radius values

---
 assets/css/autocomplete.css           | 4 ++--
 assets/css/content/bottom-actions.css | 2 +-
 assets/css/content/cheatsheet.css     | 6 +++---
 assets/css/content/functions.css      | 2 +-
 assets/css/content/general.css        | 2 +-
 assets/css/copy-button.css            | 2 +-
 assets/css/keyboard-shortcuts.css     | 2 +-
 assets/css/modal.css                  | 2 +-
 assets/css/search-bar.css             | 6 +++---
 assets/css/settings.css               | 2 +-
 assets/css/toast.css                  | 2 +-
 assets/css/tooltips.css               | 2 +-
 12 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/assets/css/autocomplete.css b/assets/css/autocomplete.css
index 9e88465e2..8ca059a0c 100644
--- a/assets/css/autocomplete.css
+++ b/assets/css/autocomplete.css
@@ -107,7 +107,7 @@
 
 .autocomplete-suggestions {
   background-color: var(--autocompleteBackground);
-  border-radius: var(--borderRadiusOuter);
+  border-radius: var(--borderRadiusMiddle);
   box-shadow: 0px 15px 99px 0px var(--autocompleteBorder);
   overflow-y: auto;
   max-height: 450px;
@@ -167,7 +167,7 @@
   align-items: center;
   text-decoration: none;
   border: 1px solid var(--suggestionBorder);
-  border-radius: var(--borderRadiusOuter);
+  border-radius: var(--borderRadiusMiddle);
   transition: var(--transition-colors);
   background-color: var(--autocompletePreview);
   cursor: pointer;
diff --git a/assets/css/content/bottom-actions.css b/assets/css/content/bottom-actions.css
index 5f9050f48..78c6cd236 100644
--- a/assets/css/content/bottom-actions.css
+++ b/assets/css/content/bottom-actions.css
@@ -13,7 +13,7 @@
   display: flex;
   text-decoration: none;
   flex-direction: column;
-  border-radius: var(--borderRadiusOuter);
+  border-radius: var(--borderRadiusInner);
   border: 1px solid var(--bottomActionsBtnBorder);
   padding: 12px 16px;
   min-width: 150px;
diff --git a/assets/css/content/cheatsheet.css b/assets/css/content/cheatsheet.css
index 3a12c37c1..aff15fb3f 100644
--- a/assets/css/content/cheatsheet.css
+++ b/assets/css/content/cheatsheet.css
@@ -97,7 +97,7 @@
 
 .page-cheatmd .content-inner .h2 p > code {
   color: #eb5757;
-  border-radius: var(--borderRadiusOuter);
+  border-radius: var(--borderRadiusInner);
   padding: 0.2em 0.4em;
 }
 
@@ -156,7 +156,7 @@
 
 .page-cheatmd .content-inner .h2 td code {
   color: #eb5757;
-  border-radius: var(--borderRadiusOuter);
+  border-radius: var(--borderRadiusInner);
   padding: 0.2em 0.4em;
 }
 
@@ -195,7 +195,7 @@
 
 .page-cheatmd .content-inner .h2 li > code {
   color: #eb5757;
-  border-radius: var(--borderRadiusOuter);
+  border-radius: var(--borderRadiusInner);
   padding: 0.2em 0.4em;
 }
 
diff --git a/assets/css/content/functions.css b/assets/css/content/functions.css
index 4a082de30..c04ecf9af 100644
--- a/assets/css/content/functions.css
+++ b/assets/css/content/functions.css
@@ -105,6 +105,6 @@
   display: block;
   padding: 1em;
   background-color: var(--fnDeprecated);
-  border-radius: var(--borderRadiusOuter);
+  border-radius: var(--borderRadiusInner);
   margin: var(--baseLineHeight) 0;
 }
diff --git a/assets/css/content/general.css b/assets/css/content/general.css
index d4b56789d..d493d9cae 100644
--- a/assets/css/content/general.css
+++ b/assets/css/content/general.css
@@ -121,7 +121,7 @@
   padding: 0 1.2rem;
   overflow: auto;
   background-color: var(--blockquoteBackground);
-  border-radius: var(--borderRadiusOuter);
+  border-radius: var(--borderRadiusMiddle);
 }
 .content-inner blockquote p:last-child, .content-inner section.admonition p:last-child  {
   padding-bottom: 1em;
diff --git a/assets/css/copy-button.css b/assets/css/copy-button.css
index cc4598168..d8eaea8bc 100644
--- a/assets/css/copy-button.css
+++ b/assets/css/copy-button.css
@@ -16,7 +16,7 @@ pre .copy-button:focus {
   padding: 8px;
   background-color: transparent;
   backdrop-filter: blur(8px);
-  border-radius: var(--borderRadiusOuter);
+  border-radius: var(--borderRadiusInner);
   border: 1px solid var(--codeBorder);
   cursor: pointer;
   transition: var(--transition-all);
diff --git a/assets/css/keyboard-shortcuts.css b/assets/css/keyboard-shortcuts.css
index ffbd511d5..2b8f00fc8 100644
--- a/assets/css/keyboard-shortcuts.css
+++ b/assets/css/keyboard-shortcuts.css
@@ -22,7 +22,7 @@
 #keyboard-shortcuts-content kbd > kbd {
   background-color: var(--settingsInputBorder);
   color: var(--contrast);
-  border-radius: var(--borderRadiusOuter);
+  border-radius: var(--borderRadiusInner);
   font-family: inherit;
   font-weight: bold;
   display: inline-block;
diff --git a/assets/css/modal.css b/assets/css/modal.css
index 10a52028a..a5c65fae3 100644
--- a/assets/css/modal.css
+++ b/assets/css/modal.css
@@ -27,7 +27,7 @@
   margin: 75px auto 0 auto;
   max-width: 500px;
   background-color: var(--modalBackground);
-  border-radius: var(--borderRadiusOuter);
+  border-radius: var(--borderRadiusInner);
   box-shadow: 2px 2px 8px rgba(0, 0, 0, .2);
   padding: 25px 35px 35px;
 }
diff --git a/assets/css/search-bar.css b/assets/css/search-bar.css
index 8b92fab51..77583c010 100644
--- a/assets/css/search-bar.css
+++ b/assets/css/search-bar.css
@@ -17,7 +17,7 @@
 
 .search-bar {
   border: 1px solid var(--searchBarBorder);
-  border-radius: var(--borderRadiusOuter);
+  border-radius: var(--borderRadiusMiddle);
   height: 48px;
   position: relative;
   width: 100%;
@@ -26,7 +26,7 @@
 .top-search .search-bar .search-input {
   background-color: var(--searchSearch);
   border: 1px solid transparent;
-  border-radius: var(--borderRadiusOuter);
+  border-radius: var(--borderRadiusMiddle);
   color: var(--searchAccentMain);
   position: relative;
   height: 46px;
@@ -42,7 +42,7 @@
 
 .top-search .search-bar .search-input:focus {
   border: 1px solid var(--searchBarFocusColor);
-  border-radius: 7px;
+  border-radius: calc(var(--borderRadiusMiddle) - 1px);
   position: relative;
   box-shadow: 0px 4px 20px 0px var(--searchBarBorderColor) inset;
 }
diff --git a/assets/css/settings.css b/assets/css/settings.css
index dd5e6d2e3..b90ad6dc4 100644
--- a/assets/css/settings.css
+++ b/assets/css/settings.css
@@ -14,7 +14,7 @@
   background-color: var(--settingsInputBackground);
   color: var(--settingsInput);
   border: 1px solid var(--settingsInputBorder);
-  border-radius: var(--borderRadiusOuter);
+  border-radius: var(--borderRadiusMiddle);
   transition: var(--transition-all);
 }
 #settings-modal-content .input:focus {
diff --git a/assets/css/toast.css b/assets/css/toast.css
index 95a37ffa8..982a3a9a1 100644
--- a/assets/css/toast.css
+++ b/assets/css/toast.css
@@ -10,7 +10,7 @@
   padding: .7rem 1.2rem;
   text-align: center;
   font-weight: 700;
-  border-radius: var(--borderRadiusOuter);
+  border-radius: var(--borderRadiusMiddle);
   border: 1px solid var(--codeBorder);
   background-color: var(--codeBackground);
   color: var(--textBody);
diff --git a/assets/css/tooltips.css b/assets/css/tooltips.css
index 04b832049..4f53b7ad0 100644
--- a/assets/css/tooltips.css
+++ b/assets/css/tooltips.css
@@ -29,7 +29,7 @@ as it has absolute positioning, so doesn't impact the layout and click events pa
 
 .tooltip .tooltip-body {
   border: 1px solid var(--codeBorder);
-  border-radius: var(--borderRadiusOuter);
+  border-radius: var(--borderRadiusInner);
   overflow: auto;
 }
 

From 27b2269c1fd1f58272d05f14764496755a213722 Mon Sep 17 00:00:00 2001
From: David Oliver <david@doliver.co.uk>
Date: Tue, 28 Jan 2025 17:14:13 +0100
Subject: [PATCH 5/5] Use size-based custom prop names

---
 assets/css/autocomplete.css           | 4 ++--
 assets/css/content/admonition.css     | 2 +-
 assets/css/content/bottom-actions.css | 2 +-
 assets/css/content/cheatsheet.css     | 6 +++---
 assets/css/content/code.css           | 4 ++--
 assets/css/content/functions.css      | 2 +-
 assets/css/content/general.css        | 2 +-
 assets/css/copy-button.css            | 2 +-
 assets/css/custom-props/common.css    | 6 +++---
 assets/css/keyboard-shortcuts.css     | 2 +-
 assets/css/modal.css                  | 2 +-
 assets/css/search-bar.css             | 6 +++---
 assets/css/settings.css               | 2 +-
 assets/css/tabset.css                 | 2 +-
 assets/css/toast.css                  | 2 +-
 assets/css/tooltips.css               | 2 +-
 16 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/assets/css/autocomplete.css b/assets/css/autocomplete.css
index 8ca059a0c..3997efb96 100644
--- a/assets/css/autocomplete.css
+++ b/assets/css/autocomplete.css
@@ -107,7 +107,7 @@
 
 .autocomplete-suggestions {
   background-color: var(--autocompleteBackground);
-  border-radius: var(--borderRadiusMiddle);
+  border-radius: var(--borderRadius-base);
   box-shadow: 0px 15px 99px 0px var(--autocompleteBorder);
   overflow-y: auto;
   max-height: 450px;
@@ -167,7 +167,7 @@
   align-items: center;
   text-decoration: none;
   border: 1px solid var(--suggestionBorder);
-  border-radius: var(--borderRadiusMiddle);
+  border-radius: var(--borderRadius-base);
   transition: var(--transition-colors);
   background-color: var(--autocompletePreview);
   cursor: pointer;
diff --git a/assets/css/content/admonition.css b/assets/css/content/admonition.css
index 71a8e1139..e3d01c12c 100644
--- a/assets/css/content/admonition.css
+++ b/assets/css/content/admonition.css
@@ -1,5 +1,5 @@
 .content-inner section.admonition {
-  border-radius: var(--borderRadiusMiddle);
+  border-radius: var(--borderRadius-base);
   border-left: 0;
 }
 
diff --git a/assets/css/content/bottom-actions.css b/assets/css/content/bottom-actions.css
index 78c6cd236..bb55633a4 100644
--- a/assets/css/content/bottom-actions.css
+++ b/assets/css/content/bottom-actions.css
@@ -13,7 +13,7 @@
   display: flex;
   text-decoration: none;
   flex-direction: column;
-  border-radius: var(--borderRadiusInner);
+  border-radius: var(--borderRadius-sm);
   border: 1px solid var(--bottomActionsBtnBorder);
   padding: 12px 16px;
   min-width: 150px;
diff --git a/assets/css/content/cheatsheet.css b/assets/css/content/cheatsheet.css
index aff15fb3f..e27d94d8d 100644
--- a/assets/css/content/cheatsheet.css
+++ b/assets/css/content/cheatsheet.css
@@ -97,7 +97,7 @@
 
 .page-cheatmd .content-inner .h2 p > code {
   color: #eb5757;
-  border-radius: var(--borderRadiusInner);
+  border-radius: var(--borderRadius-sm);
   padding: 0.2em 0.4em;
 }
 
@@ -156,7 +156,7 @@
 
 .page-cheatmd .content-inner .h2 td code {
   color: #eb5757;
-  border-radius: var(--borderRadiusInner);
+  border-radius: var(--borderRadius-sm);
   padding: 0.2em 0.4em;
 }
 
@@ -195,7 +195,7 @@
 
 .page-cheatmd .content-inner .h2 li > code {
   color: #eb5757;
-  border-radius: var(--borderRadiusInner);
+  border-radius: var(--borderRadius-sm);
   padding: 0.2em 0.4em;
 }
 
diff --git a/assets/css/content/code.css b/assets/css/content/code.css
index c2cb493f0..d5bf158d7 100644
--- a/assets/css/content/code.css
+++ b/assets/css/content/code.css
@@ -12,14 +12,14 @@
 .content-inner code {
   background-color: var(--codeBackground);
   vertical-align: baseline;
-  border-radius: var(--borderRadiusInner);
+  border-radius: var(--borderRadius-sm);
   padding: .1em .2em;
   border: 1px solid var(--codeBorder);
   text-transform: none;
 }
 
 .content-inner code.inline {
-  border-radius: var(--borderRadiusInner);
+  border-radius: var(--borderRadius-sm);
   word-wrap: break-word;
 }
 
diff --git a/assets/css/content/functions.css b/assets/css/content/functions.css
index c04ecf9af..0a5f2d4a1 100644
--- a/assets/css/content/functions.css
+++ b/assets/css/content/functions.css
@@ -105,6 +105,6 @@
   display: block;
   padding: 1em;
   background-color: var(--fnDeprecated);
-  border-radius: var(--borderRadiusInner);
+  border-radius: var(--borderRadius-sm);
   margin: var(--baseLineHeight) 0;
 }
diff --git a/assets/css/content/general.css b/assets/css/content/general.css
index d493d9cae..7e638977f 100644
--- a/assets/css/content/general.css
+++ b/assets/css/content/general.css
@@ -121,7 +121,7 @@
   padding: 0 1.2rem;
   overflow: auto;
   background-color: var(--blockquoteBackground);
-  border-radius: var(--borderRadiusMiddle);
+  border-radius: var(--borderRadius-base);
 }
 .content-inner blockquote p:last-child, .content-inner section.admonition p:last-child  {
   padding-bottom: 1em;
diff --git a/assets/css/copy-button.css b/assets/css/copy-button.css
index d8eaea8bc..776dedf62 100644
--- a/assets/css/copy-button.css
+++ b/assets/css/copy-button.css
@@ -16,7 +16,7 @@ pre .copy-button:focus {
   padding: 8px;
   background-color: transparent;
   backdrop-filter: blur(8px);
-  border-radius: var(--borderRadiusInner);
+  border-radius: var(--borderRadius-sm);
   border: 1px solid var(--codeBorder);
   cursor: pointer;
   transition: var(--transition-all);
diff --git a/assets/css/custom-props/common.css b/assets/css/custom-props/common.css
index 06913ccbc..72e23cbf6 100644
--- a/assets/css/custom-props/common.css
+++ b/assets/css/custom-props/common.css
@@ -2,9 +2,9 @@
   /* Layout & Whitespace */
   --content-width: 949px;
   --content-gutter: 60px;
-  --borderRadiusOuter: 14px;
-  --borderRadiusMiddle: 8px;
-  --borderRadiusInner: 3px;
+  --borderRadius-lg: 14px;
+  --borderRadius-base: 8px;
+  --borderRadius-sm: 3px;
   --navTabBorderWidth: 2px;
 
   /* Font Families */
diff --git a/assets/css/keyboard-shortcuts.css b/assets/css/keyboard-shortcuts.css
index 2b8f00fc8..59263abc9 100644
--- a/assets/css/keyboard-shortcuts.css
+++ b/assets/css/keyboard-shortcuts.css
@@ -22,7 +22,7 @@
 #keyboard-shortcuts-content kbd > kbd {
   background-color: var(--settingsInputBorder);
   color: var(--contrast);
-  border-radius: var(--borderRadiusInner);
+  border-radius: var(--borderRadius-sm);
   font-family: inherit;
   font-weight: bold;
   display: inline-block;
diff --git a/assets/css/modal.css b/assets/css/modal.css
index a5c65fae3..da27b970b 100644
--- a/assets/css/modal.css
+++ b/assets/css/modal.css
@@ -27,7 +27,7 @@
   margin: 75px auto 0 auto;
   max-width: 500px;
   background-color: var(--modalBackground);
-  border-radius: var(--borderRadiusInner);
+  border-radius: var(--borderRadius-sm);
   box-shadow: 2px 2px 8px rgba(0, 0, 0, .2);
   padding: 25px 35px 35px;
 }
diff --git a/assets/css/search-bar.css b/assets/css/search-bar.css
index 77583c010..354a65a72 100644
--- a/assets/css/search-bar.css
+++ b/assets/css/search-bar.css
@@ -17,7 +17,7 @@
 
 .search-bar {
   border: 1px solid var(--searchBarBorder);
-  border-radius: var(--borderRadiusMiddle);
+  border-radius: var(--borderRadius-base);
   height: 48px;
   position: relative;
   width: 100%;
@@ -26,7 +26,7 @@
 .top-search .search-bar .search-input {
   background-color: var(--searchSearch);
   border: 1px solid transparent;
-  border-radius: var(--borderRadiusMiddle);
+  border-radius: var(--borderRadius-base);
   color: var(--searchAccentMain);
   position: relative;
   height: 46px;
@@ -42,7 +42,7 @@
 
 .top-search .search-bar .search-input:focus {
   border: 1px solid var(--searchBarFocusColor);
-  border-radius: calc(var(--borderRadiusMiddle) - 1px);
+  border-radius: calc(var(--borderRadius-base) - 1px);
   position: relative;
   box-shadow: 0px 4px 20px 0px var(--searchBarBorderColor) inset;
 }
diff --git a/assets/css/settings.css b/assets/css/settings.css
index b90ad6dc4..b7aa2f852 100644
--- a/assets/css/settings.css
+++ b/assets/css/settings.css
@@ -14,7 +14,7 @@
   background-color: var(--settingsInputBackground);
   color: var(--settingsInput);
   border: 1px solid var(--settingsInputBorder);
-  border-radius: var(--borderRadiusMiddle);
+  border-radius: var(--borderRadius-base);
   transition: var(--transition-all);
 }
 #settings-modal-content .input:focus {
diff --git a/assets/css/tabset.css b/assets/css/tabset.css
index 53b2b9534..2fbce9bb5 100644
--- a/assets/css/tabset.css
+++ b/assets/css/tabset.css
@@ -4,7 +4,7 @@
   margin: var(--baseLineHeight) 0;
   border: var(--borderWidth) solid var(--tabBorder);
   padding: 0 var(--tabsetPadding);
-  border-radius: var(--borderRadiusOuter);
+  border-radius: var(--borderRadius-lg);
 }
 
 .tabset-tablist {
diff --git a/assets/css/toast.css b/assets/css/toast.css
index 982a3a9a1..744b84a30 100644
--- a/assets/css/toast.css
+++ b/assets/css/toast.css
@@ -10,7 +10,7 @@
   padding: .7rem 1.2rem;
   text-align: center;
   font-weight: 700;
-  border-radius: var(--borderRadiusMiddle);
+  border-radius: var(--borderRadius-base);
   border: 1px solid var(--codeBorder);
   background-color: var(--codeBackground);
   color: var(--textBody);
diff --git a/assets/css/tooltips.css b/assets/css/tooltips.css
index 4f53b7ad0..746e5c7d6 100644
--- a/assets/css/tooltips.css
+++ b/assets/css/tooltips.css
@@ -29,7 +29,7 @@ as it has absolute positioning, so doesn't impact the layout and click events pa
 
 .tooltip .tooltip-body {
   border: 1px solid var(--codeBorder);
-  border-radius: var(--borderRadiusInner);
+  border-radius: var(--borderRadius-sm);
   overflow: auto;
 }