Skip to main content

Build command

Installation

To install the CLI you just have to add it to your devDependencies:

yarn add --dev @morfeo/cli
# or npm add -D @morfeo/cli

Or using it directly with npx

npx @morfeo/cli build --help

The details about all the flags and the configurations of @morfeo/cli can be found in the packages section, here.

Example

Let's start by converting a simple theme to css files, for example:

theme.tsx
const theme = {
colors: {
primary: '#1abc9c',
secondary: '#3498db',
},
...restOfTheTheme,
components: {
Button: {
...,
style: {
...,
bg: "primary",
},
variants: {
secondary: {
...,
style: {
bg: "secondary"
},
},
},
},
},
};

After running this command:

morfeo build --theme="theme.ts" --name="themeName"

Will generate 3 CSS files:

Variables

{themeName}-variables.css
:root,
[data-morfeo-theme='themeName'] {
--colors-primary: #1abc9c;
--colors-secondary: #3498db;
--gradients-primary: linear-gradient(90deg, #1abc9c 0%, #3498db 100%);
--gradients-secondary: linear-gradient(0deg, #3498db 0%, #2ecc71 100%);
/* all the other variables */
}
info

This file contain a css variables for each value of each theme slice, the name of those variables it's simply: --{slice-name}-{alias}, for example --colors-primary, --spacings-m or border-widths-s

Components

{themeName}-components.css
[data-morfeo-theme='themeName'] .morfeo-button {
background-color: var(--colors-primary);
}

[data-morfeo-theme='themeName'] .morfeo-button-primary {
background-color: var(--colors-primary);
}

[data-morfeo-theme='themeName'] .morfeo-button-secondary {
background-color: var(--colors-secondary);
}

/* all the other components */
info

This file contain a class for each of component and each component variant, the name of those classes it's simply: .morfeo-{component-name} or .morfeo-{component-name}-{variant}, for example .morfeo-button or .morfeo-button-primary

Classes

classes.css
.bg-primary {
background-color: var(--colors-primary);
}
.px-2xs {
padding-left: var(--spacings-2xs);
padding-right: var(--spacings-2xs);
}

/* all the other classes */
info

This last file contains a class for each combination of css-attribute / morfeo theme value, to understand all the possible combination it's easier to look at this table:

propertyslicevaluesclasses
paddingspacingsxxs, xs, s, m, l, xl, xxl.padding-2xs, .padding-xs, ...., .padding-2xl
padding-leftspacingsxxs, xs, s, m, l, xl, xxl.padding-left-2xs, .padding-left-xs, ...., .padding-left-2xl
pxspacingsxxs, xs, s, m, l, xl, xxl.px-2xs, .px-xs, ...., .px-2xl
............
bgcolorsprimary, secondary, grey.bg-primary, .bg-secondary, ...., .bg-grey
colorcolorsprimary, secondary, grey.color-primary, .color-secondary, ...., .color-grey
............
gradientgradientsprimary, secondary, loading.gradient-primary, .gradient-secondary, .gradient-loading

All the possibles properties can be found here in this table

After this, you can include the generated style in your application and use it to stylize your component or in custom css classes:

import 'path/to/generated/styles';

function Button() {
// Same as:
// morfeo.resolve({ componentName: 'Button' });
return <button className="morfeo-button" />;
}

function PrimaryButton() {
// Same as:
// morfeo.resolve({ componentName: 'Button', variant: 'primary' });
return <button className="morfeo-button-primary" />;
}

function CustomButton() {
// Same as:
// morfeo.resolve({ componentName: 'Button', px: 'm', shadow: 'light' });
return <button className="morfeo-button px-m shadow-light" />;
}
note

Notice that the generated css starts with [data-morfeo-theme="themeName"], this enables you to generate multiple css styles for different themes and still have multi-theming even in this case, make sure to put the data-attribute data-morfeo-theme in the html tag or in the top level component that wraps your website.

an example in plain vanilla javascript could be the following

const button = document.createElement('button');
button.classList.add('morfeo-button');

Or even in simple old school HTML:

<html>
<head>
<link rel="stylesheet" href="path/to/generated/styles" />
</head>
<body data-morfeo-theme="themeName">
<div class="py-s px-m">
<button class="morfeo-button">No Javascript needed</button>
</div>
</body>
</html>

Multi Theming

As you could notice, inside the files *-variables.css and *-components.css the css is scoped with [data-morfeo-theme="themeName"]; This means that if you have multiple themes, for example light and dark, the value of these variables and classes will change if you're under an HTML element with the data-attribute morfeo-theme equals to light or dark:

plain html example
<html>
<head>
<link rel="stylesheet" href="path/to/generated/styles" />
</head>
<body>
<div data-morfeo-theme="light">
<div class="py-s px-m">
<button class="morfeo-button">Button under Light mode</button>
</div>
</div>
<div data-morfeo-theme="dark">
<div class="py-s px-m">
<button class="morfeo-button">Button under dark mode</button>
</div>
</div>
</body>
</html>
Example in React
function App({ children }) {
const [themeName, setThemeName] = useState('light');

const toggleThemeName = () => {
setThemeName(prev => (prev === 'light' ? 'dark' : 'light'));
};

return (
<div data-morfeo-theme={themeName}>
{children}
<button className="morfeo-button-primary" onClick={toggleThemeName}>
Toggle {themeName === 'light' ? 'dark' : 'light'} mode
</button>
</div>
);
}