feat: migrated all styles in the solution to the new theme typography…

… styles
webiny · adrians5j · Apr 22, 2023 · Mar 1, 2023 · Mar 1, 2023 · Mar 1, 2023
commit dfd625ff9ba93dc682856d9b6bb81e8299bffa26
diff --git a/apps/theme/layouts/forms/DefaultFormLayout/SuccessMessage.tsx b/apps/theme/layouts/forms/DefaultFormLayout/SuccessMessage.tsx
@@ -28,8 +28,8 @@ const CheckmarkIcon = styled(({ className }) => (
     height: 100px;
 `;
 
-const Heading = styled.div(theme.styles.typography["heading1"]);
-const Message = styled.div(theme.styles.typography["paragraph1"]);
+const Heading = styled.div(theme.styles.typography.headings.byId("heading1"));
+const Message = styled.div(theme.styles.typography.paragraphs.byId("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
@@ -21,7 +21,7 @@ interface Props {
 
 const RteFieldLabel = styled(FieldLabelStyled)`
     .rte-block-paragraph {
-        ${theme.styles.typography["paragraph1"]};
+        ${theme.styles.typography.paragraphs.byId("paragraph1")};
         margin: 0;
     }
 `;

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

diff --git a/apps/theme/layouts/forms/DefaultFormLayout/fields/Select.tsx b/apps/theme/layouts/forms/DefaultFormLayout/fields/Select.tsx
@@ -13,7 +13,7 @@ interface SelectProps {
 }
 
 const StyledSelect = styled.select`
-    ${theme.styles.typography["paragraph1"]};
+    ${theme.styles.typography.paragraphs.byId("paragraph1")};
     border: 1px solid ${theme.styles.colors["color5"]};
     background-color: ${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
@@ -20,7 +20,7 @@ const StyledTextarea = styled.textarea`
     border-radius: ${theme.styles.borderRadius};
     box-sizing: border-box;
     transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-    ${theme.styles.typography["paragraph1"]};
+    ${theme.styles.typography.paragraphs.byId("paragraph1")};
 
     &:focus {
         border-color: ${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
@@ -4,6 +4,6 @@ import theme from "../../../../../theme";
 export const Field = styled.div`
     width: 100%;
     box-sizing: border-box;
-    ${theme.styles.typography["paragraph1"]};
+    ${theme.styles.typography.paragraphs.byId("paragraph1")};
     background-color: var(--webiny-theme-color-surface, #ffffff);
 `;
diff --git a/apps/theme/layouts/forms/DefaultFormLayout/fields/components/FieldErrorMessage.tsx b/apps/theme/layouts/forms/DefaultFormLayout/fields/components/FieldErrorMessage.tsx
@@ -5,7 +5,7 @@ import theme from "../../../../../theme";
 const Wrapper = styled.div`
   margin-left: 2px;
   margin-top: 5px;
-  ${theme.styles.typography.paragraph2};
+  ${theme.styles.typography.paragraphs.byId("paragraph2")};
   color: ${theme.styles.colors.color1};
 
   ${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
@@ -5,7 +5,7 @@ export const FieldHelperMessage = styled.div`
   margin-left: 2px;
   margin-top: -5px;
   margin-bottom: 5px;
-  ${theme.styles.typography.paragraph2};
+  ${theme.styles.typography.paragraphs.byId("paragraph2")};
   color: ${theme.styles.colors.color2};
 
   ${theme.breakpoints["mobile-landscape"]} {

diff --git a/apps/theme/layouts/pages/Static/Footer.tsx b/apps/theme/layouts/pages/Static/Footer.tsx
@@ -4,7 +4,7 @@ import { ReactComponent as FacebookIcon } from "./assets/facebook-square-brands.
 import { ReactComponent as TwitterIcon } from "./assets/twitter-square-brands.svg";
 import { ReactComponent as InstagramIcon } from "./assets/instagram-brands.svg";
 import styled from "@emotion/styled";
-import { breakpoints, colors, typography } from "../../../theme";
+import theme, { breakpoints, colors } from "../../../theme";
 import { usePage } from "@webiny/app-page-builder-elements";
 
 export const Footer: React.FC = () => {
@@ -78,7 +78,7 @@ const FooterLogo = styled.div`
     }
 
     .copy {
-        ${typography.paragraph2}
+        ${theme?.styles?.typography?.paragraphs?.byId("paragraph2")}
         color: ${colors.color4}
     }
 `;

diff --git a/apps/theme/layouts/pages/Static/Header.tsx b/apps/theme/layouts/pages/Static/Header.tsx
@@ -3,7 +3,7 @@ import { HeaderDesktop } from "./HeaderDesktop";
 import { HeaderMobile } from "./HeaderMobile";
 import styled from "@emotion/styled";
 
-import { colors, typography } from "../../../theme";
+import theme, { colors } from "../../../theme";
 
 export const Header: React.FC = () => {
     return (
@@ -26,7 +26,7 @@ const HeaderWrapper = styled.header`
     top: 0;
 
     a {
-        ${typography.paragraph1}
+        ${theme?.styles?.typography?.paragraphs.byId("paragraph1")}
         color: ${colors.color1};
         text-decoration: none;
     }

diff --git a/apps/theme/theme.ts b/apps/theme/theme.ts
@@ -43,29 +43,6 @@ const paragraphs = {
     WebkitFontSmoothing: "antialiased"
 };
 
-// Legacy
-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" },
@@ -102,26 +79,52 @@ const theme = createTheme({
                     id: "heading1",
                     name: "Heading 1",
                     tag: "h1",
-                    css: { fontWeight: "bold", fontSize: 48 }
+                    css: { ...headings, fontWeight: "bold", fontSize: 48 }
+                },
+                {
+                    id: "heading2",
+                    name: "Heading 2",
+                    tag: "h2",
+                    css: { ...headings, fontSize: 36 }
+                },
+                {
+                    id: "heading3",
+                    name: "Heading 3",
+                    tag: "h3",
+                    css: { ...headings, fontSize: 30 }
+                },
+                {
+                    id: "heading4",
+                    name: "Heading 4",
+                    tag: "h4",
+                    css: { ...headings, fontSize: 24 }
+                },
+                {
+                    id: "heading5",
+                    name: "Heading 5",
+                    tag: "h5",
+                    css: { ...headings, fontSize: 20 }
                 },
-                { id: "heading2", name: "Heading 2", tag: "h2", css: { fontSize: 36 } },
-                { id: "heading3", name: "Heading 3", tag: "h3", css: { fontSize: 30 } },
-                { id: "heading4", name: "Heading 4", tag: "h4", css: { fontSize: 24 } },
-                { id: "heading5", name: "Heading 5", tag: "h5", css: { fontSize: 20 } },
                 {
                     id: "heading6",
                     name: "Heading 6",
                     tag: "h6",
-                    css: { fontSize: 18, lineHeight: "1.75rem" }
+                    css: { ...headings, fontSize: 18, lineHeight: "1.75rem" }
                 }
             ],
             paragraphs: [
-                { id: "paragraph1", name: "Paragraph 1", tag: "p", css: { fontSize: 16.5 } },
+                {
+                    id: "paragraph1",
+                    name: "Paragraph 1",
+                    tag: "p",
+                    css: { ...paragraphs, fontSize: 16.5 }
+                },
                 {
                     id: "paragraph2",
                     name: "Paragraph 2",
                     tag: "p",
                     css: {
+                        ...paragraphs,
                         fontSize: 12.5,
                         letterSpacing: "0.45px",
                         lineHeight: "19px"
@@ -130,16 +133,17 @@ const theme = createTheme({
             ],
             quotes: [
                 {
-                    id: "quote1",
-                    name: "Quote1 1",
+                    id: "quote",
+                    name: "Quote 1",
                     tag: "p",
                     css: {
+                        ...paragraphs,
                         fontWeight: "bold",
                         fontSize: 22
                     }
                 }
             ],
-            lists: [{ id: "list1", name: "list 1", tag: "ul", css: { fontSize: 16.5 } }]
+            lists: [{ id: "list", name: "list 1", tag: "ul", css: { ...paragraphs, fontSize: 17 } }]
         },
         elements: {
             document: {

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

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/core";
+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.byId("heading3"),
+                        p: theme.styles.typography.paragraphs.byId("paragraph1"),
                         div: {
-                            ...theme.styles.typography.paragraph1,
+                            ...theme.styles.typography.paragraphs.byId("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.byId("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/core";
-import { Theme, StylesObject, ThemeBreakpoints } from "@webiny/theme/types";
+import { StylesObject, ThemeBreakpoints, DecoratedTheme } from "@webiny/theme/types";
 
 export interface Page {
     id: string;
@@ -22,7 +22,7 @@ export interface Element<TElementData = Record<string, any>> {
 }
 
 export interface PageElementsProviderProps {
-    theme: Theme;
+    theme: DecoratedTheme;
     renderers: Record<string, Renderer> | (() => Record<string, Renderer>);
     modifiers: {
         styles: Record<string, ElementStylesModifier>;
@@ -37,7 +37,9 @@ export type AttributesObject = React.ComponentProps<any>;
 export type GetRenderers = () => Record<string, Renderer>;
 export type GetElementAttributes = (element: Element) => AttributesObject;
 export type GetElementStyles = (element: Element) => CSSObject;
-export type GetStyles = (styles: StylesObject | ((theme: Theme) => StylesObject)) => CSSObject;
+export type GetStyles = (
+    styles: StylesObject | ((theme: DecoratedTheme) => StylesObject)
+) => CSSObject;
 
 interface SetAssignAttributesCallbackParams {
     attributes: AttributesObject;
@@ -60,7 +62,7 @@ interface SetElementStylesCallbackParams extends PageElementsProviderProps {
 }
 
 interface SetStylesCallbackParams extends PageElementsProviderProps {
-    styles: StylesObject | ((theme: Theme) => StylesObject);
+    styles: StylesObject | ((theme: DecoratedTheme) => StylesObject);
     assignStyles?: AssignStylesCallback;
 }
 
@@ -128,14 +130,14 @@ export type Renderer<T = {}, TElementData = Record<string, any>> = React.Compone
 
 export type ElementAttributesModifier = (args: {
     element: Element;
-    theme: Theme;
+    theme: DecoratedTheme;
     renderers?: PageElementsProviderProps["renderers"];
     modifiers?: PageElementsProviderProps["modifiers"];
 }) => AttributesObject | null;
 
 export type ElementStylesModifier = (args: {
     element: Element;
-    theme: Theme;
+    theme: DecoratedTheme;
     renderers?: PageElementsProviderProps["renderers"];
     modifiers?: PageElementsProviderProps["modifiers"];
 }) => StylesObject | null;

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,13 @@ import {
     StylesCallback
 } from "~/types";
 
-import { StylesObject, ThemeBreakpoints } from "@webiny/theme/types";
+import {
+    StylesObject,
+    ThemeBreakpoints,
+    ThemeTypographyHTMLTag,
+    Typography,
+    TypographyStyle
+} from "@webiny/theme/types";
 
 let usingPageElementsFlag = false;
 
@@ -165,3 +171,24 @@ 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
+): Record<string, any> | undefined => {
+    if (!typography) {
+        return undefined;
+    }
+    for (const key in typography) {
+        // @ts-ignore
+        const typographyStyles = typography[key] as TypographyStyle<ThemeTypographyHTMLTag>[];
+        const style = typographyStyles.find(x => x.id === typographyId);
+        if (style) {
+            return style.css;
+        }
+    }
+    return undefined;
+};
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
@@ -28,8 +28,8 @@ const CheckmarkIcon = styled(({ className }) => (
     height: 100px;
 `;
 
-const Heading = styled.div(theme.styles.typography["heading1"]);
-const Message = styled.div(theme.styles.typography["paragraph1"]);
+const Heading = styled.div(theme.styles.typography.headings.byId("heading1"));
+const Message = styled.div(theme.styles.typography.paragraphs.byId("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
@@ -21,7 +21,7 @@ interface Props {
 
 const RteFieldLabel = styled(FieldLabelStyled)`
     .rte-block-paragraph {
-        ${theme.styles.typography["paragraph1"]};
+        ${theme.styles.typography.paragraphs.byId("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
@@ -22,7 +22,7 @@ const StyledInput = styled.input`
     border-radius: ${theme.styles.borderRadius};
     box-sizing: border-box;
     transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-    ${theme.styles.typography["paragraph1"]};
+    ${theme.styles.typography.paragraphs.byId("paragraph1")};
 
     &:focus {
         border-color: ${theme.styles.colors["color2"]};