✨ feat(patch): support nested tailwindcss color groups (#1341)

* ✨ feat(patch): add support for nested tailwindcss color groups

sources/@roots/bud-preset-wordpress/src/theme.ts

@@ -65,7 +65,7 @@ export type StylesPropertiesAndElementsComplete = StylesProperties & {
   elements?: StylesElementsPropertiesComplete
 }
 
-export interface JSONSchemaForWordPressBlockThemeGlobalSettingsAndStyles {
+export interface GlobalSettingsAndStyles {
   /**
    * JSON schema URI for theme.json.
    */

sources/@roots/sage/package.json

@@ -48,7 +48,7 @@
     ".": "./lib/cjs/index.js",
     "./client": "./lib/cjs/client/index.js",
     "./client/dom-ready": "./lib/cjs/client/dom-ready.js",
-    "./theme/tailwind": "./lib/cjs/theme/tailwind.adapter.js",
+    "./theme": "./lib/cjs/theme/index.js",
     "./stylelint-config": "./stylelint-config/index.js"
   },
   "typesVersions": {
@@ -62,8 +62,8 @@
       "client/dom-ready": [
         "./types/client/dom-ready.d.ts"
       ],
-      "theme/tailwind": [
-        "./types/theme/tailwind.adapter.d.ts"
+      "theme": [
+        "./types/theme/index.d.ts"
       ]
     }
   },

sources/@roots/sage/src/env.ts

@@ -0,0 +1,80 @@
+import Sage from './extension'
+import ThemeJSON from './theme/extension'
+
+declare module '@roots/bud-framework' {
+  interface Bud {
+    /**
+     * Generate a WordPress `theme.json`
+     *
+     * @example
+     * Use default values:
+     *
+     * ```js
+     * app.themeJson()
+     * ```
+     *
+     * @example
+     * Set with an object:
+     *
+     * ```js
+     * app.themeJson({
+     *   color: {
+     *     palette: []
+     *   }
+     * })
+     * ```
+     *
+     * @example
+     * Set with a callback. Callback supplies a container object.
+     *
+     * ```js
+     * app.themeJson(theme => {
+     *   theme.set('color.palette', [])
+     *   return theme
+     * })
+     * ```
+     *
+     * @example
+     * Set with a callback. Pass `true` as a second parameter to
+     * specify that you would like to use a raw object rather than
+     * a container.
+     *
+     * ```js
+     * app.themeJson(theme => ({
+     *   ...theme,
+     *   color: {
+     *     palette: [],
+     *   },
+     * }), true)
+     * ```
+     *
+     * @public
+     */
+    themeJson: ThemeJSON['themeJson']
+
+    /**
+     * Use extended tailwind colors as theme.json colors
+     *
+     * @example
+     * app.useTailwindColors()
+     *
+     * @public
+     */
+    useTailwindColors: ThemeJSON['useTailwindColors']
+  }
+
+  interface Locations {
+    '@resources': string
+    '@public': string
+    '@fonts': string
+    '@images': string
+    '@scripts': string
+    '@styles': string
+    '@views': string
+  }
+
+  interface Modules {
+    '@roots/sage': Sage
+    'wp-theme-json': ThemeJSON
+  }
+}

sources/@roots/sage/src/index.ts

@@ -10,90 +10,7 @@
  * @packageDocumentation
  */
 
-import '@roots/bud-preset-wordpress'
-import '@roots/bud-tailwindcss'
-
-import * as themeJson from './theme/api/themeJson'
-import * as useTailwindColors from './theme/api/useTailwindColors'
-import ThemeJSON from './theme/extension'
-
-declare module '@roots/bud-framework' {
-  interface Bud {
-    /**
-     * Generate a WordPress `theme.json`
-     *
-     * @example
-     * Use default values:
-     *
-     * ```js
-     * app.themeJson()
-     * ```
-     *
-     * @example
-     * Set with an object:
-     *
-     * ```js
-     * app.themeJson({
-     *   color: {
-     *     palette: []
-     *   }
-     * })
-     * ```
-     *
-     * @example
-     * Set with a callback. Callback supplies a container object.
-     *
-     * ```js
-     * app.themeJson(theme => {
-     *   theme.set('color.palette', [])
-     *   return theme
-     * })
-     * ```
-     *
-     * @example
-     * Set with a callback. Pass `true` as a second parameter to
-     * specify that you would like to use a raw object rather than
-     * a container.
-     *
-     * ```js
-     * app.themeJson(theme => ({
-     *   ...theme,
-     *   color: {
-     *     palette: [],
-     *   },
-     * }), true)
-     * ```
-     *
-     * @public
-     */
-    themeJson: themeJson.facade
-
-    /**
-     * Use extended tailwind colors as theme.json colors
-     *
-     * @example
-     * app.useTailwindColors()
-     *
-     * @public
-     */
-    useTailwindColors: useTailwindColors.facade
-  }
-
-  interface Locations {
-    '@resources': string
-    '@public': string
-    '@fonts': string
-    '@images': string
-    '@scripts': string
-    '@styles': string
-    '@views': string
-  }
-
-  interface Modules {
-    '@roots/sage': Sage
-    'wp-theme-json': ThemeJSON
-  }
-}
+import './env'
 
 import Sage from './extension'
 export default Sage