@massimo-cassandro/minimo 0.3.6 → 0.4.0

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

@@ -0,0 +1,98 @@
+// tokens-config-sample.mjs
+// Sample project config for build-tokens.mjs and check-unresolved-custom-props.mjs.
+// Copy and adapt this file for each project; pass it via the --config flag.
+//
+// All paths are relative to this config file (not to the CWD).
+
+// import { homedir } from 'os';
+import path from 'path';
+
+// Path to the design token source files.
+// You can use an absolute path, a relative path, or build it programmatically.
+
+// Example using a local node_modules package (JS source files)
+const minimo_path = '../../node_modules/@massimo-cassandro/minimo/design-tokens-src';
+
+// Alternative: pre-built JSONC files from the same package
+// const minimo_path = '../../node_modules/@massimo-cassandro/minimo/design-tokens';
+
+// For local testing
+// const minimo_path = path.resolve(homedir(), 'Sites/minimo/src');
+
+const config = {
+
+  // ---------------------------------------------------------------------------
+  // build-tokens.mjs settings
+  // ---------------------------------------------------------------------------
+
+  // Path to the stylelint config used to lint the generated CSS file
+  stylelintConfigPath: '../../stylelint.config.mjs',
+
+  // Output directory for the CSS file generated by Style Dictionary
+  buildPath: '../src/css',
+
+  // Output filename for the generated CSS file
+  destFile: 'custom-properties.css',
+
+  // Source token files — accepts 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
+  // the pattern syntax. Use template literals instead:
+  //   OK:  `${minimo_path}/**/*.{json,mjs}`
+  //   NO:  path.join(minimo_path, '/**/*.{json,mjs}')
+  source: [
+    `${minimo_path}/**/*.{jsonc,json,mjs}`,
+    './project-tokens/*.jsonc',
+
+    // optional extra token source (in this example, openProps, https://open-props.style/)
+    // '../../node_modules/open-props/open-props.style-dictionary-tokens.json',
+  ],
+
+  // ---------------------------------------------------------------------------
+  // 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
+  // ---------------------------------------------------------------------------
+  // Output format for Penpot token files: 'jsonc' or 'json'
+  //   'jsonc' -> adds a generated-file disclaimer header, uses .jsonc extension
+  //   'json'  -> plain JSON, no disclaimer
+  penpotFormat: 'jsonc',
+
+  // Output directory for the Penpot design token files.
+  // Set to null (or omit) to disable json output entirely.
+  penpotBuildPath: './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: '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',
+
+  // ---------------------------------------------------------------------------
+  // check-unresolved-custom-props.mjs settings
+  // ---------------------------------------------------------------------------
+
+  // Additional CSS files that define custom properties used in the project
+  // but not generated by build-tokens (e.g. third-party libraries)
+  extra_custom_props_files: [
+    // '../../node_modules/open-props/open-props.min.css'
+  ],
+
+  // Directory containing the CSS files to scan for unresolved custom properties
+  dir_to_check: '../../src',
+
+  // Regular expressions for custom property names to exclude from the check.
+  // Useful for intentionally private/internal props (e.g. prefixed with --_).
+  exclude_pattern: [
+    /^--_/,
+  ],
+};
+
+export default config;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massimo-cassandro/minimo",
-  "version": "0.3.6",
+  "version": "0.4.0",
   "description": "Light css framework",
   "type": "module",
   "homepage": "https://github.com/massimo-cassandro/minimo#readme",
@@ -8,8 +8,8 @@
     "url": "https://github.com/massimo-cassandro/minimo/issues"
   },
   "bin": {
-    "buildTokens": "./src/design-tokens-utilities/build-tokens.mjs",
-    "checkUnresolvedProps": "./src/design-tokens-utilities/check-unresolved-custom-props.mjs"
+    "buildTokens": "./design-tokens-utilities/build-tokens.mjs",
+    "checkUnresolvedProps": "./design-tokens-utilities/check-unresolved-custom-props.mjs"
   },
   "repository": {
     "type": "git",
@@ -19,8 +19,8 @@
     "UPD-version": "npx update-version  # --config=./dev-utilities.config.mjs",
     "upd@m": "npx upd@m",
     "npm-publish": "npm publish",
-    "build-tokens": "node ./src/design-tokens-utilities/build-tokens.mjs --config ./test/tokens-test/tokens-config.mjs",
-    "check unresolved props": "node ./src/design-tokens-utilities/check-unresolved-custom-props.mjs --config ./test/tokens-test/tokens-config.mjs"
+    "build-tokens": "node ./design-tokens-utilities/build-tokens.mjs --config ./tokens-config.mjs",
+    "check unresolved props": "node ./design-tokens-utilities/check-unresolved-custom-props.mjs --config ./tokens-config.mjs"
   },
   "license": "MIT",
   "author": "Massimo Cassandro",
@@ -29,10 +29,14 @@
   },
   "main": "./src/index.js",
   "files": [
-    "src/**/*.{js,mjs,css,svg,tokens.json,tokens.jsonc,md}"
+    "src/**/*.{js,mjs,css,svg,md}",
+    "design-tokens/**/*.{tokens.json,tokens.jsonc}",
+    "design-tokens-src/**/*.{tokens.json,tokens.jsonc,mjs,js,md}",
+    "design-tokens-utilities/**/*.{mjs,md}"
   ],
   "devDependencies": {
     "@massimo-cassandro/dev-updater": "^3.0.3",
+    "@massimo-cassandro/eslint-config": "^3.0.6",
     "@massimo-cassandro/stylelint-config": "^2.3.4",
     "style-dictionary": "^5.4.0"
   }

package/src/components/{overlay.js → overlay/overlay.js}

@@ -1,4 +1,4 @@
-// import './overlay.css'; incorporato nel css principale
+import './overlay.css'; 
 
 export function overlay(context = document.body, scroll_lock = false) {
   context.insertAdjacentHTML('beforeend', '<div class="overlay"/>');

package/src/{css/dialog-content.css → components/popup-page/popup-page.css}

@@ -37,7 +37,7 @@
     aspect-ratio: 1;
     padding: 4px;
     background-color: var(--body-background-color);
-    border: 1px solid var(--gray-4);
+    border: 1px solid var(--neutral-base);
     border-radius: 50%;
     box-shadow: var(--shadow-3);
 

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

@@ -1,6 +1,8 @@
-import './dialog-content.css';
-import x_icon from '@icone/x.svg?inline';
-import { spinner } from './spinner/spinner';
+// TODO completare
+
+import './popup-page.css';
+import xIcon from '@icone/x.svg?inline';
+import { spinner } from '../spinner/spinner';
 /**
   `indicator_class`: classe da aggiungere al wrapper per indicare in modo univoco il dialog
  */
@@ -9,7 +11,7 @@ export function content_dialog_markup(indicator_class) {
   return `<dialog class="${indicator_class} content-dialog">` +
     '<div class="content-dialog-inner">' +
       '<div class="content-dialog-close">' +
-        `<button type="button" class="btn-reset content-dialog-close-btn" aria-label="Chiudi finestra">${x_icon}</button>` +
+        `<button type="button" class="btn-reset content-dialog-close-btn" aria-label="Chiudi finestra">${xIcon}</button>` +
       '</div>' +
       '<div class="content-dialog-body"></div>' +
     '</div>'+

package/src/custom-properties-default.css

@@ -44,16 +44,16 @@
   --btn-md-padding-inline: var(--size-sm);
   --btn-padding-block: var(--size-xs);
   --btn-padding-inline: var(--size-base);
-  --btn-primary-active-background-color: color-mix(in srgb, var(--btn-primary-background-color) 60%, #000);
+  --btn-primary-active-background-color: calc(color-mix(in srgb, var(--btn-primary-background-color) 60%, #000) ;);
   --btn-primary-active-border-color: var(--btn-primary-active-background-color);
   --btn-primary-active-color: var(--btn-primary-color);
   --btn-primary-background-color: var(--primary-base);
   --btn-primary-border-color: var(--btn-primary-background-color);
   --btn-primary-color: var(--primary-on-base);
-  --btn-primary-focus-outline-color: color-mix(in srgb, var(--btn-primary-background-color) 60%, transparent);
+  --btn-primary-focus-outline-color: calc(color-mix(in srgb, var(--btn-primary-background-color) 60%, transparent) ;);
   --btn-primary-hollow-background-color: var(--btn-primary-color);
   --btn-primary-hollow-color: var(--btn-primary-background-color);
-  --btn-primary-hollow-hover-background-color: color-mix(in srgb, var(--btn-primary-hollow-color) 20%, transparent);
+  --btn-primary-hollow-hover-background-color: calc(color-mix(in srgb, var(--btn-primary-hollow-color) 20%, transparent) ;);
   --btn-primary-hollow-hover-color: var(--btn-primary-hollow-color);
   --btn-primary-hover-background-color: var(--btn-primary-color);
   --btn-primary-hover-border-color: var(--btn-primary-hover-color);
@@ -181,7 +181,7 @@
   --sdt-pagination-border: var(--btn-border-width) var(--neutral-base);
   --sdt-pagination-padding-block: var(--size-xxs);
   --sdt-pagination-padding-inline: var(--size-xs);
-  --sdt-thead-hover-background-color: color-mix(in srgb, var(--table-thead-background-color) 90%, var(--accent-base));
+  --sdt-thead-hover-background-color: calc(color-mix(in srgb, var(--table-thead-background-color) 90%, var(--accent-base)));
   --secondary-base: #650853;
   --secondary-on-base: #fff;
   --sf-macro-btn-close-background-color: var(--body-background-color);
@@ -189,7 +189,7 @@
   --sf-macro-rows-border: 1px solid var(--neutral-base);
   --sf-macro-rows-border-radius: var(--radius-xs);
   --sf-macro-rows-even-background-color: var(--body-background-color);
-  --sf-macro-rows-hover-background-color: color-mix(in srgb, var(--body-background-color) 95%, #000);
+  --sf-macro-rows-hover-background-color: calc(color-mix(in srgb, var(--body-background-color) 95%, #000));
   --sf-macro-rows-margin-block-end: var(--size-base);
   --sf-macro-rows-padding: var(--size-xs);
   --size-2xl: 3rem;

package/src/icons/x.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg>

package/src/web-components/simple-datatable/simple-datatable.js

@@ -6,8 +6,8 @@ import { parseCols } from './src/parse-cols.js';
 
 import * as styles from './simple-datatable.module.css';
 
-import caretLeftIcon from './icons/caret-left.svg?inline';
-import caretRightIcon from './icons/caret-right.svg?inline';
+import caretLeftIcon from '../../icons/caret-left.svg?inline';
+import caretRightIcon from '../../icons/caret-right.svg?inline';
 
 // TODO possibilità di definizione cols anche da js. In questo caso, in presenza ANCHE dell'attributo, deve prevalere quest'ultimo
 

package/src/web-components/simple-datatable/simple-datatable.module.css

@@ -80,19 +80,19 @@
 
   &:not(.sortAscending):not(.sortDescending){
     .sortBtn::after {
-      content: url('./icons/arrows-down-up.svg?cssInline');
+      content: url('../../icons/arrows-down-up.svg?cssInline');
       opacity: .4;
     }
   }
 }
 .sortAscending {
   .sortBtn::after {
-    content: url('./icons/arrow-up.svg?cssInline');
+    content: url('../../icons/arrow-up.svg?cssInline');
   }
 }
 .sortDescending {
   .sortBtn::after {
-    content: url('./icons/arrow-down.svg?cssInline');
+    content: url('../../icons/arrow-down.svg?cssInline');
   }
 }
 

package/src/web-components/simple-datatable/src/parse-cols.js

@@ -6,8 +6,8 @@ import { classnames } from '@massimo-cassandro/js-utilities/index.js';
 
 import * as styles from '../simple-datatable.module.css';
 
-import checkIcon from '../icons/check-bold.svg?inline';
-import xIcon from '../icons/x-bold.svg?inline';
+import checkIcon from '../../../icons/check-bold.svg?inline';
+import xIcon from '../../../icons/x-bold.svg?inline';
 
 // col_obj è l'oggetto che descrive una singola colonna del datatable
 // vine utilizzato per produrre l'oggetto columns di simple-datatable

package/src/design-tokens/TODO.md

@@ -1,2 +0,0 @@
-* conversione in js?
-* automatizzare la creazione di proprietà ricorrenti (es il padding)

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

@@ -1,25 +0,0 @@
-{
-  "alert": {
-    "border": {
-      "radius": {
-        "$value": "{radius.sm}",
-        "$type": "dimension"
-      },
-    },
-
-    "box-shadow": {
-      // "$type": "string",
-      // "$value": "none"
-      "$type": "shadow",
-      "$value": [
-        {
-          "offsetX": 0,
-          "offsetY": 0,
-          "blur": "8px",
-          "spread": 0,
-          "color": "oklch(0 0 0 / 0.5)"
-        }
-      ]
-    }
-  }
-}

package/src/design-tokens/size.minimo.tokens.jsonc

@@ -1,101 +0,0 @@
-{
-
-
-  // in attesa di modifica dello script per il parser automatico delle espressioni
-  // NB: "$type": "string" necessario, dimension converte i valori come se fossero px
-  "size": {
-    "xs": {
-      "$value": ".5rem",
-      "$type": "dimension",
-      "$description": ""
-    },
-    "md": {
-      "$value": "1.2rem",
-      "$type": "dimension",
-      "$description": ""
-    },
-    "3xl": {
-      "$value": "4rem",
-      "$type": "dimension",
-      "$description": ""
-    },
-    "2xl": {
-      "$value": "3rem",
-      "$type": "dimension",
-      "$description": ""
-    },
-    "base": {
-      "$value": "1rem",
-      "$type": "dimension",
-      "$description": ""
-    },
-    "lg": {
-      "$value": "1.5rem",
-      "$type": "dimension",
-      "$description": ""
-    },
-    "xxs": {
-      "$value": ".25rem",
-      "$type": "dimension",
-      "$description": ""
-    },
-    "xl": {
-      "$value": "2rem",
-      "$type": "dimension",
-      "$description": ""
-    },
-    "sm": {
-      "$value": ".75rem",
-      "$type": "dimension",
-      "$description": ""
-    }
-  },
-
-  // "size": {
-  //   "xxs": {
-  //     "$value": "{size.base} * .25",
-  //     "$type": "dimension",
-  //     "$description": ""
-  //   },
-  //   "xs": {
-  //     "$value": "{size.base} * .5",
-  //     "$type": "dimension",
-  //     "$description": ""
-  //   },
-  //   "sm": {
-  //     "$value": "{size.base} * .75",
-  //     "$type": "dimension",
-  //     "$description": ""
-  //   },
-  //   "base": {
-  //     "$value": "1rem",
-  //     "$type": "dimension",
-  //     "$description": ""
-  //   },
-  //   "md": {
-  //     "$value": "{size.base} * 1.2",
-  //     "$type": "dimension",
-  //     "$description": ""
-  //   },
-  //   "lg": {
-  //     "$value": "{size.base} * 1.5",
-  //     "$type": "dimension",
-  //     "$description": ""
-  //   },
-  //   "xl": {
-  //     "$value": "{size.base} * 2",
-  //     "$type": "dimension",
-  //     "$description": ""
-  //   },
-  //   "2xl": {
-  //     "$value": "{size.base} * 3",
-  //     "$type": "dimension",
-  //     "$description": ""
-  //   },
-  //   "3xl": {
-  //     "$value": "{size.base} * 4",
-  //     "$type": "dimension",
-  //     "$description": ""
-  //   }
-  // }
-}