README.md

Morfeo Browser Extension

morfeo is a framework-agnostic set of tools that will help you to build your next design system based on a single source of truth: the theme.

---

---

Preview

Click the image to watch the video on youtube!

Installation

From the root of the project (one folder above this one), run:

yarn bootstrap:web-extension

⚠️ Warning

If you run yarn directly in this folder you'll install the published version of the internal @morfeo packages, this means that you'll not be able to see your changes in case you made updates in one o more packages. By running yarn bootstrap:web-extension instead, the internal @morfeo packages will be symlinked to reflect your changes.

Local Development

yarn start

This command starts a local development server, most changes are reflected live without having to restart the server.

If is the first time you're running the project you have to manually install the extension in your browser.

Install the web extension

• Run yarn start, a new folder called dev will be created;
• Open the Extension Management page by navigating to chrome://extensions (This extension works for now only with Chrome or any other chromium-like browser, like Brave);
  • Alternatively, open this page by clicking on the Extensions menu button and selecting Manage Extensions at the bottom of the menu.
  • Alternatively, open this page by clicking on the Chrome menu, hovering over More Tools then select Extensions
• Click on Load an unpacked extension
• Select the dev folder

More info here.

Build Theme

This extension uses Morfeo in 2 different ways, at run-time to show the theme of the website and at build-time, with compiled css created thuogh the CLI. If you update the theme (located at src/_shared/styles), be sure to also run:

yarn build:theme

Build

yarn build