Add more internal CSS variables.

src/components/ui/Button.tsx

@@ -30,7 +30,7 @@ export default styled.button<Props>`
     background: var(--primary-background);
     color: var(--foreground);
 
-    border-radius: 4px;
+    border-radius: var(--border-radius);
     cursor: pointer;
     border: none;
 

src/components/ui/Checkbox.tsx

@@ -4,12 +4,12 @@ import styled, { css } from "styled-components";
 import { Children } from "../../types/Preact";
 
 const CheckboxBase = styled.label`
-    margin-top: 20px;
     gap: 4px;
     z-index: 1;
     display: flex;
-    border-radius: 4px;
+    margin-top: 20px;
     align-items: center;
+    border-radius: var(--border-radius);
 
     cursor: pointer;
     font-size: 18px;
@@ -57,9 +57,9 @@ const Checkmark = styled.div<{ checked: boolean }>`
     height: 24px;
     display: grid;
     flex-shrink: 0;
-    border-radius: 4px;
     place-items: center;
     transition: 0.2s ease all;
+    border-radius: var(--border-radius);
     background: var(--secondary-background);
 
     svg {

src/components/ui/ColourSwatches.tsx

@@ -63,7 +63,7 @@ const SwatchesBase = styled.div`
 const Swatch = styled.div<{ type: "small" | "large"; colour: string }>`
     flex-shrink: 0;
     cursor: pointer;
-    border-radius: 4px;
+    border-radius: var(--border-radius);
     background-color: ${(props) => props.colour};
 
     display: grid;

src/components/ui/ComboBox.tsx

@@ -1,18 +1,20 @@
 import styled from "styled-components";
 
 export default styled.select`
+    width: 100%;
     padding: 10px;
-    border-radius: 6px;
+    cursor: pointer;
+    border-radius: var(--border-radius);
+    
     font-family: inherit;
+    font-size: var(--text-size);
     color: var(--secondary-foreground);
     background: var(--secondary-background);
-    font-size: var(--text-size);
+
     border: none;
     outline: 2px solid transparent;
-    transition: outline-color 0.2s ease-in-out;
     transition: box-shadow 0.2s ease-in-out;
-    cursor: pointer;
-    width: 100%;
+    transition: outline-color 0.2s ease-in-out;
 
     &:focus {
         box-shadow: 0 0 0 1.5pt var(--accent);

src/components/ui/InputBox.tsx

@@ -6,9 +6,9 @@ interface Props {
 
 export default styled.input<Props>`
     z-index: 1;
-    padding: 8px 16px;
-    border-radius: 6px;
     font-size: 1rem;
+    padding: 8px 16px;
+    border-radius: var(--border-radius);
 
     font-family: inherit;
     color: var(--foreground);

src/components/ui/Modal.tsx

@@ -60,8 +60,8 @@ const ModalBase = styled.div`
 
 const ModalContainer = styled.div`
     overflow: hidden;
-    border-radius: 8px;
     max-width: calc(100vw - 20px);
+    border-radius: var(--border-radius);
 
     animation-name: ${zoomIn};
     animation-duration: 0.25s;
@@ -71,8 +71,8 @@ const ModalContainer = styled.div`
 const ModalContent = styled.div<
     { [key in "attachment" | "noBackground" | "border" | "padding"]?: boolean }
 >`
-    border-radius: 8px;
     text-overflow: ellipsis;
+    border-radius: var(--border-radius);
 
     h3 {
         margin-top: 0;
@@ -98,13 +98,13 @@ const ModalContent = styled.div<
     ${(props) =>
         props.attachment &&
         css`
-            border-radius: 8px 8px 0 0;
+            border-radius: var(--border-radius) var(--border-radius) 0 0;
         `}
 
     ${(props) =>
         props.border &&
         css`
-            border-radius: 10px;
+            border-radius: var(--border-radius);
             border: 2px solid var(--secondary-background);
         `}
 `;

src/components/ui/Radio.tsx

@@ -27,8 +27,8 @@ const RadioBase = styled.label<BaseProps>`
     font-size: 1rem;
     font-weight: 600;
     user-select: none;
-    border-radius: 4px;
     transition: 0.2s ease all;
+    border-radius: var(--border-radius);
 
     &:hover {
         background: var(--hover);

src/components/ui/TextArea.tsx

@@ -30,7 +30,7 @@ export default styled.textarea<TextAreaProps>`
     ${(props) =>
         !props.hideBorder &&
         css`
-            border-radius: 4px;
+            border-radius: var(--border-radius);
             transition: border-color 0.2s ease-in-out;
             border: var(--input-border-width) solid transparent;
         `}

src/components/ui/Tip.tsx

@@ -22,8 +22,8 @@ export const TipBase = styled.div<Props>`
     align-items: center;
 
     font-size: 14px;
-    border-radius: 7px;
     background: var(--primary-header);
+    border-radius: var(--border-radius);
     border: 2px solid var(--secondary-header);
 
     a {