Merge pull request #162 from LambdAurora/contextual_border_radius_variables

Introduce new border radius variables for stable theming.

src/components/common/ChannelIcon.tsx

@@ -51,6 +51,12 @@ export default observer(
             }
         }
 
+        // The border radius of the channel icon, if it's a server-channel it should be square (undefined).
+        let borderRadius;
+        if (!isServerChannel) {
+            borderRadius = "--border-radius-half";
+        }
+
         return (
             // ! TODO: replace fallback with <picture /> + <source />
             <ImageIconBase
@@ -59,7 +65,7 @@ export default observer(
                 height={size}
                 loading="lazy"
                 aria-hidden="true"
-                square={isServerChannel}
+                {...borderRadius}
                 src={iconURL ?? fallback}
             />
         );

src/components/common/IconBase.tsx

@@ -11,7 +11,10 @@ export interface IconBaseProps<T> {
 }
 
 interface IconModifiers {
-    square?: boolean;
+    /**
+     * If this is undefined or null then the icon defaults to square, else uses the CSS variable given.
+     */
+    borderRadius?: string;
     hover?: boolean;
 }
 
@@ -24,9 +27,9 @@ export default styled.svg<IconModifiers>`
         object-fit: cover;
 
         ${(props) =>
-            !props.square &&
+            props.borderRadius &&
             css`
-                border-radius: var(--border-radius-half);
+                border-radius: var(${props.borderRadius});
             `}
     }
 
@@ -44,9 +47,9 @@ export const ImageIconBase = styled.img<IconModifiers>`
     object-fit: cover;
 
     ${(props) =>
-        !props.square &&
+        props.borderRadius &&
         css`
-            border-radius: var(--border-radius-half);
+            border-radius: var(${props.borderRadius});
         `}
 
     ${(props) =>

src/components/common/ServerIcon.tsx

@@ -59,6 +59,7 @@ export default observer(
                 {...imgProps}
                 width={size}
                 height={size}
+                borderRadius="--border-radius-server-icon"
                 src={iconURL}
                 loading="lazy"
                 aria-hidden="true"

src/components/common/user/UserIcon.tsx

@@ -8,7 +8,7 @@ import styled, { css } from "styled-components";
 import { useContext } from "preact/hooks";
 
 import { ThemeContext } from "../../../context/Theme";
-import { AppContext, useClient } from "../../../context/revoltjs/RevoltClient";
+import { useClient } from "../../../context/revoltjs/RevoltClient";
 
 import IconBase, { IconBaseProps } from "../IconBase";
 import fallback from "../assets/user.png";
@@ -104,6 +104,7 @@ export default observer(
                 width={size}
                 height={size}
                 hover={hover}
+                borderRadius="--border-radius-user-profile-picture"
                 aria-hidden="true"
                 viewBox="0 0 32 32">
                 <foreignObject

src/styles/_variables.scss

@@ -19,10 +19,12 @@
      * Layout
      */
     --app-height: 100vh;
-    --border-radius: 6px;
-    --border-radius-half: 50%;
     --scrollbar-thickness: 3px;
     --scrollbar-thickness-ff: thin;
+    --border-radius: 6px;
+    --border-radius-half: 50%;
+    --border-radius-user-profile-picture: var(--border-radius-half);
+    --border-radius-server-icon: var(--border-radius-half);
 
     --input-border-width: 2px;
     --textarea-padding: 16px;