@massimo-cassandro/minimo 1.19.9 → 1.19.11

package/design-tokens/tokens-config-sample.mjs

@@ -30,7 +30,7 @@ const config = {
   // Output filename for the generated CSS file
   destFile: 'custom-properties.css',
 
-  // Source token files — accepts paths, globs, or a mix of both.
+  // Source token files — accept paths, globs, or a mix of both.
   // Supported formats: .json, .jsonc, .mjs (must export a DTCG-compliant default object)
   //
   // WARNING: do not use path.join() to build glob patterns — it may corrupt
@@ -55,6 +55,7 @@ const config = {
   // generated) are kept too. Useful to preserve manual overrides/additions
   // made directly in the compiled CSS across rebuilds. Ignored on the first
   // build, when destFile does not exist yet. Default: false.
+  // Comments at the end of custom properties are preserved, while full-line ones will be lost.
   mergeCustomProps: false,
 
   // Properties whose names begin with one of the following strings are grouped
@@ -70,6 +71,13 @@ const config = {
   // in Penpot or Figma projects or as an alternative to the .mjs source files
   // ---------------------------------------------------------------------------
 
+  // How to handle math expressions in dimension token $values (e.g. "{size.base} * .25"):
+  //   'keep'    write the expression unchanged
+  //   'calc'    — wrap in CSS calc(): "calc({size.base} * .25)"
+  //   'resolve' — (default) evaluate numerically, inheriting the unit from the first referenced token
+  //               e.g. {size.base} = 16px, "{size.base} * .25" -> "4px"
+  penpotExpressions: 'resolve',
+
   // Output format for Penpot token files: 'jsonc' or 'json'
   //   'jsonc' -> adds a generated-file disclaimer header, uses .jsonc extension
   //   'json'  -> plain JSON, no disclaimer
@@ -77,23 +85,16 @@ const config = {
 
   // Output directory for the Penpot design token files.
   // Set to null (or omit) to disable json output entirely.
-  penpotBuildPath: null || './path/to/generated/design-tokens-dir',
+  penpotBuildPath: null, // or './path/to/generated/design-tokens-dir',
 
   // Base name (without extension) for the aggregated Penpot output file.
   // The extension is added automatically based on penpotFormat.
   // Set to null (or omit) to generate one file per .mjs source file instead.
-  penpotDestFile: null || 'tokens',
-
-  // How to handle math expressions in dimension token $values (e.g. "{size.base} * .25"):
-  //   'keep'    write the expression unchanged
-  //   'calc'    — wrap in CSS calc(): "calc({size.base} * .25)"
-  //   'resolve' — (default) evaluate numerically, inheriting the unit from the first referenced token
-  //               e.g. {size.base} = 16px, "{size.base} * .25" -> "4px"
-  penpotExpressions: 'resolve',
+  penpotDestFile: null, // or 'tokens' (or else),
 
 
   // ---------------------------------------------------------------------------
-  // CHECK-UNRESOLVED-CUSTOM-PROPS.MJS SETTINGS
+  // CHECK-UNRESOLVED-CUSTOM-PROPS SETTINGS
   // ---------------------------------------------------------------------------
 
   // If true, also reports custom properties that are defined (in destFile or

package/design-tokens/utilities/build-tokens-src/formats/css.mjs

@@ -283,7 +283,7 @@ StyleDictionary.registerFormat({
     }
     appendBlock(colorProps);
     if (colorProps.length && restProps.length) {
-      outLines.push('', '');
+      outLines.push('', '  /* ---------------------- */', '');
       prevPrefix = null;
     }
     appendBlock(restProps);

package/index.js

@@ -1,6 +1,7 @@
 // utilities
 export { betterText } from './src/utilities/better-text.js';
-export { buildPictureTag } from './src/utilities/build-picture-tag.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';

package/package.json

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

package/src/css/forms/forms.css

@@ -112,7 +112,7 @@ select.form-control {
 
 input[type='checkbox'] {
   color: var(--form-control-text-color);
-  accent-color: var(--accent-color);
+  accent-color: var(--accent);
   transform-origin: center;
   scale: 1.3;
 }
@@ -120,6 +120,8 @@ input[type='checkbox'] {
 /* da bs5 */
 /* versione con label a destra */
 /* TODO rivedere. sostituire float con flex? */
+/* TODO eliminare necessità di stare dentro un `.form-group` */
+/* TODO aggiungere esempi di uso */
 .form-check {
   display: block;
   padding-left: 1.5em;

package/src/css/layout-base.css

@@ -8,7 +8,7 @@ html, body {
   font-style: var(--font-style-base);
   line-height: var(--line-height-base);
   color: var(--text-color);
-  accent-color: var(--accent-color);
+  accent-color: var(--accent);
   background-color: var(--body-background-color);
 
 }

package/src/css/text.css

@@ -3,42 +3,6 @@ p {
   margin: 0 0 var(--size-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 {
-    outline: none;
-  }
-
-  &: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-background-color);
-    outline: 2px solid var(--link-color);
-    background-color: var(--link-color);
-    offset: 0;
-  }
-}
-
 strong, b {
   font-weight: 700;
 }

package/src/custom-properties.css

@@ -12,6 +12,7 @@
   --neutral-100: #666;
   --neutral-100-fg: #fff;
 
+  /* ---------------------- */
 
   --alert-border-radius: var(--radius-sm);
   --alert-box-shadow: 0 0 .5rem 0 oklch(0% 0 0 / .5);

package/src/minimo.css

@@ -37,7 +37,7 @@
 @import '@minimo/css/dimensions.css';
 @import '@minimo/css/display.css';
 @import '@minimo/css/margin-padding.css';
-/* @import '@minimo/css/margin-padding-media.css';  responsive verion */
+/* @import '@minimo/css/margin-padding-media.css';  responsive version */
 /* alternative boostrap naming
 @import '@minimo/css/margin-padding-bootstrap.css';
 @import '@minimo/css/margin-padding-bootsrap-media.css';

package/src/utilities/dom-builder-helpers/README.md

@@ -0,0 +1,2 @@
+collection of helpers to build basic tags.
+All functions return a domBuilder array/object

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

@@ -0,0 +1,142 @@
+import { classnames } from '../classnames.js';
+import { randomId } from '../random-id.js';
+
+/**
+ * Input tag builder
+ *
+ * @param {Object} args
+ * @param {string} args.label - input label.
+ * @param {string | null} args.name - input `name` attribute.
+ * @param {string | number | null} args.defaultValue - input `value` attribute.
+ * @param {string | null} [args.type='text'] - input `type` attribute.
+ * @param {string | null} [args.wrapperClass=null] - optional class to be added to the `.form-group` wrapper.
+ * @param {boolean} [args.condition=true] - When false, the function returns `null` without building anything.
+ * @returns {DomBuilderItem|null} The `input` domBuilder item, or `null` when `condition` is false.
+ */
+export function buildInputTag({
+  label,
+  name,
+  defaultValue,
+  type = 'text',
+  wrapperClass = null,
+  condition = true
+}){
+
+  if(!condition) {
+    return null;
+  }
+
+  const id = randomId();
+
+  return {
+    className: classnames('form-group', wrapperClass),
+    children: [
+      `label.form-label[for:${id}] ${label}`,
+      `input#${id}.form-control[type: ${type}, name: ${name}, value: ${defaultValue}]`
+    ]
+  };
+}
+
+
+/**
+ * Checkbox tag builder
+ *
+ * @param {Object} args
+ * @param {string} args.label - checkbox label.
+ * @param {string | null} args.name - checkbox `name` attribute.
+ * @param {string | number | null} [args.value=1] - checkbox `value` attribute.
+ * @param {boolean} [args.checked=false] - checkbox `checked` attribute.
+ * @param {string | null} [args.wrapperClass=null] - optional class to be added to the `.form-group` wrapper (used only when `addFormGroup` is true).
+ * @param {boolean} [args.addFormGroup=true] - When true, wraps the checkbox in a `.form-group` element.
+ * @param {boolean} [args.condition=true] - When false, the function returns `null` without building anything.
+ * @returns {DomBuilderItem|null} The `.form-check` (or `.form-group`-wrapped) domBuilder item, or `null` when `condition` is false.
+ */
+export function buildCheckboxTag({
+  label,
+  name,
+  value = 1,
+  checked = false,
+  wrapperClass = null,
+  addFormGroup = true,
+  condition = true
+}) {
+
+  if(!condition) {
+    return null;
+  }
+
+  /*
+  <div class="form-group">
+    <div class="form-check">
+      <input type="checkbox" id="..." name="..." class="form-check-input" value="1">
+      <label for="..." class="form-label">...</label>
+    </div>
+  </div>
+  */
+  const id = randomId();
+
+  const tag = {
+    className: classnames('form-check', !addFormGroup && wrapperClass),
+    children: [
+      {
+        tag: 'input',
+        className: 'form-check-input',
+        id: id,
+        attrs: {
+          type: 'checkbox',
+          value: value,
+          name: name,
+          checked: checked
+        }
+      },
+      `label.form-label[for:${id}] ${label}`,
+    ]
+  };
+
+  if(addFormGroup) {
+    return {
+      className: classnames('form-group', wrapperClass),
+      children: [ tag ]
+    };
+
+  } else {
+    return tag;
+
+  }
+
+}
+
+
+/**
+ * Textarea tag builder
+ *
+ * @param {Object} args
+ * @param {string} args.label - textarea label.
+ * @param {string | null} args.name - textarea `name` attribute.
+ * @param {string | number | null} args.defaultValue - textarea content.
+ * @param {string | null} [args.wrapperClass=null] - optional class to be added to the `.form-group` wrapper.
+ * @param {boolean} [args.condition=true] - When false, the function returns `null` without building anything.
+ * @returns {DomBuilderItem|null} The `textarea` domBuilder item, or `null` when `condition` is false.
+ */
+export function buildTextareaTag({
+  label,
+  name,
+  defaultValue,
+  wrapperClass = null,
+  condition = true
+}) {
+
+  if(!condition) {
+    return null;
+  }
+
+  const id = randomId();
+
+  return {
+    className: classnames('form-group', wrapperClass),
+    children: [
+      `label.form-label[for:${id}] ${label}`,
+      `textarea#${id}.form-control[name: ${name}] ${defaultValue}`
+    ]
+  };
+}

package/src/utilities/{build-picture-tag.js → dom-builder-helpers/picture-tag.js}

@@ -1,7 +1,5 @@
 /*! minimo - buildPictureTag */
-import { classnames } from './classnames.js';
-
-/** @typedef {import('./dom-builder/dom-builder.js').DomBuilderItem} DomBuilderItem */
+import { classnames } from '../classnames.js';
 
 /**
  * @typedef {Object} PictureSizeEntry