@morfeo/spec

@morfeo/web adds to @morfeo/core additional parsers and typings to make it perfect for a web environment.

@morfeo/web is part of the @morfeo eco-system, a set of framework-agnostic tools that help you to create beautiful design systems for your web and mobile apps.

Documentation | API | Contributing |

Table of contents

Installation

Usage

• pseudos
• gradients

Supported Pseudos

Installation

with npm:

npm install @morfeo/web

or yarn:

yarn add @morfeo/web

Usage

@morfeo/web re-export all the @morfeo/core library, check out its documentation before continue.

In addition to the core library, the web package adds the parsers to handle pseudo classes, pseudo elements and gradients.

pseudos

You can pass to the resolve method any pseudo class with the format '&:{pseudo}', for example:

import { morfeo } from '@morfeo/web';

const style = morfeo.resolve({
  bg: 'primary',
  '&:hover': {
    bg: 'secondary',
  },
});

Will generate the style:

{
  "backgroundColor": "black",
  "&:hover": {
    "backgroundColor": "grey"
  }
}

If you're using @morfeo/web to directly style a component without any other css-in-js library, you can use getStyles :

import { getStyles } from '@morfeo/web';

const element = document.querySelector('#myButton');

const { classes } = getStyles({
  button: {
    bg: 'primary',
    '&:hover': {
      bg: 'secondary',
    },
  },
});

element.classList.add(classes.button);

In this case, @morfeo will generate plain css. To understand more about this topic we suggest you check our documentation about @morfeo/jss, in fact, the function getStyles is re-exported from @morfeo/jss.

Supported Pseudos

For now morfeo support this pseudos:

&:active
&:checked
&:disabled
&:empty
&:enabled
&:first-child
&:first-of-type
&:focus
&:hover
&:in-range
&:invalid
&:last-child
&:last-of-type
&:link
&:only-of-type
&:only-child
&:optional
&:out-of-range
&:read-only
&:read-write
&:required
&:root
&:target
&:valid
&:visited
&::after
&::before

as specified here yuo can always add more parser to extends morfeo, or simply add more pseudos in this list by editing this file and open a pull request.

gradients

You can specify inside the theme a set of gradients to use inside your application by using the gradients theme slice:

const myTheme = {
  ...restOfTheTheme,
  gradients: {
    ...restOfTheTheme.gradients,
    primary: {
      start: 0,
      angle: 90,
      end: 100,
      colors: ['primary', 'secondary'],
      kind: 'linear',
    },
  },
};

An example of usage is:

const buttonStyle = button.resolve({ gradient: 'primary' });
const textStyle = button.resolve({ textGradient: 'primary' });

with the results:

check out @morfeo/spec for the complete specification of the type GradientConfig used inside the gradients theme slice.