stitches config

components/Code/Code.tsx

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

components/CodeBlock/CodeBlock.tsx

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

components/ContactForm/ContactForm.tsx

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

components/Footer/Footer.tsx

@@ -10,9 +10,7 @@ const Wrapper = styled("footer", {
   borderTop: "1px solid $kindaLight",
   backgroundColor: "$backgroundOuter",
   color: "$mediumDark",
-
-  // light-dark theme switch fading
-  transition: "background 0.25s ease, border 0.25s ease",
+  transition: "background $fade, border $fade",
 
   "@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",
-
-  // light-dark theme switch fading
-  transition: "border 0.25s ease",
+  transition: "border $fade",
 });
 
 const Name = styled(Link, {