@massimo-cassandro/minimo 0.8.4 → 0.8.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 (3) hide show
  1. package/design-tokens-utilities/build-tokens-src/formats/css.mjs +7 -1
  2. package/package.json +1 -1
  3. package/src/custom-properties-default.css +6 -6
package/design-tokens-utilities/build-tokens-src/formats/css.mjs CHANGED
@@ -208,7 +208,13 @@ StyleDictionary.registerFormat({
208
208
  // e.g. color-mix(in srgb, {btn.secondary.background.color} 60%, #000)
209
209
  // {references} are replaced with var(--name); arithmetic gets calc().
210
210
  const resolved = resolveRefs(orig);
211
- const isCalcNeeded = /[+\-*/]/.test(resolved.replace(/var\([^)]+\)/g, '0'));
211
+ // Strip var(...) and CSS function calls (word chars + hyphens followed by '(')
212
+ // before checking for arithmetic operators, so that hyphens in names like
213
+ // "color-mix" or "linear-gradient" don't trigger a spurious calc() wrap.
214
+ const stripped = resolved
215
+ .replace(/var\([^)]+\)/g, '0')
216
+ .replace(/[\w-]+\(/g, '(');
217
+ const isCalcNeeded = /[+\-*/]/.test(stripped);
212
218
  value = isCalcNeeded ? `calc(${resolved})` : resolved;
213
219
 
214
220
  } else {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@massimo-cassandro/minimo",
3
- "version": "0.8.4",
3
+ "version": "0.8.5",
4
4
  "description": "Light css framework",
5
5
  "type": "module",
6
6
  "homepage": "https://github.com/massimo-cassandro/minimo#readme",
package/src/custom-properties-default.css CHANGED
@@ -45,13 +45,13 @@
45
45
  --btn-md-padding-inline: var(--size-sm);
46
46
  --btn-padding-block: var(--size-xs);
47
47
  --btn-padding-inline: var(--size-base);
48
- --btn-primary-active-background-color: calc(color-mix(in srgb, var(--btn-primary-background-color) 60%, #000));
48
+ --btn-primary-active-background-color: color-mix(in srgb, var(--btn-primary-background-color) 60%, #000);
49
49
  --btn-primary-active-border-color: var(--btn-primary-active-background-color);
50
50
  --btn-primary-active-color: var(--btn-primary-color);
51
51
  --btn-primary-background-color: var(--primary-100);
52
52
  --btn-primary-border-color: var(--btn-primary-background-color);
53
53
  --btn-primary-color: var(--primary-100-fg);
54
- --btn-primary-focus-outline-color: calc(color-mix(in srgb, var(--btn-primary-background-color) 60%, transparent));
54
+ --btn-primary-focus-outline-color: color-mix(in srgb, var(--btn-primary-background-color) 60%, transparent);
55
55
  --btn-primary-hollow-background-color: var(--btn-primary-color);
56
56
  --btn-primary-hollow-color: var(--btn-primary-background-color);
57
57
  --btn-primary-hollow-hover-background-color: var(--btn-primary-background-color);
@@ -59,13 +59,13 @@
59
59
  --btn-primary-hover-background-color: var(--btn-primary-color);
60
60
  --btn-primary-hover-border-color: var(--btn-primary-hover-color);
61
61
  --btn-primary-hover-color: var(--btn-primary-background-color);
62
- --btn-secondary-active-background-color: calc(color-mix(in srgb, var(--btn-secondary-background-color) 60%, #000));
62
+ --btn-secondary-active-background-color: color-mix(in srgb, var(--btn-secondary-background-color) 60%, #000);
63
63
  --btn-secondary-active-border-color: var(--btn-secondary-active-background-color);
64
64
  --btn-secondary-active-color: var(--btn-secondary-color);
65
65
  --btn-secondary-background-color: var(--secondary-100);
66
66
  --btn-secondary-border-color: var(--btn-secondary-background-color);
67
67
  --btn-secondary-color: var(--secondary-100-fg);
68
- --btn-secondary-focus-outline-color: calc(color-mix(in srgb, var(--btn-secondary-background-color) 60%, transparent));
68
+ --btn-secondary-focus-outline-color: color-mix(in srgb, var(--btn-secondary-background-color) 60%, transparent);
69
69
  --btn-secondary-hollow-background-color: var(--btn-secondary-color);
70
70
  --btn-secondary-hollow-color: var(--btn-secondary-background-color);
71
71
  --btn-secondary-hollow-hover-background-color: var(--btn-secondary-background-color);
@@ -202,7 +202,7 @@
202
202
  --sdt-pagination-border: var(--btn-border-width) var(--neutral-100);
203
203
  --sdt-pagination-padding-block: var(--size-xxs);
204
204
  --sdt-pagination-padding-inline: var(--size-xs);
205
- --sdt-thead-hover-background-color: calc(color-mix(in srgb, var(--table-thead-background-color) 90%, var(--accent-100)));
205
+ --sdt-thead-hover-background-color: color-mix(in srgb, var(--table-thead-background-color) 90%, var(--accent-100));
206
206
  --secondary-100: #650853;
207
207
  --secondary-100-fg: #fff;
208
208
  --sf-macro-btn-close-background-color: var(--btn-close-background-color);
@@ -214,7 +214,7 @@
214
214
  --sf-macro-rows-border: 1px solid var(--neutral-100);
215
215
  --sf-macro-rows-border-radius: var(--radius-xs);
216
216
  --sf-macro-rows-even-background-color: var(--body-background-color);
217
- --sf-macro-rows-hover-background-color: calc(color-mix(in srgb, var(--body-background-color) 95%, #000));
217
+ --sf-macro-rows-hover-background-color: color-mix(in srgb, var(--body-background-color) 95%, #000);
218
218
  --sf-macro-rows-margin-block-end: var(--size-base);
219
219
  --sf-macro-rows-padding: var(--size-xs);
220
220
  --size-2xl: 3rem;