@massimo-cassandro/minimo 0.10.4 → 0.10.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.
Files changed (18) hide show
  1. package/README.md +1 -3
  2. package/design-tokens/basic.minimo.tokens.jsonc +6 -0
  3. package/design-tokens-src/basic.minimo.tokens.mjs +58 -0
  4. package/design-tokens-src/form.minimo.tokens.mjs +1 -0
  5. package/package.json +1 -1
  6. package/src/css/forms/form-disabled-readonly.css +1 -2
  7. package/src/css/forms/forms.css +5 -8
  8. package/src/css/forms/input-group.css +1 -1
  9. package/src/css/forms/validation.css +1 -2
  10. package/src/css/layout-base.css +2 -0
  11. package/src/{custom-properties-default.css → custom-properties.css} +1 -0
  12. package/src/fonts.css +7 -0
  13. package/src/icons/read-me.md +1 -0
  14. package/src/minimo.css +37 -0
  15. package/design-tokens-src/basic.minimo.tokens.jsonc +0 -52
  16. package/src/fonts-template.css +0 -7
  17. package/src/index-template.css +0 -47
  18. /package/src/{custom-media-default.css → custom-media.css} +0 -0
package/README.md CHANGED
@@ -1,8 +1,6 @@
1
1
  # minimo
2
2
 
3
- Very light-size framework
4
-
5
- ...and some install [snippets](snippets/snippets.md)
3
+ My light framework + utilities
6
4
 
7
5
  ## Install
8
6
 
package/design-tokens/basic.minimo.tokens.jsonc CHANGED
@@ -25,6 +25,12 @@
25
25
  "$value": "{text.color}"
26
26
  }
27
27
  },
28
+ "accent": {
29
+ "color": {
30
+ "$type": "color",
31
+ "$value": "{accent.100}"
32
+ }
33
+ },
28
34
  "text": {
29
35
  "muted": {
30
36
  "$type": "color",
package/design-tokens-src/basic.minimo.tokens.mjs ADDED
@@ -0,0 +1,58 @@
1
+ export default {
2
+ layout: {
3
+ container: {
4
+ 'max-width': {
5
+ $type: 'dimension',
6
+ $value: '80rem'
7
+ }
8
+ }
9
+ },
10
+ body: {
11
+ background: {
12
+ color: {
13
+ $type: 'color',
14
+ $value: '#fff'
15
+ }
16
+ },
17
+ text: {
18
+ $type: 'color',
19
+ $value: '{text.color}'
20
+ }
21
+ },
22
+ accent: {
23
+ color: {
24
+ $value: '{accent.100}',
25
+ $type: 'color'
26
+ }
27
+ },
28
+ text: {
29
+ muted: {
30
+ $type: 'color',
31
+ $value: '{neutral.100}'
32
+ },
33
+ dim: {
34
+ $type: 'color',
35
+ $value: '{text.muted}'
36
+ },
37
+ negative: {
38
+ $type: 'color',
39
+ $value: '#ffffff'
40
+ },
41
+ color: {
42
+ $type: 'color',
43
+ $value: '#000'
44
+ },
45
+ selected: {
46
+ background: {
47
+ color: {
48
+ $type: 'color',
49
+ $value: '#ddd'
50
+ }
51
+ },
52
+ text: {
53
+ $type: 'color',
54
+ $value: '{body.text}'
55
+ }
56
+ }
57
+ }
58
+ };
package/design-tokens-src/form.minimo.tokens.mjs CHANGED
@@ -33,6 +33,7 @@ export default {
33
33
  },
34
34
 
35
35
  control: {
36
+
36
37
  static: {
37
38
  color: {
38
39
  $value: '{form.control.text.color}',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@massimo-cassandro/minimo",
3
- "version": "0.10.4",
3
+ "version": "0.10.6",
4
4
  "description": "Light css framework & utilities",
5
5
  "type": "module",
6
6
  "homepage": "https://github.com/massimo-cassandro/minimo#readme",
package/src/css/forms/form-disabled-readonly.css CHANGED
@@ -3,10 +3,9 @@
3
3
 
4
4
  &[disabled] {
5
5
  color: var(--form-control-disabled-color);
6
- /* border-color: $form-select-disabled-border-color; */
7
6
  cursor: not-allowed;
8
7
  background-color: var(--form-control-disabled-background-color);
9
-
8
+
10
9
  &, &::placeholder {
11
10
  font-style: var(--form-control-disabled-font-style);
12
11
  }
package/src/css/forms/forms.css CHANGED
@@ -38,10 +38,11 @@
38
38
  color: var(--form-label-color);
39
39
  }
40
40
 
41
- /* la classe form-select è mantenuta per compatibilità con bootstrap */
42
- .form-control, .form-control-static, .form-select {
41
+
42
+ .form-control, .form-control-static {
43
43
  display: block;
44
44
  width: 100%;
45
+ padding: var(--form-control-padding-block) var(--form-control-padding-inline);
45
46
  font-family: var(--font-family);
46
47
  font-size: var(--form-control-font-size);
47
48
  font-weight: var(--font-weight-regular);
@@ -59,11 +60,7 @@
59
60
  outline: var(--form-control-focus-outline-width) solid var(--form-control-focus-color);
60
61
  outline-offset: var(--form-control-focus-outline-offset);
61
62
  }
62
- }
63
63
 
64
- .form-control, .form-control-static {
65
-
66
- padding: var(--form-control-padding-block) var(--form-control-padding-inline);
67
64
 
68
65
  &::placeholder {
69
66
  font-size: var(--form-control-placeholder-font-size, var(--form-control-font-size));
@@ -77,6 +74,7 @@
77
74
  font-size: var(--form-control-sm-font-size);
78
75
  }
79
76
  }
77
+
80
78
  .form-control-static {
81
79
  overflow: hidden;
82
80
  text-overflow: ellipsis;
@@ -87,9 +85,8 @@
87
85
  }
88
86
 
89
87
  /* da bootstrap */
90
- select.form-control, .form-select {
88
+ select.form-control {
91
89
 
92
- /* --_form-select-trigger-icon-color: var(--form-control-text-color); */
93
90
  --_trigger-icon-padding-right: calc(var(--form-control-padding-inline) * 2);
94
91
  --_bg-img-inline-size: 16px;
95
92
 
package/src/css/forms/input-group.css CHANGED
@@ -8,7 +8,7 @@
8
8
  justify-content: center;
9
9
  width: 100%;
10
10
 
11
- > .form-control, > .form-select {
11
+ > .form-control {
12
12
  z-index: 2;
13
13
  flex: 1;
14
14
  border-inline-end: none;
package/src/css/forms/validation.css CHANGED
@@ -13,8 +13,7 @@
13
13
  color: var(--_status-color);
14
14
  }
15
15
 
16
- /* TODO .form-select è necessario? */
17
- .form-control, .form-select, .form-control-static {
16
+ .form-control, .form-control-static {
18
17
  outline: var(--form-validation-outline-width) solid var(--_status-color);
19
18
  outline-offset: var(--form-validation-outline-offset);
20
19
 
package/src/css/layout-base.css CHANGED
@@ -8,5 +8,7 @@ html, body {
8
8
  font-style: var(--font-style-base);
9
9
  line-height: var(--font-line-height-base);
10
10
  color: var(--text-color);
11
+ accent-color: var(--accent-color);
11
12
  background-color: var(--body-background-color);
13
+
12
14
  }
package/src/{custom-properties-default.css → custom-properties.css} RENAMED
@@ -1,6 +1,7 @@
1
1
  :root {
2
2
  --accent-100: #567d0d;
3
3
  --accent-100-fg: #fff;
4
+ --accent-color: var(--accent-100);
4
5
  --alert-border-radius: var(--radius-sm);
5
6
  --alert-box-shadow: 0 0 .5rem 0 oklch(0% 0 0 / .5);
6
7
  --badge-background-color: var(--primary-100);
package/src/fonts.css ADDED
@@ -0,0 +1,7 @@
1
+ /*
2
+ https://fontsource.org/fonts/rubik/install
3
+
4
+ */
5
+
6
+ @import '@fontsource-variable/rubik/wght.css';
7
+ @import '@fontsource-variable/rubik/wght-italic.css';
package/src/icons/read-me.md ADDED
@@ -0,0 +1 @@
1
+ Quite most icons from <https://phosphoricons.com/>
package/src/minimo.css ADDED
@@ -0,0 +1,37 @@
1
+
2
+ /* @import '@app/fonts.css'; */
3
+ /* @import '@app/css/custom-media.css'; */ /* managed by postcss */
4
+ @import '@app/css/custom-properties.css';
5
+
6
+ @import '@minimo/css/reset.css';
7
+ @import '@minimo/css/layout-base.css';
8
+ @import '@minimo/css/container.css';
9
+
10
+ @import '@minimo/css/forms/forms.css';
11
+ @import '@minimo/css/forms/fieldset.css';
12
+ @import '@minimo/css/forms/form-collections.css';
13
+ @import '@minimo/css/forms/form-group.css';
14
+ @import '@minimo/css/forms/input-group.css';
15
+ @import '@minimo/css/forms/form-disabled-readonly.css';
16
+ @import '@minimo/css/forms/validation.css';
17
+ @import '@minimo/css/forms/form-utilities.css';
18
+
19
+ @import '@minimo/css/buttons/buttons.css';
20
+ @import '@minimo/css/buttons/buttons-primary.css';
21
+ @import '@minimo/css/buttons/buttons-secondary.css';
22
+ @import '@minimo/css/buttons/status-buttons.css';
23
+ @import '@minimo/css/buttons/btn-close.css';
24
+
25
+ @import '@minimo/css/badge.css';
26
+ @import '@minimo/css/text.css';
27
+ @import '@minimo/css/anchors.css';
28
+ @import '@minimo/css/headings.css';
29
+ @import '@minimo/css/alerts.css';
30
+ @import '@minimo/css/icons.css';
31
+ @import '@minimo/css/svg.css';
32
+ @import '@minimo/css/table.css';
33
+ @import '@minimo/css/flex.css';
34
+ @import '@minimo/css/grid.css';
35
+ @import '@minimo/css/details.css';
36
+ @import '@minimo/css/utilities.css';
37
+
package/design-tokens-src/basic.minimo.tokens.jsonc DELETED
@@ -1,52 +0,0 @@
1
- {
2
- "layout": {
3
- "container": {
4
- "max-width": {
5
- "$type": "dimension",
6
- "$value": "80rem"
7
- }
8
- }
9
- },
10
- "body": {
11
- "background": {
12
- "color": {
13
- "$type": "color",
14
- "$value": "#fff"
15
- }
16
- },
17
- "text": {
18
- "$type": "color",
19
- "$value": "{text.color}"
20
- }
21
- },
22
- "text": {
23
- "muted": {
24
- "$type": "color",
25
- "$value": "{neutral.100}"
26
- },
27
- "dim": {
28
- "$type": "color",
29
- "$value": "{text.muted}"
30
- },
31
- "negative": {
32
- "$type": "color",
33
- "$value": "#ffffff"
34
- },
35
- "color": {
36
- "$type": "color",
37
- "$value": "#000"
38
- },
39
- "selected": {
40
- "background": {
41
- "color": {
42
- "$type": "color",
43
- "$value": "#ddd"
44
- }
45
- },
46
- "text": {
47
- "$type": "color",
48
- "$value": "{body.text}"
49
- }
50
- }
51
- }
52
- }
package/src/fonts-template.css DELETED
@@ -1,7 +0,0 @@
1
- /*
2
- https://fontsource.org/fonts/rethink-sans/install
3
-
4
- */
5
-
6
- @import '@fontsource-variable/rethink-sans/wght.css';
7
- @import '@fontsource-variable/rethink-sans/wght-italic.css';
package/src/index-template.css DELETED
@@ -1,47 +0,0 @@
1
- /*
2
- CSS globali
3
- i fogli stile delle singole parti sono importate direttamente nel file js relativo
4
- o (se non necessario), direttamente nel file js principale
5
- */
6
-
7
- @import '@app/css/fonts.css';
8
- /* @import '../node_modules/open-props/open-props.min.css'; */
9
- /* @import '@app/css/custom-properties-figma.css'; */
10
- @import '@app/css/custom-media.css';
11
- @import '@app/css/custom-properties.css';
12
-
13
- @import '@minimo/css/reset.css';
14
- @import '@minimo/css/layout-base.css';
15
- @import '@minimo/css/container.css';
16
-
17
- /* @import '@minimo/css/forms/forms.css'; */
18
- /* @import '@minimo/css/forms/fieldset.css'; */
19
- /* @import '@minimo/css/forms/form-collections.css'; */
20
- /* @import '@minimo/css/forms/form-group.css'; */
21
- /* @import '@minimo/css/forms/input-group.css'; */
22
- /* @import '@minimo/css/forms/form-disabled-readonly.css'; */
23
- /* @import '@minimo/css/forms/validation.css'; */
24
- /* @import '@minimo/css/forms/form-utilities.css'; */
25
-
26
- @import '@minimo/css/buttons/buttons.css';
27
- @import '@minimo/css/buttons/buttons-primary.css';
28
- @import '@minimo/css/buttons/buttons-secondary.css';
29
- /* @import '@minimo/css/buttons/status-buttons.css'; */
30
- /* @import '@minimo/css/buttons/btn-close.css'; */
31
- /* @import '@minimo/css/badge.css'; */
32
- @import '@minimo/css/text.css';
33
- @import '@minimo/css/anchors.css';
34
- /* @import '@minimo/css/headings.css'; */
35
- /* @import '@minimo/css/alerts.css'; */
36
- /* @import '@minimo/css/icons.css'; */
37
- @import '@minimo/css/svg.css';
38
- /* @import '@minimo/css/table.css'; */
39
- /* @import '@minimo/css/flex.css'; */
40
- /* @import '@minimo/css/grid.css'; */
41
- /* @import '@minimo/css/details.css'; */
42
- /* @import '@minimo/css/utilities.css'; */
43
-
44
-
45
-
46
- /* file progetto */
47
- /* @import '@src/path_to/layout.css'; */