Add more internal CSS variables.

src/components/common/AutoComplete.tsx

@@ -353,13 +353,13 @@ const Base = styled.div<{ detached?: boolean }>`
         display: flex;
         font-size: 1em;
         cursor: pointer;
-        border-radius: 6px;
         align-items: center;
         flex-direction: row;
+        font-family: inherit;
         background: transparent;
         color: var(--foreground);
         width: calc(100% - 12px);
-        font-family: inherit;
+        border-radius: var(--border-radius);
 
         span {
             display: grid;
@@ -377,7 +377,7 @@ const Base = styled.div<{ detached?: boolean }>`
             bottom: 8px;
 
             > div {
-                border-radius: 4px;
+                border-radius: var(--border-radius);
             }
         `}
 `;

src/components/common/messaging/MessageBase.tsx

@@ -37,8 +37,8 @@ export default styled.div<BaseMessageProps>`
         props.contrast &&
         css`
             padding: 0.3rem;
-            border-radius: 4px;
             background: var(--hover);
+            border-radius: var(--border-radius);
         `}
 
     ${(props) =>

src/components/common/messaging/attachments/Attachment.module.scss

@@ -1,7 +1,7 @@
 .attachment {
     display: grid;
-    grid-auto-columns: min(100%, 480px);
     grid-auto-flow: row dense;
+    grid-auto-columns: min(100%, var(--attachment-max-width));
     
     margin: .125rem 0 .125rem;
     width: max-content;
@@ -16,11 +16,10 @@
         gap: 4px;
         padding: 6px;
         display: flex;
-        border-radius: 6px;
-        flex-direction: column;
-        background: var(--secondary-background);
-        width: 400px;
         max-width: 100%;
+        flex-direction: column;
+        width: var(--attachment-default-width);
+        background: var(--secondary-background);
 
         > audio {
             width: 100%;
@@ -29,22 +28,20 @@
 
     &.file {
         > div {
-            width: 400px;
-            max-width: 100%;
             padding: 12px;
+            max-width: 100%;
             user-select: none;
             width: fit-content;
-            border-radius: 6px;
+            border-radius: var(--border-radius);
+            width: var(--attachment-default-width);
         }
     }
 
     &.text {
         width: 100%;
-        max-width: 800px;
         overflow: hidden;
         grid-auto-columns: unset;
-
-        border-radius: 6px;
+        max-width: var(--attachment-max-text-width);
 
         .textContent {
             height: 140px;
@@ -83,10 +80,10 @@
     width: fit-content;
 
     > :first-child {
-        width: min(480px, 100%, var(--width));
+        width: min(var(--attachment-max-width), 100%, var(--width));
     }
 }
 
 .container, .attachment, .image {
-    border-radius: 6px;
+    border-radius: var(--border-radius);
 }

src/components/common/messaging/attachments/Grid.tsx

@@ -3,8 +3,8 @@ import { Children } from "../../../../types/Preact";
 
 const Grid = styled.div`
     display: grid;
-    max-width: min(480px, 100%, var(--width));
-    max-height: min(640px, var(--height));
+    max-width: min(var(--attachment-max-width), 100%, var(--width));
+    max-height: min(var(--attachment-max-height), var(--height));
     aspect-ratio: var(--aspect-ratio);
 
     img, video {

src/components/common/messaging/bars/FilePreview.tsx

@@ -68,7 +68,7 @@ const Divider = styled.div`
     width: 4px;
     height: 130px;
     flex-shrink: 0;
-    border-radius: 4px;
+    border-radius: var(--border-radius);
     background: var(--tertiary-background);
 `;
 
@@ -78,8 +78,8 @@ const EmptyEntry = styled.div`
     display: grid;
     flex-shrink: 0;
     cursor: pointer;
-    border-radius: 4px;
     place-items: center;
+    border-radius: var(--border-radius);
     background: var(--primary-background);
     transition: 0.1s ease background-color;
 
@@ -93,12 +93,10 @@ const PreviewBox = styled.div`
     grid-template: "main" 100px / minmax(100px, 1fr);
     justify-items: center;
 
-    background: var(--primary-background);
-
-    overflow: hidden;
-
     cursor: pointer;
-    border-radius: 4px;
+    overflow: hidden;
+    border-radius: var(--border-radius);
+    background: var(--primary-background);
 
     .icon,
     .overlay {

src/components/common/messaging/bars/JumpToBottom.tsx

@@ -17,18 +17,18 @@ const Bar = styled.div`
         height: 28px;
         width: 100%;
         position: absolute;
-        border-radius: 4px 4px 0 0;
         display: flex;
         align-items: center;
         cursor: pointer;
         font-size: 13px;
         padding: 0 8px;
         user-select: none;
-        color: var(--secondary-foreground);
-        background: var(--secondary-background);
         justify-content: space-between;
+        color: var(--secondary-foreground);
         transition: color ease-in-out 0.08s;
-
+        background: var(--secondary-background);
+        border-radius: var(--border-radius) var(--border-radius) 0 0;
+        
         > div {
             display: flex;
             align-items: center;

src/components/common/messaging/embed/Embed.module.scss

@@ -3,7 +3,7 @@
 
     iframe {
         border: none;
-        border-radius: 4px;
+        border-radius: var(--border-radius);
     }
 
     &.image {
@@ -27,8 +27,8 @@
 
         padding: 12px;
         width: fit-content;
-        border-radius: 4px;
         background: var(--primary-header);
+        border-radius: var(--border-radius);
 
         .siteinfo {
             display: flex;
@@ -91,7 +91,7 @@
         img.image {
             cursor: pointer;
             object-fit: contain;
-            border-radius: 3px;
+            border-radius: var(--border-radius);
         }
     }
 }