@massimo-cassandro/minimo 0.1.11 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massimo-cassandro/minimo",
-  "version": "0.1.11",
+  "version": "0.2.0",
   "description": "Light css framework",
   "type": "module",
   "homepage": "https://github.com/massimo-cassandro/minimo#readme",
@@ -14,7 +14,9 @@
   "scripts": {
     "UPD-version": "npx update-version  # --config=./dev-utilities.config.mjs",
     "upd@m": "npx upd@m",
-    "npm-publish": "npm publish"
+    "npm-publish": "npm publish",
+    "build-tokens": "node ./utilities/build-tokens.mjs --config ./test/tokens-test/tokens-config.mjs",
+    "check unresolved props": "node ./utilities/check-unresolved-custom-props.mjs --config ./test/tokens-test/tokens-config.mjs"
   },
   "license": "MIT",
   "author": "Massimo Cassandro",
@@ -23,9 +25,11 @@
   },
   "main": "./src/index.js",
   "files": [
-    "src/**/*.{js,css,svg}"
+    "src/**/*.{js,mjs,css,svg,tokens.json,tokens.jsonc}"
   ],
   "devDependencies": {
-    "@massimo-cassandro/dev-updater": "^2.1.0"
+    "@massimo-cassandro/dev-updater": "^2.1.0",
+    "@massimo-cassandro/stylelint-config": "^2.3.2",
+    "style-dictionary": "^5.4.0"
   }
 }

package/src/{js → components}/dialog-content.js

@@ -1,6 +1,6 @@
 import './dialog-content.css';
 import x_icon from '@icone/x.svg?inline';
-import { spinner } from './spinner';
+import { spinner } from './spinner/spinner';
 /**
   `indicator_class`: classe da aggiungere al wrapper per indicare in modo univoco il dialog
  */

package/src/{css → components/inner-nav}/inner-nav.css

@@ -1,8 +1,8 @@
 .inner-nav-main, .inner-nav {
   display: flex;
-  gap: 1.5rem;
+  gap: var(--size-lg);
   justify-content: flex-end;
-  margin: 1rem 0;
+  margin-block: var(--size-base);
   /* text-align: end; */
 
   @media print {

package/src/{js → components/inner-nav}/inner-nav.js

@@ -1,4 +1,12 @@
 // navigazione scheda / elenco
+/*
+<p class="inner-nav-main">...</p>
+...
+<p class="inner-nav"></p>
+*/
+
+import './inner-nav.css';
+
 let nav_primary = document.querySelector('.inner-nav-main');
 if (nav_primary) {
   // nav_primary.classList.add('text-right', 'd-print-none');

package/src/components/modal-content/modal-content.js

@@ -27,7 +27,7 @@ export function modalContent({
   /** dimensione modal: full, large, medium o small */
   size = 'large',
 
-  /** padding: std (var(--spacing-md) 0) o none */
+  /** padding: std (var(--size-md) 0) o none */
   padding = 'std'
 }) {
 

package/src/components/modal-content/modal-content.module.css

@@ -52,7 +52,7 @@
 .dialogInner {
   width: 100%;
   height: 100%;
-  padding-inline-end: var(--spacing-md);
+  padding-inline-end: var(--size-md);
   overflow-x: hidden;
   overflow-y: auto;
   /* scrollbar-gutter: stable; */
@@ -60,7 +60,7 @@
 
   /* stylelint-disable selector-class-pattern */
   .padding-std & {
-    padding: var(--spacing-md) 0;
+    padding: var(--size-md) 0;
   }
   .padding-none & {
     padding: 0;
@@ -70,7 +70,7 @@
 
 .modalSpinner {
   position: relative;
-  padding-block-start: var(--spacing-2xl);
+  padding-block-start: var(--size-2xl);
 
   .dialog.on & {
     display: none;
@@ -99,7 +99,7 @@
   --btn-hover-color: var(--secondary, #fff);
   --btn-hover-bg-color: var(--secondary-fg, #000);
   --icon-size: 2.5rem;
-  --btn-padding: var(--spacing-xs, .5rem);
+  --btn-padding: var(--size-xs, .5rem);
   --icon-bars-thickness: 3px;
 
   position: absolute;

package/src/components/recaptcha/recaptcha.css

@@ -36,7 +36,7 @@
         inset: 0;
         display: block;
         content: '';
-        background-color: var(--recaptcha-alert-overlay, color-mix(in srgb, #000 50%, transparent));
+        background-color: var(--recaptcha-alert-overlay-color, rgb(0 0 0 / .5));
       }
     }
     input, select, textarea {
@@ -49,12 +49,11 @@
       top: 50%;
       left: 50%;
       display: block;
-      padding: var(--spacing-xs);
-      color: var(--recaptcha-alert-fg, #fff);
-      background-color: var(--recaptcha-alert-bg, #000);
+      padding: var(--size-xs);
+      color: var(--recaptcha-alert-foreground, #fff);
+      background-color: var(--recaptcha-alert-background-color, #000);
       border: .5px solid currentColor;
       border-radius: var(--radius-xs);
-      box-shadow: var(--box-shadow-base);
       transform-origin: center;
       translate: -50% -50%;
     }

package/src/components/recaptcha/recaptcha.minimo.tokens.jsonc

@@ -0,0 +1,24 @@
+{
+  "recaptcha": {
+    "alert": {
+      
+      "overlay": {
+        "color": {
+          "$type": "color",
+          "$value": "rgb(0 0 0 / .5)"
+        },
+      },
+
+      "background": {
+        "color": {
+          "$type": "color",
+          "$value": "#000"
+        }
+      },
+      "foreground": {
+        "$type": "color",
+        "$value": "#fff"
+      },
+    }
+  }
+}

package/src/{css/spinners → components/spinner}/TODO spinner-circle.css

@@ -11,7 +11,7 @@ https://lukehaas.me/projects/css-spinners/ (#2)
   height: 10em;
   margin: 55px auto;
   font-size: .7rem;
-  color: var(--spinner-color);
+  color: var(--_spinner-color);
   text-indent: -99999em;
   box-shadow: inset 0 0 0 1em;
   transform: translateZ(0);

package/src/{css/spinners → components/spinner}/spinner-circle-basic.css

@@ -1,10 +1,11 @@
 .spinner {
-  display: inline-block;
+  display: block;
   width: var(--spinner-size);
   aspect-ratio: 1;
+  margin: .5rem auto;
   color: var(--spinner-color);
   text-indent: -99999em;
-  border: var(--spinner-stroke) solid;
+  border: var(--spinner-stroke-width) solid;
   border-color: currentColor currentColor transparent;
   border-radius: 50%;
   animation: spinner-border .7s linear infinite;

package/src/{css/spinners → components/spinner}/spinner-wrapper.css

@@ -5,7 +5,7 @@
   display: grid;
   place-content: center;
   pointer-events: none;
-  background-color: var(--spinner-overlay-color);
+  background-color: var(--overlay-color);
 }
 
 .spinner-wrapper {

package/src/components/spinner/spinner.minimo.tokens.jsonc

@@ -0,0 +1,22 @@
+{
+  "spinner": {
+
+    "size": {
+      "$value": "{size.lg}",
+      "$type": "dimension"
+    },
+
+    "color": {
+      "$value": "{primary.base}",
+      "$type": "color"
+    },
+
+    "stroke": {
+      "width": {
+        "$value": "2px",
+        "$type": "dimension"
+      }
+    },
+
+  }
+}

package/src/components/toast/toast.js

@@ -0,0 +1,77 @@
+// forked from https://github.com/argyleink/gui-challenges/tree/main/toast
+// https://web.dev/articles/building/a-toast-component?hl=en
+
+// TODO rivedere
+
+import * as styles from './toast.module.css';
+
+
+const init = () => {
+  const toastWrapper = document.createElement('section');
+  toastWrapper.classList.add(styles.toastWrapper);
+
+  // document.firstElementChild.insertBefore(toastWrapper, document.body);
+  document.body.append(toastWrapper);
+  return toastWrapper;
+};
+
+const createToast = text => {
+  const thisToast = document.createElement('output');
+
+  thisToast.innerHTML = text;
+  thisToast.classList.add(styles.toast);
+  thisToast.setAttribute('role', 'status');
+  thisToast.setAttribute('aria-live', 'polite');
+
+  return thisToast;
+};
+
+const addToast = toast => {
+  const { matches:motionOK } = window.matchMedia(
+    '(prefers-reduced-motion: no-preference)'
+  );
+
+  toastWrapper.children.length && motionOK
+    ? flipToast(toast)
+    : toastWrapper.appendChild(toast);
+};
+
+const Toast = text => {
+  let toast = createToast(text);
+  addToast(toast);
+
+  return Promise.allSettled(
+    toast.getAnimations().map( animation => animation.finished )
+  ).then(() => {
+    toastWrapper.removeChild(toast);
+  });
+};
+
+// https://aerotwist.com/blog/flip-your-animations/
+const flipToast = toast => {
+  // FIRST
+  const first = toastWrapper.offsetHeight;
+
+  // add new child to change container size
+  toastWrapper.appendChild(toast);
+
+  // LAST
+  const last = toastWrapper.offsetHeight;
+
+  // INVERT
+  const invert = last - first;
+
+  // PLAY
+  const animation = toastWrapper.animate([
+    { transform: `translateY(${invert}px)` },
+    { transform: 'translateY(0)' }
+  ], {
+    duration: 150,
+    easing: 'ease-out',
+  });
+
+  animation.startTime = document.timeline.currentTime;
+};
+
+const toastWrapper = init();
+export { Toast };

package/src/components/toast/toast.minimo.tokens.jsonc

@@ -0,0 +1,29 @@
+{
+  "toast": {
+      
+    "font": {
+      "size": {
+        "$value": "{font.size.sm}",
+        "$type": "dimension"
+      },
+    },
+
+    "border": {
+      "radius": {
+        "$value": "{radius.sm}",
+        "$type": "color"
+      }
+    },
+    "text": {
+      "color": {
+        "$value": "{text.color}",
+        "$type": "color"
+      }
+    },
+    "duration": {
+      "$value": "5s",
+      "$type": "duration"
+    }
+  }
+  
+}

package/src/components/toast/toast.module.css

@@ -0,0 +1,59 @@
+/* purgecss start ignore */
+.toastWrapper {
+  position: fixed;
+  inset-block-end: 0;
+  inset-inline: 0;
+  z-index: 1;
+
+  display: grid;
+  gap: 1vh;
+  justify-content: center;
+  justify-items: stretch;
+  padding-block-end: 5vh;
+
+  /* optimizations */
+  pointer-events: none;
+}
+
+.toast {
+  --_bg-lightness: 90%;
+  --_travel-distance: 0;
+
+  max-inline-size: min(25ch, 90vw);
+  padding-block: .5ch;
+  padding-inline: 1ch;
+
+  /* font-family: system-ui, sans-serif; */
+  font-size: var(--toast-font-size);
+  color: var(--toast-text-color);
+  background: hsl(0 0% var(--_bg-lightness) / 90%);
+  border-radius: var(--toast-border-radius);
+  animation:
+    fade-in .3s ease,
+    slide-in .3s ease,
+    fade-out .3s ease var(--toast-duration);
+
+  will-change: transform;
+
+  @media (--dark) {
+    /* color: white; */
+    --_bg-lightness: 20%;
+  }
+
+  @media (--motionOK) {
+    --_travel-distance: 5vh;
+  }
+}
+
+@keyframes fade-in {
+  from { opacity: 0; }
+}
+
+@keyframes fade-out {
+  to { opacity: 0; }
+}
+
+@keyframes slide-in {
+  from { transform: translateY(var(--_travel-distance, 10px)); }
+}
+/* purgecss end ignore */

package/src/css/alerts.css

@@ -25,44 +25,44 @@
   */
 
   /* alert-error / alert-danger (default) */
-  --alert-bg-color: var(--status-danger-color);
-  --alert-fg-color: var(--status-danger-fg-color);
-  --alert-border-color: var(--status-danger-border-color);
+  --_alert-bg-color: var(--status-danger-color);
+  --_alert-fg-color: var(--status-danger-fg);
+  --_alert-border-color: var(--status-danger-border-color);
 
   position: relative;
 
   &.alert-warning, &.alert-notice {
-    --alert-bg-color: var(--status-warning-color);
-    --alert-fg-color: var(--status-warning-fg-color);
-    --alert-border-color: var(--status-warning-border-color);
+    --_alert-bg-color: var(--status-warning-color);
+    --_alert-fg-color: var(--status-warning-fg);
+    --_alert-border-color: var(--status-warning-border-color);
   }
   &.alert-info {
-    --alert-bg-color: var(--status-info-color);
-    --alert-fg-color: var(--status-info-fg-color);
-    --alert-border-color: var(--status-info-border-color);
+    --_alert-bg-color: var(--status-info-color);
+    --_alert-fg-color: var(--status-info-fg);
+    --_alert-border-color: var(--status-info-border-color);
   }
   &.alert-success {
-    --alert-bg-color: var(--status-success-color);
-    --alert-fg-color: var(--status-success-fg-color);
-    --alert-border-color: var(--status-success-border-color);
+    --_alert-bg-color: var(--status-success-color);
+    --_alert-fg-color: var(--status-success-fg);
+    --_alert-border-color: var(--status-success-border-color);
   }
 
-  padding: var(--spacing-base) var(--spacing-xl) var(--spacing-base) var(--spacing-base);
-  margin: var(--spacing-base) 0;
+  padding: var(--size-base) var(--size-xl) var(--size-base) var(--size-base);
+  margin: var(--size-base) 0;
   font-size: var(--font-size-md);
   font-weight: var(--font-weight-semibold);
-  color: var(--alert-fg-color);
-  background-color: var(--alert-bg-color);
-  border: 1px solid var(--alert-border-color);
+  color: var(--_alert-fg-color);
+  background-color: color-mix(in srgb, var(--_alert-bg-color) 60%, transparent);
+  border: 1px solid var(--_alert-border-color);
   border-radius: var(--alert-border-radius);
-  box-shadow: var(--alert-box-shadow);
+  box-shadow: var(--alert-drop-shadow);
 
   h2 {
-    margin: 0 0 var(--spacing-xs);
+    margin: 0 0 var(--size-xs);
     font-size: var(--font-size-lg);
   }
   p {
-    margin-block-end: var(--spacing-xs);
+    margin-block-end: var(--size-xs);
     &:last-child {
       margin-block-end: 0;
     }
@@ -71,13 +71,13 @@
     text-decoration: underline;
     text-underline-offset: 3px;
     &, &:visited {
-      color: var(--alert-link-color);
+      color: var(--_alert-link-color);
     }
 
-    @media (--mouse) {
+    @media (hover: hover) {
       &:hover {
         text-decoration-thickness: 4px;
-        background-color: color-mix(in srgb, var(--body-bg-color) 30%, transparent);
+        background-color: color-mix(in srgb, var(--body-background-color) 30%, transparent);
       }
     }
   } */

package/src/css/anchors.css

@@ -9,32 +9,33 @@ a:link, .btn-link {
   }
 }
 
+a:not(.btn) {
+  text-decoration: none;
+  &:link {
+    color: var(--link-color);
+  }
+  &:visited {
+    color: var(--link-visited-color);
+  }
+}
 
 a:not(.btn), .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;
+  @media (hover: hover) {
+    &:hover {
+      text-decoration: underline;
+      text-underline-offset: 2px;
+    }
   }
   &:active {
-    /* TODO rivedere, sostituire con colori specifici da cuistome props */
+    /* TODO rivedere, sostituire con colori specifici da custom props */
     /* stylelint-disable-next-line declaration-no-important */
-    color: var(--body-bg-color) !important;
-    background-color: var(--link-color);
+    color: var(--body-background-color) !important;
     outline: 2px solid var(--link-color);
+    background-color: var(--link-color);
     offset: 0;
   }
 }
-
-a:not(.btn) {
-  text-decoration: none;
-  &:link {
-    color: var(--link-color);
-  }
-  &:visited {
-    color: var(--link-visited-color);
-  }
-}

package/src/css/buttons/btn-close.css

@@ -7,7 +7,7 @@
 
 .btn-close  {
 
-  --icon-bar-width: calc(var(--btn-close-size) - (var(--btn-close-padding) * 2) - (var(--btn-close-border-width) * 2));
+  --_icon-bar-width: calc(var(--btn-close-size) - (var(--btn-close-padding) * 2) - (var(--btn-close-border-width) * 2));
 
   position: relative;
 
@@ -17,7 +17,7 @@
   padding: var(--btn-close-padding);
   color: var(--btn-close-icon-color);
   cursor: pointer;
-  background-color: var(--btn-close-background);
+  background-color: var(--btn-close-background-color);
   border: var(--btn-close-border-width) solid var(--btn-close-border-color);
   border-radius: var(--btn-close-border-radius);
 
@@ -26,7 +26,7 @@
     top: 50%;
     left: 0;
     display: block;
-    width: var(--icon-bar-width);
+    width: var(--_icon-bar-width);
     height: var(--btn-close-icon-bar-size);
     content: '';
     background: currentColor;
@@ -42,23 +42,24 @@
 
   &:focus {
     outline: var(--btn-close-focus-outline-width) solid var(--btn-close-focus-outline-color);
+    outline-offset: var(--btn-close-focus-outline-offset);
   }
 
   @media (hover: hover) {
     &:hover {
 
-      background-color: var(--btn-close-hover-background);
+      background-color: var(--btn-close-hover-background-color);
 
       &::before, &::after {
-        background-color: var(--btn-close-icon-hover-color);
+        background-color: var(--btn-close-hover-icon-color);
       }
     }
   }
 
   &:active {
-    background-color: var(--btn-close-active-background);
+    background-color: var(--btn-close-active-background-color);
     &::before, &::after {
-      background-color: var(--btn-close-icon-active-color);
+      background-color: var(--btn-close-active-icon-color);
     }
 
   }