stitches config

components/Code/Code.tsx

@@ -5,9 +5,7 @@ const Code = styled("code", {
   backgroundColor: "$codeBackground",
   border: "1px solid $kindaLight",
   borderRadius: "$rounded",
-
+  transition: "background $fade, border $fade",
-  // light-dark theme switch fading
-  transition: "background 0.25s ease, border 0.25s ease",
 });
 
 export default Code;

components/CodeBlock/CodeBlock.tsx

@@ -83,9 +83,7 @@ const CornerCopyButton = styled(CopyButton, {
   border: "1px solid $kindaLight",
   borderTopRightRadius: "$rounded",
   borderBottomLeftRadius: "$rounded",
-
+  transition: "background $fade, border $fade",
-  // light-dark theme switch fading
-  transition: "background 0.25s ease, border 0.25s ease",
 });
 
 export type CodeBlockProps = ComponentProps<typeof Code> & {

components/ContactForm/ContactForm.tsx

@@ -16,9 +16,7 @@ const InputStyles = css({
   borderRadius: "$rounded",
   color: "$text",
   backgroundColor: "$superDuperLight",
-
+  transition: "background $fade",
-  // light-dark theme switch fading
-  transition: "background 0.25s ease",
 
   "&:focus": {
     outline: "none",

components/Footer/Footer.tsx

@@ -10,9 +10,7 @@ const Wrapper = styled("footer", {
   borderTop: "1px solid $kindaLight",
   backgroundColor: "$backgroundOuter",
   color: "$mediumDark",
-
+  transition: "background $fade, border $fade",
-  // light-dark theme switch fading
-  transition: "background 0.25s ease, border 0.25s ease",
 
   "@medium": {
     padding: "1em 1.25em",

components/Header/Header.tsx

@@ -9,13 +9,11 @@ const Wrapper = styled("header", {
   padding: "0.7em 1.5em",
   borderBottom: "1px solid $kindaLight",
   backgroundColor: "$backgroundHeader",
+  transition: "background $fade, border $fade",
+  zIndex: 9999,
 
   // blurry glass-like background effect (except on firefox...?)
   backdropFilter: "saturate(180%) blur(5px)",
-  zIndex: 9999,
-
-  // light-dark theme switch fading
-  transition: "background 0.25s ease, border 0.25s ease",
 
   "@medium": {
     padding: "0.75em 1.25em",

components/Link/Link.tsx

@@ -14,21 +14,19 @@ const StyledLink = styled(NextLink, {
         // sets psuedo linear-gradient() for the underline's color; see stitches config for the weird calculation behind
         // 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% $$underlineSize",
+        backgroundSize: "0% $borderWidths$underline",
         paddingBottom: "0.2rem",
 
         "@media (prefers-reduced-motion: no-preference)": {
-          transition: "background-size 0.25s ease-in-out",
+          transition: "background-size $linkHover",
         },
 
         "&:hover": {
-          backgroundSize: "100% $$underlineSize",
+          backgroundSize: "100% $borderWidths$underline",
         },
       },
       false: {},

components/RepositoryCard/RepositoryCard.tsx

@@ -12,9 +12,7 @@ const Wrapper = styled("div", {
   borderRadius: "$rounded",
   fontSize: "0.85em",
   color: "$mediumDark",
-
+  transition: "border $fade",
-  // light-dark theme switch fading
-  transition: "border 0.25s ease",
 });
 
 const Name = styled(Link, {

lib/styles/stitches.config.ts

@@ -48,9 +48,21 @@ export const { styled, css, getCssText, globalCss, keyframes, createTheme, theme
       codeDeletion: "#ff1b1b",
     },
 
+    borderWidths: {
+      // underline height is based on link's font size
+      underline: "calc(0.1em + 0.05rem)",
+    },
+
     radii: {
       rounded: "0.65em",
     },
+
+    transitions: {
+      // light <-> dark theme fade duration
+      fade: "0.25s ease",
+      // fancy underline animation
+      linkHover: "0.2s ease-in-out",
+    },
   },
 
   media: {
@@ -113,11 +125,9 @@ export const globalStyles = globalCss(
     "@font-face": [...Inter.family, ...RobotoMono.family],
 
     body: {
-      backgroundColor: "$backgroundInner",
       fontFamily: "$sans",
-
+      backgroundColor: "$backgroundInner",
-      // light-dark theme switch fading
+      transition: "background $fade",
-      transition: "background 0.25s ease",
     },
 
     "code, kbd, samp, pre": {