@maggioli-design-system/styles

Maggioli Design System

styles

These are the styles used by components libraries like @maggioli-design-system/react to use the palette generated by @maggioli-design-system/design-tokens.

Installation

npm install @maggioli-design-system/styles@latest

---

Fonts

Now you can use @fontsource fonts, which are up to date with Google fonts, styles used in Magma are:

TypeScript

import '@fontsource/karla/400.css'
import '@fontsource/karla/700.css'
import '@fontsource/merriweather/400.css'
import '@fontsource/merriweather/700.css'
import '@fontsource/roboto/700.css'
import '@fontsource/roboto/800.css'

CSS

@import '@fontsource/karla/400.css';
@import '@fontsource/karla/700.css';
@import '@fontsource/merriweather/400.css';
@import '@fontsource/merriweather/700.css';
@import '@fontsource/roboto/700.css';
@import '@fontsource/roboto/900.css';

Fontsource supports variable fonts.

---

Structure

Folder postcss

Here you add CSS that should be buit with postcss, which is stored inside dist/css.

Folder css

Here you add static CSS that should be stored inside dist/css.

Folder tailwind

Here you add Tailwind CSS that should be stored inside dist/tailwind, this folder is used when you use tailwind also in your product.