@massimo-cassandro/minimo 1.20.7 → 1.20.9

package/design-tokens/utilities/build-tokens.mjs

@@ -10,8 +10,8 @@
 //   build-tokens-src/config.mjs   <- reads --config flag and resolves all paths
 //   build-tokens-src/transforms.mjs  <- registers custom Style Dictionary transforms
 //   build-tokens-src/formats/css.mjs    <- registers the css/variables-sorted format
-//   build-tokens-src/formats/penpot.mjs <- registers the json/penpot format, exports helpers
-//   build-tokens-src/platforms.mjs      <- builds the platforms object (css + optional penpot)
+//   build-tokens-src/formats/json.mjs   <- registers the json/tokens format, exports helpers
+//   build-tokens-src/platforms.mjs      <- builds the platforms object (css + optional json)
 
 import StyleDictionary from 'style-dictionary';
 import * as path from 'node:path';
@@ -26,10 +26,10 @@ import {
   buildPath,
   destFile,
   stylelintConfigPath,
-  penpotBuildPath,
-  penpotDestFile,
-  penpotFormat,
-  penpotExpressions,
+  jsonBuildPath,
+  jsonDestFile,
+  jsonFormat,
+  jsonExpression,
   source,
   mergeCustomProps,
   customPropsGroups,
@@ -45,8 +45,8 @@ import './build-tokens-src/transforms.mjs';
 import { customPropsCount } from './build-tokens-src/formats/css.mjs';
 import { loadExistingCustomProps } from './build-tokens-src/merge-css.mjs';
 
-// ── 4. Penpot format ──────────────────────────────────────────────────────────
-import { buildPenpotFiles, collectConcreteFilePaths } from './build-tokens-src/formats/penpot.mjs';
+// ── 4. JSON format ────────────────────────────────────────────────────────────
+import { buildJsonFiles, collectConcreteFilePaths } from './build-tokens-src/formats/json.mjs';
 
 // ── 5. Platforms builder ──────────────────────────────────────────────────────
 import { buildPlatforms } from './build-tokens-src/platforms.mjs';
@@ -60,29 +60,37 @@ if (mergeCustomProps) {
   loadExistingCustomProps(path.join(buildPath, destFile));
 }
 
-// ── 6. Collect concrete source file paths (multi-file Penpot mode only) ──────
+// ── 6. Collect concrete source file paths (multi-file JSON mode only) ────────
 // Source entries may be glob patterns. SD expands them internally and stores
 // the concrete path in token.filePath. We need those concrete paths to build
-// the per-file descriptors for the penpot platform.
+// the per-file descriptors for the json platform.
 //
 // SD v5 lazy-loads sources: `await sd.hasInitialized` triggers loading;
 // after that sd.allTokens is a plain synchronous array with filePath populated.
 //
-// In single-file mode (penpotDestFile is set) we skip this step entirely.
+// In single-file mode (jsonDestFile is set) we skip this step entirely.
 let concreteFilePaths = [];
 
-if (penpotBuildPath && !penpotDestFile) {
+if (jsonBuildPath && !jsonDestFile) {
   const sdInit = new StyleDictionary({ source, log: { verbosity: 'silent' }, platforms: {} });
   concreteFilePaths = await collectConcreteFilePaths(sdInit);
 }
 
-// ── 7. Clean penpot output directory ─────────────────────────────────────────
-// Wipe the destination folder before writing new files so that tokens removed
-// from the source are not left behind as stale artefacts.
-if (penpotBuildPath) {
-  const { rm, mkdir } = await import('fs/promises');
-  await rm(penpotBuildPath, { recursive: true, force: true });
-  await mkdir(penpotBuildPath, { recursive: true });
+// ── 7. Clean json output directory ───────────────────────────────────────────
+// Remove only previously generated *.json/*.jsonc files, so that tokens
+// removed from the source are not left behind as stale artefacts, while any
+// other file placed in jsonBuildPath by the user (e.g. a README) is left
+// untouched. Files are written flat in jsonBuildPath (no subdirectories), so
+// only its top level is scanned.
+if (jsonBuildPath) {
+  const { readdir, rm, mkdir } = await import('fs/promises');
+  const existingEntries = await readdir(jsonBuildPath, { withFileTypes: true }).catch(() => []);
+  await Promise.all(
+    existingEntries
+      .filter((entry) => entry.isFile() && /\.jsonc?$/.test(entry.name))
+      .map((entry) => rm(path.join(jsonBuildPath, entry.name)))
+  );
+  await mkdir(jsonBuildPath, { recursive: true });
 }
 
 // ── 8. Build ──────────────────────────────────────────────────────────────────
@@ -92,10 +100,10 @@ const sd = new StyleDictionary({
   platforms: buildPlatforms({
     buildPath,
     destFile,
-    penpotBuildPath,
-    penpotDestFile,
-    penpotFormat,
-    penpotExpressions,
+    jsonBuildPath,
+    jsonDestFile,
+    jsonFormat,
+    jsonExpression,
     concreteFilePaths,
     customPropsGroups,
     pxToRem,
@@ -122,20 +130,20 @@ console.log(styleText(['yellow'], `[build-tokens] config file : ${short(configAb
 console.log(styleText(['yellow'], `[build-tokens] source      : ${source.map(short)}`));
 console.log(styleText(['yellow'], `[build-tokens] dest file   : ${short(path.join(buildPath, destFile))}`));
 
-if (penpotBuildPath) {
-  const penpotFiles = buildPenpotFiles(concreteFilePaths, penpotDestFile, penpotFormat, penpotExpressions);
-  if (penpotFiles.length === 1) {
+if (jsonBuildPath) {
+  const jsonFiles = buildJsonFiles(concreteFilePaths, jsonDestFile, jsonFormat, jsonExpression);
+  if (jsonFiles.length === 1) {
     console.log(styleText(['yellow'],
-      `[build-tokens] penpot json : ${short(path.join(penpotBuildPath, penpotFiles[0].destination))}`
+      `[build-tokens] json        : ${short(path.join(jsonBuildPath, jsonFiles[0].destination))}`
     ));
   } else {
     console.log(styleText(['yellow'],
-      `[build-tokens] penpot json : ${penpotFiles.length} files in ${short(penpotBuildPath)}`
+      `[build-tokens] json        : ${jsonFiles.length} files in ${short(jsonBuildPath)}`
     ));
   }
 } else {
   console.log(styleText(['yellow'],
-    '[build-tokens] penpot json : (disabled — penpotBuildPath not set)'
+    '[build-tokens] json        : (disabled — jsonBuildPath not set)'
   ));
 }
 

package/index.js

@@ -1,7 +1,5 @@
 // utilities
 export { betterText } from './src/utilities/better-text.js';
-export { buildPictureTag } from './src/utilities/dom-builder-helpers/picture-tag.js';
-export { buildInputTag, buildCheckboxTag, buildTextareaTag } from './src/utilities/dom-builder-helpers/form-tags.js';
 export { classnames, classnamesNull } from './src/utilities/classnames.js';
 export { createId } from './src/utilities/create-id.js';
 export { disableBtnsOnSubmit } from './src/utilities/disable-btns-on-submit.js';
@@ -20,6 +18,10 @@ export { titleCase } from './src/utilities/title-case.js';
 export { truncateString } from './src/utilities/truncate-string.js';
 export { ValidationError } from './src/utilities/validation-error-class.js';
 
+// domBuilder helpers
+export { buildPictureTag } from './src/utilities/dom-builder-helpers/picture-tag.js';
+export { buildInputTag, buildCheckboxTag, buildTextareaTag } from './src/utilities/dom-builder-helpers/form-tags.js';
+
 // components
 export { dismissAlerts } from './src/components/dismiss-alerts.js';
 export { formResetSubmit } from './src/components/form-reset-submit.js';
@@ -31,3 +33,5 @@ export { sf_macro } from './src/components/sf-macro/sf-macro.js';
 export { slideToggle, slideUp, slideDown } from './src/components/slide-up-down-toggle/slide-up-down-toggle.js';
 export { snackbar } from './src/components/snackbar/snackbar.js';
 export { unsplashPage } from './src/components/unsplash-page/unsplash-page.js';
+
+// web components

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massimo-cassandro/minimo",
-  "version": "1.20.7",
+  "version": "1.20.9",
   "description": "Light css framework & utilities",
   "type": "module",
   "main": "./index.js",

package/src/css/buttons/buttons.css

@@ -1,6 +1,6 @@
 /* TODO dividere in più file secondo la variante? */
 
-button, [role='button'], .btn, .btn-reset {
+button, [role='button'], .btn, .btn-reset, .btn-link {
   &:not([disabled]) {
     cursor: pointer;
   }

package/src/custom-properties.css

@@ -113,15 +113,15 @@
 
   --font-family: 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-size-2xl: clamp(2rem, .7692rem + 1.9231vw, 2.5rem);
-  --font-size-3xl: clamp(2.2rem, .2308rem + 3.0769vw, 3rem);
-  --font-size-base: clamp(.9rem, .6538rem + .3846vw, 1rem);
-  --font-size-lg: clamp(1.2rem, .7077rem + .7692vw, 1.4rem);
-  --font-size-md: clamp(1.05rem, .6808rem + .5769vw, 1.2rem);
-  --font-size-sm: clamp(.8rem, .5538rem + .3846vw, .9rem);
-  --font-size-xl: clamp(1.6rem, 1.1077rem + .7692vw, 1.8rem);
-  --font-size-xs: clamp(.7rem, .4538rem + .3846vw, .8rem);
-  --font-size-xxs: clamp(.6rem, .3538rem + .3846vw, .7rem);
+  --font-size-2xl: clamp(2rem, .7692rem + 1.9231vw, 2.5rem); /* 64-90rem: https://clamp.font-size.app/?config=eyJyb290IjoiMTYiLCJtaW5XaWR0aCI6IjY0cmVtIiwibWF4V2lkdGgiOiI5MHJlbSIsIm1pbkZvbnRTaXplIjoiMnJlbSIsIm1heEZvbnRTaXplIjoiMi41cmVtIn0%3D */
+  --font-size-3xl: clamp(2.2rem, .2308rem + 3.0769vw, 3rem); /* 64-90rem: https://clamp.font-size.app/?config=eyJyb290IjoiMTYiLCJtaW5XaWR0aCI6IjY0cmVtIiwibWF4V2lkdGgiOiI5MHJlbSIsIm1pbkZvbnRTaXplIjoiMi4ycmVtIiwibWF4Rm9udFNpemUiOiIzcmVtIn0%3D */
+  --font-size-base: clamp(.9rem, .6538rem + .3846vw, 1rem); /* 64 to 90 rem: https://clamp.font-size.app/?config=eyJyb290IjoiMTYiLCJtaW5XaWR0aCI6IjY0cmVtIiwibWF4V2lkdGgiOiI5MHJlbSIsIm1pbkZvbnRTaXplIjoiLjlyZW0iLCJtYXhGb250U2l6ZSI6IjFyZW0ifQ%3D%3D */
+  --font-size-lg: clamp(1.2rem, .7077rem + .7692vw, 1.4rem); /* 64-90rem: https://clamp.font-size.app/?config=eyJyb290IjoiMTYiLCJtaW5XaWR0aCI6IjY0cmVtIiwibWF4V2lkdGgiOiI5MHJlbSIsIm1pbkZvbnRTaXplIjoiMS4ycmVtIiwibWF4Rm9udFNpemUiOiIxLjRyZW0ifQ%3D%3D */
+  --font-size-md: clamp(1.05rem, .6808rem + .5769vw, 1.2rem); /* 64-90rem: https://clamp.font-size.app/?config=eyJyb290IjoiMTYiLCJtaW5XaWR0aCI6IjY0cmVtIiwibWF4V2lkdGgiOiI5MHJlbSIsIm1pbkZvbnRTaXplIjoiMS4wNXJlbSIsIm1heEZvbnRTaXplIjoiMS4ycmVtIn0%3D */
+  --font-size-sm: clamp(.8rem, .5538rem + .3846vw, .9rem); /* 64-90rem: https://clamp.font-size.app/?config=eyJyb290IjoiMTYiLCJtaW5XaWR0aCI6IjY0cmVtIiwibWF4V2lkdGgiOiI5MHJlbSIsIm1pbkZvbnRTaXplIjoiLjhyZW0iLCJtYXhGb250U2l6ZSI6Ii45cmVtIn0%3D */
+  --font-size-xl: clamp(1.6rem, 1.1077rem + .7692vw, 1.8rem); /* 64-90rem: https://clamp.font-size.app/?config=eyJyb290IjoiMTYiLCJtaW5XaWR0aCI6IjY0cmVtIiwibWF4V2lkdGgiOiI5MHJlbSIsIm1pbkZvbnRTaXplIjoiMS42cmVtIiwibWF4Rm9udFNpemUiOiIxLjhyZW0ifQ%3D%3D */
+  --font-size-xs: clamp(.7rem, .4538rem + .3846vw, .8rem); /* 64-90rem: https://clamp.font-size.app/?config=eyJyb290IjoiMTYiLCJtaW5XaWR0aCI6IjY0cmVtIiwibWF4V2lkdGgiOiI5MHJlbSIsIm1pbkZvbnRTaXplIjoiLjdyZW0iLCJtYXhGb250U2l6ZSI6Ii44cmVtIn0%3D */
+  --font-size-xxs: clamp(.6rem, .3538rem + .3846vw, .7rem); /* 64-90rem: https://clamp.font-size.app/?config=eyJyb290IjoiMTYiLCJtaW5XaWR0aCI6IjY0cmVtIiwibWF4V2lkdGgiOiI5MHJlbSIsIm1pbkZvbnRTaXplIjoiLjZyZW0iLCJtYXhGb250U2l6ZSI6Ii43cmVtIn0%3D */
   --font-style-base: normal;
   --font-weight-bold: 700;
   --font-weight-light: 300;

package/src/utilities/dom-builder-helpers/form-tags.js

@@ -11,7 +11,7 @@ import { randomId } from '../random-id.js';
  * @param {boolean} [args.condition=true] - When false, returns `null` without building anything.
  * @param {string | null} [args.wrapperClass=null] - optional class to be added to the `.form-group` wrapper.
  * @param {string | HTMLElement | null} [args.help=null] - Optional help text.
- * @param {Array} args.children - domBuilder children to render inside the `.form-group` (before the help text).
+ * @param {Array<Object>} args.children - domBuilder children to render inside the `.form-group` (before the help text).
  * @returns {DomBuilderItem|null} The `.form-group` domBuilder item, or `null` when `condition` is false.
  */
 function buildFormGroup({

package/design-tokens/tokens/design-tokens/_src/alerts.minimo.tokens.jsonc

@@ -1,28 +0,0 @@
-// -----------------------------------------------------------------------
-// Generated file — do not edit manually.
-// This file is produced by the design-token build pipeline.
-// Source of truth: the token files in the project source directory.
-// Re-generate with: node build-tokens.mjs --config <path/to/config>
-// -----------------------------------------------------------------------
-{
-  "alert": {
-    "border": {
-      "radius": {
-        "$type": "dimension",
-        "$value": "{radius.sm}"
-      }
-    },
-    "box-shadow": {
-      "$type": "shadow",
-      "$value": [
-        {
-          "offsetX": 0,
-          "offsetY": 0,
-          "blur": "8px",
-          "spread": 0,
-          "color": "oklch(0 0 0 / 0.5)"
-        }
-      ]
-    }
-  }
-}

package/design-tokens/tokens/design-tokens/_src/badge.minimo.tokens.jsonc

@@ -1,42 +0,0 @@
-// -----------------------------------------------------------------------
-// Generated file — do not edit manually.
-// This file is produced by the design-token build pipeline.
-// Source of truth: the token files in the project source directory.
-// Re-generate with: node build-tokens.mjs --config <path/to/config>
-// -----------------------------------------------------------------------
-{
-  "badge": {
-    "background": {
-      "color": {
-        "$type": "color",
-        "$value": "{primary.100}"
-      }
-    },
-    "color": {
-      "$type": "color",
-      "$value": "{primary.100-fg}"
-    },
-    "font": {
-      "size": {
-        "$type": "dimension",
-        "$value": "{font.size.xs}"
-      },
-      "weight": {
-        "$type": "number",
-        "$value": "{font.weight.semibold}"
-      }
-    },
-    "lg": {
-      "font": {
-        "size": {
-          "$type": "dimension",
-          "$value": "{font.size.base}"
-        },
-        "weight": {
-          "$type": "number",
-          "$value": "{badge.font.weight}"
-        }
-      }
-    }
-  }
-}

package/design-tokens/tokens/design-tokens/_src/btn-close.minimo.tokens.jsonc

@@ -1,102 +0,0 @@
-// -----------------------------------------------------------------------
-// Generated file — do not edit manually.
-// This file is produced by the design-token build pipeline.
-// Source of truth: the token files in the project source directory.
-// Re-generate with: node build-tokens.mjs --config <path/to/config>
-// -----------------------------------------------------------------------
-{
-  "btn": {
-    "close": {
-      "size": {
-        "$type": "dimension",
-        "$value": "1.5rem"
-      },
-      "padding": {
-        "$type": "dimension",
-        "$value": "3px"
-      },
-      "border": {
-        "width": {
-          "$type": "dimension",
-          "$value": "2px"
-        },
-        "color": {
-          "$type": "color",
-          "$value": "{btn.close.icon.color}"
-        },
-        "radius": {
-          "$type": "dimension",
-          "$value": "50%"
-        }
-      },
-      "background": {
-        "color": {
-          "$type": "color",
-          "$value": "{body.background.color}"
-        }
-      },
-      "icon": {
-        "color": {
-          "$type": "color",
-          "$value": "{text.color}"
-        },
-        "bar": {
-          "size": {
-            "$type": "dimension",
-            "$value": "2px"
-          }
-        }
-      },
-      "hover": {
-        "background": {
-          "color": {
-            "$type": "color",
-            "$value": "{btn.close.icon.color}"
-          }
-        },
-        "border": {
-          "color": {
-            "$type": "color",
-            "$value": "{btn.close.icon.color}"
-          }
-        },
-        "icon": {
-          "color": {
-            "$type": "color",
-            "$value": "{btn.close.background.color}"
-          }
-        }
-      },
-      "focus": {
-        "outline": {
-          "width": {
-            "$type": "dimension",
-            "$value": "2px"
-          },
-          "offset": {
-            "$type": "dimension",
-            "$value": "2px"
-          },
-          "color": {
-            "$type": "color",
-            "$value": "{link.focus.outline.color}"
-          }
-        }
-      },
-      "active": {
-        "background": {
-          "color": {
-            "$type": "color",
-            "$value": "{btn.close.background.color}"
-          }
-        },
-        "icon": {
-          "color": {
-            "$type": "color",
-            "$value": "{link.active.color}"
-          }
-        }
-      }
-    }
-  }
-}

package/design-tokens/tokens/design-tokens/_src/btn-color-themes.minimo.tokens.jsonc

@@ -1,182 +0,0 @@
-// -----------------------------------------------------------------------
-// Generated file — do not edit manually.
-// This file is produced by the design-token build pipeline.
-// Source of truth: the token files in the project source directory.
-// Re-generate with: node build-tokens.mjs --config <path/to/config>
-// -----------------------------------------------------------------------
-{
-  "btn": {
-    "primary": {
-      "background": {
-        "color": {
-          "$type": "color",
-          "$value": "{primary.100}"
-        }
-      },
-      "color": {
-        "$type": "color",
-        "$value": "{primary.100-fg}"
-      },
-      "border": {
-        "color": {
-          "$type": "color",
-          "$value": "{btn.primary.background.color}"
-        }
-      },
-      "focus": {
-        "outline": {
-          "color": {
-            "$type": "color",
-            "$value": "color-mix(in srgb, {btn.primary.background.color} 60%, transparent)"
-          }
-        }
-      },
-      "hover": {
-        "background": {
-          "color": {
-            "$type": "color",
-            "$value": "{btn.primary.color}"
-          }
-        },
-        "color": {
-          "$type": "color",
-          "$value": "{btn.primary.background.color}"
-        },
-        "border": {
-          "color": {
-            "$type": "color",
-            "$value": "{btn.primary.hover.color}"
-          }
-        }
-      },
-      "active": {
-        "background": {
-          "color": {
-            "$type": "color",
-            "$value": "color-mix(in srgb, {btn.primary.background.color} 60%, #000)"
-          }
-        },
-        "color": {
-          "$type": "color",
-          "$value": "{btn.primary.color}"
-        },
-        "border": {
-          "color": {
-            "$type": "color",
-            "$value": "{btn.primary.active.background.color}"
-          }
-        }
-      },
-      "hollow": {
-        "background": {
-          "color": {
-            "$type": "color",
-            "$value": "{btn.primary.color}"
-          }
-        },
-        "color": {
-          "$type": "color",
-          "$value": "{btn.primary.background.color}"
-        },
-        "hover": {
-          "background": {
-            "color": {
-              "$type": "color",
-              "$value": "{btn.primary.background.color}"
-            }
-          },
-          "color": {
-            "$type": "color",
-            "$value": "{btn.primary.color}"
-          }
-        }
-      }
-    },
-    "secondary": {
-      "background": {
-        "color": {
-          "$type": "color",
-          "$value": "{secondary.100}"
-        }
-      },
-      "color": {
-        "$type": "color",
-        "$value": "{secondary.100-fg}"
-      },
-      "border": {
-        "color": {
-          "$type": "color",
-          "$value": "{btn.secondary.background.color}"
-        }
-      },
-      "focus": {
-        "outline": {
-          "color": {
-            "$type": "color",
-            "$value": "color-mix(in srgb, {btn.secondary.background.color} 60%, transparent)"
-          }
-        }
-      },
-      "hover": {
-        "background": {
-          "color": {
-            "$type": "color",
-            "$value": "{btn.secondary.color}"
-          }
-        },
-        "color": {
-          "$type": "color",
-          "$value": "{btn.secondary.background.color}"
-        },
-        "border": {
-          "color": {
-            "$type": "color",
-            "$value": "{btn.secondary.hover.color}"
-          }
-        }
-      },
-      "active": {
-        "background": {
-          "color": {
-            "$type": "color",
-            "$value": "color-mix(in srgb, {btn.secondary.background.color} 60%, #000)"
-          }
-        },
-        "color": {
-          "$type": "color",
-          "$value": "{btn.secondary.color}"
-        },
-        "border": {
-          "color": {
-            "$type": "color",
-            "$value": "{btn.secondary.active.background.color}"
-          }
-        }
-      },
-      "hollow": {
-        "background": {
-          "color": {
-            "$type": "color",
-            "$value": "{btn.secondary.color}"
-          }
-        },
-        "color": {
-          "$type": "color",
-          "$value": "{btn.secondary.background.color}"
-        },
-        "hover": {
-          "background": {
-            "color": {
-              "$type": "color",
-              "$value": "{btn.secondary.background.color}"
-            }
-          },
-          "color": {
-            "$type": "color",
-            "$value": "{btn.secondary.color}"
-          }
-        }
-      }
-    }
-  }
-}