CSS modules ➡️ Stitches 🧵 (#799)

2026-04-21 12:25:31 -04:00 · 2022-03-03 09:18:26 -05:00
parent ac7ac71c10
commit c2dde042b7
93 changed files with 2392 additions and 3000 deletions
@@ -0,0 +1,184 @@
+import { createStitches, defaultThemeMap } from "@stitches/react";
+import hex2rgba from "./helpers/hex-to-rgba";
+
+// modified modern-normalize.css in object form
+import { normalizeCss } from "./helpers/normalize";
+
+// web fonts
+import { Inter, preloadUrl as interPreloadUrl } from "./fonts/inter";
+import { RobotoMono, preloadUrl as robotoMonoPreloadUrl } from "./fonts/roboto-mono";
+import { ComicNeue } from "./fonts/comic-neue";
+
+export const { styled, css, getCssText, globalCss, keyframes, theme, createTheme } = createStitches({
+  theme: {
+    fonts: {
+      sans: `Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif`,
+      sansVar: `"Inter var", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif`,
+      mono: `"Roboto Mono", ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier`,
+      monoVar: `"Roboto Mono var", ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier`,
+    },
+
+    colors: {
+      backgroundInner: "#ffffff",
+      backgroundOuter: "#fcfcfc",
+      backgroundHeader: "rgba(252, 252, 252, 0.7)",
+      text: "#202020",
+      mediumDark: "#515151",
+      medium: "#5e5e5e",
+      mediumLight: "#757575",
+      light: "#d2d2d2",
+      kindaLight: "#e3e3e3",
+      superLight: "#f4f4f4",
+      superDuperLight: "#fbfbfb",
+      link: "#0e6dc2",
+      linkUnderline: "rgba(14, 109, 194, 0.4)",
+      success: "#44a248",
+      error: "#ff1b1b",
+      warning: "#f78200",
+
+      // Syntax Highlighting (light) - modified from Monokai Light: https://github.com/mlgill/pygments-style-monokailight
+      codeText: "#313131",
+      codeBackground: "#fdfdfd",
+      codeComment: "#656e77",
+      codeKeyword: "#029cb9",
+      codeAttribute: "#70a800",
+      codeNamespace: "#f92672",
+      codeLiteral: "#ae81ff",
+      codePunctuation: "#111111",
+      codeVariable: "#d88200",
+      codeAddition: "#44a248",
+      codeDeletion: "#ff1b1b",
+    },
+
+    borderWidths: {
+      underline: "calc(0.1em + 0.05rem)",
+    },
+
+    radii: {
+      rounded: "0.65em",
+    },
+  },
+
+  media: {
+    mobile: "(max-width: 768px)",
+    superNarrow: "(max-width: 380px)",
+  },
+
+  utils: {
+    backgroundGradientHack: ({ color = "$linkUnderline" }) => {
+      // allow both pre-set rgba stitches variables and hex values
+      const rgba = color.startsWith("#") ? hex2rgba(color, 0.4) : color;
+
+      return {
+        backgroundImage: `linear-gradient(${rgba}, ${rgba})`,
+      };
+    },
+  },
+
+  themeMap: {
+    ...defaultThemeMap,
+    backgroundSize: "borderWidths",
+  },
+});
+
+export const darkTheme = createTheme({
+  colors: {
+    backgroundInner: "#1e1e1e",
+    backgroundOuter: "#252525",
+    backgroundHeader: "rgba(37, 37, 37, 0.85)",
+    text: "#f1f1f1",
+    mediumDark: "#d7d7d7",
+    medium: "#b1b1b1",
+    mediumLight: "#959595",
+    light: "#646464",
+    kindaLight: "#535353",
+    superLight: "#272727",
+    superDuperLight: "#1f1f1f",
+    link: "#88c7ff",
+    linkUnderline: "rgba(136, 199, 255, 0.4)",
+    success: "#78df55",
+    error: "#ff5151",
+    warning: "#f2b702",
+
+    // Syntax Highlighting (dark) - modified from Dracula: https://github.com/dracula/pygments
+    codeText: "#e4e4e4",
+    codeBackground: "#212121",
+    codeComment: "#929292",
+    codeKeyword: "#3b9dd2",
+    codeAttribute: "#78df55",
+    codeNamespace: "#f95757",
+    codeLiteral: "#d588fb",
+    codePunctuation: "#cccccc",
+    codeVariable: "#fd992a",
+    codeAddition: "#78df55",
+    codeDeletion: "#ff5151",
+  },
+});
+
+export const globalStyles = globalCss({
+  // https://github.com/sindresorhus/modern-normalize
+  ...normalizeCss,
+
+  // @ts-ignore
+  "@font-face": [...Inter, ...RobotoMono, ...ComicNeue],
+
+  body: {
+    margin: 0,
+    backgroundColor: "$backgroundInner",
+    fontFamily: "$sans",
+
+    // light-dark theme switch fading
+    transition: "background 0.25s ease",
+  },
+
+  "code, kbd, samp, pre": {
+    fontFamily: "$mono",
+  },
+
+  // variable font support
+  "@supports (font-variation-settings: normal)": {
+    body: {
+      fontFamily: "$sansVar",
+      fontOpticalSizing: "auto",
+    },
+
+    "code, kbd, samp, pre": {
+      fontFamily: "$monoVar",
+    },
+
+    // Chrome doesn't automatically slant multi-axis Inter var, for some reason.
+    // Adding "slnt" -10 fixes Chrome but then over-italicizes in Firefox. AHHHHHHHHHH.
+    em: {
+      fontStyle: "normal",
+      fontVariationSettings: `"ital" 1, "slnt" -10`,
+
+      // Roboto Mono doesn't have this problem, but the above fix breaks it, of course.
+      "& code, & kbd, & samp, & pre": {
+        fontStyle: "italic !important",
+        fontVariationSettings: "initial !important",
+      },
+    },
+  },
+
+  // reduced motion preference:
+  // https://web.dev/prefers-reduced-motion/#(bonus)-forcing-reduced-motion-on-all-websites
+  "@media (prefers-reduced-motion: reduce)": {
+    "*, ::before, ::after": {
+      animationDelay: "-1ms !important",
+      animationDuration: "1ms !important",
+      animationIterationCount: "1 !important",
+      backgroundAttachment: "initial !important",
+      scrollBehavior: "auto !important",
+      transitionDuration: "0s !important",
+      transitionDelay: "0s !important",
+    },
+  },
+});
+
+// re-export hashed URLs of the most important variable fonts so we can preload them in ../../pages/_document.tsx
+export const preloads = {
+  fonts: {
+    InterVar: interPreloadUrl,
+    RobotoMonoVar: robotoMonoPreloadUrl,
+  },
+};