@massimo-cassandro/minimo 0.8.2 → 0.8.4

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.
@@ -27,7 +27,7 @@
27
27
  "outline": {
28
28
  "color": {
29
29
  "$type": "color",
30
- "$value": "color-mix(in srgb, #083865 60%, transparent)"
30
+ "$value": "color-mix(in srgb, {btn.primary.background.color} 60%, transparent)"
31
31
  }
32
32
  }
33
33
  },
@@ -53,7 +53,7 @@
53
53
  "background": {
54
54
  "color": {
55
55
  "$type": "color",
56
- "$value": "color-mix(in srgb, #083865 60%, #000)"
56
+ "$value": "color-mix(in srgb, {btn.primary.background.color} 60%, #000)"
57
57
  }
58
58
  },
59
59
  "color": {
@@ -113,7 +113,7 @@
113
113
  "outline": {
114
114
  "color": {
115
115
  "$type": "color",
116
- "$value": "color-mix(in srgb, #650853 60%, transparent)"
116
+ "$value": "color-mix(in srgb, {btn.secondary.background.color} 60%, transparent)"
117
117
  }
118
118
  }
119
119
  },
@@ -139,7 +139,7 @@
139
139
  "background": {
140
140
  "color": {
141
141
  "$type": "color",
142
- "$value": "color-mix(in srgb, #650853 60%, #000)"
142
+ "$value": "color-mix(in srgb, {btn.secondary.background.color} 60%, #000)"
143
143
  }
144
144
  },
145
145
  "color": {
@@ -23,7 +23,7 @@
23
23
  "background": {
24
24
  "color": {
25
25
  "$type": "color",
26
- "$value": "color-mix(in srgb, #fff 95%, #000)"
26
+ "$value": "color-mix(in srgb, {body.background.color} 95%, #000)"
27
27
  }
28
28
  }
29
29
  },
@@ -25,7 +25,7 @@
25
25
  "group": {
26
26
  "padding-block": {
27
27
  "$type": "dimension",
28
- "$value": "0 1rem"
28
+ "$value": "0 {size.base}"
29
29
  }
30
30
  },
31
31
  "input-group": {
@@ -11,7 +11,7 @@
11
11
  "background": {
12
12
  "color": {
13
13
  "$type": "color",
14
- "$value": "color-mix(in srgb, #ddd 90%, #567d0d)"
14
+ "$value": "color-mix(in srgb, {table.thead.background.color} 90%, {accent.100})"
15
15
  }
16
16
  }
17
17
  }
@@ -168,9 +168,12 @@ StyleDictionary.registerFormat({
168
168
  value = orig;
169
169
  }
170
170
  } else {
171
- // Non-expression value: preserve aliases for Penpot token links
172
- const isAlias = typeof orig === 'string' && orig.startsWith('{') && !orig.includes(' ');
173
- value = isAlias ? orig : (token.$value ?? token.value);
171
+ // Non-expression value: preserve {references} wherever they appear.
172
+ // - Pure alias: "{some.token}" → kept as-is for Penpot token links
173
+ // - CSS function: "color-mix(in srgb, {some.token} 60%, #000)" → kept as-is
174
+ // - Plain value: "#ff0000", "16px", … → use the resolved $value
175
+ const containsRef = typeof orig === 'string' && orig.includes('{');
176
+ value = containsRef ? orig : (token.$value ?? token.value);
174
177
  }
175
178
 
176
179
  const entry = { $type: type, $value: value };
@@ -109,6 +109,12 @@ StyleDictionary.registerTransform({
109
109
  transform: (token) => {
110
110
  const original = token.original?.$value ?? token.original?.value;
111
111
 
112
+ // If the original is a CSS function containing {references}, return it
113
+ // untouched so the css format can resolve refs to var(--...).
114
+ if (typeof original === 'string' && original.includes('{') && !original.startsWith('{')) {
115
+ return original;
116
+ }
117
+
112
118
  const value = (typeof original === 'string' && original.startsWith('{'))
113
119
  ? (token.$value ?? token.value)
114
120
  : (original ?? token.$value ?? token.value);
@@ -61,7 +61,16 @@ if (penpotBuildPath && !penpotDestFile) {
61
61
  concreteFilePaths = await collectConcreteFilePaths(sdInit);
62
62
  }
63
63
 
64
- // ── 7. Build ──────────────────────────────────────────────────────────────────
64
+ // ── 7. Clean penpot output directory ─────────────────────────────────────────
65
+ // Wipe the destination folder before writing new files so that tokens removed
66
+ // from the source are not left behind as stale artefacts.
67
+ if (penpotBuildPath) {
68
+ const { rm, mkdir } = await import('fs/promises');
69
+ await rm(penpotBuildPath, { recursive: true, force: true });
70
+ await mkdir(penpotBuildPath, { recursive: true });
71
+ }
72
+
73
+ // ── 8. Build ──────────────────────────────────────────────────────────────────
65
74
  const sd = new StyleDictionary({
66
75
  source,
67
76
  log: { verbosity: 'verbose' },
@@ -78,7 +87,7 @@ const sd = new StyleDictionary({
78
87
 
79
88
  await sd.buildAllPlatforms();
80
89
 
81
- // ── 8. CSS lint ───────────────────────────────────────────────────────────────
90
+ // ── 9. CSS lint ───────────────────────────────────────────────────────────────
82
91
  const stylelintConfig = await import(pathToFileURL(stylelintConfigPath)).then(m => m.default);
83
92
 
84
93
  await stylelint.lint({
@@ -87,7 +96,7 @@ await stylelint.lint({
87
96
  fix: true,
88
97
  });
89
98
 
90
- // ── 9. Log ────────────────────────────────────────────────────────────────────
99
+ // ── 10. Log ────────────────────────────────────────────────────────────────────
91
100
  const short = (p) => p.replace(homedir(), '~');
92
101
 
93
102
  console.log(styleText(['yellow'], `[build-tokens] config file : ${short(configAbsPath)}`));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@massimo-cassandro/minimo",
3
- "version": "0.8.2",
3
+ "version": "0.8.4",
4
4
  "description": "Light css framework",
5
5
  "type": "module",
6
6
  "homepage": "https://github.com/massimo-cassandro/minimo#readme",
@@ -1,182 +0,0 @@
1
- // -----------------------------------------------------------------------
2
- // Generated file — do not edit manually.
3
- // This file is produced by the design-token build pipeline.
4
- // Source of truth: the token files in the project source directory.
5
- // Re-generate with: node build-tokens.mjs --config <path/to/config>
6
- // -----------------------------------------------------------------------
7
- {
8
- "btn": {
9
- "primary": {
10
- "background": {
11
- "color": {
12
- "$type": "color",
13
- "$value": "{primary.100}"
14
- }
15
- },
16
- "color": {
17
- "$type": "color",
18
- "$value": "{primary.100-fg}"
19
- },
20
- "border": {
21
- "color": {
22
- "$type": "color",
23
- "$value": "{btn.primary.background.color}"
24
- }
25
- },
26
- "focus": {
27
- "outline": {
28
- "color": {
29
- "$type": "color",
30
- "$value": "color-mix(in srgb, #083865 60%, transparent);"
31
- }
32
- }
33
- },
34
- "hover": {
35
- "background": {
36
- "color": {
37
- "$type": "color",
38
- "$value": "{btn.primary.color}"
39
- }
40
- },
41
- "color": {
42
- "$type": "color",
43
- "$value": "{btn.primary.background.color}"
44
- },
45
- "border": {
46
- "color": {
47
- "$type": "color",
48
- "$value": "{btn.primary.hover.color}"
49
- }
50
- }
51
- },
52
- "active": {
53
- "background": {
54
- "color": {
55
- "$type": "color",
56
- "$value": "color-mix(in srgb, #083865 60%, #000);"
57
- }
58
- },
59
- "color": {
60
- "$type": "color",
61
- "$value": "{btn.primary.color}"
62
- },
63
- "border": {
64
- "color": {
65
- "$type": "color",
66
- "$value": "{btn.primary.active.background.color}"
67
- }
68
- }
69
- },
70
- "hollow": {
71
- "background": {
72
- "color": {
73
- "$type": "color",
74
- "$value": "{btn.primary.color}"
75
- }
76
- },
77
- "color": {
78
- "$type": "color",
79
- "$value": "{btn.primary.background.color}"
80
- },
81
- "hover": {
82
- "background": {
83
- "color": {
84
- "$type": "color",
85
- "$value": "color-mix(in srgb, #083865 20%, transparent);"
86
- }
87
- },
88
- "color": {
89
- "$type": "color",
90
- "$value": "{btn.primary.hollow.color}"
91
- }
92
- }
93
- }
94
- },
95
- "secondary": {
96
- "background": {
97
- "color": {
98
- "$type": "color",
99
- "$value": "{secondary.100}"
100
- }
101
- },
102
- "color": {
103
- "$type": "color",
104
- "$value": "{secondary.100-fg}"
105
- },
106
- "border": {
107
- "color": {
108
- "$type": "color",
109
- "$value": "{btn.secondary.background.color}"
110
- }
111
- },
112
- "focus": {
113
- "outline": {
114
- "color": {
115
- "$type": "color",
116
- "$value": "color-mix(in srgb, #650853 60%, transparent);"
117
- }
118
- }
119
- },
120
- "hover": {
121
- "background": {
122
- "color": {
123
- "$type": "color",
124
- "$value": "{btn.secondary.color}"
125
- }
126
- },
127
- "color": {
128
- "$type": "color",
129
- "$value": "{btn.secondary.background.color}"
130
- },
131
- "border": {
132
- "color": {
133
- "$type": "color",
134
- "$value": "{btn.secondary.hover.color}"
135
- }
136
- }
137
- },
138
- "active": {
139
- "background": {
140
- "color": {
141
- "$type": "color",
142
- "$value": "color-mix(in srgb, #650853 60%, #000);"
143
- }
144
- },
145
- "color": {
146
- "$type": "color",
147
- "$value": "{btn.secondary.color}"
148
- },
149
- "border": {
150
- "color": {
151
- "$type": "color",
152
- "$value": "{btn.secondary.active.background.color}"
153
- }
154
- }
155
- },
156
- "hollow": {
157
- "background": {
158
- "color": {
159
- "$type": "color",
160
- "$value": "{btn.secondary.color}"
161
- }
162
- },
163
- "color": {
164
- "$type": "color",
165
- "$value": "{btn.secondary.background.color}"
166
- },
167
- "hover": {
168
- "background": {
169
- "color": {
170
- "$type": "color",
171
- "$value": "color-mix(in srgb, #650853 20%, transparent);"
172
- }
173
- },
174
- "color": {
175
- "$type": "color",
176
- "$value": "{btn.secondary.hollow.color}"
177
- }
178
- }
179
- }
180
- }
181
- }
182
- }
@@ -1,28 +0,0 @@
1
- // -----------------------------------------------------------------------
2
- // Generated file — do not edit manually.
3
- // This file is produced by the design-token build pipeline.
4
- // Source of truth: the token files in the project source directory.
5
- // Re-generate with: node build-tokens.mjs --config <path/to/config>
6
- // -----------------------------------------------------------------------
7
- {
8
- "recaptcha": {
9
- "alert": {
10
- "overlay": {
11
- "color": {
12
- "$type": "color",
13
- "$value": "rgb(0 0 0 / .5)"
14
- }
15
- },
16
- "background": {
17
- "color": {
18
- "$type": "color",
19
- "$value": "#000"
20
- }
21
- },
22
- "fg": {
23
- "$type": "color",
24
- "$value": "#fff"
25
- }
26
- }
27
- }
28
- }
@@ -1,32 +0,0 @@
1
- // -----------------------------------------------------------------------
2
- // Generated file — do not edit manually.
3
- // This file is produced by the design-token build pipeline.
4
- // Source of truth: the token files in the project source directory.
5
- // Re-generate with: node build-tokens.mjs --config <path/to/config>
6
- // -----------------------------------------------------------------------
7
- {
8
- "toast": {
9
- "font": {
10
- "size": {
11
- "$type": "dimension",
12
- "$value": "{font.size.sm}"
13
- }
14
- },
15
- "border": {
16
- "radius": {
17
- "$type": "color",
18
- "$value": "{radius.sm}"
19
- }
20
- },
21
- "text": {
22
- "color": {
23
- "$type": "color",
24
- "$value": "{text.color}"
25
- }
26
- },
27
- "duration": {
28
- "$type": "duration",
29
- "$value": "5s"
30
- }
31
- }
32
- }
@@ -1,28 +0,0 @@
1
- // -----------------------------------------------------------------------
2
- // Generated file — do not edit manually.
3
- // This file is produced by the design-token build pipeline.
4
- // Source of truth: the token files in the project source directory.
5
- // Re-generate with: node build-tokens.mjs --config <path/to/config>
6
- // -----------------------------------------------------------------------
7
- {
8
- "recaptcha": {
9
- "alert": {
10
- "overlay": {
11
- "color": {
12
- "$type": "color",
13
- "$value": "rgb(0 0 0 / .5)"
14
- }
15
- },
16
- "background": {
17
- "color": {
18
- "$type": "color",
19
- "$value": "#000"
20
- }
21
- },
22
- "fg": {
23
- "$type": "color",
24
- "$value": "#fff"
25
- }
26
- }
27
- }
28
- }
@@ -1,66 +0,0 @@
1
- // -----------------------------------------------------------------------
2
- // Generated file — do not edit manually.
3
- // This file is produced by the design-token build pipeline.
4
- // Source of truth: the token files in the project source directory.
5
- // Re-generate with: node build-tokens.mjs --config <path/to/config>
6
- // -----------------------------------------------------------------------
7
- {
8
- "sf-macro": {
9
- "rows": {
10
- "padding": {
11
- "$type": "dimension",
12
- "$value": "{size.xs}"
13
- },
14
- "margin": {
15
- "block": {
16
- "end": {
17
- "$type": "dimension",
18
- "$value": "{size.base}"
19
- }
20
- }
21
- },
22
- "hover": {
23
- "background": {
24
- "color": {
25
- "$type": "color",
26
- "$value": "color-mix(in srgb, #fff 95%, #000)"
27
- }
28
- }
29
- },
30
- "even": {
31
- "background": {
32
- "color": {
33
- "$type": "color",
34
- "$value": "{body.background.color}"
35
- }
36
- }
37
- },
38
- "border": {
39
- "$type": "border",
40
- "$value": {
41
- "color": "#666",
42
- "width": "1px",
43
- "style": "solid"
44
- }
45
- },
46
- "border-radius": {
47
- "$type": "dimension",
48
- "$value": "{radius.xs}"
49
- }
50
- },
51
- "btn": {
52
- "close": {
53
- "size": {
54
- "$type": "dimension",
55
- "$value": "2rem"
56
- },
57
- "background": {
58
- "color": {
59
- "$type": "color",
60
- "$value": "{body.background.color}"
61
- }
62
- }
63
- }
64
- }
65
- }
66
- }
@@ -1,51 +0,0 @@
1
- // -----------------------------------------------------------------------
2
- // Generated file — do not edit manually.
3
- // This file is produced by the design-token build pipeline.
4
- // Source of truth: the token files in the project source directory.
5
- // Re-generate with: node build-tokens.mjs --config <path/to/config>
6
- // -----------------------------------------------------------------------
7
- {
8
- "sdt": {
9
- "thead": {
10
- "hover": {
11
- "background": {
12
- "color": {
13
- "$type": "color",
14
- "$value": "color-mix(in srgb, #ddd 90%, #567d0d)"
15
- }
16
- }
17
- }
18
- },
19
- "pagination": {
20
- "border": {
21
- "$type": "border",
22
- "$value": {
23
- "color": "#666",
24
- "width": "1px"
25
- }
26
- },
27
- "padding": {
28
- "block": {
29
- "$type": "dimension",
30
- "$value": "{size.xxs}"
31
- },
32
- "inline": {
33
- "$type": "dimension",
34
- "$value": "{size.xs}"
35
- }
36
- }
37
- },
38
- "hover": {
39
- "background": {
40
- "color": {
41
- "$type": "color",
42
- "$value": "{btn.primary.background.color}"
43
- }
44
- },
45
- "color": {
46
- "$type": "color",
47
- "$value": "{btn.primary.color}"
48
- }
49
- }
50
- }
51
- }
@@ -1,24 +0,0 @@
1
- // -----------------------------------------------------------------------
2
- // Generated file — do not edit manually.
3
- // This file is produced by the design-token build pipeline.
4
- // Source of truth: the token files in the project source directory.
5
- // Re-generate with: node build-tokens.mjs --config <path/to/config>
6
- // -----------------------------------------------------------------------
7
- {
8
- "spinner": {
9
- "size": {
10
- "$type": "dimension",
11
- "$value": "{size.lg}"
12
- },
13
- "color": {
14
- "$type": "color",
15
- "$value": "{primary.100}"
16
- },
17
- "stroke": {
18
- "width": {
19
- "$type": "dimension",
20
- "$value": "2px"
21
- }
22
- }
23
- }
24
- }
@@ -1,32 +0,0 @@
1
- // -----------------------------------------------------------------------
2
- // Generated file — do not edit manually.
3
- // This file is produced by the design-token build pipeline.
4
- // Source of truth: the token files in the project source directory.
5
- // Re-generate with: node build-tokens.mjs --config <path/to/config>
6
- // -----------------------------------------------------------------------
7
- {
8
- "toast": {
9
- "font": {
10
- "size": {
11
- "$type": "dimension",
12
- "$value": "{font.size.sm}"
13
- }
14
- },
15
- "border": {
16
- "radius": {
17
- "$type": "color",
18
- "$value": "{radius.sm}"
19
- }
20
- },
21
- "text": {
22
- "color": {
23
- "$type": "color",
24
- "$value": "{text.color}"
25
- }
26
- },
27
- "duration": {
28
- "$type": "duration",
29
- "$value": "5s"
30
- }
31
- }
32
- }