@designcrowd/library.brand-page 6.2.11-builder-v2-1 → 6.2.12

package/src/brand-page/models/styles.model.ts

@@ -1,4 +1,3 @@
-import type { FontFamilyKey } from '../constants';
 import {
   FONT_SIZE_HEADINGS,
   FONT_SIZE_TITLE,
@@ -13,11 +12,41 @@ import {
   FONT_FAMILY_CONFIGS,
   DEFAULT_FONT_FAMILY_KEY,
   DISPlAY_TEXT_BUTTONS,
+  DISPLAY_TEXT_HEADING_1,
+  DISPLAY_TEXT_HEADING_2,
+  DISPLAY_TEXT_HEADING_3,
+  DISPLAY_TEXT_HEADING_4,
+  DISPLAY_TEXT_HEADING_5,
+  DISPLAY_TEXT_HEADING_6,
+  DISPLAY_TEXT_PARAGRAPH_1,
+  DISPLAY_TEXT_PARAGRAPH_2,
+  DISPLAY_TEXT_PARAGRAPH_3,
+  DISPLAY_TEXT_BUTTON,
+  TEXT_ROLE_STYLE_DEFAULTS,
 } from '../constants';
 
-import { commonTr, styleSettingsTr } from '@src/composables/useTranslate';
+import { styleSettingsTr } from '@src/composables/useTranslate';
 
+/**
+ * The 10 canonical global text roles (BP-5969) plus the 4 legacy roles.
+ *
+ * Legacy keys (`titles`/`headings`/`paragraphs`/`buttons`) are retained ONLY so
+ * pre-migration content keeps resolving until migration-22 converts it; they are
+ * hidden from the panel/picker (see `CANONICAL_TEXT_STYLE_TYPES`) and no new code
+ * should write them. See `0019-retire-rte-object-style-sync.md` and `global-text-style.md`.
+ */
 export const TEXT_STYLE_TYPES = {
+  heading1: 'heading1',
+  heading2: 'heading2',
+  heading3: 'heading3',
+  heading4: 'heading4',
+  heading5: 'heading5',
+  heading6: 'heading6',
+  paragraph1: 'paragraph1',
+  paragraph2: 'paragraph2',
+  paragraph3: 'paragraph3',
+  button: 'button',
+  // --- legacy (resolution-only, hidden, do not write) ---
   titles: 'titles',
   headings: 'headings',
   paragraphs: 'paragraphs',
@@ -26,12 +55,66 @@ export const TEXT_STYLE_TYPES = {
 
 export type TextStyleType = keyof typeof TEXT_STYLE_TYPES;
 
+/** The 10 roles shown in the panel/picker, in display order. */
+export const CANONICAL_TEXT_STYLE_TYPES = [
+  'heading1',
+  'heading2',
+  'heading3',
+  'heading4',
+  'heading5',
+  'heading6',
+  'paragraph1',
+  'paragraph2',
+  'paragraph3',
+  'button',
+] as const;
+
+export type CanonicalTextStyleType =
+  (typeof CANONICAL_TEXT_STYLE_TYPES)[number];
+
+/** Legacy roles, retained for resolution of un-migrated content only. */
+export const LEGACY_TEXT_STYLE_TYPES = [
+  'titles',
+  'headings',
+  'paragraphs',
+  'buttons',
+] as const;
+
+export type LegacyTextStyleType = (typeof LEGACY_TEXT_STYLE_TYPES)[number];
+
+export const isLegacyTextStyleType = (
+  type: string | undefined,
+): type is LegacyTextStyleType =>
+  (LEGACY_TEXT_STYLE_TYPES as readonly string[]).includes(type ?? '');
+
+// Models-level so both the render path (`text-role-css.util.ts`) and the migration path
+// (`text-role-reconnect.util.ts`, which re-exports this) share one guard, rather than a render
+// component reaching into the migration-side file for it.
+export const isCanonicalTextStyleType = (
+  type: unknown,
+): type is CanonicalTextStyleType =>
+  (CANONICAL_TEXT_STYLE_TYPES as readonly unknown[]).includes(type);
+
+const ALL_TEXT_STYLE_TYPES = [
+  ...CANONICAL_TEXT_STYLE_TYPES,
+  ...LEGACY_TEXT_STYLE_TYPES,
+] as const;
+
 export const TEXT_STYLE_TYPES_DISPLAY_NAME_MAP = () => ({
+  heading1: styleSettingsTr('heading1'),
+  heading2: styleSettingsTr('heading2'),
+  heading3: styleSettingsTr('heading3'),
+  heading4: styleSettingsTr('heading4'),
+  heading5: styleSettingsTr('heading5'),
+  heading6: styleSettingsTr('heading6'),
+  paragraph1: styleSettingsTr('paragraph1'),
+  paragraph2: styleSettingsTr('paragraph2'),
+  paragraph3: styleSettingsTr('paragraph3'),
+  button: styleSettingsTr('button'),
   titles: styleSettingsTr('titles'),
   headings: styleSettingsTr('headings'),
   paragraphs: styleSettingsTr('paragraphs'),
   buttons: styleSettingsTr('buttons'),
-  none: commonTr('none'),
 });
 
 export type TextStyleDeclaration = BrandPageCssStyle & {
@@ -44,8 +127,22 @@ export type TextStyleDeclarationWithoutTextAlign = Omit<
   'textAlign'
 >;
 
+/**
+ * BP-5969 (ADR-0020): an RTE-paired section field's style, with **colour decoupled**. Colour
+ * is the ONE thing removed from the style object — it lives in the RTE mark now (baked
+ * contrast at birth / by migration-22), so this type has no `color` and nothing can read a
+ * stale one off an RTE field. Everything else stays: typography here is a genuine per-block
+ * OVERRIDE (a title set to a non-role font/size) that the renderer resolves against the role
+ * (`roleTypographyStyle`, `fillRteRunTypography`), and dropping it would lose that override
+ * through migration — so only `color` goes. Non-RTE per-item styles keep the full
+ * `TextStyleDeclaration`.
+ */
+export type RteTextRole = Omit<TextStyleDeclaration, 'color'>;
+
+// BP-5969 (ADR-0020): a role defines TYPOGRAPHY only — colour is decoupled (contrast-derived
+// per surface, baked onto the element). `color` was retired from this declaration; nothing
+// reads a role's colour any more, and migration-22 baked the old value onto every element.
 export interface GlobalTextStyleDeclaration {
-  color: string | undefined;
   fontFamily: string | undefined;
   fontSize: string | undefined;
   fontStyle: string | undefined;
@@ -58,7 +155,6 @@ export interface GlobalTextStyleDeclaration {
 
 export const emptyGlobalTextStyleDeclaration =
   Object.freeze<GlobalTextStyleDeclaration>({
-    color: undefined,
     fontFamily: undefined,
     fontSize: undefined,
     fontStyle: undefined,
@@ -89,9 +185,10 @@ export class TextStyleOption {
 
 export type TextStyleOptions = Record<TextStyleType, TextStyleOption>;
 
-// No `color` here on purpose: these run pre-gate and back-fill options missing
-// from ancient metadata, so a colour minted here would pre-empt migration-21's
-// copy of the model's own root colour.
+// No `color` on defaults, on purpose: these run pre-gate and back-fill options
+// missing from ancient metadata, so a colour minted here would pre-empt
+// migration-21's copy of the model's own root colour. (BP-5969: the same holds
+// for the 10 new roles — colour comes from the root cascade / migration.)
 const createDefaultTitlesTextStyleOption = (): TextStyleOption =>
   new TextStyleOption(TEXT_STYLE_TYPES.titles, DISPLAY_TEXT_TITLE, {
     style: {
@@ -132,30 +229,73 @@ const createDefaultButtonTextStyleOption = (): TextStyleOption =>
     },
   });
 
-const createDefaultTextStyleOptions = (): TextStyleOptions => ({
-  [TEXT_STYLE_TYPES.titles]: createDefaultTitlesTextStyleOption(),
-  [TEXT_STYLE_TYPES.headings]: createDefaultHeadingsTextStyleOption(),
-  [TEXT_STYLE_TYPES.paragraphs]: createDefaultParagraphTextStyleOption(),
-  [TEXT_STYLE_TYPES.buttons]: createDefaultButtonTextStyleOption(),
-});
+const CANONICAL_DISPLAY_NAMES: Record<CanonicalTextStyleType, string> = {
+  heading1: DISPLAY_TEXT_HEADING_1,
+  heading2: DISPLAY_TEXT_HEADING_2,
+  heading3: DISPLAY_TEXT_HEADING_3,
+  heading4: DISPLAY_TEXT_HEADING_4,
+  heading5: DISPLAY_TEXT_HEADING_5,
+  heading6: DISPLAY_TEXT_HEADING_6,
+  paragraph1: DISPLAY_TEXT_PARAGRAPH_1,
+  paragraph2: DISPLAY_TEXT_PARAGRAPH_2,
+  paragraph3: DISPLAY_TEXT_PARAGRAPH_3,
+  button: DISPLAY_TEXT_BUTTON,
+};
+
+const createCanonicalTextStyleOption = (
+  type: CanonicalTextStyleType,
+): TextStyleOption => {
+  const defaults = TEXT_ROLE_STYLE_DEFAULTS[type];
+
+  return new TextStyleOption(type, CANONICAL_DISPLAY_NAMES[type], {
+    style: {
+      ...emptyGlobalTextStyleDeclaration,
+      fontSize: defaults.fontSize,
+      fontWeight: defaults.fontWeight,
+      lineHeight: defaults.lineHeight,
+      fontFamily: FONT_FAMILY_CONFIGS[DEFAULT_FONT_FAMILY_KEY].name,
+    },
+  });
+};
+
+const LEGACY_FACTORIES: Record<LegacyTextStyleType, () => TextStyleOption> = {
+  titles: createDefaultTitlesTextStyleOption,
+  headings: createDefaultHeadingsTextStyleOption,
+  paragraphs: createDefaultParagraphTextStyleOption,
+  buttons: createDefaultButtonTextStyleOption,
+};
+
+const createDefaultTextStyleOption = (type: TextStyleType): TextStyleOption =>
+  isLegacyTextStyleType(type)
+    ? LEGACY_FACTORIES[type]()
+    : createCanonicalTextStyleOption(type);
+
+const createDefaultTextStyleOptions = (): TextStyleOptions =>
+  Object.fromEntries(
+    ALL_TEXT_STYLE_TYPES.map((type) => [
+      type,
+      createDefaultTextStyleOption(type),
+    ]),
+  ) as TextStyleOptions;
 
 /**
- * `style` (the retired site-wide default text colour) is untyped on `TextStyles`,
- * so nothing outside migrations can reach it — but it still arrives in pre-gate
- * JSON, so the constructor carries it through for `migration-21` to consume.
+ * `style` (the retired site-wide default text colour) and `textFontFamily` (the retired site
+ * text font) are untyped on `TextStyles`, so nothing outside migrations can reach them — but
+ * they still arrive in pre-gate JSON, so the constructor carries them through for `migration-21`
+ * and `migration-22` to consume. Never default `textFontFamily`: the maker store's `$patch` never
+ * deletes a key, so a default would be saved back (`0036-retire-text-font-family.md`).
  */
 export type LegacyTextStylesInput = Partial<TextStyles> & {
   style?: BrandPageCssStyle;
+  textFontFamily?: unknown;
 };
 
 export class TextStyles {
-  public textFontFamily: FontFamilyKey;
   public textStyleOptions: TextStyleOptions;
 
   static GetDefaultTextStyle(): TextStyles {
     return new TextStyles({
       style: { color: STYLE_THEME_KEYS.LogoTextColor },
-      textFontFamily: DEFAULT_FONT_FAMILY_KEY,
     });
   }
 
@@ -164,34 +304,28 @@ export class TextStyles {
       (this as unknown as Record<string, unknown>)['style'] = option.style;
     }
 
-    this.textFontFamily = option.textFontFamily || DEFAULT_FONT_FAMILY_KEY;
-    this.textStyleOptions = option.textStyleOptions
-      ? {
-          [TEXT_STYLE_TYPES.titles]: new TextStyleOption(
-            TEXT_STYLE_TYPES.titles,
-            styleSettingsTr('titles'),
-            option.textStyleOptions.titles ||
-              createDefaultTitlesTextStyleOption(),
-          ),
-          [TEXT_STYLE_TYPES.headings]: new TextStyleOption(
-            TEXT_STYLE_TYPES.headings,
-            styleSettingsTr('headings'),
-            option.textStyleOptions.headings ||
-              createDefaultHeadingsTextStyleOption(),
-          ),
-          [TEXT_STYLE_TYPES.paragraphs]: new TextStyleOption(
-            TEXT_STYLE_TYPES.paragraphs,
-            styleSettingsTr('paragraphs'),
-            option.textStyleOptions.paragraphs ||
-              createDefaultParagraphTextStyleOption(),
-          ),
-          [TEXT_STYLE_TYPES.buttons]: new TextStyleOption(
-            TEXT_STYLE_TYPES.buttons,
-            styleSettingsTr('buttons'),
-            option.textStyleOptions.buttons ||
-              createDefaultButtonTextStyleOption(),
-          ),
-        }
+    if (option.textFontFamily !== undefined) {
+      (this as unknown as Record<string, unknown>)['textFontFamily'] =
+        option.textFontFamily;
+    }
+
+    const loaded = option.textStyleOptions;
+
+    // Data-driven build over all 14 roles: use the persisted option where present,
+    // else the role's default. Existing sites (4 legacy roles only) thus keep their
+    // stored definitions and gain the 10 new tiers at their defaults; new sites get
+    // every role's default. Titles are re-derived from i18n (`styleSettingsTr`).
+    this.textStyleOptions = loaded
+      ? (Object.fromEntries(
+          ALL_TEXT_STYLE_TYPES.map((type) => [
+            type,
+            new TextStyleOption(
+              type,
+              styleSettingsTr(type),
+              loaded[type] || createDefaultTextStyleOption(type),
+            ),
+          ]),
+        ) as TextStyleOptions)
       : createDefaultTextStyleOptions();
   }
 }