[WIP] Theme tweaks

.envrc

@@ -0,0 +1 @@
+use flake

.gitignore

@@ -4,6 +4,6 @@ dist
 
 *.log
 
-.env*
+.env.*
 !.env.example
 .vercel

flake.nix

@@ -0,0 +1,51 @@
+{
+  description = "Lavander developer environment";
+
+  inputs = {
+    nixpkgs = {
+      # Locked to nixpkgs/nixos-24.11
+      url = "github:nixos/nixpkgs/nixos-24.11";
+    };
+  };
+  outputs =
+    { self, nixpkgs }:
+    let
+      supportedSystems = [
+        "x86_64-linux"
+        "aarch64-linux"
+        "x86_64-darwin"
+        "aarch64-darwin"
+      ];
+      forEachSupportedSystem =
+        f:
+        nixpkgs.lib.genAttrs supportedSystems (
+          system:
+          f {
+            pkgs = import nixpkgs {
+              inherit system;
+            };
+          }
+        );
+    in
+    {
+      devShells = forEachSupportedSystem (
+        { pkgs }:
+        {
+          default = pkgs.mkShell {
+            packages = with pkgs; [
+              # Tools
+              git
+
+              # Node
+              nodejs
+              nodePackages.pnpm
+
+              # mdbook
+              mdbook
+              mdbook-mermaid
+            ];
+          };
+        }
+      );
+    };
+}

packages/client/components/app/interface/settings/_layout/Content.tsx

@@ -106,22 +106,11 @@ const CloseAnchor = styled.a`
   justify-content: center;
 
   border-radius: ${(props) => props.theme!.borderRadius.full};
-  border: 3px solid ${(props) => props.theme!.colours["settings-close-anchor"]};
+  background: ${(props) => props.theme!.colours["settings-close-anchor"]}; 
   transition: ${(props) => props.theme!.transitions.fast} background-color;
 
   svg {
     transition: ${(props) => props.theme!.transitions.fast} background-color;
-    color: ${(props) =>
-      props.theme!.colours["settings-close-anchor"]} !important;
-  }
-
-  &:hover {
-    background: ${(props) => props.theme!.colours["settings-close-anchor"]};
-  }
-
-  &:hover svg {
-    color: ${(props) =>
-      props.theme!.colours["settings-close-anchor-hover"]} !important;
   }
 
   &:active {

packages/client/components/app/interface/settings/user/account/UserSummary.tsx

@@ -136,6 +136,6 @@ const ProfileBadges = styled("div", {
     padding: "var(--gap-sm) var(--gap-sm)",
     borderRadius: "var(--borderRadius-md)",
 
-    background: "var(--colours-settings-background)",
+    fill: "var(--colours-settings-foreground)",
   },
 });

packages/client/components/ui/components/design/atoms/inputs/CategoryButton.tsx

@@ -143,8 +143,9 @@ const Content = styled(Column)`
  * Accented wrapper for the category button icons
  */
 const IconWrapper = styled.div`
-  background: ${(props) =>
-    props.theme!.colours["component-categorybtn-background-icon"]};
+  /* Remove this if it doesn't end up getting used again later */
+  /* background: ${(props) =>
+    props.theme!.colours["component-categorybtn-background-icon"]}; */
 
   width: 36px;
   height: 36px;
@@ -154,9 +155,9 @@ const IconWrapper = styled.div`
   justify-content: center;
   border-radius: 50%;
 
-  svg {
-    color: ${(props) =>
-      props.theme!.colours["component-categorybtn-foreground-description"]};
+  svg:not([fill]) {
+    fill: ${(props) =>
+      props.theme!.colours["component-categorybtn-foreground"]};
   }
 `;
 
@@ -186,6 +187,7 @@ const Description = styled.span`
  * Container for action icons
  */
 const Action = styled.div`
+  fill: ${(props) => props.theme!.colours["component-categorybtn-foreground"]};
   width: 24px;
   height: 24px;
   flex-shrink: 0;

packages/client/components/ui/components/navigation/servers/ServerList.tsx

@@ -8,6 +8,7 @@ import { styled } from "styled-system/jsx";
 
 import { KeybindAction } from "@revolt/keybinds";
 import { useNavigate } from "@revolt/routing";
+import { useTheme } from "@revolt/ui";
 
 import MdAdd from "@material-design-icons/svg/filled/add.svg?component-solid";
 import MdExplore from "@material-design-icons/svg/filled/explore.svg?component-solid";
@@ -70,6 +71,7 @@ interface Props {
 export const ServerList = (props: Props) => {
   const navigate = useNavigate();
   const keybinds = useKeybindActions();
+  const theme = useTheme();
 
   const navigateServer = (ev: KeyboardEvent, byOffset: number) => {
     ev.preventDefault();
@@ -138,7 +140,7 @@ export const ServerList = (props: Props) => {
             </PositionSwoosh>
           </Show> */}
           <a href="/app">
-            <Avatar size={42} fallback={<MdHome />} />
+            <Avatar size={42} fallback={<MdHome fill={theme.colours.foreground} />} />
           </a>
         </EntryContainer>
         <Tooltip
@@ -253,13 +255,13 @@ export const ServerList = (props: Props) => {
         <Tooltip placement="right" content={"Create or join a server"}>
           <EntryContainer>
             <a onClick={() => props.onCreateOrJoinServer()}>
-              <Avatar size={42} fallback={<MdAdd />} />
+              <Avatar size={42} fallback={<MdAdd fill={theme.colours.foreground} />} />
             </a>
           </EntryContainer>
         </Tooltip>
         <Tooltip placement="right" content={"Find new servers to join"}>
           <EntryContainer>
-            <Avatar size={42} fallback={<MdExplore />} />
+            <Avatar size={42} fallback={<MdExplore fill={theme.colours.foreground} />} />
           </EntryContainer>
         </Tooltip>
       </div>
@@ -269,7 +271,7 @@ export const ServerList = (props: Props) => {
       <Tooltip placement="right" content="Settings">
         <EntryContainer>
           <a href="/settings">
-            <Avatar size={42} fallback={<MdSettings />} interactive />
+            <Avatar size={42} fallback={<MdSettings fill={theme.colours.foreground} />} interactive />
           </a>
         </EntryContainer>
       </Tooltip>

packages/client/components/ui/themes/darkTheme.ts

@@ -199,15 +199,15 @@ export const darkTheme: (
       "component-scrollbar-background": "transparent",
       "component-scrollbar-foreground": materialColour("primary", 85),
       // Component: Category Button
-      "component-categorybtn-background": materialColour("background", 99),
+      "component-categorybtn-background": materialColour("background", 97),
       "component-categorybtn-background-icon": materialColour("primary", 90),
       "component-categorybtn-background-collapse": materialColour(
         "background",
         97
       ),
       "component-categorybtn-background-hover": materialColour(
         "background",
-        100
+        95
       ),
       "component-categorybtn-background-active": materialColour(
         "background",

packages/client/src/interface/Home.tsx

@@ -115,7 +115,7 @@ export function HomePage() {
     <Base>
       <Header placement="primary">
         <HeaderIcon>
-          <MdHome {...iconSize(22)} />
+          <MdHome fill={theme.colours.foreground} {...iconSize(22)} />
         </HeaderIcon>
         Home
       </Header>
@@ -136,7 +136,7 @@ export function HomePage() {
                 })
               }
               description={t("app.home.group_desc")}
-              icon={<MdAddCircle />}
+              icon={<MdAddCircle fill={theme!.colours.foreground} />}
             >
               {t("app.home.group")}
             </CategoryButton>
@@ -145,15 +145,15 @@ export function HomePage() {
                 <CategoryButton
                   onClick={() => navigate("/server/01JESQYCPY76XFN67R79YGCWMR")}
                   description={t("app.home.goto-testers_desc")}
-                  icon={<MdGroups3 />}
+                  icon={<MdGroups3 fill={theme!.colours.foreground} />}
                 >
                   {t("app.home.goto-testers")}
                 </CategoryButton>
               </Match>
               <Match when={showLoungeButton && !isInLounge}>
                 <CategoryButton
                   description={t("app.home.join-testers_desc")}
-                  icon={<MdGroups3 />}
+                  icon={<MdGroups3 fill={theme!.colours.foreground} />}
                 >
                   {t("app.home.join-testers")}
                 </CategoryButton>
@@ -165,7 +165,7 @@ export function HomePage() {
                 console.log("g")
               }
               description={t("app.home.donate_desc")}
-              icon={<MdPayments />}
+              icon={<MdPayments fill={theme!.colours.foreground} />}
             >
               {t("app.home.donate")}
             </CategoryButton>