Dégradés theme.json → SCSS et utilitaires --gradient

config/webpack-theme-json-plugin.js

@@ -96,6 +96,22 @@ 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}`)
+				}
+
+				if (gradients.length === 0) {
+					return result + '$settings-gradients: ();\n'
+				}
+
+				return result + `$settings-gradients: (\n\t${gradients.join(',\n\t')}\n);\n`
+			},
 			'settings-custom': 'default',
 			'settings-spacing-spacingSizes'(key, value) {
 				let result = ''

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};
+	}
+}