@massimo-cassandro/minimo 1.16.1 → 1.17.0

package/README.md

@@ -20,6 +20,15 @@ For a complete install of all required webpack modules, use the install script a
 ```bash
 zsh ./node_modules/@massimo-cassandro/minimo/dev-tools/starter-kit/starter-install.sh
 ```
+
+To bootstrap a project **before** installing the whole package, download only the `starter-kit` folder from the npm tarball and run the script from there:
+
+```bash
+curl -sL "$(npm view @massimo-cassandro/minimo dist.tarball)" | tar xz package/dev-tools/starter-kit
+zsh package/dev-tools/starter-kit/starter-install.sh
+rm -rf package
+```
+
 ---
 
 ## Dev Tools

package/design-tokens/_src/components/modal-alert.minimo.tokens.mjs

@@ -0,0 +1,164 @@
+export default {
+  'malert': {
+    background: {
+      color: {
+        $type: 'color',
+        $value: '#fff'
+      }
+    },
+    border: {
+      radius: {
+        $type: 'dimension',
+        $value: '{radius.xs}'
+      },
+    },
+    'box-shadow-color': {
+      $type: 'color',
+      $value: '#000'
+    },
+    // https://www.joshwcomeau.com/shadow-palette/
+    'box-shadow': {
+      $type: 'shadow',
+      $value: [
+        {
+          offsetX: '0',
+          offsetY: '.4px',
+          blur: '4px',
+          spread: '0',
+          color: 'color-mix(in srgb, {malert.box-shadow-color} 15%, transparent)'
+        },
+        {
+          offsetX: '-.3px',
+          offsetY: '3px',
+          blur: '3.3px',
+          spread: '-.5px',
+          color: 'color-mix(in srgb, {malert.box-shadow-color} 15%, transparent)'
+        },
+        {
+          offsetX: '-.5px',
+          offsetY: '6.1px',
+          blur: '6.6px',
+          spread: '-.9px',
+          color: 'color-mix(in srgb, {malert.box-shadow-color} 14%, transparent)'
+        },
+        {
+          offsetX: '-.9px',
+          offsetY: '11.2px',
+          blur: '12.1px',
+          spread: '-1.4px',
+          color: 'color-mix(in srgb, {malert.box-shadow-color} 14%, transparent)'
+        },
+        {
+          offsetX: '-1.6px',
+          offsetY: '19.5px',
+          blur: '21.1px',
+          spread: '-1.9px',
+          color: 'color-mix(in srgb, {malert.box-shadow-color} 13%, transparent)'
+        },
+        {
+          offsetX: '-2.7px',
+          offsetY: '32.7px',
+          blur: '35.4px',
+          spread: '-2.3px',
+          color: 'color-mix(in srgb, {malert.box-shadow-color} 13%, transparent)'
+        },
+        {
+          offsetX: '-4.3px',
+          offsetY: '52px',
+          blur: '56.4px',
+          spread: '-2.8px',
+          color: 'color-mix(in srgb, {malert.box-shadow-color} 12%, transparent)'
+        }
+      ]
+    },
+    backdrop: {
+      $type: 'color',
+      $value: 'rgb(0 0 0 / .7)'
+    },
+
+    success: {
+      bg: {
+        $type: 'color',
+        $value: '{status.success.background.color}'
+      },
+      fg: {
+        $type: 'color',
+        $value: '{status.success.fg}'
+      }
+    },
+    info: {
+      bg: {
+        $type: 'color',
+        $value: '{status.info.background.color}'
+      },
+      fg: {
+        $type: 'color',
+        $value: '{status.info.fg}'
+      }
+    },
+    warning: {
+      bg: {
+        $type: 'color',
+        $value: '{status.warning.background.color}'
+      },
+      fg: {
+        $type: 'color',
+        $value: '{status.warning.fg}'
+      }
+    },
+    error: {
+      bg: {
+        $type: 'color',
+        $value: '{status.danger.background.color}'
+      },
+      fg: {
+        $type: 'color',
+        $value: '{status.danger.fg}'
+      }
+    },
+    confirm: {
+      bg: {
+        $type: 'color',
+        $value: 'hsl(277deg 72% 45%)'
+      },
+      fg: {
+        $type: 'color',
+        $value: '#fff'
+      }
+    },
+
+    heading: {
+      font: {
+        family: {
+          $type: 'fontFamily',
+          $value: '{headings.font.family}'
+        },
+        size: {
+          $type: 'dimension',
+          $value: '{headings.h2.font.size}'
+        },
+        weight: {
+          $type: 'dimension',
+          $value: '{headings.font.weight}'
+        },
+      },
+      'line-height': {
+        $type: 'dimension',
+        $value: '{headings.line-height}'
+      }
+    },
+    text: {
+      font: {
+        family: {
+          $type: 'fontFamily',
+          $value: '{font.family}'
+        },
+        size: {
+          $type: 'dimension',
+          $value: '{font.size.base}'
+        },
+      }
+    }
+  }
+};
+

package/design-tokens/_src/components/slide-up-down-toggle.minimo.tokens.mjs

@@ -0,0 +1,9 @@
+export default {
+  'slide': {
+    'duration': {
+      $type: 'duration',
+      $value: '500ms'
+    },
+  }
+};
+

package/design-tokens/_src/headings.minimo.tokens.mjs

@@ -11,11 +11,19 @@ export default {
       $value: '{text.color}'
     },
     font: {
+      family: {
+        $type: 'fontFamily',
+        $value: '{font.family}'
+      },
       weight: {
         $type: 'string',
         $value: '{font.weight.semibold}'
       }
     },
+    'line-height': {
+      $type: 'dimension',
+      $value: '{line-height.xs}'
+    },
     h1: {
       font: {
         weight: {

package/design-tokens/_src/typography.minimo.tokens.mjs

@@ -1,8 +1,8 @@
 export default {
   font: {
     family: {
+      $type: 'fontFamily',
       $value: 'sans-serif',
-      $type: 'fontFamily'
     },
     'family-mono': {
       $value: '\'Monaspace Neon Var\', \'Monaspace Neon\', \'Aptos Mono\', \'Roboto Mono\', \'SFMono-Regular\', \'Menlo\', \'Monaco\', \'Consolas\', \'Liberation Mono\', \'Andale Mono\', \'Courier New\', monospace',

package/design-tokens/tokens/components/modal-alert.minimo.tokens.jsonc

@@ -0,0 +1,166 @@
+// -----------------------------------------------------------------------
+// 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>
+// -----------------------------------------------------------------------
+{
+  "malert": {
+    "background": {
+      "color": {
+        "$type": "color",
+        "$value": "#fff"
+      }
+    },
+    "border": {
+      "radius": {
+        "$type": "dimension",
+        "$value": "{radius.xs}"
+      }
+    },
+    "box-shadow-color": {
+      "$type": "color",
+      "$value": "#000"
+    },
+    "box-shadow": {
+      "$type": "shadow",
+      "$value": [
+        {
+          "offsetX": "0",
+          "offsetY": ".4px",
+          "blur": "4px",
+          "spread": "0",
+          "color": "color-mix(in srgb, #000 15%, transparent)"
+        },
+        {
+          "offsetX": "-.3px",
+          "offsetY": "3px",
+          "blur": "3.3px",
+          "spread": "-.5px",
+          "color": "color-mix(in srgb, #000 15%, transparent)"
+        },
+        {
+          "offsetX": "-.5px",
+          "offsetY": "6.1px",
+          "blur": "6.6px",
+          "spread": "-.9px",
+          "color": "color-mix(in srgb, #000 14%, transparent)"
+        },
+        {
+          "offsetX": "-.9px",
+          "offsetY": "11.2px",
+          "blur": "12.1px",
+          "spread": "-1.4px",
+          "color": "color-mix(in srgb, #000 14%, transparent)"
+        },
+        {
+          "offsetX": "-1.6px",
+          "offsetY": "19.5px",
+          "blur": "21.1px",
+          "spread": "-1.9px",
+          "color": "color-mix(in srgb, #000 13%, transparent)"
+        },
+        {
+          "offsetX": "-2.7px",
+          "offsetY": "32.7px",
+          "blur": "35.4px",
+          "spread": "-2.3px",
+          "color": "color-mix(in srgb, #000 13%, transparent)"
+        },
+        {
+          "offsetX": "-4.3px",
+          "offsetY": "52px",
+          "blur": "56.4px",
+          "spread": "-2.8px",
+          "color": "color-mix(in srgb, #000 12%, transparent)"
+        }
+      ]
+    },
+    "backdrop": {
+      "$type": "color",
+      "$value": "rgb(0 0 0 / .7)"
+    },
+    "success": {
+      "bg": {
+        "$type": "color",
+        "$value": "{status.success.background.color}"
+      },
+      "fg": {
+        "$type": "color",
+        "$value": "{status.success.fg}"
+      }
+    },
+    "info": {
+      "bg": {
+        "$type": "color",
+        "$value": "{status.info.background.color}"
+      },
+      "fg": {
+        "$type": "color",
+        "$value": "{status.info.fg}"
+      }
+    },
+    "warning": {
+      "bg": {
+        "$type": "color",
+        "$value": "{status.warning.background.color}"
+      },
+      "fg": {
+        "$type": "color",
+        "$value": "{status.warning.fg}"
+      }
+    },
+    "error": {
+      "bg": {
+        "$type": "color",
+        "$value": "{status.danger.background.color}"
+      },
+      "fg": {
+        "$type": "color",
+        "$value": "{status.danger.fg}"
+      }
+    },
+    "confirm": {
+      "bg": {
+        "$type": "color",
+        "$value": "hsl(277deg 72% 45%)"
+      },
+      "fg": {
+        "$type": "color",
+        "$value": "#fff"
+      }
+    },
+    "heading": {
+      "font": {
+        "family": {
+          "$type": "fontFamily",
+          "$value": "{headings.font.family}"
+        },
+        "size": {
+          "$type": "dimension",
+          "$value": "{headings.h2.font.size}"
+        },
+        "weight": {
+          "$type": "dimension",
+          "$value": "{headings.font.weight}"
+        }
+      },
+      "line-height": {
+        "$type": "dimension",
+        "$value": "{headings.line-height}"
+      }
+    },
+    "text": {
+      "font": {
+        "family": {
+          "$type": "fontFamily",
+          "$value": "{font.family}"
+        },
+        "size": {
+          "$type": "dimension",
+          "$value": "{font.size.base}"
+        }
+      }
+    }
+  }
+}

package/design-tokens/tokens/components/slide-up-down-toggle.minimo.tokens.jsonc

@@ -0,0 +1,14 @@
+// -----------------------------------------------------------------------
+// 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>
+// -----------------------------------------------------------------------
+{
+  "slide": {
+    "duration": {
+      "$type": "duration",
+      "$value": "500ms"
+    }
+  }
+}

package/design-tokens/tokens/headings.minimo.tokens.jsonc

@@ -17,11 +17,19 @@
       "$value": "{text.color}"
     },
     "font": {
+      "family": {
+        "$type": "fontFamily",
+        "$value": "{font.family}"
+      },
       "weight": {
         "$type": "string",
         "$value": "{font.weight.semibold}"
       }
     },
+    "line-height": {
+      "$type": "dimension",
+      "$value": "{line-height.xs}"
+    },
     "h1": {
       "font": {
         "weight": {

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

@@ -150,7 +150,7 @@ StyleDictionary.registerFormat({
     const sequenceList = [
       'xxs', 'xs', 'sm', 'base', 'md', 'lg', 'xl', 'xxl', 'xxxl', '2xl', '3xl',
       'xlight', 'light', 'regular', 'medium', 'semibold', 'bold', 'xbold'
-    ]
+    ];
 
     const sortFunction = (a, b) => {
       const idxA = sequenceList.indexOf(a.name);

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

@@ -110,7 +110,6 @@ const resolveExpression = (orig, tokenMap) => {
   if (!/^[\d\s+\-*/.()]+$/.test(expr)) return null;
 
   try {
-    // eslint-disable-next-line no-new-func
     const result = Function(`"use strict"; return (${expr})`)();
     if (typeof result !== 'number' || !isFinite(result)) return null;
     // Round to a reasonable precision to avoid floating-point noise
@@ -161,6 +160,7 @@ StyleDictionary.registerFormat({
             value = resolved;
           } else {
             // Resolution failed — keep the original and emit a warning
+            // eslint-disable-next-line no-console
             console.warn(`[build-tokens] penpot: could not resolve expression "${orig}" for token "${token.path.join('.')}". Keeping original.`);
             value = orig;
           }

package/design-tokens/utilities/check-unresolved-custom-props.mjs

@@ -16,7 +16,7 @@ import * as fs from 'node:fs';
 import { /* fileURLToPath,  */pathToFileURL } from 'url';
 // import { dirname } from 'path';
 import { glob } from 'node:fs/promises';
-import { styleText, parseArgs } from 'node:util';
+import { styleText } from 'node:util';
 
 // const __filename = fileURLToPath(import.meta.url);
 // const __dirname  = dirname(__filename);
@@ -24,22 +24,17 @@ import { styleText, parseArgs } from 'node:util';
 // ---------------------------------------------------------------------------
 // 1. Parse flags
 // ---------------------------------------------------------------------------
-const options = {
-  config: {
-    type: 'string',
-    short: 'c',
-  },
-};
+const args = process.argv.slice(2);
+const configFlagIndex = args.findIndex(arg => arg === '--config' || arg === '-c');
+const configArgPath = configFlagIndex !== -1 ? args[configFlagIndex + 1] : undefined;
 
-const { values } = parseArgs({ options });
-
-if (!values.config) {
+if (!configArgPath) {
   console.error(styleText(['red'], 'Error: you must provide the config path with --config or -c'));
   console.log('Example: node check-unresolved-custom-props.mjs --config ./config.mjs');
   process.exit(1);
 }
 
-const absoluteConfigPath = path.resolve(process.cwd(), values.config);
+const absoluteConfigPath = path.resolve(process.cwd(), configArgPath);
 const configDir = path.dirname(absoluteConfigPath);
 
 // ---------------------------------------------------------------------------
@@ -60,9 +55,13 @@ async function run() {
     const exclude = config.exclude_pattern ?? [];
 
     // Collect all .css files in the scan directory, excluding the token file itself
+    // and any file under a directory whose name starts with "TODO" (work-in-progress folders)
     const files = [];
     for await (const entry of glob(path.join(checkdir, '/**/*.css'))) {
-      if (!entry.endsWith(custom_prop_filename)) {
+      const relDirSegments = path.relative(checkdir, path.dirname(entry)).split(path.sep);
+      const isInTodoDir    = relDirSegments.some(segment => /^todo/i.test(segment));
+
+      if (!entry.endsWith(custom_prop_filename) && !isInTodoDir) {
         files.push(entry);
       }
     }

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

@@ -5,7 +5,7 @@
 // All paths are relative to this config file (not to the CWD).
 
 // import { homedir } from 'os';
-import path from 'path';
+// import path from 'path';
 
 // Path to the design token source files.
 // You can use an absolute path, a relative path, or build it programmatically.

package/dev-tools/README.md

@@ -26,7 +26,7 @@ Since the installation is fully overwrite-safe, the script can also be **re-run
 
 ### Without installing minimo
 
-To bootstrap a project **before** (or without) installing the whole package, download only the `starter-kit` folder from the npm tarball and run the script from there:
+To bootstrap a project **before** installing the whole package, download only the `starter-kit` folder from the npm tarball and run the script from there:
 
 ```bash
 curl -sL "$(npm view @massimo-cassandro/minimo dist.tarball)" | tar xz package/dev-tools/starter-kit

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

@@ -327,28 +327,6 @@ const config = {
           name: 'shared',
           chunks: 'all'
         }
-
-
-        // separazione @massimo-cassandro da node_modules:
-        // mc: {
-        //   test: /[\\/]node_modules\/@massimo-cassandro[\\/]/,
-        //   name: 'mc',
-        //   chunks: 'all'
-        // },
-        // shared: {
-        //   // test: /[\\/]node_modules[\\/]/,
-        //   test(module) {
-        //     // `module.resource` contains the absolute path of the file on disk.
-        //     // Note the usage of `path.sep` instead of / or \, for cross-platform compatibility.
-        //     return (
-        //       module.resource &&
-        //       module.resource.includes(`${path.sep}node_modules${path.sep}`) &&
-        //       !module.resource.includes(`${path.sep}@massimo-cassandro${path.sep}`)
-        //     );
-        //   },
-        //   name: 'shareds',
-        //   chunks: 'all'
-        // },
       }
     },
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massimo-cassandro/minimo",
-  "version": "1.16.1",
+  "version": "1.17.0",
   "description": "Light css framework & utilities",
   "type": "module",
   "main": "./index.js",
@@ -36,6 +36,7 @@
     "npm-publish": "npm publish",
     "upd@m": "npx upd@m",
     "build-tokens": "node ./design-tokens/utilities/build-tokens.mjs --config ./design-tokens/tokens-config.mjs",
+    "build-margin-padding-css": "node ./scripts/build-margin-padding-css.mjs",
     "check unresolved props": "node ./design-tokens/utilities/check-unresolved-custom-props.mjs --config ./design-tokens/tokens-config.mjs",
     "test": "node --test \"test/**/*.test.mjs\"",
     "checkJS": "npx tsc --noEmit -p jsconfig.json",