@massimo-cassandro/minimo 0.8.0 → 0.8.2

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 (6) hide show
  1. package/design-tokens/btn-color-themes.minimo.tokens.jsonc +8 -8
  2. package/design-tokens-src/btn-color-themes.minimo.tokens.mjs +6 -4
  3. package/design-tokens-utilities/build-tokens-src/formats/css.mjs +3 -3
  4. package/design-tokens-utilities/build-tokens-src/transforms.mjs +9 -1
  5. package/package.json +1 -1
  6. 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, #083865 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, #083865 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, #650853 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, #650853 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-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
  },
@@ -83,12 +85,12 @@ const makeBtnObj = theme => {
83
85
  hover: {
84
86
  background: {
85
87
  color: {
86
- $value: `color-mix(in srgb, {btn.${theme}.hollow.color} 20%, transparent);`,
88
+ $value: `{btn.${theme}.background.color}`,
87
89
  $type: 'color'
88
90
  }
89
91
  },
90
92
  color: {
91
- $value: `{btn.${theme}.hollow.color}`,
93
+ $value: `{btn.${theme}.color}`,
92
94
  $type: 'color'
93
95
  }
94
96
 
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/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
  // ---------------------------------------------------------------------------
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@massimo-cassandro/minimo",
3
- "version": "0.8.0",
3
+ "version": "0.8.2",
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);