SOEOPSFY24-343 | configure custom modular typography

app/example/page.tsx

@@ -1,16 +1,16 @@
-import { Heading, Text } from "@/components/Typography";
-import { ShapeAnimation } from "@/components/ShapeAnimation";
-import { Masthead } from "@/components/Masthead";
-import { FeatureHero } from "@/components/FeatureHero";
-import { PageTitle } from "@/components/PageTitle";
-import TimelineOverview from "@/components/Timeline/TimelineOverview";
+import { Heading, Text } from "../../components/Typography";
+import { ShapeAnimation } from "../../components/ShapeAnimation";
+import { Masthead } from "../../components/Masthead";
+import { FeatureHero } from "../../components/FeatureHero";
+import { PageTitle } from "../../components/PageTitle";
+import TimelineOverview from "../../components/Timeline/TimelineOverview";
 import { loadTimelineData } from "@/utilities/loadTimelineData";
-import { GradientBanner } from "@/components/GradientBanner/GradientBanner";
-import MediaCaptionImage from "@/components/MediaCaptionImage/MediaCaptionImage";
-import { Container } from "@/components/Container";
-import { AlumniBanner } from "@/components/AlumniBanner";
-import { HorizontalLineart } from "@/components/images/horizontal-lineart";
-import { Quote } from "@/components/Quote";
+import { GradientBanner } from "../../components/GradientBanner/GradientBanner";
+import MediaCaptionImage from "../../components/MediaCaptionImage/MediaCaptionImage";
+import { Container } from "../../components/Container";
+import { AlumniBanner } from "../../components/AlumniBanner";
+import { HorizontalLineart } from "../../components/images/horizontal-lineart";
+import { Quote } from "../../components/Quote";
 
 const ExamplePage = async () => {
   const timelineData = await loadTimelineData();

tailwind.config.ts

@@ -20,6 +20,8 @@ export default {
   ],
   theme: {
     extend: {
+      // Centennial Override
+      "soe-centennial": require(`${dir}/theme/soe-centennial.js`)(),
       colors: require(`${dir}/theme/soe-colors.js`)(),
       backgroundImage: require(`${dir}/theme/soe-gradients.js`)(),
       fontFamily: require(`${dir}/theme/soe-fontFamily.js`)(),

tailwind/plugins/base/soe-base.js

@@ -1,5 +1,5 @@
 /**
- * Momentum custom base styles extending Decanter 7 base
+ * Centennial custom base styles extending Decanter 7 base
  */
 
 module.exports = function () {

tailwind/plugins/components/soe-typography.js

@@ -1,11 +1,12 @@
 /**
- * Momentum specific typography styles
+ * Centennial specific typography styles
  */
+
 module.exports = function () {
   return function ({ addComponents, theme }) {
     const components = {
       '.overview': {
-        ...theme('decanter.typography.type1'),
+        ...theme('soe-centennial.typography.type1'),
         lineHeight: theme('lineHeight.cozy'),
         fontWeight: theme('fontWeight.normal'),
       },
@@ -25,7 +26,7 @@ module.exports = function () {
         },
       },
       '.soe-intro-text': {
-        ...theme('decanter.typography.type2'),
+        ...theme('soe-centennial.typography.type2'),
         lineHeight: theme('lineHeight.cozy'),
       },
       // Custom fluid type for homepage hero
@@ -37,17 +38,48 @@ module.exports = function () {
         fontSize: 'clamp(4.5rem, 7.01vw + 1.98rem, 16rem)',
       },
       '.soe-quote-lg': {
-        ...theme('decanter.typography.type3'),
+        ...theme('soe-centennial.typography.type3'),
         lineHeight: theme('lineHeight.display'),
       },
       '.soe-quote-md': {
-        ...theme('decanter.typography.type2'),
+        ...theme('soe-centennial.typography.type2'),
         lineHeight: theme('lineHeight.display'),
       },
       '.soe-quote-sm': {
-        ...theme('decanter.typography.type0'),
+        ...theme('soe-centennial.typography.type0'),
         lineHeight: theme('lineHeight.display'),
       },
+      '.type-9': {
+        ...theme('soe-centennial.typography.type9'),
+      },
+      '.type-8': {
+        ...theme('soe-centennial.typography.type8'),
+      },
+      '.type-7': {
+        ...theme('soe-centennial.typography.type7'),
+      },
+      '.type-6': {
+        ...theme('soe-centennial.typography.type6'),
+      },
+      '.type-5': {
+        ...theme('soe-centennial.typography.type5'),
+      },
+      '.type-4': {
+        ...theme('soe-centennial.typography.type4'),
+      },
+      '.type-3': {
+        ...theme('soe-centennial.typography.type3'),
+      },
+      '.type-2': {
+        ...theme('soe-centennial.typography.type2'),
+      },
+      '.type-1': {
+        ...theme('soe-centennial.typography.type1'),
+      },
+      '.type-0': {
+        ...theme('soe-centennial.typography.type0'),
+      },
+
     };
 
     addComponents(components);

tailwind/plugins/theme/soe-centennial.js

@@ -0,0 +1,32 @@
+/**
+ * Centennial Variables.
+ */
+
+module.exports = function () {
+  const modtype = {};
+
+  // Reponsive modular typography system
+  // type-0 is the base step = 1em
+  // type-1 to type-9 (largest) available
+  // Each step includes difference font sizes and letterspacing for mobile, tablet and desktop breakpoints
+  // Generate responsive modular typography steps from 1 to 9
+  for (let i = 0; i < 10; i += 1) {
+    modtype[`type-${i}`] = {
+      fontSize: `${(1.18 ** i).toFixed(2)}em`,
+      letterSpacing: `${(-0.01 - (i - 1) * 0.002).toFixed(3)}em`,
+      '@screen md': {
+        fontSize: `${(1.9 ** i).toFixed(2)}em`,
+      },
+      '@screen lg': {
+        fontSize: `${(1.21 ** i).toFixed(2)}em`,
+      },
+    };
+  }
+
+  // Returned values.
+  return {
+    typography: {
+      ...modtype,
+    },
+  };
+};

tailwind/plugins/theme/soe-fontFamily.js

@@ -1,5 +1,5 @@
 /**
- * Momentum fonts
+ * Centennial fonts
  */
 module.exports = function () {
   return {