@massimo-cassandro/minimo 0.4.3 → 0.5.1

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,11 @@
 // -----------------------------------------------------------------------
 {
   "primary": {
-    "base": {
+    "100": {
       "$type": "color",
       "$value": "#083865"
     },
-    "on-base": {
+    "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/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,8 @@ const config = {
   //               e.g. {size.base} = 16px, "{size.base} * .25" -> "4px"
   penpotExpressions: 'resolve',
 
+
+
   // ---------------------------------------------------------------------------
   // check-unresolved-custom-props.mjs settings
   // ---------------------------------------------------------------------------

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massimo-cassandro/minimo",
-  "version": "0.4.3",
+  "version": "0.5.1",
   "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,11 @@
   --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;
   --radius-base: var(--size-base);
   --radius-lg: var(--size-lg);
   --radius-md: var(--size-md);
@@ -180,19 +180,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 +207,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 +237,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"
-    }
-  }
-}