Allow making default navigation accent color configurable

REDMINE-20704

entry_types/scrolled/config/locales/new/nav-palette-color.de.yml

@@ -0,0 +1,8 @@
+de:
+  pageflow:
+    editor:
+      widgets:
+        attributes:
+          defaultNavigation:
+            accentColor:
+              label: "Akzentfarbe"

entry_types/scrolled/config/locales/new/nav-palette-color.en.yml

@@ -0,0 +1,8 @@
+en:
+  pageflow:
+    editor:
+      widgets:
+        attributes:
+          defaultNavigation:
+            accentColor:
+              label: "Accent color"

entry_types/scrolled/package/spec/widgets/defaultNavigation/Defaultnavigation-spec.js

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import {DefaultNavigation} from 'widgets/defaultNavigation/DefaultNavigation';
+
+import {renderInEntry} from 'pageflow-scrolled/testHelpers';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('DefaultNavigation', () => {
+  it('does not have style attribute on header by default', async () => {
+    const {container} = renderInEntry(
+      <DefaultNavigation configuration={{}} />
+    );
+
+    expect(container.querySelector('header')).not.toHaveAttribute('style');
+  });
+
+  it('supports overriding accent color', async () => {
+    const {container} = renderInEntry(
+      <DefaultNavigation configuration={{accentColor: 'brand-blue'}} />
+    );
+
+    expect(container.querySelector('header')).toHaveStyle(
+      {'--theme-accent-color': 'var(--theme-palette-color-brand-blue)'
+    });
+  });
+});

entry_types/scrolled/package/src/editor/config.js

@@ -11,6 +11,7 @@ import {SideBarController} from './controllers/SideBarController';
 
 import {browser} from 'pageflow/frontend';
 import {CheckBoxInputView, ConfigurationEditorView} from 'pageflow/ui';
+import {ColorSelectInputView} from './views/inputs/ColorSelectInputView';
 import {BrowserNotSupportedView} from './views/BrowserNotSupportedView';
 
 editor.registerEntryType('scrolled', {
@@ -53,7 +54,20 @@ editor.widgetTypes.registerRole('header', {
 editor.widgetTypes.register('defaultNavigation', {
   configurationEditorView: ConfigurationEditorView.extend({
     configure: function() {
+      const [values, texts] = this.options.entry.getPaletteColors({name: 'accentColors'});
+
       this.tab('defaultNavigation', function() {
+        if (values.length) {
+          this.input('accentColor', ColorSelectInputView, {
+            includeBlank: true,
+            blankTranslationKey: 'pageflow_scrolled.editor.' +
+                                 'common_content_element_attributes.' +
+                                 'palette_color.blank',
+            values,
+            texts,
+          });
+        }
+
         this.input('hideToggleMuteButton', CheckBoxInputView);
         this.input('hideSharingButton', CheckBoxInputView);
         this.input('fixedOnDesktop', CheckBoxInputView);

entry_types/scrolled/package/src/widgets/defaultNavigation/DefaultNavigation.js

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 
 import {
   Widget,
+  paletteColor,
   useScrollPosition,
   useChapters,
   useCurrentChapter,
@@ -125,7 +126,7 @@ export function DefaultNavigation({configuration}) {
         !mobileNavHidden
       ),
       [styles.hasChapters]: hasChapters
-    })}>
+    })} style={{'--theme-accent-color': paletteColor(configuration.accentColor)}}>
       <div className={styles.navigationBarContentWrapper}>
         {hasChapters && <HamburgerIcon onClick={handleBurgerMenuClick}
                                        mobileNavHidden={mobileNavHidden}/>}