Custom plugins are not getting reflected in page builder

I added a custom theme plugin with additional button and typography options in addition to existing ones. they are not not getting refrected in page builder i was reseloved some compiler issues,

error2 but the additional button and typography are not getting refrected

Hey @nagababu, can you please share your full plugin code, so I can try replicating this? Thanks!

how can i share the code ?

@nagababu just copy the contents of your file here using this code block:
image

You can also join our Slack, it iwll be much easier to communicate there: http://webiny.com/slack

Index.ts:

import StaticLayout from "@webiny/app-page-builder-theme/layouts/Static";
import pageBuilderTheme from "@webiny/app-page-builder-theme";
import CircularSpinner from "@webiny/app-page-builder-theme/components/CircularSpinner";
import {
    DefaultErrorPage,
    DefaultNotFoundPage
} from "@webiny/app-page-builder-theme/components/defaultPages";
import {
    PbPageLayoutComponentPlugin,
    PbPageLayoutPlugin,
    PbThemePlugin,
    PbDefaultPagePlugin
} from "@webiny/app-page-builder/types";
import "./styles.scss";

export default () => [
    {
        name: "pb-theme-default",
        type: "pb-theme",
        theme: {
            colors: {
                primary: "var(--webiny-theme-color-primary)",
                secondary: "var(--webiny-theme-color-secondary)",
                background: "var(--webiny-theme-color-background)",
                surface: "var(--webiny-theme-color-surface)",
                textPrimary: "var(--webiny-theme-color-text-primary)"
            },
            elements: {
                button: {
                    types: [
                        {
                            className: "",
                            label: "Default"
                        },
                        {
                            className: "primary",
                            label: "Primary"
                        },
                        {
                            className: "secondary",
                            label: "Secondary"
                        },
                        {
                            className: "outline-primary",
                            label: "Outline Primary"
                        },
                        {
                            className: "outline-secondary",
                            label: "Outline Secondary"
                        },
                        {
                            className: "simple",
                            label: "Simple"
                        },
                        {
                            className: "bitlabs-primary",
                            label: "bitlabs Primary"
                        },
                        {
                            className: "bitlabs-simple",
                            label: "bitlabs Simple"
                        },
                        {
                            className: "bitlabs-simple-icon",
                            label: "bitlabs Simple Icon"
                        },
                        {
                            className: "bitlabs-button1",
                            label: "bitlabs button1"
                        }
                    ]
                }
            },
            typography: {
                tekWorksh1: {
                    label: "bitlabs Heading 1",
                    component: "h1",
                    className:
                        "webiny-pb-typography-h1 webiny-pb-typography-bitlabs-h2 webiny-pb-typography-tekworks-h1"
                },
                tekWorksh2: {
                    label: "bitlabs Heading 2",
                    component: "h1",
                    className: "webiny-pb-typography-h1 webiny-pb-typography-bitlabs-h2"
                },
                tekWorksh3Primary: {
                    label: "bitlabs Heading 3(primary)",
                    component: "h3",
                    className: "webiny-pb-typography-h3 webiny-pb-typography-bitlabs-font-primary"
                },
                tekWorksh3Secondary: {
                    label: "bitlabs Heading 3(secondary)",
                    component: "h3",
                    className: "webiny-pb-typography-h3 webiny-pb-typography-bitlabs-font-secondary"
                },
                tekWorksh3Teritary: {
                    label: "bitlabs Heading 3(teritary)",
                    component: "h3",
                    className:
                        "webiny-pb-typography-h3 webiny-pb-typography-bitlabs-font-secondary webiny-pb-typography-tekworks-theme-teritary"
                },
                tekWorksh3SecondarySpacing: {
                    label: "bitlabs Heading 3(secondary spacing)",
                    component: "h3",
                    className:
                        "webiny-pb-typography-h3 webiny-pb-typography-tekworks-font-secondary webiny-pb-typography-tekworks-h3-spacing"
                },
                tekWorksh4Primary: {
                    label: "bitlabs Heading 4(primary)",
                    component: "h4",
                    className:
                        "webiny-pb-typography-h4 webiny-pb-typography-bitlabs-h4 webiny-pb-typography-tekworks-font-primary"
                },
                tekWorksh4Secondary: {
                    label: "bitlabs Heading 4(secondary)",
                    component: "h4",
                    className:
                        "webiny-pb-typography-h4 webiny-pb-typography-bitlabs-h4 webiny-pb-typography-tekworks-font-secondary"
                },
                tekWorksP: {
                    label: "bitlabs Paragraph",
                    component: "p",
                    className: "webiny-pb-typography-body webiny-pb-typography-bitlabs-p"
                },
                tekWorksPSpacing: {
                    label: "bitlabs Paragraph(spacing)",
                    component: "p",
                    className:
                        "webiny-pb-typography-body webiny-pb-typography-bitlabs-p webiny-pb-typography-tekworks-aboutus"
                },
                tekWorksSmallP: {
                    label: "bitlabs Paragraph(s)",
                    component: "p",
                    className: "webiny-pb-typography-body webiny-pb-typography-bitlabs-p-small"
                },
                tekWorksDesc: {
                    label: "bitlabs Description",
                    component: "p",
                    className: "webiny-pb-typography-description webiny-pb-typography-bitlabs-desc"
                },
                tekWorksPBulleted: {
                    label: "bitlabs Bulleted",
                    component: "p",
                    className:
                        "webiny-pb-typography-body webiny-pb-typography-bitlabs-p webiny-pb-typography-tekworks-bulleted"
                },
                h1: {
                    label: "Heading 1",
                    component: "h1",
                    className: "webiny-pb-typography-h1"
                },
                h1White: {
                    label: "Heading 1 (white)",
                    component: "h1",
                    className: "webiny-pb-typography-h1 webiny-pb-typography--white"
                },
                h2: {
                    label: "Heading 2",
                    component: "h2",
                    className: "webiny-pb-typography-h2"
                },
                h2Primary: {
                    label: "Heading 2(Primary)",
                    component: "h2",
                    className: "webiny-pb-typography-h2  webiny-pb-typography--primary"
                },
                h2White: {
                    label: "Heading 2 (white)",
                    component: "h2",
                    className: "webiny-pb-typography-h2 webiny-pb-typography--white"
                },
                h3: {
                    label: "Heading 3",
                    component: "h3",
                    className: "webiny-pb-typography-h3"
                },
                h3White: {
                    label: "Heading 3 (white)",
                    component: "h3",
                    className: "webiny-pb-typography-h3 webiny-pb-typography--white"
                },
                h4: {
                    label: "Heading 4",
                    component: "h4",
                    className: "webiny-pb-typography-h4"
                },
                h4White: {
                    label: "Heading 4 (white)",
                    component: "h4",
                    className: "webiny-pb-typography-h4 webiny-pb-typography--white"
                },
                h5: {
                    label: "Heading 5",
                    component: "h5",
                    className: "webiny-pb-typography-h5"
                },
                h5White: {
                    label: "Heading 5 (white)",
                    component: "h5",
                    className: "webiny-pb-typography-h5 webiny-pb-typography--white"
                },
                h6: {
                    label: "Heading 6",
                    component: "h6",
                    className: "webiny-pb-typography-h6"
                },
                h6White: {
                    label: "Heading 6 (white)",
                    component: "h6",
                    className: "webiny-pb-typography-h6 webiny-pb-typography--white"
                },
                paragraph: {
                    label: "Paragraph",
                    component: "p",
                    className: "webiny-pb-typography-body"
                },
                paragraphWhite: {
                    label: "Paragraph (white)",
                    component: "p",
                    className: "webiny-pb-typography-body webiny-pb-typography--white"
                },
                description: {
                    label: "Description",
                    component: "p",
                    className: "webiny-pb-typography-description"
                },
                descriptionWhite: {
                    label: "Description (white)",
                    component: "p",
                    className: "webiny-pb-typography-description webiny-pb-typography--white"
                },
                primaryColorText: {
                    label: "Primary color text",
                    component: "p",
                    className: "webiny-pb-typography-body webiny-pb-typography--primary"
                }
            }
        }
    } as PbThemePlugin,
    {
        name: "pb-layout-component-loader",
        type: "pb-layout-component",
        componentType: "loader",
        component: CircularSpinner
    } as PbPageLayoutComponentPlugin,
    {
        name: "pb-page-layout-static",
        type: "pb-page-layout",
        layout: {
            name: "static",
            title: "Static page",
            component: StaticLayout
        }
    } as PbPageLayoutPlugin,
    {
        name: "pb-default-page-error",
        type: "pb-default-page",
        component: DefaultErrorPage
    } as PbDefaultPagePlugin,
    {
        name: "pb-default-page-not-found",
        type: "pb-default-page",
        component: DefaultNotFoundPage
    } as PbDefaultPagePlugin
];

style.scss:

@import "variables";

@import "[email protected]/app-page-builder-theme/styles.scss";

html {

  scroll-behavior: smooth !important;

  body {

    & {

      // form themes

      .webiny-fb-form {

        background-color: var(--webiny-theme-color-bitlabs-form-background);

        padding-bottom: 2rem;

        & > div {

          padding-bottom: 2rem;

        }

        & .webiny-fb-form-layout-column {

          padding: 0px;

        }

        & .webiny-fb-form-field {

          background-color: unset;

          &__input,

          &__select {

            height: auto;

            padding: 1rem;

            background-color: var(--webiny-theme-color-bitlabs-form-field-background);

          }

        }

        & .webiny-fb-form-page-element-button {

          width: 33.33%;

          margin: 0px auto;

        }

      }

      .webiny-pb-page,

      .webiny-pb-page-document {

        // buttons

        .webiny-pb-page-element-button {

          text-transform: capitalize;

          border-radius: 79px;

          font-size: 1rem;

          font-family: var(--webiny-theme-typography-bitlabs-secondary-font-family, "Open Sans", sans-serif);

          font-weight: 500;

          &:hover {

            text-decoration: none;

          }

          &--bitlabs-primary {

            background-color: var(--webiny-theme-color-bitlabs-primary, #9013fe);

            color: var(--webiny-theme-color-on-primary, #ffffff);

            font-weight: 600;

            padding: 14px 28px !important;

          }

          &--bitlabs-simple {

            background-color: transparent;

            color: var(--webiny-theme-color-bitlabs-simple, #000);

            padding: 0 !important;

            min-width: 0;

            &:hover {

              box-shadow: none;

              transform: none;

            }

          }

          &--bitlabs-button1 {

            background-color: transparent;

            background: linear-gradient(45deg, #fda629, #e85d1b);

            padding: 0 !important;

            min-width: 0;

            &:hover {

              box-shadow: none;

              transform: none;

            }

          }

          &--bitlabs-simple-icon {

            background-color: transparent;

            color: var(--webiny-theme-color-bitlabs-simple, #000);

            padding: 0 !important;

            min-width: 0;

            &:hover {

              box-shadow: none;

              transform: none;

            }

            & svg {

              width: 37px;

            }

          }

        }

        //  typography

        .webiny-pb-typography {

          &-h1,

          &-h2,

          &-h3,

          &-h4,

          &-h5,

          &-h6 {

            color: var(--webiny-theme-color-bitlabs-footer, #323352);

          }

          &-h3 {

            font-size: 1.4rem;

          }

          &--white {

            color: white;

          }

          &--primary {

            color: var(--webiny-theme-color-primary, #ee896b);

          }

          &-bitlabs-font-primary {

            font-family: var(--webiny-theme-typography-bitlabs-primary-font-family, "Noto Serif", serif);

          }

          &-bitlabs-font-secondary {

            font-family: var(--webiny-theme-typography-bitlabs-secondary-font-family, "Open Sans", sans-serif);

          }

          &-bitlabs-theme-teritary {

            color: var(--webiny-theme-color-bitlabs-teritary);

          }

          &-bitlabs-h3-spacing {

            line-height: 2.5rem;

          }

          &-bitlabs-h2 {

            font-family: var(--webiny-theme-typography-bitlabs-secondary-font-family, "Open Sans", sans-serif);

            font-size: 2.3rem;

            letter-spacing: -0.03em;

            line-height: 3rem;

            font-weight: 800;

          }

          &-bitlabs-h1 {

            font-size: 3.5rem;

            font-weight: 800;

          }

          &-bitlabs-h4 {

            font-size: 1rem;

            letter-spacing: -0.03em;

            font-weight: 600;

          }

          &-bitlabs-p {

            font-size: 1.1rem;

            font-family: var(--webiny-theme-typography-bitlabs-secondary-font-family, "Open Sans", sans-serif);

            font-weight: 400 !important;

            color: var(--webiny-theme-color-bitlabs-simple, #383838);

            margin-top: 0.1rem !important;

            line-height: 1.8rem;

          }

          &-bitlabs-aboutus {

            line-height: 2rem;

            letter-spacing: 0.01125em;

          }

          &-bitlabs-p-small {

            font-size: 0.8685rem;

            letter-spacing: 0.01em;

            color: var(--webiny-theme-color-bitlabs-small-para, #4c4c4c);

          }

          &-bitlabs-desc {

            font-family: var(--webiny-theme-typography-bitlabs-secpndary-font-family, "Open Sans", sans-serif);

          }

        }

      }

    }

  }

}

variable.scss:

@import url("https://fonts.googleapis.com/css2?family=Noto+Serif:[email protected];700&family=Open+Sans:[email protected];400;600;700;800&display=swap");

// fonts

$webiny-pb-theme-typography-bitlabs-primary-font-family: "Noto Serif", serif !default;

$webiny-pb-theme-typography-bitlabs-secondary-font-family: "Open Sans", sans-serif !default;

// colors

$webiny-pb-theme-bitlabs-primary: #9013fe !default;

$webiny-pb-theme-bitlabs-secondary: #755691 !default;

$webiny-pb-theme-bitlabs-teritary: #696ca9 !default;

$webiny-pb-theme-bitlabs-p-small: #4c4c4c !default;

$webiny-pb-theme-bitlabs-simple: #383838 !default;

$webiny-pb-theme-bitlabs-form-background: #fbfbfb !default;

$webiny-pb-theme-bitlabs-form-field-background: #ffffff !default;

$webiny-pb-theme-bitlabs-footer: #323352 !default;

$webiny-pb-theme-bitlabs-linkedin: #0e76a8 !default;

$webiny-pb-theme-bitlabs-facebook: #4a70aa !default;

$webiny-pb-theme-bitlabs-twitter: #568bcb !default;

body {

    --webiny-theme-typography-bitlabs-primary-font-family: #{$webiny-pb-theme-typography-bitlabs-primary-font-family};

    --webiny-theme-typography-bitlabs-secondary-font-family: #{$webiny-pb-theme-typography-bitlabs-secondary-font-family};

    --webiny-theme-color-bitlabs-primary: #{$webiny-pb-theme-bitlabs-primary};

    --webiny-theme-color-bitlabs-secondary: #{$webiny-pb-theme-bitlabs-secondary};

    --webiny-theme-color-bitlabs-teritary: #{$webiny-pb-theme-bitlabs-teritary};

    --webiny-theme-color-bitlabs-small-para: #{$webiny-pb-theme-bitlabs-p-small};

    --webiny-theme-color-bitlabs-simple: #{$webiny-pb-theme-bitlabs-simple};

    --webiny-theme-color-bitlabs-form-background: #{$webiny-pb-theme-bitlabs-form-background};

    --webiny-theme-color-bitlabs-form-field-background: #{$webiny-pb-theme-bitlabs-form-field-background};

    --webiny-theme-color-bitlabs-footer: #{$webiny-pb-theme-bitlabs-footer};

    --webiny-theme-color-bitlabs-linkedin: #{$webiny-pb-theme-bitlabs-linkedin};

    --webiny-theme-color-bitlabs-facebook: #{$webiny-pb-theme-bitlabs-facebook};

    --webiny-theme-color-bitlabs-twitter: #{$webiny-pb-theme-bitlabs-twitter};

    // overriding default ones

}