feat: add font style option to theme

packages/visual-editor/src/components/DefaultThemeConfig.test.ts

@@ -101,4 +101,29 @@ describe("createDefaultThemeConfig", () => {
       value: "'Open Sans', 'Open Sans Fallback', sans-serif",
     });
   });
+
+  it("should include dynamic fontStyle controls for text styling sections", () => {
+    const result = createDefaultThemeConfig();
+
+    for (const sectionKey of [
+      "h1",
+      "h2",
+      "h3",
+      "h4",
+      "h5",
+      "h6",
+      "body",
+      "button",
+      "link",
+    ] as const) {
+      const fontStyle = (result[sectionKey].styles as any).fontStyle;
+      expect(fontStyle).toMatchObject({
+        label: "Font Style",
+        type: "select",
+        plugin: "fontStyle",
+        default: "normal",
+      });
+      expect(typeof fontStyle.options).toBe("function");
+    }
+  });
 });

packages/visual-editor/src/components/DefaultThemeConfig.ts

@@ -2,6 +2,7 @@ import { ThemeConfig } from "../utils/themeResolver.ts";
 import {
   defaultFonts,
   FontRegistry,
+  getFontStyleOptions,
   getFontWeightOptions,
   constructFontSelectOptions,
 } from "../utils/fonts/visualEditorFonts.ts";
@@ -33,6 +34,13 @@ export function createDefaultThemeConfig(
         fontList: fonts,
       });
   };
+  const fontStyleOptions = (fontVariable?: string) => {
+    return () =>
+      getFontStyleOptions({
+        fontCssVariable: fontVariable,
+        fontList: fonts,
+      });
+  };
 
   return {
     headers: {
@@ -100,6 +108,13 @@ export function createDefaultThemeConfig(
           options: fontWeightOptions("--fontFamily-h1-fontFamily"),
           default: "700",
         },
+        fontStyle: {
+          label: msg("fields.fontStyle", "Font Style"),
+          type: "select",
+          plugin: "fontStyle",
+          options: fontStyleOptions("--fontFamily-h1-fontFamily"),
+          default: "normal",
+        },
         textTransform: {
           label: msg("theme.textTransform.textTransform", "Text Transform"),
           type: "select",
@@ -133,6 +148,13 @@ export function createDefaultThemeConfig(
           options: fontWeightOptions("--fontFamily-h2-fontFamily"),
           default: "700",
         },
+        fontStyle: {
+          label: msg("fields.fontStyle", "Font Style"),
+          type: "select",
+          plugin: "fontStyle",
+          options: fontStyleOptions("--fontFamily-h2-fontFamily"),
+          default: "normal",
+        },
         textTransform: {
           label: msg("theme.textTransform.textTransform", "Text Transform"),
           type: "select",
@@ -166,6 +188,13 @@ export function createDefaultThemeConfig(
           options: fontWeightOptions("--fontFamily-h3-fontFamily"),
           default: "700",
         },
+        fontStyle: {
+          label: msg("fields.fontStyle", "Font Style"),
+          type: "select",
+          plugin: "fontStyle",
+          options: fontStyleOptions("--fontFamily-h3-fontFamily"),
+          default: "normal",
+        },
         textTransform: {
           label: msg("theme.textTransform.textTransform", "Text Transform"),
           type: "select",
@@ -199,6 +228,13 @@ export function createDefaultThemeConfig(
           options: fontWeightOptions("--fontFamily-h4-fontFamily"),
           default: "700",
         },
+        fontStyle: {
+          label: msg("fields.fontStyle", "Font Style"),
+          type: "select",
+          plugin: "fontStyle",
+          options: fontStyleOptions("--fontFamily-h4-fontFamily"),
+          default: "normal",
+        },
         textTransform: {
           label: msg("theme.textTransform.textTransform", "Text Transform"),
           type: "select",
@@ -232,6 +268,13 @@ export function createDefaultThemeConfig(
           options: fontWeightOptions("--fontFamily-h5-fontFamily"),
           default: "700",
         },
+        fontStyle: {
+          label: msg("fields.fontStyle", "Font Style"),
+          type: "select",
+          plugin: "fontStyle",
+          options: fontStyleOptions("--fontFamily-h5-fontFamily"),
+          default: "normal",
+        },
         textTransform: {
           label: msg("theme.textTransform.textTransform", "Text Transform"),
           type: "select",
@@ -265,6 +308,13 @@ export function createDefaultThemeConfig(
           options: fontWeightOptions("--fontFamily-h6-fontFamily"),
           default: "700",
         },
+        fontStyle: {
+          label: msg("fields.fontStyle", "Font Style"),
+          type: "select",
+          plugin: "fontStyle",
+          options: fontStyleOptions("--fontFamily-h6-fontFamily"),
+          default: "normal",
+        },
         textTransform: {
           label: msg("theme.textTransform.textTransform", "Text Transform"),
           type: "select",
@@ -298,6 +348,13 @@ export function createDefaultThemeConfig(
           options: fontWeightOptions("--fontFamily-body-fontFamily"),
           default: "400",
         },
+        fontStyle: {
+          label: msg("fields.fontStyle", "Font Style"),
+          type: "select",
+          plugin: "fontStyle",
+          options: fontStyleOptions("--fontFamily-body-fontFamily"),
+          default: "normal",
+        },
         textTransform: {
           label: msg("theme.textTransform.textTransform", "Text Transform"),
           type: "select",
@@ -350,6 +407,13 @@ export function createDefaultThemeConfig(
           options: fontWeightOptions("--fontFamily-button-fontFamily"),
           default: "400",
         },
+        fontStyle: {
+          label: msg("fields.fontStyle", "Font Style"),
+          type: "select",
+          plugin: "fontStyle",
+          options: fontStyleOptions("--fontFamily-button-fontFamily"),
+          default: "normal",
+        },
         borderRadius: {
           label: msg("theme.borderRadius", "Border Radius"),
           type: "select",
@@ -397,6 +461,13 @@ export function createDefaultThemeConfig(
           options: fontWeightOptions("--fontFamily-link-fontFamily"),
           default: "400",
         },
+        fontStyle: {
+          label: msg("fields.fontStyle", "Font Style"),
+          type: "select",
+          plugin: "fontStyle",
+          options: fontStyleOptions("--fontFamily-link-fontFamily"),
+          default: "normal",
+        },
         textTransform: {
           label: msg("theme.textTransform.textTransform", "Text Transform"),
           type: "select",

packages/visual-editor/src/components/atoms/fontStyle.css

@@ -0,0 +1,71 @@
+.components.font-body-fontFamily,
+.components .font-body-fontFamily {
+  font-style: var(--fontStyle-body-fontStyle);
+}
+
+.components.font-button-fontFamily,
+.components .font-button-fontFamily {
+  font-style: var(--fontStyle-button-fontStyle);
+}
+
+.components.font-link-fontFamily,
+.components .font-link-fontFamily {
+  font-style: var(--fontStyle-link-fontStyle);
+}
+
+.components.font-h1-fontFamily,
+.components .font-h1-fontFamily {
+  font-style: var(--fontStyle-h1-fontStyle);
+}
+
+.components.font-h2-fontFamily,
+.components .font-h2-fontFamily {
+  font-style: var(--fontStyle-h2-fontStyle);
+}
+
+.components.font-h3-fontFamily,
+.components .font-h3-fontFamily {
+  font-style: var(--fontStyle-h3-fontStyle);
+}
+
+.components.font-h4-fontFamily,
+.components .font-h4-fontFamily {
+  font-style: var(--fontStyle-h4-fontStyle);
+}
+
+.components.font-h5-fontFamily,
+.components .font-h5-fontFamily {
+  font-style: var(--fontStyle-h5-fontStyle);
+}
+
+.components.font-h6-fontFamily,
+.components .font-h6-fontFamily {
+  font-style: var(--fontStyle-h6-fontStyle);
+}
+
+@media (min-width: 640px) {
+  .components.sm\:font-h1-fontFamily,
+  .components .sm\:font-h1-fontFamily {
+    font-style: var(--fontStyle-h1-fontStyle);
+  }
+
+  .components.sm\:font-h2-fontFamily,
+  .components .sm\:font-h2-fontFamily {
+    font-style: var(--fontStyle-h2-fontStyle);
+  }
+
+  .components.sm\:font-h3-fontFamily,
+  .components .sm\:font-h3-fontFamily {
+    font-style: var(--fontStyle-h3-fontStyle);
+  }
+
+  .components.sm\:font-h4-fontFamily,
+  .components .sm\:font-h4-fontFamily {
+    font-style: var(--fontStyle-h4-fontStyle);
+  }
+
+  .components.sm\:font-h5-fontFamily,
+  .components .sm\:font-h5-fontFamily {
+    font-style: var(--fontStyle-h5-fontStyle);
+  }
+}

packages/visual-editor/src/components/atoms/maybeRTF.css

@@ -4,86 +4,100 @@
     font-size: var(--fontSize-body-fontSize) !important;
     line-height: 1.5 !important;
     font-weight: var(--fontWeight-body-fontWeight) !important;
+    font-style: var(--fontStyle-body-fontStyle) !important;
     text-transform: var(--textTransform-body-textTransform) !important;
   }
   li {
     font-family: var(--fontFamily-body-fontFamily) !important;
     font-size: var(--fontSize-body-fontSize) !important;
     line-height: 1.5 !important;
     font-weight: var(--fontWeight-body-fontWeight) !important;
+    font-style: var(--fontStyle-body-fontStyle) !important;
     text-transform: var(--textTransform-body-textTransform) !important;
   }
   h1 {
     font-family: var(--fontFamily-h2-fontFamily) !important;
     font-size: var(--fontSize-h2-fontSize) !important;
     line-height: 1.2 !important;
     font-weight: var(--fontWeight-h2-fontWeight) !important;
+    font-style: var(--fontStyle-h2-fontStyle) !important;
     text-transform: var(--textTransform-h1-textTransform) !important;
     @media (min-width: 640px) {
       font-family: var(--fontFamily-h1-fontFamily) !important;
       font-size: var(--fontSize-h1-fontSize) !important;
       font-weight: var(--fontWeight-h1-fontWeight) !important;
+      font-style: var(--fontStyle-h1-fontStyle) !important;
     }
   }
   h2 {
     font-family: var(--fontFamily-h3-fontFamily) !important;
     font-size: var(--fontSize-h3-fontSize) !important;
     line-height: 1.2 !important;
     font-weight: var(--fontWeight-h3-fontWeight) !important;
+    font-style: var(--fontStyle-h3-fontStyle) !important;
     text-transform: var(--textTransform-h2-textTransform) !important;
     @media (min-width: 640px) {
       font-family: var(--fontFamily-h2-fontFamily) !important;
       font-size: var(--fontSize-h2-fontSize) !important;
       font-weight: var(--fontWeight-h2-fontWeight) !important;
+      font-style: var(--fontStyle-h2-fontStyle) !important;
     }
   }
   h3 {
     font-family: var(--fontFamily-h4-fontFamily) !important;
     font-size: var(--fontSize-h4-fontSize) !important;
     line-height: 1.2 !important;
     font-weight: var(--fontWeight-h4-fontWeight) !important;
+    font-style: var(--fontStyle-h4-fontStyle) !important;
     text-transform: var(--textTransform-h3-textTransform) !important;
     @media (min-width: 640px) {
       font-family: var(--fontFamily-h3-fontFamily) !important;
       font-size: var(--fontSize-h3-fontSize) !important;
       font-weight: var(--fontWeight-h3-fontWeight) !important;
+      font-style: var(--fontStyle-h3-fontStyle) !important;
     }
   }
   h4 {
     font-family: var(--fontFamily-h5-fontFamily) !important;
     font-size: var(--fontSize-h5-fontSize) !important;
     line-height: 1.2 !important;
     font-weight: var(--fontWeight-h5-fontWeight) !important;
+    font-style: var(--fontStyle-h5-fontStyle) !important;
     text-transform: var(--textTransform-h4-textTransform) !important;
     @media (min-width: 640px) {
       font-family: var(--fontFamily-h4-fontFamily) !important;
       font-size: var(--fontSize-h4-fontSize) !important;
       font-weight: var(--fontWeight-h4-fontWeight) !important;
+      font-style: var(--fontStyle-h4-fontStyle) !important;
     }
   }
   h5 {
     font-family: var(--fontFamily-h6-fontFamily) !important;
     font-size: var(--fontSize-h6-fontSize) !important;
     line-height: 1.2 !important;
     font-weight: var(--fontWeight-h6-fontWeight) !important;
+    font-style: var(--fontStyle-h6-fontStyle) !important;
     text-transform: var(--textTransform-h5-textTransform) !important;
     @media (min-width: 640px) {
       font-family: var(--fontFamily-h5-fontFamily) !important;
       font-size: var(--fontSize-h5-fontSize) !important;
       font-weight: var(--fontWeight-h5-fontWeight) !important;
+      font-style: var(--fontStyle-h5-fontStyle) !important;
     }
   }
   h6 {
     font-family: var(--fontFamily-h6-fontFamily) !important;
     font-size: var(--fontSize-h6-fontSize) !important;
     line-height: 1.2 !important;
     font-weight: var(--fontWeight-h6-fontWeight) !important;
+    font-style: var(--fontStyle-h6-fontStyle) !important;
     text-transform: var(--textTransform-h6-textTransform) !important;
   }
   a {
     font-family: var(--fontFamily-link-fontFamily) !important;
     font-size: var(--fontSize-link-fontSize) !important;
     font-weight: var(--fontWeight-link-fontWeight) !important;
+    font-style: var(--fontStyle-link-fontStyle) !important;
     line-height: 1.5 !important;
     text-decoration: underline !important;
     text-transform: var(--textTransform-link-textTransform) !important;

packages/visual-editor/src/components/styles.css

@@ -2,3 +2,4 @@
 @import "@yext/pages-components/style.css";
 @import "./atoms/hours.css";
 @import "./atoms/maybeRTF.css";
+@import "./atoms/fontStyle.css";

packages/visual-editor/src/editor/index.css

@@ -1,4 +1,5 @@
 @import "@puckeditor/core/no-external.css";
+@import "../components/atoms/fontStyle.css";
 @tailwind base;
 @tailwind components;
 @tailwind utilities;