@mgremy/ng-primitives 0.4.0 → 0.6.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 (23) hide show
  1. package/LICENSE +190 -0
  2. package/README.md +53 -2
  3. package/fesm2022/mgremy-ng-primitives-button.mjs +12 -4
  4. package/fesm2022/mgremy-ng-primitives-button.mjs.map +1 -1
  5. package/fesm2022/mgremy-ng-primitives-toast.mjs +34 -0
  6. package/fesm2022/mgremy-ng-primitives-toast.mjs.map +1 -0
  7. package/fesm2022/mgremy-ng-primitives.mjs +0 -2
  8. package/fesm2022/mgremy-ng-primitives.mjs.map +1 -1
  9. package/package.json +7 -1
  10. package/theme/components/accordion.css +17 -17
  11. package/theme/components/button.css +198 -16
  12. package/theme/components/combobox.css +27 -28
  13. package/theme/components/input.css +6 -6
  14. package/theme/components/menu.css +11 -12
  15. package/theme/components/pagination.css +48 -45
  16. package/theme/components/toast.css +124 -0
  17. package/theme/components/tooltip.css +9 -9
  18. package/theme/mgnp.css +352 -57
  19. package/theme/ngp_tw.css +15 -14
  20. package/toast/README.md +4 -0
  21. package/types/mgremy-ng-primitives-button.d.ts +9 -3
  22. package/types/mgremy-ng-primitives-toast.d.ts +11 -0
  23. package/types/mgremy-ng-primitives.d.ts +2 -1
package/theme/components/tooltip.css CHANGED
@@ -1,30 +1,30 @@
1
1
  @utility mgnp-tooltip {
2
2
  position: absolute;
3
+ border: none;
4
+ animation: tooltip-show var(--default-transition-duration) var(--default-transition-timing-function);
3
5
  max-width: --spacing(64);
4
- border-radius: var(--radius-lg);
5
- background-color: var(--ngp-background-inverse);
6
6
  padding-block: --spacing(2);
7
7
  padding-inline: --spacing(3);
8
- border: none;
9
8
  font-size: var(--text-xs);
10
9
  line-height: var(--text-xs--line-height);
10
+ border-radius: var(--radius-lg);
11
+ background-color: var(--ngp-background-inverse);
11
12
  color: var(--ngp-text-inverse);
12
- animation: tooltip-show 200ms ease-in-out;
13
13
  transform-origin: var(--ngp-tooltip-transform-origin);
14
14
 
15
15
  @variant data-exit {
16
- animation: tooltip-hide 200ms ease-in-out;
16
+ animation: tooltip-hide var(--default-transition-duration) var(--default-transition-timing-function);
17
17
  }
18
18
  }
19
19
 
20
20
  @utility mgnp-tooltip-arrow {
21
21
  position: absolute;
22
22
  pointer-events: none;
23
- background-color: var(--ngp-background-inverse);
23
+ transform: rotate(45deg);
24
24
  width: --spacing(2);
25
25
  height: --spacing(2);
26
26
  border-radius: var(--radius-xs);
27
- transform: rotate(45deg);
27
+ background-color: var(--ngp-background-inverse);
28
28
 
29
29
  @variant data-[placement="top"] {
30
30
  top: calc(100% - 5px);
@@ -37,11 +37,11 @@
37
37
 
38
38
  @layer base {
39
39
  [mgnpTooltip][data-mgnp-component='mgnp-tooltip'] {
40
- @apply mgnp-tooltip;
40
+ @apply mgnp-tooltip transition;
41
41
  }
42
42
 
43
43
  [mgnpTooltipArrow][data-mgnp-component='mgnp-tooltip-arrow'] {
44
- @apply mgnp-tooltip-arrow;
44
+ @apply mgnp-tooltip-arrow transition;
45
45
  }
46
46
  }
47
47
 
package/theme/mgnp.css CHANGED
@@ -3,36 +3,124 @@
3
3
  @custom-variant dark (&:where(.dark, .dark *));
4
4
 
5
5
  @theme {
6
- --mg-background-ui: var(--color-stone-50);
7
- --mg-background-secondary: var(--color-stone-100);
8
- --mg-background-hover: var(--color-stone-100);
9
- --mg-background-active: var(--color-stone-200);
10
- --mg-background-inverse: var(--color-stone-950);
11
- --mg-background-disabled: var(--color-stone-100);
12
- --mg-background-blue: var(--color-blue-200);
13
- --mg-background-success: var(--color-lime-400);
6
+ /* Background */
14
7
  --mg-background-avatar: rgb(186, 230, 253);
8
+ /* UI */
9
+ --mg-background-ui: var(--color-stone-50);
10
+ --mg-background-ui-secondary: var(--color-stone-100);
11
+ --mg-background-ui-hover: var(--color-stone-100);
12
+ --mg-background-ui-active: var(--color-stone-200);
13
+ --mg-background-ui-inverse: var(--color-stone-900);
14
+ --mg-background-ui-inverse-active: var(--color-stone-700);
15
+ --mg-background-ui-disabled: var(--color-stone-100);
16
+ /* Primary */
17
+ --mg-background-primary: var(--color-blue-400);
18
+ --mg-background-primary-hover: var(--color-blue-500);
19
+ --mg-background-primary-active: var(--color-blue-600);
20
+ --mg-background-primary-inverse: var(--color-blue-900);
21
+ --mg-background-primary-inverse-active: var(--color-blue-700);
22
+ --mg-background-primary-disabled: var(--color-blue-100);
23
+ /* Secondary */
24
+ --mg-background-secondary: var(--color-emerald-400);
25
+ --mg-background-secondary-hover: var(--color-emerald-500);
26
+ --mg-background-secondary-active: var(--color-emerald-600);
27
+ --mg-background-secondary-inverse: var(--color-emerald-900);
28
+ --mg-background-secondary-inverse-active: var(--color-emerald-700);
29
+ --mg-background-secondary-disabled: var(--color-emerald-100);
30
+ /* Info */
31
+ --mg-background-info: var(--color-blue-400);
32
+ --mg-background-info-hover: var(--color-blue-500);
33
+ --mg-background-info-active: var(--color-blue-600);
34
+ --mg-background-info-inverse: var(--color-blue-900);
35
+ --mg-background-info-inverse-active: var(--color-blue-700);
36
+ --mg-background-info-disabled: var(--color-blue-100);
37
+ /* Success */
38
+ --mg-background-success: var(--color-green-400);
39
+ --mg-background-success-hover: var(--color-green-500);
40
+ --mg-background-success-active: var(--color-green-600);
41
+ --mg-background-success-inverse: var(--color-green-900);
42
+ --mg-background-success-inverse-active: var(--color-green-700);
43
+ --mg-background-success-disabled: var(--color-green-100);
44
+ /* Warning */
45
+ --mg-background-warning: var(--color-yellow-400);
46
+ --mg-background-warning-hover: var(--color-yellow-500);
47
+ --mg-background-warning-active: var(--color-yellow-600);
48
+ --mg-background-warning-inverse: var(--color-yellow-900);
49
+ --mg-background-warning-inverse-active: var(--color-yellow-700);
50
+ --mg-background-warning-disabled: var(--color-yellow-100);
51
+ /* Danger */
52
+ --mg-background-danger: var(--color-red-400);
53
+ --mg-background-danger-hover: var(--color-red-500);
54
+ --mg-background-danger-active: var(--color-red-600);
55
+ --mg-background-danger-inverse: var(--color-red-900);
56
+ --mg-background-danger-inverse-active: var(--color-red-700);
57
+ --mg-background-danger-disabled: var(--color-red-100);
15
58
 
59
+ /* Border */
60
+ /* UI */
16
61
  --mg-border-ui: var(--color-stone-300);
62
+ --mg-border-ui-secondary: var(--color-stone-200);
63
+ --mg-border-ui-hover: var(--color-stone-100);
64
+ --mg-border-ui-inverse: var(--color-stone-700);
65
+ /* Primary */
66
+ --mg-border-primary: var(--color-blue-300);
67
+ --mg-border-primary-hover: var(--color-blue-100);
68
+ --mg-border-primary-inverse: var(--color-blue-300);
69
+ /* Secondary */
70
+ --mg-border-secondary: var(--color-emerald-300);
71
+ --mg-border-secondary-hover: var(--color-emerald-100);
72
+ --mg-border-secondary-inverse: var(--color-emerald-300);
73
+ /* Info */
74
+ --mg-border-info: var(--color-blue-500);
75
+ --mg-border-info-hover: var(--color-blue-300);
76
+ --mg-border-info-inverse: var(--color-blue-500);
77
+ /* Success */
78
+ --mg-border-success: var(--color-green-300);
79
+ --mg-border-success-hover: var(--color-green-100);
80
+ --mg-border-success-inverse: var(--color-green-300);
81
+ /* Warning */
82
+ --mg-border-warning: var(--color-yellow-300);
83
+ --mg-border-warning-hover: var(--color-yellow-100);
84
+ --mg-border-warning-inverse: var(--color-yellow-300);
85
+ /* Danger */
86
+ --mg-border-danger: var(--color-red-300);
87
+ --mg-border-danger-hover: var(--color-red-100);
88
+ --mg-border-danger-inverse: var(--color-red-300);
89
+
17
90
  --mg-border-emphasis: var(--color-blue-400);
18
- --mg-border-hover: var(--color-stone-100);
19
- --mg-border-secondary: var(--color-stone-200);
20
- --mg-border-blue: var(--color-blue-500);
21
- --mg-border-inverse: var(--color-black);
22
- --mg-border-avatar: rgb(255, 255, 255);
91
+ --mg-border-avatar: var(--color-white);
23
92
 
93
+ /* Text */
94
+ /* UI */
24
95
  --mg-text-ui: var(--color-black);
96
+ --mg-text-ui-secondary: var(--color-stone-600);
97
+ --mg-text-ui-tertiary: var(--color-stone-500);
98
+ --mg-text-ui-disabled: var(--color-stone-400);
99
+ /* Primary */
100
+ --mg-text-primary: var(--color-blue-800);
101
+ --mg-text-primary-disabled: var(--color-blue-400);
102
+ /* Secondary */
103
+ --mg-text-secondary: var(--color-emerald-800);
104
+ --mg-text-secondary-disabled: var(--color-emerald-400);
105
+ /* Info */
106
+ --mg-text-info: var(--color-blue-800);
107
+ --mg-text-info-disabled: var(--color-blue-400);
108
+ /* Success */
109
+ --mg-text-success: var(--color-green-800);
110
+ --mg-text-success-disabled: var(--color-green-400);
111
+ /* Warning */
112
+ --mg-text-warning: var(--color-yellow-800);
113
+ --mg-text-warning-disabled: var(--color-yellow-400);
114
+ /* Danger */
115
+ --mg-text-danger: var(--color-red-800);
116
+ --mg-text-danger-disabled: var(--color-red-400);
117
+
118
+ --mg-text-inverse: var(--color-white);
25
119
  --mg-text-active: var(--color-blue-400);
26
120
  --mg-text-emphasis: var(--color-blue-400);
27
- --mg-text-primary: var(--color-stone-900);
28
- --mg-text-secondary: var(--color-stone-600);
29
- --mg-text-tertiary: var(--color-stone-500);
30
- --mg-text-disabled: var(--color-stone-400);
31
121
  --mg-text-placeholder: var(--color-stone-400);
32
- --mg-text-inverse: var(--color-white);
33
- --mg-text-blue: var(--color-blue-400);
34
- --mg-text-red: var(--color-red-500);
35
122
 
123
+ /* Shadow */
36
124
  --mg-shadow-ui: 0 1px 2px 0 rgba(0, 0, 0, 0.051);
37
125
  --mg-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.102), 0 4px 6px -4px rgba(0, 0, 0, 0.102);
38
126
  --mg-shadow-border: inset 0 0 0 1px rgba(0, 0, 0, 0.102);
@@ -41,85 +129,292 @@
41
129
  0 0 0 1px rgba(0, 0, 0, 0.051);
42
130
  --mg-shadow-input: 0 1px 2px rgba(0, 0, 0, 0.051), 0 0 0 1px rgba(0, 0, 0, 0.102);
43
131
 
132
+ /* Other */
44
133
  --mg-ring-ui: rgb(59, 130, 246);
134
+ --mg-default-transition-duration: 250ms;
135
+ --mg-default-transition-timing-function: var(--ease-in-out);
45
136
  }
46
137
 
47
138
  @theme {
48
139
  /* Tailwind */
140
+ /* Background */
141
+ --background-color-avatar: var(--mg-background-avatar);
142
+ /* UI */
49
143
  --background-color-ui: var(--mg-background-ui);
144
+ --background-color-ui-secondary: var(--mg-background-ui-secondary);
145
+ --background-color-ui-hover: var(--mg-background-ui-hover);
146
+ --background-color-ui-active: var(--mg-background-ui-active);
147
+ --background-color-ui-inverse: var(--mg-background-ui-inverse);
148
+ --background-color-ui-inverse-active: var(--mg-background-ui-inverse-active);
149
+ --background-color-ui-disabled: var(--mg-background-ui-disabled);
150
+ /* Primary */
151
+ --background-color-primary: var(--mg-background-primary);
152
+ --background-color-primary-hover: var(--mg-background-primary-hover);
153
+ --background-color-primary-active: var(--mg-background-primary-active);
154
+ --background-color-primary-inverse: var(--mg-background-primary-inverse);
155
+ --background-color-primary-disabled: var(--mg-background-primary-disabled);
156
+ /* Secondary */
50
157
  --background-color-secondary: var(--mg-background-secondary);
51
- --background-color-hover: var(--mg-background-hover);
52
- --background-color-active: var(--mg-background-active);
53
- --background-color-inverse: var(--mg-background-inverse);
54
- --background-color-disabled: var(--mg-background-disabled);
55
- --background-color-blue: var(--mg-background-blue);
158
+ --background-color-secondary-hover: var(--mg-background-secondary-hover);
159
+ --background-color-secondary-active: var(--mg-background-secondary-active);
160
+ --background-color-secondary-inverse: var(--mg-background-secondary-inverse);
161
+ --background-color-secondary-disabled: var(--mg-background-secondary-disabled);
162
+ /* Info */
163
+ --background-color-info: var(--mg-background-info);
164
+ --background-color-info-hover: var(--mg-background-info-hover);
165
+ --background-color-info-active: var(--mg-background-info-active);
166
+ --background-color-info-inverse: var(--mg-background-info-inverse);
167
+ --background-color-info-disabled: var(--mg-background-info-disabled);
168
+ /* Success */
56
169
  --background-color-success: var(--mg-background-success);
57
- --background-color-avatar: var(--mg-background-avatar);
170
+ --background-color-success-hover: var(--mg-background-success-hover);
171
+ --background-color-success-active: var(--mg-background-success-active);
172
+ --background-color-success-inverse: var(--mg-background-success-inverse);
173
+ --background-color-success-disabled: var(--mg-background-success-disabled);
174
+ /* Warning */
175
+ --background-color-warning: var(--mg-background-warning);
176
+ --background-color-warning-hover: var(--mg-background-warning-hover);
177
+ --background-color-warning-active: var(--mg-background-warning-active);
178
+ --background-color-warning-inverse: var(--mg-background-warning-inverse);
179
+ --background-color-warning-disabled: var(--mg-background-warning-disabled);
180
+ /* Danger */
181
+ --background-color-danger: var(--mg-background-danger);
182
+ --background-color-danger-hover: var(--mg-background-danger-hover);
183
+ --background-color-danger-active: var(--mg-background-danger-active);
184
+ --background-color-danger-inverse: var(--mg-background-danger-inverse);
185
+ --background-color-danger-disabled: var(--mg-background-danger-disabled);
58
186
 
187
+ /* Border */
188
+ /* UI */
59
189
  --border-color-ui: var(--mg-border-ui);
60
- --border-color-emphasis: var(--mg-border-emphasis);
61
- --border-color-hover: var(--mg-border-hover);
190
+ --border-color-ui-secondary: var(--mg-border-ui-secondary);
191
+ --border-color-ui-hover: var(--mg-border-ui-hover);
192
+ --border-color-ui-inverse: var(--mg-border-ui-inverse);
193
+ /* Primary */
194
+ --border-color-primary: var(--mg-border-primary);
195
+ --border-color-primary-hover: var(--mg-border-primary-hover);
196
+ --border-color-primary-inverse: var(--mg-border-primary-inverse);
197
+ /* Secondary */
62
198
  --border-color-secondary: var(--mg-border-secondary);
63
- --border-color-blue: var(--mg-border-blue);
64
- --border-color-inverse: var(--mg-border-inverse);
199
+ --border-color-secondary-hover: var(--mg-border-secondary-hover);
200
+ --border-color-secondary-inverse: var(--mg-border-secondary-inverse);
201
+ /* Info */
202
+ --border-color-info: var(--mg-border-info);
203
+ --border-color-info-hover: var(--mg-border-info-hover);
204
+ --border-color-info-inverse: var(--mg-border-info-inverse);
205
+ /* Success */
206
+ --border-color-success: var(--mg-border-success);
207
+ --border-color-success-hover: var(--mg-border-success-hover);
208
+ --border-color-success-inverse: var(--mg-border-success-inverse);
209
+ /* Warning */
210
+ --border-color-warning: var(--mg-border-warning);
211
+ --border-color-warning-hover: var(--mg-border-warning-hover);
212
+ --border-color-warning-inverse: var(--mg-border-warning-inverse);
213
+ /* Danger */
214
+ --border-color-danger: var(--mg-border-danger);
215
+ --border-color-danger-hover: var(--mg-border-danger-hover);
216
+ --border-color-danger-inverse: var(--mg-border-danger-inverse);
217
+
218
+ --border-color-emphasis: var(--mg-border-emphasis);
65
219
  --border-color-avatar: var(--mg-border-avatar);
66
220
 
221
+ /* UI */
67
222
  --divide-color-ui: var(--mg-border-ui);
223
+ --divide-color-ui-secondary: var(--mg-border-ui-secondary);
224
+ --divide-color-ui-hover: var(--mg-border-ui-hover);
225
+ --divide-color-ui-inverse: var(--mg-border-ui-inverse);
226
+ /* Primary */
227
+ --divide-color-primary: var(--mg-border-primary);
228
+ --divide-color-primary-hover: var(--mg-border-primary-hover);
229
+ --divide-color-primary-inverse: var(--mg-border-primary-inverse);
230
+ /* Secondary */
68
231
  --divide-color-secondary: var(--mg-border-secondary);
69
- --divide-color-blue: var(--mg-border-blue);
70
- --divide-color-inverse: var(--mg-border-inverse);
232
+ --divide-color-secondary-hover: var(--mg-border-secondary-hover);
233
+ --divide-color-secondary-inverse: var(--mg-border-secondary-inverse);
234
+ /* Info */
235
+ --divide-color-info: var(--mg-border-info);
236
+ --divide-color-info-hover: var(--mg-border-info-hover);
237
+ --divide-color-info-inverse: var(--mg-border-info-inverse);
238
+ /* Success */
239
+ --divide-color-success: var(--mg-border-success);
240
+ --divide-color-success-hover: var(--mg-border-success-hover);
241
+ --divide-color-success-inverse: var(--mg-border-success-inverse);
242
+ /* Warning */
243
+ --divide-color-warning: var(--mg-border-warning);
244
+ --divide-color-warning-hover: var(--mg-border-warning-hover);
245
+ --divide-color-warning-inverse: var(--mg-border-warning-inverse);
246
+ /* Danger */
247
+ --divide-color-danger: var(--mg-border-danger);
248
+ --divide-color-danger-hover: var(--mg-border-danger-hover);
249
+ --divide-color-danger-inverse: var(--mg-border-danger-inverse);
250
+
251
+ --divide-color-emphasis: var(--mg-border-emphasis);
252
+ --divide-color-avatar: var(--mg-border-avatar);
71
253
 
254
+ /* Text */
255
+ /* UI */
72
256
  --text-color-ui: var(--mg-text-ui);
73
- --text-color-active: var(--mg-text-active);
74
- --text-color-emphasis: var(--mg-text-emphasis);
257
+ --text-color-ui-secondary: var(--mg-text-ui-secondary);
258
+ --text-color-ui-tertiary: var(--mg-text-ui-tertiary);
259
+ --text-color-ui-disabled: var(--mg-text-ui-disabled);
260
+ /* Primary */
75
261
  --text-color-primary: var(--mg-text-primary);
262
+ --text-color-primary-disabled: var(--mg-text-primary-disabled);
263
+ /* Secondary */
76
264
  --text-color-secondary: var(--mg-text-secondary);
77
- --text-color-tertiary: var(--mg-text-tertiary);
78
- --text-color-disabled: var(--mg-text-disabled);
79
- --text-color-placeholder: var(--mg-text-placeholder);
265
+ --text-color-secondary-disabled: var(--mg-text-secondary-disabled);
266
+ /* Info */
267
+ --text-color-info: var(--mg-text-info);
268
+ --text-color-info-disabled: var(--mg-text-info-disabled);
269
+ /* Success */
270
+ --text-color-success: var(--mg-text-success);
271
+ --text-color-success-disabled: var(--mg-text-success-disabled);
272
+ /* Warning */
273
+ --text-color-warning: var(--mg-text-warning);
274
+ --text-color-warning-disabled: var(--mg-text-warning-disabled);
275
+ /* Danger */
276
+ --text-color-danger: var(--mg-text-danger);
277
+ --text-color-danger-disabled: var(--mg-text-danger-disabled);
278
+
80
279
  --text-color-inverse: var(--mg-text-inverse);
81
- --text-color-blue: var(--mg-text-blue);
82
- --text-color-red: var(--mg-text-red);
280
+ --text-color-active: var(--mg-text-active);
281
+ --text-color-emphasis: var(--mg-text-emphasis);
282
+ --text-color-placeholder: var(--mg-text-placeholder);
83
283
 
284
+ /* Shadow */
84
285
  --shadow-ui: var(--mg-shadow-ui);
85
286
  --shadow-lg: var(--mg-shadow-lg);
86
287
  --shadow-border: var(--mg-shadow-border);
87
288
  --shadow-button: var(--mg-shadow-button);
88
289
  --shadow-input: var(--mg-shadow-input);
89
290
 
291
+ /* Other */
90
292
  --ring-color-ui: var(--mg-ring-ui);
91
293
  --ring-offset-color-ui: var(--mg-ring-ui);
294
+ --default-transition-duration: var(--mg-default-transition-duration);
295
+ --default-transition-timing-function: var(--mg-default-transition-timing-function);
92
296
  }
93
297
 
94
298
  @layer base {
95
299
  @variant dark {
96
- --mg-background-ui: var(--color-stone-950);
97
- --mg-background-secondary: var(--color-stone-900);
98
- --mg-background-hover: var(--color-stone-900);
99
- --mg-background-active: var(--color-stone-800);
100
- --mg-background-inverse: var(--color-stone-50);
101
- --mg-background-disabled: var(--color-stone-900);
102
- --mg-background-blue: var(--color-blue-200);
300
+ /* Background */
301
+ /* UI */
302
+ --mg-background-ui: var(--color-stone-900);
303
+ --mg-background-ui-secondary: var(--color-stone-800);
304
+ --mg-background-ui-hover: var(--color-stone-800);
305
+ --mg-background-ui-active: var(--color-stone-700);
306
+ --mg-background-ui-inverse: var(--color-stone-50);
307
+ --mg-background-ui-inverse-active: var(--color-stone-200);
308
+ --mg-background-ui-disabled: var(--color-stone-900);
309
+ /* Primary */
310
+ --mg-background-primary: var(--color-blue-900);
311
+ --mg-background-primary-hover: var(--color-blue-800);
312
+ --mg-background-primary-active: var(--color-blue-700);
313
+ --mg-background-primary-inverse: var(--color-blue-50);
314
+ --mg-background-primary-inverse-active: var(--color-blue-600);
315
+ --mg-background-primary-disabled: var(--color-blue-900);
316
+ /* Secondary */
317
+ --mg-background-secondary: var(--color-emerald-900);
318
+ --mg-background-secondary-hover: var(--color-emerald-800);
319
+ --mg-background-secondary-active: var(--color-emerald-700);
320
+ --mg-background-secondary-inverse: var(--color-emerald-50);
321
+ --mg-background-secondary-inverse-active: var(--color-emerald-600);
322
+ --mg-background-secondary-disabled: var(--color-emerald-900);
323
+ /* Info */
324
+ --mg-background-info: var(--color-blue-900);
325
+ --mg-background-info-hover: var(--color-blue-800);
326
+ --mg-background-info-active: var(--color-blue-700);
327
+ --mg-background-info-inverse: var(--color-blue-50);
328
+ --mg-background-info-inverse-active: var(--color-blue-600);
329
+ --mg-background-info-disabled: var(--color-blue-900);
330
+ /* Success */
331
+ --mg-background-success: var(--color-green-900);
332
+ --mg-background-success-hover: var(--color-green-800);
333
+ --mg-background-success-active: var(--color-green-700);
334
+ --mg-background-success-inverse: var(--color-green-50);
335
+ --mg-background-success-inverse-active: var(--color-green-600);
336
+ --mg-background-success-disabled: var(--color-green-900);
337
+ /* Warning */
338
+ --mg-background-warning: var(--color-yellow-900);
339
+ --mg-background-warning-hover: var(--color-yellow-800);
340
+ --mg-background-warning-active: var(--color-yellow-700);
341
+ --mg-background-warning-inverse: var(--color-yellow-50);
342
+ --mg-background-warning-inverse-active: var(--color-yellow-600);
343
+ --mg-background-warning-disabled: var(--color-yellow-900);
344
+ /* Danger */
345
+ --mg-background-danger: var(--color-red-900);
346
+ --mg-background-danger-hover: var(--color-red-800);
347
+ --mg-background-danger-active: var(--color-red-700);
348
+ --mg-background-danger-inverse: var(--color-red-50);
349
+ --mg-background-danger-inverse-active: var(--color-red-600);
350
+ --mg-background-danger-disabled: var(--color-red-900);
351
+
103
352
  --mg-background-avatar: rgb(24, 24, 27);
104
353
 
105
- --mg-border-ui: var(--color-stone-800);
354
+ /* Border */
355
+ /* UI */
356
+ --mg-border-ui: var(--color-stone-700);
357
+ --mg-border-ui-secondary: var(--color-stone-800);
358
+ --mg-border-ui-hover: var(--color-stone-400);
359
+ --mg-border-ui-inverse: var(--color-stone-300);
360
+ /* Primary */
361
+ --mg-border-primary: var(--color-blue-300);
362
+ --mg-border-primary-hover: var(--color-blue-100);
363
+ --mg-border-primary-inverse: var(--color-blue-300);
364
+ /* Secondary */
365
+ --mg-border-secondary: var(--color-emerald-300);
366
+ --mg-border-secondary-hover: var(--color-emerald-100);
367
+ --mg-border-secondary-inverse: var(--color-emerald-300);
368
+ /* Info */
369
+ --mg-border-info: var(--color-blue-500);
370
+ --mg-border-info-hover: var(--color-blue-300);
371
+ --mg-border-info-inverse: var(--color-blue-500);
372
+ /* Success */
373
+ --mg-border-success: var(--color-green-300);
374
+ --mg-border-success-hover: var(--color-green-100);
375
+ --mg-border-success-inverse: var(--color-green-300);
376
+ /* Warning */
377
+ --mg-border-warning: var(--color-yellow-300);
378
+ --mg-border-warning-hover: var(--color-yellow-100);
379
+ --mg-border-warning-inverse: var(--color-yellow-300);
380
+ /* Danger */
381
+ --mg-border-danger: var(--color-red-300);
382
+ --mg-border-danger-hover: var(--color-red-100);
383
+ --mg-border-danger-inverse: var(--color-red-300);
384
+
106
385
  --mg-border-emphasis: var(--color-blue-800);
107
- --mg-border-secondary: var(--color-stone-700);
108
- --mg-border-blue: var(--color-blue-500);
109
- --mg-border-inverse: var(--color-white);
110
386
  --mg-border-avatar: rgb(63, 63, 70);
111
387
 
388
+ /* Text */
389
+ /* UI */
112
390
  --mg-text-ui: var(--color-white);
391
+ --mg-text-ui-secondary: var(--color-stone-300);
392
+ --mg-text-ui-tertiary: var(--color-stone-400);
393
+ --mg-text-ui-disabled: var(--color-stone-500);
394
+ /* Primary */
395
+ --mg-text-primary: var(--color-blue-500);
396
+ --mg-text-primary-disabled: var(--color-blue-300);
397
+ /* Secondary */
398
+ --mg-text-secondary: var(--color-emerald-500);
399
+ --mg-text-secondary-disabled: var(--color-emerald-300);
400
+ /* Info */
401
+ --mg-text-info: var(--color-blue-500);
402
+ --mg-text-info-disabled: var(--color-blue-300);
403
+ /* Success */
404
+ --mg-text-success: var(--color-green-500);
405
+ --mg-text-success-disabled: var(--color-green-300);
406
+ /* Warning */
407
+ --mg-text-warning: var(--color-yellow-500);
408
+ --mg-text-warning-disabled: var(--color-yellow-300);
409
+ /* Danger */
410
+ --mg-text-danger: var(--color-red-500);
411
+ --mg-text-danger-disabled: var(--color-red-300);
412
+
413
+ --mg-text-inverse: var(--color-black);
113
414
  --mg-text-active: var(--color-blue-600);
114
415
  --mg-text-emphasis: var(--color-blue-800);
115
- --mg-text-primary: var(--color-stone-100);
116
- --mg-text-secondary: var(--color-stone-300);
117
- --mg-text-tertiary: var(--color-stone-400);
118
- --mg-text-disabled: var(--color-stone-500);
119
- --mg-text-inverse: var(--color-black);
120
- --mg-text-blue: var(--color-blue-600);
121
- --mg-text-red: var(--color-red-500);
122
416
 
417
+ /* Shadow */
123
418
  --mg-shadow-border: inset 0 0 0 1px rgba(255, 255, 255, 0.102);
124
419
  --mg-shadow-input: 0 1px 2px rgba(255, 255, 255, 0.008), 0 0 0 1px rgba(255, 255, 255, 0.1);
125
420
  --mg-shadow-button:
package/theme/ngp_tw.css CHANGED
@@ -5,33 +5,34 @@
5
5
  @import './components/loader.css';
6
6
  @import './components/menu.css';
7
7
  @import './components/pagination.css';
8
+ @import './components/toast.css';
8
9
  @import './components/tooltip.css';
9
10
 
10
11
  @theme {
11
12
  --ngp-background: var(--mg-background-ui);
12
- --ngp-background-secondary: var(--mg-background-secondary);
13
- --ngp-background-hover: var(--mg-background-hover);
14
- --ngp-background-active: var(--mg-background-active);
15
- --ngp-background-inverse: var(--mg-background-inverse);
16
- --ngp-background-disabled: var(--mg-background-disabled);
17
- --ngp-background-blue: var(--mg-background-blue);
13
+ --ngp-background-secondary: var(--mg-background-ui-secondary);
14
+ --ngp-background-hover: var(--mg-background-ui-hover);
15
+ --ngp-background-active: var(--mg-background-ui-active);
16
+ --ngp-background-inverse: var(--mg-background-ui-inverse);
17
+ --ngp-background-disabled: var(--mg-background-ui-disabled);
18
+ --ngp-background-blue: var(--mg-background-primary);
18
19
  --ngp-background-success: var(--mg-background-success);
19
20
 
20
21
  --ngp-border: var(--mg-border-ui);
21
- --ngp-border-secondary: var(--mg-border-secondary);
22
- --ngp-border-blue: var(--mg-border-blue);
22
+ --ngp-border-secondary: var(--mg-border-ui-secondary);
23
+ --ngp-border-blue: var(--mg-border-info);
23
24
  --ngp-border-inverse: var(--mg-border-inverse);
24
25
 
25
26
  --ngp-text-active: var(--mg-text-active);
26
27
  --ngp-text-emphasis: var(--mg-text-emphasis);
27
- --ngp-text-primary: var(--mg-text-primary);
28
- --ngp-text-secondary: var(--mg-text-secondary);
29
- --ngp-text-tertiary: var(--mg-text-tertiary);
30
- --ngp-text-disabled: var(--mg-text-disabled);
28
+ --ngp-text-primary: var(--mg-text-ui);
29
+ --ngp-text-secondary: var(--mg-text-ui-secondary);
30
+ --ngp-text-tertiary: var(--mg-text-ui-tertiary);
31
+ --ngp-text-disabled: var(--mg-text-ui-disabled);
31
32
  --ngp-text-placeholder: var(--mg-text-placeholder);
32
33
  --ngp-text-inverse: var(--mg-text-inverse);
33
- --ngp-text-blue: var(--mg-text-blue);
34
- --ngp-text-red: var(--mg-text-red);
34
+ --ngp-text-blue: var(--mg-text-primary);
35
+ --ngp-text-red: var(--mg-text-danger);
35
36
 
36
37
  --ngp-shadow: var(--mg-shadow-ui);
37
38
  --ngp-shadow-lg: var(--mg-shadow-lg);
package/toast/README.md ADDED
@@ -0,0 +1,4 @@
1
+ # @mgremy/ng-primitives/src/lib/toast
2
+
3
+ Secondary entry point of `@mgremy/ng-primitives`. It can be used by importing from
4
+ `@mgremy/ng-primitives/toast`.
package/types/mgremy-ng-primitives-button.d.ts CHANGED
@@ -1,19 +1,25 @@
1
+ import * as _angular_core from '@angular/core';
2
+ import { PropertyType } from '@mgremy/ng-primitives';
1
3
  import { NgpAccordionTrigger } from 'ng-primitives/accordion';
2
4
  import { NgpButton } from 'ng-primitives/button';
3
5
  import { NgpComboboxButton } from 'ng-primitives/combobox';
4
6
  import { NgpMenuTrigger } from 'ng-primitives/menu';
5
7
  import { NgpTooltipTrigger } from 'ng-primitives/tooltip';
6
- import * as i0 from '@angular/core';
7
8
 
9
+ type MgnpButtonColor = PropertyType<'ui' | 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger'>;
10
+ type MgnpButtonVariant = PropertyType<'solid' | 'outline'>;
8
11
  declare class MgnpButton {
9
12
  protected readonly ngpButton: NgpButton | null;
10
13
  protected readonly ngpComboboxButton: NgpComboboxButton | null;
11
14
  protected readonly ngpMenuTrigger: NgpMenuTrigger<any> | null;
12
15
  protected readonly ngpTooltipTrigger: NgpTooltipTrigger<any> | null;
13
16
  protected readonly ngpAccordionTrigger: NgpAccordionTrigger<any> | null;
17
+ readonly color: _angular_core.InputSignal<MgnpButtonColor>;
18
+ readonly variant: _angular_core.InputSignal<MgnpButtonVariant>;
14
19
  constructor();
15
- static ɵfac: i0.ɵɵFactoryDeclaration<MgnpButton, never>;
16
- static ɵdir: i0.ɵɵDirectiveDeclaration<MgnpButton, "[ngpButton][mgnpButton], [ngpComboboxButton][mgnpButton], [ngpMenuTrigger][mgnpButton], [ngpTooltipTrigger][mgnpButton], [ngpAccordionTrigger][mgnpButton]", never, {}, {}, never, never, true, never>;
20
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<MgnpButton, never>;
21
+ static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MgnpButton, "[ngpButton][mgnpButton], [ngpComboboxButton][mgnpButton], [ngpMenuTrigger][mgnpButton], [ngpTooltipTrigger][mgnpButton], [ngpAccordionTrigger][mgnpButton]", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
17
22
  }
18
23
 
19
24
  export { MgnpButton };
25
+ export type { MgnpButtonColor, MgnpButtonVariant };
package/types/mgremy-ng-primitives-toast.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ import { NgpToast } from 'ng-primitives/toast';
2
+ import * as i0 from '@angular/core';
3
+
4
+ declare class MgnpToast {
5
+ protected readonly ngpToast: NgpToast | null;
6
+ constructor();
7
+ static ɵfac: i0.ɵɵFactoryDeclaration<MgnpToast, never>;
8
+ static ɵdir: i0.ɵɵDirectiveDeclaration<MgnpToast, "[ngpToast][mgnpToast]", never, {}, {}, never, never, true, never>;
9
+ }
10
+
11
+ export { MgnpToast };
package/types/mgremy-ng-primitives.d.ts CHANGED
@@ -1,2 +1,3 @@
1
+ type PropertyType<T extends string> = T | (string & {});
1
2
 
2
- export { };
3
+ export type { PropertyType };