@obosbbl/grunnmuren-tailwind 2.0.0-canary.0 → 2.0.0-canary.10

package/README.md

@@ -1,6 +1,6 @@
 # @obosbbl/grunnmuren-tailwind
 
-[![npm version](https://badge.fury.io/js/@obosbbl%2Fgrunnmuren-tailwind.svg)](https://www.npmjs.com/package/@obosbbl/grunnmuren-tailwind)
+[![npm canary version](https://img.shields.io/npm/v/@obosbbl%2Fgrunnmuren-tailwind/canary.svg)](https://www.npmjs.com/package/@obosbbl/grunnmuren-tailwind)
 
 Grunnmuren Tailwind preset. See the [Tailwind documentation](https://tailwindcss.com/docs/presets) for more information about how presets work.
 
@@ -8,14 +8,10 @@ Grunnmuren Tailwind preset. See the [Tailwind documentation](https://tailwindcss
 
 ```sh
 # npm
-npm install -D @obosbbl/grunnmuren-tailwind tailwindcss postcss autoprefixer
+npm install -D @obosbbl/grunnmuren-tailwind@canary tailwindcss postcss autoprefixer
 
 # pnpm
-pnpm add -D @obosbbl/grunnmuren-tailwind tailwindcss postcss autoprefixer
-
-# yarn
-yarn add -D @obosbbl/grunnmuren-tailwind tailwindcss postcss autoprefixer
-
+pnpm add -D @obosbbl/grunnmuren-tailwind@canary tailwindcss postcss autoprefixer
 ```
 
 ## Usage
@@ -33,7 +29,7 @@ module.exports = {
     './src/app/**/*.{js,ts,jsx,tsx,}',
 
     // If you're using Grunnmuren's React components
-    './node_modules/@obosbbl/grunnmuren-react/dist/**/*.js',
+    './node_modules/@obosbbl/grunnmuren-react/dist/**/*.{mjs,js}',
   ],
 };
 ```
@@ -61,19 +57,39 @@ module.exports = {
 };
 ```
 
+## Fonts
+
+Fonts are automatically loaded from OBOS' CDN, so you don't have to host the font files yourself.
+
+If you use [Content-Security-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP), you have to allow `https://www.obos.no` as a [font-src](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/font-src), otherwise the fonts will be blocked from loading.
+
+The preset includes a (local) fallback font to prevent [CLS](https://web.dev/articles/cls) while the fonts are loading. This is similar to the [font optimization in Next](https://nextjs.org/docs/app/building-your-application/optimizing/fonts). This is enabled by default, but can be disabled with the `includeFontFallback` option.
+
+The fallback font metrics is generated with a script that can be run with `pnpm font-fallback` (requires [Bun](https://bun.sh/)). If the fonts are changed, the script must be rerun and the resulting file commited.
+
 ## Migrating from v1?
 
 To ease the transition from v1 to v2 of Grunnmuren, it is possible to configure the preset to be (partially) compatible with v1. This allows you to use v2 of the Tailwind preset with v1 of the React components, and upgrade your application over time instead of a full migration.
 
 To do that you need to configure the preset with `legacyV1Compatibility` option.
 
+## Options
+
 ```js
 // tailwind.config.js
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   presets: [
-    require('@obosbbl/grunnmuren-tailwind')({ legacyV1Compatibility: true }),
+    require('@obosbbl/grunnmuren-tailwind')({ includeFontFallback: false }),
   ],
+  // content: [ ... ]
 };
 ```
+
+The preset supports the following options:
+
+| Name                  | Default value | Description                                         |
+| --------------------- | ------------- | --------------------------------------------------- |
+| includeFontFallback   | `true`        | Whether the preset includes a font fallback         |
+| legacyV1Compatibility | `false`       | Configures partial compatibility with Grunnmuren v1 |

package/fonts/font-fallback.js

@@ -0,0 +1 @@
+module.exports = {"OBOSText":{"font-family":"\"__OBOSText_Fallback\"","src":"local(\"Arial\")","size-adjust":"100%","ascent-override":"94%","descent-override":"26%","line-gap-override":"0%"},"OBOSDisplay":{"font-family":"\"__OBOSDisplay_Fallback\"","src":"local(\"Arial\")","size-adjust":"100%","ascent-override":"94%","descent-override":"26%","line-gap-override":"0%"}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-tailwind",
-  "version": "2.0.0-canary.0",
+  "version": "2.0.0-canary.10",
   "description": "Grunnmuren Tailwind preset",
   "repository": {
     "url": "https://github.com/code-obos/grunnmuren"
@@ -11,16 +11,21 @@
     ".": "./tailwind-base.cjs"
   },
   "files": [
-    "tailwind-base.cjs"
+    "tailwind-base.cjs",
+    "fonts/font-fallback.js"
   ],
   "dependencies": {
     "@tailwindcss/aspect-ratio": "^0.4.2",
-    "@tailwindcss/typography": "^0.5.10"
+    "@tailwindcss/typography": "^0.5.10",
+    "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
-    "tailwindcss": "3.3.5"
+    "tailwindcss": "3.4.17"
   },
   "peerDependencies": {
-    "tailwindcss": "^3.3.5"
+    "tailwindcss": "^3.4.0"
+  },
+  "scripts": {
+    "font-fallback": "bun --cwd=./fonts ./generate-font-fallback.ts"
   }
 }

package/tailwind-base.cjs

@@ -1,32 +1,148 @@
+const defaultTheme = require('tailwindcss/defaultTheme');
 const plugin = require('tailwindcss/plugin');
+const fontFallbacks = require('./fonts/font-fallback');
 
-const obosFonts = [
-  {
-    fontWeight: 400,
-    fontStyle: 'normal',
-    url: 'https://www.obos.no/fonts/OBOSText-Regular.woff2',
+const fontDeclarations = {
+  OBOSText: [
+    {
+      fontWeight: 400,
+      fontStyle: 'normal',
+      url: 'https://www.obos.no/fonts/OBOSText-Regular.woff2',
+    },
+    {
+      fontWeight: 400,
+      fontStyle: 'italic',
+      url: 'https://www.obos.no/fonts/OBOSText-Italic.woff2',
+    },
+    {
+      fontWeight: 500,
+      fontStyle: 'normal',
+      url: 'https://www.obos.no/fonts/OBOSText-Medium.woff2',
+    },
+  ],
+  OBOSDisplay: [
+    {
+      url: 'https://www.obos.no/fonts/OBOSDisplay-SemiBold.woff2',
+    },
+  ],
+};
+
+/**
+ * Styles for typography that are reused in both component classes and prose (through the tailwind typography plugin)
+ */
+const typography = {
+  headingXlText: {
+    fontWeight: 'semibold',
+    small: {
+      fontSize: '2.8125rem',
+      lineHeight: '3.625rem',
+    },
+    large: {
+      fontSize: '3.9375rem',
+      lineHeight: '5.125rem',
+    },
+  },
+  headingLText: {
+    fontWeight: 'semibold',
+    small: {
+      fontSize: '1.8125rem',
+      lineHeight: '2.75rem',
+    },
+    large: {
+      fontSize: '2.25rem',
+      lineHeight: '3.5rem',
+    },
+  },
+  headingMText: {
+    fontWeight: 'medium',
+    small: {
+      fontSize: '1.4375rem',
+      lineHeight: '2.25rem',
+    },
+    large: {
+      fontSize: '1.625rem',
+      lineHeight: '2.5625rem',
+    },
+  },
+  headingSText: {
+    fontWeight: 'medium',
+    small: {
+      fontSize: '1.1875rem',
+      lineHeight: '1.1875rem',
+    },
+    large: {
+      fontSize: '1.3125rem',
+      lineHeight: '2.125rem',
+    },
+  },
+  headingXsText: {
+    fontWeight: 'medium',
+    small: {
+      fontSize: '1.125rem',
+      lineHeight: '1.75rem',
+    },
+    large: {
+      fontSize: '1.1875rem',
+      lineHeight: '1.9375rem',
+    },
+  },
+  paragraphText: {
+    fontSize: '1rem', // 1rem is the base font size, which is obviously the default size. But it is set explicitly here to make it easier to configure in the future, if this size changes.
+    lineHeight: '1.625rem',
   },
-  {
-    fontWeight: 400,
-    fontStyle: 'italic',
-    url: 'https://www.obos.no/fonts/OBOSText-Italic.woff2',
+  leadText: {
+    fontWeight: 'medium',
+    small: {
+      fontSize: '1.4375rem',
+      lineHeight: '2.25rem',
+    },
+    large: {
+      fontSize: '1.625rem',
+      lineHeight: '2.5625rem',
+    },
   },
-  {
-    fontWeight: 500,
-    fontStyle: 'normal',
-    url: 'https://www.obos.no/fonts/OBOSText-Medium.woff2',
+  blockquoteText: {
+    fontWeight: 'medium',
+    display: 'grid',
+    gridTemplateColumns: '3rem 1fr',
+    columnGap: '0.4375rem',
+    small: {
+      fontSize: '1.4375rem',
+      lineHeight: '2.25rem',
+    },
+    large: {
+      fontSize: '1.625rem',
+      lineHeight: '2.5625rem',
+    },
+    before: {
+      content: '"“"',
+      fontFamily: 'OBOSDisplay',
+      fontSize: '4.6875rem',
+      lineHeight: '1.6875rem',
+      fontWeight: '400',
+      fontStyle: 'normal',
+    },
   },
-  {
-    fontWeight: 700,
-    fontStyle: 'normal',
-    url: 'https://www.obos.no/fonts/OBOSText-Bold.woff2',
+  descriptionText: {
+    small: {
+      fontSize: '0.875rem',
+      lineHeight: '1.4375rem',
+    },
+    large: {
+      fontSize: '0.875rem',
+      lineHeight: '1.375rem',
+    },
   },
-];
+};
 
 /**
+ * @param {boolean} options.includeFontFallback
  * @param {boolean} options.legacyV1Compatibility
  */
 module.exports = (options = {}) => {
+  options.includeFontFallback ??= true;
+  options.legacyV1Compatibility ??= false;
+
   const v1CompatibilityPlugins = [];
 
   if (options.legacyV1Compatibility) {
@@ -39,18 +155,15 @@ module.exports = (options = {}) => {
     );
   }
 
-  const fontFamily = 'OBOSFont';
-  const fonts = obosFonts;
-  const containerSize = '92rem';
-
   return {
     plugins: [
       ...v1CompatibilityPlugins,
       require('@tailwindcss/typography'),
-      plugin(function ({ addBase, addComponents }) {
+      require('tailwindcss-animate'),
+      plugin(({ addBase, addComponents, theme }) => {
         addBase({
           html: {
-            '@apply text-black antialiased font-normal': {},
+            '@apply text-black antialiased font-normal font-text': {},
           },
           b: {
             fontWeight: 500,
@@ -62,21 +175,68 @@ module.exports = (options = {}) => {
             'text-decoration': 'underline',
           },
           '::selection': { '@apply bg-mint text-black': {} },
+          ':root': {
+            '--gm-container-width': '92rem',
+            '--gm-container-gutter-width': '1rem',
+
+            '--gm-color-black': hexToRgb('#333'),
+            '--gm-color-white': hexToRgb('#fff'),
+
+            '--gm-color-gray': hexToRgb('#818181'),
+            '--gm-color-gray-dark': hexToRgb('#595959'),
+            '--gm-color-gray-light': hexToRgb('#e6e6e6'),
+            '--gm-color-gray-lightest': hexToRgb('#f1f1f1'),
+
+            '--gm-color-sky': hexToRgb('#bedfec'),
+            '--gm-color-sky-light': hexToRgb('#deeff5'),
+            '--gm-color-sky-lightest': hexToRgb('#ebf5f9'),
+
+            '--gm-color-mint': hexToRgb('#cdece2'),
+            '--gm-color-mint-light': hexToRgb('#e6f5f0'),
+            '--gm-color-mint-lightest': hexToRgb('#f0f9f6'),
+
+            '--gm-color-blue': hexToRgb('#0047ba'),
+            '--gm-color-blue-light': hexToRgb('#bedfec'),
+            '--gm-color-blue-lightest': hexToRgb('#deeff5'),
+            '--gm-color-blue-dark': hexToRgb('#002169'),
+
+            '--gm-color-green': hexToRgb('#008761'),
+            '--gm-color-green-dark': hexToRgb('#00524c'),
+            '--gm-color-green-light': hexToRgb('#cdece2'),
+            '--gm-color-green-lightest': hexToRgb('#e6f5f0'),
+
+            '--gm-color-red': hexToRgb('#c0385d'),
+            '--gm-color-red-light': hexToRgb('#faedef'),
+
+            '--gm-color-orange': hexToRgb('#e8a74a'),
+            '--gm-color-orange-light': hexToRgb('#f8e5c9'),
+
+            '--gm-color-yellow': hexToRgb('#fff5d2'),
+          },
         });
 
         addComponents({
+          '.page-layout': {
+            display: 'flex',
+            flexDirection: 'column',
+            minHeight: '100vh',
+          },
+          '.page-layout-main': {
+            backgroundColor: theme('colors.white'),
+            flexGrow: '1',
+          },
           '.container': {
             width: '100%',
-            paddingLeft: '1rem',
-            paddingRight: '1rem',
+            paddingLeft: 'var(--gm-container-gutter-width)',
+            paddingRight: 'var(--gm-container-gutter-width)',
             marginLeft: 'auto',
             marginRight: 'auto',
-            maxWidth: containerSize,
+            maxWidth: 'var(--gm-container-width)',
           },
           '.container-prose': {
             width: '100%',
-            paddingLeft: '1rem',
-            paddingRight: '1rem',
+            paddingLeft: 'var(--gm-container-gutter-width)',
+            paddingRight: 'var(--gm-container-gutter-width)',
             marginLeft: 'auto',
             marginRight: 'auto',
             maxWidth: '45.5rem',
@@ -84,56 +244,141 @@ module.exports = (options = {}) => {
         });
       }),
 
-      plugin(function ({ addBase, addComponents }) {
-        const h1 = '@apply font-bold text-3xl md:text-5xl';
-        const h2 = '@apply font-bold text-2xl md:text-4xl';
-        const h3 = '@apply font-bold text-xl md:text-2xl';
-        const h4 = '@apply font-bold text-lg md:text-xl';
+      plugin(({ addBase, addComponents }) => {
+        const {
+          headingXlText,
+          headingLText,
+          headingMText,
+          headingSText,
+          headingXsText,
+          paragraphText,
+          leadText,
+          blockquoteText,
+          descriptionText,
+        } = typography;
+
+        // This is tailwind syntax for setting both the font-size and the line-height
+        const headingXl = `@apply font-display font-${headingXlText.fontWeight} text-[${headingXlText.small.fontSize}]/[${headingXlText.small.lineHeight}] lg:text-[${headingXlText.large.fontSize}]/[${headingXlText.large.lineHeight}]`;
+        const headingL = `@apply font-display font-${headingLText.fontWeight} text-[${headingLText.small.fontSize}]/[${headingLText.small.lineHeight}] lg:text-[${headingLText.large.fontSize}]/[${headingLText.large.lineHeight}]`;
+        const headingM = `@apply font-text font-${headingMText.fontWeight} text-[${headingMText.small.fontSize}]/[${headingMText.small.lineHeight}] lg:text-[${headingMText.large.fontSize}]/[${headingMText.large.lineHeight}]`;
+        const headingS = `@apply font-text font-${headingSText.fontWeight} text-[${headingSText.small.fontSize}]/[${headingSText.small.lineHeight}] lg:text-[${headingSText.large.fontSize}]/[${headingSText.large.lineHeight}]`;
+        const headingXs = `@apply font-text font-${headingXsText.fontWeight} text-[${headingXsText.small.fontSize}]/[${headingXsText.small.lineHeight}] lg:text-[${headingXsText.large.fontSize}]/[${headingXsText.large.lineHeight}]`;
+
+        const paragraph = `@apply text-[${paragraphText.fontSize}]/[${paragraphText.lineHeight}]`;
+        const lead = `@apply font-medium text-[${leadText.small.fontSize}]/[${leadText.small.lineHeight}] lg:text-[${leadText.large.fontSize}]/[${leadText.large.lineHeight}]`;
+
+        const blockquote = `@apply font-${blockquoteText.fontWeight} italic grid grid-cols-[${blockquoteText.gridTemplateColumns.split(' ').join('_')}] gap-x-[${blockquoteText.columnGap}] pt-4
+         text-[${blockquoteText.large.fontSize}]/[${blockquoteText.large.lineHeight}] lg:text-[${blockquoteText.small.fontSize}]/[${blockquoteText.small.lineHeight}]
+         before:text-[${blockquoteText.before.fontSize}]/[${blockquoteText.before.lineHeight}] before:content-[${blockquoteText.before.content}] before:font-display before:not-italic`;
+
+        const description = `@apply text-[${descriptionText.large.fontSize}]/[${descriptionText.large.lineHeight}] lg:text-[${descriptionText.small.fontSize}]/[${descriptionText.small.lineHeight}]`;
 
         if (options.legacyV1Compatibility) {
           addBase({
             h1: {
-              [h1]: {},
+              [headingXl]: {},
             },
             h2: {
-              [h2]: {},
+              [headingL]: {},
             },
             h3: {
-              [h3]: {},
+              [headingM]: {},
             },
             h4: {
-              [h4]: {},
+              [headingS]: {},
             },
           });
         }
 
         addComponents({
+          /** @deprecated Will be replaced by heading-xl */
           '.h1': {
-            [h1]: {},
+            [headingXl]: {},
           },
+          /** @deprecated Will be replaced by heading-l */
           '.h2': {
-            [h2]: {},
+            [headingL]: {},
           },
+          /** @deprecated Will be replaced by heading-m */
           '.h3': {
-            [h3]: {},
+            [headingM]: {},
           },
+          /** @deprecated Will be replaced by heading-s */
           '.h4': {
-            [h4]: {},
+            [headingS]: {},
+          },
+          '.heading-xl': {
+            [headingXl]: {},
+          },
+          '.heading-l': {
+            [headingL]: {},
+          },
+          '.heading-m': {
+            [headingM]: {},
+          },
+          '.heading-s': {
+            [headingS]: {},
+          },
+          '.heading-xs': {
+            [headingXs]: {},
+          },
+          '.paragraph': {
+            [paragraph]: {},
+          },
+          '.lead': {
+            [lead]: {},
+          },
+          '.blockquote': {
+            [blockquote]: {},
+          },
+          '.description': {
+            [description]: {},
+          },
+          /** Standard black focus outline */
+          '.outline-focus': {
+            '@apply outline outline-2 outline-black': {},
+          },
+          /** Standard black focus outline with offset */
+          '.outline-focus-offset': {
+            '@apply outline-focus outline-offset-2': {},
+          },
+          /** Standard black focus outline with negative offset (inset) */
+          '.outline-focus-inset': {
+            '@apply outline-focus -outline-offset-4': {},
+          },
+          /** Standard black focus ring */
+          '.ring-focus': {
+            '@apply ring-2 ring-black': {},
+          },
+          /** Standard black focus ring with offset */
+          '.ring-focus-offset': {
+            '@apply ring-focus ring-offset-2': {},
           },
         });
       }),
-      plugin(function ({ addBase }) {
+      plugin(({ addBase }) => {
         addBase(
-          fonts.map((font) => ({
-            '@font-face': {
-              fontFamily,
-              fontWeight: font.fontWeight,
-              fontStyle: font.fontStyle,
-              src: `url('${font.url}') format('woff2')`,
-              fontDisplay: 'swap',
-            },
-          })),
+          Object.entries(fontDeclarations).flatMap(
+            ([fontFamily, fontFamilyDeclarations]) =>
+              fontFamilyDeclarations.map((font) => ({
+                '@font-face': {
+                  fontFamily,
+                  fontWeight: font.fontWeight,
+                  fontStyle: font.fontStyle,
+                  src: `url('${font.url}') format('woff2')`,
+                  fontDisplay: 'swap',
+                },
+              })),
+          ),
         );
+
+        if (options.includeFontFallback) {
+          addBase(
+            Object.values(fontFallbacks).map((fontFallback) => ({
+              '@font-face': fontFallback,
+            })),
+          );
+        }
       }),
     ],
     theme: {
@@ -141,56 +386,68 @@ module.exports = (options = {}) => {
         inherit: 'inherit',
         current: 'currentColor',
         transparent: 'transparent',
-        black: '#333',
-        white: '#fff',
+        black: 'rgb(var(--gm-color-black))',
+        white: 'rgb(var(--gm-color-white))',
         gray: {
-          DEFAULT: '#818181',
-          dark: '#595959',
-          light: '#E6E6E6',
-          lightest: '#f1f1f1',
+          DEFAULT: 'rgb(var(--gm-color-gray))',
+          dark: 'rgb(var(--gm-color-gray-dark))',
+          light: 'rgb(var(--gm-color-gray-light))',
+          lightest: 'rgb(var(--gm-color-gray-lightest))',
         },
         sky: {
-          DEFAULT: '#BEDFEC',
-          light: '#DEEFF5',
-          lightest: '#EBF5F9',
+          DEFAULT: 'rgb(var(--gm-color-sky))',
+          light: 'rgb(var(--gm-color-sky-light))',
+          lightest: 'rgb(var(--gm-color-sky-lightest))',
         },
         mint: {
-          DEFAULT: '#CDECE2',
-          light: '#E6F5F0',
-          lightest: '#F0F9F6',
+          DEFAULT: 'rgb(var(--gm-color-mint))',
+          light: 'rgb(var(--gm-color-mint-light))',
+          lightest: 'rgb(var(--gm-color-mint-lightest))',
         },
         blue: {
           // OBOS Blue/Primary brand
-          DEFAULT: '#0047BA',
-          light: '#BEDFEC',
-          lightest: '#DEEFF5',
+          DEFAULT: 'rgb(var(--gm-color-blue))',
           // OBOS Ocean
-          dark: '#002169',
+          dark: 'rgb(var(--gm-color-blue-dark))',
+          light: 'rgb(var(--gm-color-blue-light))',
+          lightest: 'rgb(var(--gm-color-blue-lightest))',
         },
         green: {
           // OBOS Green/Primary brand
-          DEFAULT: '#008761',
-          lightest: '#E6F5F0',
-          light: '#CDECE2',
+          DEFAULT: 'rgb(var(--gm-color-green))',
           // OBOS Forest
-          dark: '#00524C',
+          dark: 'rgb(var(--gm-color-green-dark))',
+          light: 'rgb(var(--gm-color-green-light))',
+          lightest: 'rgb(var(--gm-color-green-lightest))',
         },
         red: {
-          DEFAULT: '#C0385D',
+          DEFAULT: 'rgb(var(--gm-color-red))',
           // error red
-          light: '#FAEDEF',
+          light: 'rgb(var(--gm-color-red-light))',
         },
         orange: {
-          DEFAULT: '#e8a74a',
-          light: '#f8e5c9',
+          DEFAULT: 'rgb(var(--gm-color-orange))',
+          light: 'rgb(var(--gm-color-orange-light))',
         },
         yellow: {
           // open house
-          DEFAULT: '#fff5d2',
+          DEFAULT: 'rgb(var(--gm-color-yellow))',
         },
       },
       fontFamily: {
-        sans: [fontFamily, 'sans-serif'],
+        text: [
+          'OBOSText',
+          options.includeFontFallback && fontFallbacks.OBOSText['font-family'],
+          'sans-serif',
+        ].filter((f) => f),
+        display: [
+          'OBOSDisplay',
+          options.includeFontFallback &&
+            fontFallbacks.OBOSDisplay['font-family'],
+          'sans-serif',
+        ],
+        // OBOS doesn't have monospaced font, so we keep Tailwind's default here
+        mono: defaultTheme.fontFamily.mono,
       },
       extend: {
         maxWidth: {
@@ -214,59 +471,98 @@ module.exports = (options = {}) => {
               '--tw-prose-headings': 'inherit',
               '--tw-prose-lead': 'inherit',
               '--tw-prose-links': 'inherit',
-              '--tw-prose-quotes': theme('colors.blue.dark'),
-              '--tw-prose-quote-borders': theme('colors.green.DEFAULT'),
+              '--tw-prose-quotes': 'inherit',
               '--tw-prose-counters': theme('colors.black'),
-              '--tw-prose-bullets': theme('colors.green.DEFAULT'),
+              '--tw-prose-bullets': theme('colors.black'),
               color: theme('colors.black'),
               maxWidth: theme('maxWidth.prose'),
               a: {
                 fontWeight: 400,
               },
               h1: {
-                fontWeight: theme('fontWeight.bold'),
-                fontSize: theme('fontSize.3xl'),
-                '@media (min-width: theme("screens.md"))': {
-                  fontSize: theme('fontSize.5xl'),
+                fontFamily: 'OBOSDisplay',
+                fontWeight: theme('fontWeight.semibold'),
+                ...typography.headingXlText.small,
+                '@media (min-width: theme("screens.lg"))': {
+                  ...typography.headingXlText.large,
                 },
               },
               h2: {
-                fontWeight: theme('fontWeight.bold'),
-                fontSize: theme('fontSize.2xl'),
-                '@media (min-width: theme("screens.md"))': {
-                  fontSize: theme('fontSize.4xl'),
+                fontFamily: 'OBOSDisplay',
+                fontWeight: theme('fontWeight.semibold'),
+                ...typography.headingLText.small,
+                '@media (min-width: theme("screens.lg"))': {
+                  ...typography.headingLText.large,
                 },
               },
               h3: {
-                fontWeight: theme('fontWeight.bold'),
-                fontSize: theme('fontSize.xl'),
-                '@media (min-width: theme("screens.md"))': {
-                  fontSize: theme('fontSize.2xl'),
+                fontFamily: 'OBOSText',
+                fontWeight: theme('fontWeight.medium'),
+                ...typography.headingMText.small,
+                '@media (min-width: theme("screens.lg"))': {
+                  ...typography.headingMText.large,
                 },
               },
               h4: {
+                fontFamily: 'OBOSText',
+                fontWeight: theme('fontWeight.medium'),
+                ...typography.headingSText.small,
+                '@media (min-width: theme("screens.lg"))': {
+                  ...typography.headingSText.large,
+                },
+              },
+              h5: {
+                fontFamily: 'OBOSText',
                 fontWeight: theme('fontWeight.bold'),
-                fontSize: theme('fontSize.lg'),
-                '@media (min-width: theme("screens.md"))': {
-                  fontSize: theme('fontSize.xl'),
+                ...typography.headingXsText.small,
+                '@media (min-width: theme("screens.lg"))': {
+                  ...typography.headingXsText.large,
                 },
               },
               li: {
-                marginTop: '1.5em',
-                marginBottom: '1.5em',
+                ...typography.paragraphText.small,
+                '@media (min-width: theme("screens.lg"))': {
+                  ...typography.paragraphText.large,
+                },
               },
-              blockquote: {
-                fontWeight: theme('fontWeight.bold'),
-                fontStyle: 'normal',
+              p: {
+                ...typography.paragraphText.small,
+                '@media (min-width: theme("screens.lg"))': {
+                  ...typography.paragraphText.large,
+                },
               },
-              'blockquote p:first-of-type::before': {
-                content: '"«"',
+              blockquote: {
+                // Reset defaults:
+                marginBottom: 'unset',
+                padding: 'unset',
+                border: 'unset',
+                fontWeight: theme('fontWeight.medium'),
+                fontStyle: 'italic',
+                display: typography.blockquoteText.display,
+                gridTemplateColumns:
+                  typography.blockquoteText.gridTemplateColumns,
+                columnGap: typography.blockquoteText.columnGap,
+                paddingTop: '1rem',
+                ...typography.blockquoteText.small,
+                '@media (min-width: theme("screens.lg"))': {
+                  ...typography.blockquoteText.large,
+                },
               },
-              'blockquote p:last-of-type::after': {
-                content: '"»"',
+              'blockquote::before': {
+                ...typography.blockquoteText.before,
               },
               '[class~="lead"]': {
                 fontWeight: theme('fontWeight.medium'),
+                ...typography.leadText.small,
+                '@media (min-width: theme("screens.lg"))': {
+                  ...typography.leadText.large,
+                },
+              },
+              '[class~="description"]': {
+                ...typography.descriptionText.small,
+                '@media (min-width: theme("screens.lg"))': {
+                  ...typography.descriptionText.large,
+                },
               },
             },
           },
@@ -276,8 +572,34 @@ module.exports = (options = {}) => {
   };
 };
 
+/**
+ * A function that takes in a hex color as a string and returns a string with the color's rgb values.
+ * @param {string} hex
+ * @returns {string} The rgb values of the color.
+ */
+function hexToRgb(hex) {
+  // Remove the hash (#) at the start if it's there
+  let hexValue = hex.replace(/^#/, '');
+
+  // If the hex value is shorthand (3 characters), expand it to 6 characters
+  if (hexValue.length === 3) {
+    hexValue = hexValue
+      .split('')
+      .map((char) => char + char)
+      .join('');
+  }
+
+  // Parse the r, g, and b values from the hex string
+  const r = Number.parseInt(hexValue.substring(0, 2), 16);
+  const g = Number.parseInt(hexValue.substring(2, 4), 16);
+  const b = Number.parseInt(hexValue.substring(4, 6), 16);
+
+  // Return the RGB values as a whitespace-separated string
+  return `${r} ${g} ${b}`;
+}
+
 // These custom components are only used for v1 compat
-const button = plugin(function ({ addComponents, theme }) {
+const button = plugin(({ addComponents, theme }) => {
   const hoverLoadingBgColor = 'rgba(0, 0, 0, 0.1)';
 
   addComponents({
@@ -334,7 +656,7 @@ const button = plugin(function ({ addComponents, theme }) {
   });
 });
 
-const radio = plugin(function ({ addComponents, theme }) {
+const radio = plugin(({ addComponents, theme }) => {
   addComponents({
     '.radio': {
       // hide the native radio input
@@ -379,7 +701,7 @@ const radio = plugin(function ({ addComponents, theme }) {
   });
 });
 
-const checkbox = plugin(function ({ addComponents, theme }) {
+const checkbox = plugin(({ addComponents, theme }) => {
   addComponents({
     '.checkbox': {
       '&::before': {
@@ -400,7 +722,7 @@ const checkbox = plugin(function ({ addComponents, theme }) {
   });
 });
 
-const snackbar = plugin(function ({ addComponents, theme }) {
+const snackbar = plugin(({ addComponents, theme }) => {
   addComponents({
     '.snackbar': {
       'grid-template-columns': 'min-content auto',