@mgdis/mg-components 4.2.1 → 5.0.0

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 (65) hide show
  1. package/dist/cjs/loader.cjs.js +1 -1
  2. package/dist/cjs/{mg-badge_23.cjs.entry.js → mg-badge_24.cjs.entry.js} +2032 -42
  3. package/dist/cjs/mg-components.cjs.js +1 -1
  4. package/dist/cjs/mg-modal.cjs.entry.js +1 -3
  5. package/dist/collection/components/atoms/mg-badge/mg-badge.js +1 -3
  6. package/dist/collection/components/atoms/mg-button/doc/mg-button.stories.js +0 -2
  7. package/dist/collection/components/atoms/mg-button/mg-button.css +106 -68
  8. package/dist/collection/components/atoms/mg-button/mg-button.js +51 -64
  9. package/dist/collection/components/atoms/mg-icon/mg-icon.conf.js +3 -0
  10. package/dist/collection/components/atoms/mg-input-title/mg-input-title.js +1 -3
  11. package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js +4 -6
  12. package/dist/collection/components/molecules/inputs/MgInput.js +1 -3
  13. package/dist/collection/components/molecules/mg-form/mg-form.js +2 -3
  14. package/dist/collection/components/molecules/mg-illustrated-message/doc/mg-illustrated-message.stories.js +2 -1
  15. package/dist/collection/components/molecules/mg-illustrated-message/mg-illustrated-message.css +15 -7
  16. package/dist/collection/components/molecules/mg-illustrated-message/mg-illustrated-message.js +27 -2
  17. package/dist/collection/components/molecules/mg-modal/doc/mg-modal.stories.js +1 -1
  18. package/dist/collection/components/molecules/mg-modal/mg-modal.js +1 -3
  19. package/dist/collection/components/molecules/mg-pagination/mg-pagination.js +4 -3
  20. package/dist/collection/components/molecules/mg-panel/doc/mg-panel.stories.js +1 -1
  21. package/dist/collection/components/molecules/mg-panel/mg-panel.css +8 -7
  22. package/dist/collection/components/molecules/mg-panel/mg-panel.js +2 -4
  23. package/dist/collection/components/molecules/mg-popover/mg-popover.css +2 -2
  24. package/dist/collection/components/molecules/mg-popover/mg-popover.js +7 -8
  25. package/dist/collection/components/molecules/mg-tabs/mg-tabs.js +1 -3
  26. package/dist/collection/variables.css +6 -0
  27. package/dist/components/MgInput.js +1 -3
  28. package/dist/components/mg-badge2.js +1 -3
  29. package/dist/components/mg-button2.js +44 -13
  30. package/dist/components/mg-form.js +2 -3
  31. package/dist/components/mg-icon2.js +3 -0
  32. package/dist/components/mg-illustrated-message.js +12 -4
  33. package/dist/components/mg-input-title2.js +1 -3
  34. package/dist/components/mg-modal.js +1 -3
  35. package/dist/components/mg-pagination.js +4 -3
  36. package/dist/components/mg-panel.js +3 -5
  37. package/dist/components/mg-popover.js +9 -9
  38. package/dist/components/mg-tabs.js +1 -3
  39. package/dist/components/mg-tooltip2.js +6 -7
  40. package/dist/esm/loader.js +1 -1
  41. package/dist/esm/{mg-badge_23.entry.js → mg-badge_24.entry.js} +2032 -43
  42. package/dist/esm/mg-components.js +1 -1
  43. package/dist/esm/mg-modal.entry.js +1 -3
  44. package/dist/mg-components/mg-components.css +1 -1
  45. package/dist/mg-components/mg-components.esm.js +1 -1
  46. package/dist/mg-components/p-b60a4c53.entry.js +1 -0
  47. package/dist/mg-components/p-df947fa5.entry.js +1 -0
  48. package/dist/mg-components/variables.css +6 -0
  49. package/dist/types/components/atoms/mg-button/doc/mg-button.stories.d.ts +2 -2
  50. package/dist/types/components/atoms/mg-button/mg-button.conf.d.ts +5 -1
  51. package/dist/types/components/atoms/mg-button/mg-button.d.ts +19 -17
  52. package/dist/types/components/molecules/mg-illustrated-message/mg-illustrated-message.d.ts +4 -0
  53. package/dist/types/components/molecules/mg-pagination/mg-pagination.d.ts +1 -0
  54. package/dist/types/components.d.ts +13 -29
  55. package/package.json +1 -1
  56. package/dist/cjs/mg-popover.cjs.entry.js +0 -171
  57. package/dist/cjs/popper-11d5f714.js +0 -1801
  58. package/dist/collection/variables.scss +0 -212
  59. package/dist/esm/mg-popover.entry.js +0 -167
  60. package/dist/esm/popper-f860750c.js +0 -1799
  61. package/dist/mg-components/p-25452f60.entry.js +0 -1
  62. package/dist/mg-components/p-a20fc541.entry.js +0 -1
  63. package/dist/mg-components/p-e08bc19a.entry.js +0 -1
  64. package/dist/mg-components/p-ec26fc38.js +0 -1
  65. package/dist/mg-components/variables.scss +0 -212
@@ -1,212 +0,0 @@
1
- :root {
2
- /*
3
- Fonts
4
- */
5
-
6
- --font-size: 1.3rem;
7
- --line-height: 1.4;
8
-
9
- /* Open Sans is used for the body (mostly all texts) */
10
- --font-family: 'Open Sans', sans-serif;
11
-
12
- /* Headings (h1 to h6) font can be customized */
13
- --font-family-heading: var(--font-family);
14
-
15
- /* Font colors */
16
- --color-font-light: var(--color-light);
17
- --color-font-dark: var(--color-dark);
18
- /*
19
- Colors
20
- https://jira.mgdis.fr/browse/PDA9-690
21
- */
22
-
23
- /* Neutral */
24
- /* #fefefe; */
25
- /* rgb(254, 254, 254); */
26
- --color-neutral-h: 0;
27
- --color-neutral-s: 0%;
28
- --color-neutral-l: 99.6%;
29
- --color-neutral: var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l);
30
-
31
- /* Warning */
32
- /* #ffc33e */
33
- /* rgb(255, 195, 62); */
34
- --color-warning-h: 41;
35
- --color-warning-s: 100%;
36
- --color-warning-l: 62.2%;
37
- --color-warning: var(--color-warning-h), var(--color-warning-s), var(--color-warning-l);
38
-
39
- /* Success */
40
- /* #32d59c */
41
- /* rgb(50, 213, 156); */
42
- --color-success-h: 159;
43
- --color-success-s: 66%;
44
- --color-success-l: 51.6%;
45
- --color-success: var(--color-success-h), var(--color-success-s), var(--color-success-l);
46
-
47
- /* Info */
48
- /* #005e9c; */
49
- /* rgb(0, 94, 156); */
50
- --color-info-h: 204;
51
- --color-info-s: 100%;
52
- --color-info-l: 30.6%;
53
- --color-info: var(--color-info-h), var(--color-info-s), var(--color-info-l);
54
-
55
- /* Danger */
56
- /* #db1f29; */
57
- /* rgb(219, 31, 41); */
58
- --color-danger-h: 357;
59
- --color-danger-s: 75%;
60
- --color-danger-l: 49%;
61
- --color-danger: var(--color-danger-h), var(--color-danger-s), var(--color-danger-l);
62
-
63
- /* Dark */
64
- /* #15282e; */
65
- /* rgb(21, 40, 46); */
66
- --color-dark-h: 194;
67
- --color-dark-s: 37.3%;
68
- --color-dark-l: 13.1%;
69
- --color-dark: var(--color-dark-h), var(--color-dark-s), var(--color-dark-l);
70
-
71
- /* Light */
72
- /* white; (#ffffff) */
73
- /* rgb(255, 255, 255); */
74
- --color-light-h: 0;
75
- --color-light-s: 0%;
76
- --color-light-l: 100%;
77
- --color-light: var(--color-light-h), var(--color-light-s), var(--color-light-l);
78
-
79
- /* Primary */
80
- --color-primary-h: hsl(var(--color-dark-h));
81
- --color-primary-s: hsl(var(--color-dark-s));
82
- --color-primary-l: hsl(var(--color-dark-l));
83
- --color-primary: hsl(var(--color-dark));
84
-
85
- /* Secondary */
86
- --color-secondary-h: hsl(var(--color-neutral-h));
87
- --color-secondary-s: hsl(var(--color-neutral-s));
88
- --color-secondary-l: hsl(var(--color-neutral-l));
89
- --color-secondary: hsl(var(--color-neutral));
90
-
91
- /* Shadow */
92
- --box-shadow: 0 0.3rem 0.8rem 0 rgba(0, 0, 0, 0.1);
93
-
94
- /*
95
- Global
96
- */
97
- --default-size: 3.5rem;
98
-
99
- /*
100
- <mg-icon>
101
- */
102
- --mg-icon-small-size: 1.2rem;
103
- --mg-icon-regular-size: 1.6rem;
104
- --mg-icon-large-size: 2.4rem;
105
- --mg-icon-extra-large-size: 3.6rem;
106
-
107
- /*
108
- <mg-button>
109
- */
110
-
111
- --mg-button-border-radius: 0.3rem;
112
- --mg-button-icon-border-radius: var(--default-size);
113
- --mg-button-disabled-opacity: 0.6;
114
- --mg-button-gradient: 1; /* Can only be 1 or 0 to enable disable gradient */
115
- --mg-button-border-variation: 1; /* Can only be 1 or 0 to enable disable border variation */
116
-
117
- /* Primary */
118
- --mg-button-primary-color-h: var(--color-dark-h);
119
- --mg-button-primary-color-s: var(--color-dark-s);
120
- --mg-button-primary-color-l: var(--color-dark-l);
121
- --mg-button-primary-font-color: var(--color-neutral);
122
-
123
- /* Secondary */
124
- --mg-button-secondary-color-h: var(--color-neutral-h);
125
- --mg-button-secondary-color-s: var(--color-neutral-s);
126
- --mg-button-secondary-color-l: var(--color-neutral-l);
127
- --mg-button-secondary-font-color: var(--color-dark);
128
-
129
- /*
130
- <mg-tag>
131
- */
132
- --mg-tag-height: 2.3rem;
133
- --mg-tag-border-radius: 0.5rem;
134
- --mg-tag-font-size: 1.2rem;
135
-
136
- /*
137
- <mg-badge>
138
- */
139
- --mg-badge-size: 1.6rem;
140
- --mg-badge-font-size: 1.1rem;
141
-
142
- /*
143
- <mg-tooltip>
144
- */
145
- --mg-tooltip-border-radius: 0.5rem;
146
- --mg-tooltip-background-color: var(--color-dark);
147
- --mg-tooltip-font-color: var(--color-font-light);
148
-
149
- /*
150
- <mg-popover>
151
- */
152
- --mg-popover-background-color: var(--color-light);
153
- --mg-popover-font-color: var(--color-font-dark);
154
- --mg-popover-title-font-size: 1.4rem;
155
-
156
- /*
157
- <mg-message>
158
- */
159
- --mg-message-border-radius: 0.3rem;
160
-
161
- /*
162
- <mg-modal>
163
- */
164
- --mg-modal-border-radius: 0.5rem;
165
- --mg-modal-title-font-size: 1.8rem;
166
- --mg-modal-content-font-size: 1.2rem;
167
-
168
- /*
169
- <mg-panel>
170
- */
171
-
172
- --mg-panel-border-radius: 0.5rem;
173
- --mg-panel-background: var(--color-info-h) var(--color-info-s) calc(var(--color-info-l) + 68%);
174
- --mg-panel-content-padding: 1.5rem;
175
-
176
- /*
177
- Layout
178
- */
179
- --mg-grid-spacing: 1rem;
180
-
181
- /*
182
- Forms
183
- */
184
-
185
- /*
186
- <mg-input-...>
187
- */
188
- --mg-inputs-border-width: 0.1rem;
189
- --mg-inputs-border-radius: 0.3rem;
190
- --mg-inputs-color: #b5c2c9;
191
- --mg-inputs-spacer: 1rem;
192
-
193
- /* Error message background */
194
- --mg-inputs-error-bg-color: var(--color-danger-h), calc(var(--color-danger-s) + 5%), calc(var(--color-danger-l) + 49%);
195
-
196
- /* Input focus shadow */
197
- /* #b5c2c9 */
198
- /* rgb(0, 221, 255); */
199
- /* hsl(188, 100%, 50%); */
200
- --mg-inputs-color-shadow-focus-hsl: 188, 100%, 50%;
201
-
202
- /*
203
- <mg-input-toggle>
204
- */
205
- --mg-input-toggle-border-radius-ratio: 2;
206
-
207
- /*
208
- <mg-input-checkbox>
209
- <mg-input-radio>
210
- */
211
- --mg-input-check-size: 1.3rem;
212
- }