@massimo-cassandro/minimo 0.5.0 → 0.5.2

package/design-tokens/color-primary.minimo.tokens.jsonc

@@ -10,10 +10,6 @@
       "$type": "color",
       "$value": "#083865"
     },
-    "080": {
-      "$type": "color",
-      "$value": "#0957A0"
-    },
     "100-fg": {
       "$type": "color",
       "$value": "#fff"

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

@@ -68,14 +68,6 @@ export const penpotFormat = buildConfig.penpotFormat === 'jsonc' ? 'jsonc' : 'js
 //   'keep'    (default) — write the expression as-is
 //   'calc'    — wrap in CSS calc()
 //   'resolve' — evaluate numerically; unit inherited from the first referenced token
-// colorScalePrefixes: list of color token prefixes for which the numeric scale
-// segment is zero-padded to 3 digits (e.g. --neutral-80 -> --neutral-080).
-// Applied to both CSS custom property names and Penpot DTCG token keys.
-// Set to an empty array or omit to disable.
-export const colorScalePrefixes = Array.isArray(buildConfig.colorScalePrefixes)
-  ? buildConfig.colorScalePrefixes
-  : [];
-
 const VALID_EXPR_MODES = ['keep', 'calc', 'resolve'];
 export const penpotExpressions = VALID_EXPR_MODES.includes(buildConfig.penpotExpressions)
   ? buildConfig.penpotExpressions

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

@@ -6,7 +6,6 @@
 //   - individual properties for letterSpacing, textTransform, textDecoration
 
 import StyleDictionary from 'style-dictionary';
-import { padColorName } from '../lib/color-scale.mjs';
 
 const BASE_FONT_SIZE = 16;
 
@@ -148,22 +147,15 @@ StyleDictionary.registerFormat({
 
     const resolveRefs = makeResolveRefs(tokenByPath);
 
-    const colorScalePrefixes = options.colorScalePrefixes ?? [];
-
     const lines = dictionary.allTokens
       .slice()
-      .sort((a, b) => a.name.localeCompare(b.name))
+      .sort((a, b) => a.name.localeCompare(b.name, 'en', {numeric: true, sensitivity: 'base'}))
       .flatMap((token) => {
         const type = token.$type ?? token.type;
         const orig = token.original?.$value ?? token.original?.value;
 
-        // Apply zero-padding to color scale names (e.g. --neutral-80 -> --neutral-080)
-        const tokenName = (type === 'color')
-          ? padColorName(token.name, colorScalePrefixes)
-          : token.name;
-
         if (type === 'typography') {
-          return [buildTypography(tokenName, orig ?? {}, resolveRefs)];
+          return [buildTypography(token.name, orig ?? {}, resolveRefs)];
         }
 
         let value;
@@ -200,7 +192,7 @@ StyleDictionary.registerFormat({
           value = String(token.$value ?? token.value);
         }
 
-        return [`  --${tokenName}: ${value};`];
+        return [`  --${token.name}: ${value};`];
       });
 
     customPropsCount = lines.length;

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

@@ -33,7 +33,6 @@
 
 import StyleDictionary from 'style-dictionary';
 import path from 'path';
-import { padTokenPath } from '../lib/color-scale.mjs';
 
 // Disclaimer prepended to every generated file when penpotFormat is 'jsonc'
 const DISCLAIMER = [
@@ -127,28 +126,20 @@ StyleDictionary.registerFormat({
   name: 'json/penpot',
   format: ({ dictionary, options }) => {
     const root = {};
-    const expressionMode      = options.penpotExpressions  ?? 'keep';
-    const colorScalePrefixes  = options.colorScalePrefixes ?? [];
+    const expressionMode = options.penpotExpressions ?? 'keep'; // 'keep' | 'calc' | 'resolve'
     const tokenMap = (expressionMode === 'resolve') ? makeTokenMap(dictionary) : null;
 
     for (const token of dictionary.allTokens) {
-      const type = token.$type ?? token.type;
-
-      // Apply zero-padding to color scale path segments
-      // e.g. ['neutral', '80'] -> ['neutral', '080']
-      const tokenPath = (type === 'color')
-        ? padTokenPath(token.path, colorScalePrefixes)
-        : token.path;
-
-      // Rebuild the nested tree from the (possibly padded) token path
+      // Rebuild the nested tree from the token path
       let node = root;
-      for (let i = 0; i < tokenPath.length - 1; i++) {
-        const segment = tokenPath[i];
+      for (let i = 0; i < token.path.length - 1; i++) {
+        const segment = token.path[i];
         node[segment] = node[segment] ?? {};
         node = node[segment];
       }
 
-      const leafKey = tokenPath[tokenPath.length - 1];
+      const leafKey = token.path[token.path.length - 1];
+      const type    = token.$type ?? token.type;
       const orig    = token.original?.$value ?? token.original?.value;
 
       // ── Value resolution ────────────────────────────────────────────────────
@@ -232,15 +223,13 @@ export const collectConcreteFilePaths = async (sd) => {
 // @param {string|null}                    penpotDestFile     Aggregated file base name, or null
 // @param {'json'|'jsonc'}                 penpotFormat       Output format
 // @param {'keep'|'calc'|'resolve'}        penpotExpressions  Expression handling mode
-// @param {string[]}                       colorScalePrefixes Color token prefixes for numeric scale zero-padding
 // @returns {object[]}  File descriptors for the Style Dictionary platform
 
 export const buildPenpotFiles = (
   concreteFilePaths,
   penpotDestFile,
   penpotFormat = 'json',
-  penpotExpressions = 'keep',
-  colorScalePrefixes = []
+  penpotExpressions = 'keep'
 ) => {
   const ext  = penpotFormat === 'jsonc' ? '.jsonc' : '.json';
   const jsonc = penpotFormat === 'jsonc';
@@ -249,7 +238,7 @@ export const buildPenpotFiles = (
     return [{
       destination: penpotDestFile + ext,
       format: 'json/penpot',
-      options: { jsonc, penpotExpressions, colorScalePrefixes },
+      options: { jsonc, penpotExpressions },
     }];
   }
 
@@ -263,7 +252,7 @@ export const buildPenpotFiles = (
     return {
       destination: destName,
       format: 'json/penpot',
-      options: { jsonc, penpotExpressions, colorScalePrefixes },
+      options: { jsonc, penpotExpressions },
       filter: (token) => {
         const fp = token.filePath ? path.resolve(token.filePath) : '';
         return fp === absPath;

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

@@ -40,7 +40,6 @@ 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.colorScalePrefixes  Color token prefixes for numeric scale zero-padding.
  * @returns {object} platforms object ready for Style Dictionary config
  */
 export const buildPlatforms = ({
@@ -50,7 +49,6 @@ export const buildPlatforms = ({
   penpotDestFile,
   penpotFormat,
   penpotExpressions = 'keep',
-  colorScalePrefixes = [],
   concreteFilePaths = [],
 }) => {
   const platforms = {
@@ -64,7 +62,6 @@ export const buildPlatforms = ({
           options: {
             outputReferences: true,
             showFileHeader: true,
-            colorScalePrefixes,
           },
         },
       ],
@@ -75,7 +72,7 @@ export const buildPlatforms = ({
     platforms.penpot = {
       buildPath: penpotBuildPath + '/',
       transforms: PENPOT_TRANSFORMS,
-      files: buildPenpotFiles(concreteFilePaths, penpotDestFile, penpotFormat, penpotExpressions, colorScalePrefixes),
+      files: buildPenpotFiles(concreteFilePaths, penpotDestFile, penpotFormat, penpotExpressions),
     };
   }
 

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

@@ -1,4 +1,5 @@
 #!/usr/bin/env node
+/* eslint-disable no-console */
 
 // build-tokens.mjs
 // Entry point: imports modules, runs the build, lints the CSS output, prints the log.
@@ -28,7 +29,6 @@ import {
   penpotDestFile,
   penpotFormat,
   penpotExpressions,
-  colorScalePrefixes,
   source,
 } from './build-tokens-src/config.mjs';
 
@@ -72,7 +72,6 @@ const sd = new StyleDictionary({
     penpotDestFile,
     penpotFormat,
     penpotExpressions,
-    colorScalePrefixes,
     concreteFilePaths,
   }),
 });
@@ -96,7 +95,7 @@ console.log(styleText(['yellow'], `[build-tokens] source      : ${source.map(sho
 console.log(styleText(['yellow'], `[build-tokens] dest file   : ${short(path.join(buildPath, destFile))}`));
 
 if (penpotBuildPath) {
-  const penpotFiles = buildPenpotFiles(concreteFilePaths, penpotDestFile, penpotFormat, penpotExpressions, colorScalePrefixes);
+  const penpotFiles = buildPenpotFiles(concreteFilePaths, penpotDestFile, penpotFormat, penpotExpressions);
   if (penpotFiles.length === 1) {
     console.log(styleText(['yellow'],
       `[build-tokens] penpot json : ${short(path.join(penpotBuildPath, penpotFiles[0].destination))}`
@@ -108,7 +107,7 @@ if (penpotBuildPath) {
   }
 } else {
   console.log(styleText(['yellow'],
-    `[build-tokens] penpot json : (disabled — penpotBuildPath not set)`
+    '[build-tokens] penpot json : (disabled — penpotBuildPath not set)'
   ));
 }
 

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

@@ -75,11 +75,7 @@ const config = {
   //               e.g. {size.base} = 16px, "{size.base} * .25" -> "4px"
   penpotExpressions: 'resolve',
 
-  // Color token prefixes for which the numeric scale segment is zero-padded
-  // to 3 digits in both CSS output and Penpot token files.
-  // e.g. --neutral-80 -> --neutral-080, --primary-5 -> --primary-005
-  // Set to an empty array or omit to disable.
-  colorScalePrefixes: ['primary', 'secondary', 'neutral'],
+
 
   // ---------------------------------------------------------------------------
   // check-unresolved-custom-props.mjs settings

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massimo-cassandro/minimo",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "Light css framework",
   "type": "module",
   "homepage": "https://github.com/massimo-cassandro/minimo#readme",

package/src/custom-properties-default.css

@@ -171,7 +171,6 @@
   --overlay-color: rgb(0 0 0 / .6);
   --primary-100: #083865;
   --primary-100-fg: #fff;
-  --primary-080: #0957a0;
   --radius-base: var(--size-base);
   --radius-lg: var(--size-lg);
   --radius-md: var(--size-md);

package/design-tokens-utilities/build-tokens-src/lib/color-scale.mjs

@@ -1,81 +0,0 @@
-// build-tokens-src/lib/color-scale.mjs
-// Shared helper for color scale zero-padding.
-//
-// When colorScalePrefixes is configured, color tokens whose name matches
-//   --<prefix>-<number>  (e.g. --primary-100, --neutral-80)
-// have the numeric segment zero-padded to 3 digits:
-//   --primary-100  ->  --primary-100  (unchanged, already 3 digits)
-//   --neutral-80   ->  --neutral-080
-//   --secondary-5  ->  --secondary-005
-//
-// The same transformation is applied to CSS custom property names and to
-// Penpot DTCG token keys, so both outputs stay in sync.
-//
-// Configuration (in the project config file):
-//   colorScalePrefixes: ['primary', 'secondary', 'neutral']
-//
-// Set to an empty array or omit to disable the feature entirely.
-
-// ---------------------------------------------------------------------------
-// padColorName
-//
-// Given a full token name (kebab-case, no leading --) and the list of
-// configured prefixes, returns the name with the numeric segment zero-padded
-// if applicable, or the original name unchanged otherwise.
-//
-// Examples:
-//   padColorName('primary-100', ['primary'])  -> 'primary-100'
-//   padColorName('neutral-80',  ['neutral'])  -> 'neutral-080'
-//   padColorName('neutral-80',  [])           -> 'neutral-80'
-//   padColorName('size-base',   ['primary'])  -> 'size-base'
-// ---------------------------------------------------------------------------
-export const padColorName = (name, prefixes) => {
-  if (!prefixes || prefixes.length === 0) return name;
-
-  // Match: <prefix>-<integer>  optionally followed by more segments
-  // The number must be a pure integer (no decimals, no units).
-  const pattern = new RegExp(
-    `^(${prefixes.map(p => escapeRegex(p)).join('|')})-([0-9]+)(-.+)?$`
-  );
-
-  const match = name.match(pattern);
-  if (!match) return name;
-
-  const [, prefix, num, rest = ''] = match;
-  const padded = num.padStart(3, '0');
-
-  return `${prefix}-${padded}${rest}`;
-};
-
-// ---------------------------------------------------------------------------
-// padTokenPath
-//
-// Applies the same zero-padding logic to a DTCG token path array.
-// Used by the Penpot format to rename leaf keys and intermediate path segments.
-//
-// The segment to pad is the one immediately following the matching prefix.
-// If the prefix occupies multiple path segments this function is intentionally
-// conservative: it only pads when the prefix is a single path segment.
-//
-// Examples (path arrays):
-//   ['primary', '100']     -> ['primary', '100']   (unchanged)
-//   ['neutral', '80']      -> ['neutral', '080']
-//   ['color', 'neutral', '80'] with prefix 'neutral' -> ['color', 'neutral', '080']
-// ---------------------------------------------------------------------------
-export const padTokenPath = (pathArr, prefixes) => {
-  if (!prefixes || prefixes.length === 0) return pathArr;
-
-  return pathArr.map((segment, i) => {
-    // Is this segment a pure integer and is the previous segment a prefix?
-    if (i === 0) return segment;
-    const prev = pathArr[i - 1];
-    if (!prefixes.includes(prev)) return segment;
-    if (!/^[0-9]+$/.test(segment)) return segment;
-    return segment.padStart(3, '0');
-  });
-};
-
-// ---------------------------------------------------------------------------
-// Internal: escape special regex characters in a prefix string
-// ---------------------------------------------------------------------------
-const escapeRegex = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');