improve: set theme.json colors in tailwind conf

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();
 };

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: [],

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": {},