# @maggioli-design-system/styles These are the CSS and Tailwind styles used by components libraries of [Magma Design System][mds] to use the palette generated by `@maggioli-design-system/design-tokens`. --- ### Compatibility Use the version of this package matching the major version of [`@maggioli-design-system/magma`](https://www.npmjs.com/package/@maggioli-design-system/magma) you are using: | magma | design-tokens | styles | | :--- | :--- | :--- | | `1.x` (before Magma 2) | `13.x` (latest `13.7.2`) | `15.x` (latest `15.11.1`) | | `2.x` and later | `>= 14` | `>= 16` | --- ### Installation Install the component via `npm` by running the following command: ```bash npm i @maggioli-design-system/styles ``` --- ### Integration The layer order is thinked to be used with tailwindcss, so the first layer is the reset, then the vendor, then the theme, then the base, then the components, and finally the utilities. ```css @layer reset, vendor, theme, base, components, utilities, overrides; @import 'normalize.css' layer(reset); @import '@fontsource/karla/400.css' layer(vendor); @import '@fontsource/karla/700.css' layer(vendor); @import '@fontsource/merriweather/300.css' layer(vendor); @import '@fontsource/merriweather/400.css' layer(vendor); @import '@fontsource/merriweather/700.css' layer(vendor); @import '@fontsource/roboto-mono/400.css' layer(vendor); @import '@fontsource/roboto/500.css' layer(vendor); @import '@fontsource/roboto/700.css' layer(vendor); @import '@fontsource/roboto/900.css' layer(vendor); @import './iconsauce.css' layer(vendor); @import '@maggioli-design-system/styles/dist/css/reset.css' layer(reset); @import '@maggioli-design-system/styles/dist/css/globals.css' layer(theme); @import '@maggioli-design-system/styles/dist/css/colors-rgb.css' layer(theme); @import '@maggioli-design-system/styles/dist/css/hydrated.css' layer(base); @import '@maggioli-design-system/styles/dist/css/animations.css' layer(base); @import '@maggioli-design-system/styles/dist/css/base.css' layer(base); @import './tailwind.css'; @layer overrides { body { @apply bg-tone-neutral text-tone-neutral-03 transition-colors duration-300 ease-in-out; } mds-button { border-radius: var(--radius-2xl); } } ``` ### Imports ```ts ``` #### Colors with tailwind or web components If you use tailwind or web components, you need to import **rgb format** of colors: ```ts import '@maggioli-design-system/styles/dist/css/colors-rgb-tones.css'; import '@maggioli-design-system/styles/dist/css/colors-rgb-status.css'; import '@maggioli-design-system/styles/dist/css/colors-rgb-label.css'; import '@maggioli-design-system/styles/dist/css/colors-rgb-brand.css'; ``` You need to import colors because web components and our tailwind config works with our palette, which are custom properties in rgb format (rr, gg, bb). If for some reason you need to use colors outside tailwind: ```css .selector { color: rgb(var(--tone-neutral-01)); } ``` #### Hex colors If you need just the **hex format** of colors, you can import them like this: ```ts import '@maggioli-design-system/styles/dist/css/colors-hex-tones.css'; import '@maggioli-design-system/styles/dist/css/colors-hex-status.css'; import '@maggioli-design-system/styles/dist/css/colors-hex-label.css'; import '@maggioli-design-system/styles/dist/css/colors-hex-brand.css'; ``` Then you can use them like this: ```css .selector { color: var(--tone-neutral-01); } ``` --- ### Dark mode format our color palette already supports dark mode, either according to your computer settings, or with manual support: #### Manual mode Just add the `dark-mode` class to the `html` tag: ```html ``` #### OS settings mode Just add the `system-mode` class to the `html` tag: ```html ``` There are other practices to handle dark mode, check [how tailwind handle dark mode][tailwindcss-dark], or [how is handled by next-themes][next-themes]. --- ### Tailwindcss config You can use styles with [tailwindcss config][tailwindcss-config], palette colors and the rest of it's Design Tokens. There are various ways to use it, check out [tailwindcss documentation][tailwindcss-doc]. To extend the default tailwind config: ```js module.exports = { content: [ './src/**/*.{ts,tsx}', ], important: false, presets: [ require('@maggioli-design-system/styles'), ], } ``` --- ### Fonts Use `@fontsource` fonts, which are up to date with Google fonts, styles used in [Magma Design System][mds] are: #### TypeScript Importing fonts in TypeScript: ```ts ```ts import '@fontsource/karla/400.css' import '@fontsource/karla/700.css' import '@fontsource/merriweather/400.css' import '@fontsource/merriweather/700.css' import '@fontsource/roboto-mono/400.css' import '@fontsource/roboto/500.css' import '@fontsource/roboto/700.css' import '@fontsource/roboto/900.css' ``` #### CSS Importing fonts in 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-mono/400.css'; @import '@fontsource/roboto/500.css'; @import '@fontsource/roboto/700.css'; @import '@fontsource/roboto/900.css'; ``` Fontsource supports [variable fonts][fontsource-var-fonts]. --- ### Dist folder The `dist` folder contains the following files: | Folder | For | File name | | --------- | ----------- | ----------- | | `css` | both | `globals.css` | | `css` | both | `reset.css` | | `css` | plain css | `base.css` | | `css` | plain css | `colors-hex-*.css` | | `css` | plain css | `utility-typography.css` | | `css` | plain css | `typography.css` | | `css` | tailwind or web components | `colors-rgb-*.css` | | `tailwind` | tailwind | `base.css` | | `tailwind` | tailwind components | `components.css` | [mds]: https://magma.maggiolicloud.it/ [fontsource-var-fonts]: https://fontsource.org/docs/variable-fonts [tailwindcss-config]: https://gitlab.com/maggiolispa/ricerca-sviluppo-new-media/magma/design-system/-/blob/dev/projects/styles/tailwind.config.js [tailwindcss-doc]: https://tailwindcss.com/docs/installation [tailwindcss-dark]: https://tailwindcss.com/docs/dark-mode#supporting-system-preference-and-manual-selection [next-themes]: https://github.com/pacocoursey/next-themes#use