@massimo-cassandro/minimo 1.20.2 → 1.20.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.
- package/design-tokens/tokens/src/components/modal-alert/modal-alert.minimo.tokens.jsonc +80 -0
- package/design-tokens/utilities/check-unresolved-custom-props.mjs +8 -3
- package/package.json +1 -1
- package/src/components/modal-alert/modal-alert.js +2 -2
- package/src/components/modal-alert/modal-alert.minimo.tokens.mjs +95 -2
- package/src/components/modal-alert/modal-alert.module.css +51 -0
- package/src/custom-properties.css +15 -0
|
@@ -128,6 +128,86 @@
|
|
|
128
128
|
"fg": {
|
|
129
129
|
"$type": "color",
|
|
130
130
|
"$value": "#fff"
|
|
131
|
+
},
|
|
132
|
+
"btn": {
|
|
133
|
+
"bg": {
|
|
134
|
+
"$type": "color",
|
|
135
|
+
"$value": "{malert.confirm.bg}"
|
|
136
|
+
},
|
|
137
|
+
"fg": {
|
|
138
|
+
"$type": "color",
|
|
139
|
+
"$value": "{malert.confirm.fg}"
|
|
140
|
+
},
|
|
141
|
+
"border": {
|
|
142
|
+
"color": {
|
|
143
|
+
"$type": "color",
|
|
144
|
+
"$value": "{malert.confirm.bg}"
|
|
145
|
+
}
|
|
146
|
+
},
|
|
147
|
+
"focus": {
|
|
148
|
+
"outline": {
|
|
149
|
+
"color": {
|
|
150
|
+
"$type": "color",
|
|
151
|
+
"$value": "color-mix(in srgb, {malert.confirm.bg} 60%, transparent)"
|
|
152
|
+
},
|
|
153
|
+
"width": {
|
|
154
|
+
"$type": "dimension",
|
|
155
|
+
"$value": "{btn.focus.outline.width}"
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
},
|
|
159
|
+
"hover": {
|
|
160
|
+
"bg": {
|
|
161
|
+
"$type": "color",
|
|
162
|
+
"$value": "{malert.confirm.fg}"
|
|
163
|
+
},
|
|
164
|
+
"fg": {
|
|
165
|
+
"$type": "color",
|
|
166
|
+
"$value": "{malert.confirm.bg}"
|
|
167
|
+
},
|
|
168
|
+
"border": {
|
|
169
|
+
"color": {
|
|
170
|
+
"$type": "color",
|
|
171
|
+
"$value": "{malert.confirm.btn.hover.fg}"
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
},
|
|
175
|
+
"active": {
|
|
176
|
+
"bg": {
|
|
177
|
+
"$type": "color",
|
|
178
|
+
"$value": "color-mix(in srgb, {malert.confirm.bg} 60%, #000)"
|
|
179
|
+
},
|
|
180
|
+
"fg": {
|
|
181
|
+
"$type": "color",
|
|
182
|
+
"$value": "{malert.confirm.fg}"
|
|
183
|
+
},
|
|
184
|
+
"border": {
|
|
185
|
+
"color": {
|
|
186
|
+
"$type": "color",
|
|
187
|
+
"$value": "{malert.confirm.btn.active.bg}"
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
},
|
|
191
|
+
"hollow": {
|
|
192
|
+
"bg": {
|
|
193
|
+
"$type": "color",
|
|
194
|
+
"$value": "{malert.confirm.fg}"
|
|
195
|
+
},
|
|
196
|
+
"fg": {
|
|
197
|
+
"$type": "color",
|
|
198
|
+
"$value": "{malert.confirm.bg}"
|
|
199
|
+
},
|
|
200
|
+
"hover": {
|
|
201
|
+
"bg": {
|
|
202
|
+
"$type": "color",
|
|
203
|
+
"$value": "{malert.confirm.bg}"
|
|
204
|
+
},
|
|
205
|
+
"fg": {
|
|
206
|
+
"$type": "color",
|
|
207
|
+
"$value": "{malert.confirm.fg}"
|
|
208
|
+
}
|
|
209
|
+
}
|
|
210
|
+
}
|
|
131
211
|
}
|
|
132
212
|
},
|
|
133
213
|
"heading": {
|
|
@@ -63,14 +63,19 @@ async function run() {
|
|
|
63
63
|
/** @type {RegExp[]} */
|
|
64
64
|
const exclude = config.excludePattern ?? [];
|
|
65
65
|
|
|
66
|
-
// Collect all .css files in the scan directory, excluding
|
|
67
|
-
//
|
|
66
|
+
// Collect all .css files in the scan directory, excluding any file under a
|
|
67
|
+
// directory whose name starts with "TODO" (work-in-progress folders).
|
|
68
|
+
// The token file itself (custom_prop_filename) is intentionally included:
|
|
69
|
+
// custom properties are often composed from other custom properties
|
|
70
|
+
// (e.g. `--malert-box-shadow: ... var(--malert-box-shadow-color) ...`)
|
|
71
|
+
// and those internal var() references must count as usage, otherwise the
|
|
72
|
+
// referenced property is wrongly reported as unused.
|
|
68
73
|
const files = [];
|
|
69
74
|
for await (const entry of glob(path.join(checkdir, '/**/*.css'))) {
|
|
70
75
|
const relDirSegments = path.relative(checkdir, path.dirname(entry)).split(path.sep);
|
|
71
76
|
const isInTodoDir = relDirSegments.some(segment => /^todo/i.test(segment));
|
|
72
77
|
|
|
73
|
-
if (!
|
|
78
|
+
if (!isInTodoDir) {
|
|
74
79
|
files.push(entry);
|
|
75
80
|
}
|
|
76
81
|
}
|
package/package.json
CHANGED
|
@@ -87,8 +87,8 @@ const defaults = {
|
|
|
87
87
|
okBtnText: 'OK',
|
|
88
88
|
cancelBtnText: 'Annulla',
|
|
89
89
|
cancelBtnFocus: true, // false to give focus to the ok button
|
|
90
|
-
okBtnClass: 'btn
|
|
91
|
-
cancelBtnClass: 'btn
|
|
90
|
+
okBtnClass: classnames('btn', styles.btnConfirm),
|
|
91
|
+
cancelBtnClass: classnames('btn', styles.btnConfirm, styles.btnHollow),
|
|
92
92
|
icon: confirmIcon,
|
|
93
93
|
altIcon: warningIcon,
|
|
94
94
|
useAltIcon: false // when true, uses altIcon (warning) instead of the default confirm icon
|
|
@@ -116,6 +116,7 @@ export default {
|
|
|
116
116
|
$value: '{status.danger.fg}'
|
|
117
117
|
}
|
|
118
118
|
},
|
|
119
|
+
|
|
119
120
|
confirm: {
|
|
120
121
|
bg: {
|
|
121
122
|
$type: 'color',
|
|
@@ -124,7 +125,99 @@ export default {
|
|
|
124
125
|
fg: {
|
|
125
126
|
$type: 'color',
|
|
126
127
|
$value: '#fff'
|
|
127
|
-
}
|
|
128
|
+
},
|
|
129
|
+
|
|
130
|
+
// =>> settings for confirm button
|
|
131
|
+
btn: {
|
|
132
|
+
bg: {
|
|
133
|
+
$value: '{malert.confirm.bg}',
|
|
134
|
+
$type: 'color'
|
|
135
|
+
},
|
|
136
|
+
fg: {
|
|
137
|
+
$value: '{malert.confirm.fg}',
|
|
138
|
+
$type: 'color'
|
|
139
|
+
},
|
|
140
|
+
|
|
141
|
+
border: {
|
|
142
|
+
color: {
|
|
143
|
+
$value: '{malert.confirm.bg}',
|
|
144
|
+
$type: 'color'
|
|
145
|
+
}
|
|
146
|
+
},
|
|
147
|
+
|
|
148
|
+
focus: {
|
|
149
|
+
outline: {
|
|
150
|
+
color: {
|
|
151
|
+
$value: 'color-mix(in srgb, {malert.confirm.bg} 60%, transparent)',
|
|
152
|
+
$type: 'color'
|
|
153
|
+
},
|
|
154
|
+
width: {
|
|
155
|
+
$type: 'dimension',
|
|
156
|
+
$value: '{btn.focus.outline.width}'
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
},
|
|
160
|
+
|
|
161
|
+
hover: {
|
|
162
|
+
bg: {
|
|
163
|
+
$value: '{malert.confirm.fg}',
|
|
164
|
+
$type: 'color'
|
|
165
|
+
},
|
|
166
|
+
fg: {
|
|
167
|
+
$value: '{malert.confirm.bg}',
|
|
168
|
+
$type: 'color'
|
|
169
|
+
},
|
|
170
|
+
|
|
171
|
+
border: {
|
|
172
|
+
color: {
|
|
173
|
+
$value: '{malert.confirm.btn.hover.fg}',
|
|
174
|
+
$type: 'color'
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
},
|
|
178
|
+
|
|
179
|
+
active: {
|
|
180
|
+
bg: {
|
|
181
|
+
$value: 'color-mix(in srgb, {malert.confirm.bg} 60%, #000)',
|
|
182
|
+
$type: 'color'
|
|
183
|
+
},
|
|
184
|
+
fg: {
|
|
185
|
+
$value: '{malert.confirm.fg}',
|
|
186
|
+
$type: 'color'
|
|
187
|
+
},
|
|
188
|
+
|
|
189
|
+
border: {
|
|
190
|
+
color: {
|
|
191
|
+
$value: '{malert.confirm.btn.active.bg}',
|
|
192
|
+
$type: 'color'
|
|
193
|
+
}
|
|
194
|
+
},
|
|
195
|
+
},
|
|
196
|
+
|
|
197
|
+
hollow: {
|
|
198
|
+
bg: {
|
|
199
|
+
$value: '{malert.confirm.fg}',
|
|
200
|
+
$type: 'color'
|
|
201
|
+
},
|
|
202
|
+
fg: {
|
|
203
|
+
$value: '{malert.confirm.bg}',
|
|
204
|
+
$type: 'color'
|
|
205
|
+
},
|
|
206
|
+
|
|
207
|
+
hover: {
|
|
208
|
+
bg: {
|
|
209
|
+
$value: '{malert.confirm.bg}',
|
|
210
|
+
$type: 'color'
|
|
211
|
+
},
|
|
212
|
+
fg: {
|
|
213
|
+
$value: '{malert.confirm.fg}',
|
|
214
|
+
$type: 'color'
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
},
|
|
218
|
+
} // end hollow
|
|
219
|
+
} // end confirm button
|
|
220
|
+
|
|
128
221
|
},
|
|
129
222
|
|
|
130
223
|
heading: {
|
|
@@ -158,7 +251,7 @@ export default {
|
|
|
158
251
|
$value: '{font.size.base}'
|
|
159
252
|
},
|
|
160
253
|
}
|
|
161
|
-
}
|
|
254
|
+
},
|
|
162
255
|
}
|
|
163
256
|
};
|
|
164
257
|
|
|
@@ -146,3 +146,54 @@
|
|
|
146
146
|
transform: translateY(0);
|
|
147
147
|
}
|
|
148
148
|
}
|
|
149
|
+
|
|
150
|
+
|
|
151
|
+
/* confirm button */
|
|
152
|
+
|
|
153
|
+
|
|
154
|
+
.btnConfirm {
|
|
155
|
+
--_button-bg-color: var(--malert-confirm-btn-bg);
|
|
156
|
+
--_button-fg-color: var(--malert-confirm-btn-fg);
|
|
157
|
+
--_button-border-color: var(--malert-confirm-btn-border-color);
|
|
158
|
+
|
|
159
|
+
@media (hover: hover) {
|
|
160
|
+
&:hover {
|
|
161
|
+
--_button-bg-color: var(--malert-confirm-btn-hover-bg);
|
|
162
|
+
--_button-fg-color: var(--malert-confirm-btn-hover-fg);
|
|
163
|
+
--_button-border-color: var(--malert-confirm-btn-hover-border-color);
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
&:focus {
|
|
167
|
+
outline: none;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
&:focus-visible, &:active {
|
|
171
|
+
outline: var(--malert-confirm-btn-focus-outline-width) solid var(--malert-confirm-btn-focus-outline-color);
|
|
172
|
+
/* outline-offset: 4px; */
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
&:active {
|
|
176
|
+
--_button-bg-color: var(--malert-confirm-btn-active-bg);
|
|
177
|
+
--_button-fg-color: var(--malert-confirm-btn-active-fg);
|
|
178
|
+
--_button-border-color: var(--malert-confirm-btn-active-border-color);
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
|
|
182
|
+
&.btnHollow {
|
|
183
|
+
|
|
184
|
+
--_button-bg-color: var(--malert-confirm-btn-hollow-bg);
|
|
185
|
+
--_button-fg-color: var(--malert-confirm-btn-hollow-fg);
|
|
186
|
+
/* --_button-border-color: var(--__btn-o-primary-border-color); */
|
|
187
|
+
|
|
188
|
+
|
|
189
|
+
@media (hover: hover) {
|
|
190
|
+
&:hover {
|
|
191
|
+
--_button-bg-color: var(--malert-confirm-btn-hollow-hover-bg);
|
|
192
|
+
--_button-fg-color: var(--malert-confirm-btn-hollow-hover-fg);
|
|
193
|
+
/* --_button-border-color: var(--__btn-o-primary-hover-border-color); */
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
} /* end btnConfirm */
|
|
@@ -231,6 +231,21 @@
|
|
|
231
231
|
--malert-box-shadow: 0 .025rem .25rem 0 color-mix(in srgb, var(--malert-box-shadow-color) 15%, transparent), -.01875rem .1875rem .20625rem -.03125rem color-mix(in srgb, var(--malert-box-shadow-color) 15%, transparent), -.03125rem .38125rem .4125rem -.05625rem color-mix(in srgb, var(--malert-box-shadow-color) 14%, transparent), -.05625rem .7rem .75625rem -.0875rem color-mix(in srgb, var(--malert-box-shadow-color) 14%, transparent), -.1rem 1.21875rem 1.31875rem -.11875rem color-mix(in srgb, var(--malert-box-shadow-color) 13%, transparent), -.16875rem 2.04375rem 2.2125rem -.14375rem color-mix(in srgb, var(--malert-box-shadow-color) 13%, transparent), -.26875rem 3.25rem 3.525rem -.175rem color-mix(in srgb, var(--malert-box-shadow-color) 12%, transparent);
|
|
232
232
|
--malert-box-shadow-color: #000;
|
|
233
233
|
--malert-confirm-bg: hsl(277deg 72% 45%);
|
|
234
|
+
--malert-confirm-btn-active-bg: color-mix(in srgb, var(--malert-confirm-bg) 60%, #000);
|
|
235
|
+
--malert-confirm-btn-active-border-color: var(--malert-confirm-btn-active-bg);
|
|
236
|
+
--malert-confirm-btn-active-fg: var(--malert-confirm-fg);
|
|
237
|
+
--malert-confirm-btn-bg: var(--malert-confirm-bg);
|
|
238
|
+
--malert-confirm-btn-border-color: var(--malert-confirm-bg);
|
|
239
|
+
--malert-confirm-btn-fg: var(--malert-confirm-fg);
|
|
240
|
+
--malert-confirm-btn-focus-outline-color: color-mix(in srgb, var(--malert-confirm-bg) 60%, transparent);
|
|
241
|
+
--malert-confirm-btn-focus-outline-width: var(--btn-focus-outline-width);
|
|
242
|
+
--malert-confirm-btn-hollow-bg: var(--malert-confirm-fg);
|
|
243
|
+
--malert-confirm-btn-hollow-fg: var(--malert-confirm-bg);
|
|
244
|
+
--malert-confirm-btn-hollow-hover-bg: var(--malert-confirm-bg);
|
|
245
|
+
--malert-confirm-btn-hollow-hover-fg: var(--malert-confirm-fg);
|
|
246
|
+
--malert-confirm-btn-hover-bg: var(--malert-confirm-fg);
|
|
247
|
+
--malert-confirm-btn-hover-border-color: var(--malert-confirm-btn-hover-fg);
|
|
248
|
+
--malert-confirm-btn-hover-fg: var(--malert-confirm-bg);
|
|
234
249
|
--malert-confirm-fg: #fff;
|
|
235
250
|
--malert-error-bg: var(--status-danger-background-color);
|
|
236
251
|
--malert-error-fg: var(--status-danger-fg);
|