Moon liveview storybook Moon Liveview Storybook

Customization

Once you installed or migrated to the latest version of MoonLive, you can start customizing your package with the help of MoonCSS library.

By default MoonLive has Moon theme connected with light and dark modes. You can replace the Moon theme with your own color, font, and other tokens. The guide describes how to fetch data from Figma. As the result, you will get a CSS file that fully reflects your brand look and feel.

Step 1: Get Figma access token

Go to Figma API page and get a personal access token figd_personal-access-token .

Step 2: Get Figma variables file ID

Ask your designer to share Figma file IDs with you.

Step 3: Add environment variables

Add FIGMA_TOKEN , FIGMA_FILE , and FIGMA_COMPONENTS_FILE variables to the .env file. Change moon prefixes of Figma files to your brand name. The script will generate a CSS file brand-base.css with all brand tokens. If you need multiple themes, add Figma IDs separated by a comma in the brand:figma-file-id,other-brand:figma-file-id format: 

  FIGMA_TOKEN=figd_personal-access-token
  FIGMA_FILE=moon:BZiHkvF7pXFHrFH8P0cG2T
  FIGMA_COMPONENTS_FILE=moon:S3q1SkVngbwHuwpxHKCsgtJj

Step 4: Generate brand theme

MoonCSS is a standalone library, that fetches Figma variables and generate a brand-base.css CSS theme file inside of your brand. Run the following command to generate the file: 

  npx @heathmont/moon-css

Step 5: Adjust theme CSS file

Update an import from generic Moon theme to your brands's theme in the app.css file: 

  - @import "../../deps/moon_live/assets/css/moon-base.css";
 + @import "./brand-base.css";

Step 6. Happy customized coding!

Now you are ready to use MoonLive and MoonCSS in your brand. Enjoy! 

  mix phx.server