fix stitches variable conflicts

components/Link/Link.tsx

@@ -13,12 +13,15 @@ const StyledLink = styled(NextLink, {
       // fancy animated link underline effect (on by default)
       true: {
         // sets psuedo linear-gradient() for the underline's color; see stitches config for the weird calculation behind
-        // the local `$$underline` variable.
-        setUnderlineVar: { color: "$colors$linkUnderline" },
-        backgroundImage: `linear-gradient($$underline, $$underline)`,
+        // the local `$$underlineColor` variable.
+        setUnderlineVars: {},
+        // underline height is based on link's font size
+        $$underlineSize: "calc(0.1em + 0.05rem)",
+
+        backgroundImage: `linear-gradient($$underlineColor, $$underlineColor)`,
         backgroundPosition: "0% 100%",
         backgroundRepeat: "no-repeat",
-        backgroundSize: "0% $underline",
+        backgroundSize: "0% $$underlineSize",
         paddingBottom: "0.2rem",
 
         "@media (prefers-reduced-motion: no-preference)": {
@@ -26,7 +29,7 @@ const StyledLink = styled(NextLink, {
         },
 
         "&:hover": {
-          backgroundSize: "100% $underline",
+          backgroundSize: "100% $$underlineSize",
         },
       },
       false: {},

lib/styles/stitches.config.ts

@@ -1,4 +1,4 @@
-import { createStitches, defaultThemeMap } from "@stitches/react";
+import { createStitches } from "@stitches/react";
 
 // modified modern-normalize.css in object form:
 // https://github.com/jakejarvis/stitches-normalize/blob/main/src/index.ts
@@ -51,10 +51,6 @@ export const { styled, css, getCssText, globalCss, keyframes, createTheme, theme
       codeDeletion: "#ff1b1b",
     },
 
-    borderWidths: {
-      underline: "calc(0.1em + 0.05rem)",
-    },
-
     radii: {
       rounded: "0.65em",
     },
@@ -65,20 +61,18 @@ export const { styled, css, getCssText, globalCss, keyframes, createTheme, theme
     medium: "(max-width: 768px)",
     // used rarely only for SUPER narrow windows:
     small: "(max-width: 380px)",
-    // ...note: things then COMPLETELY break at 300px.
+    // ...note: things then COMPLETELY break at 300px. but it's 2022 let's be real.
   },
 
   utils: {
-    setUnderlineVar: ({ color, alpha = 0.4 }) => ({
+    setUnderlineVars: ({
+      color = "$colors$linkUnderline", // see theme values below
+      alpha = 0.4,
+    }) => ({
       // allow both pre-set rgba stitches variables and hex values
-      $$underline: color.startsWith("#") ? hexToRgba(color, alpha) : color,
+      $$underlineColor: color.startsWith("#") ? hexToRgba(color, alpha) : color,
     }),
   },
-
-  themeMap: {
-    ...defaultThemeMap,
-    backgroundSize: "borderWidths",
-  },
 });
 
 export const darkTheme = createTheme({

pages/index.tsx

@@ -14,11 +14,11 @@ const ColorfulLink = ({
     <Link
       css={{
         color: lightColor,
-        setUnderlineVar: { color: lightColor },
+        setUnderlineVars: { color: lightColor },
 
         [`.${darkTheme} &`]: {
           color: darkColor,
-          setUnderlineVar: { color: darkColor },
+          setUnderlineVars: { color: darkColor },
         },
 
         ...css,

pages/y2k.tsx

@@ -31,7 +31,7 @@ const DOS = styled(Terminal, {
   maxWidth: "700px",
 });
 
-const Wrapper = ({ style, ...rest }: ComponentProps<typeof Wrapper>) => {
+const RandomWallpaper = ({ style, ...rest }: ComponentProps<typeof Wallpaper>) => {
   const [wallpaperUrl, setWallpaperUrl] = useState("");
 
   // set a random retro Windows ME desktop tile for the entire content area
@@ -101,7 +101,7 @@ Y2K.getLayout = (page: ReactElement) => {
         },
       }}
     >
-      <Wrapper>{page}</Wrapper>
+      <RandomWallpaper>{page}</RandomWallpaper>
     </Layout>
   );
 };