@massimo-cassandro/minimo 1.5.12 → 1.6.0

package/charts/src/helpers/chart-utils.js

@@ -45,25 +45,6 @@ export function polarToCartesianString(degrees_angle, cx, cy, circleRadius) {
 }
 
 
-// TODO unificare con classnames globale
-/**
- * Concatena i nomi delle classi filtrando i valori falsy.
- * @param {...any} args - I nomi delle classi o condizioni.
- * @returns {string} Una stringa di nomi di classi separati da spazio.
- */
-export function classnames(...args) {
-  return args.filter(Boolean).join(' ');
-}
-
-/**
- * Concatena i nomi delle classi filtrando i valori falsy; restituisce null se il risultato è una stringa vuota.
- * @param {...any} args - I nomi delle classi o condizioni.
- * @returns {string|null} Una stringa di nomi di classi o null.
- */
-export function classnamesNull(...args) {
-  return args.filter(Boolean).join(' ') || null;
-}
-
 /**
  * Calcola le coordinate per un elemento `path` di tipo arco (arc).
  * Lo `start_angle` è il punto di inizio e `percentage` è la lunghezza percentuale dell'arco rispetto a `max_angle`.

package/design-tokens/_src/components/spinner.minimo.tokens.mjs

@@ -0,0 +1,18 @@
+export default {
+  spinner: {
+    size: {
+      $value: '{size.lg}',
+      $type: 'dimension'
+    },
+    color: {
+      $value: '{primary.100}',
+      $type: 'color'
+    },
+    stroke: {
+      width: {
+        $value: '2px',
+        $type: 'dimension'
+      }
+    },
+  }
+};

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

@@ -0,0 +1,56 @@
+export default {
+  headings: {
+    text: {
+      align: {
+        $type: 'string',
+        $value: 'inherit'
+      }
+    },
+    color: {
+      $type: 'color',
+      $value: '{text.color}'
+    },
+    font: {
+      weight: {
+        $type: 'string',
+        $value: '{font.weight.semibold}'
+      }
+    },
+    h1: {
+      font: {
+        weight: {
+          $type: 'string',
+          $value: '{headings.font.weight}'
+        },
+        size: {
+          $type: 'dimension',
+          $value: '{font.size.2xl}'
+        }
+      }
+    },
+    h2: {
+      font: {
+        size: {
+          $type: 'dimension',
+          $value: '{font.size.xl}'
+        }
+      }
+    },
+    h3: {
+      font: {
+        size: {
+          $type: 'dimension',
+          $value: '{font.size.lg}'
+        }
+      }
+    },
+    h4: {
+      font: {
+        size: {
+          $type: 'dimension',
+          $value: '{font.size.md}'
+        }
+      }
+    },
+  }
+};

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

@@ -0,0 +1,41 @@
+export default {
+  link: {
+    color: {
+      $type: 'color',
+      $value: '#0d12ae'
+    },
+    visited: {
+      color: {
+        $type: 'color',
+        $value: '#ae0da3'
+      },
+    },
+    hover: {
+      color: null
+    },
+    focus: {
+      outline: {
+        color: {
+          $type: 'color',
+          $value: '{link.color}'
+        },
+        width: {
+          $type: 'dimension',
+          $value: '2px'
+        },
+      }
+    },
+    active: {
+      color: {
+        $type: 'color',
+        $value: '#51054C'
+      },
+      background: {
+        color: {
+          $type: 'color',
+          $value: 'transparent'
+        }
+      }
+    }
+  }
+};

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

@@ -0,0 +1,44 @@
+export default {
+  radius: {
+    base: {
+      $value: '{size.base}',
+      $type: 'dimension',
+      $description: ''
+    },
+    xxs: {
+      $value: '{size.xxs}',
+      $type: 'dimension',
+      $description: ''
+    },
+    xs: {
+      $value: '{size.xs}',
+      $type: 'dimension',
+      $description: ''
+    },
+    sm: {
+      $value: '{size.sm}',
+      $type: 'dimension',
+      $description: ''
+    },
+    md: {
+      $value: '{size.md}',
+      $type: 'dimension',
+      $description: ''
+    },
+    lg: {
+      $value: '{size.lg}',
+      $type: 'dimension',
+      $description: ''
+    },
+    xl: {
+      $value: '{size.xl}',
+      $type: 'dimension',
+      $description: ''
+    },
+    pill: {
+      $value: '9999rem',
+      $type: 'dimension',
+      $description: ''
+    }
+  }
+};

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

@@ -0,0 +1,105 @@
+// in attesa di modifica dello script per il parser automatico delle espressioni
+
+// export const dimensions_bulder = (
+//   base_dim = 1,
+//   unit = 'rem',
+//   scale = ['xxs', 'xs','sm', 'base', 'md', 'lg', 'xl', '2xl', '3xl']) => {
+// };
+
+export default {
+  size: {
+    xxs: {
+      $value: '.25rem',
+      $type: 'dimension',
+      $description: ''
+    },
+    xs: {
+      $value: '.5rem',
+      $type: 'dimension',
+      $description: ''
+    },
+    sm: {
+      $value: '.75rem',
+      $type: 'dimension',
+      $description: ''
+    },
+    base: {
+      $value: '1rem',
+      $type: 'dimension',
+      $description: ''
+    },
+    md: {
+      $value: '1.2rem',
+      $type: 'dimension',
+      $description: ''
+    },
+    lg: {
+      $value: '1.5rem',
+      $type: 'dimension',
+      $description: ''
+    },
+    xl: {
+      $value: '2rem',
+      $type: 'dimension',
+      $description: ''
+    },
+    '2xl': {
+      $value: '3rem',
+      $type: 'dimension',
+      $description: ''
+    },
+    '3xl': {
+      $value: '4rem',
+      $type: 'dimension',
+      $description: ''
+    },
+  },
+
+  // // size: {
+  // //   xxs: {
+  // //     $value: '{size.base} * .25',
+  // //     $type: 'dimension',
+  // //     $description: ''
+  // //   },
+  // //   xs: {
+  // //     $value: '{size.base} * .5',
+  // //     $type: 'dimension',
+  // //     $description: ''
+  // //   },
+  // //   sm: {
+  // //     $value: '{size.base} * .75',
+  // //     $type: 'dimension',
+  // //     $description: ''
+  // //   },
+  // //   base: {
+  // //     $value: '1rem',
+  // //     $type: 'dimension',
+  // //     $description: ''
+  // //   },
+  // //   md: {
+  // //     $value: '{size.base} * 1.2',
+  // //     $type: 'dimension',
+  // //     $description: ''
+  // //   },
+  // //   lg: {
+  // //     $value: '{size.base} * 1.5',
+  // //     $type: 'dimension',
+  // //     $description: ''
+  // //   },
+  // //   xl: {
+  // //     $value: '{size.base} * 2',
+  // //     $type: 'dimension',
+  // //     $description: ''
+  // //   },
+  // //   '2xl': {
+  // //     $value: '{size.base} * 3',
+  // //     $type: 'dimension',
+  // //     $description: ''
+  // //   },
+  // //   '3xl': {
+  // //     $value: '{size.base} * 4',
+  // //     $type: 'dimension',
+  // //     $description: ''
+  // //   }
+  // // }
+};

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

@@ -0,0 +1,92 @@
+export default {
+  status: {
+    danger: {
+      color: {
+        $value: '#c00',
+        $type: 'color'
+      },
+      background: {
+        color: {
+          $value: '{status.danger.color}',
+          $type: 'color'
+        }
+      },
+      fg: {
+        $value: '#fff',
+        $type: 'color'
+      },
+      border: {
+        color: {
+          $value: '{status.danger.color}',
+          $type: 'color'
+        }
+      }
+    },
+    success: {
+      color: {
+        $value: '#046d19',
+        $type: 'color'
+      },
+      background: {
+        color: {
+          $value: '{status.success.color}',
+          $type: 'color'
+        }
+      },
+      fg: {
+        $value: '#fff',
+        $type: 'color'
+      },
+      border: {
+        color: {
+          $value: '{status.success.color}',
+          $type: 'color'
+        }
+      }
+    },
+    info: {
+      color: {
+        $value: '#0665c5',
+        $type: 'color'
+      },
+      background: {
+        color: {
+          $value: '{status.info.color}',
+          $type: 'color'
+        }
+      },
+      fg: {
+        $value: '#fff',
+        $type: 'color'
+      },
+      border: {
+        color: {
+          $value: '{status.info.color}',
+          $type: 'color'
+        }
+      }
+    },
+    warning: {
+      color: {
+        $value: '#fc0',
+        $type: 'color'
+      },
+      background: {
+        color: {
+          $value: '{status.warning.color}',
+          $type: 'color'
+        }
+      },
+      fg: {
+        $value: '#4f2900',
+        $type: 'color'
+      },
+      border: {
+        color: {
+          $value: '{status.warning.color}',
+          $type: 'color'
+        }
+      }
+    },
+  }
+};

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

@@ -0,0 +1,123 @@
+export default {
+  font: {
+    family: {
+      $value: 'sans-serif',
+      $type: 'fontFamily'
+    },
+    'family-mono': {
+      $value: "'Monaspace Neon Var', 'Monaspace Neon', 'Aptos Mono', 'Roboto Mono', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Andale Mono', 'Courier New', monospace",
+      $type: 'fontFamily'
+    },
+
+    size: {
+      base: {
+        $value: 'clamp(.9rem, .6538rem + .3846vw, 1rem)',
+        $type: 'string'
+      },
+      xxs: {
+        $value: 'clamp(.6rem, .3538rem + .3846vw, .7rem)',
+        $type: 'string'
+      },
+      xs: {
+        $value: 'clamp(.7rem, .4538rem + .3846vw, .8rem)',
+        $type: 'string'
+      },
+      sm: {
+        $value: 'clamp(.8rem, .5538rem + .3846vw, .9rem)',
+        $type: 'string'
+      },
+      // lead: {
+      //   $value: 'clamp(1rem, 0.6923rem + 0.4808vw, 1.125rem)',
+      //   $type: 'string'
+      // },
+      md: {
+        $value: 'clamp(1.05rem, .6808rem + .5769vw, 1.2rem)',
+        $type: 'string'
+      },
+      lg: {
+        $value: 'clamp(1.2rem, .7077rem + .7692vw, 1.4rem)',
+        $type: 'string'
+      },
+      xl: {
+        $value: 'clamp(1.6rem, 1.1077rem + .7692vw, 1.8rem)',
+        $type: 'string'
+      },
+      '2xl': {
+        $value: 'clamp(2rem, .7692rem + 1.9231vw, 2.5rem)',
+        $type: 'string'
+      },
+      '3xl': {
+        $value: 'clamp(2.2rem, .2308rem + 3.0769vw, 3rem)',
+        $type: 'string'
+      }
+    },
+
+    style: {
+      base: {
+        $value: 'normal',
+        $type: 'string'
+      }
+    },
+
+    weight: {
+      xxlight: {
+        $value: '100',
+        $type: 'string',
+        $description: ''
+      },
+      xlight: {
+        $value: '200',
+        $type: 'string',
+        $description: ''
+      },
+      light: {
+        $value: '300',
+        $type: 'string',
+        $description: ''
+      },
+      regular: {
+        $value: '400',
+        $type: 'string',
+        $description: ''
+      },
+      medium: {
+        $value: '500',
+        $type: 'string',
+        $description: ''
+      },
+      semibold: {
+        $value: '600',
+        $type: 'string',
+        $description: ''
+      },
+      bold: {
+        $value: '700',
+        $type: 'string',
+        $description: ''
+      },
+      xbold: {
+        $value: '900',
+        $type: 'string',
+        $description: ''
+      }
+    }
+  }, // end font
+
+  // Rhythm in Web Typography | Better Web Type <https://betterwebtype.com/articles/2018/10/15/rhythm-in-web-typography/>
+  // The good line-height <https://www.thegoodlineheight.com/>
+
+  'line-height': {
+    base: {
+      $value: 1.5,
+      $type: 'number'
+    },
+    sm: {
+      $value: 1.4,
+      $type: 'number'
+    },
+    xs: {
+      $value: 1.25,
+      $type: 'number'
+    }
+  },
+};

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

@@ -0,0 +1,8 @@
+export default {
+  overlay: {
+    color: {
+      $value: 'rgb(0 0 0 / .6)',
+      $type: 'color'
+    }
+  }
+};

package/design-tokens/_src/web-components/simple-datatable.minimo.tokens.mjs

@@ -0,0 +1,47 @@
+export default {
+  sdt: {
+    thead: {
+      hover: {
+        background: {
+          color: {
+            $value: 'color-mix(in srgb, {table.thead.background.color} 90%, {accent.100})',
+            $type: 'color'
+          }
+        }
+      }
+    },
+
+    pagination: {
+      border: {
+        $type: 'border',
+        $value: {
+          color: '{neutral.100}',
+          width: '{btn.border.width}',
+          // style: 'solid'
+        }
+      },
+      padding: {
+        block: {
+          $value: '{size.xxs}',
+          $type: 'dimension'
+        },
+        inline: {
+          $value: '{size.xs}',
+          $type: 'dimension'
+        },
+      }
+    },
+    hover: {
+      background: {
+        color: {
+          $value: '{btn.primary.background.color}',
+          $type: 'color'
+        }
+      },
+      color: {
+        $value: '{btn.primary.color}',
+        $type: 'color'
+      }
+    }
+  }
+};

package/{design-tokens-utilities → design-tokens/utilities}/build-tokens-src/config.mjs

@@ -7,7 +7,7 @@
 
 /* globals process */
 
-import path from 'path';
+import * as path from 'node:path';
 import { pathToFileURL } from 'url';
 
 // ---------------------------------------------------------------------------

package/{design-tokens-utilities → design-tokens/utilities}/build-tokens.mjs

@@ -13,7 +13,7 @@
 //   build-tokens-src/platforms.mjs      <- builds the platforms object (css + optional penpot)
 
 import StyleDictionary from 'style-dictionary';
-import path from 'path';
+import * as path from 'node:path';
 import { styleText } from 'node:util';
 import { homedir } from 'os';
 import stylelint from 'stylelint';

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

@@ -11,8 +11,8 @@
 
 /* globals process */
 
-import path from 'path';
-import fs from 'node:fs';
+import * as path from 'node:path';
+import * as fs from 'node:fs';
 import { /* fileURLToPath,  */pathToFileURL } from 'url';
 // import { dirname } from 'path';
 import { glob } from 'node:fs/promises';

package/index.js

@@ -1,6 +1,6 @@
 
 // utilities
-export { classnames } from './src/utilities/classnames.js';
+export { classnames, classnamesNull } from './src/utilities/classnames.js';
 export { domBuilder } from './src/utilities/dom-builder/dom-builder.js';
 export { enableSubmitBtns } from './src/utilities/enable-submit-btns.js';
 export { titleCase } from './src/utilities/title-case.js';

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@massimo-cassandro/minimo",
-  "version": "1.5.12",
+  "version": "1.6.0",
   "description": "Light css framework & utilities",
   "type": "module",
   "main": "./index.js",
   "exports": {
     ".": "./index.js",
+    "./charts": "./charts/index.js",
+    "./css/*": "./src/css/*.css",
+    "./tokens/*": "./design-tokens/tokens/*",
     "./*": "./*"
   },
   "homepage": "https://github.com/massimo-cassandro/minimo#readme",
@@ -13,8 +16,8 @@
     "url": "https://github.com/massimo-cassandro/minimo/issues"
   },
   "bin": {
-    "buildTokens": "./design-tokens-utilities/build-tokens.mjs",
-    "checkUnresolvedProps": "./design-tokens-utilities/check-unresolved-custom-props.mjs"
+    "buildTokens": "./design-tokens/utilities/build-tokens.mjs",
+    "checkUnresolvedProps": "./design-tokens/utilities/check-unresolved-custom-props.mjs"
   },
   "repository": {
     "type": "git",
@@ -24,8 +27,8 @@
     "UPD-version": "npx update-version  # --config=./dev-utilities.config.mjs",
     "npm-publish": "npm publish",
     "upd@m": "npx upd@m",
-    "build-tokens": "node ./design-tokens-utilities/build-tokens.mjs --config ./tokens-config.mjs",
-    "check unresolved props": "node ./design-tokens-utilities/check-unresolved-custom-props.mjs --config ./tokens-config.mjs"
+    "build-tokens": "node ./design-tokens/utilities/build-tokens.mjs --config ./design-tokens/tokens-config.mjs",
+    "check unresolved props": "node ./design-tokens/utilities/check-unresolved-custom-props.mjs --config ./design-tokens/tokens-config.mjs"
   },
   "license": "MIT",
   "author": "Massimo Cassandro",
@@ -38,9 +41,9 @@
   "files": [
     "./index.js",
     "src/**/*.{js,mjs,css,svg,md}",
-    "design-tokens/**/*.{tokens.json,tokens.jsonc}",
-    "design-tokens-src/**/*.{tokens.json,tokens.jsonc,mjs,js,md}",
-    "design-tokens-utilities/**/*.{mjs,md}",
+    "design-tokens/tokens/**/*.{tokens.json,tokens.jsonc}",
+    "design-tokens/_src/**/*.{tokens.json,tokens.jsonc,mjs,js,md}",
+    "design-tokens/utilities/**/*.{mjs,md}",
     "charts/**/*.{js,md}"
   ],
   "peerDependenciesMeta": {

package/src/components/unsplash-page/unsplash-page.module.css

@@ -1,6 +1,6 @@
 /*
   PERSONALIZZAZIONE
-  custom properties (valori di default, vedi /design-tokens-src/components/unsplash-page.minimo.tokens.mjs):
+  custom properties (valori di default, vedi /design-tokens/_src/components/unsplash-page.minimo.tokens.mjs):
 
   Basic props:
   --up-bg-color: hsl(0deg 0% 0% / .7);

package/src/utilities/classnames.js

@@ -8,3 +8,7 @@ export function classnames(...args) {
     return Boolean(x);
   }).join(' ');
 }
+
+export function classnamesNull(...args) {
+  return classnames(...args) || null;
+}