@maggioli-design-system/styles 15.11.0 → 16.0.0

package/dist/{tailwind → tailwind3}/components.css

@@ -10,7 +10,8 @@
     animation-timing-function: theme('transitionTimingFunction.out');
     outline: var(--magma-outline-blur);
     transition-duration: 200ms;
-    transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;
+    transition-property:
+      background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;
     transition-timing-function: ease-in-out;
   }
 
@@ -22,13 +23,13 @@
   }
 
   .focus-zoom {
-    @apply
-      duration-200
+    @apply duration-200
       ease-out;
 
     outline: var(--magma-outline-blur);
     outline-offset: var(--magma-outline-blur-offset);
-    transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;
+    transition-property:
+      background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;
   }
 
   .focus-zoom--focused,

package/dist/tailwind3/reset.css

@@ -0,0 +1,114 @@
+html {
+  hanging-punctuation: first last;
+  interpolate-size: allow-keywords;
+  transition-duration: theme('transitionDuration.200');
+  transition-timing-function: theme('transitionTimingFunction.out');
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  overflow-wrap: anywhere;
+}
+
+body,
+html {
+  margin: 0;
+}
+
+body {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  min-height: 100svh;
+  -webkit-tap-highlight-color: transparent;
+  text-rendering: optimizelegibility;
+  text-size-adjust: 100%;
+}
+
+input,
+textarea {
+  appearance: none;
+  font-family: inherit;
+}
+
+a {
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+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 {
+  margin: 0;
+  max-width: theme('spacing.title');
+  text-wrap: balance;
+}
+
+p {
+  margin: 0;
+  max-width: theme('spacing.text');
+  text-wrap: pretty;
+}
+
+li,
+figcaption {
+  max-width: theme('spacing.text');
+  text-wrap: pretty;
+}
+
+header,
+footer,
+section,
+article {
+  container-type: inline-size;
+}
+
+img,
+picture,
+svg,
+video {
+  display: block;
+  max-width: 100%;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  html {
+    scroll-behavior: smooth;
+  }
+
+  :has(:target) {
+    scroll-behavior: smooth;
+  }
+}

package/dist/tailwind3/typography.css

@@ -0,0 +1,140 @@
+@layer components {
+  .text-title-h1 {
+    @apply antialiased
+      font-black
+      font-title
+      min-h-1200
+      text-size-title-h1;
+  }
+
+  .text-title-h2 {
+    @apply antialiased
+      font-black
+      font-title
+      min-h-1000
+      text-size-title-h2;
+  }
+
+  .text-title-h3 {
+    @apply antialiased
+      font-black
+      font-title
+      min-h-900
+      text-size-title-h3;
+  }
+
+  .text-title-h4 {
+    @apply antialiased
+      font-bold
+      font-title
+      min-h-800
+      text-size-title-h4;
+  }
+
+  .text-title-h5 {
+    @apply antialiased
+      font-bold
+      font-title
+      min-h-700
+      text-size-title-h5;
+  }
+
+  .text-title-h6 {
+    @apply antialiased
+      font-bold
+      font-title
+      min-h-600
+      text-size-title-h6;
+  }
+
+  .text-title-action {
+    @apply antialiased
+      font-medium
+      font-title
+      min-h-600
+      text-size-title-action;
+  }
+
+  .text-info-paragraph {
+    @apply antialiased
+      font-info
+      min-h-800
+      text-size-info-paragraph;
+  }
+
+  .text-info-detail {
+    @apply antialiased
+      font-info
+      min-h-600
+      text-size-info-detail;
+  }
+
+  .text-info-caption {
+    @apply antialiased
+      font-info
+      min-h-500
+      text-size-info-caption;
+  }
+
+  .text-info-label {
+    @apply antialiased
+      font-bold
+      font-info
+      min-h-400
+      text-size-info-label
+      uppercase;
+  }
+
+  .text-info-option {
+    @apply antialiased
+      font-bold
+      font-info
+      min-h-250
+      text-size-info-option
+      uppercase;
+  }
+
+  .text-info-tip {
+    @apply antialiased
+      font-info
+      min-h-400
+      text-size-info-tip;
+  }
+
+  .text-read-paragraph {
+    @apply antialiased
+      font-light
+      font-read
+      min-h-800
+      text-size-read-paragraph;
+  }
+
+  .text-read-detail {
+    @apply antialiased
+      font-light
+      font-read
+      min-h-600
+      text-size-read-detail;
+  }
+
+  .text-read-caption {
+    @apply antialiased
+      font-read
+      min-h-500
+      text-size-read-caption;
+  }
+
+  .text-code-snippet {
+    @apply antialiased
+      font-code
+      min-h-600
+      text-size-code-snippet;
+  }
+
+  .text-code-hack {
+    @apply antialiased
+      font-code
+      min-h-500
+      text-size-code-hack;
+  }
+}

package/package.json

@@ -1,17 +1,20 @@
 {
   "name": "@maggioli-design-system/styles",
-  "version": "15.11.0",
+  "version": "16.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 copy && npm run hydrated && npm run tailwind.build",
-    "clean": "npx ts-node scripts/clean.ts",
-    "hydrated": "npx ts-node scripts/hydrated.ts",
-    "copy": "npx ts-node scripts/copy.ts",
+    "clean": "tsx scripts/clean.ts",
+    "hydrated": "tsx scripts/hydrated.ts",
+    "copy": "tsx scripts/copy.ts",
     "tailwind.base": "postcss ./postcss/base.css -o ./dist/css/base.css",
     "tailwind.reset": "postcss ./postcss/reset.css -o ./dist/css/reset.css",
-    "tailwind.build": "npm run tailwind.base && npm run tailwind.reset && npm run tailwind.typography",
-    "tailwind.typography": "postcss ./postcss/typography.css -o ./dist/css/typography.css"
+    "tailwind.layer": "postcss ./postcss/layer.css -o ./dist/css/layer.css",
+    "tailwind.build": "npm run tailwind.base && npm run tailwind.reset && npm run tailwind.layer && npm run tailwind.typography",
+    "tailwind.typography": "postcss ./postcss/typography.css -o ./dist/css/typography.css",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
   },
   "files": [
     "/postcss.config.js",
@@ -20,7 +23,8 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://gitlab.com/maggiolispa/ricerca-sviluppo-new-media/magma/design-system.git"
+    "url": "git+https://github.com/magma-design-system/magma.git",
+    "directory": "projects/styles"
   },
   "keywords": [
     "scss",
@@ -38,6 +42,11 @@
       "name": "Daniele Tardia",
       "email": "daniele.tardia@hibo.it",
       "role": "Senior Developer"
+    },
+    {
+      "name": "Nicola Tamburini",
+      "email": "nicola.tamburini@maggioli.it",
+      "role": "Software Engineer"
     }
   ],
   "license": "ISC",
@@ -46,14 +55,14 @@
     "@fontsource/merriweather": "5.1.0",
     "@fontsource/roboto": "5.1.0",
     "@fontsource/roboto-mono": "5.1.0",
-    "@maggioli-design-system/design-tokens": "13.7.1",
+    "@maggioli-design-system/design-tokens": "14.0.0",
     "normalize.css": "8.0.1"
   },
   "devDependencies": {
-    "autoprefixer": "10.4.20",
-    "postcss-cli": "11.0.0",
-    "postcss": "8.4.49",
-    "postcss-import": "16.1.0",
-    "tailwindcss": "3.4.17"
+    "autoprefixer": "10.4.27",
+    "postcss-cli": "11.0.1",
+    "postcss": "8.5.8",
+    "postcss-import": "16.1.1",
+    "tailwindcss": "4.2.2"
   }
 }

package/postcss.config.js

@@ -1,8 +1,3 @@
 module.exports = {
-  plugins: [
-    require('postcss-import'),
-    require('tailwindcss/nesting'),
-    require('tailwindcss'),
-    require('autoprefixer'),
-  ],
-}
+  plugins: [require('postcss-import'), require('@tailwindcss/postcss'), require('autoprefixer')],
+};

package/tailwind.config.js

@@ -1,9 +1,12 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 /** @type {import('tailwindcss').Config} */
 
-const { palette } = require('@maggioli-design-system/design-tokens')
-const { fontFamily } = require('@maggioli-design-system/design-tokens/dist/js/tailwind-font-family.js')
-const fontSizeMagma = require('@maggioli-design-system/design-tokens/dist/js/tailwind-font-size.js').fontSize
+const { palette } = require('@maggioli-design-system/design-tokens');
+const {
+  fontFamily,
+} = require('@maggioli-design-system/design-tokens/dist/js/tailwind-font-family.js');
+const fontSizeMagma =
+  require('@maggioli-design-system/design-tokens/dist/js/tailwind-font-size.js').fontSize;
 const {
   aspectRatio,
   border,
@@ -17,16 +20,14 @@ const {
   size,
   timingFunction,
   transitionProperty,
-} = require('@maggioli-design-system/design-tokens/dist/js/tailwind-props.js').properties
+} = require('@maggioli-design-system/design-tokens/dist/js/tailwind-props.js').properties;
 
-const { screens } = require('@maggioli-design-system/design-tokens/dist/js/tailwind-screens.js')
-const { leading } = require('@maggioli-design-system/design-tokens/dist/js/tailwind-leading.js')
+const { screens } = require('@maggioli-design-system/design-tokens/dist/js/tailwind-screens.js');
+const { leading } = require('@maggioli-design-system/design-tokens/dist/js/tailwind-leading.js');
 
 module.exports = {
   important: true,
-  content: [
-    './src/**/*.{js,jsx}',
-  ],
+  content: ['./src/**/*.{js,jsx}'],
   darkMode: [
     'variant',
     [
@@ -123,4 +124,4 @@ module.exports = {
       },
     },
   },
-}
+};

package/dist/css/colors-hex-brand-apk.css

@@ -1,281 +0,0 @@
-/*
-@magma-design-system/design-tokens v13.7.1
-Generated by Style Dictionary
-Do not edit directly
-Generated at Tue, 03 Jun 2025 08:08:38 GMT
-*/
-
-:root {
-  --brand-apksic-01: #091c2f;
-  --brand-apksic-02: #16426f;
-  --brand-apksic-03: #1a4e85;
-  --brand-apksic-04: #1f5d9e;
-  --brand-apksic-05: #2570bc;
-  --brand-apksic-06: #4991db;
-  --brand-apksic-07: #9dc4ec;
-  --brand-apksic-08: #c3dbf3;
-  --brand-apksic-09: #ddeaf8;
-  --brand-apksic-10: #eef5fc;
-  --brand-apksic: #236ab3;
-  --area-demographic-01: #151d06;
-  --area-demographic-02: #32460f;
-  --area-demographic-03: #3c5511;
-  --area-demographic-04: #476415;
-  --area-demographic-05: #557819;
-  --area-demographic-06: #6d9b20;
-  --area-demographic-07: #95d22b;
-  --area-demographic-08: #bfe57f;
-  --area-demographic-09: #daf0b4;
-  --area-demographic-10: #eff8df;
-  --area-demographic: #94d12b;
-  --area-accounting-01: #3d030b;
-  --area-accounting-02: #840817;
-  --area-accounting-03: #9c091c;
-  --area-accounting-04: #b80b20;
-  --area-accounting-05: #db0c27;
-  --area-accounting-06: #f55569;
-  --area-accounting-07: #faabb5;
-  --area-accounting-08: #fccdd3;
-  --area-accounting-09: #fde1e5;
-  --area-accounting-10: #fef3f5;
-  --area-accounting: #f43e55;
-  --area-general-affairs-01: #291701;
-  --area-general-affairs-02: #603703;
-  --area-general-affairs-03: #734103;
-  --area-general-affairs-04: #894d04;
-  --area-general-affairs-05: #a35c04;
-  --area-general-affairs-06: #d27705;
-  --area-general-affairs-07: #fbb156;
-  --area-general-affairs-08: #fcd19a;
-  --area-general-affairs-09: #fee5c8;
-  --area-general-affairs-10: #fef3e6;
-  --area-general-affairs: #f99519;
-  --area-tributes-01: #041e1f;
-  --area-tributes-02: #0b484a;
-  --area-tributes-03: #0d5657;
-  --area-tributes-04: #0f6668;
-  --area-tributes-05: #12797c;
-  --area-tributes-06: #179da0;
-  --area-tributes-07: #1fd4d8;
-  --area-tributes-08: #7ae9ec;
-  --area-tributes-09: #b4f3f4;
-  --area-tributes-10: #e2fafb;
-  --area-tributes: #29dce0;
-  --area-personnel-01: #250058;
-  --area-personnel-02: #4e00bb;
-  --area-personnel-03: #5b00dc;
-  --area-personnel-04: #6d05ff;
-  --area-personnel-05: #8b37ff;
-  --area-personnel-06: #aa6eff;
-  --area-personnel-07: #d2b2ff;
-  --area-personnel-08: #e4d0ff;
-  --area-personnel-09: #efe4ff;
-  --area-personnel-10: #f7f2ff;
-  --area-personnel: #ab6fff;
-  --area-technical-01: #1e1b00;
-  --area-technical-02: #474100;
-  --area-technical-03: #554e00;
-  --area-technical-04: #655d00;
-  --area-technical-05: #796f00;
-  --area-technical-06: #9c8f00;
-  --area-technical-07: #d2c200;
-  --area-technical-08: #eddb00;
-  --area-technical-09: #ffec04;
-  --area-technical-10: #fff8a4;
-  --area-technical: #ffec0a;
-  --area-personal-services-01: #390030;
-  --area-personal-services-02: #7b0067;
-  --area-personal-services-03: #920079;
-  --area-personal-services-04: #ab008f;
-  --area-personal-services-05: #ca00a8;
-  --area-personal-services-06: #ff19d8;
-  --area-personal-services-07: #ffa0ef;
-  --area-personal-services-08: #ffc6f5;
-  --area-personal-services-09: #ffdefa;
-  --area-personal-services-10: #fff0fd;
-  --area-personal-services: #ff4de1;
-}
-
-:root.pref-theme-dark {
-  --brand-apksic-01: #ddebf8;
-  --brand-apksic-02: #8cbae8;
-  --brand-apksic-03: #70a8e3;
-  --brand-apksic-04: #5095dd;
-  --brand-apksic-05: #2c7fd6;
-  --brand-apksic-06: #2061a3;
-  --brand-apksic-07: #133b63;
-  --brand-apksic-08: #0d2944;
-  --brand-apksic-09: #091c2f;
-  --brand-apksic-10: #050f1a;
-  --brand-apksic: #236ab3;
-  --area-demographic-01: #dcf0b9;
-  --area-demographic-02: #8dc729;
-  --area-demographic-03: #7fb425;
-  --area-demographic-04: #719f21;
-  --area-demographic-05: #61891c;
-  --area-demographic-06: #4a6815;
-  --area-demographic-07: #2d3f0d;
-  --area-demographic-08: #1f2c09;
-  --area-demographic-09: #161f06;
-  --area-demographic-10: #0c1103;
-  --area-demographic: #94d12b;
-  --area-accounting-01: #fde2e6;
-  --area-accounting-02: #f99ba7;
-  --area-accounting-03: #f87f8f;
-  --area-accounting-04: #f65d70;
-  --area-accounting-05: #f3243e;
-  --area-accounting-06: #bf0b22;
-  --area-accounting-07: #770715;
-  --area-accounting-08: #57050f;
-  --area-accounting-09: #3e040b;
-  --area-accounting-10: #250207;
-  --area-accounting: #f43e55;
-  --area-general-affairs-01: #fee5c6;
-  --area-general-affairs-02: #faa236;
-  --area-general-affairs-03: #f38a06;
-  --area-general-affairs-04: #d87a06;
-  --area-general-affairs-05: #bb6905;
-  --area-general-affairs-06: #8e5004;
-  --area-general-affairs-07: #563002;
-  --area-general-affairs-08: #3c2202;
-  --area-general-affairs-09: #2a1801;
-  --area-general-affairs-10: #170d01;
-  --area-general-affairs: #f99519;
-  --area-tributes-01: #b9f3f5;
-  --area-tributes-02: #1ec9cd;
-  --area-tributes-03: #1bb6ba;
-  --area-tributes-04: #18a1a5;
-  --area-tributes-05: #158b8e;
-  --area-tributes-06: #106a6c;
-  --area-tributes-07: #094041;
-  --area-tributes-08: #072d2e;
-  --area-tributes-09: #051f20;
-  --area-tributes-10: #031112;
-  --area-tributes: #29dce0;
-  --area-personnel-01: #efe4ff;
-  --area-personnel-02: #caa4ff;
-  --area-personnel-03: #bd8dff;
-  --area-personnel-04: #ae73ff;
-  --area-personnel-05: #9c54ff;
-  --area-personnel-06: #7512ff;
-  --area-personnel-07: #4600a8;
-  --area-personnel-08: #33007b;
-  --area-personnel-09: #250059;
-  --area-personnel-10: #180039;
-  --area-personnel: #ab6fff;
-  --area-technical-01: #ffec04;
-  --area-technical-02: #c7b800;
-  --area-technical-03: #b4a600;
-  --area-technical-04: #a09300;
-  --area-technical-05: #8a7f00;
-  --area-technical-06: #696000;
-  --area-technical-07: #3f3a00;
-  --area-technical-08: #2c2900;
-  --area-technical-09: #1e1c00;
-  --area-technical-10: #100f00;
-  --area-technical: #ffec0a;
-  --area-personal-services-01: #ffdffa;
-  --area-personal-services-02: #ff8dec;
-  --area-personal-services-03: #ff6ae6;
-  --area-personal-services-04: #ff30dc;
-  --area-personal-services-05: #e600c0;
-  --area-personal-services-06: #b10093;
-  --area-personal-services-07: #6f005c;
-  --area-personal-services-08: #510044;
-  --area-personal-services-09: #3b0031;
-  --area-personal-services-10: #24001e;
-  --area-personal-services: #ff4de1;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root.pref-theme-system {
-    --brand-apksic-01: #ddebf8;
-    --brand-apksic-02: #8cbae8;
-    --brand-apksic-03: #70a8e3;
-    --brand-apksic-04: #5095dd;
-    --brand-apksic-05: #2c7fd6;
-    --brand-apksic-06: #2061a3;
-    --brand-apksic-07: #133b63;
-    --brand-apksic-08: #0d2944;
-    --brand-apksic-09: #091c2f;
-    --brand-apksic-10: #050f1a;
-    --brand-apksic: #236ab3;
-    --area-demographic-01: #dcf0b9;
-    --area-demographic-02: #8dc729;
-    --area-demographic-03: #7fb425;
-    --area-demographic-04: #719f21;
-    --area-demographic-05: #61891c;
-    --area-demographic-06: #4a6815;
-    --area-demographic-07: #2d3f0d;
-    --area-demographic-08: #1f2c09;
-    --area-demographic-09: #161f06;
-    --area-demographic-10: #0c1103;
-    --area-demographic: #94d12b;
-    --area-accounting-01: #fde2e6;
-    --area-accounting-02: #f99ba7;
-    --area-accounting-03: #f87f8f;
-    --area-accounting-04: #f65d70;
-    --area-accounting-05: #f3243e;
-    --area-accounting-06: #bf0b22;
-    --area-accounting-07: #770715;
-    --area-accounting-08: #57050f;
-    --area-accounting-09: #3e040b;
-    --area-accounting-10: #250207;
-    --area-accounting: #f43e55;
-    --area-general-affairs-01: #fee5c6;
-    --area-general-affairs-02: #faa236;
-    --area-general-affairs-03: #f38a06;
-    --area-general-affairs-04: #d87a06;
-    --area-general-affairs-05: #bb6905;
-    --area-general-affairs-06: #8e5004;
-    --area-general-affairs-07: #563002;
-    --area-general-affairs-08: #3c2202;
-    --area-general-affairs-09: #2a1801;
-    --area-general-affairs-10: #170d01;
-    --area-general-affairs: #f99519;
-    --area-tributes-01: #b9f3f5;
-    --area-tributes-02: #1ec9cd;
-    --area-tributes-03: #1bb6ba;
-    --area-tributes-04: #18a1a5;
-    --area-tributes-05: #158b8e;
-    --area-tributes-06: #106a6c;
-    --area-tributes-07: #094041;
-    --area-tributes-08: #072d2e;
-    --area-tributes-09: #051f20;
-    --area-tributes-10: #031112;
-    --area-tributes: #29dce0;
-    --area-personnel-01: #efe4ff;
-    --area-personnel-02: #caa4ff;
-    --area-personnel-03: #bd8dff;
-    --area-personnel-04: #ae73ff;
-    --area-personnel-05: #9c54ff;
-    --area-personnel-06: #7512ff;
-    --area-personnel-07: #4600a8;
-    --area-personnel-08: #33007b;
-    --area-personnel-09: #250059;
-    --area-personnel-10: #180039;
-    --area-personnel: #ab6fff;
-    --area-technical-01: #ffec04;
-    --area-technical-02: #c7b800;
-    --area-technical-03: #b4a600;
-    --area-technical-04: #a09300;
-    --area-technical-05: #8a7f00;
-    --area-technical-06: #696000;
-    --area-technical-07: #3f3a00;
-    --area-technical-08: #2c2900;
-    --area-technical-09: #1e1c00;
-    --area-technical-10: #100f00;
-    --area-technical: #ffec0a;
-    --area-personal-services-01: #ffdffa;
-    --area-personal-services-02: #ff8dec;
-    --area-personal-services-03: #ff6ae6;
-    --area-personal-services-04: #ff30dc;
-    --area-personal-services-05: #e600c0;
-    --area-personal-services-06: #b10093;
-    --area-personal-services-07: #6f005c;
-    --area-personal-services-08: #510044;
-    --area-personal-services-09: #3b0031;
-    --area-personal-services-10: #24001e;
-    --area-personal-services: #ff4de1;
-  }
-}