@massimo-cassandro/minimo 1.19.4 → 1.19.6

package/design-tokens/README.md

@@ -163,7 +163,7 @@ Alias references (`{color.brand.primary}`) are preserved in the output so Penpot
 Scans all `.css` files in `dirToCheck` (recursively) and reports:
 
 - **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.
+- **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. When `ignoreUnusedInNodeModules` is true (default), properties sourced from a token file under `node_modules` (e.g. a third-party token package) are never reported as unused.
 
 Results are written to `unresolved-unused-props.md` in the same directory as the config file.
 

package/design-tokens/_src/color-accent.minimo.tokens.mjs

@@ -1,13 +1,10 @@
 export default {
   accent: {
-    100: {
-      $value: '#567d0d',
-      $type: 'color'
-    },
-    '100-fg': {
-      $value: '#fff',
-      $type: 'color'
-    }
+    $value: '#567d0d',
+    $type: 'color'
+  },
+  'accent-fg': {
+    $value: '#fff',
+    $type: 'color'
   }
-
 };

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

@@ -1,7 +1,7 @@
 export default {
   accent: {
     color: {
-      $value: '{accent.100}',
+      $value: '{accent}',
       $type: 'color'
     }
   },

package/design-tokens/tokens/design-tokens/_src/color-accent.minimo.tokens.jsonc

@@ -6,13 +6,11 @@
 // -----------------------------------------------------------------------
 {
   "accent": {
-    "100": {
-      "$type": "color",
-      "$value": "#567d0d"
-    },
-    "100-fg": {
-      "$type": "color",
-      "$value": "#fff"
-    }
+    "$type": "color",
+    "$value": "#567d0d"
+  },
+  "accent-fg": {
+    "$type": "color",
+    "$value": "#fff"
   }
 }

package/design-tokens/tokens/design-tokens/_src/text.minimo.tokens.jsonc

@@ -5,12 +5,6 @@
 // Re-generate with: node build-tokens.mjs --config <path/to/config>
 // -----------------------------------------------------------------------
 {
-  "accent": {
-    "color": {
-      "$type": "color",
-      "$value": "{accent.100}"
-    }
-  },
   "text": {
     "muted": {
       "$type": "color",

package/design-tokens/tokens/src/web-components/s-datatable-component/simple-datatable.minimo.tokens.jsonc

@@ -11,7 +11,7 @@
         "background": {
           "color": {
             "$type": "color",
-            "$value": "color-mix(in srgb, {table.thead.background.color} 90%, {accent.100})"
+            "$value": "color-mix(in srgb, {table.thead.background.color} 90%, {accent})"
           }
         }
       }

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

@@ -96,6 +96,12 @@ const config = {
   // .mjs source file for each unused property. Default: false.
   checkUnused: true,
 
+  // When checkUnused is true: if true (default), custom properties sourced
+  // from a token file under node_modules (e.g. a third-party token package)
+  // are never reported as unused — the consuming project isn't expected to
+  // prune those.
+  ignoreUnusedInNodeModules: true,
+
   // Additional CSS files that define custom properties used in the project
   // but not generated by build-tokens (e.g. third-party libraries)
   extraCustomPropsFiles: [

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

@@ -143,19 +143,13 @@ async function run() {
     // 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))
-      : [];
+    // If true (default), properties sourced from a token file under
+    // node_modules (e.g. a third-party token package) are never reported as
+    // unused — the consuming project isn't expected to prune those.
+    const ignoreUnusedInNodeModules = config.ignoreUnusedInNodeModules !== false;
 
     // ---------------------------------------------------------------------------
-    // 6. Best-effort: resolve the .mjs token source file for each unused
+    // 5. Best-effort: resolve the .mjs token source file for each defined
     // 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
@@ -184,6 +178,24 @@ async function run() {
       }
     }
 
+    // ---------------------------------------------------------------------------
+    // 6. Build the list of unused custom properties (defined but never
+    // referenced via var() in any scanned CSS file) — the opposite check
+    // of section 4. Properties sourced from node_modules are skipped when
+    // ignoreUnusedInNodeModules is true (default).
+    // ---------------------------------------------------------------------------
+    const unused_props = checkUnused
+      ? defined_props
+        .filter(item => !used_props_set.has(item.prop))
+        .filter(item => {
+          if (!ignoreUnusedInNodeModules) return true;
+          const sourceFilePath = sourceFileByProp.get(item.prop);
+          if (!sourceFilePath) return true;
+          return !/(^|[\\/])node_modules([\\/]|$)/.test(sourceFilePath);
+        })
+        .sort((a, b) => a.prop.localeCompare(b.prop))
+      : [];
+
     // ---------------------------------------------------------------------------
     // 7. Write the report
     // ---------------------------------------------------------------------------

package/dev-tools/starter-kit/templates/package-tpl.json

@@ -27,7 +27,7 @@
     "launchChrome": "open -n -a 'Google Chrome' --args --profile-directory='Profile 3'",
     "python server": "python3 -m http.server 8000 # --directory __dirname__ # 8000 = default port",
     "php server": "php -S localhost:8000 # -t root_dir/",
-    "symfony local server": "symfony serve -d",
+    "symfony server": "symfony serve -d --port=8100 --listen-ip=0.0.0.0 # symfony server:stop # http://192.168.1.135:8100",
     "node server": "node serve # richiede ‘npm i serve’",
     "build tokens": "npx buildTokens --config ./path/to/tokens-config.mjs",
     "check unresolved props": "npx checkUnresolvedProps --config ./path/to/tokens-config.mjs"

package/package.json

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

package/src/css/text.css

@@ -122,7 +122,7 @@ li {
   color: var(--secondary-100);
 }
 .text-accent {
-  color: var(--accent-100);
+  color: var(--accent);
 }
 .text-danger {
   color: var(--status-danger-color);

package/src/custom-properties.css

@@ -1,7 +1,6 @@
 :root {
-  --accent-100: #567d0d;
-  --accent-100-fg: #fff;
-  --accent-color: var(--accent-100);
+  --accent: #567d0d;
+  --accent-fg: #fff;
 
   --alert-border-radius: var(--radius-sm);
   --alert-box-shadow: 0 0 .5rem 0 oklch(0% 0 0 / .5);
@@ -275,7 +274,7 @@
   --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));
+  --sdt-thead-hover-background-color: color-mix(in srgb, var(--table-thead-background-color) 90%, var(--accent));
 
   --secondary-100: #650853;
   --secondary-100-fg: #fff;

package/src/web-components/s-datatable-component/simple-datatable.minimo.tokens.mjs

@@ -4,7 +4,7 @@ export default {
       hover: {
         background: {
           color: {
-            $value: 'color-mix(in srgb, {table.thead.background.color} 90%, {accent.100})',
+            $value: 'color-mix(in srgb, {table.thead.background.color} 90%, {accent})',
             $type: 'color'
           }
         }