@massimo-cassandro/minimo 0.8.1 → 0.8.3

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 (10) hide show
  1. package/design-tokens/btn-color-themes.minimo.tokens.jsonc +8 -8
  2. package/design-tokens/components/sf-macro.minimo.tokens.jsonc +1 -1
  3. package/design-tokens/form.minimo.tokens.jsonc +1 -1
  4. package/design-tokens/web-components/simple-datatable.minimo.tokens.jsonc +1 -1
  5. package/design-tokens-src/btn-color-themes.minimo.tokens.mjs +4 -2
  6. package/design-tokens-utilities/build-tokens-src/formats/css.mjs +3 -3
  7. package/design-tokens-utilities/build-tokens-src/formats/penpot.mjs +6 -3
  8. package/design-tokens-utilities/build-tokens-src/transforms.mjs +15 -1
  9. package/package.json +1 -1
  10. package/src/custom-properties-default.css +8 -8
package/design-tokens/btn-color-themes.minimo.tokens.jsonc CHANGED
@@ -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": {
@@ -82,12 +82,12 @@
82
82
  "background": {
83
83
  "color": {
84
84
  "$type": "color",
85
- "$value": "color-mix(in srgb, #083865 20%, transparent);"
85
+ "$value": "{btn.primary.background.color}"
86
86
  }
87
87
  },
88
88
  "color": {
89
89
  "$type": "color",
90
- "$value": "{btn.primary.hollow.color}"
90
+ "$value": "{btn.primary.color}"
91
91
  }
92
92
  }
93
93
  }
@@ -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": {
@@ -168,12 +168,12 @@
168
168
  "background": {
169
169
  "color": {
170
170
  "$type": "color",
171
- "$value": "color-mix(in srgb, #650853 20%, transparent);"
171
+ "$value": "{btn.secondary.background.color}"
172
172
  }
173
173
  },
174
174
  "color": {
175
175
  "$type": "color",
176
- "$value": "{btn.secondary.hollow.color}"
176
+ "$value": "{btn.secondary.color}"
177
177
  }
178
178
  }
179
179
  }
package/design-tokens/components/sf-macro.minimo.tokens.jsonc CHANGED
@@ -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
  },
package/design-tokens/form.minimo.tokens.jsonc CHANGED
@@ -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": {
package/design-tokens/web-components/simple-datatable.minimo.tokens.jsonc CHANGED
@@ -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
  }
package/design-tokens-src/btn-color-themes.minimo.tokens.mjs CHANGED
@@ -1,3 +1,5 @@
1
+ // TODO aggiungere neutral e accent
2
+
1
3
  const makeBtnObj = theme => {
2
4
 
3
5
  return {
@@ -22,7 +24,7 @@ const makeBtnObj = theme => {
22
24
  focus: {
23
25
  outline: {
24
26
  color: {
25
- $value: `color-mix(in srgb, {btn.${theme}.background.color} 60%, transparent);`,
27
+ $value: `color-mix(in srgb, {btn.${theme}.background.color} 60%, transparent)`,
26
28
  $type: 'color'
27
29
  }
28
30
  }
@@ -51,7 +53,7 @@ const makeBtnObj = theme => {
51
53
  active: {
52
54
  background: {
53
55
  color: {
54
- $value: `color-mix(in srgb, {btn.${theme}.background.color} 60%, #000);`,
56
+ $value: `color-mix(in srgb, {btn.${theme}.background.color} 60%, #000)`,
55
57
  $type: 'color'
56
58
  }
57
59
  },
package/design-tokens-utilities/build-tokens-src/formats/css.mjs CHANGED
@@ -204,9 +204,9 @@ StyleDictionary.registerFormat({
204
204
  ? resolveRefs(orig) : buildAnimation(orig, resolveRefs);
205
205
 
206
206
  } else if (options.outputReferences && typeof orig === 'string' && orig.includes('{')) {
207
- // Resolve {references} to var(--name). If arithmetic operators remain
208
- // after substitution the value is a math expression and must be wrapped
209
- // in calc() to produce valid CSS.
207
+ // Covers both plain aliases and CSS functions containing {references}
208
+ // e.g. color-mix(in srgb, {btn.secondary.background.color} 60%, #000)
209
+ // {references} are replaced with var(--name); arithmetic gets calc().
210
210
  const resolved = resolveRefs(orig);
211
211
  const isCalcNeeded = /[+\-*/]/.test(resolved.replace(/var\([^)]+\)/g, '0'));
212
212
  value = isCalcNeeded ? `calc(${resolved})` : resolved;
package/design-tokens-utilities/build-tokens-src/formats/penpot.mjs CHANGED
@@ -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 };
package/design-tokens-utilities/build-tokens-src/transforms.mjs CHANGED
@@ -84,7 +84,15 @@ StyleDictionary.registerTransform({
84
84
  type: 'value',
85
85
  transitive: true,
86
86
  filter: (token) => token.$type === 'color' || token.type === 'color',
87
- transform: (token) => token.$value ?? token.value,
87
+ transform: (token) => {
88
+ const original = token.original?.$value ?? token.original?.value;
89
+ // If the original value is a CSS function containing {references},
90
+ // return it untouched so the css format can resolve refs to var(--...)
91
+ if (typeof original === 'string' && original.includes('{') && !original.startsWith('{')) {
92
+ return original;
93
+ }
94
+ return token.$value ?? token.value;
95
+ },
88
96
  });
89
97
 
90
98
  // ---------------------------------------------------------------------------
@@ -101,6 +109,12 @@ StyleDictionary.registerTransform({
101
109
  transform: (token) => {
102
110
  const original = token.original?.$value ?? token.original?.value;
103
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
+
104
118
  const value = (typeof original === 'string' && original.startsWith('{'))
105
119
  ? (token.$value ?? token.value)
106
120
  : (original ?? token.$value ?? token.value);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@massimo-cassandro/minimo",
3
- "version": "0.8.1",
3
+ "version": "0.8.3",
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,31 +45,31 @@
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: calc(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: calc(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
- --btn-primary-hollow-hover-background-color: calc(color-mix(in srgb, var(--btn-primary-hollow-color) 20%, transparent) ;);
58
- --btn-primary-hollow-hover-color: var(--btn-primary-hollow-color);
57
+ --btn-primary-hollow-hover-background-color: var(--btn-primary-background-color);
58
+ --btn-primary-hollow-hover-color: var(--btn-primary-color);
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: calc(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: calc(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
- --btn-secondary-hollow-hover-background-color: calc(color-mix(in srgb, var(--btn-secondary-hollow-color) 20%, transparent) ;);
72
- --btn-secondary-hollow-hover-color: var(--btn-secondary-hollow-color);
71
+ --btn-secondary-hollow-hover-background-color: var(--btn-secondary-background-color);
72
+ --btn-secondary-hollow-hover-color: var(--btn-secondary-color);
73
73
  --btn-secondary-hover-background-color: var(--btn-secondary-color);
74
74
  --btn-secondary-hover-border-color: var(--btn-secondary-hover-color);
75
75
  --btn-secondary-hover-color: var(--btn-secondary-background-color);