add color map to support block palettes

kitconcept · Oct 18, 2024 · f935867 · f935867
1 parent b0f34c9
commit f935867
Show file tree

Hide file tree

Showing 17 changed files with 1,161 additions and 350 deletions.
diff --git a/packages/volto-light-theme/src/config/blocks.tsx b/packages/volto-light-theme/src/config/blocks.tsx
@@ -189,6 +189,8 @@ export default function install(config: ConfigType) {
   config.blocks.blocksConfig.introduction = {
     ...config.blocks.blocksConfig.introduction,
     unwantedButtons: ['heading-three', 'blockquote'],
+    colors: config.settings.backgroundColors,
+    schemaEnhancer: defaultStylingSchema,
   };
 
   config.blocks.blocksConfig.slate = {
@@ -233,7 +235,11 @@ export default function install(config: ConfigType) {
 
   config.blocks.blocksConfig.search = {
     ...config.blocks.blocksConfig.search,
-    schemaEnhancer: searchBlockSchemaEnhancer,
+    schemaEnhancer: composeSchema(
+      defaultStylingSchema,
+      searchBlockSchemaEnhancer,
+    ),
+    colors: config.settings.backgroundColors,
     variations: [
       {
         id: 'facetsTopSide',

diff --git a/packages/volto-light-theme/src/config/classExtenders.ts b/packages/volto-light-theme/src/config/classExtenders.ts
@@ -48,20 +48,20 @@ export default function install(config: ConfigType) {
           config.settings.backgroundColors,
           'backgroundColor:noprefix',
           previousBlock,
-        ) || 'transparent';
+        ) || 'default';
 
       const currentColor =
         getCurrentStyleByName(
           config.settings.backgroundColors,
           'backgroundColor:noprefix',
           data,
-        ) || 'transparent';
+        ) || 'default';
       const nextColor =
         getCurrentStyleByName(
           config.settings.backgroundColors,
           'backgroundColor:noprefix',
           nextBlock,
-        ) || 'transparent';
+        ) || 'default';
 
       // Inject a class depending if the previous block has the same `backgroundColor`
       if (currentColor === previousColor) {
@@ -104,7 +104,7 @@ export default function install(config: ConfigType) {
           config.settings.blockWidths,
           'backgroundColor:noprefix',
           data,
-        ) || 'transparent';
+        ) || 'default';
       if (currentBlockBackgroundColor) {
         // This has intentionally a different class name than in `VLT3`
         return [

diff --git a/packages/volto-light-theme/src/config/settings.ts b/packages/volto-light-theme/src/config/settings.ts
@@ -28,15 +28,20 @@ export default function install(config: ConfigType) {
   config.settings.backgroundColors = [
     {
       style: {
-        '--background-color': '#fff',
+        '--theme-color': '#fff',
+        '--theme-high-contrast-color': '#ecebeb',
+        '--theme-font-color': '#000',
+        '--theme-low-contrast-font-color': '#bebebe',
       },
-      name: 'white',
-      label: 'White',
+      name: 'default',
+      label: 'Default',
     },
     {
       style: {
-        '--background-color': '#ecebeb',
-        '--background-color-inverse': '#fff',
+        '--theme-color': '#ecebeb',
+        '--theme-high-contrast-color': '#fff',
+        '--theme-font-color': '#000',
+        '--theme-low-contrast-font-color': '#bebebe',
       },
       name: 'grey',
       label: 'Grey',

diff --git a/packages/volto-light-theme/src/customizations/volto/components/theme/View/RenderBlocks.jsx b/packages/volto-light-theme/src/customizations/volto/components/theme/View/RenderBlocks.jsx
@@ -51,7 +51,7 @@ export function groupByBGColor(blocks, blocks_layout, colorDefinitions) {
         colorDefinitions,
         'backgroundColor:noprefix',
         blocks[blockId],
-      ) || 'transparent';
+      ) || 'default';
     if (currentBlockColor !== currentBGColor) {
       currentBGColor = currentBlockColor;
       // write it only if the array has some block inside
@@ -96,7 +96,7 @@ const RenderBlocks = (props) => {
               config.settings.backgroundColors,
               'backgroundColor:noprefix',
               content[blocksFieldname][group[0]],
-            ) || 'transparent',
+            ) || 'default',
           )}
           style={buildStyleObjectFromData(
             content[blocksFieldname][group[0]]?.styles,