@massimo-cassandro/minimo 0.4.2 → 0.5.0

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

@@ -9,12 +9,12 @@
     "background": {
       "color": {
         "$type": "color",
-        "$value": "{primary.base}"
+        "$value": "{primary.100}"
       }
     },
     "color": {
       "$type": "color",
-      "$value": "{primary.on-base}"
+      "$value": "{primary.100-fg}"
     },
     "font": {
       "size": {

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

@@ -28,7 +28,7 @@
   "text": {
     "muted": {
       "$type": "color",
-      "$value": "{neutral.base}"
+      "$value": "{neutral.100}"
     },
     "dim": {
       "$type": "color",

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

@@ -10,12 +10,12 @@
       "background": {
         "color": {
           "$type": "color",
-          "$value": "{primary.base}"
+          "$value": "{primary.100}"
         }
       },
       "color": {
         "$type": "color",
-        "$value": "{primary.on-base}"
+        "$value": "{primary.100-fg}"
       },
       "border": {
         "color": {

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

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

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

@@ -6,11 +6,11 @@
 // -----------------------------------------------------------------------
 {
   "neutral": {
-    "base": {
+    "100": {
       "$type": "color",
       "$value": "#666"
     },
-    "on-base": {
+    "100-fg": {
       "$type": "color",
       "$value": "#fff"
     }

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

@@ -6,11 +6,15 @@
 // -----------------------------------------------------------------------
 {
   "primary": {
-    "base": {
+    "100": {
       "$type": "color",
       "$value": "#083865"
     },
-    "on-base": {
+    "080": {
+      "$type": "color",
+      "$value": "#0957A0"
+    },
+    "100-fg": {
       "$type": "color",
       "$value": "#fff"
     }

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

@@ -6,11 +6,11 @@
 // -----------------------------------------------------------------------
 {
   "secondary": {
-    "base": {
+    "100": {
       "$type": "color",
       "$value": "#650853"
     },
-    "on-base": {
+    "100-fg": {
       "$type": "color",
       "$value": "#fff"
     }

package/design-tokens/components/recaptcha.minimo.tokens.jsonc

@@ -19,7 +19,7 @@
           "$value": "#000"
         }
       },
-      "foreground": {
+      "fg": {
         "$type": "color",
         "$value": "#fff"
       }

package/design-tokens/components/spinner.minimo.tokens.jsonc

@@ -12,7 +12,7 @@
     },
     "color": {
       "$type": "color",
-      "$value": "{primary.base}"
+      "$value": "{primary.100}"
     },
     "stroke": {
       "width": {

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

@@ -136,7 +136,29 @@
         },
         "opacity": {
           "$type": "number",
-          "$value": ".3"
+          "$value": 0.7
+        },
+        "font": {
+          "style": {
+            "$type": "string",
+            "$value": "italic"
+          }
+        }
+      },
+      "readonly": {
+        "background": {
+          "color": {
+            "$type": "color",
+            "$value": "{form.control.background.color}"
+          }
+        },
+        "color": {
+          "$type": "color",
+          "$value": "#666"
+        },
+        "opacity": {
+          "$type": "number",
+          "$value": 1
         },
         "font": {
           "style": {

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

@@ -19,7 +19,7 @@
           "$value": "#000"
         }
       },
-      "foreground": {
+      "fg": {
         "$type": "color",
         "$value": "#fff"
       }

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

@@ -12,7 +12,7 @@
     },
     "color": {
       "$type": "color",
-      "$value": "{primary.base}"
+      "$value": "{primary.100}"
     },
     "stroke": {
       "width": {

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

@@ -17,7 +17,7 @@
           "$value": "{status.danger.color}"
         }
       },
-      "foreground": {
+      "fg": {
         "$type": "color",
         "$value": "#fff"
       },
@@ -39,7 +39,7 @@
           "$value": "{status.success.color}"
         }
       },
-      "foreground": {
+      "fg": {
         "$type": "color",
         "$value": "#fff"
       },
@@ -61,7 +61,7 @@
           "$value": "{status.info.color}"
         }
       },
-      "foreground": {
+      "fg": {
         "$type": "color",
         "$value": "#fff"
       },
@@ -83,7 +83,7 @@
           "$value": "{status.warning.color}"
         }
       },
-      "foreground": {
+      "fg": {
         "$type": "color",
         "$value": "#4f2900"
       },

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

@@ -2,12 +2,12 @@
   "badge": {
     "background": {
       "color": {
-        "$value": "{primary.base}",
+        "$value": "{primary.100}",
         "$type": "color"
       }
     },
     "color": {
-      "$value": "{primary.on-base}",
+      "$value": "{primary.100-fg}",
       "$type": "color"
     },
     "font": {

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

@@ -22,7 +22,7 @@
   "text": {
     "muted": {
       "$type": "color",
-      "$value": "{neutral.base}"
+      "$value": "{neutral.100}"
     },
     "dim": {
       "$type": "color",

package/design-tokens-src/btn-primary.minimo.tokens.jsonc

@@ -3,12 +3,12 @@
     "primary": {
       "background": {
         "color": {
-          "$value": "{primary.base}",
+          "$value": "{primary.100}",
           "$type": "color"
         }
       },
       "color": {
-        "$value": "{primary.on-base}",
+        "$value": "{primary.100-fg}",
         "$type": "color"
       },
 

package/design-tokens-src/{btn-secondary.minimo.tokens.jsonc → btn-secondary.minimo.tokens.mjs}

@@ -1,13 +1,14 @@
-{
-  "btn": {
-    "secondary": {
+export default {
+  btn: {
 
-      "hollow": {
+    secondary: {
+      
+      hollow: {
 
-      } // end hollow
+      } 
     } // end secondary
   } // end btn
-}
+};
 // --btn-secondary-bg-color: var(--_secondary);
 // --btn-secondary-fg-color: var(--_secondary-fg);
 // --btn-secondary-border-color: var(--_secondary);

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

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

package/design-tokens-src/color-neutral.minimo.tokens.mjs

@@ -0,0 +1,12 @@
+export default {
+  neutral: {
+    100: {
+      $value: '#666',
+      $type: 'color'
+    },
+    '100-fg': {
+      $value: '#fff',
+      $type: 'color'
+    }
+  }
+};

package/design-tokens-src/color-primary.minimo.tokens.mjs

@@ -0,0 +1,13 @@
+export default {
+  primary: {
+   
+    100: {
+      $value: '#083865',
+      $type: 'color'
+    },
+    '100-fg': {
+      $value: '#fff',
+      $type: 'color'
+    }
+  }
+};

package/design-tokens-src/color-secondary.minimo.tokens.mjs

@@ -0,0 +1,12 @@
+export default {
+  secondary: {
+    100: {
+      $value: '#650853',
+      $type: 'color'
+    },
+    '100-fg': {
+      $value: '#fff',
+      $type: 'color'
+    }
+  }
+};

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

@@ -15,7 +15,7 @@
           "$value": "#000"
         }
       },
-      "foreground": {
+      "fg": {
         "$type": "color",
         "$value": "#fff"
       },

package/design-tokens-src/components/sf-macro.minimo.tokens.jsonc

@@ -36,7 +36,7 @@
       "border": {
         "$type": "border",
         "$value": {
-          "color": "{neutral.base}", 
+          "color": "{neutral.100}", 
           "width": "1px", 
           "style": "solid"
         }  

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

@@ -7,7 +7,7 @@
     },
 
     "color": {
-      "$value": "{primary.base}",
+      "$value": "{primary.100}",
       "$type": "color"
     },
 

package/design-tokens-src/form.minimo.tokens.mjs

@@ -148,6 +148,28 @@ export default {
           }
         }
       },
+      readonly: {
+        background: {
+          color: {
+            $value: '{form.control.background.color}',
+            $type: 'color'
+          }
+        },
+        color: {
+          $value: '#666',
+          $type: 'color'
+        },
+        opacity: {
+          $value: 1,
+          $type: 'number'
+        },
+        font: {
+          style: {
+            $value: 'italic',
+            $type: 'string'
+          }
+        }
+      },
       required: {
         'flag-color': {
           $value: '#c00',

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

@@ -12,7 +12,7 @@
           "$type": "color"
         }
       },
-      "foreground": {
+      "fg": {
         "$value": "#fff",
         "$type": "color"
       },
@@ -34,7 +34,7 @@
           "$type": "color"
         }
       },
-      "foreground": {
+      "fg": {
         "$value": "#fff",
         "$type": "color"
       },
@@ -56,7 +56,7 @@
           "$type": "color"
         }
       },
-      "foreground": {
+      "fg": {
         "$value": "#fff",
         "$type": "color"
       },
@@ -78,7 +78,7 @@
           "$type": "color"
         }
       },
-      "foreground": {
+      "fg": {
         "$value": "#4f2900",
         "$type": "color"
       },

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

@@ -5,7 +5,7 @@
       "hover": {
         "background": {
           "color": {
-            "$value": "color-mix(in srgb, {table.thead.background.color} 90%, {accent.base})",
+            "$value": "color-mix(in srgb, {table.thead.background.color} 90%, {accent.100})",
             "$type": "color"
           }
         }
@@ -16,7 +16,7 @@
       "border": {
         "$type": "border",
         "$value": {
-          "color": "{neutral.base}",
+          "color": "{neutral.100}",
           "width": "{btn.border.width}",
           // "style": "solid"
         }

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

@@ -68,6 +68,14 @@ 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,6 +6,7 @@
 //   - individual properties for letterSpacing, textTransform, textDecoration
 
 import StyleDictionary from 'style-dictionary';
+import { padColorName } from '../lib/color-scale.mjs';
 
 const BASE_FONT_SIZE = 16;
 
@@ -147,6 +148,8 @@ StyleDictionary.registerFormat({
 
     const resolveRefs = makeResolveRefs(tokenByPath);
 
+    const colorScalePrefixes = options.colorScalePrefixes ?? [];
+
     const lines = dictionary.allTokens
       .slice()
       .sort((a, b) => a.name.localeCompare(b.name))
@@ -154,8 +157,13 @@ StyleDictionary.registerFormat({
         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(token.name, orig ?? {}, resolveRefs)];
+          return [buildTypography(tokenName, orig ?? {}, resolveRefs)];
         }
 
         let value;
@@ -192,7 +200,7 @@ StyleDictionary.registerFormat({
           value = String(token.$value ?? token.value);
         }
 
-        return [`  --${token.name}: ${value};`];
+        return [`  --${tokenName}: ${value};`];
       });
 
     customPropsCount = lines.length;

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

@@ -33,6 +33,7 @@
 
 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 = [
@@ -126,20 +127,28 @@ StyleDictionary.registerFormat({
   name: 'json/penpot',
   format: ({ dictionary, options }) => {
     const root = {};
-    const expressionMode = options.penpotExpressions ?? 'keep'; // 'keep' | 'calc' | 'resolve'
+    const expressionMode      = options.penpotExpressions  ?? 'keep';
+    const colorScalePrefixes  = options.colorScalePrefixes ?? [];
     const tokenMap = (expressionMode === 'resolve') ? makeTokenMap(dictionary) : null;
 
     for (const token of dictionary.allTokens) {
-      // Rebuild the nested tree from the token path
+      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
       let node = root;
-      for (let i = 0; i < token.path.length - 1; i++) {
-        const segment = token.path[i];
+      for (let i = 0; i < tokenPath.length - 1; i++) {
+        const segment = tokenPath[i];
         node[segment] = node[segment] ?? {};
         node = node[segment];
       }
 
-      const leafKey = token.path[token.path.length - 1];
-      const type    = token.$type ?? token.type;
+      const leafKey = tokenPath[tokenPath.length - 1];
       const orig    = token.original?.$value ?? token.original?.value;
 
       // ── Value resolution ────────────────────────────────────────────────────
@@ -223,13 +232,15 @@ 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'
+  penpotExpressions = 'keep',
+  colorScalePrefixes = []
 ) => {
   const ext  = penpotFormat === 'jsonc' ? '.jsonc' : '.json';
   const jsonc = penpotFormat === 'jsonc';
@@ -238,7 +249,7 @@ export const buildPenpotFiles = (
     return [{
       destination: penpotDestFile + ext,
       format: 'json/penpot',
-      options: { jsonc, penpotExpressions },
+      options: { jsonc, penpotExpressions, colorScalePrefixes },
     }];
   }
 
@@ -252,7 +263,7 @@ export const buildPenpotFiles = (
     return {
       destination: destName,
       format: 'json/penpot',
-      options: { jsonc, penpotExpressions },
+      options: { jsonc, penpotExpressions, colorScalePrefixes },
       filter: (token) => {
         const fp = token.filePath ? path.resolve(token.filePath) : '';
         return fp === absPath;

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

@@ -0,0 +1,81 @@
+// 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, '\\$&');