@maggioli-design-system/styles 15.11.0 → 16.0.0

package/README.md

@@ -2,7 +2,20 @@
 
 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`.
 
-# Installation
+---
+
+### Compatibility
+
+Use the version of this package matching the major version of [`@maggioli-design-system/magma`](https://www.npmjs.com/package/@maggioli-design-system/magma) you are using:
+
+| magma | design-tokens | styles |
+| :--- | :--- | :--- |
+| `1.x` (before Magma 2) | `13.x` (latest `13.7.2`) | `15.x` (latest `15.11.1`) |
+| `2.x` and later | `>= 14` | `>= 16` |
+
+---
+
+### Installation
 
 Install the component via `npm` by running the following command:
 
@@ -10,17 +23,55 @@ Install the component via `npm` by running the following command:
 npm i @maggioli-design-system/styles
 ```
 
-This package works also with yarn:
+---
 
-```bash
-yarn add @maggioli-design-system/styles
+### Integration
+
+The layer order is thinked to be used with tailwindcss, so the first layer is the reset, then the vendor, then the theme, then the base, then the components, and finally the utilities.
+
+```css
+@layer reset, vendor, theme, base, components, utilities, overrides;
+
+@import 'normalize.css' layer(reset);
+@import '@fontsource/karla/400.css' layer(vendor);
+@import '@fontsource/karla/700.css' layer(vendor);
+@import '@fontsource/merriweather/300.css' layer(vendor);
+@import '@fontsource/merriweather/400.css' layer(vendor);
+@import '@fontsource/merriweather/700.css' layer(vendor);
+@import '@fontsource/roboto-mono/400.css' layer(vendor);
+@import '@fontsource/roboto/500.css' layer(vendor);
+@import '@fontsource/roboto/700.css' layer(vendor);
+@import '@fontsource/roboto/900.css' layer(vendor);
+@import './iconsauce.css' layer(vendor);
+@import '@maggioli-design-system/styles/dist/css/reset.css' layer(reset);
+@import '@maggioli-design-system/styles/dist/css/globals.css' layer(theme);
+@import '@maggioli-design-system/styles/dist/css/colors-rgb.css' layer(theme);
+@import '@maggioli-design-system/styles/dist/css/hydrated.css' layer(base);
+@import '@maggioli-design-system/styles/dist/css/animations.css' layer(base);
+@import '@maggioli-design-system/styles/dist/css/base.css' layer(base);
+@import './tailwind.css';
+
+@layer overrides {
+  body {
+    @apply
+    bg-tone-neutral
+    text-tone-neutral-03
+      transition-colors
+      duration-300
+      ease-in-out;
+  }
+
+  mds-button {
+    border-radius: var(--radius-2xl);
+  }
+}
 ```
 
-# Integration
+### Imports
 
-### CSS
+```ts
 
-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
 

package/dist/css/animations.css

@@ -1,5 +1,7 @@
 @keyframes focus-bounce {
-  0%, 75%, 100% {
+  0%,
+  75%,
+  100% {
     outline-offset: var(--magma-outline-focus-offset, 6px);
   }
 

package/dist/css/base.css

@@ -1,72 +1,114 @@
-@tailwind components;
-body{
-
-  min-height: 1.5rem;
-
-  font-size: 1rem;
-
-  line-height: 1.5rem;
-
-  -webkit-font-smoothing: antialiased;
-
-  -moz-osx-font-smoothing: grayscale;
-
-  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-
-  color: rgb(var(--tone-neutral-03, rgb(var(--tone-neutral-03))));
-}
-:root.pref-contrast-high body {
-  color: rgb(var(--tone-neutral-01, rgb(var(--tone-neutral-01))));
-}
-@media (prefers-contrast: more) {
-  :root.pref-contrast-system body {
-    color: rgb(var(--tone-neutral-01, rgb(var(--tone-neutral-01))));
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+@layer properties;
+@layer base {
+  @view-transition {
+    navigation: var(--magma-view-transition-navigation, auto);
+  }
+  html {
+    transition-duration: 200ms;
+    transition-timing-function: var(--ease-out);
+  }
+  body {
+    min-height: auto;
+    text-box: trim-both text;
+    font-family: var(--font-info, Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+    font-size: var(--text-size-info-detail, 1rem);
+    line-height: var(--tw-leading, var(--text-size-info-detail--line-height, 1.5rem));
+    font-weight: var(--tw-font-weight, var(--text-size-info-detail--font-weight, 400));
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-family: var(--font-info, Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+    background-color: rgb(var(--tone-neutral));
+    color: rgb(var(--tone-neutral-03));
+  }
+  :root.pref-contrast-high body {
+    color: rgb(var(--tone-neutral-01));
+  }
+  @media (prefers-contrast: more) {
+    :root.pref-contrast-system body {
+      color: rgb(var(--tone-neutral-01));
+    }
+  }
+  :root.pref-theme-scheme-dark {
+    color-scheme: only dark;
+  }
+  :root.pref-theme-scheme-light {
+    color-scheme: only light;
+  }
+  :root.pref-theme-scheme-all {
+    color-scheme: light dark;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root.pref-theme-system {
+      color-scheme: dark;
+    }
+  }
+  :root.pref-theme-scheme-all.pref-theme-dark {
+    color-scheme: dark;
+  }
+  ::-moz-selection {
+    background-color: var(--magma-selection-background);
+    color: var(--magma-selection-color);
+  }
+  ::selection {
+    background-color: var(--magma-selection-background);
+    color: var(--magma-selection-color);
+  }
+  button,
+  optgroup,
+  select {
+    min-height: auto;
+    text-box: trim-both text;
+    font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+    font-size: var(--text-size-title-action, 0.875rem);
+    line-height: var(--tw-leading, var(--text-size-title-action--line-height, 1.5rem));
+    font-weight: var(--tw-font-weight, var(--text-size-title-action--font-weight, 500));
+    --tw-font-weight: var(--font-weight-medium, 500);
+    font-weight: var(--font-weight-medium, 500);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  b,
+  strong {
+    --tw-font-weight: var(--font-weight-semibold, 600);
+    font-weight: var(--font-weight-semibold, 600);
+    --tw-tracking: var(--tracking-tight, -0.025em);
+    letter-spacing: var(--tracking-tight, -0.025em);
+  }
+  a {
+    color: rgb(var(--theme-default-02-primary-text));
+  }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    max-width: var(--spacing-title, 30ch);
+  }
+  p {
+    max-width: var(--spacing-title, 30ch);
+  }
+  .hydrated {
+    border: revert-layer;
+    display: revert-layer;
+    margin: revert-layer;
+    padding: revert-layer;
   }
 }
-::-moz-selection {
-  background-color: var(--magma-selection-background, rgb(var(--label-sky-09)));
-  color: var(--magma-selection-color, rgb(var(--label-sky-01)));
-}
-::selection {
-  background-color: var(--magma-selection-background, rgb(var(--label-sky-09)));
-  color: var(--magma-selection-color, rgb(var(--label-sky-01)));
-}
-button,
-optgroup,
-select{
-
-  min-height: 1.5rem;
-
-  font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-
-  font-size: 0.875rem;
-
-  line-height: 1.5rem;
-
-  font-weight: 500;
-
-  -webkit-font-smoothing: antialiased;
-
-  -moz-osx-font-smoothing: grayscale;
-}
-b,
-strong{
-
-  font-weight: 600;
-
-  letter-spacing: -0.025em;
-}
-a {
-  color: rgb(var(--theme-default-02-primary-text, rgb(var(--theme-default-02-primary-text))));
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
 }
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  max-width: 30ch;
+@property --tw-tracking {
+  syntax: "*";
+  inherits: false;
 }
-p {
-  max-width: 75ch;
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-font-weight: initial;
+      --tw-tracking: initial;
+    }
+  }
 }

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

@@ -1,50 +1,52 @@
 /*
-@magma-design-system/design-tokens v13.7.1
+@magma-design-system/design-tokens v14.0.0
 Generated by Style Dictionary
 Do not edit directly
-Generated at Tue, 03 Jun 2025 08:08:38 GMT
+Generated at Mon, 08 Jun 2026 08:22:20 GMT
 */
 
 :root {
-  --brand-rnd-01: #1d1a18;
-  --brand-rnd-02: #4a3e2f;
-  --brand-rnd-03: #5b4a34;
-  --brand-rnd-04: #6e583a;
-  --brand-rnd-05: #87683f;
-  --brand-rnd-06: #b48546;
-  --brand-rnd-07: #d6bc98;
-  --brand-rnd-08: #e1d6c8;
-  --brand-rnd-09: #ebe7e3;
-  --brand-rnd-10: #f5f5f4;
-  --brand-rnd: #cba26b;
+  --hex-brand-rnd-01: #2a2520;
+  --hex-brand-rnd-02: #40362a;
+  --hex-brand-rnd-03: #5b4a34;
+  --hex-brand-rnd-04: #7e633d;
+  --hex-brand-rnd-05: #a37a44;
+  --hex-brand-rnd-06: #cba26c;
+  --hex-brand-rnd-07: #d6bc9a;
+  --hex-brand-rnd-08: #ded2c1;
+  --hex-brand-rnd-09: #ebe7e3;
+  --hex-brand-rnd-10: #f0eeec;
+  --hex-brand-rnd: #cba26b;
 }
 
-:root.pref-theme-dark {
-  --brand-rnd-01: #ece8e4;
-  --brand-rnd-02: #d2b084;
-  --brand-rnd-03: #c89d64;
-  --brand-rnd-04: #b98848;
-  --brand-rnd-05: #9d7643;
-  --brand-rnd-06: #735b3b;
-  --brand-rnd-07: #41382b;
-  --brand-rnd-08: #2c2721;
-  --brand-rnd-09: #1d1b18;
-  --brand-rnd-10: #11100f;
-  --brand-rnd: #cba26b;
+:root:not(.pref-theme-scheme-light).pref-theme-dark,
+:root.pref-theme-scheme-dark {
+  --hex-brand-rnd-01: #f6f6f5;
+  --hex-brand-rnd-02: #f0eeec;
+  --hex-brand-rnd-03: #e6e1d9;
+  --hex-brand-rnd-04: #ddcdb9;
+  --hex-brand-rnd-05: #d4b791;
+  --hex-brand-rnd-06: #bd8d4e;
+  --hex-brand-rnd-07: #9e7743;
+  --hex-brand-rnd-08: #7c613d;
+  --hex-brand-rnd-09: #534532;
+  --hex-brand-rnd-10: #453b2d;
+  --hex-brand-rnd: #cba26b;
 }
 
 @media (prefers-color-scheme: dark) {
-  :root.pref-theme-system {
-    --brand-rnd-01: #ece8e4;
-    --brand-rnd-02: #d2b084;
-    --brand-rnd-03: #c89d64;
-    --brand-rnd-04: #b98848;
-    --brand-rnd-05: #9d7643;
-    --brand-rnd-06: #735b3b;
-    --brand-rnd-07: #41382b;
-    --brand-rnd-08: #2c2721;
-    --brand-rnd-09: #1d1b18;
-    --brand-rnd-10: #11100f;
-    --brand-rnd: #cba26b;
+  :root:not(.pref-theme-scheme-light).pref-theme-system,
+  :root:not([data-magma-pref]) {
+    --hex-brand-rnd-01: #f6f6f5;
+    --hex-brand-rnd-02: #f0eeec;
+    --hex-brand-rnd-03: #e6e1d9;
+    --hex-brand-rnd-04: #ddcdb9;
+    --hex-brand-rnd-05: #d4b791;
+    --hex-brand-rnd-06: #bd8d4e;
+    --hex-brand-rnd-07: #9e7743;
+    --hex-brand-rnd-08: #7c613d;
+    --hex-brand-rnd-09: #534532;
+    --hex-brand-rnd-10: #453b2d;
+    --hex-brand-rnd: #cba26b;
   }
 }

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

@@ -1,83 +1,85 @@
 /*
-@magma-design-system/design-tokens v13.7.1
+@magma-design-system/design-tokens v14.0.0
 Generated by Style Dictionary
 Do not edit directly
-Generated at Tue, 03 Jun 2025 08:08:38 GMT
+Generated at Mon, 08 Jun 2026 08:22:20 GMT
 */
 
 :root {
-  --brand-maggioli-01: #0c1a36;
-  --brand-maggioli-02: #00379e;
-  --brand-maggioli-03: #0242b9;
-  --brand-maggioli-04: #0a50d4;
-  --brand-maggioli-05: #1f65e8;
-  --brand-maggioli-06: #638ddd;
-  --brand-maggioli-07: #b2c1dc;
-  --brand-maggioli-08: #d2d8e4;
-  --brand-maggioli-09: #e6e9ed;
-  --brand-maggioli-10: #f4f5f6;
-  --brand-maggioli: #00379e;
-  --brand-maggioli-editore-01: #151b28;
-  --brand-maggioli-editore-02: #133993;
-  --brand-maggioli-editore-03: #1042b7;
-  --brand-maggioli-editore-04: #104ddd;
-  --brand-maggioli-editore-05: #2b63e9;
-  --brand-maggioli-editore-06: #668be2;
-  --brand-maggioli-editore-07: #b2c0e0;
-  --brand-maggioli-editore-08: #d2d8e5;
-  --brand-maggioli-editore-09: #e6e8ed;
-  --brand-maggioli-editore-10: #f4f5f6;
-  --brand-maggioli-editore: #0f4ad5;
+  --hex-brand-maggioli-01: #092252;
+  --hex-brand-maggioli-02: #022e82;
+  --hex-brand-maggioli-03: #013fb4;
+  --hex-brand-maggioli-04: #125be3;
+  --hex-brand-maggioli-05: #4a7ee0;
+  --hex-brand-maggioli-06: #91aada;
+  --hex-brand-maggioli-07: #b2c0dc;
+  --hex-brand-maggioli-08: #ccd4e2;
+  --hex-brand-maggioli-09: #e6e8ec;
+  --hex-brand-maggioli-10: #edeef1;
+  --hex-brand-maggioli: #00379e;
+  --hex-brand-maggioli-editore-01: #182542;
+  --hex-brand-maggioli-editore-02: #173274;
+  --hex-brand-maggioli-editore-03: #1040b3;
+  --hex-brand-maggioli-editore-04: #1957eb;
+  --hex-brand-maggioli-editore-05: #517de4;
+  --hex-brand-maggioli-editore-06: #93a9df;
+  --hex-brand-maggioli-editore-07: #b3c0e0;
+  --hex-brand-maggioli-editore-08: #cdd3e4;
+  --hex-brand-maggioli-editore-09: #e6e8ed;
+  --hex-brand-maggioli-editore-10: #edeef1;
+  --hex-brand-maggioli-editore: #0f4ad5;
 }
 
-:root.pref-theme-dark {
-  --brand-maggioli-01: #e6e8ec;
-  --brand-maggioli-02: #a3b6db;
-  --brand-maggioli-03: #89a5da;
-  --brand-maggioli-04: #6a91dc;
-  --brand-maggioli-05: #447ae1;
-  --brand-maggioli-06: #0c54da;
-  --brand-maggioli-07: #01318c;
-  --brand-maggioli-08: #07255c;
-  --brand-maggioli-09: #0c1b37;
-  --brand-maggioli-10: #0b0e14;
-  --brand-maggioli: #00379e;
-  --brand-maggioli-editore-01: #e6e8ed;
-  --brand-maggioli-editore-02: #a4b5df;
-  --brand-maggioli-editore-03: #8aa4df;
-  --brand-maggioli-editore-04: #6d8fe1;
-  --brand-maggioli-editore-05: #4a78e5;
-  --brand-maggioli-editore-06: #1150e4;
-  --brand-maggioli-editore-07: #16347c;
-  --brand-maggioli-editore-08: #192748;
-  --brand-maggioli-editore-09: #151b28;
-  --brand-maggioli-editore-10: #0e1014;
-  --brand-maggioli-editore: #0f4ad5;
+:root:not(.pref-theme-scheme-light).pref-theme-dark,
+:root.pref-theme-scheme-dark {
+  --hex-brand-maggioli-01: #f6f6f7;
+  --hex-brand-maggioli-02: #edeef1;
+  --hex-brand-maggioli-03: #dee2e8;
+  --hex-brand-maggioli-04: #c8d0e1;
+  --hex-brand-maggioli-05: #acbcdc;
+  --hex-brand-maggioli-06: #7296db;
+  --hex-brand-maggioli-07: #447ae1;
+  --hex-brand-maggioli-08: #1058e0;
+  --hex-brand-maggioli-09: #003aa7;
+  --hex-brand-maggioli-10: #01318d;
+  --hex-brand-maggioli: #00379e;
+  --hex-brand-maggioli-editore-01: #f6f6f7;
+  --hex-brand-maggioli-editore-02: #edeef1;
+  --hex-brand-maggioli-editore-03: #dee2ea;
+  --hex-brand-maggioli-editore-04: #c8d0e3;
+  --hex-brand-maggioli-editore-05: #acbbdf;
+  --hex-brand-maggioli-editore-06: #7595e0;
+  --hex-brand-maggioli-editore-07: #4a78e5;
+  --hex-brand-maggioli-editore-08: #1454ec;
+  --hex-brand-maggioli-editore-09: #123ca1;
+  --hex-brand-maggioli-editore-10: #153581;
+  --hex-brand-maggioli-editore: #0f4ad5;
 }
 
 @media (prefers-color-scheme: dark) {
-  :root.pref-theme-system {
-    --brand-maggioli-01: #e6e8ec;
-    --brand-maggioli-02: #a3b6db;
-    --brand-maggioli-03: #89a5da;
-    --brand-maggioli-04: #6a91dc;
-    --brand-maggioli-05: #447ae1;
-    --brand-maggioli-06: #0c54da;
-    --brand-maggioli-07: #01318c;
-    --brand-maggioli-08: #07255c;
-    --brand-maggioli-09: #0c1b37;
-    --brand-maggioli-10: #0b0e14;
-    --brand-maggioli: #00379e;
-    --brand-maggioli-editore-01: #e6e8ed;
-    --brand-maggioli-editore-02: #a4b5df;
-    --brand-maggioli-editore-03: #8aa4df;
-    --brand-maggioli-editore-04: #6d8fe1;
-    --brand-maggioli-editore-05: #4a78e5;
-    --brand-maggioli-editore-06: #1150e4;
-    --brand-maggioli-editore-07: #16347c;
-    --brand-maggioli-editore-08: #192748;
-    --brand-maggioli-editore-09: #151b28;
-    --brand-maggioli-editore-10: #0e1014;
-    --brand-maggioli-editore: #0f4ad5;
+  :root:not(.pref-theme-scheme-light).pref-theme-system,
+  :root:not([data-magma-pref]) {
+    --hex-brand-maggioli-01: #f6f6f7;
+    --hex-brand-maggioli-02: #edeef1;
+    --hex-brand-maggioli-03: #dee2e8;
+    --hex-brand-maggioli-04: #c8d0e1;
+    --hex-brand-maggioli-05: #acbcdc;
+    --hex-brand-maggioli-06: #7296db;
+    --hex-brand-maggioli-07: #447ae1;
+    --hex-brand-maggioli-08: #1058e0;
+    --hex-brand-maggioli-09: #003aa7;
+    --hex-brand-maggioli-10: #01318d;
+    --hex-brand-maggioli: #00379e;
+    --hex-brand-maggioli-editore-01: #f6f6f7;
+    --hex-brand-maggioli-editore-02: #edeef1;
+    --hex-brand-maggioli-editore-03: #dee2ea;
+    --hex-brand-maggioli-editore-04: #c8d0e3;
+    --hex-brand-maggioli-editore-05: #acbbdf;
+    --hex-brand-maggioli-editore-06: #7595e0;
+    --hex-brand-maggioli-editore-07: #4a78e5;
+    --hex-brand-maggioli-editore-08: #1454ec;
+    --hex-brand-maggioli-editore-09: #123ca1;
+    --hex-brand-maggioli-editore-10: #153581;
+    --hex-brand-maggioli-editore: #0f4ad5;
   }
 }