reorganize style and font configs

components/Layout/Layout.tsx

@@ -3,7 +3,7 @@ import Header from "../Header";
 import Footer from "../Footer";
 import { useTheme } from "../../hooks/use-theme";
 import { styled } from "../../lib/styles/stitches.config";
-import { themeColors } from "../../lib/styles/helpers/themes";
+import { themeColors } from "../../lib/config/themes";
 import type { ComponentProps } from "react";
 
 const Flex = styled("div", {

components/ThemeScript/ThemeScript.tsx

@@ -1,4 +1,4 @@
-import { darkModeQuery, themeStorageKey, themeClassNames } from "../../lib/styles/helpers/themes";
+import { darkModeQuery, themeStorageKey, themeClassNames } from "../../lib/config/themes";
 
 // comments are up here to avoid having them inside the actual client output:
 //  - `p` is the user's saved preference

contexts/ThemeContext.tsx

@@ -1,6 +1,6 @@
 import { createContext, useCallback, useEffect, useState, useRef } from "react";
 import { useLocalStorage } from "../hooks/use-local-storage";
-import { darkModeQuery, themeStorageKey } from "../lib/styles/helpers/themes";
+import { darkModeQuery, themeStorageKey } from "../lib/config/themes";
 import type { Context, PropsWithChildren } from "react";
 
 export const ThemeContext: Context<{

lib/config/themes.ts

@@ -1,4 +1,4 @@
-import { theme, darkTheme } from "../stitches.config";
+import { theme, darkTheme } from "../styles/stitches.config";
 
 // theme classnames are generated dynamically by stitches, so have ThemeProvider pull them from there
 export const themeClassNames = {

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/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];

package.json

@@ -39,6 +39,7 @@
     "feed": "^4.2.2",
     "formik": "^2.2.9",
     "gray-matter": "^4.0.3",
+    "hex-to-rgba": "^2.0.1",
     "is-absolute-url": "^4.0.1",
     "markdown-to-jsx": "^7.1.7",
     "next": "12.1.6-canary.4",

pages/_app.tsx

@@ -7,7 +7,7 @@ import { ThemeProvider } from "../contexts/ThemeContext";
 import Layout from "../components/Layout";
 import * as config from "../lib/config";
 import { defaultSeo, socialProfileJsonLd } from "../lib/config/seo";
-import { themeClassNames } from "../lib/styles/helpers/themes";
+import { themeClassNames } from "../lib/config/themes";
 import { globalStyles } from "../lib/styles/stitches.config";
 import type { AppProps as NextAppProps } from "next/app";
 

pages/_document.tsx

@@ -1,6 +1,6 @@
 import { Html, Head, Main, NextScript } from "next/document";
 import ThemeScript from "../components/ThemeScript/ThemeScript";
-import { getCssText, fonts } from "../lib/styles/stitches.config";
+import { getCssText, preloadUrls } from "../lib/styles/stitches.config";
 import * as config from "../lib/config";
 
 // https://nextjs.org/docs/advanced-features/custom-document
@@ -12,7 +12,7 @@ const Document = () => {
         <ThemeScript />
 
         {/* preload highest priority fonts defined in ../lib/styles/fonts/ */}
-        {fonts.preloadUrls.map((relativeUrl, index) => (
+        {preloadUrls.map((relativeUrl, index) => (
           <link
             key={`font-${index}`}
             rel="preload"

yarn.lock

@@ -3391,6 +3391,11 @@ hastscript@^7.0.0:
     property-information "^6.0.0"
     space-separated-tokens "^2.0.0"
 
+hex-to-rgba@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/hex-to-rgba/-/hex-to-rgba-2.0.1.tgz#4176977882a1cb32b83ce5ab1db6828ab84d5a13"
+  integrity sha512-5XqPJBpsEUMsseJUi2w2Hl7cHFFi3+OO10M2pzAvKB1zL6fc+koGMhmBqoDOCB4GemiRM/zvDMRIhVw6EkB8dQ==
+
 hoist-non-react-statics@^3.3.0:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"