@maggioli-design-system/styles 3.11.0 → 5.0.0

package/dist/css/typography.css

@@ -1,228 +1,133 @@
-/*
-  Do not edit directly
-  Generated on Fri, 05 Nov 2021 14:16:29 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;
+  line-height: 1.25rem;
+  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: 1.75rem;
+  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.5rem;
+  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.25rem;
+  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

@@ -8,7 +8,9 @@ html {
 }
 
 body {
-  @apply font-secondary text-secondary-detail text-adjust-tone-03;
+  @apply
+    text-adjust-tone-04
+    text-secondary-detail;
 
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
@@ -20,7 +22,11 @@ body {
 button,
 optgroup,
 select {
-  @apply antialiased font-medium font-primary leading-relaxed;
+  @apply
+    antialiased
+    font-medium
+    font-primary
+    leading-relaxed;
 }
 
 input,
@@ -32,11 +38,13 @@ textarea {
 
 b,
 strong {
-  @apply tracking-tight font-semibold;
+  @apply
+    font-semibold
+    tracking-tight;
 }
 
 a {
-  @apply no-underline;
+  @apply text-brand-maggioli-03;
 
   font-family: inherit;
   font-size: inherit;
@@ -81,5 +89,7 @@ p {
 }
 
 ::selection {
-  @apply bg-brand-maggioli-15 text-brand-maggioli;
+  @apply
+    bg-brand-maggioli-09
+    text-brand-maggioli-02;
 }

package/dist/tailwind/typography.css

@@ -1,57 +1,122 @@
 @layer components {
   .text-primary-h1 {
-    @apply antialiased font-extrabold font-primary text-5xl tracking-tight;
+    @apply
+      antialiased
+      font-extrabold
+      font-primary
+      text-5xl
+      tracking-tight;
   }
 
   .text-primary-h2 {
-    @apply antialiased font-extrabold font-primary text-4xl tracking-tight;
+    @apply
+      antialiased
+      font-extrabold
+      font-primary
+      text-4xl
+      tracking-tight;
   }
 
   .text-primary-h3 {
-    @apply antialiased font-bold font-primary text-3xl tracking-tight;
+    @apply
+      antialiased
+      font-extrabold
+      font-primary
+      text-3xl
+      tracking-tight;
   }
 
   .text-primary-h4 {
-    @apply antialiased font-bold font-primary text-2xl tracking-tight;
+    @apply
+      antialiased
+      font-bold
+      font-primary
+      text-2xl
+      tracking-tight;
   }
 
   .text-primary-h5 {
-    @apply antialiased font-bold font-primary text-xl tracking-tight;
+    @apply
+      antialiased
+      font-bold
+      font-primary
+      text-xl
+      tracking-tight;
   }
 
   .text-primary-h6 {
-    @apply antialiased font-bold font-primary text-base tracking-tight;
+    @apply
+      antialiased
+      font-bold
+      font-primary
+      text-base
+      tracking-tight;
   }
 
   .text-primary-action {
-    @apply antialiased font-bold font-primary leading-relaxed text-sm;
+    @apply
+      antialiased
+      font-bold
+      font-primary
+      leading-relaxed
+      text-sm;
   }
 
   .text-secondary-paragraph {
-    @apply antialiased font-secondary text-xl;
+    @apply
+      antialiased
+      font-secondary
+      leading-8
+      text-xl;
   }
 
   .text-secondary-detail {
-    @apply antialiased font-secondary text-base;
+    @apply
+      antialiased
+      font-secondary
+      text-base;
   }
 
   .text-secondary-caption {
-    @apply antialiased font-secondary text-sm;
+    @apply
+      antialiased
+      font-secondary
+      text-sm;
   }
 
   .text-secondary-label {
-    @apply antialiased font-bold font-secondary text-xs uppercase;
+    @apply
+      antialiased
+      font-bold
+      font-secondary
+      text-xs
+      uppercase;
   }
 
   .text-secondary-option {
-    @apply antialiased font-bold font-secondary leading-none text-xxs tracking-tight uppercase;
+    @apply
+      antialiased
+      font-bold
+      font-secondary
+      leading-none
+      text-xxs
+      tracking-tight
+      uppercase;
   }
 
   .text-mono-code {
-    @apply antialiased font-mono leading-relaxed text-base;
+    @apply
+      antialiased
+      font-mono
+      leading-relaxed
+      text-base;
   }
 
   .text-mono-hack {
-    @apply antialiased font-mono leading-relaxed text-sm;
+    @apply
+      antialiased
+      font-mono
+      leading-relaxed
+      text-sm;
   }
 }

package/package.json

@@ -1,27 +1,18 @@
 {
   "name": "@maggioli-design-system/styles",
-  "version": "3.11.0",
+  "version": "5.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": "css/styles.min.css",
+  "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,19 +38,19 @@
   ],
   "license": "ISC",
   "dependencies": {
-    "@maggioli-design-system/design-tokens": "^4.0.2",
-    "@tailwindcss/aspect-ratio": "0.2.1",
+    "@maggioli-design-system/design-tokens": "^6.0.0",
+    "@tailwindcss/aspect-ratio": "^0.2.1",
     "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",
+    "postcss-import": "^14.0.2",
     "sass": "^1.35.1",
     "sass-extract": "^2.1.0",
     "sass-loader": "^12.1.0",

package/postcss.config.js

@@ -3,5 +3,5 @@ module.exports = {
     require('postcss-import'),
     require('tailwindcss'),
     require('autoprefixer'),
-  ]
+  ],
 }

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;ECYM,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;;ADJnC;EACE;;;AAGF;AAAA;EAEE;ECEM,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;ADKjC;AAAA;EACE;ECFI,WAJ2B;EAI3B,aAJ2B;EAI3B,aAJ2B;;;ADWnC;AAAA;ECPQ,aAJ2B;EAI3B,gBAJ2B;;;ADgBnC;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))}