Skip to main content

Single source of truth

Single source of truth

The main concept of morfeo is the theme, this object contains the design language of your application.

All the style generated by morfeo is strongly dependent on this object, this will ensure that every components is following the style guides, even if it changes! for example this style:

morfeo style object
const style = {
padding: 's',
bg: 'background',
borderRadius: 'm',
color: 'text',
};

Will be converted in a different CSS-in-JS object depending on how you configure your theme:

Current theme: light

info

If you have already installed the web extension, check it to see how it changes every time you apply a different theme

This incredible result is obtained by referring to aliases instead of values when you're defining the styles of your components.

The Power of the aliases

Any design system or brand identity is full of constraints, for example a color pallette is a constraint because your design should use only the colors inside the pallette. These constraints are made for various reasons, but in the end the goal is to make the application as beautiful as it can be!

danger

That's why you should never write styles like this:

function Button({ children }) {
// THIS IS WRONG
const style = {
backgroundColor: '#1abc9c', // <--- Why we're using this color?
padding: '39px', // <---- How can I know this is the proper padding?
border: '2px solid black', // <--- Why this border and not another one? How can I know if this is the right one?
};
return <button style={style}>{children}</button>;
}

How many times you saw something like this? This is clearly wrong, we are not able to say if this button is following the guidelines or not since its style have no reference to a theme. We can do better than this!

Let's refactor this component using morfeo, in this case @morfeo/react since the example is written in React but the same principles can be applied with any morfeo's package or even the core-api:

import { useStyle } from '@morfeo/react';

function Button({ children }) {
// `useStyle` is the same as `morfeo.resolve` of the core-api
const style = useStyle({
backgroundColor: 'primary',
padding: 's',
border: 'strong',
});
return <button style={style}>{children}</button>;
}

That's way better! We are sure that we are following our design language because we are referring to aliases instead of values, the truth of our design is in the theme, not in the components!

But the power of morfeo is not only here, we can do even better by defining a style for our buttons and variants for common use cases:

import { useStyle } from '@morfeo/react';

function Button({ children }) {
const style = useStyle({ componentName: 'Button' });
return <button style={style}>{children}</button>;
}

function SuccessButton({ children }) {
const style = useStyle({ componentName: 'Button', variant: 'success' });
return <button style={style}>{children}</button>;
}

function DangerButton({ children }) {
const style = useStyle({ componentName: 'Button', variant: 'danger' });
return <button style={style}>{children}</button>;
}
info

To understand better how to set components inside the theme, checkout theme components section here