@massimo-cassandro/minimo 1.41.4 → 1.41.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (131) hide show
  1. package/README.md +12 -12
  2. package/charts/src/node-helpers/create-svg-canvas-node.mjs +2 -2
  3. package/charts/src/node-helpers/svg-text-to-path.js +9 -9
  4. package/charts/src/rating-display/index.js +1 -1
  5. package/charts/src/rating-display/ratindDisplayAnimation.js +3 -3
  6. package/design-tokens/README.md +2 -2
  7. package/design-tokens/_src/_readme.md +26 -26
  8. package/dev-tools/README.md +16 -16
  9. package/dev-tools/create-favicons/README.md +31 -31
  10. package/dev-tools/create-favicons/src/create-ico.mjs +2 -2
  11. package/dev-tools/create-favicons/src/default-params.mjs +1 -1
  12. package/dev-tools/create-favicons/src/init.mjs +1 -1
  13. package/dev-tools/design-tokens-builder/README.md +102 -102
  14. package/dev-tools/design-tokens-builder/build-tokens-src/build-source-modes.mjs +85 -73
  15. package/dev-tools/design-tokens-builder/build-tokens-src/config.mjs +109 -85
  16. package/dev-tools/design-tokens-builder/build-tokens-src/formats/css.mjs +113 -90
  17. package/dev-tools/design-tokens-builder/build-tokens-src/formats/json.mjs +107 -95
  18. package/dev-tools/design-tokens-builder/build-tokens-src/legacy-tokens-parser.mjs +71 -64
  19. package/dev-tools/design-tokens-builder/build-tokens-src/light-dark.mjs +75 -65
  20. package/dev-tools/design-tokens-builder/build-tokens-src/merge-css.mjs +113 -102
  21. package/dev-tools/design-tokens-builder/build-tokens-src/platforms.mjs +36 -30
  22. package/dev-tools/design-tokens-builder/build-tokens-src/resolve-source-paths.mjs +15 -13
  23. package/dev-tools/design-tokens-builder/build-tokens-src/source-prefixes.mjs +44 -42
  24. package/dev-tools/design-tokens-builder/build-tokens-src/source-transforms.mjs +89 -83
  25. package/dev-tools/design-tokens-builder/build-tokens-src/token-rename-parser.mjs +99 -86
  26. package/dev-tools/design-tokens-builder/build-tokens-src/transforms.mjs +64 -48
  27. package/dev-tools/design-tokens-builder/build-tokens.mjs +80 -68
  28. package/dev-tools/design-tokens-builder/check-unresolved-custom-props.mjs +103 -77
  29. package/dev-tools/design-tokens-builder/tokens-config-sample.mjs +275 -238
  30. package/dev-tools/find-orphan-css-classes/find-orphan-css-classes.mjs +2 -2
  31. package/dev-tools/starter-kit/source_files/app/CLAUDE.md +4 -2
  32. package/dev-tools/starter-kit/source_files/app/{css/index.css → index.css} +2 -2
  33. package/dev-tools/starter-kit/source_files/app/index.js +1 -1
  34. package/dev-tools/starter-kit/source_files/root/_sf/controller/ImgViewerController.php +3 -3
  35. package/dev-tools/starter-kit/source_files/root/_sf/controller/ViewerController.php +2 -2
  36. package/dev-tools/starter-kit/source_files/root/stylelint.config.mjs +1 -1
  37. package/dev-tools/starter-kit/source_files/root/webpack-config-modules/css-rules.mjs +1 -1
  38. package/dev-tools/stylelint-config/README.md +7 -7
  39. package/dev-tools/svg-icons-tools/README.md +32 -32
  40. package/dev-tools/svg-icons-tools/src/config-manager.mjs +1 -1
  41. package/dev-tools/svg-icons-tools/src/default-config.mjs +118 -118
  42. package/dev-tools/svg-icons-tools/src/jsx-icon-file-builder.mjs +24 -24
  43. package/dev-tools/svg-icons-tools/src/parse-svg-filename.mjs +3 -3
  44. package/dev-tools/svg-icons-tools/src/parse-svg-files.mjs +1 -1
  45. package/dev-tools/svg-icons-tools/src/parse-svg-markup.mjs +4 -4
  46. package/dev-tools/svg-icons-tools/src/svg-to-jsx.mjs +2 -2
  47. package/dev-tools/svg-icons-tools/src/svg-to-optimized.mjs +2 -2
  48. package/dev-tools/svg-icons-tools/src/svg-to-symbols.mjs +2 -2
  49. package/dev-tools/upd@m/README.md +1 -1
  50. package/dev-tools/upd@m/index.mjs +1 -1
  51. package/dev-tools/update-version/README.md +9 -9
  52. package/package.json +1 -1
  53. package/snippets/unsplash-browser-app/README.md +1 -1
  54. package/snippets/unsplash-browser-app/unsplash-utilities.js +9 -9
  55. package/src/components/autocomplete/README.md +3 -3
  56. package/src/components/autocomplete/autocomplete-engine.js +75 -63
  57. package/src/components/autocomplete/check-autocomplete.js +3 -3
  58. package/src/components/dismiss-alerts.js +3 -3
  59. package/src/components/form-reset-submit.js +6 -6
  60. package/src/components/inner-nav/inner-nav.js +2 -2
  61. package/src/components/modal-alert/modal-alert.js +67 -65
  62. package/src/components/modal-alert/modal-alert.minimo.tokens.mjs +1 -1
  63. package/src/components/modal-popup/modal-popup.js +56 -56
  64. package/src/components/overlay/overlay.js +3 -3
  65. package/src/components/sf-macro/readme.md +1 -1
  66. package/src/components/sf-macro/sf-macro.js +27 -23
  67. package/src/components/slide-up-down-toggle/slide-up-down-toggle.js +83 -79
  68. package/src/components/slide-up-down-toggle/slide-up-down-toggle.module.css +44 -44
  69. package/src/components/snackbar/snackbar.js +19 -19
  70. package/src/components/spinner/spinner.js +3 -3
  71. package/src/components/unsplash-page/README.md +8 -8
  72. package/src/components/unsplash-page/fetch-unsplash-data.js +3 -3
  73. package/src/components/unsplash-page/unsplash-page.js +33 -33
  74. package/src/components/unsplash-page/unsplash-page.module.css +1 -1
  75. package/src/css/alerts.css +2 -2
  76. package/src/css/forms/forms.css +4 -4
  77. package/src/css/forms/validation.css +1 -1
  78. package/src/css/margin-padding-media.css +4 -4
  79. package/src/css/margin-padding.css +4 -4
  80. package/src/css/reset.css +11 -11
  81. package/src/icons/read-me.md +1 -1
  82. package/src/minimo.css +3 -3
  83. package/src/utilities/better-text-with-places.js +22 -22
  84. package/src/utilities/better-text.js +42 -35
  85. package/src/utilities/classnames.js +8 -8
  86. package/src/utilities/cookies.js +6 -6
  87. package/src/utilities/create-id.js +3 -3
  88. package/src/utilities/disable-btns-on-submit.js +2 -2
  89. package/src/utilities/dom-builder/dom-builder.js +89 -86
  90. package/src/utilities/dom-builder/domBuilderBasicSetup.js +9 -9
  91. package/src/utilities/dom-builder/parseDomString.js +23 -23
  92. package/src/utilities/dom-builder-helpers/README.md +2 -2
  93. package/src/utilities/dom-builder-helpers/form-tags.js +100 -100
  94. package/src/utilities/dom-builder-helpers/picture-tag.js +39 -39
  95. package/src/utilities/enable-submit-btns.js +1 -1
  96. package/src/utilities/escape-html.js +2 -2
  97. package/src/utilities/generate-pwd.js +4 -4
  98. package/src/utilities/linked-dates.js +13 -13
  99. package/src/utilities/parse-file-size.js +6 -6
  100. package/src/utilities/random-id.js +3 -3
  101. package/src/utilities/relative-date.js +40 -40
  102. package/src/utilities/sentence-case.js +1 -1
  103. package/src/utilities/strip-tags.js +1 -1
  104. package/src/utilities/title-case.js +1 -1
  105. package/src/utilities/truncate-string.js +5 -5
  106. package/src/utilities/validation-error-class.js +12 -12
  107. package/src/web-components/json-table/json-table-component.js +123 -121
  108. package/src/web-components/json-table/json-table-component.module.css +6 -6
  109. package/src/web-components/json-table/json-table.minimo.tokens.mjs +6 -6
  110. package/src/web-components/json-table/readme.md +72 -108
  111. package/src/web-components/json-table/src/cell-content.js +25 -25
  112. package/src/web-components/json-table/src/content-utils.js +21 -21
  113. package/src/web-components/json-table/src/data-types.js +32 -32
  114. package/src/web-components/json-table/src/defaults.js +230 -191
  115. package/src/web-components/json-table/src/get-data.js +55 -38
  116. package/src/web-components/json-table/src/icons.js +17 -17
  117. package/src/web-components/json-table/src/info-section.js +18 -18
  118. package/src/web-components/json-table/src/main-builder.js +45 -45
  119. package/src/web-components/json-table/src/pagination.js +32 -32
  120. package/src/web-components/json-table/src/parse-cols.js +18 -18
  121. package/src/web-components/json-table/src/parse-rows.js +17 -17
  122. package/src/web-components/json-table/src/resolve-params.js +53 -41
  123. package/src/web-components/json-table/src/search.js +13 -13
  124. package/src/web-components/json-table/src/sorting.js +20 -20
  125. package/src/web-components/json-table/src/table-body.js +13 -13
  126. package/src/web-components/json-table/src/table-builder.js +34 -34
  127. package/src/web-components/json-table/src/table-tfoot.js +8 -8
  128. package/src/web-components/json-table/src/table-thead.js +21 -21
  129. package/src/web-components/json-table/src/update-info.js +11 -11
  130. package/types/classes.d.ts +2 -2
  131. package/types/global.d.ts +18 -12
@@ -1,118 +1,123 @@
1
- // tokens-config-sample.mjs
2
- // Sample project config for build-tokens.mjs and check-unresolved-custom-props.mjs.
3
- // Copy and adapt this file for each project; pass it via the --config flag.
4
- //
5
- // All paths are relative to this config file (not to the CWD).
1
+ /*
2
+ tokens-config-sample.mjs
3
+ Configurazione di esempio per build-tokens.mjs e check-unresolved-custom-props.mjs.
4
+ Copiare e adattare questo file per ogni progetto; passarlo con il flag --config.
5
+
6
+ Tutti i percorsi sono relativi a questo file di configurazione (non alla CWD).
7
+ */
6
8
 
7
9
  // import { homedir } from 'os';
8
10
  // import path from 'path';
9
11
 
10
- // Path to the design token source files.
11
- // You can use an absolute path, a relative path, or build it programmatically.
12
+ // Percorso dei file sorgente dei design token.
13
+ // Si può usare un percorso assoluto, un percorso relativo, oppure costruirlo programmaticamente.
12
14
 
13
15
 
14
16
 
15
- // minimo package path in node_modules
17
+ // percorso del pacchetto minimo in node_modules
16
18
  const node_modules_path = '../../node_modules',
17
19
  minimo_path = `${node_modules_path}/@massimo-cassandro/minimo`;
18
20
 
19
21
  const config = {
20
22
 
21
23
  // ---------------------------------------------------------------------------
22
- // BUILD-TOKENS & STYLE-DICTIONARY SETTINGS
24
+ // IMPOSTAZIONI DI BUILD-TOKENS E STYLE-DICTIONARY
23
25
  // ---------------------------------------------------------------------------
24
26
 
25
- // Path to the stylelint config used to lint the generated CSS file
27
+ // Percorso della config stylelint usata per il lint del file CSS generato
26
28
  stylelintConfigPath: '../../stylelint.config.mjs',
27
29
 
28
- // Output directory for the CSS file generated by Style Dictionary
30
+ // Directory di output del file CSS generato da Style Dictionary
29
31
  buildPath: './',
30
32
 
31
- // Output filename for the generated CSS file
33
+ // Nome del file CSS generato
32
34
  destFile: 'custom-properties.css',
33
35
 
34
- // Source token files — accept paths, globs, or a mix of both.
35
- // Supported formats: .json, .jsonc, .mjs (must export a DTCG-compliant default object)
36
- //
37
- // Legacy (non-DTCG) .json files — e.g. exported from Open Props — are
38
- // auto-detected and converted to DTCG v5 syntax at parse time, so they can
39
- // be freely mixed with regular DTCG sources (see README.md). Not covered:
40
- // .jsonc, reserved for hand-authored DTCG sources. These .json files are
41
- // parsed with plain JSON.parse (no comments, no trailing commas).
42
- //
43
- // A legacy node that is at the same time a token (own value/type) AND a
44
- // group with nested children (e.g. Open Props' other.ease.out, which has
45
- // its own value plus out.1 ... out.5) cannot be represented in DTCG v5 —
46
- // a node with $value is always a leaf. Its own value is moved to a child
47
- // token named `default` (other.ease.out.default, i.e. --other-ease-out-default),
48
- // or `base` if a `default` child already exists; if both exist the build
49
- // fails. References to such a node from the same file are rewritten
50
- // accordingly; from other files they must use the child name explicitly.
51
- //
52
- // WARNING: do not use path.join() to build glob patterns — it may corrupt
53
- // the pattern syntax. Use template literals instead:
54
- // OK: `${minimo_path}/**/*.{json,mjs}`
55
- // NO: path.join(minimo_path, '/**/*.{json,mjs}')
56
- //
57
- // An entry can also be an object `{ src, prefix, transform }` (src: string
58
- // or array of strings/globs).
59
- //
60
- // `prefix`: renders the custom properties of those files with a prefix,
61
- // e.g. { src: '...open-props...json', prefix: 'op' } turns Open Props'
62
- // gray.0 into --op-gray-0. Only the property name changes: {references} to
63
- // those tokens are rendered as var(--op-gray-0), and the JSON output stays
64
- // unprefixed. 'op', 'op-' and '--op-' are equivalent. Two different
65
- // prefixes for the same file make the build fail.
66
- //
67
- // `transform`: moves/renames token nodes within those files' own tree —
68
- // e.g. { primary: 'primary.100' } takes whatever is defined at dot-path
69
- // `primary` and moves it to `primary.100`, BEFORE Style Dictionary resolves
70
- // {references} or builds the CSS/JSON output (unlike `prefix`, which is a
71
- // purely cosmetic CSS name change applied after the fact — see
72
- // build-tokens-src/source-transforms.mjs). Typical use case: a preexisting
73
- // project (e.g. driven by Figma/Penpot) names its own base color `primary`,
74
- // while minimo's own tokens reference `{primary.100}` — instead of
75
- // renaming the property by hand after every build, or hunting down every
76
- // minimo reference to change it, `transform` fixes the token's own path
77
- // once, here.
78
- // - Both sides of the map use Style Dictionary's own DOT-PATH notation
79
- // ('primary.100'), NOT the hyphen-joined custom-property notation
80
- // ('primary-100'): token name segments in this project can themselves
81
- // contain hyphens (e.g. btn-close), so a hyphen can't reliably tell a
82
- // path separator from a literal part of a segment name — a dot can,
83
- // since it's already reserved by Style Dictionary as the {reference}
84
- // path separator.
85
- // - {References} to the OLD path — in the same file or a completely
86
- // different one — are rewritten automatically, tree-wide, to the NEW
87
- // path once all sources are merged: e.g. every {primary} in the whole
88
- // build becomes {primary.100}, whether minimo's own tokens already
89
- // wrote {primary.100} directly (no-op) or something else in the
90
- // project still says {primary}.
91
- // - WARNING: this rewrite is by design file-independent (a bare
92
- // {reference} doesn't know which file it "belongs" to) — so if the
93
- // SAME source key (e.g. "primary") is given a DIFFERENT destination in
94
- // two different files' `transform` maps, each rename itself still
95
- // works fine, but {primary} becomes ambiguous: which destination should
96
- // it be rewritten to? In that case the automatic rewrite is skipped
97
- // for that key (a warning is logged), and every {primary} reference
98
- // must be fixed by hand to point at the right one of the two new
99
- // paths.
100
- // - A source key not found in the file only logs a warning, it does not
101
- // fail the build.
102
- // - Applies to both the CSS and the JSON output (see JSON TOKENS OUTPUT
103
- // below), since both are rebuilt from the token's path, by then already
104
- // renamed.
105
- //
106
- // Both options work the same way inside sourceModes.
36
+ /*
37
+ File token sorgente — accetta percorsi, glob o una combinazione dei due.
38
+ Formati supportati: .json, .jsonc, .mjs (deve esportare come default un oggetto conforme a DTCG)
39
+
40
+ I file .json legacy (non DTCG) — ad es. esportati da Open Props — vengono
41
+ rilevati automaticamente e convertiti alla sintassi DTCG v5 in fase di parsing, quindi
42
+ possono essere mescolati liberamente con le normali sorgenti DTCG (vedi README.md). Non coperti:
43
+ i .jsonc, riservati alle sorgenti DTCG scritte a mano. Questi file .json vengono
44
+ letti con un semplice JSON.parse (niente commenti, niente trailing comma).
45
+
46
+ Un nodo legacy che è al tempo stesso un token (value/type propri) E un
47
+ gruppo con figli annidati (ad es. other.ease.out di Open Props, che ha
48
+ un valore proprio più out.1 ... out.5) non può essere rappresentato in DTCG v5 —
49
+ un nodo con $value è sempre una foglia. Il suo valore viene spostato in un token
50
+ figlio chiamato `default` (other.ease.out.default, cioè --other-ease-out-default),
51
+ oppure `base` se esiste già un figlio `default`; se esistono entrambi la build
52
+ fallisce. I riferimenti a un nodo di questo tipo dallo stesso file vengono riscritti
53
+ di conseguenza; da altri file devono usare esplicitamente il nome del figlio.
54
+
55
+ ATTENZIONE: non usare path.join() per costruire i pattern glob — può corrompere
56
+ la sintassi del pattern. Usare i template literal:
57
+ OK: `${minimo_path}/**\/*.{json,mjs}`
58
+ NO: path.join(minimo_path, '/**\/*.{json,mjs}')
59
+
60
+ Una voce può essere anche un oggetto `{ src, prefix, transform }` (src: stringa
61
+ o array di stringhe/glob).
62
+
63
+ `prefix`: rende le custom properties di quei file con un prefisso,
64
+ ad es. { src: '...open-props...json', prefix: 'op' } trasforma gray.0 di
65
+ Open Props in --op-gray-0. Cambia solo il nome della proprietà: i {riferimenti} a
66
+ quei token vengono resi come var(--op-gray-0) e l'output JSON resta
67
+ senza prefisso. 'op', 'op-' e '--op-' sono equivalenti. Due prefissi diversi
68
+ per lo stesso file fanno fallire la build.
69
+
70
+ `transform`: sposta/rinomina i nodi dei token all'interno dell'albero di quei file —
71
+ ad es. { primary: 'primary.100' } prende ciò che è definito al dot-path
72
+ `primary` e lo sposta in `primary.100`, PRIMA che Style Dictionary risolva
73
+ i {riferimenti} o costruisca l'output CSS/JSON (a differenza di `prefix`, che è una
74
+ modifica puramente estetica del nome CSS applicata a posteriori — vedi
75
+ build-tokens-src/source-transforms.mjs). Caso d'uso tipico: un progetto
76
+ preesistente (ad es. guidato da Figma/Penpot) chiama `primary` il proprio colore base,
77
+ mentre i token di minimo referenziano `{primary.100}` — invece di
78
+ rinominare la proprietà a mano dopo ogni build, o di cercare ogni
79
+ riferimento di minimo per modificarlo, `transform` corregge una volta sola
80
+ il percorso del token, qui.
81
+ - Entrambi i lati della mappa usano la notazione DOT-PATH di Style Dictionary
82
+ ('primary.100'), NON la notazione delle custom properties con trattini
83
+ ('primary-100'): i segmenti dei nomi dei token in questo progetto possono
84
+ contenere trattini (ad es. btn-close), quindi un trattino non permette di
85
+ distinguere in modo affidabile un separatore di percorso da una parte letterale
86
+ del nome di un segmento — un punto invece sì, perché è già riservato da
87
+ Style Dictionary come separatore di percorso dei {riferimenti}.
88
+ - I {riferimenti} al VECCHIO percorso — nello stesso file o in uno completamente
89
+ diverso — vengono riscritti automaticamente, in tutto l'albero, col NUOVO
90
+ percorso una volta uniti tutti i sorgenti: ad es. ogni {primary} dell'intera
91
+ build diventa {primary.100}, sia che i token di minimo scrivessero già
92
+ direttamente {primary.100} (nessun effetto) sia che altro nel
93
+ progetto dica ancora {primary}.
94
+ - ATTENZIONE: questa riscrittura è per design indipendente dal file (un semplice
95
+ {riferimento} non sa a quale file "appartiene") — quindi se la
96
+ STESSA chiave sorgente (ad es. "primary") ha una destinazione DIVERSA nelle
97
+ mappe `transform` di due file diversi, ogni rinomina funziona comunque da sola,
98
+ ma {primary} diventa ambiguo: a quale destinazione va riscritto?
99
+ In quel caso la riscrittura automatica viene saltata per quella chiave
100
+ (viene registrato un warning) e ogni riferimento {primary} va corretto
101
+ a mano per puntare al giusto fra i due nuovi percorsi.
102
+ - Una chiave sorgente non trovata nel file registra solo un warning, non fa
103
+ fallire la build.
104
+ - Si applica sia all'output CSS sia a quello JSON (vedi OUTPUT JSON DEI TOKEN
105
+ più sotto), perché entrambi vengono ricostruiti dal percorso del token, ormai
106
+ già rinominato.
107
+
108
+ Entrambe le opzioni funzionano allo stesso modo dentro sourceModes.
109
+ */
107
110
  source: [
108
- `${minimo_path}/design-tokens/_src/**/*.tokens.{mjs,jsonc}`, // main tokens
109
- `${minimo_path}/src/**/*.tokens.{mjs,jsonc}`, // components tokens
111
+ `${minimo_path}/design-tokens/_src/**/*.tokens.{mjs,jsonc}`, // token principali
112
+ `${minimo_path}/src/**/*.tokens.{mjs,jsonc}`, // token dei componenti
110
113
 
111
- // optional extra token source (in this example, openProps, https://open-props.style/)
114
+ // sorgente di token extra opzionale (in questo esempio, openProps, https://open-props.style/)
112
115
  // { src: `${node_modules_path}/open-props/open-props.style-dictionary-tokens.json`, prefix: 'op' },
113
116
 
114
- // your project tokens — e.g. remaps a Figma/Penpot-exported `primary`
115
- // color to minimo's own `primary.100` naming
117
+ /*
118
+ i token del tuo progetto — ad es. rimappa il colore `primary`
119
+ esportato da Figma/Penpot sulla nomenclatura `primary.100` di minimo
120
+ */
116
121
  {
117
122
  src: './design-tokens/*.{js,mjs,jsonc,json}',
118
123
  prefix: 'my-project',
@@ -120,129 +125,145 @@ const config = {
120
125
  }
121
126
  ],
122
127
 
123
- // Optional light/dark (or other) custom properties split — alternative to
124
- // `source`. If this key is set (a non-null object), `source` above is
125
- // ignored: each key is a mode name with its own array of source patterns
126
- // (same rules as `source`: paths, globs, or a mix).
127
- //
128
- // The generated CSS composes all modes into a single destFile:
129
- // - the base mode's props (see sourceModesBase below) go in a top-level
130
- // `:root { ... }` block, with `color-scheme: <all modes>;` prepended
131
- // (e.g. "light dark")
132
- // - every other mode's props go in
133
- // `@media (prefers-color-scheme: <mode>) { :root { ... } }`, with
134
- // `color-scheme: <mode>;` prepended
135
- // customPropsGroups, mergeCustomProps, addLayer, pxToRem etc. all apply
136
- // the same way as with a single `source`.
137
- //
138
- // Cross-mode references: tokens of a non-base mode can reference tokens
139
- // defined in the base mode (e.g. a dark token using {color.1} defined in
140
- // light); it resolves to var(--color-1). The reverse (or between two
141
- // non-base modes) is not supported and fails with a "reference not
142
- // defined" error, since the target would be undefined outside its own
143
- // @media block.
144
- //
145
- // The JSON output (see JSON TOKENS OUTPUT below) is produced once per
146
- // mode, with the mode name appended to each filename, e.g. with
147
- // jsonDestFile: 'tokens' -> "tokens-light.jsonc", "tokens-dark.jsonc".
148
- //
149
- // sample:
150
- // sourceModes: {
151
- // light: [
152
- // `${minimo_path}/design-tokens/_src/**/*.tokens.{mjs,jsonc}`,
153
- // `${minimo_path}/src/**/*.tokens.{mjs,jsonc}`,
154
- // './project-tokens/light/*.{js,mjs,jsonc,json}',
155
- // ],
156
- // dark: [
157
- // './project-tokens/dark/*.{js,mjs,jsonc,json}',
158
- // ],
159
- // },
128
+ /*
129
+ Suddivisione opzionale light/dark (o altra) delle custom properties — alternativa a
130
+ `source`. Se questa chiave è impostata (un oggetto non null), `source` qui sopra viene
131
+ ignorato: ogni chiave è il nome di una modalità, con il proprio array di pattern sorgente
132
+ (stesse regole di `source`: percorsi, glob o una combinazione).
133
+
134
+ Il CSS generato compone tutte le modalità in un unico destFile:
135
+ - le proprietà della modalità base (vedi sourceModesBase più sotto) vanno in un blocco
136
+ `:root { ... }` di primo livello, con `color-scheme: <tutte le modalità>;` anteposto
137
+ (ad es. "light dark")
138
+ - le proprietà di ogni altra modalità vanno in
139
+ `@media (prefers-color-scheme: <modalità>) { :root { ... } }`, con
140
+ `color-scheme: <modalità>;` anteposto
141
+ customPropsGroups, mergeCustomProps, addLayer, pxToRem ecc. si applicano
142
+ allo stesso modo che con un singolo `source`.
143
+
144
+ Riferimenti tra modalità: i token di una modalità non base possono referenziare i token
145
+ definiti nella modalità base (ad es. un token dark che usa {color.1} definito in
146
+ light); viene risolto in var(--color-1). Il contrario (o tra due
147
+ modalità non base) non è supportato e fallisce con un errore "reference not
148
+ defined", perché il target risulterebbe non definito fuori dal proprio
149
+ blocco @media.
150
+
151
+ L'output JSON (vedi OUTPUT JSON DEI TOKEN più sotto) viene prodotto una volta per
152
+ modalità, con il nome della modalità aggiunto a ogni nome di file, ad es. con
153
+ jsonDestFile: 'tokens' -> "tokens-light.jsonc", "tokens-dark.jsonc".
154
+
155
+ esempio:
156
+ sourceModes: {
157
+ light: [
158
+ `${minimo_path}/design-tokens/_src/**\/*.tokens.{mjs,jsonc}`,
159
+ `${minimo_path}/src/**\/*.tokens.{mjs,jsonc}`,
160
+ './project-tokens/light/*.{js,mjs,jsonc,json}',
161
+ ],
162
+ dark: [
163
+ './project-tokens/dark/*.{js,mjs,jsonc,json}',
164
+ ],
165
+ },
166
+ */
160
167
  sourceModes: null,
161
168
 
162
- // With sourceModes set, and only if it defines both a `light` and a `dark`
163
- // key: custom properties present in BOTH — matched by name — are written
164
- // once as `--name: light-dark(<light-value>, <dark-value>);`, instead of
165
- // being split across the base mode's top-level block and a
166
- // `@media (prefers-color-scheme: dark) { ... }` rule.
167
- //
168
- // Unaffected:
169
- // - any other key in sourceModes besides light/dark (e.g. a third,
170
- // custom mode) — always stays on its own
171
- // `@media (prefers-color-scheme: <mode>) { ... }` rule
172
- // - a property present in only one of `light`/`dark` — stays in its own
173
- // mode's block (still behind `@media`, unless that mode happens to be
174
- // sourceModesBase)
175
- //
176
- // Whenever this option is active (sourceModes has both a light and a dark
177
- // key), the base mode's `color-scheme` declaration is always normalised to
178
- // read "light dark [...any other mode]", with light before dark — matching
179
- // light-dark()'s own (light-value, dark-value) argument order — regardless
180
- // of the order sourceModes keys were declared in, or of which of the two
181
- // is configured as sourceModesBase below.
182
- //
183
- // Interaction with mergeCustomProps: no special handling needed — the
184
- // per-mode merge with pre-existing custom properties always runs first;
185
- // this option then reconciles whatever value ends up in each mode
186
- // (freshly generated or preserved from a pre-existing file) into
187
- // light-dark(), matched by name. This also means that re-running a build
188
- // with this option newly turned on, over a destFile previously generated
189
- // with it off (classic `@media (prefers-color-scheme: dark)` split) and
190
- // mergeCustomProps: true, converts the preserved values into light-dark()
191
- // calls too — as with any mergeCustomProps case, a resulting mismatch is
192
- // left for you to fix.
193
- //
194
- // Default: true. Ignored when sourceModes is not set (null/undefined).
169
+ /*
170
+ Con sourceModes impostato, e solo se definisce sia una chiave `light` sia una `dark`:
171
+ le custom properties presenti in ENTRAMBE — individuate per nome — vengono scritte
172
+ una sola volta come `--name: light-dark(<valore-light>, <valore-dark>);`, invece di
173
+ essere divise tra il blocco di primo livello della modalità base e una regola
174
+ `@media (prefers-color-scheme: dark) { ... }`.
175
+
176
+ Non vengono toccati:
177
+ - gli altri eventuali valori di sourceModes oltre a light/dark (ad es. una terza
178
+ modalità personalizzata) — restano sempre sulla propria regola
179
+ `@media (prefers-color-scheme: <modalità>) { ... }`
180
+ - una proprietà presente in una sola tra `light`/`dark` — resta nel blocco della
181
+ propria modalità (sempre dietro `@media`, a meno che quella modalità non sia
182
+ sourceModesBase)
183
+
184
+ Ogni volta che questa opzione è attiva (sourceModes ha sia una chiave light sia una
185
+ dark), la dichiarazione `color-scheme` della modalità base viene sempre normalizzata
186
+ in "light dark [...ogni altra modalità]", con light prima di dark — coerentemente con
187
+ l'ordine degli argomenti (valore-light, valore-dark) di light-dark() — indipendentemente
188
+ dall'ordine in cui sono dichiarate le chiavi di sourceModes o da quale delle due
189
+ sia configurata come sourceModesBase qui sotto.
190
+
191
+ Interazione con mergeCustomProps: non serve alcuna gestione speciale — il merge
192
+ per modalità con le custom properties preesistenti viene sempre eseguito per primo;
193
+ questa opzione poi riconcilia il valore che risulta in ogni modalità
194
+ (appena generato o conservato da un file preesistente) in light-dark(),
195
+ individuando le proprietà per nome. Ciò significa anche che rieseguire una build
196
+ con questa opzione appena attivata, su un destFile generato in precedenza
197
+ con l'opzione disattivata (divisione classica `@media (prefers-color-scheme: dark)`) e
198
+ mergeCustomProps: true, converte anche i valori conservati in chiamate light-dark() —
199
+ come in ogni caso di mergeCustomProps, un eventuale disallineamento resta da
200
+ correggere a mano.
201
+
202
+ Default: true. Ignorata quando sourceModes non è impostato (null/undefined).
203
+ */
195
204
  useLightDarkFunc: true,
196
205
 
197
- // With sourceModes set: the mode whose declarations go in the top-level
198
- // `:root { ... }` block, instead of nested inside its own
199
- // `@media (prefers-color-scheme: <mode>) { ... }` rule (default: the first
200
- // key of sourceModes, e.g. 'light'). Ignored when sourceModes is not set.
206
+ /*
207
+ Con sourceModes impostato: la modalità le cui dichiarazioni vanno nel blocco
208
+ `:root { ... }` di primo livello, invece che annidate nella propria regola
209
+ `@media (prefers-color-scheme: <modalità>) { ... }` (default: la prima
210
+ chiave di sourceModes, ad es. 'light'). Ignorata quando sourceModes non è impostato.
211
+ */
201
212
  sourceModesBase: 'light',
202
213
 
203
- // CSS selector wrapping the generated custom properties block(s), instead
204
- // of the default `:root`. Applies uniformly whether using a single
205
- // `source` or `sourceModes` (the base mode's top-level block and every
206
- // other mode's block nested under its own
207
- // `@media (prefers-color-scheme: <mode>)` rule all use this same
208
- // selector). Falsy or blank values fall back to ':root'.
214
+ /*
215
+ Selettore CSS che racchiude i blocchi di custom properties generati, al posto
216
+ del default `:root`. Si applica in modo uniforme sia con un singolo
217
+ `source` sia con `sourceModes` (il blocco di primo livello della modalità base e il
218
+ blocco di ogni altra modalità, annidato nella propria regola
219
+ `@media (prefers-color-scheme: <modalità>)`, usano lo stesso
220
+ selettore). Valori falsy o vuoti ripiegano su ':root'.
221
+ */
209
222
  customPropsSelector: ':where(html)',
210
223
 
211
- // If true (default), dimension token values expressed in px are converted
212
- // to rem in the generated CSS. Values in other units (em, %, vh, dvw, ...)
213
- // are never touched regardless of this option.
224
+ /*
225
+ Se true (default), i valori dei token di tipo dimension espressi in px vengono convertiti
226
+ in rem nel CSS generato. I valori in altre unità (em, %, vh, dvw, ...)
227
+ non vengono mai toccati, indipendentemente da questa opzione.
228
+ */
214
229
  pxToRem: false,
215
230
 
216
- // Preserves custom properties already present in the CSS destination file
217
- // (destFile, from a previous build) across rebuilds: their values take
218
- // priority over the ones generated by this build. Useful to keep manual
219
- // overrides/additions made directly in the compiled CSS. Ignored if the
220
- // destFile does not exist yet. Accepted values:
221
- // false - no merge: the destination file is fully regenerated
222
- // true (default) - merge all the sources
223
- // array - strings and/or RegExps matched against the path of the
224
- // token source files (those in `source` or `sourceModes`):
225
- // only the properties generated by a matching file are
226
- // merged, the others are overwritten by the generated value.
227
- // A string matches if contained in the file path.
228
- // An empty array is treated as false.
229
- // e.g. ['/theme.minimo.tokens', /colors\.tokens\.(mjs|jsonc?)$/]
230
- // With true or an array, properties found only in the pre-existing file (no
231
- // longer generated, e.g. added by hand) are always kept.
232
- // Comments at the end of a custom property line are preserved; full-line
233
- // comments are lost, and a multi-line comment is cut at the end of its first
234
- // line (and closed, to keep the CSS valid).
231
+ /*
232
+ Conserva, tra una build e l'altra, le custom properties già presenti nel file CSS di
233
+ destinazione (destFile, da una build precedente): i loro valori hanno priorità
234
+ su quelli generati da questa build. Utile per mantenere override/aggiunte
235
+ manuali fatte direttamente nel CSS compilato. Ignorata se destFile non esiste
236
+ ancora. Valori accettati:
237
+ false - nessun merge: il file di destinazione viene rigenerato completamente
238
+ true (default) - merge di tutte le sorgenti
239
+ array - stringhe e/o RegExp confrontate con il percorso dei
240
+ file token sorgente (quelli in `source` o `sourceModes`):
241
+ vengono unite solo le proprietà generate da un file corrispondente,
242
+ le altre vengono sovrascritte dal valore generato.
243
+ Una stringa corrisponde se è contenuta nel percorso del file.
244
+ Un array vuoto è trattato come false.
245
+ ad es. ['/theme.minimo.tokens', /colors\.tokens\.(mjs|jsonc?)$/]
246
+ Con true o con un array, le proprietà presenti solo nel file preesistente (non più
247
+ generate, ad es. aggiunte a mano) vengono sempre conservate.
248
+ I commenti a fine riga di una custom property vengono conservati; i commenti su riga
249
+ intera vanno persi e un commento su più righe viene troncato alla fine della sua prima
250
+ riga (e chiuso, per mantenere valido il CSS).
251
+ */
235
252
  mergeCustomProps: true,
236
253
 
237
- // Wraps the generated custom properties inside a CSS `@layer` at-rule,
238
- // e.g. addLayer: 'project' -> `@layer project { :root { ... } }`.
239
- // Set to null, undefined or false (default) to emit no layer.
254
+ /*
255
+ Racchiude le custom properties generate in una regola at-rule CSS `@layer`,
256
+ ad es. addLayer: 'project' -> `@layer project { :root { ... } }`.
257
+ Impostare a null, undefined o false (default) per non emettere alcun layer.
258
+ */
240
259
  addLayer: false,
241
260
 
242
- // Named groups of custom properties. Properties whose first hyphen-separated
243
- // name segment matches one of a group's `prefixes` are pulled out, labelled
244
- // with the group's `name` and placed at the beginning of the output CSS
245
- // file, in the order the groups are listed here.
261
+ /*
262
+ Gruppi nominati di custom properties. Le proprietà il cui primo segmento del nome
263
+ (separato da trattini) corrisponde a uno dei `prefixes` di un gruppo vengono estratte,
264
+ etichettate con il `name` del gruppo e collocate all'inizio del file CSS
265
+ di output, nell'ordine in cui i gruppi sono elencati qui.
266
+ */
246
267
  customPropsGroups: [
247
268
  {
248
269
  name: 'COLORS',
@@ -260,68 +281,84 @@ const config = {
260
281
 
261
282
 
262
283
  // ---------------------------------------------------------------------------
263
- // JSON TOKENS OUTPUT
284
+ // OUTPUT JSON DEI TOKEN
264
285
  // ---------------------------------------------------------------------------
265
- // Optional design tokens output, independent of any specific consuming tool
266
- // Generates one or more json(c) files in addition to the CSS output file —
267
- // usable in Penpot, Figma (via plugin), Token Studio, or as an alternative
268
- // to the .mjs source files
286
+ /*
287
+ Output opzionale dei design token, indipendente da qualsiasi strumento specifico
288
+ Genera uno o più file json(c) in aggiunta al file CSS di output —
289
+ utilizzabili in Penpot, Figma (tramite plugin), Token Studio, oppure in alternativa
290
+ ai file sorgente .mjs
291
+ */
269
292
  // ---------------------------------------------------------------------------
270
293
 
271
- // How to handle math expressions in dimension token $values (e.g. "{size.base} * .25"):
272
- // 'keep' write the expression unchanged
273
- // 'calc' — wrap in CSS calc(): "calc({size.base} * .25)"
274
- // 'resolve' — (default) evaluate numerically, inheriting the unit from the first referenced token
275
- // e.g. {size.base} = 16px, "{size.base} * .25" -> "4px"
294
+ /*
295
+ Come gestire le espressioni matematiche nei $value dei token dimension (es. "{size.base} * .25"):
296
+ 'keep' scrive l'espressione invariata
297
+ 'calc' — la racchiude in calc() CSS: "calc({size.base} * .25)"
298
+ 'resolve' — (default) la valuta numericamente, ereditando l'unità dal primo token referenziato
299
+ es. {size.base} = 16px, "{size.base} * .25" -> "4px"
300
+ */
276
301
  jsonExpression: 'resolve',
277
302
 
278
- // Output format for the JSON token files: 'jsonc' or 'json'
279
- // 'jsonc' -> adds a generated-file disclaimer header, uses .jsonc extension
280
- // 'json' -> plain JSON, no disclaimer
303
+ /*
304
+ Formato di output dei file JSON dei token: 'jsonc' o 'json'
305
+ 'jsonc' -> aggiunge un'intestazione che segnala il file generato, usa l'estensione .jsonc
306
+ 'json' -> JSON semplice, senza intestazione
307
+ */
281
308
  jsonFormat: 'jsonc',
282
309
 
283
- // Output directory for the JSON design token files.
284
- // Set to null (or omit) to disable json output entirely.
285
- // In multi-file mode (jsonDestFile: null), all files are written flat in
286
- // this directory (no subdirectories mirroring the source tree); the build
287
- // fails with an error if two source files would produce the same filename.
288
- jsonBuildPath: null, // or './path/to/generated/design-tokens-dir',
310
+ /*
311
+ Directory di output dei file JSON dei design token.
312
+ Impostare a null (o omettere) per disattivare del tutto l'output json.
313
+ In modalità multi-file (jsonDestFile: null), tutti i file vengono scritti nella stessa
314
+ directory (senza sottocartelle che replicano l'albero dei sorgenti); la build
315
+ fallisce con un errore se due file sorgente producono lo stesso nome file.
316
+ */
317
+ jsonBuildPath: null, // oppure './path/to/generated/design-tokens-dir',
289
318
 
290
- // Base name (without extension) for the aggregated JSON output file.
291
- // The extension is added automatically based on jsonFormat.
292
- // Set to null (or omit) to generate one file per .mjs source file instead
293
- // (all placed flat in jsonBuildPath — see jsonBuildPath above).
294
- jsonDestFile: null, // or 'tokens' (or else),
319
+ /*
320
+ Nome base (senza estensione) del file JSON aggregato di output.
321
+ L'estensione viene aggiunta automaticamente in base a jsonFormat.
322
+ Impostare a null (o omettere) per generare invece un file per ogni file sorgente .mjs
323
+ (tutti nella stessa cartella jsonBuildPath — vedi jsonBuildPath qui sopra).
324
+ */
325
+ jsonDestFile: null, // oppure 'tokens' (o altro),
295
326
 
296
327
 
297
328
  // ---------------------------------------------------------------------------
298
- // CHECK UNRESOLVED & UNUSED CUSTOM PROPS SETTINGS
329
+ // IMPOSTAZIONI DI CONTROLLO CUSTOM PROPS NON RISOLTE E NON USATE
299
330
  // ---------------------------------------------------------------------------
300
331
 
301
- // If true, also reports custom properties that are defined (in destFile or
302
- // an extraCustomPropsFiles entry) but never referenced via var() in any
303
- // scanned CSS file. Opt-in because it re-runs the Style Dictionary
304
- // transform pipeline over the token sources to resolve, when possible, the
305
- // .mjs source file for each unused property. Default: false.
332
+ /*
333
+ Se true, segnala anche le custom properties definite (in destFile o
334
+ in una voce di extraCustomPropsFiles) ma mai referenziate tramite var() in nessun
335
+ file CSS analizzato. Opt-in perché riesegue la pipeline di trasformazione
336
+ di Style Dictionary sui sorgenti dei token per risalire, quando possibile, al
337
+ file sorgente .mjs di ogni proprietà non usata. Default: false.
338
+ */
306
339
  checkUnused: true,
307
340
 
308
- // When checkUnused is true: if true (default), custom properties sourced
309
- // from a token file under node_modules (e.g. a third-party token package)
310
- // are never reported as unused — the consuming project isn't expected to
311
- // prune those.
341
+ /*
342
+ Quando checkUnused è true: se true (default), le custom properties provenienti
343
+ da un file token sotto node_modules (es. un pacchetto di token di terze parti)
344
+ non vengono mai segnalate come non usate — il progetto che le usa non è tenuto
345
+ a ripulirle.
346
+ */
312
347
  ignoreUnusedInNodeModules: true,
313
348
 
314
- // Additional CSS files that define custom properties used in the project
315
- // but not generated by build-tokens (e.g. third-party libraries)
349
+ // File CSS aggiuntivi che definiscono custom properties usate nel progetto
350
+ // ma non generate da build-tokens (ad es. librerie di terze parti)
316
351
  extraCustomPropsFiles: [
317
352
  // `${node_modules_path}/open-props/open-props.min.css`
318
353
  ],
319
354
 
320
- // Directory containing the CSS files to scan for unresolved custom properties
355
+ // Directory che contiene i file CSS da analizzare per le custom properties non risolte
321
356
  dirToCheck: '../../app',
322
357
 
323
- // Regular expressions for custom property names to exclude from the check.
324
- // Useful for intentionally private/internal props (e.g. prefixed with --_).
358
+ /*
359
+ Espressioni regolari dei nomi di custom property da escludere dal controllo.
360
+ Utile per le proprietà volutamente private/interne (es. con prefisso --_).
361
+ */
325
362
  excludePattern: [
326
363
  /^--_/,
327
364
  ],