feat: create theme typography migration for Lexical Editor and other …

…packages (#3147) Co-authored-by: Sasho Mihajlov <sashomihajlov@Sashos-MacBook-Pro.local> Co-authored-by: Pavel Denisjuk <pavel@webiny.com> Co-authored-by: adrians5j <adrian@webiny.com>
webiny · Apr 21, 2023 · f0ca560 · f0ca560
1 parent 51ee44b
commit f0ca560
Show file tree

Hide file tree

Showing 88 changed files with 3,082 additions and 327 deletions.
diff --git a/apps/theme/layouts/forms/DefaultFormLayout/SuccessMessage.tsx b/apps/theme/layouts/forms/DefaultFormLayout/SuccessMessage.tsx
@@ -27,8 +27,10 @@ const CheckmarkIcon = styled(({ className }: { className?: string }) => (
     height: 100px;
 `;
 
-const Heading = styled.div(props => props.theme.styles.typography["heading1"]);
-const Message = styled.div(props => props.theme.styles.typography["paragraph1"]);
+const Heading = styled.div(props => props.theme.styles.typography.headings.stylesById("heading1"));
+const Message = styled.div(props =>
+    props.theme.styles.typography.paragraphs.stylesById("paragraph1")
+);
 
 const Wrapper = styled.div`
     width: 100%;

diff --git a/apps/theme/layouts/forms/DefaultFormLayout/TermsOfServiceSection.tsx b/apps/theme/layouts/forms/DefaultFormLayout/TermsOfServiceSection.tsx
@@ -20,7 +20,7 @@ interface Props {
 
 const RteFieldLabel = styled(FieldLabelStyled)`
     .rte-block-paragraph {
-        ${props => props.theme.styles.typography["paragraph1"]};
+        ${props => props.theme.styles.typography.paragraphs.stylesById("paragraph1")};
         margin: 0;
     }
 `;

diff --git a/apps/theme/layouts/forms/DefaultFormLayout/fields/Input.tsx b/apps/theme/layouts/forms/DefaultFormLayout/fields/Input.tsx
@@ -21,7 +21,7 @@ export const StyledInput = styled.input`
     border-radius: ${props => props.theme.styles.borderRadius};
     box-sizing: border-box;
     transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-    ${props => props.theme.styles.typography["paragraph1"]};
+    ${props => props.theme.styles.typography.paragraphs.stylesById("paragraph1")};
 
     &:focus {
         border-color: ${props => props.theme.styles.colors["color2"]};

diff --git a/apps/theme/layouts/forms/DefaultFormLayout/fields/Select.tsx b/apps/theme/layouts/forms/DefaultFormLayout/fields/Select.tsx
@@ -12,7 +12,7 @@ interface SelectProps {
 }
 
 const StyledSelect = styled.select`
-    ${props => props.theme.styles.typography["paragraph1"]};
+    ${props => props.theme.styles.typography.paragraphs.stylesById("paragraph1")};
     border: 1px solid ${props => props.theme.styles.colors["color5"]};
     background-color: ${props => props.theme.styles.colors["color5"]};
     width: 100%;

diff --git a/apps/theme/layouts/forms/DefaultFormLayout/fields/Textarea.tsx b/apps/theme/layouts/forms/DefaultFormLayout/fields/Textarea.tsx
@@ -19,7 +19,7 @@ const StyledTextarea = styled.textarea`
     border-radius: ${props => props.theme.styles.borderRadius};
     box-sizing: border-box;
     transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-    ${props => props.theme.styles.typography["paragraph1"]};
+    ${props => props.theme.styles.typography.paragraphs.stylesById("paragraph1")};
 
     &:focus {
         border-color: ${props => props.theme.styles.colors["color2"]};

diff --git a/apps/theme/layouts/forms/DefaultFormLayout/fields/components/Field.tsx b/apps/theme/layouts/forms/DefaultFormLayout/fields/components/Field.tsx
@@ -3,5 +3,5 @@ import styled from "@emotion/styled";
 export const Field = styled.div`
     width: 100%;
     box-sizing: border-box;
-    ${props => props.theme.styles.typography["paragraph1"]};
+    ${props => props.theme.styles.typography.paragraphs.stylesById("paragraph1")};
 `;
diff --git a/apps/theme/layouts/forms/DefaultFormLayout/fields/components/FieldErrorMessage.tsx b/apps/theme/layouts/forms/DefaultFormLayout/fields/components/FieldErrorMessage.tsx
@@ -4,7 +4,7 @@ import styled from "@emotion/styled";
 const Wrapper = styled.div`
     margin-left: 2px;
     margin-top: 5px;
-    ${props => props.theme.styles.typography["paragraph2"]};
+    ${props => props.theme.styles.typography.paragraphs.stylesById("paragraph2")};
     color: ${props => props.theme.styles.colors["color1"]};
 
     ${props => props.theme.breakpoints["mobile-landscape"]} {

diff --git a/apps/theme/layouts/forms/DefaultFormLayout/fields/components/FieldHelperMessage.tsx b/apps/theme/layouts/forms/DefaultFormLayout/fields/components/FieldHelperMessage.tsx
@@ -4,7 +4,7 @@ export const FieldHelperMessage = styled.div`
     margin-left: 2px;
     margin-top: -5px;
     margin-bottom: 5px;
-    ${props => props.theme.styles.typography["paragraph2"]};
+    ${props => props.theme.styles.typography.paragraphs.stylesById("paragraph2")};
     color: ${props => props.theme.styles.colors["color2"]};
 
     ${props => props.theme.breakpoints["mobile-landscape"]} {

diff --git a/apps/theme/layouts/pages/Static/Footer.tsx b/apps/theme/layouts/pages/Static/Footer.tsx
@@ -77,7 +77,7 @@ const FooterLogo = styled.div`
     }
 
     .copy {
-        ${props => props.theme.styles.typography["paragraph2"]}
+        ${props => props.theme.styles.typography.paragraphs.stylesById("paragraph2")}
         color: ${props => props.theme.styles.colors["color4"]}
     }
 `;

diff --git a/apps/theme/layouts/pages/Static/Header.tsx b/apps/theme/layouts/pages/Static/Header.tsx
@@ -24,7 +24,7 @@ const HeaderWrapper = styled.header`
     top: 0;
 
     a {
-        ${props => props.theme.styles.typography["paragraph1"]}
+        ${props => props.theme.styles.typography.paragraphs.stylesById("paragraph1")}
         color: ${props => props.theme.styles.colors["color1"]};
         text-decoration: none;
     }

diff --git a/apps/theme/theme.ts b/apps/theme/theme.ts
@@ -43,28 +43,6 @@ const paragraphs = {
     WebkitFontSmoothing: "antialiased"
 };
 
-export const typography = {
-    heading1: { ...headings, fontWeight: "bold", fontSize: 48 },
-    heading2: { ...headings, fontSize: 36 },
-    heading3: { ...headings, fontSize: 30 },
-    heading4: { ...headings, fontSize: 24 },
-    heading5: { ...headings, fontSize: 20 },
-    heading6: { ...headings, fontSize: 18, lineHeight: "1.75rem" },
-    paragraph1: { ...paragraphs, fontSize: 16.5 },
-    paragraph2: {
-        ...paragraphs,
-        fontSize: 12.5,
-        letterSpacing: "0.45px",
-        lineHeight: "19px"
-    },
-    quote: {
-        ...paragraphs,
-        fontWeight: "bold",
-        fontSize: 22
-    },
-    list: { ...paragraphs, fontSize: 17 }
-};
-
 // Buttons.
 const buttons = (overrides: CSSObject) => ({
     a: { textDecoration: "none" },
@@ -90,6 +68,79 @@ const buttons = (overrides: CSSObject) => ({
     }
 });
 
+export const typography = {
+    headings: [
+        {
+            id: "heading1",
+            name: "Heading 1",
+            tag: "h1",
+            styles: { ...headings, fontWeight: "bold", fontSize: 48 }
+        },
+        {
+            id: "heading2",
+            name: "Heading 2",
+            tag: "h2",
+            styles: { ...headings, fontSize: 36 }
+        },
+        {
+            id: "heading3",
+            name: "Heading 3",
+            tag: "h3",
+            styles: { ...headings, fontSize: 30 }
+        },
+        {
+            id: "heading4",
+            name: "Heading 4",
+            tag: "h4",
+            styles: { ...headings, fontSize: 24 }
+        },
+        {
+            id: "heading5",
+            name: "Heading 5",
+            tag: "h5",
+            styles: { ...headings, fontSize: 20 }
+        },
+        {
+            id: "heading6",
+            name: "Heading 6",
+            tag: "h6",
+            styles: { ...headings, fontSize: 18, lineHeight: "1.75rem" }
+        }
+    ],
+    paragraphs: [
+        {
+            id: "paragraph1",
+            name: "Paragraph 1",
+            tag: "p",
+            styles: { ...paragraphs, fontSize: 16.5 }
+        },
+        {
+            id: "paragraph2",
+            name: "Paragraph 2",
+            tag: "p",
+            styles: {
+                ...paragraphs,
+                fontSize: 12.5,
+                letterSpacing: "0.45px",
+                lineHeight: "19px"
+            }
+        }
+    ],
+    quotes: [
+        {
+            id: "quote",
+            name: "Quote",
+            tag: "quoteblock",
+            styles: {
+                ...paragraphs,
+                fontWeight: "bold",
+                fontSize: 22
+            }
+        }
+    ],
+    lists: [{ id: "list", name: "list 1", tag: "ul", styles: { ...paragraphs, fontSize: 17 } }]
+} as const; // https://github.com/emotion-js/emotion/issues/1373#issuecomment-498059774 ;
+
 // Theme object.
 const theme = createTheme({
     breakpoints,

diff --git a/packages/app-form-builder/src/page-builder/components/BeforeFormRender.tsx b/packages/app-form-builder/src/page-builder/components/BeforeFormRender.tsx
@@ -14,9 +14,9 @@ export const BeforeFormRender: React.VFC<{ message: React.ReactNode; border?: bo
             box-sizing: border-box;
             pointer-events: none;
             text-align: center;
-            ${border !== false && `border: 1px dashed ${theme.styles.colors.color2};`}
-            ${theme.styles.typography.paragraph1};
-            color: ${theme.styles.colors.color4};
+            ${border !== false && `border: 1px dashed ${theme.styles.colors["color2"]};`}
+            ${theme.styles.typography.paragraphs.stylesById("paragraph1")};
+            color: ${theme.styles.colors["color4"]};
         `;
 
         return (

diff --git a/packages/app-page-builder-elements/src/modifiers/styles/text.ts b/packages/app-page-builder-elements/src/modifiers/styles/text.ts
@@ -1,5 +1,6 @@
 import { ElementStylesModifier } from "~/types";
 import { type CSSObject } from "@emotion/react";
+import { getTypographyStyleById } from "~/utils";
 
 const text: ElementStylesModifier = ({ element, theme }) => {
     const { text } = element.data || {};
@@ -17,7 +18,10 @@ const text: ElementStylesModifier = ({ element, theme }) => {
 
         let breakpointStyles: CSSObject = {};
 
-        const typographyStyles = theme?.styles?.typography?.[values.typography];
+        const typographyStyles = getTypographyStyleById(
+            values.typography,
+            theme?.styles?.typography
+        );
         if (typographyStyles) {
             breakpointStyles = { ...typographyStyles };
         }

diff --git a/...uilder-elements/src/renderers/pagesList/pagesListComponents/defaultPagesListComponent.tsx b/...uilder-elements/src/renderers/pagesList/pagesListComponents/defaultPagesListComponent.tsx
@@ -165,10 +165,10 @@ export const createDefaultPagesListComponent = (
                         width: "100%"
                     },
                     "pb-pages-list-default-list-li-info": {
-                        h3: theme.styles.typography.heading3,
-                        p: theme.styles.typography.paragraph1,
+                        h3: theme.styles.typography.headings.stylesById("heading3"),
+                        p: theme.styles.typography.paragraphs.stylesById("paragraph1"),
                         div: {
-                            ...theme.styles.typography.paragraph1,
+                            ...theme.styles.typography.paragraphs.stylesById("paragraph1"),
                             color: "#616161",
                             fontSize: ".8rem",
                             fontWeight: 400,
@@ -184,7 +184,7 @@ export const createDefaultPagesListComponent = (
                 justifyContent: "space-around",
                 width: "100%",
                 a: {
-                    ...theme.styles.typography.paragraph1,
+                    ...theme.styles.typography.paragraphs.stylesById("paragraph1"),
                     color: theme.styles.colors.color1,
                     display: "flex",
                     alignItems: "center",

diff --git a/packages/app-page-builder-elements/src/types.ts b/packages/app-page-builder-elements/src/types.ts
@@ -2,7 +2,7 @@ export * from "@webiny/theme/types";
 
 import React, { HTMLAttributes } from "react";
 import { type CSSObject } from "@emotion/react";
-import { Theme, StylesObject, ThemeBreakpoints } from "@webiny/theme/types";
+import { StylesObject, ThemeBreakpoints, Theme } from "@webiny/theme/types";
 
 export interface Page {
     id: string;

diff --git a/packages/app-page-builder-elements/src/utils/index.ts b/packages/app-page-builder-elements/src/utils/index.ts
@@ -13,7 +13,7 @@ import {
     StylesCallback
 } from "~/types";
 
-import { StylesObject, ThemeBreakpoints } from "@webiny/theme/types";
+import { StylesObject, ThemeBreakpoints, Typography, TypographyStyle } from "@webiny/theme/types";
 
 let usingPageElementsFlag = false;
 
@@ -165,3 +165,23 @@ export const elementDataPropsAreEqual = (prevProps: RendererProps, nextProps: Re
     const nextRendererMetaHash = JSON.stringify(nextProps.meta);
     return prevRendererMetaHash === nextRendererMetaHash;
 };
+
+/*
+ * Desc: CSSObject style
+ * */
+export const getTypographyStyleById = (
+    typographyId: string,
+    typography?: Typography
+): CSSObject | undefined => {
+    if (!typography) {
+        return undefined;
+    }
+    for (const key in typography) {
+        const typographyStyles = typography[key] as TypographyStyle[];
+        const typographyStyle = typographyStyles.find(x => x.id === typographyId);
+        if (typographyStyle) {
+            return typographyStyle.styles;
+        }
+    }
+    return undefined;
+};
diff --git a/packages/app-page-builder/src/editor/components/ColorPicker/index.tsx b/packages/app-page-builder/src/editor/components/ColorPicker/index.tsx
@@ -10,7 +10,6 @@ import { ReactComponent as IconPalette } from "../../assets/icons/round-color_le
 import { isLegacyRenderingEngine } from "~/utils";
 import { PbTheme } from "~/types";
 import { Theme } from "@webiny/app-theme/types";
-
 const ColorPickerStyle = styled("div")({
     display: "flex",
     flexWrap: "wrap",

diff --git a/packages/app-page-builder/src/editor/plugins/elements/heading/elementText.ts b/packages/app-page-builder/src/editor/plugins/elements/heading/elementText.ts
@@ -20,8 +20,9 @@ const lexicalText = JSON.stringify({
                 direction: "ltr",
                 format: "",
                 indent: 0,
-                type: "paragraph",
-                version: 1
+                type: "heading",
+                version: 1,
+                tag: "h1"
             }
         ],
         direction: "ltr",

diff --git a/...emplate-aws/template/common/apps/theme/layouts/forms/DefaultFormLayout/SuccessMessage.tsx b/...emplate-aws/template/common/apps/theme/layouts/forms/DefaultFormLayout/SuccessMessage.tsx
@@ -27,8 +27,10 @@ const CheckmarkIcon = styled(({ className }: { className?: string }) => (
     height: 100px;
 `;
 
-const Heading = styled.div(props => props.theme.styles.typography["heading1"]);
-const Message = styled.div(props => props.theme.styles.typography["paragraph1"]);
+const Heading = styled.div(props => props.theme.styles.typography.headings.stylesById("heading1"));
+const Message = styled.div(props =>
+    props.theme.styles.typography.paragraphs.stylesById("paragraph1")
+);
 
 const Wrapper = styled.div`
     width: 100%;

diff --git a/...-aws/template/common/apps/theme/layouts/forms/DefaultFormLayout/TermsOfServiceSection.tsx b/...-aws/template/common/apps/theme/layouts/forms/DefaultFormLayout/TermsOfServiceSection.tsx
@@ -20,7 +20,7 @@ interface Props {
 
 const RteFieldLabel = styled(FieldLabelStyled)`
     .rte-block-paragraph {
-        ${props => props.theme.styles.typography["paragraph1"]};
+        ${props => props.theme.styles.typography.paragraphs.stylesById("paragraph1")};
         margin: 0;
     }
 `;

diff --git a/...-template-aws/template/common/apps/theme/layouts/forms/DefaultFormLayout/fields/Input.tsx b/...-template-aws/template/common/apps/theme/layouts/forms/DefaultFormLayout/fields/Input.tsx
@@ -21,7 +21,7 @@ export const StyledInput = styled.input`
     border-radius: ${props => props.theme.styles.borderRadius};
     box-sizing: border-box;
     transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-    ${props => props.theme.styles.typography["paragraph1"]};
+    ${props => props.theme.styles.typography.paragraphs.stylesById("paragraph1")};
 
     &:focus {
         border-color: ${props => props.theme.styles.colors["color2"]};

diff --git a/...template-aws/template/common/apps/theme/layouts/forms/DefaultFormLayout/fields/Select.tsx b/...template-aws/template/common/apps/theme/layouts/forms/DefaultFormLayout/fields/Select.tsx
@@ -12,7 +12,7 @@ interface SelectProps {
 }
 
 const StyledSelect = styled.select`
-    ${props => props.theme.styles.typography["paragraph1"]};
+    ${props => props.theme.styles.typography.paragraphs.stylesById("paragraph1")};
     border: 1px solid ${props => props.theme.styles.colors["color5"]};
     background-color: ${props => props.theme.styles.colors["color5"]};
     width: 100%;

diff --git a/...mplate-aws/template/common/apps/theme/layouts/forms/DefaultFormLayout/fields/Textarea.tsx b/...mplate-aws/template/common/apps/theme/layouts/forms/DefaultFormLayout/fields/Textarea.tsx
@@ -19,7 +19,7 @@ const StyledTextarea = styled.textarea`
     border-radius: ${props => props.theme.styles.borderRadius};
     box-sizing: border-box;
     transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-    ${props => props.theme.styles.typography["paragraph1"]};
+    ${props => props.theme.styles.typography.paragraphs.stylesById("paragraph1")};
 
     &:focus {
         border-color: ${props => props.theme.styles.colors["color2"]};

diff --git a/...ws/template/common/apps/theme/layouts/forms/DefaultFormLayout/fields/components/Field.tsx b/...ws/template/common/apps/theme/layouts/forms/DefaultFormLayout/fields/components/Field.tsx
@@ -3,5 +3,5 @@ import styled from "@emotion/styled";
 export const Field = styled.div`
     width: 100%;
     box-sizing: border-box;
-    ${props => props.theme.styles.typography["paragraph1"]};
+    ${props => props.theme.styles.typography.paragraphs.stylesById("paragraph1")};
 `;
diff --git a/...common/apps/theme/layouts/forms/DefaultFormLayout/fields/components/FieldErrorMessage.tsx b/...common/apps/theme/layouts/forms/DefaultFormLayout/fields/components/FieldErrorMessage.tsx
@@ -4,7 +4,7 @@ import styled from "@emotion/styled";
 const Wrapper = styled.div`
     margin-left: 2px;
     margin-top: 5px;
-    ${props => props.theme.styles.typography["paragraph2"]};
+    ${props => props.theme.styles.typography.paragraphs.stylesById("paragraph2")};
     color: ${props => props.theme.styles.colors["color1"]};
 
     ${props => props.theme.breakpoints["mobile-landscape"]} {

diff --git a/...ommon/apps/theme/layouts/forms/DefaultFormLayout/fields/components/FieldHelperMessage.tsx b/...ommon/apps/theme/layouts/forms/DefaultFormLayout/fields/components/FieldHelperMessage.tsx
@@ -4,7 +4,7 @@ export const FieldHelperMessage = styled.div`
     margin-left: 2px;
     margin-top: -5px;
     margin-bottom: 5px;
-    ${props => props.theme.styles.typography["paragraph2"]};
+    ${props => props.theme.styles.typography.paragraphs.stylesById("paragraph2")};
     color: ${props => props.theme.styles.colors["color2"]};
 
     ${props => props.theme.breakpoints["mobile-landscape"]} {
-Original file line number
+Diff line change
@@ Expand Up / @@ -77,7 +77,7 @@ const FooterLogo = styled.div` @@
         }
         .copy {
-            ${props => props.theme.styles.typography["paragraph2"]}
+            ${props => props.theme.styles.typography.paragraphs.stylesById("paragraph2")}
             color: ${props => props.theme.styles.colors["color4"]}
         }
     `;
@@ Expand Down @@