@akinon/pz-theme 2.0.164-rc.1 → 2.0.164

package/src/custom/property-types.ts

@@ -33,20 +33,19 @@ export type PropertyType = (typeof CUSTOM_PROPERTY_TYPES)[number];
  * The subset whose value provably survives the full round trip — panel write,
  * persistence, and resolution back into a prop.
  *
- * The two excluded members are excluded for reasons that were verified, not
- * guessed: `multiselect` and `localetext` are stored UNBUCKETED by the editor
- * (`theme-basic-properties.tsx:1547-1548` passes arrays and locale objects
- * through without the per-breakpoint wrapper). `getResponsiveValue` then
- * rejects an array with a devWarn and returns the fallback, and a locale
- * object has no `desktop` key so it does too. They can never deliver a
- * value until a per-type resolver exists.
+ * The three excluded members are excluded for reasons that were verified, not
+ * guessed:
  *
- * `richtext` is the one type with such a resolver. The editor's rich text
- * control writes per language (`{ tr: '<p>…</p>', en: … }`, unbucketed, like
- * `localetext`), so `useThemeSetting` reads the page's language out of the
- * map before the breakpoint read, then passes the html through
- * `sanitizeRichText`, a DOM-free allowlist, so a block can hand it to
- * `dangerouslySetInnerHTML` on the server as well as the client.
+ * - `multiselect` and `localetext` are stored UNBUCKETED by the editor
+ *   (`theme-basic-properties.tsx:1547-1548` passes arrays and locale objects
+ *   through without the per-breakpoint wrapper). `getResponsiveValue` then
+ *   rejects an array with a devWarn and returns the fallback, and a locale
+ *   object has no `desktop` key so it does too. They can never deliver a
+ *   value until a per-type resolver exists.
+ * - `richtext` has no safe renderer here. The allowlist sanitizer this repo
+ *   already owns parses by assigning to `innerHTML` on a live element, so the
+ *   sink is its first act — and pz-theme renders server-side, where there is
+ *   no `document` at all.
  *
  * Declaring one of these throws at define time rather than shipping a control
  * that silently shows the default forever.
@@ -60,11 +59,12 @@ export const SUPPORTED_PROPERTY_TYPES: readonly PropertyType[] = [
   'color',
   'image',
   'file',
-  'richtext',
   'typography',
   'icon'
 ];
 
-export const isSupportedPropertyType = (type: unknown): type is PropertyType =>
+export const isSupportedPropertyType = (
+  type: unknown
+): type is PropertyType =>
   typeof type === 'string' &&
   (SUPPORTED_PROPERTY_TYPES as readonly string[]).includes(type);

package/src/custom/use-theme-setting.ts

@@ -1,7 +1,6 @@
 'use client';
 
 import { getResponsiveValue } from '../utils';
-import { sanitizeRichText } from '../utils/sanitize-rich-text';
 import { devWarn } from '../utils/dev-warn';
 import {
   isLocalizedValue,
@@ -239,11 +238,6 @@ export function useThemeSetting<
 
   const defaults = splitDefault(declaration, valueLocale);
 
-  const finish = (value: unknown): TValue =>
-    (declaration.type === 'richtext'
-      ? sanitizeRichText(typeof value === 'string' ? value : '')
-      : value) as TValue;
-
   if (!context) {
     // A missing block context is never an error on its own: a developer
     // previewing the component in a storybook or a unit test should see the
@@ -260,7 +254,7 @@ export function useThemeSetting<
         `unreachable and the declared default is used instead. Render this ` +
         `component through a block registered with registerCustomBlocks().`
     );
-    return finish(defaults.page);
+    return defaults.page as TValue;
   }
 
   // Reported on every render rather than once from an effect: the collection
@@ -277,17 +271,7 @@ export function useThemeSetting<
   // attribute keys that were never declared. `node` rather than `block` so a
   // setting declared inside a custom SECTION reads the section's own
   // properties, which is where the editor writes it.
-  const authored = context.node.properties?.[key];
-
-  // The rich text control writes per language — `{ tr: '<p>…</p>', en: … }` —
-  // and the editor stores that map as it is, with no breakpoint key: the same
-  // shape that keeps `localetext` out (see `property-types.ts`). Read the
-  // page's language out of it first; what is left is a string or a breakpoint
-  // map, which the responsive read below already understands.
-  const stored =
-    declaration.type === 'richtext'
-      ? resolveLocalizedValue(authored, valueLocale)
-      : authored;
+  const stored = context.node.properties?.[key];
 
   // The sentinel again, for the same reason: handing `getResponsiveValue` an
   // undefined fallback would resolve an undeclared default to `''`, so a
@@ -296,15 +280,15 @@ export function useThemeSetting<
   const resolved = getResponsiveValue(stored, breakpoint, NOT_AUTHORED);
 
   if (resolved === NOT_AUTHORED) {
-    return finish(resolveAuthoredDefault(defaults.page, breakpoint));
+    return resolveAuthoredDefault(defaults.page, breakpoint) as TValue;
   }
 
   // The default-language text as the editor seeded it when the block was
   // placed, never changed since: still the author's copy, so it follows the
   // page's language. Anything the merchant typed is theirs and shows as typed.
   if (defaults.perLocale && resolved === defaults.base) {
-    return finish(defaults.page);
+    return defaults.page as TValue;
   }
 
-  return finish(resolved);
+  return resolved as TValue;
 }

package/src/editor-locale-bridge.tsx

@@ -4,28 +4,14 @@ import { useEffect } from 'react';
 import { useLocalization } from '@akinon/next/hooks';
 
 import { isTrustedEditorEvent, postToEditor } from './editor-bridge';
-import { useValueLocale } from './utils/localized-value';
 
 /**
  * The storefront half of the editor's Language dropdown.
  *
  * The editor starts that dropdown with English only and fills it from the
- * `LOCALE_UPDATE` frame the preview posts (`{ locale, locales, defaultLocale }`);
- * when the merchant picks another language it posts `LOCALE_UPDATE` back and
- * expects the preview to follow.
- *
- * The frame carries the storefront's default language as well. The editor's
- * per-language text controls store a plain string in that language and a map
- * in every other, so an editor that never heard it assumed English and gave
- * every Turkish-default store a stray `en` key (ZERO-5296).
- *
- * It is posted BEFORE the document reports ready (`IFRAME_READY`): the bridge
- * is a child of the placeholder wrapper, whose own effect posts that frame,
- * and React runs a child's effects first. The editor relies on the order — it
- * holds every per-language write until the preview is ready, and takes
- * "ready without languages" to mean a storefront that will never send them.
- *
- * For a long time the only code answering either direction
+ * `LOCALE_UPDATE` frame the preview posts (`{ locale, locales }`); when the
+ * merchant picks another language it posts `LOCALE_UPDATE` back and expects the
+ * preview to follow. For a long time the only code answering either direction
  * was the app-template's `LanguageSelect` — brand code. A brand whose header no
  * longer renders that component (a header composed through ChromeSlot, a
  * custom header section, a project older than the template) left the editor
@@ -68,7 +54,6 @@ export interface EditorLocaleOption {
 interface LocaleState {
   locale: string;
   locales: EditorLocaleOption[];
-  defaultLocale?: string;
   setLocale: (locale: string) => void;
 }
 
@@ -101,22 +86,15 @@ const toEditorLocales = (locales: unknown): EditorLocaleOption[] =>
           : entry.value
     }));
 
-const announcementKey = ({
-  locale,
-  locales,
-  defaultLocale
-}: Omit<LocaleState, 'setLocale'>) =>
-  JSON.stringify([locale, locales, defaultLocale ?? null]);
+const announcementKey = (locale: string, locales: EditorLocaleOption[]) =>
+  JSON.stringify([locale, locales]);
 
-const announce = ({ locale, locales, defaultLocale }: LocaleState) => {
-  const key = announcementKey({ locale, locales, defaultLocale });
+const announce = ({ locale, locales }: LocaleState) => {
+  const key = announcementKey(locale, locales);
   if (key === lastAnnounced) return;
   lastAnnounced = key;
 
-  postToEditor({
-    type: 'LOCALE_UPDATE',
-    data: { locale, locales, defaultLocale }
-  });
+  postToEditor({ type: 'LOCALE_UPDATE', data: { locale, locales } });
 };
 
 const handleEditorMessage = (event: MessageEvent) => {
@@ -137,7 +115,7 @@ const handleEditorMessage = (event: MessageEvent) => {
 
   // The editor is already showing `requested`. Recording it as announced keeps
   // the switch from being echoed back when the new locale reaches the page.
-  lastAnnounced = announcementKey({ ...current, locale: requested });
+  lastAnnounced = announcementKey(requested, current.locales);
   current.setLocale(requested);
 };
 
@@ -148,7 +126,6 @@ const handleEditorMessage = (event: MessageEvent) => {
  */
 export function EditorLocaleBridge(): null {
   const { locale, locales, setLocale } = useLocalization();
-  const { defaultLocale } = useValueLocale();
 
   useEffect(() => {
     if (!isFramed()) return;
@@ -170,14 +147,9 @@ export function EditorLocaleBridge(): null {
   useEffect(() => {
     if (!isFramed() || !locale) return;
 
-    current = {
-      locale,
-      locales: toEditorLocales(locales),
-      defaultLocale,
-      setLocale
-    };
+    current = { locale, locales: toEditorLocales(locales), setLocale };
     announce(current);
-  }, [locale, locales, defaultLocale, setLocale]);
+  }, [locale, locales, setLocale]);
 
   return null;
 }

package/src/index.ts

@@ -164,6 +164,21 @@ export type {
 } from './overlays/modal-registry';
 
 export { default as ThemeModals } from './overlays/theme-modals';
+// Also mounted by ThemeModals; exported for brands without it.
+export { ThemePageUp } from './chrome/theme-page-up';
+export type { ThemePageUpProps } from './chrome/theme-page-up';
+export {
+  PAGE_UP_OFFSET_VARIABLE,
+  readThemeBreadcrumbSeparator,
+  readThemePageUpSettings,
+  readThemeSocialNetworks,
+  toSafeSocialHref
+} from './utils/theme-settings-readers';
+export type {
+  ThemePageUpSettings,
+  ThemeSocialNetworkEntry
+} from './utils/theme-settings-readers';
+export { toSafeImageSource } from './utils/svg-image-source';
 export { default as ThemeModalMount } from './overlays/theme-modal-mount';
 
 export {

package/src/overlays/theme-modals.tsx

@@ -5,6 +5,9 @@ import { getThemeConfig } from '../chrome/theme-config-source';
 import ThemeModalMount from './theme-modal-mount';
 import { ModalHostBeacon } from './modal-host-beacon';
 import ModalPreviewHost from './modal-preview-host';
+// The back-to-top button rides on this global mount.
+import ThemePageUp from '../chrome/theme-page-up';
+import { readThemePageUpSettings } from '../utils/theme-settings-readers';
 
 interface ThemeModalsProps {
   /**
@@ -77,6 +80,13 @@ export default async function ThemeModals({
         themeSettings={settings}
         pageContext={pageContext}
       />
+      {/*
+        The settings page's "Page up" button. Mounted here because
+        this is the one global pz-theme mount every brand layout already
+        renders; it renders null unless `pageUpEnabled` is set (or the editor
+        turns it on live). Only the page-up keys cross to the client.
+      */}
+      <ThemePageUp settings={readThemePageUpSettings(settings)} />
     </>
   );
 }

package/src/sections/__tests__/section-wrapper.test.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import SectionWrapper from '../section-wrapper';
 import type { Section } from '../../theme-section';
+import { ThemeSettingsProvider } from '../../theme-settings-context';
 
 jest.mock('../../components/action-toolbar', () => ({
   __esModule: true,
@@ -161,4 +162,79 @@ describe('SectionWrapper', () => {
       expect(screen.queryByTestId('action-toolbar')).not.toBeInTheDocument();
     });
   });
+
+  // Registered and custom sections render through this wrapper,
+  // so it carries the same own-colour / own-type markers as the generic
+  // <section>: their rich text keeps inheriting the section's authored values.
+  describe('theme rich-text default markers', () => {
+    const renderWithSettings = (
+      settings: Record<string, unknown> | null,
+      styles: Record<string, unknown>
+    ) =>
+      render(
+        <ThemeSettingsProvider value={settings}>
+          <SectionWrapper
+            section={makeSection({ styles })}
+            placeholderId="ph-1"
+          >
+            <span>child content</span>
+          </SectionWrapper>
+        </ThemeSettingsProvider>
+      );
+
+    const authored = {
+      color: { desktop: '#ffffff' },
+      'font-size': { mobile: '18px' }
+    };
+
+    it('stamps both markers when the theme has text defaults', () => {
+      const { container } = renderWithSettings(
+        { headingColor: '#222222' },
+        authored
+      );
+      const el = getSection(container);
+      expect(el).toHaveAttribute('data-pz-own-color', '');
+      expect(el).toHaveAttribute('data-pz-own-type', '');
+    });
+
+    it('stamps the colour marker for a colour set only in a state', () => {
+      // A header band whose text only turns white once the page scrolls.
+      const { container } = renderWithSettings(
+        { textColor: '#C8C8C8' },
+        { ':scrolled/color': { desktop: '#ffffff' } }
+      );
+      const el = getSection(container);
+      expect(el).toHaveAttribute('data-pz-own-color', '');
+      expect(el).not.toHaveAttribute('data-pz-own-type');
+    });
+
+    it('stamps nothing for a section without authored colour or type', () => {
+      const { container } = renderWithSettings(
+        { headingColor: '#222222' },
+        { 'background-color': { desktop: '#000000' }, 'label/color': '#fff' }
+      );
+      const el = getSection(container);
+      expect(el).not.toHaveAttribute('data-pz-own-color');
+      expect(el).not.toHaveAttribute('data-pz-own-type');
+    });
+
+    it('stamps nothing while the theme sets no text default', () => {
+      const { container } = renderWithSettings(
+        { primaryColor: '#000000', footerBackgroundColor: '#F4F4F4' },
+        authored
+      );
+      const el = getSection(container);
+      expect(el).not.toHaveAttribute('data-pz-own-color');
+      expect(el).not.toHaveAttribute('data-pz-own-type');
+    });
+
+    it('stamps nothing without a settings provider', () => {
+      const { container } = renderWrapper({
+        section: makeSection({ styles: authored })
+      });
+      const el = getSection(container);
+      expect(el).not.toHaveAttribute('data-pz-own-color');
+      expect(el).not.toHaveAttribute('data-pz-own-type');
+    });
+  });
 });

package/src/sections/coupon-banner-section.tsx

@@ -7,6 +7,10 @@ import { twMerge } from 'tailwind-merge';
 import ThemeBlock, { Block } from '../theme-block';
 import { WithDesignerFeatures } from '../components/with-designer-features';
 import { useThemeSettingsContext } from '../theme-settings-context';
+import {
+  type ThemeOwnTextStyle,
+  themeOwnStyleAttributes
+} from '../utils/theme-settings-css';
 import {
   applyAlphaToColor,
   getCSSStyles,
@@ -530,6 +534,7 @@ const CouponBannerSection: React.FC<CouponBannerSectionProps> = ({
       className?: string;
       style?: React.CSSProperties;
       keyOverride?: string;
+      ownTextStyle?: ThemeOwnTextStyle;
     } = {}
   ) => {
     if (!block) {
@@ -538,6 +543,11 @@ const CouponBannerSection: React.FC<CouponBannerSectionProps> = ({
           key={options.keyOverride}
           className={options.className}
           style={options.style}
+          {...themeOwnStyleAttributes(
+            options.style,
+            themeSettings,
+            options.ownTextStyle
+          )}
         >
           {children}
         </div>
@@ -558,6 +568,7 @@ const CouponBannerSection: React.FC<CouponBannerSectionProps> = ({
           ...(options.style || {}),
           ...getCSSStyles(block.styles || {}, themeSettings, currentBreakpoint)
         }}
+        ownTextStyle={options.ownTextStyle}
         onMoveUp={() =>
           postBlockAction('MOVE_BLOCK_UP', block.styleSourceId || block.id)
         }
@@ -777,7 +788,10 @@ const CouponBannerSection: React.FC<CouponBannerSectionProps> = ({
                 className:
                   'inline-flex min-h-[42px] flex-1 items-center justify-center px-4 py-2 text-sm font-semibold uppercase tracking-[0.12em]',
                 style: couponCodeBoxStyle,
-                keyOverride: 'coupon-code-box'
+                keyOverride: 'coupon-code-box',
+                // The code's type is the class list above, and its colour
+                // the box style: the theme's text defaults must not reach it.
+                ownTextStyle: { type: true }
               }
             )}
 

package/src/sections/section-wrapper.tsx

@@ -12,6 +12,10 @@ import { resolveSectionPartName } from '../hooks/use-designer-features';
 import { useSectionSeen } from '../hooks/use-section-seen';
 import { useListImpression } from '../hooks/use-list-impression';
 import { ThemeSectionListProvider } from '../theme-section-data-context';
+// Own-colour / own-typography markers for the theme's rich-text
+// element defaults (same as the generic <section> in theme-section.tsx).
+import { useThemeSettingsContext } from '../theme-settings-context';
+import { themeOwnStyleAttributes } from '../utils/theme-settings-css';
 
 
 interface SectionWrapperProps {
@@ -82,6 +86,7 @@ export default function SectionWrapper({
   ).trim();
 
   const sectionRef = useRef<HTMLElement>(null);
+  const themeSettings = useThemeSettingsContext();
 
   // Report this section becoming visible (ZERO-5164). Inert in the editor:
   // the emitter reads the editor handshake flag itself, so there is no
@@ -152,6 +157,8 @@ export default function SectionWrapper({
     <section
       ref={sectionRef}
       data-section-id={section.id}
+      // Keeps the section's authored colour/typography inherited.
+      {...themeOwnStyleAttributes(section.styles, themeSettings)}
       data-newsletter-signup={isNewsletterSection ? 'true' : undefined}
       data-newsletter-endpoint={
         isNewsletterSection ? newsletterEndpoint : undefined

package/src/sections/tabs-section.tsx

@@ -11,6 +11,7 @@ import {
 import { twMerge } from 'tailwind-merge';
 import clsx from 'clsx';
 import { useThemeSettingsContext } from '../theme-settings-context';
+import { themeOwnStyleAttributes } from '../utils/theme-settings-css';
 
 import { postToEditor } from '../editor-bridge';
 interface TabsSectionProps {
@@ -438,6 +439,16 @@ const TabsSection: React.FC<TabsSectionProps> = ({
               )}
 
               <div
+                // The tab paints its title (the active colour, or the header
+                // block's own) and passes the header block's typography; the
+                // theme's rich-text defaults must leave both to the title.
+                {...themeOwnStyleAttributes(
+                  {
+                    ...cleanHeaderStyles,
+                    color: isActive ? activeTabColor : headerTextColor
+                  },
+                  themeSettings
+                )}
                 style={{
                   ...cleanHeaderStyles,
                   cursor: 'pointer',
@@ -525,6 +536,8 @@ const TabsSection: React.FC<TabsSectionProps> = ({
             <div
               key={tabBlock.id || `tab-content-${index}`}
               style={contentStyles}
+              // The Tab Content block's own styles are painted here.
+              {...themeOwnStyleAttributes(contentBlock.styles, themeSettings)}
             >
               {contentBlock.blocks
                 ?.filter((childBlock) =>

package/src/theme-placeholder-wrapper.tsx

@@ -50,6 +50,15 @@ import { parseEditorMessage, postToEditor } from './editor-bridge';
 import { EditorLocaleBridge } from './editor-locale-bridge';
 import { useBrowseMode } from './browse-mode';
 import { neutralizeStyleTagBreakout } from './utils/css-safety';
+// The redesigned Web Theme Settings' colour roles, custom colours
+// and typography metrics, plus their rich-text element defaults.
+import {
+  type ThemeRootVariable,
+  buildThemeElementDefaultsCss,
+  buildThemeRoleVariablesCss,
+  collectThemeRootVariables,
+  syncThemeRootVariables
+} from './utils/theme-settings-css';
 import { buildCustomFontFaceCss } from './utils/custom-fonts';
 import {
   collectGoogleFontFamilies,
@@ -60,6 +69,8 @@ import {
 // lives in ./utils/custom-fonts because a server route has to call it too and
 // this module is client-only.
 export { buildCustomFontFaceCss };
+// Re-exported for the tests, like the builders above.
+export { buildThemeElementDefaultsCss, buildThemeRoleVariablesCss };
 export {
   armHistoryRestoreGuard,
   buildRestoreGuardScript,
@@ -78,6 +89,32 @@ const themeFontsLinked = () =>
 // One pageshow listener per page, not per placeholder — see the effect below.
 let bfcacheReloadListenerArmed = false;
 
+// The :root variables `injectThemeColors` wrote inline last time,
+// so the next call can remove the ones whose key is gone (a hidden colour
+// role, a deleted custom colour or typography style). One set per document,
+// like the inline style it mirrors.
+let writtenThemeVars: ReadonlySet<string> = new Set();
+
+/**
+ * Every variable the settings own on :root, for the inline sync:
+ * the family of each variant (what the loop in `injectThemeColors` writes, so
+ * a deleted variant's family is removed too) followed by the new variables.
+ */
+const collectInlineThemeVariables = (
+  settings: Record<string, unknown>
+): ThemeRootVariable[] => {
+  const families: ThemeRootVariable[] = [];
+  if (Array.isArray(settings.typography)) {
+    settings.typography.forEach((variant) => {
+      const key = (variant as { key?: unknown })?.key;
+      if (typeof key !== 'string' || !/^[a-z0-9-]+$/i.test(key)) return;
+      const family = readThemeTypographyFont(settings, key);
+      if (family) families.push([`--theme-font-${key}`, family]);
+    });
+  }
+  return [...families, ...collectThemeRootVariables(settings)];
+};
+
 // Helper function to inject theme colors as CSS custom properties
 const injectThemeColors = (settings: Record<string, unknown>) => {
   if (!settings) return;
@@ -161,6 +198,15 @@ const injectThemeColors = (settings: Record<string, unknown>) => {
     root.style.removeProperty('--theme-breadcrumb-icon-display');
   }
 
+  // The new roles, custom colours and typography metrics: set
+  // what the settings hold now, remove what they no longer hold. The five
+  // colour variables above are never removed.
+  writtenThemeVars = syncThemeRootVariables(
+    root.style,
+    collectInlineThemeVariables(settings),
+    writtenThemeVars
+  );
+
   // `mainMenuSticky` is deliberately not handled here: it used to write three
   // --theme-header-* variables for a brand's own header CSS to read, which
   // nothing ever did, and a composed header is not the brand's markup anyway.
@@ -1125,6 +1171,10 @@ export default function ThemePlaceholderWrapper({
       [
         buildThemeBackgroundCss(themeSettings),
         buildThemeTypographyCss(themeSettings),
+        // Both '' until the new settings keys are set, so a theme
+        // that never used them gets the same bytes as before.
+        buildThemeRoleVariablesCss(themeSettings),
+        buildThemeElementDefaultsCss(themeSettings),
         // Static, and tiny: the rules for blocks a property switch reveals on
         // hover (utils/property-switches.ts). Emitted with the theme CSS so
         // the storefront and the canvas hover the same way.
@@ -1166,9 +1216,6 @@ export default function ThemePlaceholderWrapper({
           Tells the editor which languages this storefront has and follows its
           language switch. Every placeholder renders one; they share a single
           listener and a single announcement (see editor-locale-bridge.tsx).
-          A child of this wrapper on purpose: its effect, and so its frame,
-          runs before the effect below that posts IFRAME_READY, and the editor
-          counts on hearing the languages before the ready report.
         */}
           <EditorLocaleBridge />
           {themeBackgroundCSS && (

package/src/theme-section.tsx

@@ -35,6 +35,10 @@ import { useListImpression } from './hooks/use-list-impression';
 import { reportsOwnImpressions } from './utils/section-impressions';
 import { PreviewToEditorMessageType } from '@akinon/theme-contract';
 import { useSectionSeen } from './hooks/use-section-seen';
+// Own-colour / own-typography markers for the theme's rich-text
+// element defaults.
+import { useThemeSettingsContext } from './theme-settings-context';
+import { themeOwnStyleAttributes } from './utils/theme-settings-css';
 export interface Section {
   id: string;
   type: string;
@@ -180,6 +184,9 @@ export default function ThemeSection({
   const { locale, currency: storefrontCurrency } = useLocalization();
   setBindingLocale(locale);
 
+  // With the hooks, above the early returns below.
+  const themeSettings = useThemeSettingsContext();
+
   useEffect(() => {
     if (!isDesigner) return;
 
@@ -1195,12 +1202,20 @@ export default function ThemeSection({
     };
   }
 
+  // Data-pz-own-color / data-pz-own-type, so the theme's rich-text
+  // defaults leave the colour and typography this section authored to inherit.
+  const ownStyleAttributes = themeOwnStyleAttributes(
+    effectiveSection.styles,
+    themeSettings
+  );
+
   return (
     <ThemeSectionDataProvider items={sectionDataItems}>
     <ThemeSectionListProvider listId={sectionListId} listName={sectionListName}>
     <section
       ref={sectionRef}
       data-section-id={effectiveSection.id}
+      {...ownStyleAttributes}
       data-newsletter-signup={isNewsletterSection ? 'true' : undefined}
       data-newsletter-endpoint={
         isNewsletterSection ? newsletterEndpoint : undefined