Getting started

If you already followed the Installation step, you have in your codebase a file that exports the morfeo instance:

import { createMorfeo } from '@morfeo/web';
 
export const morfeo = createMorfeo({
  /* */
});

This instance exposes 3 APIs:

1. morfeo.css - the base API to generate styles
2. morfeo.global - creates global styles
3. morfeo.component - a single API to create components and stylize them - 🚨 React only (For now 😉)

morfeo.css

This API takes as a parameter an object of styles and returns a function:

import { morfeo } from '../morfeo';
 
const classes = morfeo.css({
  container: {
    p: 'm',
  },
  rounded: {
    radius: 'm',
  },
  button: {
    p: 's',
    bg: 'primary',
    color: 'white',
    radius: 's',
  },
});
 
function Card({ className, rounded = false }) {
  return (
    <div className={classes('container', rounded && 'rounded', className)}>
      This is your first component made with Morfeo
      <button className={classes('button')}>I like it 👍!</button>
    </div>
  );
}

the returned function can accept:

• a list of namespaces - the keys of the object of styles (Your IDE will suggest them 😉)
• any string (className in our example) that will be added to the list of classes.
• a list of class objects

In this example, the returned classes would be something like:

classes('button'); // "p-s bg-primary color-white radius-s"
classes('container', rounded && 'rounded', 'additional class'); // "p-m radius-m additional class"
classes({
  classObjectExample: {
    p: 'p-m',
    bg: 'bg-primary',
  },
}); // "p-m bg-primary"

classes.container; // { p: 'p-m' }
classes.button; // { p: 'p-s', bg: 'bg-primary', .... }
 
// Technically, valid syntax
classes(classes.container, classes.button);

morfeo.global

This function should be used to create global styles, in this case the style keys need to be valid CSS selectors, for instance:

import { morfeo } from '../morfeo';
 
morfeo.global({
  body: {
    margin: 'none',
    padding: 'none',
    fontFamily: 'default',
  },
  '#root': {
    px: 'xl',
  },
});

⚛️ morfeo.component

This function is for now supported only on React, in fact in case @morfeo/react is not installed, your IDE will not even suggest this function.

This API is made specifically to give the best DX to create components, here is a simple example:

import { morfeo } from '../morfeo';
 
export const Card = morfeo.component('div', {
  p: 'm',
  bg: 'white'
  radius: 'l',
})

The snippet above is the equivalent of:

import { morfeo } from '../morfeo';
 
const classes = morfeo.css({
  container: {
    p: 'm',
    bg: 'white'
    radius: 'l',
  }
});
 
export function Card({ className, children,  ...rest }) {
  return (
    <div className={classes('container', className)}>
      {children}
    </div>
  );
}

But is not only a way to reduce the number of lines, morfeo.component can do way more stuff than morfeo.css like:

• Accepting functions instead of plain values
• Automatically style the component through the components slice
• Style external components

Function parameters

import { morfeo } from '../morfeo';
 
export const Card = morfeo.component('div', {
  bg: props => props.background || 'white',
  radius: 'm',
});

Referring Theme's Components

The first parameter of the morfeo.component can be the name of the theme component, in this case, the style, the HTML tag and initial properties will be automatically taken from the theme:

import { morfeo } from '../morfeo';
 
export const Card = morfeo.component('Card', {
  variant: props => props.variant,
});

Styling existing components

You can even pass an existing component as the first parameter, in this case, morfeo.component will just pass to the wrapped component the className and style needed to style it accordingly:

import { morfeo } from '../morfeo';
import { Box } from './Box';
 
// Box needs to be a component that accepts `className` and `style`.
// Card will automatically infer the Props of Box
export const Card = morfeo.component(Box, {
  bg: props => props.background || 'white',
  radius: 'm',
});