update color custom props

kitconcept · Oct 25, 2024 · 9801403 · 9801403
1 parent 09eb7c4
commit 9801403
Show file tree

Hide file tree

Showing 4 changed files with 176 additions and 162 deletions.
diff --git a/packages/volto-light-theme/src/config/blocks.tsx b/packages/volto-light-theme/src/config/blocks.tsx
@@ -70,6 +70,62 @@ export default function install(config: ConfigType) {
     ],
   };
 
+  // Palettes
+  config.settings.backgroundColors = [
+    {
+      style: {
+        '--theme-color': '#fff', // Block Wrapper
+        '--theme-high-contrast-color': '#ecebeb', // Cards in Grid block
+        '--theme-foreground-color': '#000',
+        '--theme-low-contrast-foreground-color': '#bebebe',
+      },
+      name: 'default',
+      label: 'Default',
+    },
+    {
+      style: {
+        '--theme-color': '#ecebeb',
+        '--theme-high-contrast-color': '#fff',
+        '--theme-foreground-color': '#000',
+        '--theme-low-contrast-foreground-color': '#bebebe',
+      },
+      name: 'grey',
+      label: 'Grey',
+    },
+  ];
+
+  // Default block widths
+  config.settings.blockWidths = [
+    {
+      style: {
+        '--block-width': 'var(--narrow-container-width)',
+      },
+      name: 'narrow',
+      label: 'Narrow',
+    },
+    {
+      style: {
+        '--block-width': 'var(--default-container-width)',
+      },
+      name: 'default',
+      label: 'Default',
+    },
+    {
+      style: {
+        '--block-width': 'var(--layout-container-width)',
+      },
+      name: 'layout',
+      label: 'Layout',
+    },
+    {
+      style: {
+        '--block-width': '100%',
+      },
+      name: 'full',
+      label: 'Full Width',
+    },
+  ];
+
   // No required blocks (eg. Title)
   config.blocks.requiredBlocks = [
     ...config.blocks.requiredBlocks,

diff --git a/packages/volto-light-theme/src/config/classExtenders.ts b/packages/volto-light-theme/src/config/classExtenders.ts
@@ -101,7 +101,7 @@ export default function install(config: ConfigType) {
     ({ data, classNames }: { data: any; classNames: Array<string> }) => {
       const currentBlockBackgroundColor =
         getCurrentStyleByName(
-          config.settings.blockWidths,
+          config.settings.backgroundColors,
           'backgroundColor:noprefix',
           data,
         ) || 'default';

diff --git a/packages/volto-light-theme/src/config/settings.ts b/packages/volto-light-theme/src/config/settings.ts
@@ -25,61 +25,5 @@ export default function install(config: ConfigType) {
   config.settings.slidingSearchAnimation = true;
   config.settings.openExternalLinkInNewTab = true;
 
-  // Default background colors
-  config.settings.backgroundColors = [
-    {
-      style: {
-        '--theme-color': '#fff',
-        '--theme-high-contrast-color': '#ecebeb',
-        '--theme-font-color': '#000',
-        '--theme-low-contrast-font-color': '#bebebe',
-      },
-      name: 'default',
-      label: 'Default',
-    },
-    {
-      style: {
-        '--theme-color': '#ecebeb',
-        '--theme-high-contrast-color': '#fff',
-        '--theme-font-color': '#000',
-        '--theme-low-contrast-font-color': '#bebebe',
-      },
-      name: 'grey',
-      label: 'Grey',
-    },
-  ];
-
-  // Default block widths
-  config.settings.blockWidths = [
-    {
-      style: {
-        '--block-width': 'var(--narrow-container-width)',
-      },
-      name: 'narrow',
-      label: 'Narrow',
-    },
-    {
-      style: {
-        '--block-width': 'var(--default-container-width)',
-      },
-      name: 'default',
-      label: 'Default',
-    },
-    {
-      style: {
-        '--block-width': 'var(--layout-container-width)',
-      },
-      name: 'layout',
-      label: 'Layout',
-    },
-    {
-      style: {
-        '--block-width': '100%',
-      },
-      name: 'full',
-      label: 'Full Width',
-    },
-  ];
-
   return config;
 }