@massimo-cassandro/minimo 1.20.15 → 1.21.0

package/src/css/overflow.css

@@ -1,4 +1,8 @@
-.overflow-hidden {
-  overflow: hidden;
-}
+@layer base {
+
+  .overflow-hidden {
+    overflow: hidden;
+  }
 
+
+}

package/src/css/position.css

@@ -1,4 +1,8 @@
-/* .position-relative {
+@layer base {
+
+  /* .position-relative {
   position: relative;
 } */
 
+
+}

package/src/css/reset.css

@@ -3,57 +3,60 @@
   https://www.joshwcomeau.com/css/custom-css-reset/
 */
 /* 1. Use a more-intuitive box-sizing model */
-*, *::before, *::after {
-  box-sizing: border-box;
-}
+@layer reset {
 
-/* 2. Remove default margin */
-* {
-  margin: 0;
-}
+  *, *::before, *::after {
+    box-sizing: border-box;
+  }
 
-/* 3. Enable keyword animations */
-@media (prefers-reduced-motion: no-preference) {
-  html {
-    interpolate-size: allow-keywords;
+  /* 2. Remove default margin */
+  * {
+    margin: 0;
   }
-}
 
-body {
-  /* 4. Add accessible line-height */
-  line-height: 1.5;
-  /* 5. Improve text rendering */
-  -webkit-font-smoothing: antialiased;
-}
+  /* 3. Enable keyword animations */
+  @media (prefers-reduced-motion: no-preference) {
+    html {
+      interpolate-size: allow-keywords;
+    }
+  }
 
-/* 6. Improve media defaults */
-img, picture, video, canvas, svg {
-  display: block;
-  max-width: 100%;
-}
+  body {
+    /* 4. Add accessible line-height */
+    line-height: 1.5;
+    /* 5. Improve text rendering */
+    -webkit-font-smoothing: antialiased;
+  }
 
-/* 7. Inherit fonts for form controls */
-input, button, textarea, select {
-  font: inherit;
-}
+  /* 6. Improve media defaults */
+  img, picture, video, canvas, svg {
+    display: block;
+    max-width: 100%;
+  }
 
-/* 8. Avoid text overflows */
-p, h1, h2, h3, h4, h5, h6 {
-  overflow-wrap: break-word;
-}
+  /* 7. Inherit fonts for form controls */
+  input, button, textarea, select {
+    font: inherit;
+  }
 
-/* 9. Improve line wrapping */
-p {
-  text-wrap: pretty;
-}
-h1, h2, h3, h4, h5, h6 {
-  text-wrap: balance;
-}
+  /* 8. Avoid text overflows */
+  p, h1, h2, h3, h4, h5, h6 {
+    overflow-wrap: break-word;
+  }
 
-/*
-  10. Create a root stacking context
-*/
-/* stylelint-disable-next-line selector-id-pattern, selector-max-id */
-#root, #__next {
-  isolation: isolate;
+  /* 9. Improve line wrapping */
+  p {
+    text-wrap: pretty;
+  }
+  h1, h2, h3, h4, h5, h6 {
+    text-wrap: balance;
+  }
+
+  /*
+    10. Create a root stacking context
+  */
+  /* stylelint-disable-next-line selector-id-pattern, selector-max-id */
+  #root, #__next {
+    isolation: isolate;
+  }
 }

package/src/css/svg.css

@@ -1,3 +1,7 @@
-svg {
-  fill: currentColor;
+@layer base {
+
+  svg {
+    fill: currentColor;
+  }
+
 }

package/src/css/table.css

@@ -1,82 +1,84 @@
-/* wrapper per le tabelle per evitare che superino la larghezza dello spazio disponibile */
+@layer base {
 
-/* purgecss start ignore */
+  /* wrapper per le tabelle per evitare che superino la larghezza dello spazio disponibile */
 
-.table-responsive {
-  max-width: 100%;
-  overflow-x: auto;
-}
+  /* purgecss start ignore */
 
-/* TODO opzione per attivare/disattuvare alternate color */
-.table {
+  .table-responsive {
+    max-width: 100%;
+    overflow-x: auto;
+  }
 
-  --_alternate-row-bg: var(--table-body-tr-alt-bg-color);
-  --_hover-row-bg: var(--table-body-tr-hover-bg-color);
-  --_border-color: var(--table-border-color);
-  --_border: 1px solid var(--_border-color);
+  /* TODO opzione per attivare/disattuvare alternate color */
+  .table {
 
-  width: 100%;
-  margin: 1rem 0;
-  border-collapse: collapse;
+    --_alternate-row-bg: var(--table-body-tr-alt-bg-color);
+    --_hover-row-bg: var(--table-body-tr-hover-bg-color);
+    --_border-color: var(--table-border-color);
+    --_border: 1px solid var(--_border-color);
 
-  tr {
-    border-bottom: var(--_border);
-  }
+    width: 100%;
+    margin: 1rem 0;
+    border-collapse: collapse;
 
-  thead {
-    background-color: var(--table-thead-background-color);
-    tr:last-child {
-      border-width: var(--table-thead-border-width);
+    tr {
+      border-bottom: var(--_border);
     }
-  }
 
-  tfoot {
-    background-color: var(--table-tfoot-background-color);
-    tr:first-child {
-      border-block-start: var(--table-tfoot-border-width) solid var(--_border-color);
-    }
-    th, td {
-      font-weight: var(--table-tfoot-font-weight);
+    thead {
+      background-color: var(--table-thead-background-color);
+      tr:last-child {
+        border-width: var(--table-thead-border-width);
+      }
     }
-  }
 
-  tbody {
-    tr:nth-child(even) {
-      background-color: var(--_alternate-row-bg);
+    tfoot {
+      background-color: var(--table-tfoot-background-color);
+      tr:first-child {
+        border-block-start: var(--table-tfoot-border-width) solid var(--_border-color);
+      }
+      th, td {
+        font-weight: var(--table-tfoot-font-weight);
+      }
     }
 
-    @media (hover: hover) {
-      tr:hover {
-        background-color: var(--_hover-row-bg);
+    tbody {
+      tr:nth-child(even) {
+        background-color: var(--_alternate-row-bg);
+      }
+
+      @media (hover: hover) {
+        tr:hover {
+          background-color: var(--_hover-row-bg);
+        }
       }
     }
-  }
 
 
-  th, td {
-    padding: var(--table-cell-padding-block) var(--table-cell-padding-inline);
-    line-height: var(--table-cell-line-height);
-    vertical-align: top;
-    text-align: start;
+    th, td {
+      padding: var(--table-cell-padding-block) var(--table-cell-padding-inline);
+      line-height: var(--table-cell-line-height);
+      vertical-align: top;
+      text-align: start;
 
-    .valign-middle &, &.valign-middle {
-      vertical-align: middle;
+      .valign-middle &, &.valign-middle {
+        vertical-align: middle;
+      }
     }
-  }
 
-  &.table-bordered {
-    border: var(--_border);
+    &.table-bordered {
+      border: var(--_border);
 
-    th, td {
-      &:not(:first-child) {
-        border-inline-start: var(--_border);
+      th, td {
+        &:not(:first-child) {
+          border-inline-start: var(--_border);
+        }
       }
     }
-  }
 
-}
+  }
 
-/*
+  /*
 @media (prefers-color-scheme: dark) {
   .table {
     --_border-color: var(--_stone-8);
@@ -86,4 +88,6 @@
 }
 */
 
-/* purgecss end ignore */
+  /* purgecss end ignore */
+
+}

package/src/css/text.css

@@ -1,107 +1,111 @@
-/* stylelint-disable declaration-no-important */
-p {
-  margin: 0 0 var(--size-sm);
-}
+@layer base {
 
-strong, b {
-  font-weight: 700;
-}
-em, .italic {
-  font-style: italic;
-}
+  /* stylelint-disable declaration-no-important */
+  p {
+    margin: 0 0 var(--size-sm);
+  }
 
-.text-center {
-  text-align: center !important;
-}
-.text-right, .text-end {
-  text-align: end !important;
-}
-.text-nowrap {
-  white-space: nowrap;
-}
+  strong, b {
+    font-weight: 700;
+  }
+  em, .italic {
+    font-style: italic;
+  }
 
-.text-monospace {
-  font-family: var(--font-family-mono);
-}
-.text-truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
+  .text-center {
+    text-align: center !important;
+  }
+  .text-right, .text-end {
+    text-align: end !important;
+  }
+  .text-nowrap {
+    white-space: nowrap;
+  }
 
-/* .text-nowrap-dskt {
+  .text-monospace {
+    font-family: var(--font-family-mono);
+  }
+  .text-truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* .text-nowrap-dskt {
   @media (--media-large-viewport-up) {
     white-space: nowrap;
   }
 } */
 
-.font-italic {
-  font-style: italic;
-}
-.font-light {
-  font-weight: var(--font-weight-light);
-}
-.font-regular {
-  font-weight: var(--font-weight-regular);
-}
-.font-medium {
-  font-weight: var(--font-weight-medium);
-}
-.font-semibold {
-  font-weight: var(--font-weight-semibold);
-}
-.font-bold {
-  font-weight: var(--font-weight-bold);
-}
+  .font-italic {
+    font-style: italic;
+  }
+  .font-light {
+    font-weight: var(--font-weight-light);
+  }
+  .font-regular {
+    font-weight: var(--font-weight-regular);
+  }
+  .font-medium {
+    font-weight: var(--font-weight-medium);
+  }
+  .font-semibold {
+    font-weight: var(--font-weight-semibold);
+  }
+  .font-bold {
+    font-weight: var(--font-weight-bold);
+  }
 
-.text-xs {
-  font-size: var(--font-size-xs);
-}
-small, .small {
-  font-size: .9em;
-}
-.text-sm {
-  font-size: var(--font-size-sm);
-}
-.text-md {
-  font-size: var(--font-size-md);
-}
+  .text-xs {
+    font-size: var(--font-size-xs);
+  }
+  small, .small {
+    font-size: .9em;
+  }
+  .text-sm {
+    font-size: var(--font-size-sm);
+  }
+  .text-md {
+    font-size: var(--font-size-md);
+  }
 
-.text-muted {
-  color: var(--text-muted);
-}
+  .text-muted {
+    color: var(--text-muted);
+  }
 
-ul {
-  margin: 1rem 0;
-  list-style-type: disc;
-}
-li {
-  margin-left: 1.5rem;
-}
+  ul {
+    margin: 1rem 0;
+    list-style-type: disc;
+  }
+  li {
+    margin-left: 1.5rem;
+  }
 
-.text-primary {
-  color: var(--primary-100);
-}
-.text-secondary {
-  color: var(--secondary-100);
-}
-.text-accent {
-  color: var(--accent);
-}
-.text-danger {
-  color: var(--status-danger-color);
-}
-.text-warning {
-  color: var(--status-warning-color);
-}
-.text-info {
-  color: var(--status-info-color);
-}
-.text-success {
-  color: var(--status-success-color);
-}
+  .text-primary {
+    color: var(--primary-100);
+  }
+  .text-secondary {
+    color: var(--secondary-100);
+  }
+  .text-accent {
+    color: var(--accent);
+  }
+  .text-danger {
+    color: var(--status-danger-color);
+  }
+  .text-warning {
+    color: var(--status-warning-color);
+  }
+  .text-info {
+    color: var(--status-info-color);
+  }
+  .text-success {
+    color: var(--status-success-color);
+  }
+
+  .text-numeric {
+    font-feature-settings: 'lnum', 'tnum';
+    font-variant-numeric: lining-nums tabular-nums;
+  }
 
-.text-numeric {
-  font-feature-settings: 'lnum', 'tnum';
-  font-variant-numeric: lining-nums tabular-nums;
 }

package/src/css/visibility.css

@@ -1,25 +1,27 @@
-/* stylelint-disable declaration-no-important */
+@layer base {
 
-/* purgecss start ignore */
-.visually-hidden {
-  display: block;
-  width: 1px !important;
-  height: 1px !important;
-  padding: 0 !important;
-  margin: -1px !important;
-  overflow: hidden !important;
-  white-space: nowrap !important;
-  border: 0 !important;
-  clip-path: rect(0 0 0 0) !important;
-}
-.visibility-hidden {
-  visibility: hidden;
-}
-/* purgecss end ignore */
+  /* stylelint-disable declaration-no-important */
+
+  /* purgecss start ignore */
+  .visually-hidden {
+    display: block;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    white-space: nowrap !important;
+    border: 0 !important;
+    clip-path: rect(0 0 0 0) !important;
+  }
+  .visibility-hidden {
+    visibility: hidden;
+  }
+  /* purgecss end ignore */
 
 
-/*  TODO da rivedere  */
-/* @media (--media-xlarge-viewport-up) {
+  /*  TODO da rivedere  */
+  /* @media (--media-xlarge-viewport-up) {
   .xlg-visually-hidden {
     display: block;
     width: 1px !important;
@@ -48,3 +50,5 @@
 
  */
 
+
+}

package/src/custom-properties.css

@@ -219,11 +219,17 @@
   --line-height-sm: 1.4;
   --line-height-xs: 1.25;
 
-  --link-active-background-color: transparent;
-  --link-active-color: #51054c;
+  --link-active-background-color: var(--primary-100);
+  --link-active-color: var(--body-background-color);
   --link-color: #0d12ae;
-  --link-focus-outline-color: var(--link-color);
+  --link-focus-outline-color: color-mix(in srgb, var(--link-color) 60%, transparent);
+  --link-focus-outline-offset: 2px;
   --link-focus-outline-width: 2px;
+  --link-font-weight: var(--font-weight-semibold);
+  --link-hover-color: var(--link-color);
+  --link-hover-text-decoration: underline;
+  --link-hover-text-underline-offset: 2px;
+  --link-text-decoration: none;
   --link-visited-color: #ae0da3;
 
   --malert-backdrop: rgb(0 0 0 / .7);

package/src/minimo.css

@@ -1,3 +1,5 @@
+/* project e overrides sono destinati all'uso nel progetto che implementa minimo */
+@layer reset, base, components, utilities, project, overrides;
 
 /* @import '@src/fonts.css'; */
 /* @import '@src/css/custom-media.css'; */ /* managed by postcss */
@@ -24,7 +26,7 @@
 
 @import '@minimo/css/badge.css';
 @import '@minimo/css/text.css';
-@import '@minimo/css/anchors.css';
+@import '@minimo/css/links.css';
 @import '@minimo/css/headings.css';
 @import '@minimo/css/alerts.css';
 @import '@minimo/css/icons.css';