@massimo-cassandro/minimo 1.19.2 → 1.19.4

package/design-tokens/README.md

@@ -160,9 +160,12 @@ Alias references (`{color.brand.primary}`) are preserved in the output so Penpot
 
 ### `check-unresolved-custom-props.mjs`
 
-Scans all `.css` files in `dir_to_check` (recursively) and reports any `var(--...)` references that are not defined in the generated token CSS file or in any `extra_custom_props_files`.
+Scans all `.css` files in `dirToCheck` (recursively) and reports:
 
-Results are written to `unresolved-props.md` in the same directory as the config file.
+- **unresolved properties** — `var(--...)` references that are not defined in the generated token CSS file or in any `extraCustomPropsFiles`
+- **unused properties** — custom properties defined in the generated token CSS file (or an `extraCustomPropsFiles` entry) but never referenced via `var()` in any scanned CSS file. Only reported if `checkUnused: true` is set in the config, since it re-runs the Style Dictionary transform pipeline over the token sources to resolve, when possible, the `.mjs` source file for each unused property.
+
+Results are written to `unresolved-unused-props.md` in the same directory as the config file.
 
 #### Usage
 
@@ -172,11 +175,18 @@ npx checkUnresolvedProps --config ./path/to/tokens-config.mjs
 
 #### Output
 
-The script creates a `unresolved-props.md` file next to the config file. Each line links to the file and line number where the unresolved property is used:
+The script creates a `unresolved-unused-props.md` file next to the config file (only if there is at least one unresolved or unused property). Each unresolved entry links to the file and line number where the property is used; each unused entry links to its `.mjs` token source file when it can be resolved, otherwise just the property name is reported:
 
 ```markdown
-* [components.css :: 42](../src/components.css#L42) -> var(--color-action-hover)
-* [layout.css :: 17](../src/layout.css#L17) -> var(--spacing-missing)
+## Unresolved custom properties
+
+* [components.css](../src/components.css#L42) -> `--color-action-hover`
+* [layout.css](../src/layout.css#L17) -> `--spacing-missing`
+
+## Unused custom properties
+
+* [colors.minimo.tokens.mjs](../_src/colors.minimo.tokens.mjs) -> `--color-legacy-accent`
+* `--manually-added-prop`
 ```
 
 In VS Code, Option/Alt-clicking on the URL opens the file at the required line.
@@ -184,11 +194,11 @@ In VS Code, Option/Alt-clicking on the URL opens the file at the required line.
 
 #### Excluding properties
 
-Use `exclude_pattern` to suppress false positives — for example, internal/private custom properties that are defined dynamically or inline:
+Use `excludePattern` to suppress false positives — for example, internal/private custom properties that are defined dynamically or inline:
 
 ```js
 // skips all custom props starting with `--_` or `--js-`
-exclude_pattern: [
+excludePattern: [
   /^--_/,          
   /^--js-/,        
 ]

package/design-tokens/tokens/src/components/snackbar/snackbar.minimo.tokens.jsonc

@@ -22,7 +22,7 @@
         "$value": "none"
       },
       "border-radius": {
-        "$type": "color",
+        "$type": "dimension",
         "$value": "{radius.xs}"
       },
       "padding": {
@@ -81,6 +81,14 @@
         "color": {
           "$type": "color",
           "$value": "transparent"
+        },
+        "width": {
+          "$type": "dimension",
+          "$value": "{btn.close.border.width}"
+        },
+        "radius": {
+          "$type": "dimension",
+          "$value": "50%"
         }
       },
       "hover": {

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

@@ -89,18 +89,25 @@ const config = {
   // check-unresolved-custom-props.mjs settings
   // ---------------------------------------------------------------------------
 
+  // If true, also reports custom properties that are defined (in destFile or
+  // an extraCustomPropsFiles entry) but never referenced via var() in any
+  // scanned CSS file. Opt-in because it re-runs the Style Dictionary
+  // transform pipeline over the token sources to resolve, when possible, the
+  // .mjs source file for each unused property. Default: false.
+  checkUnused: true,
+
   // 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: [
+  extraCustomPropsFiles: [
     // '../../node_modules/open-props/open-props.min.css'
   ],
 
   // Directory containing the CSS files to scan for unresolved custom properties
-  dir_to_check: '../../src',
+  dirToCheck: '../../src',
 
   // Regular expressions for custom property names to exclude from the check.
   // Useful for intentionally private/internal props (e.g. prefixed with --_).
-  exclude_pattern: [
+  excludePattern: [
     /^--_/,
   ],
 };

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

@@ -10,6 +10,7 @@
 
 import * as path from 'node:path';
 import { pathToFileURL } from 'node:url';
+import { resolveSourcePaths } from './resolve-source-paths.mjs';
 
 // ---------------------------------------------------------------------------
 // Read the --config flag
@@ -83,34 +84,11 @@ export const mergeCustomProps = buildConfig.mergeCustomProps === true;
 // ---------------------------------------------------------------------------
 // Source: resolve patterns relative to the config directory and normalise to
 // forward-slash absolute paths (fast-glob, used internally by Style Dictionary,
-// requires forward slashes even on Windows).
-//
-// Glob patterns (containing *, ?, {, [) are NOT passed through path.join,
-// because path.join can normalise/collapse sequences that carry syntactic
-// meaning in a glob (e.g. "**"). They are only prefixed with configDir and
-// converted to forward slashes.
-// Concrete paths (no glob characters) are resolved canonically with path.resolve.
+// requires forward slashes even on Windows). See resolve-source-paths.mjs.
 //
 // WARNING: in the project config file, avoid building glob patterns with
 // path.join() — it may corrupt the pattern syntax. Use template literals:
 //   OK:  `${minimo_path}/**/*.{json,mjs}`
 //   NO:  path.join(minimo_path, '/**/*.{json,mjs}')
 // ---------------------------------------------------------------------------
-const GLOB_CHARS = /[*?{[]/;
-
-/** @param {string} s */
-const resolveSource = (s) => {
-  if (path.isAbsolute(s)) {
-    // Already absolute: only normalise separators (needed on Windows)
-    return s.split(path.sep).join('/');
-  }
-  if (GLOB_CHARS.test(s)) {
-    // Glob pattern: prefix with configDir without touching the pattern
-    const prefix = configDir.split(path.sep).join('/');
-    return `${prefix}/${s}`;
-  }
-  // Concrete relative path: canonical resolution
-  return path.resolve(configDir, s).split(path.sep).join('/');
-};
-
-export const source = buildConfig.source.map(resolveSource);
+export const source = resolveSourcePaths(buildConfig.source, configDir);

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

@@ -236,11 +236,24 @@ StyleDictionary.registerFormat({
     // Final output is always sorted alphabetically ascending by property
     // name, regardless of merge — this also keeps pre-existing-only
     // properties from merge-css.mjs in order instead of trailing at the end.
-    const outLines = Object.entries(finalProps)
-      .sort(([a], [b]) => a.localeCompare(b, 'en', { numeric: true, sensitivity: 'base' }))
-      .map(([name, tail]) => `  --${name}: ${tail}`);
+    const sortedProps = Object.entries(finalProps)
+      .sort(([a], [b]) => 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('');
+      }
+      outLines.push(`  --${name}: ${tail}`);
+      prevPrefix = prefix;
+    }
 
-    customPropsCount = outLines.length;
+    customPropsCount = sortedProps.length;
     return `${selector} {\n${outLines.join('\n')}\n}\n`;
   },
 });

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

@@ -8,8 +8,10 @@ import { buildPenpotFiles } from './formats/penpot.mjs';
 
 /** @typedef {import('style-dictionary/types').PlatformConfig} PlatformConfig */
 
-// Transforms applied to the CSS platform
-const CSS_TRANSFORMS = [
+// Transforms applied to the CSS platform.
+// Exported so other scripts (e.g. check-unresolved-custom-props.mjs) can
+// build a Style Dictionary instance with matching transformed token names.
+export const CSS_TRANSFORMS = [
   'attribute/cti',
   'name/kebab',
   'time/seconds',

package/design-tokens/utilities/build-tokens-src/resolve-source-paths.mjs

@@ -0,0 +1,33 @@
+// build-tokens-src/resolve-source-paths.mjs
+// Pure helper: resolves Style Dictionary `source` glob patterns relative to a
+// base directory, without touching glob syntax.
+// Shared by config.mjs (build-tokens.mjs) and check-unresolved-custom-props.mjs.
+//
+// Glob patterns (containing *, ?, {, [) are NOT passed through path.join,
+// because path.join can normalise/collapse sequences that carry syntactic
+// meaning in a glob (e.g. "**"). They are only prefixed with baseDir and
+// converted to forward slashes.
+// Concrete paths (no glob characters) are resolved canonically with path.resolve.
+
+import * as path from 'node:path';
+
+const GLOB_CHARS = /[*?{[]/;
+
+/**
+ * @param {string[]} source
+ * @param {string} baseDir
+ * @returns {string[]}
+ */
+export const resolveSourcePaths = (source, baseDir) => source.map((s) => {
+  if (path.isAbsolute(s)) {
+    // Already absolute: only normalise separators (needed on Windows)
+    return s.split(path.sep).join('/');
+  }
+  if (GLOB_CHARS.test(s)) {
+    // Glob pattern: prefix with baseDir without touching the pattern
+    const prefix = baseDir.split(path.sep).join('/');
+    return `${prefix}/${s}`;
+  }
+  // Concrete relative path: canonical resolution
+  return path.resolve(baseDir, s).split(path.sep).join('/');
+});

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

@@ -4,8 +4,11 @@
 /* eslint-disable no-console */
 
 // check-unresolved-custom-props.mjs
-// Scans CSS files in the configured directory and reports any custom property
-// references (var(--...)) that are not defined in the generated token file.
+// Scans CSS files in the configured directory and reports:
+//   - unresolved properties: custom property references (var(--...)) that
+//     are not defined in the generated token file
+//   - unused properties: custom properties defined in the generated token
+//     file but never referenced via var() in any scanned CSS file
 //
 // Usage: node check-unresolved-custom-props.mjs --config ./path/to/config.mjs
 
@@ -18,6 +21,10 @@ import { /* fileURLToPath,  */pathToFileURL } from 'node:url';
 // import { dirname } from 'path';
 import { glob } from 'node:fs/promises';
 import { styleText } from 'node:util';
+import StyleDictionary from 'style-dictionary';
+import './build-tokens-src/transforms.mjs';
+import { CSS_TRANSFORMS } from './build-tokens-src/platforms.mjs';
+import { resolveSourcePaths } from './build-tokens-src/resolve-source-paths.mjs';
 
 // const __filename = fileURLToPath(import.meta.url);
 // const __dirname  = dirname(__filename);
@@ -50,11 +57,11 @@ async function run() {
     const custom_prop_filename  = path.basename(custom_prop_file_path);
 
     // Directory to scan for CSS files
-    const checkdir = path.resolve(configDir, config.dir_to_check);
+    const checkdir = path.resolve(configDir, config.dirToCheck);
 
     // Patterns for custom properties to exclude from the unresolved check
     /** @type {RegExp[]} */
-    const exclude = config.exclude_pattern ?? [];
+    const exclude = config.excludePattern ?? [];
 
     // 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)
@@ -75,23 +82,40 @@ async function run() {
     // ---------------------------------------------------------------------------
     // 3. Build the list of defined custom properties
     // ---------------------------------------------------------------------------
-    const cssContent = fs.readFileSync(custom_prop_file_path, 'utf-8');
     const definitionRegex = /--([a-z0-9-]+)(?=\s*:)/g;
-    const propertyNamesList = [...cssContent.matchAll(definitionRegex)].map(m => `--${m[1]}`);
 
-    // Also include any extra CSS files declared in extra_custom_props_files
-    for (const extraFile of (config.extra_custom_props_files ?? [])) {
-      const extraContent = fs.readFileSync(path.resolve(configDir, extraFile), 'utf-8');
-      const extraMatches = [...extraContent.matchAll(definitionRegex)].map(m => `--${m[1]}`);
-      propertyNamesList.push(...extraMatches);
+    // defined_props keeps file/line info too, so unused properties (section 6)
+    // can be reported with a link back to their definition.
+    /** @type {{file: string, line: number, prop: string}[]} */
+    const defined_props = [];
+
+    const cssContent = fs.readFileSync(custom_prop_file_path, 'utf-8');
+    const custom_prop_relpath = path.relative(configDir, custom_prop_file_path);
+    [...cssContent.matchAll(definitionRegex)].forEach(m => {
+      const line = cssContent.substring(0, m.index).split('\n').length;
+      defined_props.push({ file: custom_prop_relpath, line, prop: `--${m[1]}` });
+    });
+
+    // Also include any extra CSS files declared in extraCustomPropsFiles
+    for (const extraFile of (config.extraCustomPropsFiles ?? [])) {
+      const extraFilePath = path.resolve(configDir, extraFile);
+      const extraContent  = fs.readFileSync(extraFilePath, 'utf-8');
+      const extraRelpath  = path.relative(configDir, extraFilePath);
+      [...extraContent.matchAll(definitionRegex)].forEach(m => {
+        const line = extraContent.substring(0, m.index).split('\n').length;
+        defined_props.push({ file: extraRelpath, line, prop: `--${m[1]}` });
+      });
     }
 
+    const propertyNamesList = defined_props.map(item => item.prop);
+
     // ---------------------------------------------------------------------------
     // 4. Scan files for unresolved var() references
     // ---------------------------------------------------------------------------
     const usageRegex = /var\(\s*(--[a-z0-9-]+)\s*(,.*?)?\)/g;
     /** @type {{file: string, line: number, prop: string}[]} */
     const unresolved_props = [];
+    const used_props_set = new Set();
 
     files.forEach(file => {
       const fileContent = fs.readFileSync(file, 'utf-8');
@@ -104,6 +128,8 @@ async function run() {
         const isDefined  = propertyNamesList.includes(cprop);
         const lineNumber = fileContent.substring(0, match.index).split('\n').length;
 
+        used_props_set.add(cprop);
+
         if (!isExcluded && !isDefined) {
           unresolved_props.push({ file: filename, line: lineNumber, prop: cprop });
         }
@@ -112,25 +138,95 @@ async function run() {
 
     unresolved_props.sort((a, b) => a.file.localeCompare(b.file));
 
+    // Unused-properties census is opt-in (config.checkUnused: true) since it
+    // re-runs the Style Dictionary transform pipeline over the token sources
+    // just to resolve source files, which adds a noticeable cost.
+    const checkUnused = config.checkUnused === true;
+
+    // ---------------------------------------------------------------------------
+    // 5. Build the list of unused custom properties (defined but never
+    // referenced via var() in any scanned CSS file) — the opposite check
+    // of section 4.
+    // ---------------------------------------------------------------------------
+    const unused_props = checkUnused
+      ? defined_props
+        .filter(item => !used_props_set.has(item.prop))
+        .sort((a, b) => a.prop.localeCompare(b.prop))
+      : [];
+
     // ---------------------------------------------------------------------------
-    // 5. Write the report
+    // 6. Best-effort: resolve the .mjs token source file for each unused
+    // property, by running the same transform pipeline used to generate the
+    // CSS (see build-tokens-src/formats/css.mjs) over the token sources
+    // declared in config.source. Properties that only exist in the generated
+    // CSS (or an extraCustomPropsFiles entry) — e.g. manual additions kept
+    // across rebuilds via the mergeCustomProps option — have no token source
+    // and are reported by name only.
     // ---------------------------------------------------------------------------
-    const result_file = path.resolve(configDir, 'unresolved-props.md');
+    /** @type {Map<string, string>} */
+    const sourceFileByProp = new Map();
+
+    if (checkUnused && Array.isArray(config.source) && config.source.length) {
+      try {
+        const tokenSourcePaths = resolveSourcePaths(config.source, configDir);
+        const sd = new StyleDictionary({
+          source: tokenSourcePaths,
+          log: { verbosity: 'silent' },
+          platforms: { css: { transforms: CSS_TRANSFORMS } },
+        });
+        const dictionary = await sd.getPlatformTokens('css');
+
+        for (const token of dictionary.allTokens) {
+          if (token.filePath) sourceFileByProp.set(`--${token.name}`, token.filePath);
+        }
+      } catch {
+        // Non-fatal: unused properties will be reported by name only.
+      }
+    }
 
+    // ---------------------------------------------------------------------------
+    // 7. Write the report
+    // ---------------------------------------------------------------------------
+    const result_file = path.resolve(configDir, 'unresolved-unused-props.md');
+
+    const logParts = [`${unresolved_props.length} unresolved custom properties found`];
+    if (checkUnused) {
+      logParts.push(`${unused_props.length} unused custom properties found`);
+    }
     console.log(styleText(['green'],
-      `${unresolved_props.length} unresolved custom properties found -> ${path.relative(process.cwd(), result_file)}`
+      `${logParts.join(', ')} -> ${path.relative(process.cwd(), result_file)}`
     ));
 
-    if(unresolved_props.length) {
-      fs.writeFileSync(
-        result_file,
-        unresolved_props
+    const sections = [];
+
+    if (unresolved_props.length) {
+      sections.push(
+        '## Unresolved custom properties\n\n'
+        + unresolved_props
           .map(item =>
             `* [${path.basename(item.file, '.css')}](${item.file}#L${item.line}) -> \`${item.prop}\``
           )
-          .join('\n'),
-        'utf-8'
+          .join('\n')
+      );
+    }
+
+    if (unused_props.length) {
+      sections.push(
+        '## Unused custom properties\n\n'
+        + unused_props
+          .map(item => {
+            const sourceFilePath = sourceFileByProp.get(item.prop);
+            if (!sourceFilePath) return `* \`${item.prop}\``;
+
+            const relSource = path.relative(configDir, sourceFilePath);
+            return `* [${path.basename(relSource)}](${relSource}) -> \`${item.prop}\``;
+          })
+          .join('\n')
       );
+    }
+
+    if (sections.length) {
+      fs.writeFileSync(result_file, sections.join('\n\n'), 'utf-8');
     } else {
       if (fs.existsSync(result_file)) {
         fs.unlinkSync(result_file);

package/dev-tools/starter-kit/starter-install.sh

@@ -130,7 +130,7 @@ safe_cat "${TEMPLATES_DIR}/_browserslistrc"            .browserslistrc new
 safe_cat "${TEMPLATES_DIR}/_editorconfig"              .editorconfig new
 safe_cat "${TEMPLATES_DIR}/_prettierrc"                .prettierrc new
 safe_cat "${TEMPLATES_DIR}/jsconfig.json"              jsconfig.json new
-safe_cat "${TEMPLATES_DIR}/tokens-config.mjs"          tokens-config.mjs new
+safe_cat "${BASE_URL}/../../design-tokens/tokens-config-sample.mjs" tokens-config.mjs new
 safe_cat "${TEMPLATES_DIR}/_root_htaccess"             _root_htaccess
 safe_cat "${TEMPLATES_DIR}/_root_robots.txt"           _root_robots.txt
 

package/dev-tools/starter-kit/templates/_gitignore

@@ -19,3 +19,4 @@ vendor
 node_modules
 _private
 public/_dev
+unresolved-unused-props.md

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

@@ -300,20 +300,6 @@ const config = {
     splitChunks: {
       cacheGroups: {
 
-        icons: {
-          test(module) {
-            return (
-              module.resource &&
-              module.resource.includes(`${path.sep}src${path.sep}icons${path.sep}`) &&
-              !module.resource.includes(`${path.sep}node_modules${path.sep}`)
-            );
-          },
-          name: 'icons',
-          chunks: 'all',
-          priority: 20,
-          enforce: true
-        },
-
         shared: {
           // vedi shared_chunk_paths sopra per la logica completa del test
           // (path match + esclusione css quando PurgeCSS è attivo)
@@ -507,7 +493,16 @@ const config = {
           ],
           deep: [
             // css modules: prefisso `m_` della build di produzione (vedi css-rules.mjs),
-            // le classi hashate non possono comparire nei file scansionati
+            // le classi con hash non possono comparire nei file scansionati
+            /^m_/
+          ],
+          keyframes: [
+            // stesso motivo dei selettori sopra, più un bug di purgecss: dentro un
+            // blocco `purgecss start/end ignore` la regola è preservata ma le sue
+            // dichiarazioni non vengono scansionate per l'uso di animation-name
+            // (vedi @keyframes slide-in/slide-out di minimo snackbar.module.css),
+            // quindi l'@keyframes verrebbe rimosso come "non referenziato" anche
+            // se in realtà è usato dalla regola stessa
             /^m_/
           ],
           greedy: [

package/package.json

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

package/src/components/snackbar/snackbar.minimo.tokens.mjs

@@ -18,7 +18,7 @@ export default{
       },
       'border-radius': {
         $value: '{radius.xs}',
-        $type: 'color'
+        $type: 'dimension'
       },
       padding: {
         block: {
@@ -79,6 +79,14 @@ export default{
         color: {
           $value: 'transparent',
           $type: 'color'
+        },
+        width: {
+          $type: 'dimension',
+          $value: '{btn.close.border.width}'
+        },
+        radius: {
+          $type: 'dimension',
+          $value: '50%'
         }
       },
 

package/src/components/snackbar/snackbar.module.css

@@ -54,7 +54,9 @@
   --btn-close-background-color: var(--snackbar-btn-close-background-color);
   --btn-close-icon-color: var(--snackbar-btn-close-icon-color);
   --btn-close-icon-bar-size: 2px;
-
+  --btn-close-border-color: var(--snackbar-btn-close-border-color);
+  --btn-close-border-width: var(--snackbar-btn-close-border-width);
+  --btn-close-border-radius: var(--snackbar-btn-close-border-radius);
 
   --btn-close-hover-background-color: var(--snackbar-btn-close-hover-background-color);
   --btn-close-hover-border-color: var(--snackbar-btn-close-hover-border-color);

package/src/custom-properties.css

@@ -2,17 +2,22 @@
   --accent-100: #567d0d;
   --accent-100-fg: #fff;
   --accent-color: var(--accent-100);
+
   --alert-border-radius: var(--radius-sm);
   --alert-box-shadow: 0 0 .5rem 0 oklch(0% 0 0 / .5);
+
   --badge-background-color: var(--primary-100);
   --badge-color: var(--primary-100-fg);
   --badge-font-size: var(--font-size-xs);
   --badge-font-weight: var(--font-weight-semibold);
   --badge-lg-font-size: var(--font-size-base);
   --badge-lg-font-weight: var(--badge-font-weight);
+
   --body-background-color: #fff;
   --body-text: var(--text-color);
+
   --box-shadow-base: 0 0 .75rem 0 rgb(0 0 0 / .25);
+
   --btn-border-radius: var(--form-control-border-radius);
   --btn-border-width: var(--form-control-border-width);
   --btn-close-active-background-color: var(--btn-close-background-color);
@@ -89,7 +94,9 @@
   --btn-xs-font-size: var(--font-size-xs);
   --btn-xs-padding-block: var(--size-xxs);
   --btn-xs-padding-inline: var(--size-xxs);
+
   --flex-grid-gap: 1.5rem;
+
   --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);
@@ -110,6 +117,7 @@
   --font-weight-xbold: 900;
   --font-weight-xlight: 200;
   --font-weight-xxlight: 100;
+
   --form-control-background-color: var(--body-background-color);
   --form-control-border-color: #666;
   --form-control-border-radius: var(--radius-xxs);
@@ -170,8 +178,10 @@
   --form-user-info-font-size: var(--font-size-xs);
   --form-validation-outline-offset: -.1875rem;
   --form-validation-outline-width: .1875rem;
+
   --grid-cols: 3;
   --grid-min-col-width: 6rem;
+
   --headings-color: var(--text-color);
   --headings-font-family: var(--font-family);
   --headings-font-weight: var(--font-weight-semibold);
@@ -182,18 +192,23 @@
   --headings-h4-font-size: var(--font-size-md);
   --headings-line-height: var(--line-height-xs);
   --headings-text-align: inherit;
+
   --inner-nav-gap: var(--size-lg);
   --inner-nav-margin-block: var(--size-base);
+
   --layout-container-max-width: 80rem;
+
   --line-height-base: 1.5;
   --line-height-sm: 1.4;
   --line-height-xs: 1.25;
+
   --link-active-background-color: transparent;
   --link-active-color: #51054c;
   --link-color: #0d12ae;
   --link-focus-outline-color: var(--link-color);
   --link-focus-outline-width: .125rem;
   --link-visited-color: #ae0da3;
+
   --malert-backdrop: rgb(0 0 0 / .7);
   --malert-background-color: #fff;
   --malert-border-radius: var(--radius-xs);
@@ -215,6 +230,7 @@
   --malert-text-font-size: var(--font-size-base);
   --malert-warning-bg: var(--status-warning-background-color);
   --malert-warning-fg: var(--status-warning-fg);
+
   --mpopup-backdrop-color: rgb(0 0 0 / .6);
   --mpopup-background-color: var(--body-background-color);
   --mpopup-border-radius: var(--size-base);
@@ -236,11 +252,15 @@
   --mpopup-min-height: 18.75rem;
   --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);
@@ -249,14 +269,17 @@
   --radius-xl: var(--size-xl);
   --radius-xs: var(--size-xs);
   --radius-xxs: var(--size-xxs);
+
   --sdt-hover-background-color: var(--btn-primary-background-color);
   --sdt-hover-color: var(--btn-primary-color);
   --sdt-pagination-border: var(--btn-border-width) var(--neutral-100);
   --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-100));
+
   --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;
@@ -269,6 +292,7 @@
   --sf-macro-rows-hover-background-color: 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;
   --size-3xl: 4rem;
   --size-base: 1rem;
@@ -278,13 +302,17 @@
   --size-xl: 2rem;
   --size-xs: .5rem;
   --size-xxs: .25rem;
+
   --slide-duration: 500ms;
+
   --snackbar-background-color: var(--secondary-100);
   --snackbar-border-radius: var(--radius-xs);
   --snackbar-btn-close-active-background-color: transparent;
   --snackbar-btn-close-active-icon-color: var(--snackbar-text-color);
   --snackbar-btn-close-background-color: transparent;
   --snackbar-btn-close-border-color: transparent;
+  --snackbar-btn-close-border-radius: 50%;
+  --snackbar-btn-close-border-width: var(--btn-close-border-width);
   --snackbar-btn-close-focus-outline-color: color-mix(in srgb, var(--snackbar-text-color) 50%, transparent);
   --snackbar-btn-close-focus-outline-offset: .125rem;
   --snackbar-btn-close-focus-outline-width: .125rem;
@@ -301,9 +329,11 @@
   --snackbar-outer-padding-block: 0;
   --snackbar-outer-padding-inline: 0;
   --snackbar-text-color: var(--secondary-100-fg);
+
   --spinner-color: var(--primary-100);
   --spinner-size: var(--size-lg);
   --spinner-stroke-width: .125rem;
+
   --status-danger-background-color: var(--status-danger-color);
   --status-danger-border-color: var(--status-danger-color);
   --status-danger-color: #c00;
@@ -320,9 +350,11 @@
   --status-warning-border-color: var(--status-warning-color);
   --status-warning-color: #fc0;
   --status-warning-fg: #4f2900;
+
   --switch-background-color: var(--neutral-100);
   --switch-checked-background-color: var(--primary-100);
   --switch-cursor-background-color: var(--body-background-color);
+
   --table-body-border-width: .0625rem;
   --table-body-tr-alt-bg-color: #efefef;
   --table-body-tr-hover-bg-color: #cbcbcb;
@@ -335,12 +367,14 @@
   --table-tfoot-font-weight: var(--font-weight-semibold);
   --table-thead-background-color: #ddd;
   --table-thead-border-width: .1875rem;
+
   --text-color: #000;
   --text-dim: var(--text-muted);
   --text-muted: var(--neutral-100);
   --text-negative: #fff;
   --text-selected-background-color: #ddd;
   --text-selected-color: var(--body-text);
+
   --uspg-bg-color: hsl(0deg 0% 0% / .7);
   --uspg-credits-font-size: var(--font-size-xs);
   --uspg-credits-font-weight: var(--font-weight-regular);
@@ -371,6 +405,7 @@
   --uspg-link-visited-color: #ff117b;
   --uspg-loader-color: hsl(0deg 0% 100% / .6);
   --uspg-text-color: #fff;
+
   --z-index-overlay: 99;
   --z-index-snackbar: 100;
 }

package/dev-tools/starter-kit/templates/tokens-config.mjs

@@ -1,33 +0,0 @@
-
-// import path from 'path';
-
-// path relativi a questo file
-
-const config = {
-  // build tokens
-  stylelintConfigPath: '../../stylelint.config.mjs',
-  buildPath: '../src/css',
-  destFile: 'custom-properties.css',
-  source: [
-    '../../node_modules/@massimo-cassandro/minimo/design-tokens/_src/**/*.tokens.{mjs,jsonc}',
-    './figma-tokens-OK/*.{jsonc,mjs}',
-  ],
-
-  colorScalePrefixes: ['primary', 'secondary', 'neutral'],
-
-  penpotFormat: 'jsonc',
-  penpotBuildPath: null,
-  penpotDestFile: null,
-  penpotExpressions: 'resolve',
-
-  // ---------------------------------------------------------------------------
-  // check-unresolved-custom-props.mjs settings
-  // ---------------------------------------------------------------------------
-  extra_custom_props_files: [],
-  dir_to_check: '../src', // percorso della dir che include i css da analizzare
-  exclude_pattern: [ // patterns per l'esclusione dal controllo unresolved-props
-    /^--_/,
-  ]
-};
-
-export default config;