@obosbbl/grunnmuren-tailwind 0.8.4 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-tailwind",
-  "version": "0.8.4",
+  "version": "0.9.0",
   "description": "Grunnmuren Tailwind preset",
   "license": "MIT",
   "type": "commonjs",
@@ -16,11 +16,11 @@
   ],
   "dependencies": {
     "@tailwindcss/aspect-ratio": "0.4.2",
-    "@tailwindcss/typography": "0.5.8"
+    "@tailwindcss/typography": "0.5.9"
   },
   "devDependencies": {
-    "tailwindcss": "3.2.4",
-    "postcss": "8.4.19"
+    "tailwindcss": "3.3.2",
+    "postcss": "8.4.23"
   },
   "peerDependencies": {
     "tailwindcss": "^3.2"

package/tailwind-base.cjs

@@ -278,7 +278,7 @@ module.exports = (userOptions) => {
           a: {
             '@apply underline': {},
           },
-          '::selection': { '@apply bg-green-light text-black': {} },
+          '::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',
@@ -396,30 +396,44 @@ module.exports = (userOptions) => {
           black: '#333',
           white: '#fff',
           gray: {
-            // TODO: Figure out how to work this into the color scale
-            concrete: '#f1f1f1',
-            // Gray
+            // Dark Gray
             dark: '#595959',
-            // Medium gray
+            // 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: {
-            // light blue
+            // DEPRECATED light blue
             lightest: '#DEEFF5',
-            // OBOS Sky
+            // DEPRECATED OBOS Sky
             light: '#BEDFEC',
+
             // OBOS Blue/Primary brand
             DEFAULT: '#0047BA',
             // OBOS Ocean
             dark: '#002169',
           },
           green: {
-            // light green
+            // DEPRECATED light green
             lightest: '#E6F5F0',
-            // OBOS Mint
+            // DEPRECATED OBOS Mint
             light: '#CDECE2',
+
             // OBOS Green/Primary brand
             DEFAULT: '#008761',
             // OBOS Forest
@@ -464,23 +478,39 @@ module.exports = (userOptions) => {
                 fontWeight: 400,
               },
               h1: {
-                fontWeight: 'bold',
+                fontWeight: theme('fontWeight.bold'),
+                fontSize: theme('fontSize.3xl'),
+                '@media (min-width: theme("screens.md"))': {
+                  fontSize: theme('fontSize.5xl'),
+                },
               },
               h2: {
-                fontWeight: 'bold',
+                fontWeight: theme('fontWeight.bold'),
+                fontSize: theme('fontSize.2xl'),
+                '@media (min-width: theme("screens.md"))': {
+                  fontSize: theme('fontSize.4xl'),
+                },
               },
               h3: {
-                fontWeight: 'bold',
+                fontWeight: theme('fontWeight.bold'),
+                fontSize: theme('fontSize.xl'),
+                '@media (min-width: theme("screens.md"))': {
+                  fontSize: theme('fontSize.2xl'),
+                },
               },
               h4: {
-                fontWeight: 'bold',
+                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: '700',
+                fontWeight: theme('fontWeight.bold'),
                 fontStyle: 'normal',
               },
               'blockquote p:first-of-type::before': {
@@ -490,7 +520,7 @@ module.exports = (userOptions) => {
                 content: '"»"',
               },
               '[class~="lead"]': {
-                fontWeight: 500,
+                fontWeight: theme('fontWeight.medium'),
               },
             },
           },