@maggioli-design-system/styles 4.0.2 → 6.0.0

package/dist/css/typography.css

@@ -1,228 +1,129 @@
-/**
- * Do not edit directly
- * Generated on Fri, 26 Nov 2021 09:35:11 GMT
- */
-.text-primary {
-  font-family: Roboto, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Helvetica Neue, sans-serif;
-}
-.text-primary::placeholder {
-  font-family: Roboto, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Helvetica Neue, sans-serif;
-}
-
-.text-primary--h1 {
-  font-size: 42px;
+.text-primary-h1 {
+  font-family: Roboto, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
+  font-size: 3rem;
+  line-height: 1;
   font-weight: 800;
-  letter-spacing: -0.025rem;
-  line-height: 50px;
-}
-.text-primary--h1::placeholder {
-  font-size: 42px;
-  font-weight: 800;
-  letter-spacing: -0.025rem;
-  line-height: 50px;
+  letter-spacing: -0.025em;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale
 }
 
-.text-primary--h2 {
-  font-size: 33px;
+.text-primary-h2 {
+  font-family: Roboto, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
+  font-size: 2.25rem;
+  line-height: 2.5rem;
   font-weight: 800;
-  letter-spacing: -0.025rem;
-  line-height: 50px;
+  letter-spacing: -0.025em;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale
 }
-.text-primary--h2::placeholder {
-  font-size: 33px;
+
+.text-primary-h3 {
+  font-family: Roboto, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
+  font-size: 1.875rem;
+  line-height: 2.25rem;
   font-weight: 800;
-  letter-spacing: -0.025rem;
-  line-height: 50px;
+  letter-spacing: -0.025em;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale
 }
 
-.text-primary--h3 {
-  font-size: 26px;
+.text-primary-h4 {
+  font-family: Roboto, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
+  font-size: 1.5rem;
+  line-height: 2rem;
   font-weight: 700;
-  letter-spacing: -0.025rem;
-  line-height: 40px;
-}
-.text-primary--h3::placeholder {
-  font-size: 26px;
-  font-weight: 700;
-  letter-spacing: -0.025rem;
-  line-height: 40px;
-}
-
-.text-primary--h4 {
-  font-size: 20px;
-  font-weight: 600;
-  line-height: 30px;
-}
-.text-primary--h4::placeholder {
-  font-size: 20px;
-  font-weight: 600;
-  line-height: 30px;
+  letter-spacing: -0.025em;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale
 }
 
-.text-primary--h5 {
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 25px;
-}
-.text-primary--h5::placeholder {
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 25px;
-}
-
-.text-primary--h6 {
-  font-size: 20px;
-  font-variant-caps: all-small-caps;
-  font-weight: 500;
-  line-height: 20px;
-}
-.text-primary--h6::placeholder {
-  font-size: 20px;
-  font-variant-caps: all-small-caps;
-  font-weight: 500;
-  line-height: 20px;
-}
-
-.text-primary--overline {
-  font-size: 14px;
-  font-variant-caps: all-small-caps;
-  font-weight: 500;
-  line-height: 15px;
-}
-@media (min-width: 768px) {
-  .text-primary--overline {
-    line-height: 20px;
-  }
-}
-.text-primary--overline::placeholder {
-  font-size: 14px;
-  font-variant-caps: all-small-caps;
-  font-weight: 500;
-  line-height: 15px;
-}
-@media (min-width: 768px) {
-  .text-primary--overline::placeholder {
-    line-height: 20px;
-  }
-}
-
-.text-primary--action {
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 24px;
-}
-.text-primary--action::placeholder {
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 24px;
+.text-primary-h5 {
+  font-family: Roboto, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale
 }
 
-.text-secondary {
-  font-family: Karla, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Helvetica Neue, sans-serif;
-}
-.text-secondary::placeholder {
-  font-family: Karla, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Helvetica Neue, sans-serif;
+.text-primary-h6 {
+  font-family: Roboto, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale
 }
 
-.text-secondary--paragraph {
-  font-size: 20px;
-  font-weight: 400;
-  line-height: 35px;
-}
-.text-secondary--paragraph::placeholder {
-  font-size: 20px;
-  font-weight: 400;
-  line-height: 35px;
+.text-primary-action {
+  font-family: Roboto, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
+  font-size: 0.875rem;
+  font-weight: 700;
+  line-height: 1.625;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale
 }
 
-.text-secondary--detail {
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 25px;
-}
-.text-secondary--detail::placeholder {
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 25px;
+.text-secondary-paragraph {
+  font-family: Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
+  font-size: 1.25rem;
+  line-height: 2rem;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale
 }
 
-.text-secondary--caption {
-  font-size: 13px;
-  font-weight: 400;
-  line-height: 20px;
-}
-.text-secondary--caption::placeholder {
-  font-size: 13px;
-  font-weight: 400;
-  line-height: 20px;
+.text-secondary-detail {
+  font-family: Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale
 }
 
-.text-secondary--label-paragraph {
-  font-size: 13px;
-  font-weight: 600;
-  line-height: 20px;
-  text-transform: uppercase;
-}
-.text-secondary--label-paragraph::placeholder {
-  font-size: 13px;
-  font-weight: 600;
-  line-height: 20px;
-  text-transform: uppercase;
+.text-secondary-caption {
+  font-family: Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale
 }
 
-.text-secondary--label-detail {
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 20px;
-  text-transform: uppercase;
-}
-.text-secondary--label-detail::placeholder {
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 20px;
+.text-secondary-label {
+  font-family: Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 700;
   text-transform: uppercase;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale
 }
 
-.text-secondary--label-caption {
-  font-size: 10px;
-  font-weight: 600;
-  line-height: 20px;
-  text-transform: uppercase;
-}
-.text-secondary--label-caption::placeholder {
-  font-size: 10px;
-  font-weight: 600;
-  line-height: 20px;
+.text-secondary-option {
+  font-family: Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
+  font-size: 0.625rem;
+  font-weight: 700;
   text-transform: uppercase;
+  line-height: 1;
+  letter-spacing: -0.025em;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale
 }
 
-.text-mono {
-  font-family: Roboto Mono, monospace;
-}
-.text-mono::placeholder {
-  font-family: Roboto Mono, monospace;
+.text-mono-code {
+  font-family: 'Roboto Mono', monospace;
+  font-size: 1rem;
+  line-height: 1.625;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale
 }
 
-.text-mono--code {
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 30px;
+.text-mono-hack {
+  font-family: 'Roboto Mono', monospace;
+  font-size: 0.875rem;
+  line-height: 1.625;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale
 }
-.text-mono--code::placeholder {
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 30px;
-}
-
-.text-mono--hack {
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 20px;
-}
-.text-mono--hack::placeholder {
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 20px;
-}
-
-/*# sourceMappingURL=typography.css.map */

package/dist/tailwind/base.css

@@ -9,9 +9,8 @@ html {
 
 body {
   @apply
-    font-secondary
-    text-secondary-detail
-    text-adjust-tone-04;
+    text-adjust-tone-04
+    text-secondary-detail;
 
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
@@ -40,12 +39,12 @@ textarea {
 b,
 strong {
   @apply
-    tracking-tight
-    font-semibold;
+    font-semibold
+    tracking-tight;
 }
 
 a {
-  @apply no-underline;
+  @apply text-brand-maggioli-03;
 
   font-family: inherit;
   font-size: inherit;
@@ -91,6 +90,6 @@ p {
 
 ::selection {
   @apply
-    bg-brand-maggioli-15
-    text-brand-maggioli;
+    bg-brand-maggioli-09
+    text-brand-maggioli-02;
 }

package/package.json

@@ -1,27 +1,18 @@
 {
   "name": "@maggioli-design-system/styles",
-  "version": "4.0.2",
+  "version": "6.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.",
   "main": "./tailwind.config.js",
   "scripts": {
-    "build": "npm run clean && npm run config && npm run sass && npm run copy:sass && npm run copy:tailwind",
-    "clean": "rm -rf dist || true && mkdir -p dist/css dist/scss dist/tailwind",
-    "config": "cp ../../node_modules/@maggioli-design-system/design-tokens/dist/scss/config.scss ./scss",
-    "copy:sass": "cp -rf scss dist",
-    "copy:tailwind": "cp -rf tailwind dist",
-    "sass": "npm run sass:components && npm run sass:components:min && npm run sass:styles && npm run sass:styles:min && npm run sass:base && npm run sass:base:min && npm run sass:colors && npm run sass:colors:min && npm run sass:palette && npm run sass:palette:min && npm run sass:typography && npm run sass:typography:min",
-    "sass:base": "sass ./scss/export/base.scss ./dist/css/base.css --style=expanded --load-path=../../node_modules",
-    "sass:base:min": "sass ./scss/export/base.scss ./dist/css/base.min.css --style=compressed --no-source-map --load-path=../../node_modules",
-    "sass:colors": "sass ./scss/export/colors.scss ./dist/css/colors.css --style=expanded --load-path=../../node_modules",
-    "sass:colors:min": "sass ./scss/export/colors.scss ./dist/css/colors.min.css --style=compressed --no-source-map --load-path=../../node_modules",
-    "sass:components": "sass ./scss/export/components.scss ./dist/css/components.css --style=expanded --load-path=../../node_modules",
-    "sass:components:min": "sass ./scss/export/components.scss ./dist/css/components.min.css --style=compressed --no-source-map --load-path=../../node_modules",
-    "sass:palette": "sass ./scss/export/color-palette.scss ./dist/css/color-palette.css --style=expanded --load-path=../../node_modules",
-    "sass:palette:min": "sass ./scss/export/color-palette.scss ./dist/css/color-palette.min.css --style=compressed --no-source-map --load-path=../../node_modules",
-    "sass:styles": "sass ./scss/export/styles.scss ./dist/css/styles.css --style=expanded --load-path=../../node_modules",
-    "sass:styles:min": "sass ./scss/export/styles.scss ./dist/css/styles.min.css --style=compressed --no-source-map --load-path=../../node_modules",
-    "sass:typography": "sass ./scss/export/typography.scss ./dist/css/typography.css --style=expanded --load-path=../../node_modules",
-    "sass:typography:min": "sass ./scss/export/typography.scss ./dist/css/typography.min.css --style=compressed --no-source-map --load-path=../../node_modules"
+    "build": "npm run clean && npm run copy && npm run tailwind.build",
+    "clean": "rm -rf dist || true && mkdir -p dist/css dist/tailwind",
+    "copy": "npm run copy.tailwind && npm run copy.css.hex && npm run copy.css.rgb",
+    "copy.tailwind": "cp -rf tailwind dist",
+    "copy.css.hex": "cp -rf ../design-tokens/dist/css/colors.css ./dist/css/colors.css",
+    "copy.css.rgb": "cp -rf ../design-tokens/dist/css/colors-rgb.css ./dist/css/colors-rgb.css",
+    "tailwind.base": "tailwindcss -i ./css/base.css -o ./dist/css/base.css",
+    "tailwind.build": "npm run tailwind.base && npm run tailwind.typography",
+    "tailwind.typography": "tailwindcss -i ./css/typography.css -o ./dist/css/typography.css"
   },
   "files": [
     "/postcss.config.js",
@@ -33,7 +24,6 @@
     "url": "https://git.maggioli.it/ricerca-sviluppo-new-media/design-system.git"
   },
   "keywords": [
-    "sass",
     "scss",
     "css",
     "tailwindcss"
@@ -48,22 +38,19 @@
   ],
   "license": "ISC",
   "dependencies": {
-    "@maggioli-design-system/design-tokens": "^5.0.2",
-    "@tailwindcss/aspect-ratio": "0.2.1",
+    "@maggioli-design-system/design-tokens": "^6.1.1",
+    "@tailwindcss/aspect-ratio": "^0.3.0",
     "normalize.css": "^8.0.1",
     "tailwindcss-multi-column": "^1.0.2",
     "tailwindcss-scroll-snap": "^1.1.0",
     "tailwindcss-textshadow": "^2.1.3",
-    "typeface-karla": "1.1.13",
-    "typeface-roboto": "1.1.13"
+    "typeface-karla": "^1.1.13",
+    "typeface-roboto": "^1.1.13"
   },
   "devDependencies": {
-    "autoprefixer": "^10.3.1",
-    "postcss": "^8.3.5",
-    "postcss-import": "14.0.2",
-    "sass": "^1.35.1",
-    "sass-extract": "^2.1.0",
-    "sass-loader": "^12.1.0",
-    "tailwindcss": "^2.2.7"
+    "autoprefixer": "^10.4.0",
+    "postcss": "^8.4.5",
+    "postcss-import": "^14.0.2",
+    "tailwindcss": "^3.0.5"
   }
 }

package/tailwind.config.js

@@ -39,18 +39,9 @@ const minSize = {
 
 module.exports = {
   important: true,
-  mode: 'jit',
-  purge: {
-    mode: 'all',
-    content: [
-      './src/**/*.{js,jsx}',
-    ],
-    variables: true,
-    options: {
-      keyframes: true,
-    },
-  },
-  darkMode: 'media',
+  content: [
+    './src/**/*.{js,jsx}',
+  ],
   theme: {
     colors: {
       transparent: 'transparent',
@@ -61,7 +52,9 @@ module.exports = {
     fontFamily: {
       ...fontFamily,
     },
-    screens: mediaQueries,
+    screens: {
+      ...mediaQueries,
+    },
     transitionTimingFunction: {
       ...ease,
     },
@@ -136,18 +129,10 @@ module.exports = {
       },
     },
   },
-  variants: {
-    extend: {
-      backgroundColor: ['group-hover'],
-      borderColor: ['group-hover'],
-      margin: ['first', 'last'],
-      textColor: ['group-hover'],
-    },
-  },
   plugins: [
     require('@tailwindcss/aspect-ratio'),
-    require('tailwindcss-multi-column')(),
-    require('tailwindcss-scroll-snap'),
-    require('tailwindcss-textshadow'),
+    // require('tailwindcss-multi-column')(),
+    // require('tailwindcss-scroll-snap'),
+    // require('tailwindcss-textshadow'),
   ],
 }

package/dist/css/base.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../../../node_modules/@maggioli-design-system/design-tokens/dist/scss/variables.scss","../../scss/global/base.scss","../../scss/mixins/scaffolding.scss"],"names":[],"mappings":"AACA;AAAA;AAAA;AAAA;ACGA;AAAA;EAEE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ECIM,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;;ADInC;EACE;;;AAGF;AAAA;EAEE;ECNM,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;ADajC;AAAA;EACE;ECVI,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;;ADmBnC;AAAA;ECfQ,aAJ2B;EAI3B,gBAJ2B;;;ADwBnC;EACE;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAwBE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOE;;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;;AAGF;EACE;EACA","file":"base.css"}

package/dist/css/base.min.css

@@ -1 +0,0 @@
-body,html{margin:0}body{background-color:RGB(var(--adjust-tone));color:RGB(var(--adjust-tone-03));font-family:Karla, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Helvetica Neue, sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;text-align:-webkit-left;text-align:left;text-rendering:optimizeLegibility;text-size-adjust:100%;width:100%;font-size:20px;font-weight:400;line-height:35px}button{font-family:Roboto, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Helvetica Neue, sans-serif}input,textarea{appearance:none;font-size:20px;font-weight:400;line-height:35px}input::placeholder,textarea::placeholder{user-select:none;font-size:20px;font-weight:400;line-height:35px}b,strong{font-weight:600;letter-spacing:-0.5px}a{color:RGB(var(--brand-maggioli));font-family:inherit;font-size:inherit;font-weight:inherit;text-decoration:none}a,aside,body,code,div,datalist,footer,form,h1,h2,h3,h4,h5,h6,header,hr,html,input,li,main,section,span,ul,textarea{box-sizing:border-box}h1,h2,h3,h4,h5,h6,p{margin:0}button,input,optgroup,select,textarea{font-family:inherit}::selection{background-color:RGB(var(--brand-maggioli-15));color:RGB(var(--brand-maggioli))}