Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@maggioli-design-system/styles
Advanced tools
@maggioli-design-system/styles - npm Package Compare versions
Comparing version 8.2.0 to 9.0.0
| { | ||
| "name": "@maggioli-design-system/styles", | ||
| "version": "8.2.0", | ||
| "version": "9.0.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.", | ||
@@ -47,7 +47,4 @@ "main": "./tailwind.config.js", | ||
| "@fontsource/roboto": "^4.5.7", | ||
| "@maggioli-design-system/design-tokens": "^8.0.0", | ||
| "normalize.css": "^8.0.1", | ||
| "typeface-karla": "^1.1.13", | ||
| "typeface-merriweather": "^1.1.13", | ||
| "typeface-roboto": "^1.1.13" | ||
| "@maggioli-design-system/design-tokens": "^9.0.0", | ||
| "normalize.css": "^8.0.1" | ||
| }, | ||
@@ -59,4 +56,4 @@ "devDependencies": { | ||
| "postcss-import": "^14.0.7", | ||
| "tailwindcss": "^3.1.4" | ||
| "tailwindcss": "^3.1.8" | ||
| } | ||
| } |
152
README.md
@@ -1,22 +0,123 @@ | ||
| # Maggioli Design System | ||
| # @maggioli-design-system/styles | ||
| #### 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`. | ||
| 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 | ||
| ##### Installation | ||
| Install the component via `npm` by running the following command: | ||
| ```bash | ||
| npm i @maggioli-design-system/styles | ||
| ``` | ||
| npm install @maggioli-design-system/styles@latest | ||
| This package works also with yarn: | ||
| ```bash | ||
| yarn add @maggioli-design-system/styles | ||
| ``` | ||
| # Integration | ||
| ### CSS | ||
| The first part to be included are the design tokens, like color palette and typography, that are used by the components. | ||
| #### 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 | ||
| <html class="dark-mode"> | ||
| ``` | ||
| #### OS settings mode | ||
| Just add the `system-mode` class to the `html` tag: | ||
| ```html | ||
| <html class="system-mode"> | ||
| ``` | ||
| 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 | ||
| Now you can use `@fontsource` fonts, which are up to date with Google fonts, styles used in Magma are: | ||
| Use `@fontsource` fonts, which are up to date with Google fonts, styles used in [Magma Design System][mds] are: | ||
| ##### TypeScript | ||
| #### TypeScript | ||
| Importing fonts in TypeScript: | ||
| ```ts | ||
| ```ts | ||
| import '@fontsource/karla/400.css' | ||
@@ -27,7 +128,9 @@ import '@fontsource/karla/700.css' | ||
| import '@fontsource/roboto/700.css' | ||
| import '@fontsource/roboto/800.css' | ||
| import '@fontsource/roboto/900.css' | ||
| ``` | ||
| ##### CSS | ||
| #### CSS | ||
| Importing fonts in CSS: | ||
| ```css | ||
@@ -42,19 +145,26 @@ @import '@fontsource/karla/400.css'; | ||
| Fontsource supports [variable fonts](https://fontsource.org/docs/variable-fonts). | ||
| Fontsource supports [variable fonts][fontsource-var-fonts]. | ||
| --- | ||
| ### Structure | ||
| ### Dist folder | ||
| #### Folder `postcss` | ||
| The `dist` folder contains the following files: | ||
| Here you add CSS that should be buit with postcss, which is stored inside `dist/css`. | ||
| | 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 | `typography.css` | | ||
| | `css` | tailwind or web components | `colors-rgb-*.css` | | ||
| | `tailwind` | tailwind | `base.css` | | ||
| | `tailwind` | tailwind | `typography.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. | ||
| [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 |
@@ -50,2 +50,3 @@ const { palette } = require('@maggioli-design-system/design-tokens') | ||
| ], | ||
| darkMode: ['class', '.dark-mode'], | ||
| theme: { | ||
@@ -52,0 +53,0 @@ colors: { |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by2.11%
143107
- Dependency count
- decreased by-37.5%
5
- Lines of code
- increased by0.02%
4580
- Number of lines in readme file
- increased by186.44%
169
Dependency changes
+ Added@maggioli-design-system/design-tokens@9.0.0(transitive)
- Removedtypeface-karla@^1.1.13
- Removedtypeface-merriweather@^1.1.13
- Removedtypeface-roboto@^1.1.13
- Removed@maggioli-design-system/design-tokens@8.0.0(transitive)
- Removedtypeface-karla@1.1.13(transitive)
- Removedtypeface-merriweather@1.1.13(transitive)
- Removedtypeface-roboto@1.1.13(transitive)