@massimo-cassandro/minimo 1.41.8 → 1.41.10

package/design-tokens/_src/flex-grid.minimo.tokens.mjs

@@ -5,14 +5,14 @@ export default {
       $type: 'dimension'
     }
   },
-  grid: {
-    cols: {
-      $value: 3,
-      $type: 'number'
-    },
-    'min-col-width': {
-      $value: '6rem',
-      $type: 'dimension'
-    }
-  }
+  // grid: {
+  //   cols: {
+  //     $value: 3,
+  //     $type: 'number'
+  //   },
+  //   'min-col-width': {
+  //     $value: '6rem',
+  //     $type: 'dimension'
+  //   }
+  // }
 };

package/dev-tools/design-tokens-builder/build-tokens-src/build-source-modes.mjs

@@ -83,7 +83,7 @@ export const buildSourceModes = async ({
   // Legge il destFile preesistente (se c'è) PRIMA che venga eseguita qualsiasi istanza
   // di Style Dictionary, dato che la prima a scrivere lo sovrascriverebbe.
   if (mergeCustomProps) {
-    loadExistingCustomPropsScoped(path.join(buildPath, destFile), baseMode, mergeCustomProps, customPropsSelector);
+    loadExistingCustomPropsScoped(path.join(buildPath, destFile), baseMode, mergeCustomProps, customPropsSelector, modeNames);
   }
 
   const cssTransforms = pxToRem

package/dev-tools/design-tokens-builder/build-tokens-src/light-dark.mjs

@@ -24,7 +24,9 @@
   `color-scheme` effettivo, indipendentemente dal fatto che la dichiarazione stessa
   si trovi dentro una regola `@media (prefers-color-scheme: ...)` o meno.
 
-  Interazione con `mergeCustomProps`: qui non serve nulla di speciale — il merge
+  Interazione con `mergeCustomProps`: le dichiarazioni preesistenti `light-dark(X, Y)` vengono
+  scomposte in X (light) e Y (dark) già in fase di lettura (vedi loadExistingCustomPropsScoped()
+  in ../merge-css.mjs), così da non essere ricombinate annidate. Per il resto il merge
   per modalità con le custom properties preesistenti (vedi ../merge-css.mjs)
   viene già eseguito prima, dentro computeFinalProps() (formats/css.mjs), prima che
   questo modulo veda le proprietà. Quindi un file preesistente scritto con la

package/dev-tools/design-tokens-builder/build-tokens-src/merge-css.mjs

@@ -205,6 +205,41 @@ export const loadExistingCustomProps = (absDestPath, sources = true) => {
   return existingCustomProps;
 };
 
+/*
+  Se la coda di una dichiarazione (valore + `;` + eventuale commento finale) è interamente
+  una chiamata `light-dark(X, Y)`, restituisce le due metà con il commento finale; altrimenti
+  null. La virgola di primo livello è individuata contando la profondità delle parentesi,
+  così che argomenti come `var(--a, red)` non vengano spezzati.
+*/
+/** @param {string} tail @returns {{light:string, dark:string}|null} */
+const splitLightDarkTail = (tail) => {
+  const match = /^light-dark\(/.exec(tail);
+  if (!match) return null;
+  let depth = 0;
+  let commaIdx = -1;
+  let closeIdx = -1;
+  for (let i = match[0].length - 1; i < tail.length; i++) {
+    const ch = tail[i];
+    if (ch === '(') depth++;
+    else if (ch === ')') {
+      depth--;
+      if (depth === 0) { closeIdx = i; break; }
+    } else if (ch === ',' && depth === 1) {
+      if (commaIdx !== -1) return null;
+      commaIdx = i;
+    }
+  }
+  if (commaIdx === -1 || closeIdx === -1) return null;
+  const rest = tail.slice(closeIdx + 1);
+  if (!/^\s*;\s*(\/\*.*\*\/)?\s*$/.test(rest)) return null;
+  const suffix = rest.trim();
+  const open = match[0].length;
+  return {
+    light: `${tail.slice(open, commaIdx).trim()}${suffix}`,
+    dark: `${tail.slice(commaIdx + 1, closeIdx).trim()}${suffix}`,
+  };
+};
+
 /**
  * Equivalente sourceModes di loadExistingCustomProps(): legge il file CSS di
  * destinazione (se esiste) e memorizza una mappa nome → valore per modalità,
@@ -217,9 +252,12 @@ export const loadExistingCustomProps = (absDestPath, sources = true) => {
  *   array solo i file sorgente dei token corrispondenti a una delle sue voci (default: true)
  * @param {string} [selector] il customPropsSelector con cui è stato generato il file
  *   preesistente (default: ':root' — vedi config.mjs)
+ * @param {string[]} [modeNames] chiavi di sourceModes: se includono sia `light` sia `dark`, le
+ *   dichiarazioni preesistenti `light-dark(X, Y)` vengono scomposte in X (light) e Y (dark),
+ *   per evitare che vengano ricombinate annidate (default: [])
  * @returns {Record<string, Record<string,string>>|null}
  */
-export const loadExistingCustomPropsScoped = (absDestPath, baseMode, sources = true, selector = ':root') => {
+export const loadExistingCustomPropsScoped = (absDestPath, baseMode, sources = true, selector = ':root', modeNames = []) => {
   mergeSources = sources;
   if (!existsSync(absDestPath)) {
     scopedExistingCustomProps = null;
@@ -234,6 +272,24 @@ export const loadExistingCustomPropsScoped = (absDestPath, baseMode, sources = t
     if (mode === '__base__') continue;
     scopedExistingCustomProps[mode] = parseCustomProps(body);
   }
+
+  if (modeNames.includes('light') && modeNames.includes('dark')) {
+    const baseProps = scopedExistingCustomProps[baseMode] ?? {};
+    for (const [name, tail] of Object.entries(baseProps)) {
+      const halves = splitLightDarkTail(tail);
+      if (!halves) continue;
+      scopedExistingCustomProps.light ??= {};
+      scopedExistingCustomProps.dark ??= {};
+      // una voce esplicita già presente nel blocco della modalità ha la precedenza
+      scopedExistingCustomProps.light[name] ??= halves.light;
+      scopedExistingCustomProps.dark[name] ??= halves.dark;
+      // se la base è light/dark, la voce è stata appena riassegnata sopra: va comunque
+      // allineata alla propria metà
+      if (baseMode === 'light') scopedExistingCustomProps.light[name] = halves.light;
+      else if (baseMode === 'dark') scopedExistingCustomProps.dark[name] = halves.dark;
+      else delete baseProps[name];
+    }
+  }
   return scopedExistingCustomProps;
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massimo-cassandro/minimo",
-  "version": "1.41.8",
+  "version": "1.41.10",
   "description": "Light css framework & utilities",
   "type": "module",
   "main": "./index.js",

package/src/css/grid.css

@@ -2,10 +2,10 @@
 
 .grid {
   --_cols: 1;
-  /* --_min-col-width: calc((100% - calc(var(--_cols) * var(--flex-grid-gap))) / var(--grid-cols)); */
+  /* --_min-col-width: calc((100% - calc(var(--_cols) * var(--flex-grid-gap))) / var(--grid-cols));  NB custom prop rimossa */
 
   display: grid;
-  /* grid-template-columns: repeat(var(--_cols), minmax(var(--grid-min-col-width), 1fr)); */
+  /* grid-template-columns: repeat(var(--_cols), minmax(var(--grid-min-col-width), 1fr)); NB custom prop rimossa */
   grid-template-columns: repeat(var(--_cols), minmax(0, 1fr));
   grid-auto-flow: row;
   gap: var(--flex-grid-gap);

package/src/css/headings.css

@@ -1,6 +1,7 @@
 
 h1, h2, h3, .h3, h4, .h4 {
-  line-height: 1.2;
+  font-family: var(--headings-font-family);
+  line-height: var(--headings-font-weight);
   color: var(--headings-color);
   text-align: var(--headings-text-align);
 }

package/src/custom-media.css

@@ -21,7 +21,7 @@ tablet alt:
 53.75rem : 860px  medium (tablet)
 */
 
-/* @custom-media --media-xxlarge-viewport-up (width >= 90rem); */
+@custom-media --media-xxlarge-viewport-up (width >= 90rem);
 @custom-media --media-xlarge-viewport-up (width >= 80rem);
 @custom-media --media-large-viewport-up (width >= 64rem);
 @custom-media --media-medium-viewport-up (width >= 47.5rem);
@@ -37,4 +37,4 @@ tablet alt:
 @custom-media --media-xlarge-viewport-down (max-width: 80rem);
 @custom-media --media-large-viewport-down (max-width: 64rem);
 @custom-media --media-medium-viewport-down (max-width: 47.5rem);
-/* @custom-media --media-small-viewport-down (max-width: 25rem); */
+@custom-media --media-small-viewport-down (max-width: 25rem);

package/src/custom-properties.css

@@ -205,9 +205,6 @@
   --form-validation-outline-offset: -3px;
   --form-validation-outline-width: 3px;
 
-  --grid-cols: 3;
-  --grid-min-col-width: 6rem;
-
   --headings-color: var(--text-color);
   --headings-font-family: var(--font-family);
   --headings-font-weight: var(--font-weight-semibold);