feat: add theme

Author: insertish

components/auth/index.tsx

@@ -1,3 +1,5 @@
+/// <reference path="../../types/styled.d.ts" />
+
 export { AuthPage } from "./src/AuthPage";
 
 import { H1 } from "@revolt/ui";

components/auth/src/AuthPage.tsx

@@ -1,5 +1,5 @@
 import { Route, Routes } from "@solidjs/router";
-import { css, styled } from "solid-styled-components";
+import { styled } from "solid-styled-components";
 import { LocaleSelector, useTranslation } from "@revolt/i18n";
 
 import { BiLogosGithub, BiLogosTwitter, BiLogosMastodon } from "solid-icons/bi";
@@ -32,11 +32,10 @@ const Base = styled("div")`
   flex-direction: column;
   justify-content: space-between;
 
-  /* TODO breakpoint md */
-  @media (max-width: 768px) {
+  @media (max-width: ${({ theme }) => theme!.breakpoints.md}) {
     padding: 30px 20px;
     background-image: unset;
-    background-color: #242424;
+    background-color: ${({ theme }) => theme!.colours["background-200"]};
     /* TODO primary bg */
   }
 `;
@@ -68,11 +67,11 @@ const NavItems = styled("div")<{
   color: #ddd;
   font-size: 0.9em;
 
-  @media (max-width: 768px) {
+  @media (max-width: ${({ theme }) => theme!.breakpoints.md}) {
     display: ${(props) => (props.hide ? "none" : "flex")};
   }
 
-  @media (max-width: 768px) {
+  @media (max-width: ${({ theme }) => theme!.breakpoints.md}) {
     flex-direction: ${(props) => (props.stack ? "column" : "row")};
   }
 `;
@@ -86,7 +85,7 @@ const Bullet = styled("div")`
   background: grey;
   border-radius: 50%;
 
-  @media (max-width: 768px) {
+  @media (max-width: ${({ theme }) => theme!.breakpoints.md}) {
     display: none;
   }
 `;

components/auth/types

@@ -0,0 +1 @@
+../../types

components/ui/components/design/atoms/heading/H1.tsx

@@ -6,5 +6,5 @@ export const H1 = styled("h1")`
 
   font-weight: 600;
   font-size: 1.2rem;
-  color: var(--foreground);
+  color: ${({ theme }) => theme!.colours.foreground};
 `;

components/ui/components/design/atoms/inputs/ComboBox.tsx

@@ -7,12 +7,13 @@ export const ComboBox = styled("select")`
   font-family: inherit;
   font-weight: 500;
 
-  color: var(--foreground);
-  background: var(--secondary-background);
+  color: ${({ theme }) => theme!.colours.foreground};
+  background: ${({ theme }) => theme!.colours["background-100"]};
 
   border: none;
-  border-radius: var(--border-radius);
+  border-radius: ${({ theme }) => theme!.borderRadius.md};
   box-sizing: border-box;
+
   outline: none;
   cursor: pointer;
 

components/ui/index.tsx

@@ -1,6 +1,37 @@
 export * from "./components/design/atoms/heading";
 export * from "./components/design/atoms/inputs";
 
+import type { DefaultTheme } from "solid-styled-components";
 export { ThemeProvider } from "solid-styled-components";
 
-export const darkTheme = {};
+export const darkTheme: DefaultTheme = {
+  colours: {
+    accent: "#FD6671",
+    foreground: "#FFF",
+    "foreground-100": "#EEE",
+    "foreground-200": "#CCC",
+    "foreground-300": "#AAA",
+    "foreground-400": "#848484",
+    background: "#000",
+    "background-100": "#1E1E1E",
+    "background-200": "#242424",
+    "background-300": "#363636",
+    "background-400": "#4D4D4D",
+    "status-online": "#3ABF7E",
+    "status-idle": "#F39F00",
+    "status-focus": "#4799F0",
+    "status-busy": "#F84848",
+    "status-streaming": "#977EFF",
+    "status-offline": "#A5A5A5",
+  },
+  breakpoints: {
+    sm: "640px",
+    md: "768px",
+    lg: "1024px",
+    xl: "1280px",
+  },
+  borderRadius: {
+    md: "6px",
+    lg: "12px",
+  },
+};

components/ui/types

@@ -0,0 +1 @@
+../../types

packages/client/src/index.tsx

@@ -3,6 +3,7 @@ import { render } from "solid-js/web";
 
 import "./styles.css";
 
+import { ThemeProvider, darkTheme } from "@revolt/ui";
 import i18n, { I18nContext } from "@revolt/i18n";
 import { Router } from "@solidjs/router";
 import App from "./App";
@@ -11,7 +12,9 @@ render(
   () => (
     <Router>
       <I18nContext.Provider value={i18n}>
-        <App />
+        <ThemeProvider theme={darkTheme}>
+          <App />
+        </ThemeProvider>
       </I18nContext.Provider>
     </Router>
   ),

types/styled.d.ts

@@ -0,0 +1,21 @@
+import "solid-styled-components";
+
+declare module "solid-styled-components" {
+  export interface DefaultTheme {
+    colours: {
+      [key in
+        | 'accent'
+        | 'foreground'
+        | `foreground-${100 | 200 | 300 | 400}`
+        | 'background'
+        | `background-${100 | 200 | 300 | 400}`
+        | `status-${'online' | 'idle' | 'focus' | 'busy' | 'streaming' | 'offline'}`]: string;
+    };
+    breakpoints: {
+      [key in 'sm' | 'md' | 'lg' | 'xl']: string;
+    };
+    borderRadius: {
+      [key in 'md' | 'lg']: string;
+    };
+  }
+}