@fw-components/fw-theme-builder

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"
}