@maggioli-design-system/styles 15.11.1 → 16.0.0

package/dist/css/globals.css

@@ -1,10 +1,221 @@
+/*
+  Accessibility features
+  They are used by Magma web-components to adapt to user preferences
+  regarding theme, animation, contrast, and consumption.
+*/
+
+@property --magma-pref-theme {
+  inherits: false;
+  initial-value: light;
+  syntax: 'light | dark | system';
+}
+
+@property --magma-pref-theme-scheme {
+  inherits: false;
+  initial-value: light;
+  syntax: 'light | dark | all';
+}
+
+@property --magma-pref-theme-name {
+  inherits: false;
+  initial-value: 'magma';
+  syntax: '<string>';
+}
+
+@property --magma-pref-consumption {
+  inherits: false;
+  initial-value: high;
+  syntax: 'high | medium | low';
+}
+
+@property --magma-pref-animation {
+  inherits: false;
+  initial-value: no-preference;
+  syntax: 'reduce | no-preference | system';
+}
+
+@property --magma-pref-contrast {
+  inherits: false;
+  initial-value: no-preference;
+  syntax: 'more | no-preference | system';
+}
+
+/* Animations */
+
+@property --magma-backdrop-animation-duration {
+  inherits: false;
+  initial-value: 300ms;
+  syntax: '<time>';
+}
+
+@property --magma-outline-animation-duration {
+  inherits: false;
+  initial-value: 1.5s;
+  syntax: '<time>';
+}
+
+/* Opacity */
+
+@property --magma-backdrop-opacity {
+  inherits: true;
+  initial-value: 0.1;
+  syntax: '<number>';
+}
+
+@property --magma-disabled-opacity {
+  inherits: true;
+  initial-value: 0.5;
+  syntax: '<number>';
+}
+
+@property --magma-overlay-opacity {
+  inherits: true;
+  initial-value: 0.5;
+  syntax: '<number>';
+}
+
+/* Blur */
+
+@property --magma-backdrop-blur {
+  inherits: false;
+  initial-value: 4px;
+  syntax: '<length>';
+}
+
+@property --magma-outline-blur-offset {
+  inherits: false;
+  initial-value: 6px;
+  syntax: '<length>';
+}
+
+@property --magma-outline-focus-offset {
+  inherits: false;
+  initial-value: 2px;
+  syntax: '<length>';
+}
+
+/* Colors */
+
+@property --magma-backdrop-color {
+  inherits: true;
+  initial-value: 0 0 0;
+  syntax: '<integer>+';
+}
+
+@property --magma-outline-blur-color {
+  inherits: true;
+  initial-value: transparent;
+  syntax: '<color>';
+}
+
+@property --magma-outline-focus-color {
+  inherits: true;
+  initial-value: rgb(0 0 0);
+  syntax: '<color>';
+}
+
+@property --magma-overlay-color {
+  inherits: true;
+  initial-value: 0 0 0;
+  syntax: '<integer>+';
+}
+
+@property --magma-selection-background {
+  inherits: true;
+  initial-value: rgb(0 120 255);
+  syntax: '<color>';
+}
+
+@property --magma-selection-color {
+  inherits: true;
+  initial-value: rgb(255 255 255);
+  syntax: '<color>';
+}
+
+/*
+ * corner-shape
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/corner-shape
+ * also supports superellipse(-1.0 to 1.0) method
+ */
+
+@property --magma-corner-shape {
+  inherits: false;
+  initial-value: squircle;
+  syntax: 'bevel | notch | round | scoop | square | squircle';
+}
+
+/* z-index */
+
+@property --magma-header-z-index {
+  inherits: false;
+  initial-value: 1000;
+  syntax: '<integer>';
+}
+
+@property --magma-notification-z-index {
+  inherits: false;
+  initial-value: 2000;
+  syntax: '<integer>';
+}
+
+@property --magma-modal-z-index {
+  inherits: false;
+  initial-value: 3000;
+  syntax: '<integer>';
+}
+
+@property --magma-backdrop-z-index {
+  inherits: false;
+  initial-value: 4000;
+  syntax: '<integer>';
+}
+
+@property --magma-dropdown-z-index {
+  inherits: false;
+  initial-value: 5000;
+  syntax: '<integer>';
+}
+
+@property --magma-tooltip-z-index {
+  inherits: false;
+  initial-value: 6000;
+  syntax: '<integer>';
+}
+
+@property --magma-theme-overlay-z-index {
+  inherits: false;
+  initial-value: 7000;
+  syntax: '<integer>';
+}
+
+@property --magma-context-menu-z-index {
+  inherits: false;
+  initial-value: 8000;
+  syntax: '<integer>';
+}
+
+/* @view-transition
+ * https://developer.chrome.com/docs/web-platform/view-transitions/cross-document?hl=it
+ */
+
+@property --magma-view-transition-navigation {
+  inherits: false;
+  initial-value: auto;
+  syntax: 'auto | traverse | push | replace';
+}
+
 :root {
+  /*
+    For browser compatibility reasons we add defaults
+    to avoid issues with older browsers that do not support houdini @property
+    (can be removed once support is more widespread)
+  */
   --magma-backdrop-animation-duration: 300ms;
+  --magma-corner-shape: squircle;
   --magma-backdrop-blur: 4px;
   --magma-backdrop-color: 0 0 0;
   --magma-backdrop-opacity: 0.1;
   --magma-backdrop-z-index: 4000;
-  --magma-backdrop: rgb(var(--magma-backdrop-color) / var(--magma-backdrop-opacity));
   --magma-context-menu-z-index: 8000;
   --magma-disabled-opacity: 0.5;
   --magma-dropdown-z-index: 5000;
@@ -14,16 +225,20 @@
   --magma-outline-animation-duration: 1.5s;
   --magma-outline-blur-color: transparent;
   --magma-outline-blur-offset: 6px;
-  --magma-outline-blur: 2px solid var(--magma-outline-blur-color);
-  --magma-outline-focus-color: rgb(var(--tone-neutral-04, 0 0 0));
+  --magma-outline-focus-color: rgb(var(--tone-neutral-05, 0 0 0));
   --magma-outline-focus-offset: 2px;
-  --magma-outline-focus: 2px solid var(--magma-outline-focus-color);
-  --magma-overlay-blur: var(--magma-backdrop-blur);
-  --magma-overlay-color: var(--magma-backdrop-color);
   --magma-overlay-opacity: 0.5;
-  --magma-overlay: rgb(var(--magma-overlay-color) / var(--magma-overlay-opacity));
   --magma-selection-background: rgb(var(--label-sky-09));
   --magma-selection-color: rgb(var(--label-sky-01));
   --magma-theme-overlay-z-index: 7000;
   --magma-tooltip-z-index: 6000;
+  --magma-view-transition-navigation: auto;
+
+  /* Derived properties */
+  --magma-backdrop: rgb(var(--magma-backdrop-color) / var(--magma-backdrop-opacity));
+  --magma-outline-blur: 2px solid var(--magma-outline-blur-color);
+  --magma-outline-focus: 2px solid var(--magma-outline-focus-color);
+  --magma-overlay-blur: var(--magma-backdrop-blur);
+  --magma-overlay-color: var(--magma-backdrop-color);
+  --magma-overlay: rgb(var(--magma-overlay-color) / var(--magma-overlay-opacity));
 }

package/dist/css/hydrated.css

@@ -71,6 +71,8 @@ mds-pref-contrast:not(:is([hydrated], .hydrated)),
 mds-pref-language:not(:is([hydrated], .hydrated)),
 mds-pref-language-item:not(:is([hydrated], .hydrated)),
 mds-pref-theme:not(:is([hydrated], .hydrated)),
+mds-pref-theme-variant:not(:is([hydrated], .hydrated)),
+mds-pref-theme-variant-item:not(:is([hydrated], .hydrated)),
 mds-price-table:not(:is([hydrated], .hydrated)),
 mds-price-table-features:not(:is([hydrated], .hydrated)),
 mds-price-table-features-cell:not(:is([hydrated], .hydrated)),

package/dist/css/layer.css

@@ -0,0 +1 @@
+@layer reset, vendor, theme, base, components, utilities, overrides;

package/dist/css/reset.css

@@ -1,119 +1,127 @@
-html {
-  color-scheme: dark light;
-  hanging-punctuation: first last;
-  interpolate-size: allow-keywords;
-  transition-duration: 200ms;
-  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-}
-
-*,
-*::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;
-  -webkit-text-size-adjust: 100%;
-     -moz-text-size-adjust: 100%;
-          text-size-adjust: 100%;
-}
-
-input,
-textarea {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          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: 30ch;
-  text-wrap: balance;
-}
-
-p {
-  margin: 0;
-  max-width: 75ch;
-  text-wrap: pretty;
-}
-
-li,
-figcaption {
-  max-width: 75ch;
-  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) {
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+@layer properties;
+@layer reset {
+  :root {
+    @media (prefers-reduced-motion: no-preference) {
+      interpolate-size: allow-keywords;
+    }
+  }
+  html {
+    --tw-ease: var(--ease-out, cubic-bezier(0, 0, 0.2, 1));
+    transition-timing-function: var(--ease-out, cubic-bezier(0, 0, 0.2, 1));
+    hanging-punctuation: first last;
+    interpolate-size: allow-keywords;
+    scrollbar-gutter: stable;
+    transition-duration: 200ms;
+  }
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+    overflow-wrap: anywhere;
+  }
+  body,
   html {
-    scroll-behavior: smooth;
+    margin: 0;
+  }
+  body {
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    min-height: 100svh;
+    -webkit-tap-highlight-color: transparent;
+    text-rendering: optimizelegibility;
+    -webkit-text-size-adjust: 100%;
+       -moz-text-size-adjust: 100%;
+            text-size-adjust: 100%;
+  }
+  input,
+  textarea {
+    -webkit-appearance: none;
+       -moz-appearance: none;
+            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 {
+    max-width: var(--spacing-title, 30ch);
+    margin: 0;
+    text-wrap: balance;
   }
-
-  :has(:target) {
-    scroll-behavior: smooth;
+  p {
+    max-width: var(--spacing-text, 75ch);
+    margin: 0;
+    text-wrap: pretty;
+  }
+  li,
+  figcaption {
+    max-width: var(--spacing-text, 75ch);
+    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;
+    }
+  }
+}
+@property --tw-ease {
+  syntax: "*";
+  inherits: false;
+}
+@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-ease: initial;
+    }
   }
 }