From 0c255f89f6f8001ab8dcb91cf78d6e6387afd2a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ce=CC=81dric=20Andrietti?= <candrietti@beapi.fr>
Date: Fri, 2 Oct 2026 11:56:48 +0200
Subject: [PATCH 1/2] feat(Theme): add support for gradient settings in theme
 JSON and SCSS

---
 config/webpack-theme-json-plugin.js | 12 ++++++++++++
 src/scss/04-utilities/_palette.scss | 12 ++++++++++--
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/config/webpack-theme-json-plugin.js b/config/webpack-theme-json-plugin.js
index 56ddcee6..116ec631 100644
--- a/config/webpack-theme-json-plugin.js
+++ b/config/webpack-theme-json-plugin.js
@@ -96,6 +96,18 @@ class WebpackThemeJsonPlugin {
 
 				return result + `$settings-palette: (\n\t${palette.join(',\n\t')}\n);\n`
 			},
+			'settings-color-gradients'(key, value) {
+				let result = ''
+				const gradients = []
+
+				for (const gradient of value) {
+					const gradientVar = getVariableName('settings-gradient-' + gradient.slug)
+					result += `${gradientVar}: ${gradient.gradient};\n`
+					gradients.push(`${gradient.slug}: ${gradientVar}`)
+				}
+
+				return result + `$settings-gradients: (\n\t${gradients.join(',\n\t')}\n);\n`
+			},
 			'settings-custom': 'default',
 			'settings-spacing-spacingSizes'(key, value) {
 				let result = ''
diff --git a/src/scss/04-utilities/_palette.scss b/src/scss/04-utilities/_palette.scss
index 8028324c..75832896 100644
--- a/src/scss/04-utilities/_palette.scss
+++ b/src/scss/04-utilities/_palette.scss
@@ -3,8 +3,8 @@
 /*
  * Palette : Usefully to get the color or background color of a parent element
  * Usage Example:
- * Use these classes to store a color value in a CSS variable.
- * This allows any child element to reuse the parent's background color.
+ * Use these classes to store a color / gradient value in a CSS variable.
+ * This allows any child element to reuse the parent's background color or image.
  *
  * HTML:
  * <div class="has-primary-background-color">
@@ -17,6 +17,8 @@
  * .child-element {
  *    color: var(--background-color);
  * }
+ *
+ * Gradients expose --gradient on .has-{slug}-gradient-background.
  */
 
 @each $color-name, $color-value in $settings-palette {
@@ -28,3 +30,9 @@
 		--background-color: #{$color-value};
 	}
 }
+
+@each $gradient-name, $gradient-value in $settings-gradients {
+	.has-#{$gradient-name}-gradient-background {
+		--gradient: #{$gradient-value};
+	}
+}

From cd695ebb717dea67c14435ab02590d1277d6dbda Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ce=CC=81dric=20Andrietti?= <candrietti@beapi.fr>
Date: Fri, 2 Oct 2026 12:15:47 +0200
Subject: [PATCH 2/2] fix bugbot: handle empty gradient settings in theme JSON
 output

---
 config/webpack-theme-json-plugin.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/config/webpack-theme-json-plugin.js b/config/webpack-theme-json-plugin.js
index 116ec631..b0cafdba 100644
--- a/config/webpack-theme-json-plugin.js
+++ b/config/webpack-theme-json-plugin.js
@@ -106,6 +106,10 @@ class WebpackThemeJsonPlugin {
 					gradients.push(`${gradient.slug}: ${gradientVar}`)
 				}
 
+				if (gradients.length === 0) {
+					return result + '$settings-gradients: ();\n'
+				}
+
 				return result + `$settings-gradients: (\n\t${gradients.join(',\n\t')}\n);\n`
 			},
 			'settings-custom': 'default',