morfeo: A TypeScript repository from lucacacciarru

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

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:

And even more are coming soon: