From e901b3a7665ed263ef25070be7d926977d850304 Mon Sep 17 00:00:00 2001
From: Nathan Young <1447339+nathanyoung@users.noreply.github.com>
Date: Thu, 28 Dec 2023 15:27:14 -0800
Subject: [PATCH 1/2] feat: add css gap, rowGap, columnGap support

---
 formats/utilityClass/utilitiesConfig.js | 33 +++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/formats/utilityClass/utilitiesConfig.js b/formats/utilityClass/utilitiesConfig.js
index be89e54..4b7eadf 100644
--- a/formats/utilityClass/utilitiesConfig.js
+++ b/formats/utilityClass/utilitiesConfig.js
@@ -72,6 +72,39 @@ const utilities = [
     hover: false,
     focus: false,
   },
+  {
+    name: 'gap',
+    abbreviation: 'g',
+    tokenCategory: 'size',
+    tokenType: 'spacing',
+    cssProp: 'gap',
+    variations: [''],
+    responsive: true,
+    hover: false,
+    focus: false,
+  },
+  {
+    name: 'row-gap',
+    abbreviation: 'rg',
+    tokenCategory: 'size',
+    tokenType: 'spacing',
+    cssProp: 'row-gap',
+    variations: [''],
+    responsive: true,
+    hover: false,
+    focus: false,
+  },
+  {
+    name: 'column-gap',
+    abbreviation: 'cg',
+    tokenCategory: 'size',
+    tokenType: 'spacing',
+    cssProp: 'column-gap',
+    variations: [''],
+    responsive: true,
+    hover: false,
+    focus: false,
+  },
   {
     name: 'width',
     abbreviation: 'w',

From d432c999dc718596cefca38f6502f7fc62de3aa0 Mon Sep 17 00:00:00 2001
From: Nathan Young <1447339+nathanyoung@users.noreply.github.com>
Date: Thu, 28 Dec 2023 15:34:21 -0800
Subject: [PATCH 2/2] Update utilityClass.test.js

---
 formats/utilityClass/utilityClass.test.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/formats/utilityClass/utilityClass.test.js b/formats/utilityClass/utilityClass.test.js
index d80f580..4c51af3 100644
--- a/formats/utilityClass/utilityClass.test.js
+++ b/formats/utilityClass/utilityClass.test.js
@@ -101,6 +101,12 @@ const expectedOutput = `/**
 
 .p-v-5xl { padding-top: var(--size-spacing-5xl); padding-bottom: var(--size-spacing-5xl); }
 
+.g-5xl { gap: var(--size-spacing-5xl); }
+
+.rg-5xl { row-gap: var(--size-spacing-5xl); }
+
+.cg-5xl { column-gap: var(--size-spacing-5xl); }
+
 .border-width-xs { border-width: var(--size-border-xs); border-style: solid; }
 
 .border-width-top-xs { border-top-width: var(--size-border-xs); border-top-style: solid; }
@@ -182,6 +188,12 @@ const expectedOutput = `/**
 
   .p-v-5xl-hd { padding-top: var(--size-spacing-5xl); padding-bottom: var(--size-spacing-5xl); }
 
+  .g-5xl-hd { gap: var(--size-spacing-5xl); }
+
+  .rg-5xl-hd { row-gap: var(--size-spacing-5xl); }
+
+  .cg-5xl-hd { column-gap: var(--size-spacing-5xl); }
+
   .border-width-xs-hd { border-width: var(--size-border-xs); border-style: solid; }
 
   .border-width-top-xs-hd { border-top-width: var(--size-border-xs); border-top-style: solid; }