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

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 OBOS
+Copyright (c) 2023 OBOS
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,48 +1,75 @@
 # @obosbbl/grunnmuren-tailwind
 
-Grunnmuren Tailwind preset.
+[![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.
 
 ## Install
 
 ```sh
-npm install -D @obosbbl/grunnmuren-tailwind tailwindcss
+# npm
+npm install -D @obosbbl/grunnmuren-tailwind@canary tailwindcss postcss autoprefixer
+
+# pnpm
+pnpm add -D @obosbbl/grunnmuren-tailwind@canary tailwindcss postcss autoprefixer
 ```
 
 ## Usage
 
+Configure Tailwind to use the preset
+
 ```js
 // tailwind.config.js
 
-// Regular usage
+/** @type {import('tailwindcss').Config} */
 module.exports = {
   presets: [require('@obosbbl/grunnmuren-tailwind')],
   content: [
-    // If using this together with Grunnmuren's React components
-    './node_modules/@obosbbl/grunnmuren-react/dist/**/*.js',
     // Add your own content sources as needed, eg:
-    './src/components/**/*.{ts,tsx}',
+    './src/app/**/*.{js,ts,jsx,tsx,}',
+
+    // If you're using Grunnmuren's React components
+    './node_modules/@obosbbl/grunnmuren-react/dist/**/*.mjs',
   ],
 };
+```
+
+Add the Tailwind directives to your CSS
+
+```css
+/* globals.css */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+Configure PostCSS to use Tailwind
+
+```js
+// postcss.config.js
 
-// Usage with options
 module.exports = {
-  presets: [require('@obosbbl/grunnmuren-tailwind')({ useLegacyFont: true, fontBasePath: '/mypath/myfonts' }),
-  // content: [ ... ]
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
 };
 ```
 
-### Fonts
+## Migrating from v1?
 
-The preset includes font declarations.
-You'll have to setup your app so it serves the necessary [font files](../react/public/fonts/).
-By default the fonts should be under `/fonts/` but you can override this with the config option `fontBasePath`.
-See the [preset implementation](./tailwind-base.cjs).
+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.
 
-## Options
+To do that you need to configure the preset with `legacyV1Compatibility` option.
 
-The preset supports the following options:
+```js
+// tailwind.config.js
 
-| Name          | Default value | Description                                  |
-| ------------- | ------------- | -------------------------------------------- |
-| useLegacyFont | `false`       | Whether to use the fonts from the old design |
-| fontBasePath  | `/fonts`      | Path to where the fonts are hosted           |
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  presets: [
+    require('@obosbbl/grunnmuren-tailwind')({ legacyV1Compatibility: true }),
+  ],
+};
+```

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "@obosbbl/grunnmuren-tailwind",
-  "version": "0.9.1",
+  "version": "2.0.0-canary.1",
   "description": "Grunnmuren Tailwind preset",
-  "license": "MIT",
-  "type": "commonjs",
   "repository": {
-    "url": "https://github.com/code-obos/grunnmuren",
-    "directory": "packages/tailwind"
+    "url": "https://github.com/code-obos/grunnmuren"
   },
+  "license": "MIT",
+  "type": "commonjs",
   "exports": {
     ".": "./tailwind-base.cjs"
   },
@@ -15,14 +14,13 @@
     "tailwind-base.cjs"
   ],
   "dependencies": {
-    "@tailwindcss/aspect-ratio": "0.4.2",
-    "@tailwindcss/typography": "0.5.9"
+    "@tailwindcss/aspect-ratio": "^0.4.2",
+    "@tailwindcss/typography": "^0.5.10"
   },
   "devDependencies": {
-    "tailwindcss": "3.3.2",
-    "postcss": "8.4.23"
+    "tailwindcss": "3.3.5"
   },
   "peerDependencies": {
-    "tailwindcss": "^3.2"
+    "tailwindcss": "^3.3.5"
   }
 }

package/tailwind-base.cjs

@@ -1,52 +1,283 @@
 const plugin = require('tailwindcss/plugin');
 
-// naively assume all fonts are hosted at the following paths at the root of the app
-const gorditaFonts = [
-  {
-    fontWeight: 400,
-    fontStyle: 'normal',
-    url: '/gorditaregular-webfont.woff2',
-  },
-  {
-    fontWeight: 400,
-    fontStyle: 'italic',
-    url: '/gorditaregularitalic-webfont.woff2',
-  },
-  {
-    fontWeight: 500,
-    fontStyle: 'normal',
-    url: '/gorditamedium-webfont.woff2',
-  },
-  {
-    fontWeight: 700,
-    fontStyle: 'normal',
-    url: '/gorditabold-webfont.woff2',
-  },
-];
-
 const obosFonts = [
   {
     fontWeight: 400,
     fontStyle: 'normal',
-    url: '/OBOSText-Regular.woff2',
+    url: 'https://www.obos.no/fonts/OBOSText-Regular.woff2',
   },
   {
     fontWeight: 400,
     fontStyle: 'italic',
-    url: '/OBOSText-Italic.woff2',
+    url: 'https://www.obos.no/fonts/OBOSText-Italic.woff2',
   },
   {
     fontWeight: 500,
     fontStyle: 'normal',
-    url: '/OBOSText-Medium.woff2',
+    url: 'https://www.obos.no/fonts/OBOSText-Medium.woff2',
   },
   {
     fontWeight: 700,
     fontStyle: 'normal',
-    url: '/OBOSText-Bold.woff2',
+    url: 'https://www.obos.no/fonts/OBOSText-Bold.woff2',
   },
 ];
 
+/**
+ * @param {boolean} options.legacyV1Compatibility
+ */
+module.exports = (options = {}) => {
+  const v1CompatibilityPlugins = [];
+
+  if (options.legacyV1Compatibility) {
+    v1CompatibilityPlugins.push(
+      button,
+      checkbox,
+      radio,
+      snackbar,
+      require('@tailwindcss/aspect-ratio'),
+    );
+  }
+
+  const fontFamily = 'OBOSFont';
+  const fonts = obosFonts;
+  const containerSize = '92rem';
+
+  return {
+    plugins: [
+      ...v1CompatibilityPlugins,
+      require('@tailwindcss/typography'),
+      plugin(function ({ addBase, addComponents }) {
+        addBase({
+          html: {
+            '@apply text-black antialiased font-normal': {},
+          },
+          b: {
+            fontWeight: 500,
+          },
+          strong: {
+            fontWeight: 500,
+          },
+          a: {
+            'text-decoration': 'underline',
+          },
+          '::selection': { '@apply bg-mint text-black': {} },
+        });
+
+        addComponents({
+          '.container': {
+            width: '100%',
+            paddingLeft: '1rem',
+            paddingRight: '1rem',
+            marginLeft: 'auto',
+            marginRight: 'auto',
+            maxWidth: containerSize,
+          },
+          '.container-prose': {
+            width: '100%',
+            paddingLeft: '1rem',
+            paddingRight: '1rem',
+            marginLeft: 'auto',
+            marginRight: 'auto',
+            maxWidth: '45.5rem',
+          },
+        });
+      }),
+
+      plugin(function ({ addBase, addComponents }) {
+        // 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]';
+
+        if (options.legacyV1Compatibility) {
+          addBase({
+            h1: {
+              [h1]: {},
+            },
+            h2: {
+              [h2]: {},
+            },
+            h3: {
+              [h3]: {},
+            },
+            h4: {
+              [h4]: {},
+            },
+          });
+        }
+
+        addComponents({
+          '.h1': {
+            [h1]: {},
+          },
+          '.h2': {
+            [h2]: {},
+          },
+          '.h3': {
+            [h3]: {},
+          },
+          '.h4': {
+            [h4]: {},
+          },
+        });
+      }),
+      plugin(function ({ addBase }) {
+        addBase(
+          fonts.map((font) => ({
+            '@font-face': {
+              fontFamily,
+              fontWeight: font.fontWeight,
+              fontStyle: font.fontStyle,
+              src: `url('${font.url}') format('woff2')`,
+              fontDisplay: 'swap',
+            },
+          })),
+        );
+      }),
+    ],
+    theme: {
+      colors: {
+        inherit: 'inherit',
+        current: 'currentColor',
+        transparent: 'transparent',
+        black: '#333',
+        white: '#fff',
+        gray: {
+          DEFAULT: '#818181',
+          dark: '#595959',
+          light: '#E6E6E6',
+          lightest: '#f1f1f1',
+        },
+        sky: {
+          DEFAULT: '#BEDFEC',
+          light: '#DEEFF5',
+          lightest: '#EBF5F9',
+        },
+        mint: {
+          DEFAULT: '#CDECE2',
+          light: '#E6F5F0',
+          lightest: '#F0F9F6',
+        },
+        blue: {
+          // OBOS Blue/Primary brand
+          DEFAULT: '#0047BA',
+          light: '#BEDFEC',
+          lightest: '#DEEFF5',
+          // OBOS Ocean
+          dark: '#002169',
+        },
+        green: {
+          // OBOS Green/Primary brand
+          DEFAULT: '#008761',
+          lightest: '#E6F5F0',
+          light: '#CDECE2',
+          // OBOS Forest
+          dark: '#00524C',
+        },
+        red: {
+          DEFAULT: '#C0385D',
+          // error red
+          light: '#FAEDEF',
+        },
+        orange: {
+          DEFAULT: '#e8a74a',
+          light: '#f8e5c9',
+        },
+        yellow: {
+          // open house
+          DEFAULT: '#fff5d2',
+        },
+      },
+      fontFamily: {
+        sans: [fontFamily, 'sans-serif'],
+      },
+      extend: {
+        maxWidth: {
+          // Override Tailwinds default prose width of 60 chars.
+          prose: '696px',
+        },
+        width: {
+          prose: '696px',
+        },
+        spacing: {
+          18: '4.5rem',
+        },
+        borderColor: options.legacyV1Compatibility
+          ? ({ theme }) => ({
+              DEFAULT: theme('colors.gray.light', 'currentColor'),
+            })
+          : undefined,
+        typography: (theme) => ({
+          DEFAULT: {
+            css: {
+              '--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-counters': theme('colors.black'),
+              '--tw-prose-bullets': theme('colors.green.DEFAULT'),
+              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'),
+                },
+              },
+              h2: {
+                fontWeight: theme('fontWeight.bold'),
+                fontSize: theme('fontSize.2xl'),
+                '@media (min-width: theme("screens.md"))': {
+                  fontSize: theme('fontSize.4xl'),
+                },
+              },
+              h3: {
+                fontWeight: theme('fontWeight.bold'),
+                fontSize: theme('fontSize.xl'),
+                '@media (min-width: theme("screens.md"))': {
+                  fontSize: theme('fontSize.2xl'),
+                },
+              },
+              h4: {
+                fontWeight: theme('fontWeight.bold'),
+                fontSize: theme('fontSize.lg'),
+                '@media (min-width: theme("screens.md"))': {
+                  fontSize: theme('fontSize.xl'),
+                },
+              },
+              li: {
+                marginTop: '1.5em',
+                marginBottom: '1.5em',
+              },
+              blockquote: {
+                fontWeight: theme('fontWeight.bold'),
+                fontStyle: 'normal',
+              },
+              'blockquote p:first-of-type::before': {
+                content: '"«"',
+              },
+              'blockquote p:last-of-type::after': {
+                content: '"»"',
+              },
+              '[class~="lead"]': {
+                fontWeight: theme('fontWeight.medium'),
+              },
+            },
+          },
+        }),
+      },
+    },
+  };
+};
+
+// These custom components are only used for v1 compat
 const button = plugin(function ({ addComponents, theme }) {
   const hoverLoadingBgColor = 'rgba(0, 0, 0, 0.1)';
 
@@ -170,43 +401,6 @@ const checkbox = plugin(function ({ addComponents, theme }) {
   });
 });
 
-const headings = 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';
-
-  addBase({
-    h1: {
-      [h1]: {},
-    },
-    h2: {
-      [h2]: {},
-    },
-    h3: {
-      [h3]: {},
-    },
-    h4: {
-      [h4]: {},
-    },
-  });
-
-  addComponents({
-    '.h1': {
-      [h1]: {},
-    },
-    '.h2': {
-      [h2]: {},
-    },
-    '.h3': {
-      [h3]: {},
-    },
-    '.h4': {
-      [h4]: {},
-    },
-  });
-});
-
 const snackbar = plugin(function ({ addComponents, theme }) {
   addComponents({
     '.snackbar': {
@@ -233,300 +427,3 @@ const snackbar = plugin(function ({ addComponents, theme }) {
     },
   });
 });
-
-const defaultOpts = {
-  useLegacyFont: false,
-  fontBasePath: '/fonts',
-  useLegacyContainerSize: false,
-};
-
-module.exports = (userOptions) => {
-  const opts = userOptions ? { ...defaultOpts, ...userOptions } : defaultOpts;
-  let fontFamily = 'OBOSFont';
-  let fonts = obosFonts;
-  let containerSize = '92rem';
-  if (opts.useLegacyFont) {
-    fontFamily = 'Gordita';
-    fonts = gorditaFonts;
-  }
-
-  if (opts.useLegacyContainerSize) {
-    containerSize = '82rem';
-  }
-
-  return {
-    plugins: [
-      // TODO: Remove the aspect ratio plugin when Safari 14 usage is low enough
-      require('@tailwindcss/aspect-ratio'),
-      require('@tailwindcss/typography'),
-      button,
-      headings,
-      checkbox,
-      snackbar,
-      radio,
-      plugin(function ({ addBase, addUtilities, addComponents, theme }) {
-        addBase({
-          html: {
-            '@apply text-black antialiased font-normal': {},
-          },
-          b: {
-            fontWeight: 500,
-          },
-          strong: {
-            fontWeight: 500,
-          },
-          a: {
-            '@apply underline': {},
-          },
-          '::selection': { '@apply bg-mint text-black': {} },
-          // Remove the disclosure triangle in Safari if apply the `list-none` utility to the summary element
-          'summary.list-none::-webkit-details-marker': {
-            display: 'none',
-          },
-        });
-        addComponents({
-          '.container': {
-            width: '100%',
-            paddingLeft: '1rem',
-            paddingRight: '1rem',
-            marginLeft: 'auto',
-            marginRight: 'auto',
-            maxWidth: containerSize,
-          },
-          '.container-prose': {
-            width: '100%',
-            paddingLeft: '1rem',
-            paddingRight: '1rem',
-            marginLeft: 'auto',
-            marginRight: 'auto',
-            maxWidth: '45.5rem',
-          },
-          // that thin blue line at the top
-          '.topline::before': {
-            display: 'block',
-            width: '100%',
-            height: '5px',
-            content: '""',
-            position: 'fixed',
-            left: '0',
-            top: '0',
-            right: '0',
-            backgroundColor: theme('colors.blue.DEFAULT'),
-            zIndex: '100',
-          },
-          /**
-           * @deprecated use page-layout and page-layout-main instead
-           */
-          '.pagemain': {
-            backgroundColor: '#fff',
-            borderRadius: '1.5rem',
-            overflow: 'hidden',
-          },
-
-          '.page-layout': {
-            display: 'flex',
-            flexDirection: 'column',
-            minHeight: '100vh',
-          },
-          '.page-layout-main': {
-            backgroundColor: '#fff',
-            flexGrow: '1',
-          },
-        });
-        addUtilities({
-          // imitates a bold font, but doesn't cause layout due to element width change like with font-weight
-          // Note that this CSS isn't standardized, but it works in Fx, Chrome, Safari and Edge
-          /**
-           * @deprecated use font-bold instead
-           */
-          '.fake-font-bold': {
-            '-webkit-text-stroke': '1px',
-          },
-        });
-      }),
-      plugin(function ({ addBase }) {
-        addBase(
-          fonts.map((font) => ({
-            '@font-face': {
-              fontFamily,
-              fontWeight: font.fontWeight,
-              fontStyle: font.fontStyle,
-              src: `url('${opts.fontBasePath}${font.url}') format('woff2')`,
-              fontDisplay: 'swap',
-            },
-          })),
-        );
-      }),
-    ],
-    corePlugins: {
-      container: false,
-    },
-    theme: {
-      fontSize: {
-        sm: '0.875rem',
-        base: '1rem',
-        lg: '1.125rem', // 18px
-        xl: '1.25rem', // 20px
-        '2xl': '1.5rem', // 24px
-        '3xl': '1.875rem', // 28px
-        '4xl': '2rem', // 32px
-        '5xl': '2.5rem', // 40px
-      },
-      extend: {
-        maxWidth: {
-          // Override Tailwinds default prose width of 60 chars to 48. Roughly 590 pixels
-          prose: '696px',
-        },
-        width: {
-          prose: '696px',
-        },
-        screens: {
-          'max-md': { max: '767.9px' },
-          /**
-           * @deprecated Tailwind 3.2 has built in support for max-width breakpoints, but it only works
-           * with a "simple screens" configuration... We add `max-md` manually here, allow everyone to migrate off
-           * `<md`, then we can remove `screens` enitrely from this config.
-           */
-          '<md': { max: '767.9px' },
-        },
-        spacing: {
-          18: '4.5rem',
-        },
-        colors: {
-          black: '#333',
-          white: '#fff',
-          gray: {
-            // Dark Gray
-            dark: '#595959',
-            // gray
-            DEFAULT: '#818181',
-            // Light gray
-            light: '#E6E6E6',
-            // Lightest gray
-            lightest: '#f1f1f1',
-            // DEPRECATED concrete
-            concrete: '#f1f1f1',
-          },
-          sky: {
-            DEFAULT: '#BEDFEC',
-            light: '#DEEFF5',
-            lightest: '#EBF5F9',
-          },
-          mint: {
-            DEFAULT: '#CDECE2',
-            light: '#E6F5F0',
-            lightest: '#F0F9F6',
-          },
-          blue: {
-            // DEPRECATED light blue
-            lightest: '#DEEFF5',
-            // DEPRECATED OBOS Sky
-            light: '#BEDFEC',
-
-            // OBOS Blue/Primary brand
-            DEFAULT: '#0047BA',
-            // OBOS Ocean
-            dark: '#002169',
-          },
-          green: {
-            // DEPRECATED light green
-            lightest: '#E6F5F0',
-            // DEPRECATED OBOS Mint
-            light: '#CDECE2',
-
-            // OBOS Green/Primary brand
-            DEFAULT: '#008761',
-            // OBOS Forest
-            dark: '#00524C',
-          },
-          red: {
-            // error red
-            light: '#faedef',
-            DEFAULT: '#cd465e',
-          },
-          orange: {
-            light: '#f8e5c9',
-            DEFAULT: '#e8a74a',
-          },
-          yellow: {
-            // open house
-            DEFAULT: '#fff5d2',
-          },
-        },
-        borderColor: ({ theme }) => ({
-          DEFAULT: theme('colors.gray.light', 'currentColor'),
-        }),
-        fontFamily: {
-          sans: [fontFamily, 'sans-serif'],
-        },
-        boxShadow: {
-          DEFAULT: '0 6px 4px 0 rgba(0, 33, 105, 0.25)',
-        },
-        typography: (theme) => ({
-          DEFAULT: {
-            css: {
-              '--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-counters': theme('colors.black'),
-              // TODO: Increase bullet size. See design sketches
-              '--tw-prose-bullets': theme('colors.green.DEFAULT'),
-              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'),
-                },
-              },
-              h2: {
-                fontWeight: theme('fontWeight.bold'),
-                fontSize: theme('fontSize.2xl'),
-                '@media (min-width: theme("screens.md"))': {
-                  fontSize: theme('fontSize.4xl'),
-                },
-              },
-              h3: {
-                fontWeight: theme('fontWeight.bold'),
-                fontSize: theme('fontSize.xl'),
-                '@media (min-width: theme("screens.md"))': {
-                  fontSize: theme('fontSize.2xl'),
-                },
-              },
-              h4: {
-                fontWeight: theme('fontWeight.bold'),
-                fontSize: theme('fontSize.lg'),
-                '@media (min-width: theme("screens.md"))': {
-                  fontSize: theme('fontSize.xl'),
-                },
-              },
-              li: {
-                marginTop: '1.5em',
-                marginBottom: '1.5em',
-              },
-              blockquote: {
-                fontWeight: theme('fontWeight.bold'),
-                fontStyle: 'normal',
-              },
-              'blockquote p:first-of-type::before': {
-                content: '"«"',
-              },
-              'blockquote p:last-of-type::after': {
-                content: '"»"',
-              },
-              '[class~="lead"]': {
-                fontWeight: theme('fontWeight.medium'),
-              },
-            },
-          },
-        }),
-      },
-    },
-  };
-};