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

package/src/shared/style-settings/components/StyleSettings.vue

@@ -1,6 +1,14 @@
 <template>
   <div data-component="style-settings">
-    <SideBarSettingsHeader :title="styleSettingsTr(`styleTitle`)" />
+    <SideBarSettingsHeader :title="styleSettingsTr(`styleTitle`)">
+      <template #sub-content>
+        <p class="tw-mt-2 tw-text-grayscale-600 tw-text-sm">
+          {{ styleSettingsTr('styleDescription') }}
+        </p>
+      </template>
+    </SideBarSettingsHeader>
+
+    <!-- Color palette -->
     <CollapsiblePanel
       data-component="collapsible-panel"
       :title="styleSettingsTr('colorPaletteTitle')"
@@ -8,12 +16,31 @@
     >
       <ColorPaletteSettingsWithState />
     </CollapsiblePanel>
-    <!-- Start button style options -->
-    <StyleSettingsSection>
+
+    <!-- Text style -->
+    <CollapsiblePanel
+      ref="textStylesPanel"
+      class="c-text-style-panel"
+      data-component="collapsible-panel"
+      :title="styleSettingsTr('textStyleTitle')"
+      :subtitle="textStyleSizeOrderWarning"
+      :is-collapsed="false"
+    >
+      <p class="tw-mb-2 tw-text-grayscale-600 tw-text-sm">
+        {{ styleSettingsTr('customizeInfo') }}
+      </p>
+      <TextStyleOptionsSettingsWithState />
+    </CollapsiblePanel>
+
+    <!-- Button styles -->
+    <CollapsiblePanel
+      data-component="collapsible-panel"
+      :title="styleSettingsTr('buttonStyleTitle')"
+      :is-collapsed="true"
+    >
       <div class="tw-w-full">
         <!-- Start button styles -->
         <div class="tw-mb-6">
-          <SideBarSectionTitle :title="styleSettingsTr(`buttonStyleTitle`)" />
           <div
             class="tw-grid tw-gap-3"
             :class="{
@@ -79,23 +106,7 @@
         </div>
         <!-- End Button options -->
       </div>
-    </StyleSettingsSection>
-    <!-- End button style options -->
-
-    <!-- Start text style selection -->
-    <StyleSettingsSection>
-      <div class="tw-w-full">
-        <SideBarSectionTitle
-          :title="styleSettingsTr(`textStyleTitle`)"
-          title-text-size="base"
-        />
-        <p class="tw-mb-2 tw-text-grayscale-600 tw-text-sm">
-          {{ styleSettingsTr('customizeInfo') }}
-        </p>
-        <TextStyleOptionsSettingsWithState />
-      </div>
-    </StyleSettingsSection>
-    <!-- End text style selection -->
+    </CollapsiblePanel>
 
     <!-- Start Hide BrandPage logo -->
     <div
@@ -126,10 +137,13 @@
   </div>
 </template>
 <script>
+import { nextTick, onMounted, ref, watch } from 'vue';
 import { Toggle, Icon, CollapsiblePanel } from '@designcrowd/fe-shared-lib';
+import {
+  TEXT_STYLES_SETTINGS_SECTION,
+  useUiSideBarStore,
+} from '@shared/side-bar/store';
 import StyleSettingsMixin from './StyleSettings.mixin.ts';
-import SideBarSectionTitle from '../../common/SideBarSectionTitle.vue';
-import StyleSettingsSection from './StyleSettingsSection.vue';
 import SideBarSettingsHeader from '../../common/SideBarSettingsHeader.vue';
 import ColorField from '../../content-settings/components/color-field/ColorField.vue';
 import TextStyleOptionsSettingsWithState from '../components/text-style-options-settings-with-state/TextStyleOptionsSettingsWithState.vue';
@@ -139,8 +153,6 @@ import { styleSettingsTr } from '@src/composables/useTranslate';
 export default {
   components: {
     SideBarSettingsHeader,
-    SideBarSectionTitle,
-    StyleSettingsSection,
     Toggle,
     TextStyleOptionsSettingsWithState,
     ColorField,
@@ -150,9 +162,40 @@ export default {
   },
   mixins: [StyleSettingsMixin],
   setup() {
+    const sideBarStore = useUiSideBarStore();
+    const textStylesPanel = ref(null);
+
+    // "Edit Text Styles" in a role dropdown lands here: open the panel, bring it into view,
+    // then clear the request so it doesn't fire again (as BrandPageSettings does for Save Contact).
+    const openRequestedSection = () => {
+      if (
+        sideBarStore.selectedSettingsSection !== TEXT_STYLES_SETTINGS_SECTION
+      ) {
+        return;
+      }
+
+      sideBarStore.setSelectedSettingsSection({ sectionName: undefined });
+
+      nextTick(() => {
+        const panel = textStylesPanel.value;
+
+        if (!panel) return;
+
+        if (panel.selfIsCollapsed) panel.toggleCollapsed();
+
+        panel.$el?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      });
+    };
+
+    onMounted(() => {
+      watch(() => sideBarStore.selectedSettingsSection, openRequestedSection);
+      openRequestedSection();
+    });
+
     return {
       ...StyleSettingsMixin.setup(),
       styleSettingsTr,
+      textStylesPanel,
     };
   },
 };
@@ -175,6 +218,12 @@ export default {
   @apply tw-bg-white;
 }
 
+/* CollapsiblePanel's subtitle takes text only, so the size order warning (this panel's only
+   subtitle) is boxed from here. StyleSettings.test.ts fails if a library bump moves it. */
+.c-text-style-panel .tw-grow > div + div {
+  @apply tw-mt-2 tw-mb-0 tw-p-2 tw-text-xs tw-rounded tw-border tw-border-solid tw-border-warning-500 tw-bg-warning-100 tw-text-warning-800;
+}
+
 .c-select {
   @apply tw-bg-no-repeat;
   background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.46967 9.46967C6.76256 9.17678 7.23744 9.17678 7.53033 9.46967L12 13.9393L16.4697 9.46967C16.7626 9.17678 17.2374 9.17678 17.5303 9.46967C17.8232 9.76256 17.8232 10.2374 17.5303 10.5303L12.5303 15.5303C12.3897 15.671 12.1989 15.75 12 15.75C11.8011 15.75 11.6103 15.671 11.4697 15.5303L6.46967 10.5303C6.17678 10.2374 6.17678 9.76256 6.46967 9.46967Z' fill='%23595959'/%3E%3C/svg%3E%0A");

package/src/shared/style-settings/components/i18n/style-settings.de-DE.json

@@ -1,23 +1,35 @@
 {
-  "styleSettingsSection" : {
-    "titles" : "Titel",
-    "headings" : "Überschriften",
-    "paragraphs" : "Absätze",
-    "buttons" : "Schaltflächen",
-    "premium" : "Premium",
-    "buttonBorderColor" : "Farbe des Schaltflächenrahmens",
-    "buttonFillColor" : "Farbe der Schaltflächenfüllung",
-    "buttonShadowColor" : "Farbe des Schaltflächenschattens",
-    "buttonSoftShadowColor" : "Farbe des Schaltflächenschattens",
-    "buttonIconColor" : "Symbolfarbe",
-    "customizeInfo" : "Passen Sie die Darstellung von Text auf Ihrer Website an.",
-    "colorPaletteTitle" : "Farbpalette",
-    "colorPaletteDescription" : "Passen Sie die Farben auf Ihrer Website an.",
-    "brandColorsTitle" : "Markenfarben",
-    "hideDesignLogo" : "Design.com-Logo ausblenden",
-    "hideBrandCrowdLogo" : "BrandCrowd Logo ausblenden",
-    "styleTitle" : "Stil",
-    "buttonStyleTitle" : "Schaltflächenstil",
-    "textStyleTitle" : "Textstil"
+  "styleSettingsSection": {
+    "titles": "Titel",
+    "headings": "Überschriften",
+    "paragraphs": "Absätze",
+    "buttons": "Schaltflächen",
+    "heading1": "Überschrift 1",
+    "heading2": "Überschrift 2",
+    "heading3": "Überschrift 3",
+    "heading4": "Überschrift 4",
+    "heading5": "Überschrift 5",
+    "heading6": "Überschrift 6",
+    "paragraph1": "Absatz 1",
+    "paragraph2": "Absatz 2",
+    "paragraph3": "Absatz 3",
+    "button": "Schaltflächentext",
+    "premium": "Premium",
+    "buttonBorderColor": "Farbe des Schaltflächenrahmens",
+    "buttonFillColor": "Farbe der Schaltflächenfüllung",
+    "buttonShadowColor": "Farbe des Schaltflächenschattens",
+    "buttonSoftShadowColor": "Farbe des Schaltflächenschattens",
+    "buttonIconColor": "Symbolfarbe",
+    "customizeInfo": "Passen Sie die Darstellung von Text auf Ihrer Website an.",
+    "colorPaletteTitle": "Farbpalette",
+    "colorPaletteDescription": "Passen Sie die Farben auf Ihrer Website an.",
+    "brandColorsTitle": "Markenfarben",
+    "hideDesignLogo": "Design.com-Logo ausblenden",
+    "hideBrandCrowdLogo": "BrandCrowd Logo ausblenden",
+    "styleTitle": "Stil",
+    "buttonStyleTitle": "Schaltflächenstil",
+    "styleDescription": "Passen Sie Farben, Textstile und andere Designeinstellungen auf Ihrer Website an.",
+    "textStyleTitle": "Textstil",
+    "sizeOrderWarning": "Einige Textgrößen sind nicht in der richtigen Reihenfolge. Überschriften und Absätze sollten nicht größer sein als der Textstil darüber."
   }
 }

package/src/shared/style-settings/components/i18n/style-settings.es-ES.json

@@ -1,23 +1,35 @@
 {
-  "styleSettingsSection" : {
-    "titles" : "Títulos",
-    "headings" : "Encabezados",
-    "paragraphs" : "Párrafos",
-    "buttons" : "Botones",
-    "premium" : "Prémium",
-    "buttonBorderColor" : "Color del borde del botón",
-    "buttonFillColor" : "Color de relleno del botón",
-    "buttonShadowColor" : "Color de sombra del botón",
-    "buttonSoftShadowColor" : "Color de sombra del botón",
-    "buttonIconColor" : "Color del icono",
-    "customizeInfo" : "Personaliza la apariencia del texto por todo tu sitio web",
-    "colorPaletteTitle" : "Paleta de colores",
-    "colorPaletteDescription" : "Personaliza los colores por todo tu sitio web",
-    "brandColorsTitle" : "Colores de marca",
-    "hideDesignLogo" : "Oculta el logo de Design.com",
-    "hideBrandCrowdLogo" : "Ocultar el logo de BrandCrowd",
-    "styleTitle" : "Estilo",
-    "buttonStyleTitle" : "Estilo de botón",
-    "textStyleTitle" : "Estilo de texto"
+  "styleSettingsSection": {
+    "titles": "Títulos",
+    "headings": "Encabezados",
+    "paragraphs": "Párrafos",
+    "buttons": "Botones",
+    "heading1": "Encabezado 1",
+    "heading2": "Encabezado 2",
+    "heading3": "Encabezado 3",
+    "heading4": "Encabezado 4",
+    "heading5": "Encabezado 5",
+    "heading6": "Encabezado 6",
+    "paragraph1": "Párrafo 1",
+    "paragraph2": "Párrafo 2",
+    "paragraph3": "Párrafo 3",
+    "button": "Texto del botón",
+    "premium": "Prémium",
+    "buttonBorderColor": "Color del borde del botón",
+    "buttonFillColor": "Color de relleno del botón",
+    "buttonShadowColor": "Color de sombra del botón",
+    "buttonSoftShadowColor": "Color de sombra del botón",
+    "buttonIconColor": "Color del icono",
+    "customizeInfo": "Personaliza la apariencia del texto por todo tu sitio web",
+    "colorPaletteTitle": "Paleta de colores",
+    "colorPaletteDescription": "Personaliza los colores por todo tu sitio web",
+    "brandColorsTitle": "Colores de marca",
+    "hideDesignLogo": "Oculta el logo de Design.com",
+    "hideBrandCrowdLogo": "Ocultar el logo de BrandCrowd",
+    "styleTitle": "Estilo",
+    "buttonStyleTitle": "Estilo de botón",
+    "styleDescription": "Personaliza los colores, los estilos de texto y otros ajustes de diseño por todo tu sitio web",
+    "textStyleTitle": "Estilo de texto",
+    "sizeOrderWarning": "Algunos tamaños de texto no están en el orden correcto. Un encabezado o párrafo no debería ser más grande que el que tiene encima."
   }
 }

package/src/shared/style-settings/components/i18n/style-settings.fr-CA.json

@@ -1,23 +1,35 @@
 {
-  "styleSettingsSection" : {
-    "titles" : "Titres",
-    "headings" : "En-têtes",
-    "paragraphs" : "Paragraphes",
-    "buttons" : "Boutons",
-    "premium" : "Premium",
-    "buttonBorderColor" : "Couleur de bordure du bouton",
-    "buttonFillColor" : "Couleur de remplissage du bouton",
-    "buttonShadowColor" : "Couleur de l'ombre du bouton",
-    "buttonSoftShadowColor" : "Couleur de l'ombre du bouton",
-    "buttonIconColor" : "Couleur de l'icône",
-    "customizeInfo" : "Personnalisez l'apparence du texte sur votre site",
-    "colorPaletteTitle" : "Palette de couleurs",
-    "colorPaletteDescription" : "Personnalisez les couleurs utilisées sur votre site",
-    "brandColorsTitle" : "Couleurs de la marque",
-    "hideDesignLogo" : "Masquer le logo Design.com",
-    "hideBrandCrowdLogo" : "Cacher le logo BrandCrowd",
-    "styleTitle" : "Style",
-    "buttonStyleTitle" : "Style de bouton",
-    "textStyleTitle" : "Style de texte"
+  "styleSettingsSection": {
+    "titles": "Titres",
+    "headings": "En-têtes",
+    "paragraphs": "Paragraphes",
+    "buttons": "Boutons",
+    "heading1": "En-tête 1",
+    "heading2": "En-tête 2",
+    "heading3": "En-tête 3",
+    "heading4": "En-tête 4",
+    "heading5": "En-tête 5",
+    "heading6": "En-tête 6",
+    "paragraph1": "Paragraphe 1",
+    "paragraph2": "Paragraphe 2",
+    "paragraph3": "Paragraphe 3",
+    "button": "Texte du bouton",
+    "premium": "Premium",
+    "buttonBorderColor": "Couleur de bordure du bouton",
+    "buttonFillColor": "Couleur de remplissage du bouton",
+    "buttonShadowColor": "Couleur de l'ombre du bouton",
+    "buttonSoftShadowColor": "Couleur de l'ombre du bouton",
+    "buttonIconColor": "Couleur de l'icône",
+    "customizeInfo": "Personnalisez l'apparence du texte sur votre site",
+    "colorPaletteTitle": "Palette de couleurs",
+    "colorPaletteDescription": "Personnalisez les couleurs utilisées sur votre site",
+    "brandColorsTitle": "Couleurs de la marque",
+    "hideDesignLogo": "Masquer le logo Design.com",
+    "hideBrandCrowdLogo": "Cacher le logo BrandCrowd",
+    "styleTitle": "Style",
+    "buttonStyleTitle": "Style de bouton",
+    "styleDescription": "Personnalisez les couleurs, les styles de texte et d'autres paramètres de conception sur votre site",
+    "textStyleTitle": "Style de texte",
+    "sizeOrderWarning": "Certaines tailles de texte ne sont pas dans le bon ordre. Un en-tête ou un paragraphe ne doit pas être plus grand que celui qui le précède."
   }
 }

package/src/shared/style-settings/components/i18n/style-settings.fr-FR.json

@@ -1,23 +1,35 @@
 {
-  "styleSettingsSection" : {
-    "titles" : "Titres",
-    "headings" : "En-têtes",
-    "paragraphs" : "Paragraphes",
-    "buttons" : "Boutons",
-    "premium" : "Premium",
-    "buttonBorderColor" : "Couleur de bordure du bouton",
-    "buttonFillColor" : "Couleur de remplissage du bouton",
-    "buttonShadowColor" : "Couleur de l'ombre du bouton",
-    "buttonSoftShadowColor" : "Couleur de l'ombre du bouton",
-    "buttonIconColor" : "Couleur de l'icône",
-    "customizeInfo" : "Personnalisez l'apparence du texte sur votre site",
-    "colorPaletteTitle" : "Palette de couleurs",
-    "colorPaletteDescription" : "Personnalisez les couleurs utilisées sur votre site",
-    "brandColorsTitle" : "Couleurs de la marque",
-    "hideDesignLogo" : "Masquer le logo Design.com",
-    "hideBrandCrowdLogo" : "Cacher le logo BrandCrowd",
-    "styleTitle" : "Style",
-    "buttonStyleTitle" : "Style de bouton",
-    "textStyleTitle" : "Style de texte"
+  "styleSettingsSection": {
+    "titles": "Titres",
+    "headings": "En-têtes",
+    "paragraphs": "Paragraphes",
+    "buttons": "Boutons",
+    "heading1": "En-tête 1",
+    "heading2": "En-tête 2",
+    "heading3": "En-tête 3",
+    "heading4": "En-tête 4",
+    "heading5": "En-tête 5",
+    "heading6": "En-tête 6",
+    "paragraph1": "Paragraphe 1",
+    "paragraph2": "Paragraphe 2",
+    "paragraph3": "Paragraphe 3",
+    "button": "Texte du bouton",
+    "premium": "Premium",
+    "buttonBorderColor": "Couleur de bordure du bouton",
+    "buttonFillColor": "Couleur de remplissage du bouton",
+    "buttonShadowColor": "Couleur de l'ombre du bouton",
+    "buttonSoftShadowColor": "Couleur de l'ombre du bouton",
+    "buttonIconColor": "Couleur de l'icône",
+    "customizeInfo": "Personnalisez l'apparence du texte sur votre site",
+    "colorPaletteTitle": "Palette de couleurs",
+    "colorPaletteDescription": "Personnalisez les couleurs utilisées sur votre site",
+    "brandColorsTitle": "Couleurs de la marque",
+    "hideDesignLogo": "Masquer le logo Design.com",
+    "hideBrandCrowdLogo": "Cacher le logo BrandCrowd",
+    "styleTitle": "Style",
+    "buttonStyleTitle": "Style de bouton",
+    "styleDescription": "Personnalisez les couleurs, les styles de texte et d'autres paramètres de conception sur votre site",
+    "textStyleTitle": "Style de texte",
+    "sizeOrderWarning": "Certaines tailles de texte ne sont pas dans le bon ordre. Un en-tête ou un paragraphe ne doit pas être plus grand que celui qui le précède."
   }
 }

package/src/shared/style-settings/components/i18n/style-settings.json

@@ -4,6 +4,16 @@
     "headings": "Headings",
     "paragraphs": "Paragraphs",
     "buttons": "Buttons",
+    "heading1": "Heading 1",
+    "heading2": "Heading 2",
+    "heading3": "Heading 3",
+    "heading4": "Heading 4",
+    "heading5": "Heading 5",
+    "heading6": "Heading 6",
+    "paragraph1": "Paragraph 1",
+    "paragraph2": "Paragraph 2",
+    "paragraph3": "Paragraph 3",
+    "button": "Button text",
     "premium": "Premium",
     "buttonBorderColor": "Button border color",
     "buttonFillColor": "Button fill color",
@@ -14,12 +24,12 @@
     "colorPaletteTitle": "Color Palette",
     "colorPaletteDescription": "Customize the colors used across your site",
     "brandColorsTitle": "Brand Colors",
-
     "hideDesignLogo": "Hide Design.com logo",
     "hideBrandCrowdLogo": "Hide BrandCrowd logo",
-
     "styleTitle": "Style",
     "buttonStyleTitle": "Button style",
-    "textStyleTitle": "Text style"
+    "styleDescription": "Customize colors, text styles, and other design settings across your site.",
+    "textStyleTitle": "Text Style",
+    "sizeOrderWarning": "Some text sizes are out of order. A heading or paragraph shouldn't be larger than the one above it."
   }
 }

package/src/shared/style-settings/components/i18n/style-settings.pt-BR.json

@@ -1,23 +1,35 @@
 {
-  "styleSettingsSection" : {
-    "titles" : "Títulos",
-    "headings" : "Subtítulos",
-    "paragraphs" : "Parágrafos",
-    "buttons" : "Botões",
-    "premium" : "Premium",
-    "buttonBorderColor" : "Cor da borda do botão",
-    "buttonFillColor" : "Cor de preenchimento do botão",
-    "buttonShadowColor" : "Cor da sombra do botão",
-    "buttonSoftShadowColor" : "Cor da sombra do botão",
-    "buttonIconColor" : "Cor do ícone",
-    "customizeInfo" : "Personalizar o visual do texto em todo o site",
-    "colorPaletteTitle" : "Paleta de cores",
-    "colorPaletteDescription" : "Personalizar as cores usadas em todo o site",
-    "brandColorsTitle" : "Cores da marca",
-    "hideDesignLogo" : "Ocultar logotipo do Design.com",
-    "hideBrandCrowdLogo" : "Ocultar o logotipo do BrandCrowd",
-    "styleTitle" : "Estilo",
-    "buttonStyleTitle" : "Estilo do botão",
-    "textStyleTitle" : "Tipo de texto"
+  "styleSettingsSection": {
+    "titles": "Títulos",
+    "headings": "Subtítulos",
+    "paragraphs": "Parágrafos",
+    "buttons": "Botões",
+    "heading1": "Subtítulo 1",
+    "heading2": "Subtítulo 2",
+    "heading3": "Subtítulo 3",
+    "heading4": "Subtítulo 4",
+    "heading5": "Subtítulo 5",
+    "heading6": "Subtítulo 6",
+    "paragraph1": "Parágrafo 1",
+    "paragraph2": "Parágrafo 2",
+    "paragraph3": "Parágrafo 3",
+    "button": "Texto do botão",
+    "premium": "Premium",
+    "buttonBorderColor": "Cor da borda do botão",
+    "buttonFillColor": "Cor de preenchimento do botão",
+    "buttonShadowColor": "Cor da sombra do botão",
+    "buttonSoftShadowColor": "Cor da sombra do botão",
+    "buttonIconColor": "Cor do ícone",
+    "customizeInfo": "Personalizar o visual do texto em todo o site",
+    "colorPaletteTitle": "Paleta de cores",
+    "colorPaletteDescription": "Personalizar as cores usadas em todo o site",
+    "brandColorsTitle": "Cores da marca",
+    "hideDesignLogo": "Ocultar logotipo do Design.com",
+    "hideBrandCrowdLogo": "Ocultar o logotipo do BrandCrowd",
+    "styleTitle": "Estilo",
+    "buttonStyleTitle": "Estilo do botão",
+    "styleDescription": "Personalizar as cores, os estilos de texto e outras configurações de design em todo o site",
+    "textStyleTitle": "Tipo de texto",
+    "sizeOrderWarning": "Alguns tamanhos de texto estão fora de ordem. Um subtítulo ou parágrafo não deve ser maior que o que está acima dele."
   }
 }

package/src/shared/style-settings/components/i18n/style-settings.pt-PT.json

@@ -1,23 +1,35 @@
 {
-  "styleSettingsSection" : {
-    "titles" : "Títulos",
-    "headings" : "Subtítulos",
-    "paragraphs" : "Parágrafos",
-    "buttons" : "Botões",
-    "premium" : "Premium",
-    "buttonBorderColor" : "Cor da borda do botão",
-    "buttonFillColor" : "Cor de preenchimento do botão",
-    "buttonShadowColor" : "Cor da sombra do botão",
-    "buttonSoftShadowColor" : "Cor da sombra do botão",
-    "buttonIconColor" : "Cor do ícone",
-    "customizeInfo" : "Personalizar o aspeto do texto em todo o site",
-    "colorPaletteTitle" : "Paleta de cores",
-    "colorPaletteDescription" : "Personalizar as cores usadas em todo o site",
-    "brandColorsTitle" : "Cores da marca",
-    "hideDesignLogo" : "Ocultar o logótipo Design.com",
-    "hideBrandCrowdLogo" : "Ocultar o logótipo do BrandCrowd",
-    "styleTitle" : "Estilo",
-    "buttonStyleTitle" : "Estilo do botão",
-    "textStyleTitle" : "Tipo de texto"
+  "styleSettingsSection": {
+    "titles": "Títulos",
+    "headings": "Subtítulos",
+    "paragraphs": "Parágrafos",
+    "buttons": "Botões",
+    "heading1": "Subtítulo 1",
+    "heading2": "Subtítulo 2",
+    "heading3": "Subtítulo 3",
+    "heading4": "Subtítulo 4",
+    "heading5": "Subtítulo 5",
+    "heading6": "Subtítulo 6",
+    "paragraph1": "Parágrafo 1",
+    "paragraph2": "Parágrafo 2",
+    "paragraph3": "Parágrafo 3",
+    "button": "Texto do botão",
+    "premium": "Premium",
+    "buttonBorderColor": "Cor da borda do botão",
+    "buttonFillColor": "Cor de preenchimento do botão",
+    "buttonShadowColor": "Cor da sombra do botão",
+    "buttonSoftShadowColor": "Cor da sombra do botão",
+    "buttonIconColor": "Cor do ícone",
+    "customizeInfo": "Personalizar o aspeto do texto em todo o site",
+    "colorPaletteTitle": "Paleta de cores",
+    "colorPaletteDescription": "Personalizar as cores usadas em todo o site",
+    "brandColorsTitle": "Cores da marca",
+    "hideDesignLogo": "Ocultar o logótipo Design.com",
+    "hideBrandCrowdLogo": "Ocultar o logótipo do BrandCrowd",
+    "styleTitle": "Estilo",
+    "buttonStyleTitle": "Estilo do botão",
+    "styleDescription": "Personalizar as cores, os estilos de texto e outras definições de design em todo o site",
+    "textStyleTitle": "Tipo de texto",
+    "sizeOrderWarning": "Alguns tamanhos de texto não estão pela ordem correta. Um subtítulo ou parágrafo não deve ser maior do que o que está acima dele."
   }
 }

package/src/shared/style-settings/components/text-style-options-settings-with-state/TextStyleOptionsSettingsWithState.vue

@@ -1,18 +1,20 @@
 <template>
   <div data-component="text-style-options-settings-with-state">
     <TextStyleField
-      v-for="textStyleOption in Object.values(textStyleOptions)"
+      v-for="textStyleOption in canonicalTextStyleOptions"
       :id="textStyleOption.title"
       :key="`text-style-option-${textStyleOption.type}`"
+      :data-test-role-card="textStyleOption.type"
       :name="textStyleOption.title"
       :label="textStyleOption.title"
       :font-family-options="availableTextFontFamilyOptions"
       :value="textStyleOption.style"
       :show-text-alignment-options="false"
-      :white-background="true"
       :is-admin-maker="isAdminMaker"
       :logo-theme="logoTheme"
       :show-text-style-type-options="false"
+      :show-typography-preview="true"
+      :show-color="false"
       title-text-size="base"
       @update:model-value="setTextStyleOption(textStyleOption.type, $event)"
     />
@@ -20,27 +22,22 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onBeforeUnmount } from 'vue';
+import { computed } from 'vue';
 import TextStyleField from '../../../content-settings/components/text-style-field/TextStyleField.vue';
 
 import { useUiStyleSettingsStore } from '../../store';
 import {
-  useBrandPageMakerUserStore,
   useBrandPageContainerStore,
   useUiStore,
 } from '@brand-page-maker/stores';
-import { useUiPageSettingsStore } from '@shared/page-settings/store';
 
 import type { UpdateItemValuePayload } from '../../../content-settings/models';
+import { CANONICAL_TEXT_STYLE_TYPES } from '@brand-page';
 import type { TextStyleDeclaration, TextStyleType } from '@brand-page';
-import { useExternalRichTextEditor } from '@brand-page-maker/composables/rich-text-editor/useRichTextEditor';
-import { transformToRTE } from '@brand-page-maker/utils';
 
 const styleSettingsStore = useUiStyleSettingsStore();
-const userStore = useBrandPageMakerUserStore();
 const containerStore = useBrandPageContainerStore();
 const uiStore = useUiStore();
-const uiPageSettingStore = useUiPageSettingsStore();
 
 const availableTextFontFamilyOptions = computed(
   () => styleSettingsStore.availableTextFontFamilyOptions,
@@ -50,38 +47,21 @@ const textStyleOptions = computed(
   () => styleSettingsStore.textStyles.textStyleOptions,
 );
 
-const isAdminMaker = computed(() => containerStore.isAdminMaker);
-const canUseRichTextEditor = computed(
-  () => userStore.features.canUseRichTextEditor,
+// Only the 10 canonical roles are shown/edited; legacy roles remain in the model
+// for resolving un-migrated content but are hidden from the Style tab (BP-5969).
+const canonicalTextStyleOptions = computed(() =>
+  CANONICAL_TEXT_STYLE_TYPES.map((type) => textStyleOptions.value[type]),
 );
-const logoTheme = computed(() => uiStore.logoTheme);
 
-const { externalEditor } = useExternalRichTextEditor();
+const isAdminMaker = computed(() => containerStore.isAdminMaker);
+const logoTheme = computed(() => uiStore.logoTheme);
 
 const setTextStyleOption = (
   type: TextStyleType,
   value: UpdateItemValuePayload<TextStyleDeclaration>,
 ) => {
-  updateContentToRTE(type, value);
+  // Post-BP-5969 a role edit repaints linked blocks via Page's derived text-role CSS, so no
+  // per-mark re-stamp is needed — just update the store.
   styleSettingsStore.setTextStyleOption({ type, style: value.value });
 };
-
-const updateContentToRTE = (
-  type: TextStyleType,
-  value: UpdateItemValuePayload<TextStyleDeclaration>,
-) => {
-  if (canUseRichTextEditor.value)
-    transformToRTE(
-      uiPageSettingStore,
-      externalEditor,
-      undefined,
-      undefined,
-      type,
-      value.value,
-    );
-};
-
-onBeforeUnmount(() => {
-  externalEditor.destroy();
-});
 </script>