diff --git a/components/Layout/Layout.tsx b/components/Layout/Layout.tsx index 1e05db45..c6d7a07e 100644 --- a/components/Layout/Layout.tsx +++ b/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", { diff --git a/components/ThemeScript/ThemeScript.tsx b/components/ThemeScript/ThemeScript.tsx index 2fbc2dea..5d0c3a5c 100644 --- a/components/ThemeScript/ThemeScript.tsx +++ b/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 diff --git a/contexts/ThemeContext.tsx b/contexts/ThemeContext.tsx index 09351b12..98924686 100644 --- a/contexts/ThemeContext.tsx +++ b/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<{ diff --git a/lib/styles/helpers/themes.ts b/lib/config/themes.ts similarity index 90% rename from lib/styles/helpers/themes.ts rename to lib/config/themes.ts index ff94b7d4..265e3f01 100644 --- a/lib/styles/helpers/themes.ts +++ b/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 = { diff --git a/lib/styles/helpers/fonts/comic-neue.ts b/lib/styles/fonts/ComicNeue.ts similarity index 100% rename from lib/styles/helpers/fonts/comic-neue.ts rename to lib/styles/fonts/ComicNeue.ts diff --git a/lib/styles/helpers/fonts/inter.ts b/lib/styles/fonts/Inter.ts similarity index 100% rename from lib/styles/helpers/fonts/inter.ts rename to lib/styles/fonts/Inter.ts diff --git a/lib/styles/helpers/fonts/roboto-mono.ts b/lib/styles/fonts/RobotoMono.ts similarity index 100% rename from lib/styles/helpers/fonts/roboto-mono.ts rename to lib/styles/fonts/RobotoMono.ts diff --git a/lib/styles/fonts/index.ts b/lib/styles/fonts/index.ts new file mode 100644 index 00000000..f8617df4 --- /dev/null +++ b/lib/styles/fonts/index.ts @@ -0,0 +1,3 @@ +export * as ComicNeue from "./ComicNeue"; +export * as Inter from "./Inter"; +export * as RobotoMono from "./RobotoMono"; diff --git a/lib/styles/helpers/hex-to-rgba.ts b/lib/styles/helpers/hex-to-rgba.ts deleted file mode 100644 index 360b7c7b..00000000 --- a/lib/styles/helpers/hex-to-rgba.ts +++ /dev/null @@ -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; diff --git a/lib/styles/helpers/typography.ts b/lib/styles/helpers/typography.ts deleted file mode 100644 index 02c605d4..00000000 --- a/lib/styles/helpers/typography.ts +++ /dev/null @@ -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 }; diff --git a/lib/styles/stitches.config.ts b/lib/styles/stitches.config.ts index bc24cdc0..50d074d8 100644 --- a/lib/styles/stitches.config.ts +++ b/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]; diff --git a/package.json b/package.json index cf70f4e6..1bb12a6f 100644 --- a/package.json +++ b/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", diff --git a/pages/_app.tsx b/pages/_app.tsx index f7011bd0..01d6174d 100644 --- a/pages/_app.tsx +++ b/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"; diff --git a/pages/_document.tsx b/pages/_document.tsx index fa7f38db..f4030f25 100644 --- a/pages/_document.tsx +++ b/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 = () => { {/* preload highest priority fonts defined in ../lib/styles/fonts/ */} - {fonts.preloadUrls.map((relativeUrl, index) => ( + {preloadUrls.map((relativeUrl, index) => (