@maggioli-design-system/styles - npm Package Compare versions

Comparing version 8.0.0 to 8.1.0

package.json

		{
		"name": "@maggioli-design-system/styles",
		"version": "8.0.0",
		"version": "8.1.0",
		"description": "This module contains SCSS and CSS styles used by Maggioli Design System, it also makes available a Tailwind config based on Maggioli design tokens.",
		@@ -44,7 +44,10 @@ "main": "./tailwind.config.js",
		"dependencies": {
		"@fontsource/karla": "^4.5.8",
		"@fontsource/merriweather": "^4.5.12",
		"@fontsource/roboto": "^4.5.7",
		"@maggioli-design-system/design-tokens": "^8.0.0",
		"normalize.css": "^8.0.1",
		"typeface-karla": "^1.1.13",
		"typeface-roboto": "^1.1.13",
		"typeface-merriweather": "^1.1.13"
		"typeface-merriweather": "^1.1.13",
		"typeface-roboto": "^1.1.13"
		},
		@@ -51,0 +54,0 @@ "devDependencies": {

README.md

		@@ -5,3 +5,2 @@ # Maggioli Design System


		These are the styles used by components libraries like `@maggioli-design-system/react` to use the palette generated by `@maggioli-design-system/design-tokens`.
		@@ -17,2 +16,32 @@

		### Fonts

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

		##### TypeScript

		```ts
		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

		```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](https://fontsource.org/docs/variable-fonts).

		---

		### Structure
		@@ -19,0 +48,0 @@

dist/css/base.css