@massimo-cassandro/minimo 0.1.0

package/src/css/spinners/spinner-trailing-dots.css

@@ -0,0 +1,51 @@
+/*
+https://projects.lukehaas.me/css-loaders/ (#6)
+
+<div class="spinner-wrapper"><div class="spinner">Loading...</div></div>
+*/
+
+.spinner {
+  position: relative;
+  width: 1em;
+  height: 1em;
+  /* margin: 2rem auto; */
+  overflow: hidden;
+  font-size: 3.5rem;
+  color: var(--text-color);
+  text-indent: -9999em;
+  border-radius: 50%;
+  transform: translateZ(0);
+  animation: loader 1.7s infinite ease, round 1.7s infinite ease;
+}
+
+@keyframes loader {
+  0% {
+    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
+  }
+  5%,
+  95% {
+    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
+  }
+  10%,
+  59% {
+    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
+  }
+  20% {
+    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
+  }
+  38% {
+    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
+  }
+  100% {
+    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
+  }
+}
+
+@keyframes round {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/src/css/spinners/spinner-wrapper.css

@@ -0,0 +1,20 @@
+.spinner-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: var(--z-index-overlay);
+  display: grid;
+  place-content: center;
+  pointer-events: none;
+  background-color: var(--spinner-overlay-color);
+}
+
+.spinner-wrapper {
+  position: absolute;
+  top: 1rem;
+  left: 50%;
+  display: grid;
+  place-content: center;
+  width: 4rem;
+  aspect-ratio: 1;
+  translate: -50%;
+}

package/src/css/svg.css

@@ -0,0 +1,3 @@
+svg {
+  fill: currentColor;
+}

package/src/css/table.css

@@ -0,0 +1,66 @@
+/* wrapper per le tabelle per evitare che superino la largheza dello spazio disponibile */
+.table-responsive {
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+.table {
+
+  --alternate-row-bg: color-mix(in srgb, var(--stone-3) 40%, transparent);
+  --hover-row-bg: color-mix(in srgb, var(--blue-3) 20%, transparent);
+  --border-color: var(--stone-5);
+  --border: 1px solid var(--border-color);
+
+  width: 100%;
+  margin: 1rem 0;
+  border-collapse: collapse;
+
+  tr {
+    border-bottom: var(--border);
+  }
+  thead {
+    tr:last-child {
+      border-width: 3px;
+    }
+  }
+
+  tbody {
+    tr:nth-child(even) {
+      background-color: var(--alternate-row-bg);
+    }
+
+    @media (--mouse) {
+      tr:hover {
+        background-color: var(--hover-row-bg);
+      }
+    }
+  }
+
+
+  th, td {
+    padding: .3rem .6rem;
+    line-height: 1.3;
+    text-align: start;
+    vertical-align: top;
+  }
+
+  &.table-bordered {
+    border: var(--border);
+
+    th, td {
+      &:not(:first-child) {
+        border-inline-start: var(--border);
+      }
+    }
+  }
+
+}
+
+
+@media (prefers-color-scheme: dark) {
+  .table {
+    --alternate-row-bg: color-mix(in srgb, var(--stone-12) 60%, transparent);
+    --hover-row-bg: color-mix(in srgb, var(--blue-12) 60%, transparent);
+    --border-color: var(--stone-8);
+  }
+}

package/src/css/text.css

@@ -0,0 +1,114 @@
+/* stylelint-disable declaration-no-important */
+p {
+  margin: 0 0 var(--spacing-sm);
+}
+
+a:link, .btn-link {
+  /* TODO rivedere, forse più complicato del necessario */
+  &:not(.btn) {
+    font-weight: var(--font-weight-semibold);
+    color: var(--link-color);
+    text-decoration: none;
+  }
+}
+
+a {
+  &:visited {
+    color: var(--link-visited-color);
+  }
+}
+
+a, .btn-link {
+  &:focus, &:focus-visible {
+    outline: 1px solid color-mix(in srgb, var(--link-color) 60%, transparent);
+    outline-offset: 2px;
+  }
+  &:hover {
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+  &:active {
+    color: var(--body-bg-color);
+    background-color: var(--link-color);
+    outline: 2px solid var(--link-color);
+    offset: 0;
+  }
+}
+
+
+
+strong, b {
+  font-weight: 700;
+}
+em, .italic {
+  font-style: italic;
+}
+
+.text-center {
+  text-align: center !important;
+}
+.text-right, .text-end {
+  text-align: end !important;
+}
+.text-nowrap {
+  white-space: nowrap;
+}
+
+.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-bold {
+  font-weight: var(--font-weight-bold);
+}
+.font-semibold {
+  font-weight: var(--font-weight-semibold);
+}
+.text-xs {
+  font-size: var(--font-size-xs);
+}
+small, .small, .text-sm {
+  font-size: var(--font-size-sm);
+}
+.text-md {
+  font-size: var(--font-size-md);
+}
+
+.text-muted {
+  color: var(--text-muted-color);
+}
+
+ul {
+  margin: 1rem 0;
+  list-style-type: disc;
+}
+li {
+  margin-left: 1.5rem;
+}
+
+.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);
+}

package/src/css/utilities.css

@@ -0,0 +1,128 @@
+/* da bootstrap */
+/* stylelint-disable declaration-no-important */
+
+.visually-hidden {
+  display: block;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+@media (--desktop-up) {
+  .desktop-visually-hidden {
+    display: block;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    clip: rect(0, 0, 0, 0) !important;
+    white-space: nowrap !important;
+    border: 0 !important;
+  }
+}
+
+@media (--desktop-down) {
+  .small-screen-hidden {
+    display: none !important;
+  }
+}
+
+
+@media print {
+  .d-print-none {
+    display: none;
+  }
+}
+
+.d-none {
+  display: none !important;
+}
+/* .position-relative {
+  position: relative;
+} */
+
+/* .mobile-hidden {
+  @media (--media-large-viewport-down) {
+    display: none;
+  }
+} */
+
+/* .w-100 {
+  width: 100% !important;
+} */
+/* .w-auto {
+  width: auto !important;
+} */
+
+/* .mt-xxs {
+  margin-block-start: var(--spacing-xxs);
+} */
+.mt {
+  margin-block-start: var(--spacing-base);
+}
+.mt-lg {
+  margin-block-start: var(--spacing-lg);
+}
+.mt-xl {
+  margin-block-start: var(--spacing-xl);
+}
+.mt-auto {
+  margin-block-start: auto;
+}
+/* @media (--media-large-viewport-up) {
+
+  .mt-dsk-lg {
+    margin-block-start: var(--spacing-lg);
+  }
+} */
+
+.mb-0 {
+  margin-block-end: 0;
+}
+.mb {
+  margin-block-end: var(--spacing-base);
+}
+.mb-lg {
+  margin-block-end: var(--spacing-lg);
+}
+/* .mb-xl {
+  margin-block-end: var(--spacing-xl);
+} */
+/* @media (--media-large-viewport-up) {
+
+  .mb-dsk-lg {
+    margin-block-end: var(--spacing-lg);
+  }
+} */
+
+/* .grid-full-row {
+  grid-column: 1 / -1;
+} */
+
+.me {
+  margin-inline-end: var(--spacing-base);
+}
+.me-xs {
+  margin-inline-end: var(--spacing-xs);
+}
+
+.mx-lg {
+  margin-inline: var(--spacing-lg);
+}
+
+.mx-xl {
+  margin-inline: var(--spacing-xl);
+}
+.my-xl {
+  margin-block: var(--spacing-xl);
+}

package/src/custom-media-default.css

@@ -0,0 +1,16 @@
+/*
+90rem    : 1440px
+64rem    : 1024px
+47.5rem  : 760px
+*/
+
+@custom-media --media-xlarge-viewport-up (width > 90rem);
+@custom-media --media-large-viewport-up (width > 64rem);
+@custom-media --media-medium-viewport-up (width > 47.5rem);
+
+@custom-media --media-large-viewport-only (64rem < width <= 90rem);
+@custom-media --media-medium-viewport-only (47.5rem < width <= 64rem);
+@custom-media --media-small-viewport-only (width <= 47.5rem);
+
+@custom-media --media-xlarge-viewport-down (max-width: 90rem);
+@custom-media --media-large-viewport-down (max-width: 64rem);

package/src/custom-properties-default.css

@@ -0,0 +1,273 @@
+/* TODO switch to jit */
+/* TODO ricontrollare i colori, se possibile sganciarli da openprops nel defaults */
+/* vedi https://postcss.org/docs/writing-a-postcss-plugin */
+/* https://github.com/GoogleChromeLabs/postcss-jit-props */
+:root {
+  color-scheme: light dark;
+
+  /* figma */
+  --body-bg-color: var(--stone-0);
+  --text-color: #000;
+  --footer-bg: #282c35;
+  --footer-fg: #fff;
+  --footer-link: var(--yellow-5);
+  --link-color: var(--primary);
+  --primary: #203c6e;
+  --secondary: #a3384e;
+  --secondary-fg: var(--body-bg-color);
+  --radius: 0.38rem;
+  /* end figma */
+
+  /* project */
+  /* end project */
+
+  --container-max-width: 90rem;
+
+  --font-family: 'Rubik Variable', sans-serif;
+  --font-family-mono: 'Monaspace Neon Var', 'Monaspace Neon', 'Aptos Mono', 'Roboto Mono', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Andale Mono', 'Courier New', monospace;
+
+  --font-weight-light: 300;
+  --font-weight-regular: 400;
+  --font-weight-semibold: 550;
+  --font-weight-bold: 650;
+  --font-weight-extra-bold: 800;
+
+  --flex-grid-gap: 1.5rem;
+
+  --gray-light: var(--gray-5);
+  --gray-medium: var(--gray-6);
+  --gray-dark: var(--gray-8);
+
+
+  /* TODO rifare come modular scale */
+  /* Fluid Type Scale Calculator - Generate font size variables for a fluid type scale <https://www.fluid-type-scale.com/> */
+  /* Creating a Fluid Type Scale with CSS Clamp | Aleksandr Hovhannisyan <https://www.aleksandrhovhannisyan.com/blog/fluid-type-scale-with-css-clamp/> */
+
+  /* vedi anche */
+  /* Modular scale: Every Layout <https://every-layout.dev/rudiments/modular-scale/> */
+  /* Consistent, Fluidly Scaling Type and Spacing | CSS-Tricks <https://css-tricks.com/consistent-fluidly-scaling-type-and-spacing/> */
+  /* Modularscale <https://www.modularscale.com/> */
+  /* Proportio.app <https://proportio.app/> */
+  /* Grid lover (vertcal Rythm) <https://gridlover.net/try>   */
+  /* Fluid Grid Calculator <https://utopia.fyi/grid/calculator/> */
+  /* Fluid Space Calculator <https://utopia.fyi/space/calculator> */
+  /* Modern fluid typography editor <https://modern-fluid-typography.vercel.app/> */
+  /* Fluid type scale calculator | Utopia <https://utopia.fyi/type/calculator/> */
+
+
+
+  /*
+
+  @support ...
+  @function --negate(--value) {
+    result: calc(var(--value) * -1);
+  }
+
+  div {
+  --gap: 1em;
+  margin-top: --negate(var(--gap));
+  }
+  */
+
+  /*
+  https://clamp.font-size.app/?config=eyJyb290IjoiMTYiLCJtaW5XaWR0aCI6IjY0cmVtIiwibWF4V2lkdGgiOiI5MHJlbSIsIm1pbkZvbnRTaXplIjoiMS4wNXJlbSIsIm1heEZvbnRTaXplIjoiMS4zcmVtIn0%3D
+  */
+  --font-size-xxs: clamp(.6rem, .3538rem + .3846vw, .7rem);
+  --font-size-xs: clamp(.7rem, .4538rem + .3846vw, .8rem);
+  --font-size-sm: clamp(.8rem, .5538rem + .3846vw, .9rem);
+  --font-size-base: clamp(.9rem, .6538rem + .3846vw, 1rem);
+  --font-size-lead: clamp(1rem, 0.6923rem + 0.4808vw, 1.125rem);
+  --font-size-md: clamp(1.05rem, .6808rem + .5769vw, 1.2rem);
+  --font-size-lg: clamp(1.2rem, .7077rem + .7692vw, 1.4rem);
+  --font-size-xl: clamp(1.6rem, 1.1077rem + .7692vw, 1.8rem);
+  --font-size-2xl: clamp(2rem, .7692rem + 1.9231vw, 2.5rem);
+  --font-size-3xl: clamp(2.2rem, .2308rem + 3.0769vw, 3rem);
+
+  /* Rhythm in Web Typography | Better Web Type <https://betterwebtype.com/articles/2018/10/15/rhythm-in-web-typography/> */
+  /* The good line-height <https://www.thegoodlineheight.com/> */
+  --line-height-base: 1.5;
+
+  --headings-text-align: start;
+  --text-muted-color: var(--stone-7);
+  --text-dim-color: var(--gray-8);
+  --link-visited-color: var(--camo-9);
+  --link-active-color: var(--sand-3);
+  --link-active-bg-color: var(--sand-3);
+
+  --form-group-padding-block: 0 var(--spacing-base);
+  --form-text-color: var(--text-color);
+  --form-bg-color: var(--gray-0);
+  --form-input-group-bg-color: var(--gray-1);
+  --form-border-color: var(--gray-6);
+  --form-disabled-bg-color: var(--gray-2);
+  --form-placeholder-color: var(--stone-8);
+  --form-required-flag-color: var(--red-8);
+  --form-required-flag-content: '\002A';
+  --form-fieldset-border-width: 1px;
+  --form-legend-bg-color: var(--stone-3);
+  --form-legend-color: #333; /*  var(--text-color); */
+
+  --form-btns-border-radius: var(--radius-sm);
+  --form-btns-padding-y: var(--spacing-xxs);
+  --form-btns-padding-x: var(--spacing-xs);
+  --form-btns-font-size: clamp(.85rem, 6vw, 1rem);
+  --form-btns-sm-font-size: clamp(.75rem, 6vw, .9rem);
+  --form-btns-sm-padding-x: .8rem;
+  --form-btns-sm-padding-y: .1rem;
+  --form-btns-focus-color: hsl(205 69% 45% / .508);
+  --form-btns-outline-width: 3px;
+
+  --btn-primary-bg-color: linear-gradient(45deg, var(--green-9), var(--green-10));
+  --btn-primary-fg-color: var(--gray-0);
+  --btn-primary-border-color: var(--green-10);
+  --btn-primary-hover-bg-color: var(--green-11);
+  --btn-primary-hover-fg-color: var(--btn-primary-fg-color);
+  --btn-primary-hover-border-color: var(--btn-primary-border-color);
+  --btn-primary-active-bg-color: var(--green-12);
+  --btn-primary-active-fg-color: var(--btn-primary-fg-color);
+  --btn-primary-active-border-color: var(--btn-primary-active-bg-color);
+  --btn-primary-focus-outline-color: color-mix(in srgb, var(--btn-primary-border-color) 25%, transparent);
+
+  --btn-secondary-bg-color: var(--secondary);
+  --btn-secondary-fg-color: var(--secondary-fg);
+  --btn-secondary-border-color: var(--secondary);
+  --btn-secondary-hover-bg-color: color-mix(in srgb, var(--btn-secondary-bg-color) 70%, #000);
+  --btn-secondary-hover-fg-color: var(--btn-secondary-fg-color);
+  --btn-secondary-hover-border-color: var(--btn-secondary-hover-bg-color);
+  --btn-secondary-active-bg-color: var(--btn-secondary-hover-fg-color);
+  --btn-secondary-active-fg-color: var(--btn-secondary-hover-bg-color);
+  --btn-secondary-active-border-color: var(--btn-secondary-active-bg-color);
+  --btn-secondary-focus-outline-color: color-mix(in srgb, var(--btn-secondary-border-color) 50%, transparent);
+
+  /*
+  --btn-o-primary-bg-color: var(--primary-150);
+  --btn-o-primary-fg-color: var(--primary-10);
+  --btn-o-primary-border-color: var(--btn-bg-color);
+  --btn-o-primary-hover-bg-color: var(--primary-10);
+  --btn-o-primary-hover-fg-color: var(--primary-150);
+  --btn-o-primary-hover-border-color: var(--btn-fg-color);
+  --btn-o-primary-active-bg-color: var(--primary-150);
+  --btn-o-primary-active-fg-color: var(--primary-10);
+  --btn-o-primary-active-border-color: var(--btn-bg-color);
+  --btn-o-primary-focus-outline-color: var(--btn-bg-color);
+  */
+
+  --btn-o-secondary-bg-color: color-mix(in srgb, var(--secondary) 5%, transparent);
+  --btn-o-secondary-fg-color: var(--secondary);
+  --btn-o-secondary-border-color: var(--secondary);
+  --btn-o-secondary-hover-bg-color: color-mix(in srgb, var(--secondary) 15%, #fff);
+  --btn-o-secondary-hover-fg-color: var(--secondary);
+  --btn-o-secondary-hover-border-color: var(--btn-o-secondary-border-color);
+  --btn-o-secondary-active-bg-color: var(--secondary);
+  --btn-o-secondary-active-fg-color: var(--secondary-fg);
+  --btn-o-secondary-active-border-color: var(--btn-o-secondary-border-color);
+  --btn-o-secondary-focus-outline-color: color-mix(in srgb, var(--secondary) 50%, #fff);
+
+  --spacing-xxs: .25rem;
+  --spacing-xs: .5rem;
+  --spacing-sm: .75rem;
+  --spacing-base: 1rem;
+  --spacing-md: 1.2rem;
+  --spacing-lg: 1.5rem;
+  --spacing-xl: 2rem;
+  --spacing-2xl: 3rem;
+  --spacing-3xl: 4rem;
+
+
+  --radius-xxs: var(--spacing-xxs);
+  --radius-xs: var(--spacing-xs);
+  --radius-base: var(--spacing-base);
+  --radius-md: var(--spacing-md);
+  --radius-pill: 999rem;
+
+  --spinner-color: var(--text-color);
+  --spinner-size: 3rem;
+  --spinner-stroke: .4rem; /* dove utilizzato */
+  --spinner-overlay-color: color-mix(in srgb, var(--text-color) 20%, transparent);
+
+  --alert-border-radius: var(--radius-md);
+  --alert-box-shadow: var(--box-shadow-base);
+
+  --status-success-color: #046d19;
+  --status-success-border-color: var(--status-success-color);
+  --status-success-fg-color: #fff;
+
+  --status-danger-color: #c00;
+  --status-danger-border-color: var(--status-danger-color);
+  --status-danger-fg-color: #fff;
+
+  --status-info-color: #0665c5;
+  --status-info-border-color: var(--status-info-color);
+  --status-info-fg-color: #fff;
+
+  --status-warning-color: #fc0;
+  --status-warning-border-color: var(--status-warning-color);
+  --status-warning-fg-color: #4f2900;
+
+  --box-shadow-base: 0 0 1.2rem #00000040;
+
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    color-scheme: dark;
+
+    /* figma */
+    --body-bg-color: var(--stone-0);
+    --text-color: #000;
+    --footer-bg: #282c35;
+    --footer-fg: #fff;
+    --footer-link: var(--yellow-5);
+    --link-color: var(--primary);
+    --primary: #203c6e;
+    --secondary: #a3384e;
+    --secondary-fg: var(--body-bg-color);
+    --radius: 0.38rem;
+    /* end figma */
+
+    /* project */
+    /* end project */
+
+    --gray-light: var(--gray-11);
+    /* --gray-medium: var(--gray-6); */
+    --gray-dark: var(--gray-2);
+
+    --text-muted-color: var(--stone-5);
+    --text-dim-color: var(--gray-5);
+    --link-visited-color: var(--sand-3);
+
+    --btn-primary-bg-color: linear-gradient(45deg, var(--green-9), var(--green-10));
+    --btn-primary-fg-color: var(--gray-0);
+    --btn-primary-border-color: var(--green-10);
+    --btn-primary-hover-bg-color: var(--green-11);
+    --btn-primary-hover-fg-color: var(--btn-primary-fg-color);
+    --btn-primary-hover-border-color: var(--btn-primary-border-color);
+    --btn-primary-active-bg-color: var(--green-12);
+    --btn-primary-active-fg-color: var(--btn-primary-fg-color);
+    --btn-primary-active-border-color: var(--btn-primary-active-bg-color);
+    --btn-primary-focus-outline-color: color-mix(in srgb, var(--btn-primary-border-color) 25%, transparent);
+
+    --btn-secondary-bg-color: var(--stone-4);
+    --btn-secondary-fg-color: var(--stone-9);
+    --btn-secondary-border-color: var(--stone-6);
+    --btn-secondary-hover-bg-color: var(--stone-5);
+    --btn-secondary-hover-fg-color: var(--stone-11);
+    --btn-secondary-hover-border-color: var(--btn-secondary-border-color);
+    --btn-secondary-active-bg-color: var(--stone-11);
+    --btn-secondary-active-fg-color: var(--stone-0);
+    --btn-secondary-active-border-color: var(--btn-secondary-active-bg-color);
+    --btn-secondary-focus-outline-color: color-mix(in srgb, var(--btn-secondary-border-color) 50%, transparent);
+
+    --status-success-color: #04ba29;
+    --status-success-fg-color: #fff;
+
+    --status-danger-color: #dd0303;
+    --status-danger-fg-color: #fff;
+
+    --status-info-color: #044c94;
+    --status-info-fg-color: #fff;
+
+    --status-warning-color: #d1a804;
+    --status-warning-fg-color: #000;
+  }
+}