@massimo-cassandro/minimo 0.1.4 → 0.1.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 (13) hide show
  1. package/package.json +4 -5
  2. package/src/css/buttons/buttons.css +9 -8
  3. package/src/css/layout-base.css +1 -0
  4. package/src/custom-properties-default.css +16 -11
  5. package/src/index-template.css +32 -32
  6. package/src/components/modal-alert/svg/check-circle-duotone.svg +0 -1
  7. package/src/components/modal-alert/svg/info-duotone.svg +0 -1
  8. package/src/components/modal-alert/svg/question-duotone.svg +0 -1
  9. package/src/components/modal-alert/svg/warning-duotone.svg +0 -1
  10. package/src/components/modal-alert/svg/x-circle-duotone.svg +0 -1
  11. package/src/css/forms/select-indicator.svg +0 -3
  12. package/src/css/spinners/readme.md +0 -1
  13. /package/{index.js → src/index.js} +0 -0
package/package.json CHANGED
@@ -1,7 +1,8 @@
1
1
  {
2
2
  "name": "@massimo-cassandro/minimo",
3
- "version": "0.1.4",
3
+ "version": "0.1.6",
4
4
  "description": "Light css framework",
5
+ "type": "module",
5
6
  "homepage": "https://github.com/massimo-cassandro/minimo#readme",
6
7
  "bugs": {
7
8
  "url": "https://github.com/massimo-cassandro/minimo/issues"
@@ -20,11 +21,9 @@
20
21
  "publishConfig": {
21
22
  "access": "public"
22
23
  },
23
- "type": "module",
24
- "main": "./index.js",
24
+ "main": "./src/index.js",
25
25
  "files": [
26
- "src/**/*",
27
- "index.js"
26
+ "src/**/*.{js,css}"
28
27
  ],
29
28
  "devDependencies": {
30
29
  "@massimo-cassandro/dev-updater": "^2.1.0"
package/src/css/buttons/buttons.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /* TODO dividere in più file secondo il tipo di button */
2
2
 
3
3
  /*
4
- outline brns: primary/secondary + fondo body bg o trasparente
4
+ outline btns: primary/secondary + fondo body bg o trasparente
5
5
 
6
6
  */
7
7
 
@@ -10,7 +10,7 @@ button, [role='button'] {
10
10
  }
11
11
 
12
12
  .btn-reset, .btn-link, .btn-close {
13
- &, &.btn { /* nel caso venga anche assegnata la clase `btn`, non necessaria */
13
+ &, &.btn { /* nel caso venga anche assegnata la classe `btn`, non necessaria */
14
14
  padding: 0;
15
15
  margin: 0;
16
16
  background: transparent;
@@ -44,12 +44,13 @@ a.btn {
44
44
  pointer-events: none;
45
45
  cursor: not-allowed;
46
46
  filter: grayscale(60%);
47
- opacity: .6;
47
+ opacity: var(--form-disabled-opacity);
48
48
  }
49
49
 
50
- /* svg {
51
- width: 2rem;
52
- } */
50
+ svg {
51
+ width: 1em;
52
+ fill: currentColor;
53
+ }
53
54
 
54
55
  &.btn-sm {
55
56
  --form-btns-padding-x: var(--form-btns-sm-padding-x);
@@ -57,7 +58,7 @@ a.btn {
57
58
  font-size: var(--form-btns-sm-font-size);
58
59
 
59
60
  svg {
60
- width: 1.5rem;
61
+ width: 1.5em;
61
62
  }
62
63
  }
63
64
 
@@ -67,7 +68,7 @@ a.btn {
67
68
  font-size: var(--font-size-lg);
68
69
 
69
70
  svg {
70
- width: 1.5rem;
71
+ width: 1.5em;
71
72
  }
72
73
  }
73
74
 
package/src/css/layout-base.css CHANGED
@@ -4,6 +4,7 @@ html, body {
4
4
  margin: 0;
5
5
  font-family: var(--font-family);
6
6
  font-size: var(--font-size-base);
7
+ font-style: normal;
7
8
  line-height: var(--line-height-base);
8
9
  color: var(--text-color);
9
10
  background-color: var(--body-bg-color);
package/src/custom-properties-default.css CHANGED
@@ -2,8 +2,9 @@
2
2
  /* TODO ricontrollare i colori, se possibile sganciarli da openprops nel defaults */
3
3
  /* vedi https://postcss.org/docs/writing-a-postcss-plugin */
4
4
  /* https://github.com/GoogleChromeLabs/postcss-jit-props */
5
+
6
+
5
7
  :root {
6
- color-scheme: light dark;
7
8
 
8
9
  /* figma */
9
10
  --body-bg-color: var(--stone-0);
@@ -13,6 +14,7 @@
13
14
  --footer-link: var(--yellow-5);
14
15
  --link-color: var(--primary);
15
16
  --primary: #203c6e;
17
+ --primary-fg: #fff;
16
18
  --secondary: #a3384e;
17
19
  --secondary-fg: var(--body-bg-color);
18
20
  --radius: 0.38rem;
@@ -23,7 +25,7 @@
23
25
 
24
26
  --container-max-width: 90rem;
25
27
 
26
- --font-family: 'Rubik Variable', sans-serif;
28
+ --font-family: 'Open Sans Variable', sans-serif;
27
29
  --font-family-mono: 'Monaspace Neon Var', 'Monaspace Neon', 'Aptos Mono', 'Roboto Mono', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Andale Mono', 'Courier New', monospace;
28
30
 
29
31
  --font-weight-light: 300;
@@ -34,7 +36,8 @@
34
36
 
35
37
  --flex-grid-gap: 1.5rem;
36
38
 
37
- --gray-light: var(--gray-5);
39
+ --gray-xlight: var(--gray-2);
40
+ --gray-light: var(--gray-4);
38
41
  --gray-medium: var(--gray-6);
39
42
  --gray-dark: var(--gray-8);
40
43
 
@@ -99,7 +102,8 @@
99
102
  --form-bg-color: var(--gray-0);
100
103
  --form-input-group-bg-color: var(--gray-1);
101
104
  --form-border-color: var(--gray-6);
102
- --form-disabled-bg-color: var(--gray-2);
105
+ --form-disabled-bg-color: var(--gray-3);
106
+ --form-disabled-opacity: .3;
103
107
  --form-placeholder-color: var(--stone-8);
104
108
  --form-required-flag-color: var(--red-8);
105
109
  --form-required-flag-content: '\002A';
@@ -117,13 +121,13 @@
117
121
  --form-btns-focus-color: hsl(205 69% 45% / .508);
118
122
  --form-btns-outline-width: 3px;
119
123
 
120
- --btn-primary-bg-color: linear-gradient(45deg, var(--green-9), var(--green-10));
121
- --btn-primary-fg-color: var(--gray-0);
122
- --btn-primary-border-color: var(--green-10);
123
- --btn-primary-hover-bg-color: var(--green-11);
124
+ --btn-primary-bg-color: linear-gradient(45deg, var(--primary), color-mix(in srgb, var(--primary) 95%, #000));
125
+ --btn-primary-fg-color: var(--primary-fg);
126
+ --btn-primary-border-color: var(--primary);
127
+ --btn-primary-hover-bg-color: color-mix(in srgb, var(--primary) 90%, #000);
124
128
  --btn-primary-hover-fg-color: var(--btn-primary-fg-color);
125
129
  --btn-primary-hover-border-color: var(--btn-primary-border-color);
126
- --btn-primary-active-bg-color: var(--green-12);
130
+ --btn-primary-active-bg-color: color-mix(in srgb, var(--primary) 90%, #fff);
127
131
  --btn-primary-active-fg-color: var(--btn-primary-fg-color);
128
132
  --btn-primary-active-border-color: var(--btn-primary-active-bg-color);
129
133
  --btn-primary-focus-outline-color: color-mix(in srgb, var(--btn-primary-border-color) 25%, transparent);
@@ -139,7 +143,7 @@
139
143
  --btn-secondary-active-border-color: var(--btn-secondary-active-bg-color);
140
144
  --btn-secondary-focus-outline-color: color-mix(in srgb, var(--btn-secondary-border-color) 50%, transparent);
141
145
 
142
- /*
146
+
143
147
  --btn-o-primary-bg-color: var(--primary-150);
144
148
  --btn-o-primary-fg-color: var(--primary-10);
145
149
  --btn-o-primary-border-color: var(--btn-bg-color);
@@ -150,7 +154,7 @@
150
154
  --btn-o-primary-active-fg-color: var(--primary-10);
151
155
  --btn-o-primary-active-border-color: var(--btn-bg-color);
152
156
  --btn-o-primary-focus-outline-color: var(--btn-bg-color);
153
- */
157
+
154
158
 
155
159
  --btn-o-secondary-bg-color: color-mix(in srgb, var(--secondary) 5%, transparent);
156
160
  --btn-o-secondary-fg-color: var(--secondary);
@@ -208,6 +212,7 @@
208
212
 
209
213
  }
210
214
 
215
+
211
216
  @media (prefers-color-scheme: dark) {
212
217
  :root {
213
218
  color-scheme: dark;
package/src/index-template.css CHANGED
@@ -4,42 +4,42 @@
4
4
  o (se non necessario), direttamente nel file js principale
5
5
  */
6
6
 
7
- @import '@src/config/fonts.css';
7
+ @import '@app/css/fonts.css';
8
8
  /* @import '../node_modules/open-props/open-props.min.css'; */
9
- /* @import '@src/config/custom-properties-figma.css'; */
10
- @import '@src/config/custom-media.css';
11
- @import '@src/config/custom-properties.css';
12
-
13
- @import '@minimo/reset.css';
14
- @import '@minimo/layout-base.css';
15
- @import '@minimo/container.css';
16
-
17
- /* @import '@minimo/forms/forms.css'; */
18
- /* @import '@minimo/forms/form-edit-info.css'; */
19
- @import '@minimo/buttons/buttons.css';
20
- /* @import '@minimo/buttons/status-buttons.css'; */
21
- /* @import '@minimo/buttons/btn-close.css'; */
22
- @import '@minimo/text.css';
23
- @import '@minimo/anchors.css';
24
- /* @import '@minimo/headings.css'; */
25
- /* @import '@minimo/alerts.css'; */
26
- /* @import '@minimo/icons.css'; */
27
- @import '@minimo/svg.css';
28
- @import '@minimo/overlay.css';
29
- /* @import '@minimo/inner-nav.css'; */
30
- /* @import '@minimo/table.css'; */
31
- /* @import '@minimo/flex.css'; */
32
- /* @import '@minimo/grid.css'; */
33
- /* @import '@minimo/details.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/form-edit-info.css'; */
19
+ @import '@minimo/css/buttons/buttons.css';
20
+ /* @import '@minimo/css/buttons/status-buttons.css'; */
21
+ /* @import '@minimo/css/buttons/btn-close.css'; */
22
+ @import '@minimo/css/text.css';
23
+ @import '@minimo/css/anchors.css';
24
+ /* @import '@minimo/css/headings.css'; */
25
+ /* @import '@minimo/css/alerts.css'; */
26
+ /* @import '@minimo/css/icons.css'; */
27
+ @import '@minimo/css/svg.css';
28
+ @import '@minimo/css/overlay.css';
29
+ /* @import '@minimo/css/inner-nav.css'; */
30
+ /* @import '@minimo/css/table.css'; */
31
+ /* @import '@minimo/css/flex.css'; */
32
+ /* @import '@minimo/css/grid.css'; */
33
+ /* @import '@minimo/css/details.css'; */
34
34
 
35
35
  /* spinner attivarne uno solo + spinner-wrapper */
36
- @import '@minimo/spinners/spinner-wrapper.css';
37
- /* @import '@minimo/spinners/spinner-trailing-dots.css'; */
38
- /* @import '@minimo/spinners/spinner-three-dots.css'; */
39
- /* @import '@minimo/spinners/spinner-circle.css'; */
40
- @import '@minimo/spinners/spinner-circle-basic.css';
36
+ @import '@minimo/css/spinners/spinner-wrapper.css';
37
+ /* @import '@minimo/css/spinners/spinner-trailing-dots.css'; */
38
+ /* @import '@minimo/css/spinners/spinner-three-dots.css'; */
39
+ /* @import '@minimo/css/spinners/spinner-circle.css'; */
40
+ @import '@minimo/css/spinners/spinner-circle-basic.css';
41
41
 
42
- /* @import '@minimo/utilities.css'; */
42
+ /* @import '@minimo/css/utilities.css'; */
43
43
 
44
44
 
45
45
  /* componenti */
package/src/components/modal-alert/svg/check-circle-duotone.svg DELETED
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z" opacity="0.2"></path><path d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"></path></svg>
package/src/components/modal-alert/svg/info-duotone.svg DELETED
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z" opacity="0.2"></path><path d="M144,176a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176Zm88-48A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128ZM124,96a12,12,0,1,0-12-12A12,12,0,0,0,124,96Z"></path></svg>
package/src/components/modal-alert/svg/question-duotone.svg DELETED
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z" opacity="0.2"></path><path d="M140,180a12,12,0,1,1-12-12A12,12,0,0,1,140,180ZM128,72c-22.06,0-40,16.15-40,36v4a8,8,0,0,0,16,0v-4c0-11,10.77-20,24-20s24,9,24,20-10.77,20-24,20a8,8,0,0,0-8,8v8a8,8,0,0,0,16,0v-.72c18.24-3.35,32-17.9,32-35.28C168,88.15,150.06,72,128,72Zm104,56A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"></path></svg>
package/src/components/modal-alert/svg/warning-duotone.svg DELETED
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M215.46,216H40.54C27.92,216,20,202.79,26.13,192.09L113.59,40.22c6.3-11,22.52-11,28.82,0l87.46,151.87C236,202.79,228.08,216,215.46,216Z" opacity="0.2"></path><path d="M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z"></path></svg>
package/src/components/modal-alert/svg/x-circle-duotone.svg DELETED
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z" opacity="0.2"></path><path d="M165.66,101.66,139.31,128l26.35,26.34a8,8,0,0,1-11.32,11.32L128,139.31l-26.34,26.35a8,8,0,0,1-11.32-11.32L116.69,128,90.34,101.66a8,8,0,0,1,11.32-11.32L128,116.69l26.34-26.35a8,8,0,0,1,11.32,11.32ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"></path></svg>
package/src/css/forms/select-indicator.svg DELETED
@@ -1,3 +0,0 @@
1
- <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
2
- <path fill='none' stroke='rgb(5, 48, 56)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/>
3
- </svg>
package/src/css/spinners/readme.md DELETED
@@ -1 +0,0 @@
1
- Gli spinner hanno tutti la stessa classe, presumendo che se ne usi solo una per volta...
/package/{index.js → src/index.js} RENAMED
File without changes