sung.codes.next

tailwind.config.js

/* eslint-disable @typescript-eslint/no-var-requires */
const { BlockList } = require("net");
const twColors = require("tailwindcss/colors");
const defaultTheme = require("tailwindcss/defaultTheme");

/**
 * Material Design breakpoints
 * @see https://material.io/design/layout/understanding-layout.html#layout-anatomy
 * @see https://tailwindcss.com/docs/breakpoints
 */
// const screens = {
//   sm: { min: "0", max: "599px" },
//   md: { min: "600px", max: "904px" },
//   lg: { min: "905px", max: "1239px" },
//   xl: { min: "1240px", max: "1439px" },
//   "2xl": { min: "1440px" },
// };

/**
 * Custom Material Design theme colors
 * @see https://material.io/design/color/the-color-system.html#color-theme-creation
 * @see https://tailwindcss.com/docs/customizing-colors#extending-the-defaults
 * @see https://material.io/resources/color/#!/?view.left=1&view.right=1&primary.color=db1f5e&secondary.color=ffc600&primary.text.color=ffffff
 */
const colors = {
  link: "#0969da",
  error: "#b00020",
  background: "#fff",
  primary: "#db1f5d",
  "primary-light": "#a30035",
  "primary-dark": "#ff5e8b",
  secondary: "#ffc600",
  "secondary-light": "#fff94f",
  "secondary-dark": "#c79600",
  surface: "#fff",
  "on-secondary": "#000",
  "on-background": "#000",
  "on-surface": "#414141",
  "on-surface-focus": "#f5f5f5",
  "on-surface-hover": twColors.gray[100],
  "on-error": "#fff",
};

const backgroundColor = {
  // taken from https://blog.google
  footer: "hsl(210deg 17% 98%)",
};

const borderColor = {
  "pinned-card": "rgba(0, 0, 0, 0.12)",
};

/**
 * Customizing Tailwind CSS Typography plugin
 * @see https://github.com/tailwindlabs/tailwindcss-typography#customization
 */
const typography = {
  DEFAULT: {
    css: {
      pre: {
        margin: 0,
        padding: 0,
        display: "inline-block",
        // color: "initial",
        backgroundColor: "transparent",
      },
    },
  },
};

/**
 * Use Roboto as default font family
 *
 * @see TW https://tailwindcss.com/docs/font-family#customizing
 * @see TypeScale https://material.io/design/typography/the-type-system.html#type-scale
 * @see Roboto https://fonts.google.com/specimen/Roboto
 */
const fontFamily = {
  sans: ["Roboto", ...defaultTheme.fontFamily.sans],
  mono: ['"Dank Mono"', ...defaultTheme.fontFamily.mono],
  dank: ['"Dank Mono"', ...defaultTheme.fontFamily.mono],
};

const fontMeta = {
  h1: { fontSize: "96", tracking: "-1.5", fontWeight: "300" },
  h2: { fontSize: "60", tracking: "-0.5", fontWeight: "300" },
  h3: { fontSize: "48", tracking: "0", fontWeight: "400" },
  h4: { fontSize: "34", tracking: "0.25", fontWeight: "400" },
  h5: { fontSize: "24", tracking: "0", fontWeight: "400" },
  h6: { fontSize: "20", tracking: "0.15", fontWeight: "500" },
  subtitle1: { fontSize: "16", tracking: "0.15", fontWeight: "400" },
  subtitle2: { fontSize: "14", tracking: "0.1x", fontWeight: "500" },
  body1: { fontSize: "16", tracking: "0.5", fontWeight: "400" },
  body2: { fontSize: "14", tracking: "0.25", fontWeight: "400" },
  button: { fontSize: "14", tracking: "1.25", fontWeight: "500" },
  caption: { fontSize: "12", tracking: "0.4", fontWeight: "400" },
  overline: { fontSize: "10", tracking: "1.5", fontWeight: "400" },
};

// Use 'rem' for font size instead of pixels: https://material.io/design/typography/the-type-system.html#type-scale
const fontSize = Object.entries(fontMeta).reduce(
  (acc, [key, value]) => {
    acc[key] = `calc((${value.fontSize} / 16) * 1rem)`;
    return acc;
  },
  {
    "intro-title": "clamp(1rem, calc(1rem + 2.5vw), 2.2rem)",
    "intro-subtitle": "calc(.5rem + 1.5vw)",
    "about-me-title": "clamp(1rem, calc(1rem + 3.5vw), 3.5rem)",
    "about-me-english-name": "clamp(1rem, calc(2rem + 2.5vw), 5rem)",
    "about-me-korean-name": "clamp(1rem, calc(1rem + 3.5vw), 2.5rem)",
  },
);

const fontWeight = Object.entries(fontMeta).reduce((acc, [key, value]) => {
  acc[key] = value.fontWeight;
  return acc;
}, {});

const letterSpacing = Object.entries(fontMeta).reduce((acc, [key, value]) => {
  acc[key] = `calc((${value.tracking} / 16) * 1rem)`;
  return acc;
}, {});

const spacing = {
  appbar: "64px",
  "pinned-card": "clamp(140px, 150px, 200px)",
};
const aspectRaio = {
  4: "4",
  3: "3",
  52: "52",
  125: "125",
  141: "141",
  250: "250",
  564: "564",
  1000: "1000",
};

const boxShadow = {
  appbar: "0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 5px 0 rgb(0 0 0 / 23%)",
  "pinned-card":
    "0 0 8px 0 rgb(0 0 0 / 8%), 0 0 15px 0 rgb(0 0 0 / 2%), 0 0 20px 4px rgb(0 0 0 / 6%)",
};
const transitionDuration = {
  0: "0ms",
  slow: "5000ms",
};

const transitionTimingFunction = {
  menu: "cubic-bezier(.24,1,.32,1)",
};

const outline = {
  "home-post-item": [`2px solid ${borderColor["pinned-card"]}`, "2px"],
};

module.exports = {
  mode: "jit",
  darkMode: "class", // or 'media' or 'class'
  purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      // screens,
      colors: {
        ...twColors,
        ...colors,
      },
      backgroundColor,
      borderColor,
      fontSize,
      fontWeight,
      letterSpacing,
      fontFamily,
      typography,
      spacing,
      aspectRaio,
      boxShadow,
      transitionDuration,
      transitionTimingFunction,
      outline,
      typography,
    },
  },
  variants: {
    extend: {
      typography: ["dark"],
    },
  },
  plugins: [
    require("@tailwindcss/aspect-ratio"),
    require("@tailwindcss/line-clamp"),
    require("@tailwindcss/typography"),
    require("@downwindcss/flex-center"),
    require("@downwindcss/grid-center"),
  ],
};