refactor component styles to use type-safe stitches tokens

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

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