forked from morfeojs/morfeo
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
34 changed files
with
1,669 additions
and
416 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| --- | ||
| slug: cli-and-presets | ||
| title: 🎉 Introducing CLI and Preset 🎉 | ||
| author: Mauro Erta | ||
| author_title: Front End Engineer @ VLK STUDIO | ||
| author_url: https://github.com/mauroerta | ||
| author_image_url: https://avatars.githubusercontent.com/u/13780027?v=4 | ||
| tags: [cli, morfeo, design, system, preset] | ||
| --- | ||
|
|
||
| Today we are going to release 2 new features: | ||
|
|
||
| - a CLI that generates static CSS based on the theme | ||
| - a theme preset to easily start using morfeo in 30 seconds (Many thanks to [Andrea](https://github.com/andreaSimonePorceddu) who made it possible) | ||
|
|
||
| ### CLI | ||
|
|
||
| We are so happy to announce this new tool because it was one of the first feature we wanted to implement for morfeo! | ||
| You can find more info about it [here in the docs](/docs/Features/morfeo-cli). | ||
|
|
||
| ### Theme preset | ||
|
|
||
| In this [pull-request](https://github.com/VLK-STUDIO/morfeo/pull/62), based on this [issue](https://github.com/VLK-STUDIO/morfeo/issues/45) my friend and colleague [Andrea](https://github.com/andreaSimonePorceddu) introduces a new packages called `@morfeo/preset-default`, this package contains 2 complete themes, one dark and one light, to easily start using morfeo without create a whole complete theme your own. | ||
|
|
||
| Checkout more info about the preset [here](/docs/Packages/preset-default). | ||
|
|
||
| ### Work with us | ||
|
|
||
| More features are coming soon, we are close to finish the version 1 of morfeo, with your help we can go even faster! | ||
|
|
||
| If you want to help us improve morfeo, be sure you've read the [contributing](https://github.com/VLK-STUDIO/morfeo/blob/main/CONTRIBUTING.md) file. | ||
| There are a lot of ways you can help us to improve morfeo and grow as a community, for example: | ||
|
|
||
| - Improve documentation | ||
| - Add new functionalities | ||
| - [Fix a bug](https://github.com/VLK-STUDIO/morfeo/issues) | ||
| - Write an article about morfeo | ||
| - Give us a feedback | ||
|
|
||
| If you're a developer and you want to contribute [PRs are welcome!](https://github.com/VLK-STUDIO/morfeo)! | ||
| If you're not a developer or you don't want to contribute in this way, it could be extremely useful to know your thoughts about morfeo, | ||
| how we can improve the library, or just some feedback. For this kind of contribution, we will always be available in the [slack channel](https://morfeo.slack.com/). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,103 @@ | ||
| --- | ||
| sidebar_position: 1 | ||
| id: morfeo-cli | ||
| title: CLI | ||
| description: Features > CLI | ||
| --- | ||
|
|
||
| If you don't need to generate style `run time` or you don't want to use `javascript` at all, but you still want to benefit the morfeo eco-system and a centralized theme, | ||
| the `morfeo CLI` is what you need! | ||
|
|
||
| Morfeo CLI has (for now) only one command called `build`, with this command you can generate CSS based on a theme. | ||
|
|
||
| ## Example | ||
|
|
||
| ```typescript title="theme.tsx" | ||
| const theme = { | ||
| colors: { | ||
| primary: '#1abc9c', | ||
| secondary: '#3498db', | ||
| }, | ||
| ...restOfTheTheme, | ||
| components: { | ||
| Button: { | ||
| ..., | ||
| style: { | ||
| ..., | ||
| bg: "primary", | ||
| }, | ||
| variants: { | ||
| secondary: { | ||
| ..., | ||
| style: { | ||
| bg: "secondary" | ||
| }, | ||
| }, | ||
| }, | ||
| }, | ||
| }, | ||
| }; | ||
| ``` | ||
|
|
||
| After running this command: | ||
|
|
||
| ```bash | ||
| morfeo build theme.tsx --name="themeName" | ||
| ``` | ||
|
|
||
| Will generate the CSS: | ||
|
|
||
| ```css | ||
| :root, | ||
| html[data-morfeo-theme='themeName'] { | ||
| /* all the other variables */ | ||
| --colors-primary: #1abc9c; | ||
| --colors-secondary: #3498db; | ||
| } | ||
|
|
||
| html[data-morfeo-theme='themeName'] .morfeo-button { | ||
| background-color: var(--colors-primary); | ||
| } | ||
|
|
||
| html[data-morfeo-theme='themeName'] .morfeo-button-secondary { | ||
| background-color: var(--colors-secondary); | ||
| } | ||
| ``` | ||
|
|
||
| :::note | ||
| Notice that the generated css starts with `html[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 | ||
| ::: | ||
|
|
||
| After this, you can include the generated style in your application and use it to stylize your component or in custom css classes: | ||
|
|
||
| ```tsx | ||
| import 'path/to/generated/styles'; | ||
|
|
||
| function Button() { | ||
| return <button className="morfeo-button" />; | ||
| } | ||
| ``` | ||
|
|
||
| an example in plain vanilla javascript could be the following | ||
|
|
||
| ```typescript | ||
| const button = document.createElement('button'); | ||
| button.classList.add('morfeo-button'); | ||
| ``` | ||
|
|
||
| Or even in simple old school HTML: | ||
|
|
||
| ```html | ||
| <html data-morfeo-theme="themeName"> | ||
| <head> | ||
| <link rel="stylesheet" href="path/to/generated/styles" /> | ||
| </head> | ||
| <body> | ||
| <button class="morfeo-button">No Javascript needed</button> | ||
| </body> | ||
| </html> | ||
| ``` | ||
|
|
||
| ## Specification | ||
|
|
||
| The details about all the flags and the configurations of @morfeo/cli can be found in the packages section, [here](../Packages/cli.mdx). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.