From 2c217d7a86c4330dab316350bab1dd0a79387d55 Mon Sep 17 00:00:00 2001
From: "Jeoffrey Fischer [SSW]"
 <106663901+jeoffreyfischer@users.noreply.github.com>
Date: Thu, 8 Aug 2024 13:47:56 +1000
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Removed=20padding=20for=20?=
 =?UTF-8?q?headings=20inside=20grey=20boxes=20(#1407)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Remove margin on heading inside greybox

* Added info, highlight, china, codeauditor, todo

* typo in highlight

* Update commands in package.json

* Refactored tailwind.config file
---
 package.json       |   3 +-
 tailwind.config.js | 103 ++++++++++++++++++++++++++++++---------------
 2 files changed, 71 insertions(+), 35 deletions(-)

diff --git a/package.json b/package.json
index f6e2d5076..787a12cd0 100644
--- a/package.json
+++ b/package.json
@@ -9,8 +9,9 @@
     "build:favicons": "node scripts/favicons",
     "build": "yarn run build:dir && yarn run build:favicons && gatsby build --prefix-paths --log-pages && yarn updateRelativePath",
     "build:incremental": "gatsby build --prefix-paths --log-pages && yarn updateRelativePath",
+    "cleandev": "gatsby clean && gatsby develop",
     "devbuild": "gatsby clean && yarn run build:dir && yarn run build:favicons && gatsby build",
-    "develop": "gatsby develop",
+    "dev": "gatsby develop",
     "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
     "start": "yarn run develop",
     "serve": "gatsby serve",
diff --git a/tailwind.config.js b/tailwind.config.js
index 01de0a0ab..9ecd7ac63 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -50,7 +50,76 @@ module.exports = {
   },
   plugins: [
     plugin(function ({ addUtilities, theme }) {
+      const headingStyles = {
+        marginBottom: theme('margin.heading'),
+        marginTop: theme('margin.heading'),
+        fontWeight: theme('fontWeight.semibold'),
+        lineHeight: theme('lineHeight.heading'),
+      };
+
+      const zeroMarginStyles = {
+        marginTop: '0',
+        marginBottom: '0',
+      };
+
+      const headingSizes = {
+        h1: theme('fontSize.4xl'),
+        h2: theme('fontSize.3xl'),
+        h3: theme('fontSize.2xl'),
+        h4: theme('fontSize.xl'),
+        h5: theme('fontSize.lg'),
+        h6: theme('fontSize.base'),
+      };
+
+      const headingColors = {
+        h1: theme('colors.ssw.red'),
+        h2: theme('colors.ssw.black'),
+        h3: theme('colors.ssw.black'),
+        h4: theme('colors.ssw.black'),
+        h5: theme('colors.ssw.black'),
+        h6: theme('colors.ssw.black'),
+      };
+
+      const commonUtilities = {};
+
+      Object.keys(headingSizes).forEach((tag) => {
+        commonUtilities[tag] = {
+          ...headingStyles,
+          fontSize: headingSizes[tag],
+          color: headingColors[tag],
+        };
+        commonUtilities[`${tag} strong`] = {
+          color: theme('colors.ssw.red'),
+          fontWeight: theme('fontWeight.semibold'),
+        };
+      });
+
+      const containers = [
+        '.greybox',
+        '.info',
+        '.highlight',
+        '.china',
+        '.codeauditor',
+        '.todo',
+      ];
+
+      containers.forEach((container) => {
+        commonUtilities[`${container} > h1:first-child`] = zeroMarginStyles;
+        commonUtilities[`${container} > h1:last-child`] = zeroMarginStyles;
+        commonUtilities[`${container} > h2:first-child`] = zeroMarginStyles;
+        commonUtilities[`${container} > h2:last-child`] = zeroMarginStyles;
+        commonUtilities[`${container} > h3:first-child`] = zeroMarginStyles;
+        commonUtilities[`${container} > h3:last-child`] = zeroMarginStyles;
+        commonUtilities[`${container} > h4:first-child`] = zeroMarginStyles;
+        commonUtilities[`${container} > h4:last-child`] = zeroMarginStyles;
+        commonUtilities[`${container} > h5:first-child`] = zeroMarginStyles;
+        commonUtilities[`${container} > h5:last-child`] = zeroMarginStyles;
+        commonUtilities[`${container} > h6:first-child`] = zeroMarginStyles;
+        commonUtilities[`${container} > h6:last-child`] = zeroMarginStyles;
+      });
+
       addUtilities({
+        ...commonUtilities,
         '.hide-scrollbar': {
           'max-height': '44rem',
           'scrollbar-width': 'none',
@@ -61,40 +130,6 @@ module.exports = {
             'linear-gradient(to bottom, transparent, black 8px, black calc(100% - 10px), transparent), linear-gradient(black, black)',
           'mask-size': '100% 100%, 0 100%',
         },
-        'h1, h2, h3, h4, h5, h6': {
-          marginBottom: theme('margin.heading'),
-          marginTop: theme('margin.heading'),
-          fontWeight: theme('fontWeight.semibold'),
-          lineHeight: theme('lineHeight.heading'),
-        },
-        h1: {
-          fontSize: theme('fontSize.4xl'),
-          color: theme('colors.ssw.red'),
-        },
-        h2: {
-          fontSize: theme('fontSize.3xl'),
-          color: theme('colors.ssw.black'),
-        },
-        h3: {
-          fontSize: theme('fontSize.2xl'),
-          color: theme('colors.ssw.black'),
-        },
-        h4: {
-          fontSize: theme('fontSize.xl'),
-          color: theme('colors.ssw.black'),
-        },
-        h5: {
-          fontSize: theme('fontSize.lg'),
-          color: theme('colors.ssw.black'),
-        },
-        h6: {
-          fontSize: theme('fontSize.base'),
-          color: theme('colors.ssw.black'),
-        },
-        'h2 strong, h3 strong, h4 strong, h5 strong, h6 strong': {
-          color: theme('colors.ssw.red'),
-          fontWeight: theme('fontWeight.semibold'),
-        },
       });
     }),
   ],