reorganize style and font configs

lib/styles/fonts/index.ts

@@ -0,0 +1,3 @@
+export * as ComicNeue from "./ComicNeue";
+export * as Inter from "./Inter";
+export * as RobotoMono from "./RobotoMono";

lib/styles/helpers/hex-to-rgba.ts

@@ -1,11 +0,0 @@
-// hex -> rgba, pulled from https://github.com/sindresorhus/hex-rgb/blob/main/index.js#L29
-const hex2rgba = (hex: string, alpha: number) => {
-  const number = Number.parseInt(hex.replace(/^#/, ""), 16);
-  const red = number >> 16;
-  const green = (number >> 8) & 255;
-  const blue = number & 255;
-
-  return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
-};
-
-export default hex2rgba;

lib/styles/helpers/themes.ts

@@ -1,19 +0,0 @@
-import { theme, darkTheme } from "../stitches.config";
-
-// theme classnames are generated dynamically by stitches, so have ThemeProvider pull them from there
-export const themeClassNames = {
-  light: theme.className,
-  dark: darkTheme.className,
-};
-
-// colors used for `<meta name="theme-color" .../>` (see components/Layout/Layout.tsx)
-export const themeColors = {
-  light: theme.colors.backgroundOuter?.value,
-  dark: darkTheme.colors.backgroundOuter?.value,
-};
-
-// https://web.dev/prefers-color-scheme/#the-prefers-color-scheme-media-query
-export const darkModeQuery = "(prefers-color-scheme: dark)";
-
-// local storage key
-export const themeStorageKey = "preferred-theme";

lib/styles/helpers/typography.ts

@@ -1,9 +0,0 @@
-import * as Inter from "./fonts/inter";
-import * as RobotoMono from "./fonts/roboto-mono";
-import * as ComicNeue from "./fonts/comic-neue";
-
-// re-export hashed URLs of the most important variable fonts so we can preload them in pages/_document.tsx
-export const preloadUrls = [...Inter.preloadUrls, ...RobotoMono.preloadUrls];
-
-// re-export everything for use in ../stitches.config.ts
-export { Inter, RobotoMono, ComicNeue };

lib/styles/stitches.config.ts

@@ -4,11 +4,11 @@ import { createStitches, defaultThemeMap } from "@stitches/react";
 // https://github.com/jakejarvis/stitches-normalize/blob/main/src/index.ts
 import normalizeCss from "stitches-normalize";
 
-// web fonts
-import { Inter, RobotoMono, ComicNeue } from "./helpers/typography";
-
 // misc. helpers
-import hex2rgba from "./helpers/hex-to-rgba";
+import hexToRgba from "hex-to-rgba";
+
+// web fonts
+import { Inter, RobotoMono, ComicNeue } from "./fonts";
 
 export const { styled, css, getCssText, globalCss, keyframes, createTheme, theme } = createStitches({
   theme: {
@@ -71,7 +71,7 @@ export const { styled, css, getCssText, globalCss, keyframes, createTheme, theme
   utils: {
     setUnderlineVar: ({ color, alpha = 0.4 }) => ({
       // allow both pre-set rgba stitches variables and hex values
-      $$underline: color.startsWith("#") ? hex2rgba(color, alpha) : color,
+      $$underline: color.startsWith("#") ? hexToRgba(color, alpha) : color,
     }),
   },
 
@@ -160,5 +160,5 @@ export const globalStyles = globalCss(
   }
 );
 
-// re-export all font data so we can do things like preloading them in pages/_document.tsx
-export * as fonts from "./helpers/typography";
+// re-export hashed URLs of the most important variable fonts so we can preload them in pages/_document.tsx
+export const preloadUrls = [...Inter.preloadUrls, ...RobotoMono.preloadUrls];