@massimo-cassandro/minimo 0.1.0 → 0.1.3

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

@@ -1,51 +0,0 @@
-/*
-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

@@ -1,20 +0,0 @@
-.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

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

package/src/css/table.css

@@ -1,66 +0,0 @@
-/* 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

@@ -1,114 +0,0 @@
-/* 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

@@ -1,128 +0,0 @@
-/* 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

@@ -1,16 +0,0 @@
-/*
-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

@@ -1,273 +0,0 @@
-/* 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;
-  }
-}