@massimo-cassandro/minimo 0.3.3 → 0.3.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 (7) hide show
  1. package/package.json +2 -2
  2. package/src/css/alerts.css +14 -10
  3. package/src/css/forms/forms.css +1 -1
  4. package/src/custom-properties-default.css +1 -0
  5. package/src/design-tokens/alerts.minimo.tokens.jsonc +4 -2
  6. package/src/design-tokens/form.minimo.tokens.jsonc +4 -0
  7. package/src/design-tokens/status.minimo.tokens.jsonc +28 -4
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@massimo-cassandro/minimo",
3
- "version": "0.3.3",
3
+ "version": "0.3.5",
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
  }
package/src/css/alerts.css CHANGED
@@ -25,8 +25,8 @@
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;
@@ -49,14 +49,18 @@
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
  }
package/src/css/forms/forms.css CHANGED
@@ -34,7 +34,7 @@
34
34
  font-family: var(--font-family);
35
35
  font-size: var(--form-control-font-size);
36
36
  font-weight: var(--font-weight-regular);
37
- line-height: var(--font-line-height-base);
37
+ line-height: var(--form-control-line-height);
38
38
  color: var(--form-control-text-color);
39
39
  background-color: var(--form-control-background-color);
40
40
  border: 1px solid var(--form-control-border-color);
package/src/custom-properties-default.css CHANGED
@@ -106,6 +106,7 @@
106
106
  --form-control-lg-font-size: var(--font-size-lg);
107
107
  --form-control-lg-padding-block: var(--size-base);
108
108
  --form-control-lg-padding-inline: var(--size-md);
109
+ --form-control-line-height: 1.2;
109
110
  --form-control-md-font-size: var(--font-size-md);
110
111
  --form-control-md-padding-block: var(--size-xs);
111
112
  --form-control-md-padding-inline: var(--size-sm);
package/src/design-tokens/alerts.minimo.tokens.jsonc CHANGED
@@ -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
  {
package/src/design-tokens/form.minimo.tokens.jsonc CHANGED
@@ -74,6 +74,10 @@
74
74
  "$type": "color"
75
75
  }
76
76
  },
77
+ "line-height": {
78
+ "$value": "1.2",
79
+ "$type": "number"
80
+ },
77
81
 
78
82
  "padding": {
79
83
  "inline": {
package/src/design-tokens/status.minimo.tokens.jsonc CHANGED
@@ -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
  },