Support named theme palettes

REDMINE-20704

Author: tf

entry_types/scrolled/package/spec/editor/models/ScrolledEntry-spec.js

@@ -3114,6 +3114,57 @@ describe('ScrolledEntry', () => {
       expect(values).toEqual(['brand-blue', 'brand-green']);
     });
 
+    it('supports named palettes', () => {
+      const entry = factories.entry(
+        ScrolledEntry,
+        {},
+        {
+          entryTypeSeed: normalizeSeed({
+            themeOptions: {
+              properties: {
+                root: {
+                  paletteColorBrandBlue: '#00f',
+                  paletteColorBrandGreen: '#0f0',
+                  paletteColorAccentColor: '#123)'
+                }
+              },
+              palettes: {
+                brandColors: ['brandBlue', 'brand_green']
+              }
+            }
+          })
+        }
+      );
+
+      const [values] = entry.getPaletteColors({name: 'brandColors'});
+
+      expect(values).toEqual(['brand-blue', 'brand-green']);
+    });
+
+    it('returns empty array if named palette is missing', () => {
+      const entry = factories.entry(
+        ScrolledEntry,
+        {},
+        {
+          entryTypeSeed: normalizeSeed({
+            themeOptions: {
+              properties: {
+                root: {
+                  paletteColorBrandBlue: '#00f',
+                  paletteColorBrandGreen: '#0f0',
+                  paletteColorAccentColor: '#123)'
+                }
+              }
+            }
+          })
+        }
+      );
+
+      const [values] = entry.getPaletteColors({name: 'brandColors'});
+
+      expect(values).toEqual([]);
+    });
+
     describe('with shared translations', () => {
       const commonPrefix = 'pageflow_scrolled.editor.palette_colors'
 

entry_types/scrolled/package/src/editor/models/ScrolledEntry/index.js

@@ -197,11 +197,15 @@ export const ScrolledEntry = Entry.extend({
     return [values, texts]
   },
 
-  getPaletteColors() {
-    const values = Object.keys(
-      this.scrolledSeed.config.theme.options.properties?.root || {}
-    ).filter(
-      key => key.indexOf('paletteColor') === 0
+  getPaletteColors({name} = {}) {
+    const themeOptions = this.scrolledSeed.config.theme.options
+
+    const values = (
+      name ?
+      (themeOptions.palettes?.[name] || []) :
+      Object.keys(themeOptions.properties?.root || {}).filter(
+        key => key.indexOf('paletteColor') === 0
+      )
     ).map(
       key => dasherize(key.replace('paletteColor', ''))
     );
@@ -229,7 +233,7 @@ export const ScrolledEntry = Entry.extend({
 function dasherize(text) {
   return (
     text[0] +
-    text.slice(1).replace(/[A-Z]/g, match => `-${match}`)
+    text.slice(1).replace('_', '-').replace(/[A-Z]/g, match => `-${match}`)
   ).toLowerCase();
 }