type-safe stitches util for fancy link underline color

components/Link/Link.tsx

@@ -1,6 +1,6 @@
 import NextLink from "next/link";
 import objStr from "obj-str";
-import { styled, theme } from "../../lib/styles/stitches.config";
+import { styled, theme, stitchesConfig } from "../../lib/styles/stitches.config";
 import { baseUrl } from "../../lib/config";
 import type { ComponentProps } from "react";
 
@@ -14,20 +14,20 @@ const StyledLink = styled(NextLink, {
       true: {
         // sets psuedo linear-gradient() for the underline's color; see stitches config for the weird calculation behind
         // the local `$$underlineColor` variable.
-        setUnderlineVars: {},
+        ...stitchesConfig.utils.setUnderlineColor({ color: "$colors$linkUnderline" }),
 
-        backgroundImage: `linear-gradient($$underlineColor, $$underlineColor)`,
+        backgroundImage: "linear-gradient($$underlineColor, $$underlineColor)",
         backgroundPosition: "0% 100%",
         backgroundRepeat: "no-repeat",
-        backgroundSize: `0% ${theme.borderWidths.underline}`,
+        backgroundSize: "0% 2px",
-        paddingBottom: "0.2rem",
+        paddingBottom: "3px",
 
         "@media (prefers-reduced-motion: no-preference)": {
           transition: `background-size ${theme.transitions.linkHover}`,
         },
 
         "&:hover, &:focus-visible": {
-          backgroundSize: `100% ${theme.borderWidths.underline}`,
+          backgroundSize: "100% 2px",
         },
       },
       false: {},

lib/styles/stitches.config.ts

@@ -9,9 +9,18 @@ import normalizeStyles from "./utils/normalize";
 import { Inter, RobotoMono } from "./fonts";
 
 // https://stitches.dev/docs/typescript#type-a-css-object
-export type CSS = Stitches.CSS<typeof config>;
+export type CSS = Stitches.CSS<typeof stitchesConfig>;
 
-export const { styled, css, getCssText, globalCss, keyframes, createTheme, theme, config } = createStitches({
+export const {
+  styled,
+  css,
+  getCssText,
+  globalCss,
+  keyframes,
+  createTheme,
+  theme,
+  config: stitchesConfig,
+} = createStitches({
   theme: {
     fonts: {
       sans: `"${Inter.name.regular}", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif`,
@@ -56,11 +65,6 @@ export const { styled, css, getCssText, globalCss, keyframes, createTheme, theme
       maxLayoutWidth: "865px",
     },
 
-    borderWidths: {
-      // underline height is based on link's font size
-      underline: "calc(0.1em + 0.05rem)",
-    },
-
     radii: {
       corner: "0.6rem",
     },
@@ -82,9 +86,13 @@ export const { styled, css, getCssText, globalCss, keyframes, createTheme, theme
   },
 
   utils: {
-    setUnderlineVars: ({
+    // sets locally scoped css variable for both light and dark themes' link hover underlines
-      color = "$colors$linkUnderline", // see theme tokens above
+    setUnderlineColor: ({
+      color,
       alpha = 0.4,
+    }: {
+      color: string; // hex value or one of theme tokens above in stitches `$colors$token` format
+      alpha?: number;
     }) => ({
       // allow both pre-set rgba stitches variables and hex values
       $$underlineColor: color.startsWith("#") ? hexToRgba(color, alpha) : color,

pages/index.tsx

@@ -1,5 +1,5 @@
 import Link, { LinkProps } from "../components/Link";
-import { styled, theme, darkTheme, keyframes } from "../lib/styles/stitches.config";
+import { styled, theme, darkTheme, keyframes, stitchesConfig } from "../lib/styles/stitches.config";
 
 const ColorfulLink = ({
   lightColor,
@@ -14,11 +14,11 @@ const ColorfulLink = ({
     <Link
       css={{
         color: lightColor,
-        setUnderlineVars: { color: lightColor },
+        ...stitchesConfig.utils.setUnderlineColor({ color: lightColor }),
 
         [`.${darkTheme} &`]: {
           color: darkColor,
-          setUnderlineVars: { color: darkColor },
+          ...stitchesConfig.utils.setUnderlineColor({ color: darkColor }),
         },
 
         ...css,