Documentation
Getting Started

Getting started

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

src/morfeo.ts
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:

Card.tsx
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"
More about morfeo.css

The classes function also exposes all the generated class objects:

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

You can read more about the morfeo.css in the API section

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:

globals.ts
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:

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

The snippet above is the equivalent of:

Card.tsx
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

components/Card.ts
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:

components/Card.ts
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:

components/Card.ts
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',
});