use camelCase in themes config

2025-04-26 12:58:28 -04:00 · 2022-02-28 20:07:27 -05:00 · 2022-02-28 20:07:27 -05:00 · 33c02d205e
commit 33c02d205e
parent 324a15aa6a
5 changed files with 64 additions and 52 deletions
--- a/components/Layout/Layout.tsx
+++ b/components/Layout/Layout.tsx
@ -3,7 +3,7 @@ import { useTheme } from "next-themes";
 import classNames from "classnames";
 import Header from "../Header/Header";
 import Footer from "../Footer/Footer";
-import themes, { toCSS } from "../../lib/config/themes";
+import themes from "../../lib/config/themes";

 import styles from "./Layout.module.css";

@ -18,16 +18,8 @@ const Layout = ({ container = true, stickyHeader = true, className, children, ..
  return (
    <>
      <Head>
-        {/* convert themes object into inlined css variables */}
-        <style
-          id="theme-colors"
-          dangerouslySetInnerHTML={{
-            __html: `:root{${toCSS(themes.light)}}[data-theme="dark"]{${toCSS(themes.dark)}}`,
-          }}
-        />
-
        {/* dynamically set browser theme color to match the background color; default to light for SSR */}
-        <meta name="theme-color" content={themes[resolvedTheme || "light"]["background-outer"]} />
+        <meta name="theme-color" content={themes[resolvedTheme || "light"].backgroundOuter} />
      </Head>

      <div className={classNames(styles.flex, className)} {...rest}>
--- a/lib/config/themes.ts
+++ b/lib/config/themes.ts
@ -1,74 +1,79 @@
+import decamelize from "decamelize";
+
 // Light/dark theme-related CSS variables that are inlined in Layout.tsx and become available globally.
 // TODO: Probably invert the object so that *each variable* has a light and dark key.
 const themes = {
  light: {
-    "background-inner": "#ffffff",
-    "background-outer": "#fcfcfc",
-    "background-header": "rgba(252, 252, 252, 0.7)",
+    backgroundInner: "#ffffff",
+    backgroundOuter: "#fcfcfc",
+    backgroundHeader: "rgba(252, 252, 252, 0.7)",
    text: "#202020",
-    "medium-dark": "#515151",
+    mediumDark: "#515151",
    medium: "#5e5e5e",
-    "medium-light": "#757575",
+    mediumLight: "#757575",
    light: "#d2d2d2",
-    "kinda-light": "#e3e3e3",
-    "super-light": "#f4f4f4",
-    "super-duper-light": "#fbfbfb",
+    kindaLight: "#e3e3e3",
+    superLight: "#f4f4f4",
+    superDuperLight: "#fbfbfb",
    link: "#0e6dc2",
-    "link-underline": "rgba(14, 109, 194, 0.4)",
+    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
-    "code-text": "#313131",
-    "code-background": "#fdfdfd",
-    "code-comment": "#656e77",
-    "code-keyword": "#029cb9",
-    "code-attribute": "#70a800",
-    "code-namespace": "#f92672",
-    "code-literal": "#ae81ff",
-    "code-punctuation": "#111111",
-    "code-variable": "#d88200",
-    "code-addition": "#44a248",
-    "code-deletion": "#ff1b1b",
+    codeText: "#313131",
+    codeBackground: "#fdfdfd",
+    codeComment: "#656e77",
+    codeKeyword: "#029cb9",
+    codeAttribute: "#70a800",
+    codeNamespace: "#f92672",
+    codeLiteral: "#ae81ff",
+    codePunctuation: "#111111",
+    codeVariable: "#d88200",
+    codeAddition: "#44a248",
+    codeDeletion: "#ff1b1b",
  },
  dark: {
-    "background-inner": "#1e1e1e",
-    "background-outer": "#252525",
-    "background-header": "rgba(37, 37, 37, 0.85)",
+    backgroundInner: "#1e1e1e",
+    backgroundOuter: "#252525",
+    backgroundHeader: "rgba(37, 37, 37, 0.85)",
    text: "#f1f1f1",
-    "medium-dark": "#d7d7d7",
+    mediumDark: "#d7d7d7",
    medium: "#b1b1b1",
-    "medium-light": "#959595",
+    mediumLight: "#959595",
    light: "#646464",
-    "kinda-light": "#535353",
-    "super-light": "#272727",
-    "super-duper-light": "#1f1f1f",
+    kindaLight: "#535353",
+    superLight: "#272727",
+    superDuperLight: "#1f1f1f",
    link: "#88c7ff",
-    "link-underline": "rgba(136, 199, 255, 0.4)",
+    linkUnderline: "rgba(136, 199, 255, 0.4)",
    success: "#78df55",
    error: "#ff5151",
    warning: "#f2b702",

    // Syntax Highlighting (dark) - modified from Dracula: https://github.com/dracula/pygments
-    "code-text": "#e4e4e4",
-    "code-background": "#212121",
-    "code-comment": "#929292",
-    "code-keyword": "#3b9dd2",
-    "code-attribute": "#78df55",
-    "code-namespace": "#f95757",
-    "code-literal": "#d588fb",
-    "code-punctuation": "#cccccc",
-    "code-variable": "#fd992a",
-    "code-addition": "#78df55",
-    "code-deletion": "#ff5151",
+    codeText: "#e4e4e4",
+    codeBackground: "#212121",
+    codeComment: "#929292",
+    codeKeyword: "#3b9dd2",
+    codeAttribute: "#78df55",
+    codeNamespace: "#f95757",
+    codeLiteral: "#d588fb",
+    codePunctuation: "#cccccc",
+    codeVariable: "#fd992a",
+    codeAddition: "#78df55",
+    codeDeletion: "#ff5151",
  },
 };

+// JS-friendly camelCase to CSS-friendly kebab-case
+const camelToKebab = (camel: string) => decamelize(camel, { separator: "-" });
+
 // converts each variable in a given theme object to CSS syntax and returns all of them as one long string
 export const toCSS = (theme: Record<string, string>) =>
  Object.entries(theme)
-    .map(([name, color]) => `--${name}:${color};`)
+    .map(([name, color]) => `--${camelToKebab(name)}:${color};`)
    .join("");

 export default themes;
--- a/package.json
+++ b/package.json
@ -38,6 +38,7 @@
    "copy-to-clipboard": "^3.3.1",
    "critters": "^0.0.16",
    "date-fns": "^2.28.0",
+    "decamelize": "^6.0.0",
    "escape-goat": "^4.0.0",
    "fathom-client": "^3.4.1",
    "faunadb": "^4.5.2",
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@ -1,11 +1,20 @@
 import { Html, Head, Main, NextScript } from "next/document";
+import themes, { toCSS } from "../lib/config/themes";
 import * as config from "../lib/config";

 // https://nextjs.org/docs/advanced-features/custom-document
 const Document = () => {
  return (
    <Html lang={config.siteLocale?.replace("_", "-")}>
-      <Head />
+      <Head>
+        {/* convert themes object into inlined css variables */}
+        <style
+          id="theme-colors"
+          dangerouslySetInnerHTML={{
+            __html: `:root{${toCSS(themes.light)}}[data-theme="dark"]{${toCSS(themes.dark)}}`,
+          }}
+        />
+      </Head>
      <body>
        <Main />
        <NextScript />
--- a/yarn.lock
+++ b/yarn.lock
@ -2480,6 +2480,11 @@ decamelize@^1.1.0, decamelize@^1.2.0:
  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
  integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=

+decamelize@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-6.0.0.tgz#8cad4d916fde5c41a264a43d0ecc56fe3d31749e"
+  integrity sha512-Fv96DCsdOgB6mdGl67MT5JaTNKRzrzill5OH5s8bjYJXVlcXyPYGyPsUkWyGV5p1TXI5esYIYMMeDJL0hEIwaA==
+
 decode-named-character-reference@^1.0.0:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/decode-named-character-reference/-/decode-named-character-reference-1.0.1.tgz#57b2bd9112659cacbc449d3577d7dadb8e1f3d1b"