From fe5c99ee8fa5b5ba4a2e8a931bcd66bb0bb1412e Mon Sep 17 00:00:00 2001 From: DrMint Date: Sat, 11 Jun 2022 01:19:19 +0200 Subject: [PATCH] Improved tailwind config and removed duplicated values in code --- design.config.js | 48 ++++++++++++++++++++++ src/hooks/useMediaQuery.ts | 7 ++-- src/pages/dev/editor.tsx | 4 +- tailwind.config.js | 84 +++++++++++--------------------------- 4 files changed, 78 insertions(+), 65 deletions(-) create mode 100644 design.config.js diff --git a/design.config.js b/design.config.js new file mode 100644 index 0000000..84a6e3c --- /dev/null +++ b/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, +}; diff --git a/src/hooks/useMediaQuery.ts b/src/hooks/useMediaQuery.ts index a0d58d1..e921ee5 100644 --- a/src/hooks/useMediaQuery.ts +++ b/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() { diff --git a/src/pages/dev/editor.tsx b/src/pages/dev/editor.tsx index 850e78f..0e608a3 100644 --- a/src/pages/dev/editor.tsx +++ b/src/pages/dev/editor.tsx @@ -182,7 +182,7 @@ export default function Editor(props: Immutable): JSX.Element { target.select(); event.preventDefault(); }} - className="h-[50vh] w-[50vw] font-monospace mobile:w-[75vw]" + className="h-[50vh] w-[50vw] mobile:w-[75vw]" /> @@ -406,7 +406,7 @@ export default function Editor(props: Immutable): 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" diff --git a/tailwind.config.js b/tailwind.config.js index 9b5bd50..f102aa0 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,37 +1,5 @@ const plugin = require("tailwindcss/plugin"); - -/* 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 */ +const { breaks, colors, fonts, fontFamilies } = require("./design.config.js"); function rgb(color) { return [color.r, color.g, color.b].join(" "); @@ -51,18 +19,16 @@ module.exports = { black: "rgb(var(--theme-color-black) / )", }, fontFamily: { - body: ["var(--theme-font-body)"], - headers: ["var(--theme-font-headers)"], - monospace: ["var(--theme-font-monospace)"], - openDyslexic: ["OpenDyslexic"], - zenMaruGothic: ["Zen Maru Gothic"], + body: "var(--theme-font-body)", + headers: "var(--theme-font-headers)", + ...fonts, }, screens: { - desktop: breakDektop, - mobile: breakMobile, - thin: breakThin, + desktop: breaks.desktop, + mobile: breaks.mobile, + 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-light": rgb(light), - "--theme-color-mid": rgb(mid), - "--theme-color-dark": rgb(dark), - "--theme-color-shade": rgb(shade), - "--theme-color-black": rgb(black), + "--theme-color-highlight": rgb(colors.light.hightlight), + "--theme-color-light": rgb(colors.light.light), + "--theme-color-mid": rgb(colors.light.mid), + "--theme-color-dark": rgb(colors.light.dark), + "--theme-color-shade": rgb(colors.light.shade), + "--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-light": rgb(dark_light), - "--theme-color-mid": rgb(dark_mid), - "--theme-color-dark": rgb(dark_dark), - "--theme-color-shade": rgb(dark_shade), - "--theme-color-black": rgb(dark_black), + "--theme-color-highlight": rgb(colors.dark.highlight), + "--theme-color-light": rgb(colors.dark.light), + "--theme-color-mid": rgb(colors.dark.mid), + "--theme-color-dark": rgb(colors.dark.dark), + "--theme-color-shade": rgb(colors.dark.shade), + "--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-headers": fontStandard.headers, - "--theme-font-monospace": fontStandard.monospace, + "--theme-font-body": fontFamilies.standard.body, + "--theme-font-headers": fontFamilies.standard.headers, }, ".set-theme-font-dyslexic": { - "--theme-font-body": fontDyslexic.body, - "--theme-font-headers": fontDyslexic.headers, - "--theme-font-monospace": fontStandard.monospace, + "--theme-font-body": fontFamilies.dyslexic.body, + "--theme-font-headers": fontFamilies.dyslexic.headers, }, }); }),