@obosbbl/grunnmuren-tailwind 0.2.0 → 0.3.1

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.0",
+  "version": "0.3.1",
   "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,7 +157,10 @@ const snackbar = plugin(function ({ addComponents, theme }) {
   });
 });
 
-module.exports = (opts = { useLegacyFont: false }) => {
+const defaultOpts = { useLegacyFont: false, fontBasePath: '/fonts' };
+
+module.exports = (userOptions) => {
+  const opts = userOptions ? { ...defaultOpts, ...userOptions } : defaultOpts;
   let fontFamily = 'OBOSFont';
   let fonts = obosFonts;
   if (opts.useLegacyFont) {
@@ -189,6 +192,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': {
@@ -245,7 +252,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',
             },
           })),
@@ -339,6 +346,8 @@ module.exports = (opts = { useLegacyFont: false }) => {
             css: {
               '--tw-prose-headings': theme('colors.black'),
               '--tw-prose-lead': 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: {
@@ -356,6 +365,10 @@ module.exports = (opts = { useLegacyFont: false }) => {
               h4: {
                 fontWeight: 'bold',
               },
+              li: {
+                marginTop: '1.5em',
+                marginBottom: '1.5em',
+              },
               '[class~="lead"]': {
                 fontWeight: 500,
               },