@obosbbl/grunnmuren-tailwind 0.9.0 → 2.0.0

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

@@ -23,26 +23,4 @@ module.exports = {
     './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,12 +1,11 @@
 {
   "name": "@obosbbl/grunnmuren-tailwind",
-  "version": "0.9.0",
+  "version": "2.0.0",
   "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"
   },
   "exports": {
     ".": "./tailwind-base.cjs"
@@ -14,15 +13,11 @@
   "files": [
     "tailwind-base.cjs"
   ],
-  "dependencies": {
-    "@tailwindcss/aspect-ratio": "0.4.2",
-    "@tailwindcss/typography": "0.5.9"
-  },
+  "dependencies": {},
   "devDependencies": {
-    "tailwindcss": "3.3.2",
-    "postcss": "8.4.23"
+    "tailwindcss": "3.3.4"
   },
   "peerDependencies": {
-    "tailwindcss": "^3.2"
+    "tailwindcss": "^3.4"
   }
 }

package/tailwind-base.cjs

@@ -1,270 +1,35 @@
 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',
   },
 ];
 
-const button = plugin(function ({ addComponents, theme }) {
-  const hoverLoadingBgColor = 'rgba(0, 0, 0, 0.1)';
-
-  addComponents({
-    '.button': {
-      // The Tailwind utilities we use for focus styling are kinda hard to "translate", so using the @apply utility here, even though mixing styles are meh...
-      '@apply focus:outline-none focus-visible:ring-2 focus-visible:ring-black ring-offset-2':
-        {},
-      position: 'relative',
-      textDecorationLine: 'none',
-      display: 'inline-flex',
-      alignItems: 'center',
-      gap: theme('spacing.3'),
-      border: '2px solid',
-      padding: `${theme('spacing.2')} ${theme('spacing.6')}`,
-      borderRadius: '0.75rem',
-      transition: `all 200ms ${theme('transitionTimingFunction.DEFAULT')}`,
-      fontWeight: theme('fontWeight.medium'),
-      width: 'fit-content',
-      '&:disabled': {
-        backgroundColor: theme('colors.gray.light'),
-        borderColor: theme('colors.gray.light'),
-        color: theme('colors.black'),
-        pointerEvents: 'none',
-      },
-      '&:hover': {
-        borderRadius: '0.375rem',
-      },
-      '&::after': {
-        content: '""',
-        position: 'absolute',
-        backgroundColor: 'transparent',
-        display: 'block',
-        top: '-2px',
-        left: '-2px',
-        right: '-2px',
-        bottom: '-2px',
-        borderRadius: 'inherit',
-      },
-      // adds a shade on the button when hovered
-      // 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
-      '&:hover::after': {
-        backgroundColor: hoverLoadingBgColor,
-        transition: `all 200ms ${theme('transitionTimingFunction.DEFAULT')}`,
-      },
-      // We use aria-busy to indicate loading state
-      '&[aria-busy="true"] > *': {
-        visibility: 'hidden',
-      },
-      '&[aria-busy="true"]::after': {
-        backgroundColor: hoverLoadingBgColor,
-      },
-    },
-  });
-});
-
-const radio = plugin(function ({ addComponents, theme }) {
-  addComponents({
-    '.radio': {
-      // hide the native radio input
-      appearance: 'none',
-      // not removed via appeareance
-      margin: 0,
-      height: '1.25rem',
-      width: '1.25rem',
-      borderRadius: '50%',
-      border: `2px solid ${theme('colors.gray.dark')}`,
-      cursor: 'pointer',
-      // use grid to handle the checked:before styles
-      display: 'inline-grid',
-      placeContent: 'center',
-      // Prevent flex container from altering the size of the radio button
-      flex: '0 0 auto',
-      // magic number that tries to keep the input horizontally centered in relation to the first line of the label text
-      transform: 'translateY(0.095em)',
-      '&:checked': {
-        borderColor: theme('colors.green.DEFAULT'),
-      },
-      '&:focus-visible': {
-        outline: '1px solid currentColor',
-        outlineOffset: '4px',
-      },
-      '&::before': {
-        content: '""',
-        display: 'block',
-        borderRadius: '50%',
-        transform: 'scale(0)',
-        width: '0.65em',
-        height: '0.65em',
-        transition: '120ms transform ease-in-out',
-        boxShadow: `inset 1em 1em ${theme('colors.green.DEFAULT')}`,
-        /* Windows High Contrast Mode */
-        backgroundColor: 'CanvasText',
-      },
-      '&:checked::before': {
-        transform: 'scale(1)',
-      },
-    },
-  });
-});
-
-const checkbox = plugin(function ({ addComponents, theme }) {
-  addComponents({
-    '.checkbox': {
-      '&::before': {
-        content: '""',
-        width: '0.65em',
-        height: '0.65em',
-        transform: 'scale(0)',
-        transition: '120ms transform ease-in-out',
-        backgroundColor: theme('colors.white'),
-        'box-shadow': 'inset 1em 1em currentColor',
-        'clip-path':
-          'polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%)',
-      },
-      '&:checked::before': {
-        transform: 'scale(1)',
-      },
-    },
-  });
-});
-
-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': {
-      'grid-template-columns': 'min-content auto',
-      'grid-template-areas': '"icon header" ". content" "actions actions"',
-    },
-    [`@media(min-width: ${theme('screens.md')})`]: {
-      '.snackbar': {
-        'grid-template-columns': 'min-content auto auto',
-        'grid-template-areas': '"icon header actions" ". content content"',
-      },
-    },
-    '.snackbar-icon': {
-      'grid-area': 'icon',
-    },
-    '.snackbar-header': {
-      'grid-area': 'header',
-    },
-    '.snackbar-content': {
-      'grid-area': 'content',
-    },
-    '.snackbar-actions': {
-      'grid-area': 'actions',
-    },
-  });
-});
-
-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';
-  }
+module.exports = () => {
+  const fontFamily = 'OBOSFont';
+  const fonts = obosFonts;
 
   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 }) {
+      plugin(function ({ addBase }) {
         addBase({
           html: {
             '@apply text-black antialiased font-normal': {},
@@ -275,73 +40,7 @@ module.exports = (userOptions) => {
           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 }) {
@@ -351,180 +50,74 @@ module.exports = (userOptions) => {
               fontFamily,
               fontWeight: font.fontWeight,
               fontStyle: font.fontStyle,
-              src: `url('${opts.fontBasePath}${font.url}') format('woff2')`,
+              src: `url('${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',
+      colors: {
+        black: '#333',
+        white: '#fff',
+        gray: {
+          DEFAULT: '#818181',
+          dark: '#595959',
+          light: '#E6E6E6',
+          lightest: '#f1f1f1',
         },
-        width: {
-          prose: '696px',
+        sky: {
+          DEFAULT: '#BEDFEC',
+          light: '#DEEFF5',
+          lightest: '#EBF5F9',
         },
-        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' },
+        mint: {
+          DEFAULT: '#CDECE2',
+          light: '#E6F5F0',
+          lightest: '#F0F9F6',
         },
-        spacing: {
-          18: '4.5rem',
+        blue: {
+          // OBOS Blue/Primary brand
+          DEFAULT: '#0047BA',
+          light: '#BEDFEC',
+          lightest: '#DEEFF5',
+          // OBOS Ocean
+          dark: '#002169',
         },
-        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',
-          },
+        green: {
+          // OBOS Green/Primary brand
+          DEFAULT: '#008761',
+          lightest: '#E6F5F0',
+          light: '#CDECE2',
+          // OBOS Forest
+          dark: '#00524C',
         },
-        borderColor: ({ theme }) => ({
-          DEFAULT: theme('colors.gray.light', 'currentColor'),
-        }),
-        fontFamily: {
-          sans: [fontFamily, 'sans-serif'],
+        red: {
+          DEFAULT: '#cd465e',
+          // error red
+          light: '#faedef',
         },
-        boxShadow: {
-          DEFAULT: '0 6px 4px 0 rgba(0, 33, 105, 0.25)',
+        orange: {
+          DEFAULT: '#e8a74a',
+          light: '#f8e5c9',
         },
-        typography: (theme) => ({
-          DEFAULT: {
-            css: {
-              '--tw-prose-headings': theme('colors.black'),
-              '--tw-prose-lead': theme('colors.black'),
-              '--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'),
-              },
-            },
-          },
-        }),
+        yellow: {
+          // open house
+          DEFAULT: '#fff5d2',
+        },
+      },
+      fontFamily: {
+        sans: [fontFamily, 'sans-serif'],
+      },
+      borderRadius: {
+        none: '0',
+        'x-small': '0.5rem',
+        small: '1rem',
+        medium: '1.5rem',
+        large: '2rem',
+        'x-large': '3rem',
+        'xx-large': '3.5rem',
       },
     },
   };