@obosbbl/grunnmuren-tailwind 2.0.0-canary.1 → 2.0.0-canary.3

package/README.md

@@ -29,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/**/*.mjs',
+    './node_modules/@obosbbl/grunnmuren-react/dist/**/*.{mjs,js}',
   ],
 };
 ```
@@ -57,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.1",
+  "version": "2.0.0-canary.3",
   "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.3"
   },
   "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,147 @@
 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',
+    },
   },
-  {
-    fontWeight: 400,
-    fontStyle: 'italic',
-    url: 'https://www.obos.no/fonts/OBOSText-Italic.woff2',
+  headingLText: {
+    fontWeight: 'semibold',
+    small: {
+      fontSize: '1.8125rem',
+      lineHeight: '2.75rem',
+    },
+    large: {
+      fontSize: '2.25rem',
+      lineHeight: '3.5rem',
+    },
   },
-  {
-    fontWeight: 500,
-    fontStyle: 'normal',
-    url: 'https://www.obos.no/fonts/OBOSText-Medium.woff2',
+  headingMText: {
+    fontWeight: 'medium',
+    small: {
+      fontSize: '1.4375rem',
+      lineHeight: '2.25rem',
+    },
+    large: {
+      fontSize: '1.625rem',
+      lineHeight: '2.5625rem',
+    },
   },
-  {
-    fontWeight: 700,
-    fontStyle: 'normal',
-    url: 'https://www.obos.no/fonts/OBOSText-Bold.woff2',
+  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',
+  },
+  leadText: {
+    fontWeight: 'medium',
+    small: {
+      fontSize: '1.4375rem',
+      lineHeight: '2.25rem',
+    },
+    large: {
+      fontSize: '1.625rem',
+      lineHeight: '2.5625rem',
+    },
+  },
+  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',
+    },
+  },
+  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 +154,17 @@ 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(function ({ addBase, addComponents, theme }) {
         addBase({
           html: {
-            '@apply text-black antialiased font-normal': {},
+            '@apply text-black antialiased font-normal font-text': {},
           },
           b: {
             fontWeight: 500,
@@ -65,6 +179,15 @@ module.exports = (options = {}) => {
         });
 
         addComponents({
+          '.page-layout': {
+            display: 'flex',
+            flexDirection: 'column',
+            minHeight: '100vh',
+          },
+          '.page-layout-main': {
+            backgroundColor: theme('colors.white'),
+            flexGrow: '1',
+          },
           '.container': {
             width: '100%',
             paddingLeft: '1rem',
@@ -85,56 +208,120 @@ module.exports = (options = {}) => {
       }),
 
       plugin(function ({ 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 h1 = '@apply font-bold text-[28px]/[38px] md:text-[40px]/[56px]';
-        const h2 = '@apply font-bold text-[24px]/[30px] md:text-[32px]/[42px]';
-        const h3 = '@apply font-bold text-[20px]/[30px] md:text-[24px]/[34px]';
-        const h4 = '@apply font-bold text-[18px]/[24px] md:text-[20px]/[28px]';
+        const headingXl = `@apply font-display font-${headingXlText.fontWeight} text-[${headingXlText.small.fontSize}]/[${headingXlText.small.lineHeight}] md:text-[${headingXlText.large.fontSize}]/[${headingXlText.large.lineHeight}]`;
+        const headingL = `@apply font-display font-${headingLText.fontWeight} text-[${headingLText.small.fontSize}]/[${headingLText.small.lineHeight}] md:text-[${headingLText.large.fontSize}]/[${headingLText.large.lineHeight}]`;
+        const headingM = `@apply font-${headingMText.fontWeight} text-[${headingMText.small.fontSize}]/[${headingMText.small.lineHeight}] md:text-[${headingMText.large.fontSize}]/[${headingMText.large.lineHeight}]`;
+        const headingS = `@apply font-${headingSText.fontWeight} text-[${headingSText.small.fontSize}]/[${headingSText.small.lineHeight}] md:text-[${headingSText.large.fontSize}]/[${headingSText.large.lineHeight}]`;
+        const headingXs = `@apply font-${headingXsText.fontWeight} text-[${headingXsText.small.fontSize}]/[${headingXsText.small.lineHeight}] md: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}] md: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}] md: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}] md: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]: {},
           },
         });
       }),
       plugin(function ({ 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: {
@@ -191,7 +378,17 @@ module.exports = (options = {}) => {
         },
       },
       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',
+        ],
       },
       extend: {
         maxWidth: {
@@ -215,8 +412,7 @@ 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'),
               color: theme('colors.black'),
@@ -225,49 +421,84 @@ module.exports = (options = {}) => {
                 fontWeight: 400,
               },
               h1: {
-                fontWeight: theme('fontWeight.bold'),
-                fontSize: theme('fontSize.3xl'),
+                fontFamily: 'OBOSDisplay',
+                fontWeight: theme('fontWeight.semibold'),
+                ...typography.headingXlText.small,
                 '@media (min-width: theme("screens.md"))': {
-                  fontSize: theme('fontSize.5xl'),
+                  ...typography.headingXlText.large,
                 },
               },
               h2: {
-                fontWeight: theme('fontWeight.bold'),
-                fontSize: theme('fontSize.2xl'),
+                fontFamily: 'OBOSDisplay',
+                fontWeight: theme('fontWeight.semibold'),
+                ...typography.headingLText.small,
                 '@media (min-width: theme("screens.md"))': {
-                  fontSize: theme('fontSize.4xl'),
+                  ...typography.headingLText.large,
                 },
               },
               h3: {
-                fontWeight: theme('fontWeight.bold'),
-                fontSize: theme('fontSize.xl'),
+                fontWeight: theme('fontWeight.medium'),
+                ...typography.headingMText.small,
                 '@media (min-width: theme("screens.md"))': {
-                  fontSize: theme('fontSize.2xl'),
+                  ...typography.headingMText.large,
                 },
               },
               h4: {
+                fontWeight: theme('fontWeight.medium'),
+                ...typography.headingSText.small,
+                '@media (min-width: theme("screens.md"))': {
+                  ...typography.headingSText.large,
+                },
+              },
+              h5: {
                 fontWeight: theme('fontWeight.bold'),
-                fontSize: theme('fontSize.lg'),
+                ...typography.headingXsText.small,
                 '@media (min-width: theme("screens.md"))': {
-                  fontSize: theme('fontSize.xl'),
+                  ...typography.headingXsText.large,
                 },
               },
               li: {
                 marginTop: '1.5em',
                 marginBottom: '1.5em',
               },
-              blockquote: {
-                fontWeight: theme('fontWeight.bold'),
-                fontStyle: 'normal',
+              p: {
+                ...typography.paragraphText.small,
+                '@media (min-width: theme("screens.md"))': {
+                  ...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.md"))': {
+                  ...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.md"))': {
+                  ...typography.leadText.large,
+                },
+              },
+              '[class~="description"]': {
+                ...typography.descriptionText.small,
+                '@media (min-width: theme("screens.md"))': {
+                  ...typography.descriptionText.large,
+                },
               },
             },
           },