@obosbbl/grunnmuren-tailwind 0.7.2 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-tailwind",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "description": "Grunnmuren Tailwind preset",
   "license": "MIT",
   "type": "commonjs",
@@ -19,10 +19,10 @@
     "@tailwindcss/typography": "0.5.7"
   },
   "devDependencies": {
-    "tailwindcss": "3.1.8",
-    "postcss": "8.4.17"
+    "tailwindcss": "3.2.1",
+    "postcss": "8.4.18"
   },
   "peerDependencies": {
-    "tailwindcss": "^3"
+    "tailwindcss": "^3.2"
   }
 }

package/tailwind-base.cjs

@@ -375,7 +375,12 @@ module.exports = (userOptions) => {
           prose: '696px',
         },
         screens: {
-          // replicate the smaller than breakpoint from Windi. Even though we are mobile first, it is really nice with an escape hatch sometimes
+          '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: {
@@ -428,6 +433,9 @@ module.exports = (userOptions) => {
             DEFAULT: '#fff5d2',
           },
         },
+        borderColor: ({ theme }) => ({
+          DEFAULT: theme('colors.gray.light', 'currentColor'),
+        }),
         fontFamily: {
           sans: [fontFamily, 'sans-serif'],
         },
@@ -439,6 +447,8 @@ module.exports = (userOptions) => {
             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'),
               // TODO: Increase bullet size. See design sketches
               '--tw-prose-bullets': theme('colors.green.DEFAULT'),
               color: theme('colors.black'),
@@ -462,6 +472,16 @@ module.exports = (userOptions) => {
                 marginTop: '1.5em',
                 marginBottom: '1.5em',
               },
+              blockquote: {
+                fontWeight: '700',
+                fontStyle: 'normal',
+              },
+              'blockquote p:first-of-type::before': {
+                content: '"«"',
+              },
+              'blockquote p:last-of-type::after': {
+                content: '"»"',
+              },
               '[class~="lead"]': {
                 fontWeight: 500,
               },