@massimo-cassandro/minimo 0.4.3 → 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/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/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, '\\$&');

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

@@ -40,6 +40,7 @@ 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 = ({
@@ -49,6 +50,7 @@ export const buildPlatforms = ({
   penpotDestFile,
   penpotFormat,
   penpotExpressions = 'keep',
+  colorScalePrefixes = [],
   concreteFilePaths = [],
 }) => {
   const platforms = {
@@ -62,6 +64,7 @@ export const buildPlatforms = ({
           options: {
             outputReferences: true,
             showFileHeader: true,
+            colorScalePrefixes,
           },
         },
       ],
@@ -72,7 +75,7 @@ export const buildPlatforms = ({
     platforms.penpot = {
       buildPath: penpotBuildPath + '/',
       transforms: PENPOT_TRANSFORMS,
-      files: buildPenpotFiles(concreteFilePaths, penpotDestFile, penpotFormat, penpotExpressions),
+      files: buildPenpotFiles(concreteFilePaths, penpotDestFile, penpotFormat, penpotExpressions, colorScalePrefixes),
     };
   }
 

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

@@ -28,6 +28,7 @@ import {
   penpotDestFile,
   penpotFormat,
   penpotExpressions,
+  colorScalePrefixes,
   source,
 } from './build-tokens-src/config.mjs';
 
@@ -71,6 +72,7 @@ const sd = new StyleDictionary({
     penpotDestFile,
     penpotFormat,
     penpotExpressions,
+    colorScalePrefixes,
     concreteFilePaths,
   }),
 });
@@ -94,7 +96,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);
+  const penpotFiles = buildPenpotFiles(concreteFilePaths, penpotDestFile, penpotFormat, penpotExpressions, colorScalePrefixes);
   if (penpotFiles.length === 1) {
     console.log(styleText(['yellow'],
       `[build-tokens] penpot json : ${short(path.join(penpotBuildPath, penpotFiles[0].destination))}`

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

@@ -8,17 +8,18 @@
 //
 // Usage: node check-unresolved-custom-props.mjs --config ./path/to/config.mjs
 
-// TODO rimuovere/non generare file result se vuoto
+
+/* globals process */
 
 import path from 'path';
 import fs from 'node:fs';
-import { fileURLToPath, pathToFileURL } from 'url';
-import { dirname } from 'path';
+import { /* fileURLToPath,  */pathToFileURL } from 'url';
+// import { dirname } from 'path';
 import { glob } from 'node:fs/promises';
 import { styleText, parseArgs } from 'node:util';
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname  = dirname(__filename);
+// const __filename = fileURLToPath(import.meta.url);
+// const __dirname  = dirname(__filename);
 
 // ---------------------------------------------------------------------------
 // 1. Parse flags
@@ -118,15 +119,21 @@ async function run() {
       `${unresolved_props.length} unresolved custom properties found -> ${path.relative(process.cwd(), result_file)}`
     ));
 
-    fs.writeFileSync(
-      result_file,
-      unresolved_props
-        .map(item =>
-          `* [${path.basename(item.file)} :: ${item.line}](${item.file}#L${item.line}) -> var(${item.prop})`
-        )
-        .join('\n'),
-      'utf-8'
-    );
+    if(unresolved_props.length) {
+      fs.writeFileSync(
+        result_file,
+        unresolved_props
+          .map(item =>
+            `* [${path.basename(item.file, '.css')}](${item.file}#L${item.line}) -> \`${item.prop}\``
+          )
+          .join('\n'),
+        'utf-8'
+      );
+    } else {
+      if (fs.existsSync(result_file)) {
+        fs.unlinkSync(result_file);
+      }
+    }
 
     console.log(styleText(['green'], '**** DONE ****'));
 

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

@@ -75,6 +75,12 @@ 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.4.3",
+  "version": "0.5.0",
   "description": "Light css framework",
   "type": "module",
   "homepage": "https://github.com/massimo-cassandro/minimo#readme",

package/src/components/modal-alert/modal-alert.css

@@ -5,19 +5,19 @@
 
 .modal-alert {
   --malert-success-color: var(--status-success-color);
-  --malert-success-color-fg: var(--status-success-foreground);
+  --malert-success-color-fg: var(--status-success-fg);
 
   --malert-info-color: var(--status-info-color);
-  --malert-info-color-fg: var(--status-info-foreground);
+  --malert-info-color-fg: var(--status-info-fg);
 
   --malert-warning-color: var(--status-warning-color);
-  --malert-warning-color-fg: var(--status-warning-foreground);
+  --malert-warning-color-fg: var(--status-warning-fg);
 
   --malert-error-color: var(--status-danger-color);
-  --malert-error-color-fg: var(--status-danger-foreground);
+  --malert-error-color-fg: var(--status-danger-fg);
 
   --malert-confirm-color: var(--status-warning-color);
-  --malert-confirm-color-fg: var(--status-warning-foreground);
+  --malert-confirm-color-fg: var(--status-warning-fg);
 
   /* --malert-marks-stroke-width: 6px; */
   --malert-backdrop: rgb(0 0 0 / .3);

package/src/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(--neutral-base);
+    border: 1px solid var(--neutral-100);
     border-radius: 50%;
     box-shadow: var(--shadow-3);
 

package/src/components/recaptcha/recaptcha.css

@@ -50,7 +50,7 @@
       left: 50%;
       display: block;
       padding: var(--size-xs);
-      color: var(--recaptcha-alert-foreground, #fff);
+      color: var(--recaptcha-alert-fg, #fff);
       background-color: var(--recaptcha-alert-background-color, #000);
       border: .5px solid currentColor;
       border-radius: var(--radius-xs);

package/src/css/alerts.css

@@ -26,24 +26,24 @@
 
   /* alert-error / alert-danger (default) */
   --_alert-bg-color: var(--status-danger-background-color);
-  --_alert-fg-color: var(--status-danger-foreground);
+  --_alert-fg-color: var(--status-danger-fg);
   --_alert-border-color: var(--status-danger-border-color);
 
   position: relative;
 
   &.alert-warning, &.alert-notice {
     --_alert-bg-color: var(--status-warning-color);
-    --_alert-fg-color: var(--status-warning-foreground);
+    --_alert-fg-color: var(--status-warning-fg);
     --_alert-border-color: var(--status-warning-border-color);
   }
   &.alert-info {
     --_alert-bg-color: var(--status-info-color);
-    --_alert-fg-color: var(--status-info-foreground);
+    --_alert-fg-color: var(--status-info-fg);
     --_alert-border-color: var(--status-info-border-color);
   }
   &.alert-success {
     --_alert-bg-color: var(--status-success-color);
-    --_alert-fg-color: var(--status-success-foreground);
+    --_alert-fg-color: var(--status-success-fg);
     --_alert-border-color: var(--status-success-border-color);
   }
 

package/src/css/buttons/status-buttons.css

@@ -2,21 +2,21 @@
 
   &.btn-success {
     --_bg: var(--status-success-color);
-    --_fg: var(--status-success-foreground);
+    --_fg: var(--status-success-fg);
     --_btn-bg-color: var(--_bg);
     --_btn-fg-color: var(--_fg);
     --_btn-border-color: var(--status-success-border-color);
   }
   &.btn-info {
     --_bg: var(--status-info-color);
-    --_fg: var(--status-info-foreground);
+    --_fg: var(--status-info-fg);
     --_btn-bg-color: var(--_bg);
     --_btn-fg-color: var(--_fg);
     --_btn-border-color: var(--status-info-border-color);
   }
   &.btn-danger, &.btn-error {
     --_bg: var(--status-danger-color);
-    --_fg: var(--status-danger-foreground);
+    --_fg: var(--status-danger-fg);
     --_btn-bg-color: var(--_bg);
     --_btn-fg-color: var(--_fg);
     --_btn-border-color: var(--status-danger-border-color);
@@ -25,7 +25,7 @@
 
   &.btn-warning {
     --_bg: var(--status-warning-color);
-    --_fg: var(--status-warning-foreground);
+    --_fg: var(--status-warning-fg);
     --_btn-bg-color: var(--_bg);
     --_btn-fg-color: var(--_fg);
     --_btn-border-color: var(--status-warning-border-color);

package/src/css/forms/forms.css

@@ -99,7 +99,7 @@ select.form-control, .form-select {
 
 input[type='checkbox'] {
   color: var(--form-control-text-color);
-  accent-color: var(--accent-base);
+  accent-color: var(--accent-100);
   transform-origin: center;
   scale: 1.3;
 }

package/src/custom-properties-default.css

@@ -1,10 +1,10 @@
 :root {
-  --accent-base: #567d0d;
-  --accent-on-base: #fff;
+  --accent-100: #567d0d;
+  --accent-100-fg: #fff;
   --alert-border-radius: var(--radius-sm);
   --alert-box-shadow: 0 0 .5rem 0 oklch(0% 0 0 / .5);
-  --badge-background-color: var(--primary-base);
-  --badge-color: var(--primary-on-base);
+  --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);
@@ -47,9 +47,9 @@
   --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-background-color: var(--primary-100);
   --btn-primary-border-color: var(--btn-primary-background-color);
-  --btn-primary-color: var(--primary-on-base);
+  --btn-primary-color: var(--primary-100-fg);
   --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);
@@ -166,11 +166,12 @@
   --link-focus-outline-color: var(--link-color);
   --link-focus-outline-width: .125rem;
   --link-visited-color: #ae0da3;
-  --neutral-base: #666;
-  --neutral-on-base: #fff;
+  --neutral-100: #666;
+  --neutral-100-fg: #fff;
   --overlay-color: rgb(0 0 0 / .6);
-  --primary-base: #083865;
-  --primary-on-base: #fff;
+  --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);
@@ -180,19 +181,19 @@
   --radius-xs: var(--size-xs);
   --radius-xxs: var(--size-xxs);
   --recaptcha-alert-background-color: #000;
-  --recaptcha-alert-foreground: #fff;
+  --recaptcha-alert-fg: #fff;
   --recaptcha-alert-overlay-color: rgb(0 0 0 / .5);
   --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-base);
+  --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: calc(color-mix(in srgb, var(--table-thead-background-color) 90%, var(--accent-base)));
-  --secondary-base: #650853;
-  --secondary-on-base: #fff;
+  --sdt-thead-hover-background-color: calc(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(--body-background-color);
   --sf-macro-btn-close-size: 2rem;
-  --sf-macro-rows-border: 1px solid var(--neutral-base);
+  --sf-macro-rows-border: 1px solid var(--neutral-100);
   --sf-macro-rows-border-radius: var(--radius-xs);
   --sf-macro-rows-even-background-color: var(--body-background-color);
   --sf-macro-rows-hover-background-color: calc(color-mix(in srgb, var(--body-background-color) 95%, #000));
@@ -207,25 +208,25 @@
   --size-xl: 2rem;
   --size-xs: .5rem;
   --size-xxs: .25rem;
-  --spinner-color: var(--primary-base);
+  --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;
-  --status-danger-foreground: #fff;
+  --status-danger-fg: #fff;
   --status-info-background-color: var(--status-info-color);
   --status-info-border-color: var(--status-info-color);
   --status-info-color: #0665c5;
-  --status-info-foreground: #fff;
+  --status-info-fg: #fff;
   --status-success-background-color: var(--status-success-color);
   --status-success-border-color: var(--status-success-color);
   --status-success-color: #046d19;
-  --status-success-foreground: #fff;
+  --status-success-fg: #fff;
   --status-warning-background-color: var(--status-warning-color);
   --status-warning-border-color: var(--status-warning-color);
   --status-warning-color: #fc0;
-  --status-warning-foreground: #4f2900;
+  --status-warning-fg: #4f2900;
   --table-body-border-width: .0625rem;
   --table-body-tr-alt-bg-color: #efefef;
   --table-body-tr-hover-bg-color: #cbcbcb;
@@ -237,7 +238,7 @@
   --table-thead-border-width: .1875rem;
   --text-color: #000;
   --text-dim: var(--text-muted);
-  --text-muted: var(--neutral-base);
+  --text-muted: var(--neutral-100);
   --text-negative: #fff;
   --text-selected-background-color: #ddd;
   --text-selected-text: var(--body-text);

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

@@ -1,13 +0,0 @@
-{
-  "accent": {
-    "base": {
-      "$value": "#567d0d",
-      "$type": "color"
-    },
-    "on-base": {
-      "$value": "#fff",
-      "$type": "color"
-    }
-  }
-
-}

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

@@ -1,12 +0,0 @@
-{
-  "neutral": {
-    "base": {
-      "$value": "#666",
-      "$type": "color"
-    },
-    "on-base": {
-      "$value": "#fff",
-      "$type": "color"
-    }
-  }
-}

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

@@ -1,12 +0,0 @@
-{
-  "primary": {
-    "base": {
-      "$value": "#083865",
-      "$type": "color"
-    },
-    "on-base": {
-      "$value": "#fff",
-      "$type": "color"
-    }
-  }
-}

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

@@ -1,12 +0,0 @@
-{
-  "secondary": {
-    "base": {
-      "$value": "#650853",
-      "$type": "color"
-    },
-    "on-base": {
-      "$value": "#fff",
-      "$type": "color"
-    }
-  }
-}