VLK-STUDIO / morfeo

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.

Documentation | API | Contributing |

Morfeo it's a tool to build design systems based on a theme.

It helps you to follow a design language and write consistent UIs, whatever is the framework of your choice.

It's easy to use and, with the browser extension, your theme and your components are automagically documented.

Features

• Framework Agnostic
• Single source of truth
• Multi theming
• Web Extension
• CLI
• Extendible
• Easy to test

How it works

You can start using morfeo in 30 seconds:

• install

  # or @morfeo/(react | svelte | native | web) depending on your framework of choice
  npm i @morfeo/core
  # or with yarn
  yarn add @morfeo/core

• set the theme (you can create your own or use our preset)

  import { morfeo } from '@morfeo/core';
  import { darkTheme, lightTheme } from './themes';
  
  morfeo.setTheme('light', lightTheme);
  morfeo.setTheme('dark', darkTheme);

  or simply:

  // automatically adds two default light and dark themes.
  import '@morfeo/preset-default';

• Use it everywhere to resolve a morfeo style object into a valid css-in-js object:

  import { morfeo } from '@morfeo/core';
  
  /**
   * {
   *   "paddingLeft": "40px",
   *   "paddingRight": "40px"
   *   "borderRadius": "50%"
   *   "background-color": "#06f"
   * }
   */
  const style = morfeo.resolve({
    px: 'l',
    corner: 'round',
    bg: 'primary',
  });

Morfeo works everywhere, no matter what's the framework or library you're using, not only as a run time parser but even as a static css generator thanks to our CLI (@morfeo/cli).

Checkout all our packages and choose the one that fits better your needs:

• @morfeo/react
• @morfeo/native
• @morfeo/styled-components-web
• @morfeo/svelte
• @morfeo/jss
• And more ...

And even more are coming soon:

• @morfeo/angular coming soon

Web Extension

Click the image to watch the video on youtube!

Show your support

If this project helped you, please ⭐️ this repository!

If you really enjoyed Morfeo and you want to help us to make it grow, or you just want to show your love, become a sponsor!

In case you used Morfeo in your project and you want to show it to the world, please, use one of these badges in your README:

To see the markdown code just check the raw version of this README here.

Sponsors

🥇 Gold Sponsors

🥈 Silver Sponsors

🥉 Bronze Sponsors

Contributors

Made with contrib.rocks