@maggioli-design-system/styles 15.11.1 → 16.0.1

package/dist/tailwind/utilities.css

@@ -0,0 +1,97 @@
+@utility focus-bounce {
+  animation-duration: var(--magma-outline-animation-duration, 1s);
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+  animation-name: focus-bounce;
+  animation-play-state: paused;
+  animation-timing-function: var(--ease-out, cubic-bezier(0, 0, 0.2, 1));
+  outline: var(--magma-outline-blur, 2px solid var(--magma-outline-blur-color, rgb(0 0 0 / 0)));
+  transition-duration: 200ms;
+  transition-property:
+    background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;
+  transition-timing-function: ease-in-out;
+}
+
+@utility focus-bounce--focused {
+  --magma-outline-blur: var(--magma-outline-focus);
+
+  animation-play-state: running;
+}
+
+@utility text-box-uppercase {
+  min-height: auto;
+  text-box: trim-both cap alphabetic;
+}
+
+@utility text-box-vertical-margin {
+  min-height: auto;
+  text-box: trim-both text;
+}
+
+@utility text-box-vertical-align {
+  min-height: auto;
+  text-box: trim-both cap alphabetic;
+}
+
+@utility hide-scrollbar {
+  -webkit-overflow-scrolling: touch;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+@utility focus-bounce {
+  &:focus-visible {
+    --magma-outline-blur: var(--magma-outline-focus);
+
+    animation-play-state: running;
+  }
+}
+
+@utility not-hydrated {
+  animation-duration: 0s;
+  opacity: 0;
+  transition-delay: 0.1s;
+  transition-duration: 0s;
+  visibility: hidden;
+}
+
+@layer utilities {
+  /* .focus-bounce:focus-visible {
+    --magma-outline-blur: var(--magma-outline-focus);
+
+    animation-play-state: running;
+  } */
+
+  .focus-zoom {
+    @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;
+  }
+
+  .focus-zoom--focused,
+  .focus-zoom:focus-visible {
+    --magma-outline-blur-offset: var(--magma-outline-focus-offset);
+    --magma-outline-blur: var(--magma-outline-focus);
+  }
+
+  .focus-zoom--light.focus-zoom--focused,
+  .focus-zoom--light:focus-visible {
+    --magma-outline-blur: 2px solid rgb(var(--tone-neutral));
+  }
+
+  /* .not-hydrated {
+    animation-duration: 0s;
+    opacity: 0;
+    transition-delay: 0.1s;
+    transition-duration: 0s;
+    visibility: hidden;
+  } */
+}

package/dist/tailwind3/base.css

@@ -0,0 +1,51 @@
+body {
+  @apply font-info
+    text-info-detail;
+
+  background-color: rgb(var(--tone-neutral, theme('colors.tone-neutral')));
+  color: rgb(var(--tone-neutral-03, theme('colors.tone-neutral-03')));
+}
+
+:root.pref-contrast-high body {
+  color: rgb(var(--tone-neutral-01, theme('colors.tone-neutral-01')));
+}
+
+@media (prefers-contrast: more) {
+  :root.pref-contrast-system body {
+    color: rgb(var(--tone-neutral-01, theme('colors.tone-neutral-01')));
+  }
+}
+
+::selection {
+  background-color: var(--magma-selection-background, theme('colors.label-sky-09'));
+  color: var(--magma-selection-color, theme('colors.label-sky-01'));
+}
+
+button,
+optgroup,
+select {
+  @apply text-title-action;
+}
+
+b,
+strong {
+  @apply font-semibold
+    tracking-tight;
+}
+
+a {
+  color: rgb(var(--theme-default-02-primary-text, theme('colors.theme-default-02-primary-text')));
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  max-width: theme('spacing.title');
+}
+
+p {
+  max-width: theme('spacing.text');
+}

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,6 +1,6 @@
 {
   "name": "@maggioli-design-system/styles",
-  "version": "15.11.1",
+  "version": "16.0.1",
   "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": {
@@ -10,8 +10,11 @@
     "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/utility-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.2",
+    "@maggioli-design-system/design-tokens": "14.1.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 = {
       },
     },
   },
-}
+};