refactor component styles to use type-safe stitches tokens

https://stitches.dev/docs/typescript#stricter-experience
2025-04-26 09:25:22 -04:00 · 2022-07-07 13:33:20 -04:00 · 2022-07-07 13:33:20 -04:00 · b1a92a2eab
commit b1a92a2eab
parent 2c7e266fc3
40 changed files with 170 additions and 223 deletions
--- a/components/Blockquote/Blockquote.tsx
+++ b/components/Blockquote/Blockquote.tsx
@ -1,10 +1,10 @@
-import { styled } from "../../lib/styles/stitches.config";
+import { styled, theme } from "../../lib/styles/stitches.config";

 const Blockquote = styled("blockquote", {
  marginLeft: 0,
  paddingLeft: "1.25em",
-  borderLeft: "0.25em solid $link",
-  color: "$mediumDark",
+  borderLeft: `0.25em solid ${theme.colors.link}`,
+  color: theme.colors.mediumDark,
 });

 export default Blockquote;
--- a/components/Code/Code.tsx
+++ b/components/Code/Code.tsx
@ -1,11 +1,11 @@
-import { styled } from "../../lib/styles/stitches.config";
+import { styled, theme } from "../../lib/styles/stitches.config";

 const Code = styled("code", {
  fontSize: "0.925em",
-  backgroundColor: "$codeBackground",
-  border: "1px solid $kindaLight",
-  borderRadius: "$rounded",
-  transition: "background $fade, border $fade",
+  backgroundColor: theme.colors.codeBackground,
+  border: `1px solid ${theme.colors.kindaLight}`,
+  borderRadius: theme.radii.rounded,
+  transition: `background ${theme.transitions.fade}, border ${theme.transitions.fade}`,
 });

 export default Code;
--- a/components/CodeBlock/CodeBlock.tsx
+++ b/components/CodeBlock/CodeBlock.tsx
@ -1,13 +1,13 @@
 import Code from "../Code";
 import CopyButton from "../CopyButton";
-import { styled } from "../../lib/styles/stitches.config";
+import { styled, theme } from "../../lib/styles/stitches.config";
 import type { ComponentProps } from "react";

 const Block = styled("div", {
  position: "relative",
  width: "100%",
  margin: "1em auto",
-  color: "$codeText",
+  color: theme.colors.codeText,

  [`& ${Code}`]: {
    display: "block",
@ -21,7 +21,7 @@ const Block = styled("div", {
      width: "1.5em",
      marginRight: "1.5em",
      textAlign: "right",
-      color: "$codeComment",
+      color: theme.colors.codeComment,
      content: "attr(line)", // added as spans by prism
      fontVariantNumeric: "tabular-nums",
      userSelect: "none",
@ -39,31 +39,31 @@ const Block = styled("div", {
        // the following sub-classes MUST be global -- the prism rehype plugin isn't aware of this file
        ".token": {
          "&.comment, &.prolog, &.cdata": {
-            color: "$codeComment",
+            color: theme.colors.codeComment,
          },
          "&.delimiter, &.boolean, &.keyword, &.selector, &.important, &.doctype, &.atrule, &.url": {
-            color: "$codeKeyword",
+            color: theme.colors.codeKeyword,
          },
          "&.tag, &.builtin, &.regex": {
-            color: "$codeNamespace",
+            color: theme.colors.codeNamespace,
          },
          "&.property, &.constant, &.variable, &.attr-value, &.class-name, &.string, &.char": {
-            color: "$codeVariable",
+            color: theme.colors.codeVariable,
          },
          "&.literal-property, &.attr-name": {
-            color: "$codeAttribute",
+            color: theme.colors.codeAttribute,
          },
          "&.function": {
-            color: "$codeLiteral",
+            color: theme.colors.codeLiteral,
          },
          "&.tag .punctuation, &.attr-value .punctuation": {
-            color: "$codePunctuation",
+            color: theme.colors.codePunctuation,
          },
          "&.inserted": {
-            color: "$codeAddition",
+            color: theme.colors.codeAddition,
          },
          "&.deleted": {
-            color: "$codeDeletion",
+            color: theme.colors.codeDeletion,
          },
          "&.url": { textDecoration: "underline" },
          "&.bold": { fontWeight: "bold" },
@ -79,11 +79,11 @@ const CornerCopyButton = styled(CopyButton, {
  top: 0,
  right: 0,
  padding: "0.65em",
-  backgroundColor: "$backgroundInner",
-  border: "1px solid $kindaLight",
-  borderTopRightRadius: "$rounded",
-  borderBottomLeftRadius: "$rounded",
-  transition: "background $fade, border $fade",
+  backgroundColor: theme.colors.backgroundInner,
+  border: `1px solid ${theme.colors.kindaLight}`,
+  borderTopRightRadius: theme.radii.rounded,
+  borderBottomLeftRadius: theme.radii.rounded,
+  transition: `background ${theme.transitions.fade}, border ${theme.transitions.fade}`,
 });

 export type CodeBlockProps = ComponentProps<typeof Code> & {
--- a/components/Comments/Comments.tsx
+++ b/components/Comments/Comments.tsx
@ -1,6 +1,6 @@
 import Giscus from "@giscus/react";
 import { useTheme } from "../../hooks/use-theme";
-import { styled } from "../../lib/styles/stitches.config";
+import { styled, theme } from "../../lib/styles/stitches.config";
 import { giscusConfig } from "../../lib/config";
 import type { ComponentProps } from "react";
 import type { GiscusProps } from "@giscus/react";
@ -8,7 +8,7 @@ import type { GiscusProps } from "@giscus/react";
 const Wrapper = styled("div", {
  marginTop: "2em",
  paddingTop: "2em",
-  borderTop: "2px solid $light",
+  borderTop: `2px solid ${theme.colors.light}`,
  minHeight: "360px",
 });

--- a/components/ContactForm/ContactForm.tsx
+++ b/components/ContactForm/ContactForm.tsx
@ -4,7 +4,7 @@ import TextareaAutosize from "react-textarea-autosize";
 import Link from "../Link";
 import Captcha from "../Captcha";
 import { CheckOcticon, XOcticon, MarkdownIcon } from "../Icons";
-import { styled, css } from "../../lib/styles/stitches.config";
+import { styled, theme, css } from "../../lib/styles/stitches.config";
 import type { FormikHelpers, FormikProps, FieldInputProps, FieldMetaProps } from "formik";

 // CSS applied to both `<input />` and `<textarea />`
@ -12,21 +12,21 @@ const InputStyles = css({
  width: "100%",
  padding: "0.8em",
  margin: "0.6em 0",
-  border: "2px solid $light",
-  borderRadius: "$rounded",
-  color: "$text",
-  backgroundColor: "$superDuperLight",
-  transition: "background $fade",
+  border: `2px solid ${theme.colors.light}`,
+  borderRadius: theme.radii.rounded,
+  color: theme.colors.text,
+  backgroundColor: theme.colors.superDuperLight,
+  transition: `background ${theme.transitions.fade}`,

  "&:focus": {
    outline: "none",
-    borderColor: "$link",
+    borderColor: theme.colors.link,
  },

  variants: {
    missing: {
      true: {
-        borderColor: "$error",
+        borderColor: theme.colors.error,
      },
      false: {},
    },
@ -71,16 +71,16 @@ const SubmitButton = styled("button", {
  padding: "1em 1.25em",
  marginRight: "1.5em",
  border: 0,
-  borderRadius: "$rounded",
+  borderRadius: theme.radii.rounded,
  cursor: "pointer",
  userSelect: "none",
  fontWeight: 500,
-  color: "$text",
-  backgroundColor: "$kindaLight",
+  color: theme.colors.text,
+  backgroundColor: theme.colors.kindaLight,

  "&:hover": {
-    color: "$superDuperLight",
-    backgroundColor: "$link",
+    color: theme.colors.superDuperLight,
+    backgroundColor: theme.colors.link,
  },

  variants: {
@ -106,10 +106,10 @@ const Result = styled("div", {
  variants: {
    status: {
      success: {
-        color: "$success",
+        color: theme.colors.success,
      },
      error: {
-        color: "$error",
+        color: theme.colors.error,
      },
    },

--- a/components/Content/Content.tsx
+++ b/components/Content/Content.tsx
@ -1,9 +1,9 @@
-import { styled } from "../../lib/styles/stitches.config";
+import { styled, theme } from "../../lib/styles/stitches.config";

 const Content = styled("div", {
  fontSize: "0.9em",
  lineHeight: 1.7,
-  color: "$text",
+  color: theme.colors.text,

  "@medium": {
    fontSize: "0.925em",
--- a/components/CopyButton/CopyButton.tsx
+++ b/components/CopyButton/CopyButton.tsx
@ -2,7 +2,7 @@ import { forwardRef, useState, useEffect } from "react";
 import innerText from "react-innertext";
 import copy from "copy-to-clipboard";
 import { ClipboardOcticon, CheckOcticon } from "../Icons";
-import { styled } from "../../lib/styles/stitches.config";
+import { styled, theme } from "../../lib/styles/stitches.config";
 import type { ReactNode, Ref, MouseEventHandler } from "react";

 const Button = styled("button", {
@ -12,13 +12,13 @@ const Button = styled("button", {
  variants: {
    copied: {
      true: {
-        color: "$success",
+        color: theme.colors.success,
      },
      false: {
-        color: "$mediumDark",
+        color: theme.colors.mediumDark,

        "&:hover": {
-          color: "$link",
+          color: theme.colors.link,
        },
      },
    },
--- a/components/Figure/Figure.tsx
+++ b/components/Figure/Figure.tsx
@ -1,6 +1,6 @@
 import innerText from "react-innertext";
 import Image, { ImageProps } from "../Image";
-import { styled } from "../../lib/styles/stitches.config";
+import { styled, theme } from "../../lib/styles/stitches.config";
 import type { PropsWithChildren } from "react";

 const Wrapper = styled("figure", {
@ -11,7 +11,7 @@ const Wrapper = styled("figure", {
 const Caption = styled("figcaption", {
  fontSize: "0.9em",
  lineHeight: 1.5,
-  color: "$medium",
+  color: theme.colors.medium,
  marginTop: "-0.4em",
 });

--- a/components/Footer/Footer.tsx
+++ b/components/Footer/Footer.tsx
@ -1,16 +1,16 @@
 import Link from "../Link";
 import { HeartIcon, NextjsLogo } from "../Icons";
-import { keyframes, styled } from "../../lib/styles/stitches.config";
+import { styled, theme, keyframes } from "../../lib/styles/stitches.config";
 import * as config from "../../lib/config";
 import type { ComponentProps } from "react";

 const Wrapper = styled("footer", {
  width: "100%",
  padding: "1.25em 1.5em",
-  borderTop: "1px solid $kindaLight",
-  backgroundColor: "$backgroundOuter",
-  color: "$mediumDark",
-  transition: "background $fade, border $fade",
+  borderTop: `1px solid ${theme.colors.kindaLight}`,
+  backgroundColor: theme.colors.backgroundOuter,
+  color: theme.colors.mediumDark,
+  transition: `background ${theme.transitions.fade}, border ${theme.transitions.fade}`,

  "@medium": {
    padding: "1em 1.25em",
@ -20,7 +20,7 @@ const Wrapper = styled("footer", {
 const Row = styled("div", {
  display: "flex",
  width: "100%",
-  maxWidth: "865px",
+  maxWidth: theme.sizes.maxLayoutWidth,
  margin: "0 auto",
  justifyContent: "space-between",
  fontSize: "0.85em",
@ -34,21 +34,21 @@ const Row = styled("div", {
 });

 const PlainLink = styled(Link, {
-  color: "$mediumDark",
+  color: theme.colors.mediumDark,
 });

 const NextjsLink = styled(PlainLink, {
  "&:hover": {
-    color: "$medium",
+    color: theme.colors.medium,
  },
 });

 const ViewSourceLink = styled(PlainLink, {
  paddingBottom: "2px",
-  borderBottom: "1px solid $light",
+  borderBottom: `1px solid ${theme.colors.light}`,

  "&:hover": {
-    borderColor: "$kindaLight",
+    borderColor: theme.colors.kindaLight,
  },
 });

@ -62,7 +62,7 @@ const Icon = styled("svg", {

 const Heart = styled("span", {
  display: "inline-block",
-  color: "$error", // somewhat ironically color the heart with the themed "error" red... </3
+  color: theme.colors.error, // somewhat ironically color the heart with the themed "error" red... </3

  "@media (prefers-reduced-motion: no-preference)": {
    animation: `${keyframes({
--- a/components/Header/Header.tsx
+++ b/components/Header/Header.tsx
@ -1,15 +1,15 @@
 import Selfie from "../Selfie";
 import Menu from "../Menu";
-import { styled } from "../../lib/styles/stitches.config";
+import { styled, theme } from "../../lib/styles/stitches.config";
 import type { ComponentProps } from "react";

 const Wrapper = styled("header", {
  width: "100%",
  height: "4.5em",
  padding: "0.7em 1.5em",
-  borderBottom: "1px solid $kindaLight",
-  backgroundColor: "$backgroundHeader",
-  transition: "background $fade, border $fade",
+  borderBottom: `1px solid ${theme.colors.kindaLight}`,
+  backgroundColor: theme.colors.backgroundHeader,
+  transition: `background ${theme.transitions.fade}, border ${theme.transitions.fade}`,
  zIndex: 9999,

  // blurry glass-like background effect (except on firefox...?)
@ -26,7 +26,7 @@ const Nav = styled("nav", {
  alignItems: "center",
  justifyContent: "space-between",
  width: "100%",
-  maxWidth: "865px",
+  maxWidth: theme.sizes.maxLayoutWidth,
  margin: "0 auto",
 });

--- a/components/Heading/Heading.tsx
+++ b/components/Heading/Heading.tsx
@ -1,16 +1,16 @@
 import innerText from "react-innertext";
 import HeadingAnchor from "../HeadingAnchor";
-import { styled } from "../../lib/styles/stitches.config";
+import { styled, theme } from "../../lib/styles/stitches.config";
 import type { ComponentProps } from "react";

 const Anchor = styled(HeadingAnchor, {
  margin: "0 0.4em",
  padding: "0 0.2em",
-  color: "$medium",
+  color: theme.colors.medium,
  opacity: 0, // overridden on hover below (except on small screens)

  "&:hover": {
-    color: "$link",
+    color: theme.colors.link,
  },

  "@medium": {
@ -45,7 +45,7 @@ const H = styled("h1", {
    divider: {
      true: {
        paddingBottom: "0.25em",
-        borderBottom: "1px solid $kindaLight",
+        borderBottom: `1px solid ${theme.colors.kindaLight}`,
      },
      false: {},
    },
--- a/components/HorizontalRule/HorizontalRule.tsx
+++ b/components/HorizontalRule/HorizontalRule.tsx
@ -1,10 +1,10 @@
-import { styled } from "../../lib/styles/stitches.config";
+import { styled, theme } from "../../lib/styles/stitches.config";

 const HorizontalRule = styled("hr", {
  margin: "1.5em auto",
  height: "0.175em",
  border: 0,
-  backgroundColor: "$light",
+  backgroundColor: theme.colors.light,
 });

 export default HorizontalRule;
--- a/components/IFrame/IFrame.tsx
+++ b/components/IFrame/IFrame.tsx
@ -1,12 +1,12 @@
-import { styled } from "../../lib/styles/stitches.config";
+import { styled, theme } from "../../lib/styles/stitches.config";
 import type { ComponentProps } from "react";

 const RoundedIFrame = styled("iframe", {
  width: "100%",
  display: "block",
  margin: "1em auto",
-  border: "2px solid $kindaLight",
-  borderRadius: "$rounded",
+  border: `2px solid ${theme.colors.kindaLight}`,
+  borderRadius: theme.radii.rounded,
 });

 export type IFrameProps = ComponentProps<typeof RoundedIFrame> & {
--- a/components/Image/Image.tsx
+++ b/components/Image/Image.tsx
@ -1,6 +1,6 @@
 import NextImage from "next/future/image";
 import Link from "../Link";
-import { styled } from "../../lib/styles/stitches.config";
+import { styled, theme } from "../../lib/styles/stitches.config";
 import type { ComponentProps } from "react";
 import type { ImageProps as NextImageProps, StaticImageData } from "next/future/image";

@ -16,7 +16,7 @@ const Block = styled("div", {
 const StyledImage = styled(NextImage, {
  height: "auto",
  maxWidth: "100%",
-  borderRadius: "$rounded",
+  borderRadius: theme.radii.rounded,
 });

 export type ImageProps = ComponentProps<typeof StyledImage> & {
--- a/components/Layout/Layout.tsx
+++ b/components/Layout/Layout.tsx
@ -3,7 +3,7 @@ import Header from "../Header";
 import Footer from "../Footer";
 import { SkipToContentLink, SkipToContentTarget } from "../SkipToContent";
 import { useTheme } from "../../hooks/use-theme";
-import { styled } from "../../lib/styles/stitches.config";
+import { styled, theme } from "../../lib/styles/stitches.config";
 import { themeColors } from "../../lib/config/themes";
 import type { ComponentProps } from "react";

@ -19,7 +19,7 @@ const Default = styled("main", {
 });

 const Container = styled("div", {
-  maxWidth: "865px",
+  maxWidth: theme.sizes.maxLayoutWidth,
  margin: "0 auto",
  display: "block",
 });
--- a/components/Link/Link.tsx
+++ b/components/Link/Link.tsx
@ -1,10 +1,10 @@
 import NextLink from "next/link";
-import { styled } from "../../lib/styles/stitches.config";
+import { styled, theme } from "../../lib/styles/stitches.config";
 import { baseUrl } from "../../lib/config";
 import type { ComponentProps } from "react";

 const StyledLink = styled(NextLink, {
-  color: "$link",
+  color: theme.colors.link,
  textDecoration: "none",

  variants: {
@ -18,15 +18,15 @@ const StyledLink = styled(NextLink, {
        backgroundImage: `linear-gradient($$underlineColor, $$underlineColor)`,
        backgroundPosition: "0% 100%",
        backgroundRepeat: "no-repeat",
-        backgroundSize: "0% $borderWidths$underline",
+        backgroundSize: `0% ${theme.borderWidths.underline}`,
        paddingBottom: "0.2rem",

        "@media (prefers-reduced-motion: no-preference)": {
-          transition: "background-size $linkHover",
+          transition: `background-size ${theme.transitions.linkHover}`,
        },

        "&:hover": {
-          backgroundSize: "100% $borderWidths$underline",
+          backgroundSize: `100% ${theme.borderWidths.underline}`,
        },
      },
      false: {},
--- a/components/Loading/Loading.tsx
+++ b/components/Loading/Loading.tsx
@ -1,4 +1,4 @@
-import { styled, keyframes } from "../../lib/styles/stitches.config";
+import { styled, theme, keyframes } from "../../lib/styles/stitches.config";
 import type { ComponentProps } from "react";

 const pulse = keyframes({
@ -19,7 +19,7 @@ const Box = styled("div", {
  display: "inline-block",
  height: "100%",
  animation: `${pulse} 1.5s infinite ease-in-out both`,
-  backgroundColor: "$mediumLight",
+  backgroundColor: theme.colors.mediumLight,
 });

 export type LoadingProps = ComponentProps<typeof Wrapper> & {
--- a/components/MenuItem/MenuItem.tsx
+++ b/components/MenuItem/MenuItem.tsx
@ -1,9 +1,9 @@
 import Link from "../Link";
-import { styled } from "../../lib/styles/stitches.config";
+import { styled, theme } from "../../lib/styles/stitches.config";

 const MenuLink = styled(Link, {
  display: "inline-block",
-  color: "$mediumDark",
+  color: theme.colors.mediumDark,
  padding: "0.6em",

  variants: {
@ -11,12 +11,12 @@ const MenuLink = styled(Link, {
    current: {
      true: {
        marginBottom: "-0.2em",
-        borderBottom: "0.2em solid $linkUnderline",
+        borderBottom: `0.2em solid ${theme.colors.linkUnderline}`,
      },
      false: {
        "&:hover": {
          marginBottom: "-0.2em",
-          borderBottom: "0.2em solid $kindaLight",
+          borderBottom: `0.2em solid ${theme.colors.kindaLight}`,
        },
      },
    },
--- a/components/NoteMeta/NoteMeta.tsx
+++ b/components/NoteMeta/NoteMeta.tsx
@ -3,7 +3,7 @@ import Time from "../Time";
 import HitCounter from "../HitCounter";
 import NoteTitle from "../NoteTitle";
 import { DateIcon, TagIcon, EditIcon, ViewsIcon } from "../Icons";
-import { styled } from "../../lib/styles/stitches.config";
+import { styled, theme } from "../../lib/styles/stitches.config";
 import * as config from "../../lib/config";
 import type { NoteFrontMatter } from "../../types";

@ -13,7 +13,7 @@ const Wrapper = styled("div", {
  fontSize: "0.825em",
  lineHeight: 2.3,
  letterSpacing: "0.04em",
-  color: "$medium",
+  color: theme.colors.medium,
 });

 const MetaItem = styled("div", {
@ -46,7 +46,7 @@ const Tag = styled("span", {
  "&::before": {
    content: "\\0023", // cosmetically hashtagify tags
    paddingRight: "0.125em",
-    color: "$light",
+    color: theme.colors.light,
  },

  "&:last-of-type": {
--- a/components/NoteTitle/NoteTitle.tsx
+++ b/components/NoteTitle/NoteTitle.tsx
@ -1,5 +1,5 @@
 import Link from "../Link";
-import { styled } from "../../lib/styles/stitches.config";
+import { styled, theme } from "../../lib/styles/stitches.config";
 import type { ComponentProps } from "react";
 import type { NoteFrontMatter } from "../../types";

@ -19,7 +19,7 @@ const Title = styled("h1", {
 });

 const TitleLink = styled(Link, {
-  color: "$text",
+  color: theme.colors.text,
 });

 export type NoteTitleProps = Pick<NoteFrontMatter, "slug" | "title" | "htmlTitle"> & ComponentProps<typeof Title>;
--- a/components/NotesList/NotesList.tsx
+++ b/components/NotesList/NotesList.tsx
@ -1,6 +1,6 @@
 import Link from "../Link";
 import Time from "../Time";
-import { styled } from "../../lib/styles/stitches.config";
+import { styled, theme } from "../../lib/styles/stitches.config";
 import type { ReactElement } from "react";
 import type { NotesByYear } from "../../types";

@ -51,7 +51,7 @@ const Post = styled("li", {
 const PostDate = styled(Time, {
  width: "5.25em",
  flexShrink: 0,
-  color: "$medium",
+  color: theme.colors.medium,
 });

 export type NotesListProps = {
--- a/components/OctocatLink/OctocatLink.tsx
+++ b/components/OctocatLink/OctocatLink.tsx
@ -1,14 +1,14 @@
 import Link from "../Link";
 import { OctocatOcticon } from "../Icons";
-import { styled } from "../../lib/styles/stitches.config";
+import { styled, theme } from "../../lib/styles/stitches.config";
 import type { ComponentProps } from "react";

 const GitHubLink = styled(Link, {
  margin: "0 0.4em",
-  color: "$text",
+  color: theme.colors.text,

  "&:hover": {
-    color: "$link",
+    color: theme.colors.link,
  },
 });

--- a/components/PageTitle/PageTitle.tsx
+++ b/components/PageTitle/PageTitle.tsx
@ -1,6 +1,6 @@
 import { useRouter } from "next/router";
 import Link from "../Link";
-import { styled } from "../../lib/styles/stitches.config";
+import { styled, theme } from "../../lib/styles/stitches.config";
 import type { ComponentProps } from "react";

 const Title = styled("h1", {
@ -15,7 +15,7 @@ const Title = styled("h1", {
 });

 const TitleLink = styled(Link, {
-  color: "$text",
+  color: theme.colors.text,
 });

 export type PageTitleProps = ComponentProps<typeof Title>;
--- a/components/RepositoryCard/RepositoryCard.tsx
+++ b/components/RepositoryCard/RepositoryCard.tsx
@ -2,17 +2,17 @@ import commaNumber from "comma-number";
 import Link from "../Link";
 import RelativeTime from "../RelativeTime";
 import { StarOcticon, ForkOcticon } from "../Icons";
-import { styled } from "../../lib/styles/stitches.config";
+import { styled, theme } from "../../lib/styles/stitches.config";
 import type { Project } from "../../types";

 const Wrapper = styled("div", {
  width: "100%",
  padding: "1.2em 1.2em 0.8em 1.2em",
-  border: "1px solid $kindaLight",
-  borderRadius: "$rounded",
+  border: `1px solid ${theme.colors.kindaLight}`,
+  borderRadius: theme.radii.rounded,
  fontSize: "0.85em",
-  color: "$mediumDark",
-  transition: "border $fade",
+  color: theme.colors.mediumDark,
+  transition: `border ${theme.transitions.fade}`,
 });

 const Name = styled(Link, {
@ -36,14 +36,14 @@ const MetaItem = styled("div", {
  marginRight: "1.5em",
  fontSize: "0.875em",
  lineHeight: 2,
-  color: "$medium",
+  color: theme.colors.medium,
 });

 const MetaLink = styled(Link, {
  color: "inherit",

  "&:hover": {
-    color: "$link",
+    color: theme.colors.link,
  },
 });

--- a/components/Selfie/Selfie.tsx
+++ b/components/Selfie/Selfie.tsx
@ -1,16 +1,17 @@
 import Link from "../Link";
 import Image from "../Image";
-import { styled } from "../../lib/styles/stitches.config";
+import { styled, theme } from "../../lib/styles/stitches.config";
 import { authorName } from "../../lib/config";
 import type { ComponentProps } from "react";

 import selfieJpg from "../../public/static/images/selfie.jpg";

-const RoundedImage = styled(Image, {
+const CircleImage = styled(Image, {
  width: "50px",
  height: "50px",
-  border: "1px solid $light",
+  border: `1px solid ${theme.colors.light}`,
  borderRadius: "50%",
+  transition: `border ${theme.transitions.fade}`,

  "@medium": {
    width: "70px",
@ -22,14 +23,14 @@ const RoundedImage = styled(Image, {
 const SelfieLink = styled(Link, {
  display: "inline-flex",
  alignItems: "center",
-  color: "$mediumDark",
+  color: theme.colors.mediumDark,

  "&:hover": {
-    color: "$link",
+    color: theme.colors.link,

    "@medium": {
-      [`${RoundedImage}`]: {
-        borderColor: "$linkUnderline",
+      [`${CircleImage}`]: {
+        borderColor: theme.colors.linkUnderline,
      },
    },
  },
@ -51,15 +52,7 @@ export type SelfieProps = Omit<ComponentProps<typeof Link>, "href">;
 const Selfie = ({ ...rest }: SelfieProps) => {
  return (
    <SelfieLink href="/" rel="author" title={authorName} underline={false} {...rest}>
-      <RoundedImage
-        src={selfieJpg}
-        alt={`Photo of ${authorName}`}
-        width={50}
-        height={50}
-        quality={60}
-        inline
-        priority
-      />
+      <CircleImage src={selfieJpg} alt={`Photo of ${authorName}`} width={50} height={50} quality={60} inline priority />
      <Name>{authorName}</Name>
    </SelfieLink>
  );
--- a/components/SkipToContent/SkipToContent.tsx
+++ b/components/SkipToContent/SkipToContent.tsx
@ -1,4 +1,4 @@
-import { styled } from "../../lib/styles/stitches.config";
+import { styled, theme } from "../../lib/styles/stitches.config";

 const HiddenLink = styled("a", {
  // accessible invisibility stuff pulled from @reach/skip-nav:
@ -21,10 +21,10 @@ const HiddenLink = styled("a", {
    width: "auto",
    height: "auto",
    clip: "auto",
-    background: "$superDuperLight",
-    color: "$link",
-    border: "2px solid $kindaLight",
-    borderRadius: "$rounded",
+    background: theme.colors.superDuperLight,
+    color: theme.colors.link,
+    border: `2px solid ${theme.colors.kindaLight}`,
+    borderRadius: theme.radii.rounded,
    textDecoration: "underline",
  },
 });
--- a/components/ThemeToggle/ThemeToggle.tsx
+++ b/components/ThemeToggle/ThemeToggle.tsx
@ -3,7 +3,7 @@ import { useFirstMountState, useMedia } from "react-use";
 import { useSpring, animated, Globals } from "@react-spring/web";
 import { useTheme } from "../../hooks/use-theme";
 import { useHasMounted } from "../../hooks/use-has-mounted";
-import { styled } from "../../lib/styles/stitches.config";
+import { styled, theme } from "../../lib/styles/stitches.config";

 const Button = styled("button", {
  border: 0,
@ -11,10 +11,10 @@ const Button = styled("button", {
  marginRight: "-0.6em",
  background: "none",
  cursor: "pointer",
-  color: "$mediumDark",
+  color: theme.colors.mediumDark,

  "&:hover": {
-    color: "$warning",
+    color: theme.colors.warning,
  },
 });

--- a/components/Ukraine/Ukraine.tsx
+++ b/components/Ukraine/Ukraine.tsx
@ -1,59 +0,0 @@
-import { styled } from "../../lib/styles/stitches.config";
-import type { ComponentProps } from "react";
-
-const Banner = styled("div", {
-  backgroundColor: "$backgroundInner",
-  borderBottom: "1px solid $kindaLight",
-
-  // light-dark theme switch fading
-  transition: "background 0.25s ease, border 0.25s ease",
-
-  "@medium": {
-    fontSize: "0.9em",
-  },
-});
-
-const Text = styled("span", {});
-
-const Link = styled("a", {
-  display: "block",
-  width: "100%",
-  padding: "0.5em 0",
-  color: "$text",
-  fontWeight: 500,
-  letterSpacing: "0.025em",
-  textAlign: "center",
-  textDecoration: "none",
-
-  "&:hover": {
-    [`& ${Text}`]: {
-      color: "transparent",
-      // blue to yellow gradient:
-      // https://www.joshwcomeau.com/gradient-generator?colors=465ea2|facc15&angle=90&colorMode=lrgb&precision=1&easingCurve=0.34871381110583766|1.05|0.4604935927859516|0.8607688656858092
-      backgroundImage:
-        "linear-gradient(90deg, hsl(224deg 40% 45%) 18%, hsl(38deg 32% 59%) 68%, hsl(48deg 96% 53%) 100%)",
-      backgroundClip: "text",
-    },
-  },
-});
-
-const Flag = styled("span", {
-  marginRight: "0.4em",
-  fontSize: "1.75em",
-  verticalAlign: "-0.15em",
-});
-
-export type HeadingProps = ComponentProps<typeof Banner>;
-
-const Ukraine = ({ ...rest }) => {
-  return (
-    <Banner {...rest}>
-      <Link href="https://helpukrainewin.org/" target="_blank" rel="noopener noreferrer">
-        <Flag>🇺🇦</Flag>
-        <Text>#StandWithUkraine</Text>
-      </Link>
-    </Banner>
-  );
-};
-
-export default Ukraine;
--- a/components/Ukraine/index.ts
+++ b/components/Ukraine/index.ts
@ -1,2 +0,0 @@
-export * from "./Ukraine";
-export { default } from "./Ukraine";
--- a/components/Video/Video.tsx
+++ b/components/Video/Video.tsx
@ -1,6 +1,6 @@
 import ReactPlayer from "react-player/file";
 import { useHasMounted } from "../../hooks/use-has-mounted";
-import { styled } from "../../lib/styles/stitches.config";
+import { styled, theme } from "../../lib/styles/stitches.config";
 import type { FilePlayerProps } from "react-player/file";

 const Wrapper = styled("div", {
@ -14,7 +14,7 @@ const Player = styled(ReactPlayer, {
  left: 0,

  "& video": {
-    borderRadius: "$rounded",
+    borderRadius: theme.radii.rounded,
  },
 });

--- a/components/YouTubeEmbed/YouTubeEmbed.tsx
+++ b/components/YouTubeEmbed/YouTubeEmbed.tsx
@ -1,6 +1,6 @@
 import ReactPlayer from "react-player/youtube";
 import { useHasMounted } from "../../hooks/use-has-mounted";
-import { styled } from "../../lib/styles/stitches.config";
+import { styled, theme } from "../../lib/styles/stitches.config";
 import type { YouTubePlayerProps } from "react-player/youtube";

 const Wrapper = styled("div", {
@ -15,7 +15,7 @@ const Player = styled(ReactPlayer, {

  // target both the lazy thumbnail preview *and* the actual YouTube embed
  "& .react-player__preview, & iframe": {
-    borderRadius: "$rounded",
+    borderRadius: theme.radii.rounded,
  },
 });

--- a/lib/styles/stitches.config.ts
+++ b/lib/styles/stitches.config.ts
@ -7,7 +7,7 @@ import normalizeStyles from "./helpers/normalize";
 // web fonts
 import { Inter, RobotoMono } from "./fonts";

-export const { styled, css, getCssText, globalCss, keyframes, createTheme, theme } = createStitches({
+export const { styled, css, getCssText, globalCss, keyframes, createTheme, theme, config } = createStitches({
  theme: {
    fonts: {
      sans: `"${Inter.name.regular}", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif`,
@ -48,6 +48,10 @@ export const { styled, css, getCssText, globalCss, keyframes, createTheme, theme
      codeDeletion: "#ff1b1b",
    },

+    sizes: {
+      maxLayoutWidth: "865px",
+    },
+
    borderWidths: {
      // underline height is based on link's font size
      underline: "calc(0.1em + 0.05rem)",
@ -75,7 +79,7 @@ export const { styled, css, getCssText, globalCss, keyframes, createTheme, theme

  utils: {
    setUnderlineVars: ({
-      color = "$colors$linkUnderline", // see theme values below
+      color = "$colors$linkUnderline", // see theme tokens above
      alpha = 0.4,
    }) => ({
      // allow both pre-set rgba stitches variables and hex values
@ -125,24 +129,24 @@ export const globalStyles = globalCss(
    "@font-face": [...Inter.family, ...RobotoMono.family],

    body: {
-      fontFamily: "$sans",
-      backgroundColor: "$backgroundInner",
-      transition: "background $fade",
+      fontFamily: theme.fonts.sans,
+      backgroundColor: theme.colors.backgroundInner,
+      transition: `background ${theme.transitions.fade}`,
    },

    "code, kbd, samp, pre": {
-      fontFamily: "$mono",
+      fontFamily: theme.fonts.mono,
    },

    // variable font support?
    "@supports (font-variation-settings: normal)": {
      body: {
-        fontFamily: "$sansVar",
+        fontFamily: theme.fonts.sansVar,
        fontOpticalSizing: "auto",
      },

      "code, kbd, samp, pre": {
-        fontFamily: "$monoVar",
+        fontFamily: theme.fonts.monoVar,
      },

      // Chrome doesn't automatically slant multi-axis Inter var, for some reason.
--- a/pages/404.tsx
+++ b/pages/404.tsx
@ -1,7 +1,7 @@
 import { NextSeo } from "next-seo";
 import Image from "../components/Image";
 import Link from "../components/Link";
-import { styled } from "../lib/styles/stitches.config";
+import { styled, theme } from "../lib/styles/stitches.config";

 import pandaGif from "../public/static/images/angry-panda.gif";

@ -12,7 +12,7 @@ const Center = styled("div", {
 const H1 = styled("h1", {
  fontSize: "1.8em",
  fontWeight: 500,
-  color: "$text",
+  color: theme.colors.text,

  "@medium": {
    fontSize: "1.6em",
--- a/pages/hillary.tsx
+++ b/pages/hillary.tsx
@ -3,7 +3,7 @@ import Content from "../components/Content";
 import PageTitle from "../components/PageTitle";
 import Link from "../components/Link";
 import Video from "../components/Video";
-import { styled } from "../lib/styles/stitches.config";
+import { styled, theme } from "../lib/styles/stitches.config";

 import thumbnail from "../public/static/images/hillary/thumb.png";

@ -12,7 +12,7 @@ const Copyright = styled("p", {
  fontSize: "0.9em",
  lineHeight: 1.8,
  margin: "1.25em 1em 0 1em",
-  color: "$mediumLight",
+  color: theme.colors.mediumLight,
 });

 const Hillary = () => {
--- a/pages/index.tsx
+++ b/pages/index.tsx
@ -1,5 +1,5 @@
 import Link, { LinkProps } from "../components/Link";
-import { styled, keyframes, darkTheme } from "../lib/styles/stitches.config";
+import { styled, theme, darkTheme, keyframes } from "../lib/styles/stitches.config";

 const ColorfulLink = ({
  lightColor,
@ -33,7 +33,7 @@ const H1 = styled("h1", {
  fontSize: "1.8em",
  fontWeight: 500,
  lineHeight: 1.1,
-  color: "$text",
+  color: theme.colors.text,

  "@medium": {
    fontSize: "1.6em",
@ -45,7 +45,7 @@ const H2 = styled("h2", {
  fontSize: "1.35em",
  fontWeight: 400,
  lineHeight: 1.4,
-  color: "$text",
+  color: theme.colors.text,

  "@medium": {
    fontSize: "1.25em",
@ -55,7 +55,7 @@ const H2 = styled("h2", {
 const Paragraph = styled("p", {
  margin: "0.85em 0",
  lineHeight: 1.7,
-  color: "$text",
+  color: theme.colors.text,

  "&:last-of-type": {
    marginBottom: 0,
@ -100,7 +100,7 @@ const PGPKey = styled("code", {
 });

 const Quiet = styled("span", {
-  color: "$mediumLight",
+  color: theme.colors.mediumLight,
 });

 const EasterEgg = styled(ColorfulLink, {
--- a/pages/leo.tsx
+++ b/pages/leo.tsx
@ -3,7 +3,7 @@ import Content from "../components/Content";
 import PageTitle from "../components/PageTitle";
 import Link from "../components/Link";
 import Video from "../components/Video";
-import { styled } from "../lib/styles/stitches.config";
+import { styled, theme } from "../lib/styles/stitches.config";

 import thumbnail from "../public/static/images/leo/thumb.png";

@ -12,7 +12,7 @@ const Copyright = styled("p", {
  fontSize: "0.9em",
  lineHeight: 1.8,
  margin: "1.25em 1em 0 1em",
-  color: "$mediumLight",
+  color: theme.colors.mediumLight,
 });

 const Leo = () => {
--- a/pages/previously.tsx
+++ b/pages/previously.tsx
@ -12,7 +12,7 @@ import IFrame from "../components/IFrame";
 import CodeInline from "../components/CodeInline";
 import HorizontalRule from "../components/HorizontalRule";
 import { Windows95Logo } from "../components/Icons";
-import { styled, globalCss } from "../lib/styles/stitches.config";
+import { styled, theme, globalCss } from "../lib/styles/stitches.config";
 import { ComicNeue } from "../lib/styles/fonts";
 import type { ReactElement } from "react";

@ -37,7 +37,7 @@ const ScreenShot = styled(Figure, {
  "& figcaption": {
    fontSize: "0.9em",
    lineHeight: 1.5,
-    color: "$medium",
+    color: theme.colors.medium,
  },
 });

--- a/pages/projects.tsx
+++ b/pages/projects.tsx
@ -5,7 +5,7 @@ import PageTitle from "../components/PageTitle";
 import Link from "../components/Link";
 import RepositoryCard from "../components/RepositoryCard";
 import { OctocatOcticon } from "../components/Icons";
-import { styled } from "../lib/styles/stitches.config";
+import { styled, theme } from "../lib/styles/stitches.config";
 import { authorSocial } from "../lib/config";
 import type { GetStaticProps, InferGetStaticPropsType } from "next";
 import type { User, Repository } from "@octokit/graphql-schema";
@ -39,7 +39,7 @@ const GitHubLogo = styled(OctocatOcticon, {
  height: "1.2em",
  verticalAlign: "-0.2em",
  margin: "0 0.15em",
-  fill: "$text",
+  fill: theme.colors.text,
 });

 const Projects = ({ repos }: InferGetStaticPropsType<typeof getStaticProps>) => {
--- a/pages/stats.tsx
+++ b/pages/stats.tsx
@ -4,7 +4,7 @@ import PageTitle from "../components/PageTitle";
 import Link from "../components/Link";
 import IFrame from "../components/IFrame";
 import { FathomLogo } from "../components/Icons";
-import { styled } from "../lib/styles/stitches.config";
+import { styled, theme } from "../lib/styles/stitches.config";
 import { fathomSiteId, siteDomain } from "../lib/config";

 const PoweredBy = styled("p", {
@ -18,7 +18,7 @@ const FathomIcon = styled(FathomLogo, {
  height: "1.2em",
  verticalAlign: "-0.2em",
  margin: "0 0.15em",
-  fill: "$text",
+  fill: theme.colors.text,
 });

 const Stats = () => {
--- a/pages/y2k.tsx
+++ b/pages/y2k.tsx
@ -76,6 +76,17 @@ const Y2K = () => {
        }}
      />

+      <noscript>
+        <Terminal
+          css={{
+            height: "250px",
+            width: "600px",
+          }}
+        >
+          JavaScript must be enabled to experience Y2K!
+        </Terminal>
+      </noscript>
+
      <ErrorBoundary
        fallback={
          <Terminal