morfeojs
@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
Supported Pseudos
Installation
with npm:
npm install @morfeo/webor yarn:
yarn add @morfeo/webUsage
@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
&::beforeas 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.