Improved tailwind config and removed duplicated values in code

design.config.js

@@ -0,0 +1,48 @@
+const colors = {
+  light: {
+    hightlight: { r: 255, g: 241, b: 224 },
+    light: { r: 255, g: 237, b: 216 },
+    mid: { r: 240, g: 209, b: 179 },
+    dark: { r: 156, g: 102, b: 68 },
+    shade: { r: 156, g: 102, b: 68 },
+    black: { r: 27, g: 24, b: 17 },
+  },
+  dark: {
+    highlight: { r: 44, g: 40, b: 37 },
+    light: { r: 38, g: 34, b: 30 },
+    mid: { r: 57, g: 45, b: 34 },
+    dark: { r: 192, g: 132, b: 94 },
+    shade: { r: 0, g: 0, b: 0 },
+    black: { r: 235, g: 234, b: 231 },
+  },
+};
+
+const breaks = {
+  thin: { raw: "(max-width: 25rem)" },
+  mobile: { raw: "(max-width: 60rem)" },
+  desktop: { raw: "(min-width: 60rem)" },
+};
+
+const fonts = {
+  openDyslexic: "OpenDyslexic",
+  vollkorn: "Vollkorn",
+  zenMaruGothic: "Zen Maru Gothic",
+};
+
+const fontFamilies = {
+  standard: {
+    body: fonts.zenMaruGothic,
+    headers: fonts.vollkorn,
+  },
+  dyslexic: {
+    body: fonts.openDyslexic,
+    headers: fonts.openDyslexic,
+  },
+};
+
+module.exports = {
+  colors,
+  breaks,
+  fonts,
+  fontFamilies,
+};

src/hooks/useMediaQuery.ts

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { breaks } from "../../design.config";
 
 export function useMediaQuery(query: string): boolean {
   function getMatches(query: string): boolean {
@@ -34,15 +35,15 @@ export function useMediaQuery(query: string): boolean {
 }
 
 export function useMediaThin() {
-  return useMediaQuery("(max-width: 25rem)");
+  return useMediaQuery(breaks.thin.raw);
 }
 
 export function useMediaMobile() {
-  return useMediaQuery("(max-width: 60rem)");
+  return useMediaQuery(breaks.mobile.raw);
 }
 
 export function useMediaDesktop() {
-  return useMediaQuery("(min-width: 60rem)");
+  return useMediaQuery(breaks.desktop.raw);
 }
 
 export function useMediaHoverable() {

src/pages/dev/editor.tsx

@@ -182,7 +182,7 @@ export default function Editor(props: Immutable<Props>): JSX.Element {
             target.select();
             event.preventDefault();
           }}
-          className="h-[50vh] w-[50vw] font-monospace mobile:w-[75vw]"
+          className="h-[50vh] w-[50vw] mobile:w-[75vw]"
         />
       </Popup>
 
@@ -406,7 +406,7 @@ export default function Editor(props: Immutable<Props>): JSX.Element {
               const textarea = event.target as HTMLTextAreaElement;
               handleInput(textarea.value);
             }}
-            className="h-[70vh] w-full rounded-xl bg-mid !bg-opacity-40 p-8 font-monospace
+            className="h-[70vh] w-full rounded-xl bg-mid !bg-opacity-40 p-8
             text-black outline-none"
             value={markdown}
             title="Input textarea"

tailwind.config.js

@@ -1,37 +1,5 @@
 const plugin = require("tailwindcss/plugin");
-
+const { breaks, colors, fonts, fontFamilies } = require("./design.config.js");
-/* CONFIG */
-
-const hightlight = { r: 255, g: 241, b: 224 };
-const light = { r: 255, g: 237, b: 216 };
-const mid = { r: 240, g: 209, b: 179 };
-const dark = { r: 156, g: 102, b: 68 };
-const shade = { r: 156, g: 102, b: 68 };
-const black = { r: 27, g: 24, b: 17 };
-
-const dark_highlight = { r: 44, g: 40, b: 37 };
-const dark_light = { r: 38, g: 34, b: 30 };
-const dark_mid = { r: 57, g: 45, b: 34 };
-const dark_dark = { r: 192, g: 132, b: 94 };
-const dark_shade = { r: 0, g: 0, b: 0 };
-const dark_black = { r: 235, g: 234, b: 231 };
-
-const breakDektop = { min: "60rem" };
-const breakMobile = { max: "60rem" };
-const breakThin = { max: "25rem" };
-
-const fontStandard = {
-  body: "Zen Maru Gothic",
-  headers: "Vollkorn",
-  monospace: "monospace",
-};
-const fontDyslexic = {
-  body: "OpenDyslexic",
-  headers: "OpenDyslexic",
-  monospace: "monospace",
-};
-
-/* END CONFIG */
 
 function rgb(color) {
   return [color.r, color.g, color.b].join(" ");
@@ -51,18 +19,16 @@ module.exports = {
       black: "rgb(var(--theme-color-black) / <alpha-value>)",
     },
     fontFamily: {
-      body: ["var(--theme-font-body)"],
+      body: "var(--theme-font-body)",
-      headers: ["var(--theme-font-headers)"],
+      headers: "var(--theme-font-headers)",
-      monospace: ["var(--theme-font-monospace)"],
+      ...fonts,
-      openDyslexic: ["OpenDyslexic"],
-      zenMaruGothic: ["Zen Maru Gothic"],
     },
     screens: {
-      desktop: breakDektop,
+      desktop: breaks.desktop,
-      mobile: breakMobile,
+      mobile: breaks.mobile,
-      thin: breakThin,
+      thin: breaks.thin,
       hoverable: { raw: "(hover: hover)" },
-      notHoverable: { raw: "(hover: hover)" },
+      notHoverable: { raw: "(hover: none)" },
     },
     extend: {
       boxShadow: {
@@ -74,22 +40,22 @@ module.exports = {
     plugin(function ({ addUtilities }) {
       addUtilities({
         ".set-theme-light": {
-          "--theme-color-highlight": rgb(hightlight),
+          "--theme-color-highlight": rgb(colors.light.hightlight),
-          "--theme-color-light": rgb(light),
+          "--theme-color-light": rgb(colors.light.light),
-          "--theme-color-mid": rgb(mid),
+          "--theme-color-mid": rgb(colors.light.mid),
-          "--theme-color-dark": rgb(dark),
+          "--theme-color-dark": rgb(colors.light.dark),
-          "--theme-color-shade": rgb(shade),
+          "--theme-color-shade": rgb(colors.light.shade),
-          "--theme-color-black": rgb(black),
+          "--theme-color-black": rgb(colors.light.black),
           "--theme-texture-dots": `url("/paper-dots.webp")`,
           "--theme-texture-dots-blend": `multiply`,
         },
         ".set-theme-dark": {
-          "--theme-color-highlight": rgb(dark_highlight),
+          "--theme-color-highlight": rgb(colors.dark.highlight),
-          "--theme-color-light": rgb(dark_light),
+          "--theme-color-light": rgb(colors.dark.light),
-          "--theme-color-mid": rgb(dark_mid),
+          "--theme-color-mid": rgb(colors.dark.mid),
-          "--theme-color-dark": rgb(dark_dark),
+          "--theme-color-dark": rgb(colors.dark.dark),
-          "--theme-color-shade": rgb(dark_shade),
+          "--theme-color-shade": rgb(colors.dark.shade),
-          "--theme-color-black": rgb(dark_black),
+          "--theme-color-black": rgb(colors.dark.black),
           "--theme-texture-dots": `url("/paper-dots-dark.webp")`,
           "--theme-texture-dots-blend": `overlay`,
         },
@@ -99,14 +65,12 @@ module.exports = {
     plugin(function ({ addUtilities }) {
       addUtilities({
         ".set-theme-font-standard": {
-          "--theme-font-body": fontStandard.body,
+          "--theme-font-body": fontFamilies.standard.body,
-          "--theme-font-headers": fontStandard.headers,
+          "--theme-font-headers": fontFamilies.standard.headers,
-          "--theme-font-monospace": fontStandard.monospace,
         },
         ".set-theme-font-dyslexic": {
-          "--theme-font-body": fontDyslexic.body,
+          "--theme-font-body": fontFamilies.dyslexic.body,
-          "--theme-font-headers": fontDyslexic.headers,
+          "--theme-font-headers": fontFamilies.dyslexic.headers,
-          "--theme-font-monospace": fontStandard.monospace,
         },
       });
     }),