Merge remote-tracking branch 'origin/main' into SR-002-Services-Section

tailwind.config.ts

@@ -1,5 +1,11 @@
 import { type Config } from "tailwindcss";
 import { fontFamily } from "tailwindcss/defaultTheme";
+import plugin from "tailwindcss/plugin";
+
+interface RecursiveKeyValuePair<K extends keyof any = string, V = string> {
+  [key: string]: V | RecursiveKeyValuePair<K, V>;
+}
+type CSSRuleObject = RecursiveKeyValuePair<string, null | string | string[]>;
 
 export default {
   content: ["./src/**/*.{js,ts,jsx,tsx}"],
@@ -9,6 +15,15 @@ export default {
         center: true,
         padding: "1.5rem",
       },
+      fontSize: {
+        xs: ["0.875rem", { lineHeight: "1rem" }], // 14px 0.875rem
+        sm: ["1rem", { lineHeight: "1.25rem" }], // 16px 1rem
+        base: ["1.25rem", { lineHeight: "1.5rem" }], // 20px 1.25rem
+        lg: ["1.5rem", { lineHeight: "1.75rem" }], // 24px 1.5rem
+        xl: ["2rem", { lineHeight: "1.75rem" }], // 32px 2rem
+        "2xl": ["2.5rem", { lineHeight: "2rem" }], // 40px 2.5rem
+        "3xl": ["3rem", { lineHeight: "2.25rem" }], // 48px 3rem
+      },
       fontFamily: {
         sans: ["var(--font-jakarta)"],
         roadster: ["var(--font-roadster)", ...fontFamily.sans],
@@ -21,9 +36,46 @@ export default {
         orange: "#F4A261",
         red: "#E76F51",
         white: "#EAD9C2",
+        sand: "#F0D4B2",
         black: "#2E251E",
       },
     },
   },
-  plugins: [],
+  plugins: [
+    // Responsive Typography
+    plugin(function ({ addUtilities, theme }) {
+      const fontSizes = Object.keys(theme("fontSize"));
+
+      const buildCSS = (fontSize: string): CSSRuleObject => {
+        const fsIndex = fontSizes.indexOf(fontSize);
+
+        if (fsIndex > 1) {
+          const desktop = fontSize;
+          const tablet = fontSizes[fsIndex - 1] ?? fontSize;
+          const mobile = fontSizes[fsIndex - 2] ?? fontSize;
+
+          return {
+            "font-size": theme(`fontSize.${mobile}`),
+            "@screen md": {
+              "font-size": theme(`fontSize.${tablet}`),
+            },
+            "@screen 2xl": {
+              "font-size": theme(`fontSize.${desktop}`),
+            },
+          };
+        }
+
+        return { "font-size": theme(`fontSize.${fontSize}`) };
+      };
+
+      addUtilities({
+        ".text-r-3xl": buildCSS("3xl"),
+        ".text-r-2xl": buildCSS("2xl"),
+        ".text-r-xl": buildCSS("xl"),
+        ".text-r-lg": buildCSS("lg"),
+        ".text-r-base": buildCSS("base"),
+        ".text-r-sm": buildCSS("sm"),
+      });
+    }),
+  ],
 } satisfies Config;