@obosbbl/grunnmuren-tailwind 0.1.0 → 0.3.0

package/README.md

@@ -12,8 +12,37 @@ npm install -D @obosbbl/grunnmuren-tailwind tailwindcss
 
 ```js
 // tailwind.config.js
+
+// Regular usage
 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}',
+  ],
+};
+
+// Usage with options
+module.exports = {
+  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/).
+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
+
+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.1.0",
+  "version": "0.3.0",
   "description": "Grunnmuren Tailwind preset",
   "license": "MIT",
   "type": "commonjs",

package/tailwind-base.cjs

@@ -1,26 +1,49 @@
 const plugin = require('tailwindcss/plugin');
 
 // naively assume all fonts are hosted at the following paths at the root of the app
-const fonts = [
+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',
+  },
+];
+
+const obosFonts = [
+  {
+    fontWeight: 400,
+    fontStyle: 'normal',
+    url: '/OBOSText-Regular.woff2',
+  },
+  {
+    fontWeight: 400,
+    fontStyle: 'italic',
+    url: '/OBOSText-Italic.woff2',
+  },
+  {
+    fontWeight: 500,
+    fontStyle: 'normal',
+    url: '/OBOSText-Medium.woff2',
+  },
+  {
+    fontWeight: 700,
+    fontStyle: 'normal',
+    url: '/OBOSText-Bold.woff2',
   },
 ];
 
@@ -29,7 +52,7 @@ const button = plugin(function ({ addComponents }) {
   // ideally this would be solved by just darkening the button background,
   // but that doesn't really work since some of the button variations have transparent backgrounds
   addComponents({
-    '.gm-button': {
+    '.button': {
       '&::after': {
         content: '""',
         position: 'absolute',
@@ -52,7 +75,7 @@ const button = plugin(function ({ addComponents }) {
 
 const checkbox = plugin(function ({ addComponents }) {
   addComponents({
-    '.gm-checkbox': {
+    '.checkbox': {
       '&::before': {
         content: '""',
         width: '0.65em',
@@ -92,16 +115,16 @@ const headings = plugin(function ({ addBase, addComponents }) {
   });
 
   addComponents({
-    '.gm-h1': {
+    '.h1': {
       [h1]: {},
     },
-    '.gm-h2': {
+    '.h2': {
       [h2]: {},
     },
-    '.gm-h3': {
+    '.h3': {
       [h3]: {},
     },
-    '.gm-h4': {
+    '.h4': {
       [h4]: {},
     },
   });
@@ -109,230 +132,247 @@ const headings = plugin(function ({ addBase, addComponents }) {
 
 const snackbar = plugin(function ({ addComponents, theme }) {
   addComponents({
-    '.gm-snackbar': {
+    '.snackbar': {
       'grid-template-columns': 'min-content auto',
       'grid-template-areas': '"icon header" ". content" "actions actions"',
     },
     [`@media(min-width: ${theme('screens.md')})`]: {
-      '.gm-snackbar': {
+      '.snackbar': {
         'grid-template-columns': 'min-content auto auto',
         'grid-template-areas': '"icon header actions" ". content content"',
       },
     },
-    '.gm-snackbar-icon': {
+    '.snackbar-icon': {
       'grid-area': 'icon',
     },
-    '.gm-snackbar-header': {
+    '.snackbar-header': {
       'grid-area': 'header',
     },
-    '.gm-snackbar-content': {
+    '.snackbar-content': {
       'grid-area': 'content',
     },
-    '.gm-snackbar-actions': {
+    '.snackbar-actions': {
       'grid-area': 'actions',
     },
   });
 });
 
-module.exports = {
-  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,
-    plugin(function ({ addBase, addUtilities, addComponents }) {
-      addBase({
-        html: {
-          '@apply text-black antialiased font-normal': {},
-        },
-        b: {
-          fontWeight: 500,
-        },
-        strong: {
-          fontWeight: 500,
-        },
-        a: {
-          '@apply underline': {},
-        },
-        '::selection': { '@apply bg-green-light text-black': {} },
-      });
-      addComponents({
-        '.container': {
-          width: '100%',
-          paddingLeft: '1rem',
-          paddingRight: '1rem',
-          marginLeft: 'auto',
-          marginRight: 'auto',
-          maxWidth: '90rem',
-        },
-        '.container-prose': {
-          width: '100%',
-          paddingLeft: '1rem',
-          paddingRight: '1rem',
-          marginLeft: 'auto',
-          marginRight: 'auto',
-          maxWidth: '37rem',
-        },
-        // that thin blue line at the top
-        '.gm-topline::before': {
-          display: 'block',
-          width: '100%',
-          height: '5px',
-          content: '""',
-          position: 'fixed',
-          left: '0',
-          top: '0',
-          right: '0',
-          // FIXME: Not sure why this doesn't work
-          //backgroundColor: theme('colors.blue'),
-          backgroundColor: '#0047BA',
-          zIndex: '100',
-        },
-        /**
-         * Round the corners of our main content.
-         * Protip: Use this together with navbar, footer and `bg-blue` class on the body.
-         */
-        '.gm-pagemain': {
-          backgroundColor: '#fff',
-          borderRadius: '2rem',
-          overflow: 'hidden',
-        },
-      });
-      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
-        '.fake-font-bold': {
-          '-webkit-text-stroke': '1px',
-        },
-      });
-    }),
-    plugin(function ({ addBase }) {
-      addBase(
-        fonts.map((font) => ({
-          '@font-face': {
-            fontFamily: 'Gordita',
-            fontWeight: font.fontWeight,
-            fontStyle: font.fontStyle,
-            src: `url('${font.url}') format('woff2')`,
-            fontDisplay: 'swap',
+module.exports = (opts = { useLegacyFont: false, fontBasePath: '/fonts' }) => {
+  let fontFamily = 'OBOSFont';
+  let fonts = obosFonts;
+  if (opts.useLegacyFont) {
+    fontFamily = 'Gordita';
+    fonts = gorditaFonts;
+  }
+
+  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,
+      plugin(function ({ addBase, addUtilities, addComponents, theme }) {
+        addBase({
+          html: {
+            '@apply text-black antialiased font-normal': {},
           },
-        })),
-      );
-    }),
-  ],
-  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
+          b: {
+            fontWeight: 500,
+          },
+          strong: {
+            fontWeight: 500,
+          },
+          a: {
+            '@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': {
+            width: '100%',
+            paddingLeft: '1rem',
+            paddingRight: '1rem',
+            marginLeft: 'auto',
+            marginRight: 'auto',
+            maxWidth: '90rem',
+          },
+          '.container-prose': {
+            width: '100%',
+            paddingLeft: '1rem',
+            paddingRight: '1rem',
+            marginLeft: 'auto',
+            marginRight: 'auto',
+            maxWidth: '37rem',
+          },
+          // 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',
+          },
+          /**
+           * Round the corners of our main content.
+           * Protip: Use this together with navbar, footer and `bg-blue` class on the body.
+           */
+          '.pagemain': {
+            backgroundColor: '#fff',
+            borderRadius: '2rem',
+            overflow: 'hidden',
+          },
+        });
+        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
+          '.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,
     },
-    extend: {
-      maxWidth: {
-        // Override Tailwinds default prose width of 60 chars to 48. Roughly 590 pixels
-        prose: '48ch',
-      },
-      width: {
-        prose: '48ch',
-      },
-      screens: {
-        // replicate the smaller than breakpoint from Windi. Even though we are mobile first, it is really nice with an escape hatch sometimes
-        '<md': { max: '767.9px' },
-      },
-      spacing: {
-        18: '4.5rem',
+    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
       },
-      colors: {
-        black: '#333',
-        white: '#fff',
-        gray: {
-          // TODO: Figure out how to work this into the color scale
-          concrete: '#f1f1f1',
-          // Gray
-          dark: '#595959',
-          // Medium gray
-          DEFAULT: '#818181',
-          // Light gray
-          light: '#E6E6E6',
+      extend: {
+        maxWidth: {
+          // Override Tailwinds default prose width of 60 chars to 48. Roughly 590 pixels
+          prose: '590px',
         },
-        blue: {
-          // light blue
-          lightest: '#DEEFF5',
-          // OBOS Sky
-          light: '#BEDFEC',
-          // OBOS Blue/Primary brand
-          DEFAULT: '#0047BA',
-          // OBOS Ocean
-          dark: '#002169',
+        width: {
+          prose: '590px',
         },
-        green: {
-          // light green
-          lightest: '#E6F5F0',
-          // OBOS Mint
-          light: '#CDECE2',
-          // OBOS Green/Primary brand
-          DEFAULT: '#008761',
-          // OBOS Forest
-          dark: '#00524C',
+        screens: {
+          // replicate the smaller than breakpoint from Windi. Even though we are mobile first, it is really nice with an escape hatch sometimes
+          '<md': { max: '767.9px' },
         },
-        red: {
-          // error red
-          light: '#faedef',
-          DEFAULT: '#cd465e',
+        spacing: {
+          18: '4.5rem',
         },
-        orange: {
-          light: '#f8e5c9',
-          DEFAULT: '#e8a74a',
+        colors: {
+          black: '#333',
+          white: '#fff',
+          gray: {
+            // TODO: Figure out how to work this into the color scale
+            concrete: '#f1f1f1',
+            // Gray
+            dark: '#595959',
+            // Medium gray
+            DEFAULT: '#818181',
+            // Light gray
+            light: '#E6E6E6',
+          },
+          blue: {
+            // light blue
+            lightest: '#DEEFF5',
+            // OBOS Sky
+            light: '#BEDFEC',
+            // OBOS Blue/Primary brand
+            DEFAULT: '#0047BA',
+            // OBOS Ocean
+            dark: '#002169',
+          },
+          green: {
+            // light green
+            lightest: '#E6F5F0',
+            // 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',
+          },
         },
-        yellow: {
-          // open house
-          DEFAULT: '#fff5d2',
+        fontFamily: {
+          sans: [fontFamily, 'sans-serif'],
         },
-      },
-      fontFamily: {
-        sans: ['Gordita', 'sans-serif'],
-      },
-      boxShadow: {
-        DEFAULT: '0 6px 4px 0 rgba(0, 33, 105, 0.25)',
-      },
-      typography: (theme) => ({
-        DEFAULT: {
-          css: {
-            '--tw-prose-headings': theme('colors.black'),
-            '--tw-prose-lead': theme('colors.black'),
-            color: theme('colors.black'),
-            maxWidth: '48ch',
-            a: {
-              fontWeight: 400,
-            },
-            h1: {
-              fontWeight: 'bold',
-            },
-            h2: {
-              fontWeight: 'bold',
-            },
-            h3: {
-              fontWeight: 'bold',
-            },
-            h4: {
-              fontWeight: 'bold',
-            },
-            '[class~="lead"]': {
-              fontWeight: 500,
+        boxShadow: {
+          DEFAULT: '0 6px 4px 0 rgba(0, 33, 105, 0.25)',
+        },
+        typography: (theme) => ({
+          DEFAULT: {
+            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: {
+                fontWeight: 400,
+              },
+              h1: {
+                fontWeight: 'bold',
+              },
+              h2: {
+                fontWeight: 'bold',
+              },
+              h3: {
+                fontWeight: 'bold',
+              },
+              h4: {
+                fontWeight: 'bold',
+              },
+              li: {
+                marginTop: '1.5em',
+                marginBottom: '1.5em',
+              },
+              '[class~="lead"]': {
+                fontWeight: 500,
+              },
             },
           },
-        },
-      }),
+        }),
+      },
     },
-  },
+  };
 };