@massimo-cassandro/minimo 0.3.4 → 0.3.6

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@massimo-cassandro/minimo",
3
- "version": "0.3.4",
3
+ "version": "0.3.6",
4
4
  "description": "Light css framework",
5
5
  "type": "module",
6
6
  "homepage": "https://github.com/massimo-cassandro/minimo#readme",
@@ -32,7 +32,7 @@
32
32
  "src/**/*.{js,mjs,css,svg,tokens.json,tokens.jsonc,md}"
33
33
  ],
34
34
  "devDependencies": {
35
- "@massimo-cassandro/dev-updater": "^3.0.2",
35
+ "@massimo-cassandro/dev-updater": "^3.0.3",
36
36
  "@massimo-cassandro/stylelint-config": "^2.3.4",
37
37
  "style-dictionary": "^5.4.0"
38
38
  }
@@ -144,9 +144,9 @@
144
144
 
145
145
  /* animation-timeline: scroll(self);
146
146
  animation: detect-scroll linear;
147
- --bg-if-can-scroll: var(--can-scroll) lime;
148
- --bg-if-cant-scroll: red;
149
- background: var(--bg-if-can-scroll, var(--bg-if-cant-scroll)); */
147
+ --_bg-if-can-scroll: var(--_can-scroll) lime;
148
+ --_bg-if-cant-scroll: red;
149
+ background: var(--_bg-if-can-scroll, var(--_bg-if-cant-scroll)); */
150
150
 
151
151
 
152
152
  .table thead th {
@@ -207,7 +207,7 @@
207
207
  /*
208
208
  @keyframes detect-scroll {
209
209
  from, to {
210
- --can-scroll:;
210
+ --_can-scroll:;
211
211
  }
212
212
  } */
213
213
 
@@ -5,19 +5,19 @@
5
5
 
6
6
  .modal-alert {
7
7
  --malert-success-color: var(--status-success-color);
8
- --malert-success-color-fg: var(--status-success-fg-color);
8
+ --malert-success-color-fg: var(--status-success-foreground);
9
9
 
10
10
  --malert-info-color: var(--status-info-color);
11
- --malert-info-color-fg: var(--status-info-fg-color);
11
+ --malert-info-color-fg: var(--status-info-foreground);
12
12
 
13
13
  --malert-warning-color: var(--status-warning-color);
14
- --malert-warning-color-fg: var(--status-warning-fg-color);
14
+ --malert-warning-color-fg: var(--status-warning-foreground);
15
15
 
16
16
  --malert-error-color: var(--status-danger-color);
17
- --malert-error-color-fg: var(--status-danger-fg-color);
17
+ --malert-error-color-fg: var(--status-danger-foreground);
18
18
 
19
19
  --malert-confirm-color: var(--status-warning-color);
20
- --malert-confirm-color-fg: var(--status-warning-fg-color);
20
+ --malert-confirm-color-fg: var(--status-warning-foreground);
21
21
 
22
22
  /* --malert-marks-stroke-width: 6px; */
23
23
  --malert-backdrop: rgb(0 0 0 / .3);
@@ -1,16 +1,9 @@
1
1
 
2
2
  .sf-macro-wrapper {
3
- --sf-macro-rows-padding: .5rem;
4
- --sf-macro-rows-margin-bottom: 1rem;
5
- --sf-macro-rows-border-radius: .4rem;
6
- --sf-macro-rows-hover-bg-color: color-mix(in srgb, var(--body-bg-color) 95%, #000);
7
- --sf-macro-even-rows-bg-color: var(--body-bg-color); /* rgb(0 0 0 / .05); */
8
- --sf-macro-rows-border: 1px solid var(--stone-5);
9
- --sf-macro-close-btn-size: 2rem;
10
3
 
11
4
 
12
5
  /* etichette campi righe successive alla prima */
13
- @media (--desktop-up) {
6
+ @media (--media-large-viewport-up) {
14
7
  &:not(.always-show-labels) {
15
8
  .sf-macro-riga {
16
9
  &:not(:first-child) {
@@ -41,17 +34,17 @@
41
34
  .sf-macro-riga {
42
35
  position: relative;
43
36
  padding: var(--sf-macro-rows-padding);
44
- margin-bottom: var(--sf-macro-rows-margin-bottom);
37
+ margin-bottom: var(--sf-macro-rows-margin-block-end);
45
38
  border: var(--sf-macro-rows-border);
46
39
  border-radius: var(--sf-macro-rows-border-radius);
47
40
 
48
41
  &:nth-child(even) {
49
- background-color: var(--sf-macro-even-rows-bg-color);
42
+ background-color: var(--sf-macro-rows-even-background-color);
50
43
  }
51
44
 
52
45
 
53
46
  &:hover {
54
- background-color: var(--sf-macro-rows-hover-bg-color);
47
+ background-color: var(--sf-macro-rows-hover-background-color);
55
48
  }
56
49
 
57
50
  .form-group {
@@ -75,11 +68,11 @@
75
68
  right: -.5rem;
76
69
  z-index: 1;
77
70
  display: block;
78
- width: var(--sf-macro-close-btn-size);
79
- height: var(--sf-macro-close-btn-size);
71
+ width: var(--sf-macro-btn-close-size);
72
+ height: var(--sf-macro-btn-close-size);
80
73
  padding: 1px;
81
74
  color: currentColor;
82
- background-color: var(--body-content-bg);
75
+ background-color: var(--sf-macro-btn-close-background-color);
83
76
  border-radius: 50%;
84
77
 
85
78
 
@@ -0,0 +1,66 @@
1
+
2
+
3
+ {
4
+ "sf-macro": {
5
+
6
+ "rows": {
7
+ "padding": {
8
+ "$value": "{size.xs}",
9
+ "$type": "dimension"
10
+ },
11
+ "margin": {
12
+ "block": {
13
+ "end": {
14
+ "$value": "{size.base}",
15
+ "$type": "dimension"
16
+ }
17
+ }
18
+ },
19
+ "hover": {
20
+ "background": {
21
+ "color": {
22
+ "$value": "color-mix(in srgb, {body.background.color} 95%, #000)",
23
+ "$type": "color"
24
+
25
+ }
26
+ }
27
+ },
28
+ "even": {
29
+ "background": {
30
+ "color": {
31
+ "$value": "{body.background.color}",
32
+ "$type": "color"
33
+ }
34
+ }
35
+ },
36
+ "border": {
37
+ "$type": "border",
38
+ "$value": {
39
+ "color": "{neutral.base}",
40
+ "width": "1px",
41
+ "style": "solid"
42
+ }
43
+ },
44
+ "border-radius": {
45
+ "$value": "{radius.xs}",
46
+ "$type": "dimension"
47
+ }
48
+ }, // end rows
49
+
50
+ "btn": {
51
+ "close": {
52
+ "size": {
53
+ "$value": "2rem",
54
+ "$type": "dimension"
55
+ },
56
+ "background": {
57
+ "color": {
58
+ "$value": "{body.background.color}",
59
+ "$type": "color"
60
+ }
61
+ }
62
+ }
63
+ }, // end btn
64
+
65
+ } // end sf-macro
66
+ }
@@ -25,38 +25,42 @@
25
25
  */
26
26
 
27
27
  /* alert-error / alert-danger (default) */
28
- --_alert-bg-color: var(--status-danger-color);
29
- --_alert-fg-color: var(--status-danger-fg);
28
+ --_alert-bg-color: var(--status-danger-background-color);
29
+ --_alert-fg-color: var(--status-danger-foreground);
30
30
  --_alert-border-color: var(--status-danger-border-color);
31
31
 
32
32
  position: relative;
33
33
 
34
34
  &.alert-warning, &.alert-notice {
35
35
  --_alert-bg-color: var(--status-warning-color);
36
- --_alert-fg-color: var(--status-warning-fg);
36
+ --_alert-fg-color: var(--status-warning-foreground);
37
37
  --_alert-border-color: var(--status-warning-border-color);
38
38
  }
39
39
  &.alert-info {
40
40
  --_alert-bg-color: var(--status-info-color);
41
- --_alert-fg-color: var(--status-info-fg);
41
+ --_alert-fg-color: var(--status-info-foreground);
42
42
  --_alert-border-color: var(--status-info-border-color);
43
43
  }
44
44
  &.alert-success {
45
45
  --_alert-bg-color: var(--status-success-color);
46
- --_alert-fg-color: var(--status-success-fg);
46
+ --_alert-fg-color: var(--status-success-foreground);
47
47
  --_alert-border-color: var(--status-success-border-color);
48
48
  }
49
49
 
50
50
  padding: var(--size-base) var(--size-xl) var(--size-base) var(--size-base);
51
51
  margin: var(--size-base) 0;
52
- font-size: var(--font-size-md);
53
- font-weight: var(--font-weight-semibold);
52
+ font-size: var(--font-size-base);
53
+ /* font-weight: var(--font-weight-semibold); */
54
54
  color: var(--_alert-fg-color);
55
- background-color: color-mix(in srgb, var(--_alert-bg-color) 60%, transparent);
55
+ background-color: var(--_alert-bg-color);
56
56
  border: 1px solid var(--_alert-border-color);
57
57
  border-radius: var(--alert-border-radius);
58
- box-shadow: var(--alert-drop-shadow);
58
+ box-shadow: var(--alert-box-shadow);
59
59
 
60
+ *:not(.btn-close) {
61
+ /* stylelint-disable-next-line declaration-no-important */
62
+ color: var(--_alert-fg-color) !important;
63
+ }
60
64
  h2 {
61
65
  margin: 0 0 var(--size-xs);
62
66
  font-size: var(--font-size-lg);
@@ -67,6 +71,8 @@
67
71
  margin-block-end: 0;
68
72
  }
69
73
  }
74
+
75
+ /* TODO alerts links */
70
76
  /* a {
71
77
  text-decoration: underline;
72
78
  text-underline-offset: 3px;
@@ -82,12 +88,10 @@
82
88
  }
83
89
  } */
84
90
 
85
- /* TODO sistemare meglio */
86
91
  .btn-close {
87
92
  position: absolute;
88
- top: 1rem;
89
- right: 1rem;
90
- color: currentColor;
93
+ top: -.3rem;
94
+ right: -.3rem;
91
95
  }
92
96
 
93
97
  }
@@ -2,21 +2,21 @@
2
2
 
3
3
  &.btn-success {
4
4
  --_bg: var(--status-success-color);
5
- --_fg: var(--status-success-fg-color);
5
+ --_fg: var(--status-success-foreground);
6
6
  --_btn-bg-color: var(--_bg);
7
7
  --_btn-fg-color: var(--_fg);
8
8
  --_btn-border-color: var(--status-success-border-color);
9
9
  }
10
10
  &.btn-info {
11
11
  --_bg: var(--status-info-color);
12
- --_fg: var(--status-info-fg-color);
12
+ --_fg: var(--status-info-foreground);
13
13
  --_btn-bg-color: var(--_bg);
14
14
  --_btn-fg-color: var(--_fg);
15
15
  --_btn-border-color: var(--status-info-border-color);
16
16
  }
17
17
  &.btn-danger, &.btn-error {
18
18
  --_bg: var(--status-danger-color);
19
- --_fg: var(--status-danger-fg-color);
19
+ --_fg: var(--status-danger-foreground);
20
20
  --_btn-bg-color: var(--_bg);
21
21
  --_btn-fg-color: var(--_fg);
22
22
  --_btn-border-color: var(--status-danger-border-color);
@@ -25,7 +25,7 @@
25
25
 
26
26
  &.btn-warning {
27
27
  --_bg: var(--status-warning-color);
28
- --_fg: var(--status-warning-fg-color);
28
+ --_fg: var(--status-warning-foreground);
29
29
  --_btn-bg-color: var(--_bg);
30
30
  --_btn-fg-color: var(--_fg);
31
31
  --_btn-border-color: var(--status-warning-border-color);
@@ -44,8 +44,8 @@ fieldset.form-group, fieldset.form-collection-fset {
44
44
  font-size: .9rem;
45
45
  font-weight: var(--font-weight-semibold);
46
46
  line-height: 1.2;
47
- color: var(--form-fieldset-legend-color);
48
- background-color: var(--form-fieldset-legend-background-color);
47
+ color: var(--form-legend-color);
48
+ background-color: var(--form-legend-background-color);
49
49
  border-radius: var(--btn-border-radius) var(--btn-border-radius) var(--btn-border-radius) 0;
50
50
  }
51
51
 
@@ -1,8 +1,8 @@
1
1
  :root {
2
2
  --accent-base: #567d0d;
3
3
  --accent-on-base: #fff;
4
- --alert-border-radius: var(--radius-md);
5
- --alert-drop-shadow: 0 0 .5rem 0 oklch(0% 0 0 / .5);
4
+ --alert-border-radius: var(--radius-sm);
5
+ --alert-box-shadow: 0 0 .5rem 0 oklch(0% 0 0 / .5);
6
6
  --badge-background-color: var(--primary-base);
7
7
  --badge-color: var(--primary-on-base);
8
8
  --badge-font-size: var(--font-size-xs);
@@ -134,13 +134,13 @@
134
134
  --form-end-margin-block-end: var(--size-base);
135
135
  --form-end-margin-block-start: var(--size-base);
136
136
  --form-fieldset-border-width: .0625rem;
137
- --form-fieldset-legend-background-color: transparent;
138
- --form-fieldset-legend-color: var(--text-color);
139
137
  --form-group-padding-block: 0 var(--size-base);
140
138
  --form-input-group-background-color: transparent;
141
139
  --form-label-color: var(--text-color);
142
140
  --form-label-font-size: var(--font-size-sm);
143
141
  --form-label-font-weight: var(--font-weight-semibold);
142
+ --form-legend-background-color: transparent;
143
+ --form-legend-color: var(--text-color);
144
144
  --form-user-info-color: var(--text-muted);
145
145
  --form-user-info-font-size: var(--font-size-xs);
146
146
  --grid-cols: 3;
@@ -184,6 +184,14 @@
184
184
  --sdt-thead-hover-background-color: color-mix(in srgb, var(--table-thead-background-color) 90%, var(--accent-base));
185
185
  --secondary-base: #650853;
186
186
  --secondary-on-base: #fff;
187
+ --sf-macro-btn-close-background-color: var(--body-background-color);
188
+ --sf-macro-btn-close-size: 2rem;
189
+ --sf-macro-rows-border: 1px solid var(--neutral-base);
190
+ --sf-macro-rows-border-radius: var(--radius-xs);
191
+ --sf-macro-rows-even-background-color: var(--body-background-color);
192
+ --sf-macro-rows-hover-background-color: color-mix(in srgb, var(--body-background-color) 95%, #000);
193
+ --sf-macro-rows-margin-block-end: var(--size-base);
194
+ --sf-macro-rows-padding: var(--size-xs);
187
195
  --size-2xl: 3rem;
188
196
  --size-3xl: 4rem;
189
197
  --size-base: 1rem;
@@ -196,18 +204,22 @@
196
204
  --spinner-color: var(--primary-base);
197
205
  --spinner-size: var(--size-lg);
198
206
  --spinner-stroke-width: .125rem;
207
+ --status-danger-background-color: var(--status-danger-color);
199
208
  --status-danger-border-color: var(--status-danger-color);
200
209
  --status-danger-color: #c00;
201
- --status-danger-fg: #fff;
210
+ --status-danger-foreground: #fff;
211
+ --status-info-background-color: var(--status-info-color);
202
212
  --status-info-border-color: var(--status-info-color);
203
213
  --status-info-color: #0665c5;
204
- --status-info-fg: #fff;
214
+ --status-info-foreground: #fff;
215
+ --status-success-background-color: var(--status-success-color);
205
216
  --status-success-border-color: var(--status-success-color);
206
217
  --status-success-color: #046d19;
207
- --status-success-fg: #fff;
218
+ --status-success-foreground: #fff;
219
+ --status-warning-background-color: var(--status-warning-color);
208
220
  --status-warning-border-color: var(--status-warning-color);
209
221
  --status-warning-color: #fc0;
210
- --status-warning-fg: #4f2900;
222
+ --status-warning-foreground: #4f2900;
211
223
  --table-body-border-width: .0625rem;
212
224
  --table-body-tr-alt-bg-color: #efefef;
213
225
  --table-body-tr-hover-bg-color: #cbcbcb;
@@ -2,12 +2,14 @@
2
2
  "alert": {
3
3
  "border": {
4
4
  "radius": {
5
- "$value": "{radius.md}",
5
+ "$value": "{radius.sm}",
6
6
  "$type": "dimension"
7
7
  },
8
8
  },
9
9
 
10
- "drop-shadow": {
10
+ "box-shadow": {
11
+ // "$type": "string",
12
+ // "$value": "none"
11
13
  "$type": "shadow",
12
14
  "$value": [
13
15
  {
@@ -269,20 +269,21 @@
269
269
  "$type": "dimension"
270
270
  }
271
271
  },
272
- "legend": {
273
- "background": {
274
- "color": {
275
- "$value": "transparent",
276
- "$type": "color"
277
- }
278
- },
272
+ },
273
+ "legend": {
274
+ "background": {
279
275
  "color": {
280
- "$value": "{text.color}",
276
+ "$value": "transparent",
281
277
  "$type": "color"
282
278
  }
279
+ },
280
+ "color": {
281
+ "$value": "{text.color}",
282
+ "$type": "color"
283
283
  }
284
284
  },
285
285
 
286
+ // blocco info finali form
286
287
  "end": {
287
288
  "margin": {
288
289
  "block": {
@@ -6,7 +6,13 @@
6
6
  "$value": "#c00",
7
7
  "$type": "color"
8
8
  },
9
- "fg": {
9
+ "background": {
10
+ "color": {
11
+ "$value": "{status.danger.color}",
12
+ "$type": "color"
13
+ }
14
+ },
15
+ "foreground": {
10
16
  "$value": "#fff",
11
17
  "$type": "color"
12
18
  },
@@ -22,7 +28,13 @@
22
28
  "$value": "#046d19",
23
29
  "$type": "color"
24
30
  },
25
- "fg": {
31
+ "background": {
32
+ "color": {
33
+ "$value": "{status.success.color}",
34
+ "$type": "color"
35
+ }
36
+ },
37
+ "foreground": {
26
38
  "$value": "#fff",
27
39
  "$type": "color"
28
40
  },
@@ -38,7 +50,13 @@
38
50
  "$value": "#0665c5",
39
51
  "$type": "color"
40
52
  },
41
- "fg": {
53
+ "background": {
54
+ "color": {
55
+ "$value": "{status.info.color}",
56
+ "$type": "color"
57
+ }
58
+ },
59
+ "foreground": {
42
60
  "$value": "#fff",
43
61
  "$type": "color"
44
62
  },
@@ -54,7 +72,13 @@
54
72
  "$value": "#fc0",
55
73
  "$type": "color"
56
74
  },
57
- "fg": {
75
+ "background": {
76
+ "color": {
77
+ "$value": "{status.warning.color}",
78
+ "$type": "color"
79
+ }
80
+ },
81
+ "foreground": {
58
82
  "$value": "#4f2900",
59
83
  "$type": "color"
60
84
  },