feat (theme): add colors as array in theme-json.scss : https://github.com/BeAPI/beapi-blocks-theme/pull/173/files

Author: cedric07

config/webpack-theme-json-plugin.js

@@ -86,12 +86,15 @@ class WebpackThemeJsonPlugin {
 		const tasks = {
 			'settings-color-palette'(key, value) {
 				let result = ''
+				const palette = []
 
 				for (const color of value) {
-					result += `${getVariableName('settings-color-' + color.slug)}: ${color.color};\n`
+					const colorVar = getVariableName('settings-color-' + color.slug)
+					result += `${colorVar}: ${color.color};\n`
+					palette.push(`${color.slug}: ${colorVar}`)
 				}
 
-				return result
+				return result + `$settings-palette: (${palette.join(', ')});\n`
 			},
 			'settings-custom': 'default',
 			'settings-spacing-spacingSizes'(key, value) {

src/scss/04-utilities/_palette.scss

@@ -0,0 +1,30 @@
+@use "../01-abstract/theme-json.scss" as *;
+
+/*
+ * 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.
+ *
+ * HTML:
+ * <div class="has-primary-background-color">
+ *    <span class="child-element">
+ *        I will use the parent's background as my text color
+ *    </span>
+ * </div>
+ *
+ * CSS:
+ * .child-element {
+ *    color: var(--background-color);
+ * }
+ */
+
+@each $color-name, $color-value in $settings-palette {
+	.has-#{$color-name}-color {
+		--color: #{$color-value};
+	}
+
+	.has-#{$color-name}-background-color {
+		--background-color: #{$color-value};
+	}
+}

src/scss/editor.scss

@@ -34,6 +34,7 @@ variables.$entry-file-name: "editor";
 @use "04-utilities/sr-only";
 @use "04-utilities/js-animation";
 @use "04-utilities/aria";
+@use "04-utilities/palette";
 
 /**
  * Blocks

src/scss/style.scss

@@ -38,6 +38,7 @@ variables.$entry-file-name: "style";
 @use "04-utilities/sr-only";
 @use "04-utilities/js-animation";
 @use "04-utilities/aria";
+@use "04-utilities/palette";
 
 /**
  * Components