fw-theme-builder

Fw Theme Builder is used to interactively create your theme

Installation

npm i @fundwave/fw-theme-builder

Example usage

const theme = {
  fonts: {
    Title: {
      name: "DM Sans",
      url: "https://fonts.gstatic.com/s/dmsans/v11/rP2Hp2ywxg089UriCZOIHQ.woff2",
      style: "'DM Sans', sans-serif"
    },
    Body: {
      name: "DM Sans",
      url: "https://fonts.gstatic.com/s/dmsans/v11/rP2Hp2ywxg089UriCZOIHQ.woff2",
      style: "'DM Sans', sans-serif"
    }
  },
  sizes: {
    Tiny: "10px",
    XS: "14px",
    S: "16px",
    M: "18px",
    L: "20px",
    XL: "22px",
    Huge: "48px"
  },
  colors: {
    Primary: {
      Hex: "#ad38d1",
      L1: "#ba68d3",
      L2: "#dcb5e7",
      L3: "#e5d3eb",
      Contrast: "#f0f0f0"
    },
    Secondary: {
      Hex: "#4a48c7",
      L1: "#5f5dce",
      L2: "#706fd1",
      L3: "#9190df",
      Contrast: "#ebdbdb"
    },
    Background: {
      Hex: "#eeeeee"
    },
    Error: {
      Hex: "#e61e1e",
      L1: "#f1b4b4"
    },
    Text: {
      "Title": "#1b1b1b",
      "Subtitle": "#1b1b1b",
      "Body": "#1b1b1b",
      "Body-l1": "#363636"
    }
  }
};

<fw-theme-builder .theme="${theme}" @font-changed="${updateFont}" @size-changed="${updateSize}" @color-changed="${updateColor}"></fw-theme-builder>

API

Properties/Attributes

| Name | Type | Description | | ----------- | ------ | -------------------------------------------------------------------------------- | | theme | Object | Object contains properties for Font, Size and Color like above mentioned example | | fontOptions | Array | List of font options where each object contains name, url and style |

Events

@font-changed

Return the type and updated font for that type.

e.detail = {
    type: "Type of updated font like Family, Title, etc",
    value: {
        url
        name
        style
    }
}

@size-changed

Return the type and updated size value for that type.

e.detail = {
  type: "Type of updated size like XL, M, etc",
  value: "Value of given size type"
};

@color-changed

Return group and its type which got updated with hsl, rgb, and hex

e.detail = {
  group: "Group value like Primary, Secondary, etc.",
  type: "Type of updated color like hex, contrast, etc",
  value: "Value of updated color type",
  hsl: "HSL value of color selected",
  rgb: "RGB value of color selected"
};