@obosbbl/grunnmuren-tailwind 0.2.1 → 0.4.0

package/README.md

@@ -26,14 +26,17 @@ module.exports = {
 
 // Usage with options
 module.exports = {
-  presets: [require('@obosbbl/grunnmuren-tailwind')({ useLegacyFont: true }),
+  presets: [require('@obosbbl/grunnmuren-tailwind')({ useLegacyFont: true, fontBasePath: '/mypath/myfonts' }),
   // content: [ ... ]
 };
 ```
 
 ### Fonts
 
-The preset includes font declarations. You'll have to setup your app so it serves the necessary [font files](../react/public/fonts/) at the path `/fonts/`. See the [preset implementation](./tailwind-base.cjs).
+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).
 
 ## Options
 
@@ -42,3 +45,4 @@ The preset supports the following options:
 | Name          | Default value | Description                                  |
 | ------------- | ------------- | -------------------------------------------- |
 | useLegacyFont | `false`       | Whether to use the fonts from the old design |
+| fontBasePath  | `/fonts`      | Path to where the fonts are hosted           |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-tailwind",
-  "version": "0.2.1",
+  "version": "0.4.0",
   "description": "Grunnmuren Tailwind preset",
   "license": "MIT",
   "type": "commonjs",

package/tailwind-base.cjs

@@ -5,22 +5,22 @@ const gorditaFonts = [
   {
     fontWeight: 400,
     fontStyle: 'normal',
-    url: '/fonts/gorditaregular-webfont.woff2',
+    url: '/gorditaregular-webfont.woff2',
   },
   {
     fontWeight: 400,
     fontStyle: 'italic',
-    url: '/fonts/gorditaregularitalic-webfont.woff2',
+    url: '/gorditaregularitalic-webfont.woff2',
   },
   {
     fontWeight: 500,
     fontStyle: 'normal',
-    url: '/fonts/gorditamedium-webfont.woff2',
+    url: '/gorditamedium-webfont.woff2',
   },
   {
     fontWeight: 700,
     fontStyle: 'normal',
-    url: '/fonts/gorditabold-webfont.woff2',
+    url: '/gorditabold-webfont.woff2',
   },
 ];
 
@@ -28,22 +28,22 @@ const obosFonts = [
   {
     fontWeight: 400,
     fontStyle: 'normal',
-    url: '/fonts/OBOSText-Regular.woff2',
+    url: '/OBOSText-Regular.woff2',
   },
   {
     fontWeight: 400,
     fontStyle: 'italic',
-    url: '/fonts/OBOSText-Italic.woff2',
+    url: '/OBOSText-Italic.woff2',
   },
   {
     fontWeight: 500,
     fontStyle: 'normal',
-    url: '/fonts/OBOSText-Medium.woff2',
+    url: '/OBOSText-Medium.woff2',
   },
   {
     fontWeight: 700,
     fontStyle: 'normal',
-    url: '/fonts/OBOSText-Bold.woff2',
+    url: '/OBOSText-Bold.woff2',
   },
 ];
 
@@ -157,14 +157,26 @@ const snackbar = plugin(function ({ addComponents, theme }) {
   });
 });
 
-module.exports = (opts = { useLegacyFont: false }) => {
+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 = '90rem';
   if (opts.useLegacyFont) {
     fontFamily = 'Gordita';
     fonts = gorditaFonts;
   }
 
+  if (opts.useLegacyContainerSize) {
+    containerSize = '80rem';
+  }
+
   return {
     plugins: [
       // TODO: Remove the aspect ratio plugin when Safari 14 usage is low enough
@@ -189,6 +201,10 @@ module.exports = (opts = { useLegacyFont: false }) => {
             '@apply underline': {},
           },
           '::selection': { '@apply bg-green-light 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': {
@@ -197,7 +213,7 @@ module.exports = (opts = { useLegacyFont: false }) => {
             paddingRight: '1rem',
             marginLeft: 'auto',
             marginRight: 'auto',
-            maxWidth: '90rem',
+            maxWidth: containerSize,
           },
           '.container-prose': {
             width: '100%',
@@ -245,7 +261,7 @@ module.exports = (opts = { useLegacyFont: false }) => {
               fontFamily,
               fontWeight: font.fontWeight,
               fontStyle: font.fontStyle,
-              src: `url('${font.url}') format('woff2')`,
+              src: `url('${opts.fontBasePath}${font.url}') format('woff2')`,
               fontDisplay: 'swap',
             },
           })),