refactor component styles to use type-safe stitches tokens

https://stitches.dev/docs/typescript#stricter-experience

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",
+  borderLeft: `0.25em solid ${theme.colors.link}`,
-  color: "$mediumDark",
+  color: theme.colors.mediumDark,
 });
 
 export default Blockquote;

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",
+  backgroundColor: theme.colors.codeBackground,
-  border: "1px solid $kindaLight",
+  border: `1px solid ${theme.colors.kindaLight}`,
-  borderRadius: "$rounded",
+  borderRadius: theme.radii.rounded,
-  transition: "background $fade, border $fade",
+  transition: `background ${theme.transitions.fade}, border ${theme.transitions.fade}`,
 });
 
 export default Code;

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",
+  backgroundColor: theme.colors.backgroundInner,
-  border: "1px solid $kindaLight",
+  border: `1px solid ${theme.colors.kindaLight}`,
-  borderTopRightRadius: "$rounded",
+  borderTopRightRadius: theme.radii.rounded,
-  borderBottomLeftRadius: "$rounded",
+  borderBottomLeftRadius: theme.radii.rounded,
-  transition: "background $fade, border $fade",
+  transition: `background ${theme.transitions.fade}, border ${theme.transitions.fade}`,
 });
 
 export type CodeBlockProps = ComponentProps<typeof Code> & {

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",
 });
 

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",
+  border: `2px solid ${theme.colors.light}`,
-  borderRadius: "$rounded",
+  borderRadius: theme.radii.rounded,
-  color: "$text",
+  color: theme.colors.text,
-  backgroundColor: "$superDuperLight",
+  backgroundColor: theme.colors.superDuperLight,
-  transition: "background $fade",
+  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",
+  color: theme.colors.text,
-  backgroundColor: "$kindaLight",
+  backgroundColor: theme.colors.kindaLight,
 
   "&:hover": {
-    color: "$superDuperLight",
+    color: theme.colors.superDuperLight,
-    backgroundColor: "$link",
+    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,
       },
     },
 

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",

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,
         },
       },
     },

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",
 });
 

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",
+  borderTop: `1px solid ${theme.colors.kindaLight}`,
-  backgroundColor: "$backgroundOuter",
+  backgroundColor: theme.colors.backgroundOuter,
-  color: "$mediumDark",
+  color: theme.colors.mediumDark,
-  transition: "background $fade, border $fade",
+  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({

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",
+  borderBottom: `1px solid ${theme.colors.kindaLight}`,
-  backgroundColor: "$backgroundHeader",
+  backgroundColor: theme.colors.backgroundHeader,
-  transition: "background $fade, border $fade",
+  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",
 });
 

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: {},
     },

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;

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",
+  border: `2px solid ${theme.colors.kindaLight}`,
-  borderRadius: "$rounded",
+  borderRadius: theme.radii.rounded,
 });
 
 export type IFrameProps = ComponentProps<typeof RoundedIFrame> & {

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> & {

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",
 });

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: {},

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> & {

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}`,
         },
       },
     },

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": {

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

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 = {

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,
   },
 });
 

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

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",
+  border: `1px solid ${theme.colors.kindaLight}`,
-  borderRadius: "$rounded",
+  borderRadius: theme.radii.rounded,
   fontSize: "0.85em",
-  color: "$mediumDark",
+  color: theme.colors.mediumDark,
-  transition: "border $fade",
+  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,
   },
 });
 

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}`]: {
+      [`${CircleImage}`]: {
-        borderColor: "$linkUnderline",
+        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
+      <CircleImage src={selfieJpg} alt={`Photo of ${authorName}`} width={50} height={50} quality={60} inline priority />
-        src={selfieJpg}
-        alt={`Photo of ${authorName}`}
-        width={50}
-        height={50}
-        quality={60}
-        inline
-        priority
-      />
       <Name>{authorName}</Name>
     </SelfieLink>
   );

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",
+    background: theme.colors.superDuperLight,
-    color: "$link",
+    color: theme.colors.link,
-    border: "2px solid $kindaLight",
+    border: `2px solid ${theme.colors.kindaLight}`,
-    borderRadius: "$rounded",
+    borderRadius: theme.radii.rounded,
     textDecoration: "underline",
   },
 });

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,
   },
 });
 

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;

components/Ukraine/index.ts

@@ -1,2 +0,0 @@
-export * from "./Ukraine";
-export { default } from "./Ukraine";

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,
   },
 });
 

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,
   },
 });
 

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",
+      fontFamily: theme.fonts.sans,
-      backgroundColor: "$backgroundInner",
+      backgroundColor: theme.colors.backgroundInner,
-      transition: "background $fade",
+      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.

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",

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 = () => {

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, {

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 = () => {

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,
   },
 });
 

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>) => {

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 = () => {

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