@massimo-cassandro/minimo 1.19.8 → 1.19.10

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

@@ -18,7 +18,7 @@ const minimo_path = '../../node_modules/@massimo-cassandro/minimo';
 const config = {
 
   // ---------------------------------------------------------------------------
-  // build-tokens.mjs settings
+  // BUILD-TOKENS & STYLE-DICTIONARY SETTINGS
   // ---------------------------------------------------------------------------
 
   // Path to the stylelint config used to lint the generated CSS file
@@ -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
@@ -49,11 +49,35 @@ const config = {
 
   ],
 
+  // If true, custom properties already present in the CSS destination file
+  // (destFile, from a previous build) take priority over the ones generated
+  // by this build. Properties found only in the pre-existing file (no longer
+  // 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
+  // and placed at the beginning of the output CSS file
+  colorPropertiesPrefixes: ['accent', 'primary', 'secondary', 'neutral'],
+
+
+  // ---------------------------------------------------------------------------
+  // PENPOT / FIGMA
   // ---------------------------------------------------------------------------
   // Optional design tokens output
   // Generates one or more json(c) files in addition to the CSS output file, for use
   // 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
@@ -61,32 +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',
-
-  // If true, custom properties already present in the CSS destination file
-  // (destFile, from a previous build) take priority over the ones generated
-  // by this build. Properties found only in the pre-existing file (no longer
-  // 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.
-  mergeCustomProps: false,
-
+  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/config.mjs

@@ -81,6 +81,13 @@ export const penpotExpressions = VALID_EXPR_MODES.includes(buildConfig.penpotExp
 // build-tokens-src/merge-css.mjs). Default: false.
 export const mergeCustomProps = buildConfig.mergeCustomProps === true;
 
+// colorPropertiesPrefixes: custom properties whose first hyphen-separated
+// name segment matches one of these prefixes are grouped together and moved
+// to the beginning of the generated CSS file (see formats/css.mjs). Default: [].
+export const colorPropertiesPrefixes = Array.isArray(buildConfig.colorPropertiesPrefixes)
+  ? buildConfig.colorPropertiesPrefixes
+  : [];
+
 // ---------------------------------------------------------------------------
 // Source: resolve patterns relative to the config directory and normalise to
 // forward-slash absolute paths (fast-glob, used internally by Style Dictionary,

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

@@ -239,19 +239,54 @@ StyleDictionary.registerFormat({
     const sortedProps = Object.entries(finalProps)
       .sort(([a], [b]) => a.localeCompare(b, 'en', { numeric: true, sensitivity: 'base' }));
 
+    // colorPropertiesPrefixes: properties whose first hyphen-separated name
+    // segment matches one of these prefixes are pulled out and placed, in
+    // prefix-list order, at the beginning of the output file.
+    const colorPropertiesPrefixes = options.colorPropertiesPrefixes ?? [];
+    const colorProps = [];
+    const restProps = [];
+    for (const entry of sortedProps) {
+      const prefix = entry[0].split('-')[0];
+      if (colorPropertiesPrefixes.includes(prefix)) {
+        colorProps.push(entry);
+      } else {
+        restProps.push(entry);
+      }
+    }
+    colorProps.sort(([a], [b]) => {
+      const prefixA = a.split('-')[0];
+      const prefixB = b.split('-')[0];
+      const idxA = colorPropertiesPrefixes.indexOf(prefixA);
+      const idxB = colorPropertiesPrefixes.indexOf(prefixB);
+      if (idxA !== idxB) return idxA - idxB;
+      return a.localeCompare(b, 'en', { numeric: true, sensitivity: 'base' });
+    });
+
     // A blank line is inserted between blocks of properties sharing the same
     // first hyphen-separated segment (e.g. all `btn-*` together), to visually
     // group related custom properties in the generated file.
     const outLines = [];
     let prevPrefix = null;
-    for (const [name, tail] of sortedProps) {
-      const prefix = name.split('-')[0];
-      if (prevPrefix !== null && prefix !== prevPrefix) {
-        outLines.push('');
+    const appendBlock = (props) => {
+      for (const [name, tail] of props) {
+        const prefix = name.split('-')[0];
+        if (prevPrefix !== null && prefix !== prevPrefix) {
+          outLines.push('');
+        }
+        outLines.push(`  --${name}: ${tail}`);
+        prevPrefix = prefix;
       }
-      outLines.push(`  --${name}: ${tail}`);
-      prevPrefix = prefix;
+    };
+
+    if (colorProps.length) {
+      outLines.push('  /** COLORS **/');
+    }
+    appendBlock(colorProps);
+    if (colorProps.length && restProps.length) {
+      outLines.push('', '  /* ---------------------- */', '');
+      prevPrefix = null;
     }
+    appendBlock(restProps);
 
     customPropsCount = sortedProps.length;
     return `${selector} {\n${outLines.join('\n')}\n}\n`;

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

@@ -44,6 +44,7 @@ const PENPOT_TRANSFORMS = [
  *                                                   Collected from sd.allTokens after SD initialisation.
  *                                                   Ignored when penpotDestFile is set.
  * @param {'keep'|'calc'|'resolve'} opts.penpotExpressions  How to handle math expressions in dimension tokens.
+ * @param {string[]}        opts.colorPropertiesPrefixes  Name prefixes grouped at the top of the CSS output.
  * @returns {Record<string, PlatformConfig>} platforms object ready for Style Dictionary config
  */
 export const buildPlatforms = ({
@@ -54,6 +55,7 @@ export const buildPlatforms = ({
   penpotFormat,
   penpotExpressions = 'keep',
   concreteFilePaths = [],
+  colorPropertiesPrefixes = [],
 }) => {
   /** @type {Record<string, PlatformConfig>} */
   const platforms = {
@@ -67,6 +69,7 @@ export const buildPlatforms = ({
           options: {
             outputReferences: true,
             showFileHeader: true,
+            colorPropertiesPrefixes,
           },
         },
       ],

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

@@ -32,6 +32,7 @@ import {
   penpotExpressions,
   source,
   mergeCustomProps,
+  colorPropertiesPrefixes,
 } from './build-tokens-src/config.mjs';
 
 // ── 2. Custom transforms ─────────────────────────────────────────────────────
@@ -95,6 +96,7 @@ const sd = new StyleDictionary({
     penpotFormat,
     penpotExpressions,
     concreteFilePaths,
+    colorPropertiesPrefixes,
   }),
 });
 

package/dev-tools/starter-kit/webpack-template.ejs

@@ -11,6 +11,7 @@
     <!-- <%= require('./frontend/favicons/output/favicons.incl.ejs')({}) %> -->
 
     <title><%= htmlWebpackPlugin.options.title %></title>
+    <!-- <base href="<%= htmlWebpackPlugin.options.base %>"> -->
     <%= htmlWebpackPlugin.tags.headTags %> <!-- opzionale, param `inject: false` -->
   </head>
   <body>

package/dev-tools/starter-kit/webpack.config.mjs

@@ -397,6 +397,7 @@ const config = {
       inject: 'body',
       title: 'XXXXX',
       minify: !isDevelopment
+      // base: isDevelopment ? '/' : '/xxxxx/',
     }),
 
     // =>> plugins: HtmlWebpackInjectAttributesPlugin

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.8",
+  "version": "1.19.10",
   "description": "Light css framework & utilities",
   "type": "module",
   "main": "./index.js",

package/src/css/forms/forms.css

@@ -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/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

@@ -1,7 +1,19 @@
 :root {
+  /** COLORS **/
   --accent: #567d0d;
   --accent-fg: #fff;
 
+  --primary-100: #083865;
+  --primary-100-fg: #fff;
+
+  --secondary-100: #650853;
+  --secondary-100-fg: #fff;
+
+  --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);
 
@@ -252,14 +264,8 @@
   --mpopup-min-width: 25rem;
   --mpopup-width: max-content;
 
-  --neutral-100: #666;
-  --neutral-100-fg: #fff;
-
   --overlay-color: rgb(0 0 0 / .6);
 
-  --primary-100: #083865;
-  --primary-100-fg: #fff;
-
   --radius-base: var(--size-base);
   --radius-lg: var(--size-lg);
   --radius-md: var(--size-md);
@@ -276,9 +282,6 @@
   --sdt-pagination-padding-inline: var(--size-xs);
   --sdt-thead-hover-background-color: color-mix(in srgb, var(--table-thead-background-color) 90%, var(--accent));
 
-  --secondary-100: #650853;
-  --secondary-100-fg: #fff;
-
   --sf-macro-btn-close-background-color: var(--btn-close-background-color);
   --sf-macro-btn-close-position-bottom: auto;
   --sf-macro-btn-close-position-left: auto;

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,134 @@
+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 - 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,
+  checked = false,
+  wrapperClass = null,
+  addFormGroup = true,
+  condition = true
+}) {
+
+  if(!condition) {
+    return null;
+  }
+
+  const id = randomId();
+
+  const tag = {
+    className: classnames('form-check', !addFormGroup && wrapperClass),
+    children: [
+      `label.form-label[for:${id}] ${label}`,
+      {
+        tag: 'input',
+        className: 'form-control',
+        id: id,
+        attrs: {
+          type: 'checkbox',
+          value: value,
+          name: name,
+          checked: checked
+        }
+      }
+    ]
+  };
+
+  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