@massimo-cassandro/minimo 1.16.1 → 1.17.0

package/src/css/margin-padding.css

@@ -1,102 +1,462 @@
-/* stylelint-disable declaration-no-important */
+/* stylelint-disable declaration-no-important, selector-class-pattern */
 
-/* TODO produzione utilities in automatico o con funzione css */
-/* TODO produrre anche un versione con il naming bootstrap per facilitare eventuali migrazioni */
+/* AUTO-GENERATED FILE — do not edit by hand.
+   Generated by `node scripts/build-margin-padding-css.mjs`.
+   Edit the `sizes` / `classes` / `media` maps there instead.
 
-.mbs-xxs {
-  margin-block-start: var(--size-xxs) !important;
+   Responsive variants live in `margin-padding-media.css`. */
+
+.m-0 {
+  margin: 0 !important;
+}
+.m-auto {
+  margin: auto !important;
+}
+.m-3xl {
+  margin: var(--size-3xl) !important;
+}
+.m-2xl {
+  margin: var(--size-2xl) !important;
+}
+.m {
+  margin: var(--size-base) !important;
+}
+.m-lg {
+  margin: var(--size-lg) !important;
+}
+.m-md {
+  margin: var(--size-md) !important;
+}
+.m-sm {
+  margin: var(--size-sm) !important;
+}
+.m-xl {
+  margin: var(--size-xl) !important;
+}
+.m-xs {
+  margin: var(--size-xs) !important;
+}
+.m-xxs {
+  margin: var(--size-xxs) !important;
+}
+
+.mb-0 {
+  margin-block: 0 !important;
+}
+.mb-auto {
+  margin-block: auto !important;
+}
+.mb-3xl {
+  margin-block: var(--size-3xl) !important;
+}
+.mb-2xl {
+  margin-block: var(--size-2xl) !important;
+}
+.mb {
+  margin-block: var(--size-base) !important;
 }
+.mb-lg {
+  margin-block: var(--size-lg) !important;
+}
+.mb-md {
+  margin-block: var(--size-md) !important;
+}
+.mb-sm {
+  margin-block: var(--size-sm) !important;
+}
+.mb-xl {
+  margin-block: var(--size-xl) !important;
+}
+.mb-xs {
+  margin-block: var(--size-xs) !important;
+}
+.mb-xxs {
+  margin-block: var(--size-xxs) !important;
+}
+
 .mbs-0 {
   margin-block-start: 0 !important;
 }
+.mbs-auto {
+  margin-block-start: auto !important;
+}
+.mbs-3xl {
+  margin-block-start: var(--size-3xl) !important;
+}
+.mbs-2xl {
+  margin-block-start: var(--size-2xl) !important;
+}
 .mbs {
   margin-block-start: var(--size-base) !important;
 }
 .mbs-lg {
   margin-block-start: var(--size-lg) !important;
 }
+.mbs-md {
+  margin-block-start: var(--size-md) !important;
+}
+.mbs-sm {
+  margin-block-start: var(--size-sm) !important;
+}
 .mbs-xl {
   margin-block-start: var(--size-xl) !important;
 }
-.mbs-auto {
-  margin-block-start: auto !important;
+.mbs-xs {
+  margin-block-start: var(--size-xs) !important;
+}
+.mbs-xxs {
+  margin-block-start: var(--size-xxs) !important;
 }
-/* @media (--media-large-viewport-up) {
-
-  .mt-dsk-lg {
-    margin-block-start: var(--size-lg);
-  }
-} */
 
 .mbe-0 {
   margin-block-end: 0 !important;
 }
+.mbe-auto {
+  margin-block-end: auto !important;
+}
+.mbe-3xl {
+  margin-block-end: var(--size-3xl) !important;
+}
+.mbe-2xl {
+  margin-block-end: var(--size-2xl) !important;
+}
 .mbe {
   margin-block-end: var(--size-base) !important;
 }
-.mbe-xs {
-  margin-block-end: var(--size-xs) !important;
-}
 .mbe-lg {
   margin-block-end: var(--size-lg) !important;
 }
+.mbe-md {
+  margin-block-end: var(--size-md) !important;
+}
+.mbe-sm {
+  margin-block-end: var(--size-sm) !important;
+}
 .mbe-xl {
   margin-block-end: var(--size-xl) !important;
 }
-/* @media (--media-large-viewport-up) {
-
-  .mb-dsk-lg {
-    margin-block-end: var(--size-lg);
-  }
-} */
+.mbe-xs {
+  margin-block-end: var(--size-xs) !important;
+}
+.mbe-xxs {
+  margin-block-end: var(--size-xxs) !important;
+}
 
-/* .grid-full-row {
-  grid-column: 1 / -1;
-} */
+.mi-0 {
+  margin-inline: 0 !important;
+}
+.mi-auto {
+  margin-inline: auto !important;
+}
+.mi-3xl {
+  margin-inline: var(--size-3xl) !important;
+}
+.mi-2xl {
+  margin-inline: var(--size-2xl) !important;
+}
+.mi {
+  margin-inline: var(--size-base) !important;
+}
+.mi-lg {
+  margin-inline: var(--size-lg) !important;
+}
+.mi-md {
+  margin-inline: var(--size-md) !important;
+}
+.mi-sm {
+  margin-inline: var(--size-sm) !important;
+}
+.mi-xl {
+  margin-inline: var(--size-xl) !important;
+}
+.mi-xs {
+  margin-inline: var(--size-xs) !important;
+}
+.mi-xxs {
+  margin-inline: var(--size-xxs) !important;
+}
 
-.mis {
-  margin-inline-start: var(--size-base) !important;
+.mis-0 {
+  margin-inline-start: 0 !important;
 }
 .mis-auto {
   margin-inline-start: auto !important;
 }
+.mis-3xl {
+  margin-inline-start: var(--size-3xl) !important;
+}
+.mis-2xl {
+  margin-inline-start: var(--size-2xl) !important;
+}
+.mis {
+  margin-inline-start: var(--size-base) !important;
+}
+.mis-lg {
+  margin-inline-start: var(--size-lg) !important;
+}
+.mis-md {
+  margin-inline-start: var(--size-md) !important;
+}
+.mis-sm {
+  margin-inline-start: var(--size-sm) !important;
+}
+.mis-xl {
+  margin-inline-start: var(--size-xl) !important;
+}
+.mis-xs {
+  margin-inline-start: var(--size-xs) !important;
+}
+.mis-xxs {
+  margin-inline-start: var(--size-xxs) !important;
+}
 
-.mie {
-  margin-inline-end: var(--size-base) !important;
+.mie-0 {
+  margin-inline-end: 0 !important;
 }
 .mie-auto {
   margin-inline-end: auto !important;
 }
+.mie-3xl {
+  margin-inline-end: var(--size-3xl) !important;
+}
+.mie-2xl {
+  margin-inline-end: var(--size-2xl) !important;
+}
+.mie {
+  margin-inline-end: var(--size-base) !important;
+}
+.mie-lg {
+  margin-inline-end: var(--size-lg) !important;
+}
+.mie-md {
+  margin-inline-end: var(--size-md) !important;
+}
+.mie-sm {
+  margin-inline-end: var(--size-sm) !important;
+}
+.mie-xl {
+  margin-inline-end: var(--size-xl) !important;
+}
 .mie-xs {
   margin-inline-end: var(--size-xs) !important;
 }
+.mie-xxs {
+  margin-inline-end: var(--size-xxs) !important;
+}
 
-.mi {
-  margin-inline: var(--size-base) !important;
+.p-0 {
+  padding: 0 !important;
 }
-.mi-0 {
-  margin-inline: 0 !important;
+.p-3xl {
+  padding: var(--size-3xl) !important;
+}
+.p-2xl {
+  padding: var(--size-2xl) !important;
+}
+.p {
+  padding: var(--size-base) !important;
+}
+.p-lg {
+  padding: var(--size-lg) !important;
+}
+.p-md {
+  padding: var(--size-md) !important;
+}
+.p-sm {
+  padding: var(--size-sm) !important;
+}
+.p-xl {
+  padding: var(--size-xl) !important;
+}
+.p-xs {
+  padding: var(--size-xs) !important;
+}
+.p-xxs {
+  padding: var(--size-xxs) !important;
 }
 
-.mb {
-  margin-block: var(--size-base) !important;
+.pb-0 {
+  padding-block: 0 !important;
 }
-.mb-0 {
-  margin-block: 0 !important;
+.pb-3xl {
+  padding-block: var(--size-3xl) !important;
+}
+.pb-2xl {
+  padding-block: var(--size-2xl) !important;
+}
+.pb {
+  padding-block: var(--size-base) !important;
+}
+.pb-lg {
+  padding-block: var(--size-lg) !important;
+}
+.pb-md {
+  padding-block: var(--size-md) !important;
+}
+.pb-sm {
+  padding-block: var(--size-sm) !important;
+}
+.pb-xl {
+  padding-block: var(--size-xl) !important;
+}
+.pb-xs {
+  padding-block: var(--size-xs) !important;
+}
+.pb-xxs {
+  padding-block: var(--size-xxs) !important;
 }
 
-.mi-lg {
-  margin-inline: var(--size-lg) !important;
+.pbs-0 {
+  padding-block-start: 0 !important;
+}
+.pbs-3xl {
+  padding-block-start: var(--size-3xl) !important;
+}
+.pbs-2xl {
+  padding-block-start: var(--size-2xl) !important;
+}
+.pbs {
+  padding-block-start: var(--size-base) !important;
+}
+.pbs-lg {
+  padding-block-start: var(--size-lg) !important;
+}
+.pbs-md {
+  padding-block-start: var(--size-md) !important;
+}
+.pbs-sm {
+  padding-block-start: var(--size-sm) !important;
+}
+.pbs-xl {
+  padding-block-start: var(--size-xl) !important;
+}
+.pbs-xs {
+  padding-block-start: var(--size-xs) !important;
+}
+.pbs-xxs {
+  padding-block-start: var(--size-xxs) !important;
 }
 
-.mb-lg {
-  margin-block: var(--size-lg) !important;
+.pbe-0 {
+  padding-block-end: 0 !important;
+}
+.pbe-3xl {
+  padding-block-end: var(--size-3xl) !important;
+}
+.pbe-2xl {
+  padding-block-end: var(--size-2xl) !important;
+}
+.pbe {
+  padding-block-end: var(--size-base) !important;
+}
+.pbe-lg {
+  padding-block-end: var(--size-lg) !important;
+}
+.pbe-md {
+  padding-block-end: var(--size-md) !important;
+}
+.pbe-sm {
+  padding-block-end: var(--size-sm) !important;
+}
+.pbe-xl {
+  padding-block-end: var(--size-xl) !important;
+}
+.pbe-xs {
+  padding-block-end: var(--size-xs) !important;
+}
+.pbe-xxs {
+  padding-block-end: var(--size-xxs) !important;
 }
 
-.mi-xl {
-  margin-inline: var(--size-xl) !important;
+.pi-0 {
+  padding-inline: 0 !important;
 }
-.mb-xl {
-  margin-block: var(--size-xl) !important;
+.pi-3xl {
+  padding-inline: var(--size-3xl) !important;
+}
+.pi-2xl {
+  padding-inline: var(--size-2xl) !important;
+}
+.pi {
+  padding-inline: var(--size-base) !important;
+}
+.pi-lg {
+  padding-inline: var(--size-lg) !important;
+}
+.pi-md {
+  padding-inline: var(--size-md) !important;
+}
+.pi-sm {
+  padding-inline: var(--size-sm) !important;
+}
+.pi-xl {
+  padding-inline: var(--size-xl) !important;
+}
+.pi-xs {
+  padding-inline: var(--size-xs) !important;
+}
+.pi-xxs {
+  padding-inline: var(--size-xxs) !important;
+}
+
+.pis-0 {
+  padding-inline-start: 0 !important;
+}
+.pis-3xl {
+  padding-inline-start: var(--size-3xl) !important;
+}
+.pis-2xl {
+  padding-inline-start: var(--size-2xl) !important;
+}
+.pis {
+  padding-inline-start: var(--size-base) !important;
+}
+.pis-lg {
+  padding-inline-start: var(--size-lg) !important;
+}
+.pis-md {
+  padding-inline-start: var(--size-md) !important;
+}
+.pis-sm {
+  padding-inline-start: var(--size-sm) !important;
+}
+.pis-xl {
+  padding-inline-start: var(--size-xl) !important;
+}
+.pis-xs {
+  padding-inline-start: var(--size-xs) !important;
+}
+.pis-xxs {
+  padding-inline-start: var(--size-xxs) !important;
 }
 
+.pie-0 {
+  padding-inline-end: 0 !important;
+}
+.pie-3xl {
+  padding-inline-end: var(--size-3xl) !important;
+}
+.pie-2xl {
+  padding-inline-end: var(--size-2xl) !important;
+}
+.pie {
+  padding-inline-end: var(--size-base) !important;
+}
+.pie-lg {
+  padding-inline-end: var(--size-lg) !important;
+}
+.pie-md {
+  padding-inline-end: var(--size-md) !important;
+}
+.pie-sm {
+  padding-inline-end: var(--size-sm) !important;
+}
+.pie-xl {
+  padding-inline-end: var(--size-xl) !important;
+}
+.pie-xs {
+  padding-inline-end: var(--size-xs) !important;
+}
+.pie-xxs {
+  padding-inline-end: var(--size-xxs) !important;
+}

package/src/custom-media.css

@@ -1,3 +1,15 @@
+/* TODO valutare rinomina dei breakpoint in nomi semantici (es. dsk/lap/tab/mob,
+   vedi scripts/build-margin-padding-css.mjs) per coerenza con la scala `sizes`,
+   che usa la stessa nomenclatura xs/sm/md/lg/xl e genera ambiguità nelle
+   utility responsive. Non banale: i tier attuali (xxlarge/xlarge/large/medium/
+   small, con varianti -only/-down) sono numerosi e in parte sovrapposti (es.
+   "large" = "small desktop") e non si riducono in modo pulito a poche
+   categorie semantiche; inoltre il nome è usato in molti file (grid.css,
+   display.css, visibility.css, text.css, sf-macro.css, json-table, oltre ai
+   file margin-padding-*-media.css) ed è parte di un template pensato per
+   essere personalizzato dall'utente: rinominarlo qui non aggiorna le copie
+   già in uso nei progetti che lo hanno importato. */
+
 /*
 90rem    : 1440px xxlarge (large desktop)
 80rem    : 1280px xlarge (desktop)

package/src/custom-properties.css

@@ -173,12 +173,14 @@
   --grid-cols: 3;
   --grid-min-col-width: 6rem;
   --headings-color: var(--text-color);
+  --headings-font-family: var(--font-family);
   --headings-font-weight: var(--font-weight-semibold);
   --headings-h1-font-size: var(--font-size-2xl);
   --headings-h1-font-weight: var(--headings-font-weight);
   --headings-h2-font-size: var(--font-size-xl);
   --headings-h3-font-size: var(--font-size-lg);
   --headings-h4-font-size: var(--font-size-md);
+  --headings-line-height: var(--line-height-xs);
   --headings-text-align: inherit;
   --layout-container-max-width: 80rem;
   --line-height-base: 1.5;
@@ -190,6 +192,27 @@
   --link-focus-outline-color: var(--link-color);
   --link-focus-outline-width: .125rem;
   --link-visited-color: #ae0da3;
+  --malert-backdrop: rgb(0 0 0 / .7);
+  --malert-background-color: #fff;
+  --malert-border-radius: var(--radius-xs);
+  --malert-box-shadow: 0 .025rem .25rem 0 color-mix(in srgb, var(--malert-box-shadow-color) 15%, transparent), -.01875rem .1875rem .20625rem -.03125rem color-mix(in srgb, var(--malert-box-shadow-color) 15%, transparent), -.03125rem .38125rem .4125rem -.05625rem color-mix(in srgb, var(--malert-box-shadow-color) 14%, transparent), -.05625rem .7rem .75625rem -.0875rem color-mix(in srgb, var(--malert-box-shadow-color) 14%, transparent), -.1rem 1.21875rem 1.31875rem -.11875rem color-mix(in srgb, var(--malert-box-shadow-color) 13%, transparent), -.16875rem 2.04375rem 2.2125rem -.14375rem color-mix(in srgb, var(--malert-box-shadow-color) 13%, transparent), -.26875rem 3.25rem 3.525rem -.175rem color-mix(in srgb, var(--malert-box-shadow-color) 12%, transparent);
+  --malert-box-shadow-color: #000;
+  --malert-confirm-bg: hsl(277deg 72% 45%);
+  --malert-confirm-fg: #fff;
+  --malert-error-bg: var(--status-danger-background-color);
+  --malert-error-fg: var(--status-danger-fg);
+  --malert-heading-font-family: var(--headings-font-family);
+  --malert-heading-font-size: var(--headings-h2-font-size);
+  --malert-heading-font-weight: var(--headings-font-weight);
+  --malert-heading-line-height: var(--headings-line-height);
+  --malert-info-bg: var(--status-info-background-color);
+  --malert-info-fg: var(--status-info-fg);
+  --malert-success-bg: var(--status-success-background-color);
+  --malert-success-fg: var(--status-success-fg);
+  --malert-text-font-family: var(--font-family);
+  --malert-text-font-size: var(--font-size-base);
+  --malert-warning-bg: var(--status-warning-background-color);
+  --malert-warning-fg: var(--status-warning-fg);
   --modal-popup-backdrop-color: rgb(0 0 0 / .6);
   --modal-popup-border-radius: var(--size-base);
   --modal-popup-btn-close-size: 1.6rem;
@@ -244,6 +267,7 @@
   --size-xl: 2rem;
   --size-xs: .5rem;
   --size-xxs: .25rem;
+  --slide-duration: 500ms;
   --snackbar-background-color: var(--secondary-100);
   --snackbar-border-radius: var(--radius-xs);
   --snackbar-btn-close-active-background-color: transparent;

package/src/minimo.css

@@ -37,6 +37,11 @@
 @import '@minimo/css/dimensions.css';
 @import '@minimo/css/display.css';
 @import '@minimo/css/margin-padding.css';
+/* @import '@minimo/css/margin-padding-media.css';  responsive verion */
+/* alternative boostrap naming
+@import '@minimo/css/margin-padding-bootstrap.css';
+@import '@minimo/css/margin-padding-bootsrap-media.css';
+*/
 @import '@minimo/css/overflow.css';
 @import '@minimo/css/position.css';
 @import '@minimo/css/visibility.css';

package/src/components/modal-alert/TODO modal-alert-demo/demo.css

@@ -1,63 +0,0 @@
-@import '../src/modal-alert.css';
-
-:root {
-  /* comment to use defaults */
-  --malert-success-color: #09544b;
-  --malert-success-color-fg: #fff;
-  --malert-info-color: #0e2467;
-  --malert-info-color-fg: #fff;
-  --malert-warning-color: hsl(56deg 100% 30%);
-  --malert-warning-color-fg: #fff;
-  --malert-error-color: #c00;
-  --malert-error-color-fg: #fff;
-  --malert-confirm-color: #940b7f;
-  --malert-confirm-color-fg: #fff;
-
-  /* --malert-marks-stroke-width: 6px; */
-  /* --malert-backdrop */
-  /* --malert-border-radius */
-  /* --malert-box-shadow */
-  /* --malert-heading-font-family */
-  /* --malert-heading-font-size */
-  /* --malert-heading-font-weigth */
-  /* --malert-heading-line-height */
-  /* --malert-body-font-family */
-}
-html {
-  font-family: sans-serif;
-}
-
-.demo-buttons .btn {
-  --malert-color: rgb(16, 89, 162);
-  --malert-color-fg: #fff;
-  margin: 1rem;
-}
-
-
-/* applied to body on dialog opening */
-.modal-alert-is-open {
-  overflow: hidden;
-}
-
-.text-success {
-  color: var(--malert-success-color);
-}
-
-/* `--malert-color` & `--malert-color-fg` are set by main css */
-
-.btn {
-  padding: .5rem 1rem;
-  color: var(--malert-color-fg);
-  cursor: pointer;
-  background-color: var(--malert-color);
-  border: 1px solid  var(--malert-color);
-  border-radius: 4px;
-}
-.btn-outline {
-  color: var(--malert-color);
-  background-color: var(--malert-color-fg);
-}
-.btn:focus {
-  outline: 1px solid var(--malert-color);
-  outline-offset: 3px;
-}