From 0c255f89f6f8001ab8dcb91cf78d6e6387afd2a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ce=CC=81dric=20Andrietti?= Date: Fri, 2 Oct 2026 11:56:48 +0200 Subject: [PATCH 1/4] 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: *
@@ -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?= Date: Fri, 2 Oct 2026 12:15:47 +0200 Subject: [PATCH 2/4] 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', From ff9475d97a8be3e804243a569441615ca2ead8a7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ce=CC=81dric=20Andrietti?= Date: Wed, 7 Oct 2026 15:45:37 +0200 Subject: [PATCH 3/4] Quote palette and gradient slugs in generated SCSS so names like black and white are strings, not color literals. Fixes sass-loader warnings in palette utility classes. --- config/webpack-theme-json-plugin.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/config/webpack-theme-json-plugin.js b/config/webpack-theme-json-plugin.js index b0cafdba..e6d1e8da 100644 --- a/config/webpack-theme-json-plugin.js +++ b/config/webpack-theme-json-plugin.js @@ -91,7 +91,7 @@ class WebpackThemeJsonPlugin { for (const color of value) { const colorVar = getVariableName('settings-color-' + color.slug) result += `${colorVar}: ${color.color};\n` - palette.push(`${color.slug}: ${colorVar}`) + palette.push(`${formatMapKey(color.slug)}: ${colorVar}`) } return result + `$settings-palette: (\n\t${palette.join(',\n\t')}\n);\n` @@ -103,7 +103,7 @@ class WebpackThemeJsonPlugin { for (const gradient of value) { const gradientVar = getVariableName('settings-gradient-' + gradient.slug) result += `${gradientVar}: ${gradient.gradient};\n` - gradients.push(`${gradient.slug}: ${gradientVar}`) + gradients.push(`${formatMapKey(gradient.slug)}: ${gradientVar}`) } if (gradients.length === 0) { @@ -141,6 +141,11 @@ class WebpackThemeJsonPlugin { return `$${id.replace(/([A-Z])/g, '-$1').toLowerCase()}` } + // Quote map keys so slugs like black/white are strings, not Sass color literals. + function formatMapKey(slug) { + return `"${String(slug).replace(/"/g, '\\"')}"` + } + // traverse the theme.json file and generate the scss variables function traverse(obj, parents = [], result = '') { for (const key in obj) { From 2ccc4dbfb47f20e5e8da2c51879c53b37fbc98a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ce=CC=81dric=20Andrietti?= Date: Wed, 7 Oct 2026 15:51:45 +0200 Subject: [PATCH 4/4] Use JSON.stringify for palette and gradient slug keys so backslashes are escaped correctly and CodeQL incomplete-escaping alert is resolved. --- config/webpack-theme-json-plugin.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/config/webpack-theme-json-plugin.js b/config/webpack-theme-json-plugin.js index e6d1e8da..11f0dc72 100644 --- a/config/webpack-theme-json-plugin.js +++ b/config/webpack-theme-json-plugin.js @@ -143,7 +143,7 @@ class WebpackThemeJsonPlugin { // Quote map keys so slugs like black/white are strings, not Sass color literals. function formatMapKey(slug) { - return `"${String(slug).replace(/"/g, '\\"')}"` + return JSON.stringify(String(slug)) } // traverse the theme.json file and generate the scss variables