From 972f4cd55c82c1037d13f29769a4cf84cbca9fc6 Mon Sep 17 00:00:00 2001
From: Kelly Mears <developers@tinypixel.dev>
Date: Fri, 4 Mar 2022 22:25:23 -0800
Subject: [PATCH] improve: set `theme.json` colors in tailwind conf

---
 bud.config.mjs      | 33 ++++++++++++++++++++++++++++++++-
 tailwind.config.cjs |  4 +++-
 theme.json          | 16 +++++++---------
 3 files changed, 42 insertions(+), 11 deletions(-)

diff --git a/bud.config.mjs b/bud.config.mjs
index b8f7172..ca11641 100644
--- a/bud.config.mjs
+++ b/bud.config.mjs
@@ -39,5 +39,36 @@ export default async (app) => {
     /**
      * URI of the `public` directory
      */
-    .setPublicPath("/app/themes/sage/public/");
+    .setPublicPath("/app/themes/sage/public/")
+
+    /**
+     * Generate WordPress `theme.json`
+     *
+     * @note This overwrites `theme.json` on every build.
+     */
+    .themeJson({
+      color: {
+        custom: false,
+        customGradient: false,
+      },
+      custom: {
+        spacing: {},
+        typography: {
+          'font-size': {},
+          'line-height': {},
+        },
+      },
+      spacing: {
+        padding: true,
+        units: ['px', '%', 'em', 'rem', 'vw', 'vh'],
+      },
+      typography: {
+        customFontSize: false,
+      },
+    })
+
+    /**
+     * Set `theme.json` colors from `tailwind.config.js` values
+     */
+    .useTailwindColors();
 };
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 70dffb6..2a5a99b 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -2,7 +2,9 @@ module.exports = {
   content: ["./index.php", "./app/**/*.php", "./resources/**/*.{php,vue,js}"],
   theme: {
     extend: {
-      colors: {},
+      colors: {
+        primary: '#525ddc',
+      },
     },
   },
   plugins: [],
diff --git a/theme.json b/theme.json
index ceb2531..1f7779f 100644
--- a/theme.json
+++ b/theme.json
@@ -3,17 +3,15 @@
   "version": 2,
   "settings": {
     "color": {
-      "palette": [
-        {
-          "slug": "primary",
-          "color": "#525ddc",
-          "name": "Primary"
-        }
-      ],
       "custom": false,
       "customGradient": false,
-      "defaultPalette": false,
-      "defaultGradients": false
+      "palette": [
+        {
+          "name": "Primary",
+          "slug": "primary",
+          "color": "#525ddc"
+        }
+      ]
     },
     "custom": {
       "spacing": {},