@nxgt/mail-ui 0.1.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 (71) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +311 -0
  3. package/components/alert.vue +75 -0
  4. package/components/avatar-fallback.vue +21 -0
  5. package/components/avatar-group.vue +44 -0
  6. package/components/avatar-image.vue +20 -0
  7. package/components/avatar.vue +29 -0
  8. package/components/badge.vue +47 -0
  9. package/components/banner.vue +57 -0
  10. package/components/breakdown-card.vue +27 -0
  11. package/components/card-content.vue +16 -0
  12. package/components/card-description.vue +16 -0
  13. package/components/card-footer.vue +16 -0
  14. package/components/card-header.vue +33 -0
  15. package/components/card-title.vue +20 -0
  16. package/components/card.vue +30 -0
  17. package/components/chip.vue +41 -0
  18. package/components/code.vue +26 -0
  19. package/components/compare-card.vue +63 -0
  20. package/components/description.vue +24 -0
  21. package/components/entity-header.vue +48 -0
  22. package/components/goal-card.vue +33 -0
  23. package/components/hero.vue +36 -0
  24. package/components/layout.vue +85 -0
  25. package/components/link.vue +19 -0
  26. package/components/list-tile.vue +80 -0
  27. package/components/nx-button.vue +91 -0
  28. package/components/progress.vue +66 -0
  29. package/components/ratio-card.vue +36 -0
  30. package/components/see-also.vue +53 -0
  31. package/components/separator.vue +27 -0
  32. package/components/stat-card.vue +43 -0
  33. package/components/status-indicator.vue +35 -0
  34. package/components/steps-item.vue +48 -0
  35. package/components/steps.vue +31 -0
  36. package/components/summary-data.vue +45 -0
  37. package/components/table-body.vue +11 -0
  38. package/components/table-caption.vue +16 -0
  39. package/components/table-cell.vue +28 -0
  40. package/components/table-empty.vue +23 -0
  41. package/components/table-footer.vue +11 -0
  42. package/components/table-head.vue +25 -0
  43. package/components/table-header.vue +11 -0
  44. package/components/table-row.vue +15 -0
  45. package/components/table.vue +25 -0
  46. package/components/timeline.vue +70 -0
  47. package/components/typography.vue +64 -0
  48. package/components/ui.ts +166 -0
  49. package/dist/catalogues.d.ts +56 -0
  50. package/dist/catalogues.d.ts.map +1 -0
  51. package/dist/index.d.ts +27 -0
  52. package/dist/index.d.ts.map +1 -0
  53. package/dist/index.js +214 -0
  54. package/dist/index.js.map +13 -0
  55. package/dist/packaged.d.ts +27 -0
  56. package/dist/packaged.d.ts.map +1 -0
  57. package/dist/plugin.d.ts +55 -0
  58. package/dist/plugin.d.ts.map +1 -0
  59. package/dist/theme.d.ts +11 -0
  60. package/dist/theme.d.ts.map +1 -0
  61. package/dist/vue.d.ts +9 -0
  62. package/dist/vue.d.ts.map +1 -0
  63. package/docs/README.md +15 -0
  64. package/docs/guide/components.md +984 -0
  65. package/docs/guide/messages.md +156 -0
  66. package/docs/guide/plugin.md +365 -0
  67. package/docs/guide/theme.md +153 -0
  68. package/docs/roadmap.md +97 -0
  69. package/docs/troubleshooting.md +519 -0
  70. package/package.json +69 -0
  71. package/theme.css +292 -0
package/theme.css ADDED
@@ -0,0 +1,292 @@
1
+ /*
2
+ * The @nxgt/material-vue light theme, as Tailwind tokens for an e-mail.
3
+ *
4
+ * The colours are material-vue's, in oklch: Maizzle writes each as a hex
5
+ * value (with a lab() one after it) and leaves no var() in the HTML.
6
+ *
7
+ * A mail client cannot be trusted with a colour's alpha, so material-vue's
8
+ * `bg-primary/15` is `bg-primary-15` here: the colour mixed at 15% over the
9
+ * background in sRGB — the colour a browser shows for the alpha — into a
10
+ * plain hex value. Each follows its colour when a project overrides it.
11
+ */
12
+ @theme {
13
+ --radius-sm: 6px;
14
+ --radius-md: 8px;
15
+ --radius-lg: 10px;
16
+ --radius-xl: 14px;
17
+
18
+ --color-background: oklch(1 0 0);
19
+ --color-foreground: oklch(0.14 0.036 258.53);
20
+ --color-card: oklch(1 0 0);
21
+ --color-card-foreground: oklch(0.129 0.042 264.695);
22
+ --color-primary: oklch(46% 0.1135 276.35);
23
+ --color-primary-foreground: oklch(0.984 0.003 247.858);
24
+ --color-secondary: oklch(56.67% 0.1135 245.65);
25
+ --color-secondary-foreground: oklch(0.984 0.003 247.858);
26
+ --color-muted: oklch(0.968 0.007 247.896);
27
+ --color-muted-foreground: oklch(0.554 0.046 257.417);
28
+ --color-accent: oklch(0.9182 0.0077 228.86);
29
+ --color-accent-foreground: oklch(0.216 0.006 56.043);
30
+ --color-error: oklch(0.577 0.245 27.325);
31
+ --color-error-foreground: oklch(0.984 0.003 247.858);
32
+ --color-success: oklch(0.6 0.118 184.704);
33
+ --color-success-foreground: oklch(0.984 0.003 247.858);
34
+ --color-info: oklch(0.707 0.165 254.624);
35
+ --color-info-foreground: oklch(0.984 0.003 247.858);
36
+ --color-warning: oklch(0.646 0.222 41.116);
37
+ --color-warning-foreground: oklch(0.984 0.003 247.858);
38
+ --color-border: oklch(0.929 0.013 255.508);
39
+
40
+ /* The page around the card: material-vue's background-paper. */
41
+ --color-paper: color-mix(
42
+ in srgb,
43
+ var(--color-primary) 5%,
44
+ var(--color-background)
45
+ );
46
+
47
+ --color-primary-5: color-mix(
48
+ in srgb,
49
+ var(--color-primary) 5%,
50
+ var(--color-background)
51
+ );
52
+ --color-primary-10: color-mix(
53
+ in srgb,
54
+ var(--color-primary) 10%,
55
+ var(--color-background)
56
+ );
57
+ --color-primary-15: color-mix(
58
+ in srgb,
59
+ var(--color-primary) 15%,
60
+ var(--color-background)
61
+ );
62
+ --color-primary-20: color-mix(
63
+ in srgb,
64
+ var(--color-primary) 20%,
65
+ var(--color-background)
66
+ );
67
+ --color-primary-25: color-mix(
68
+ in srgb,
69
+ var(--color-primary) 25%,
70
+ var(--color-background)
71
+ );
72
+ --color-primary-40: color-mix(
73
+ in srgb,
74
+ var(--color-primary) 40%,
75
+ var(--color-background)
76
+ );
77
+ --color-primary-50: color-mix(
78
+ in srgb,
79
+ var(--color-primary) 50%,
80
+ var(--color-background)
81
+ );
82
+ --color-secondary-5: color-mix(
83
+ in srgb,
84
+ var(--color-secondary) 5%,
85
+ var(--color-background)
86
+ );
87
+ --color-secondary-10: color-mix(
88
+ in srgb,
89
+ var(--color-secondary) 10%,
90
+ var(--color-background)
91
+ );
92
+ --color-secondary-15: color-mix(
93
+ in srgb,
94
+ var(--color-secondary) 15%,
95
+ var(--color-background)
96
+ );
97
+ --color-secondary-20: color-mix(
98
+ in srgb,
99
+ var(--color-secondary) 20%,
100
+ var(--color-background)
101
+ );
102
+ --color-secondary-25: color-mix(
103
+ in srgb,
104
+ var(--color-secondary) 25%,
105
+ var(--color-background)
106
+ );
107
+ --color-secondary-40: color-mix(
108
+ in srgb,
109
+ var(--color-secondary) 40%,
110
+ var(--color-background)
111
+ );
112
+ --color-secondary-50: color-mix(
113
+ in srgb,
114
+ var(--color-secondary) 50%,
115
+ var(--color-background)
116
+ );
117
+ --color-info-5: color-mix(
118
+ in srgb,
119
+ var(--color-info) 5%,
120
+ var(--color-background)
121
+ );
122
+ --color-info-10: color-mix(
123
+ in srgb,
124
+ var(--color-info) 10%,
125
+ var(--color-background)
126
+ );
127
+ --color-info-15: color-mix(
128
+ in srgb,
129
+ var(--color-info) 15%,
130
+ var(--color-background)
131
+ );
132
+ --color-info-20: color-mix(
133
+ in srgb,
134
+ var(--color-info) 20%,
135
+ var(--color-background)
136
+ );
137
+ --color-info-25: color-mix(
138
+ in srgb,
139
+ var(--color-info) 25%,
140
+ var(--color-background)
141
+ );
142
+ --color-info-40: color-mix(
143
+ in srgb,
144
+ var(--color-info) 40%,
145
+ var(--color-background)
146
+ );
147
+ --color-info-50: color-mix(
148
+ in srgb,
149
+ var(--color-info) 50%,
150
+ var(--color-background)
151
+ );
152
+ --color-success-5: color-mix(
153
+ in srgb,
154
+ var(--color-success) 5%,
155
+ var(--color-background)
156
+ );
157
+ --color-success-10: color-mix(
158
+ in srgb,
159
+ var(--color-success) 10%,
160
+ var(--color-background)
161
+ );
162
+ --color-success-15: color-mix(
163
+ in srgb,
164
+ var(--color-success) 15%,
165
+ var(--color-background)
166
+ );
167
+ --color-success-20: color-mix(
168
+ in srgb,
169
+ var(--color-success) 20%,
170
+ var(--color-background)
171
+ );
172
+ --color-success-25: color-mix(
173
+ in srgb,
174
+ var(--color-success) 25%,
175
+ var(--color-background)
176
+ );
177
+ --color-success-40: color-mix(
178
+ in srgb,
179
+ var(--color-success) 40%,
180
+ var(--color-background)
181
+ );
182
+ --color-success-50: color-mix(
183
+ in srgb,
184
+ var(--color-success) 50%,
185
+ var(--color-background)
186
+ );
187
+ --color-warning-5: color-mix(
188
+ in srgb,
189
+ var(--color-warning) 5%,
190
+ var(--color-background)
191
+ );
192
+ --color-warning-10: color-mix(
193
+ in srgb,
194
+ var(--color-warning) 10%,
195
+ var(--color-background)
196
+ );
197
+ --color-warning-15: color-mix(
198
+ in srgb,
199
+ var(--color-warning) 15%,
200
+ var(--color-background)
201
+ );
202
+ --color-warning-20: color-mix(
203
+ in srgb,
204
+ var(--color-warning) 20%,
205
+ var(--color-background)
206
+ );
207
+ --color-warning-25: color-mix(
208
+ in srgb,
209
+ var(--color-warning) 25%,
210
+ var(--color-background)
211
+ );
212
+ --color-warning-40: color-mix(
213
+ in srgb,
214
+ var(--color-warning) 40%,
215
+ var(--color-background)
216
+ );
217
+ --color-warning-50: color-mix(
218
+ in srgb,
219
+ var(--color-warning) 50%,
220
+ var(--color-background)
221
+ );
222
+ --color-error-5: color-mix(
223
+ in srgb,
224
+ var(--color-error) 5%,
225
+ var(--color-background)
226
+ );
227
+ --color-error-10: color-mix(
228
+ in srgb,
229
+ var(--color-error) 10%,
230
+ var(--color-background)
231
+ );
232
+ --color-error-15: color-mix(
233
+ in srgb,
234
+ var(--color-error) 15%,
235
+ var(--color-background)
236
+ );
237
+ --color-error-20: color-mix(
238
+ in srgb,
239
+ var(--color-error) 20%,
240
+ var(--color-background)
241
+ );
242
+ --color-error-25: color-mix(
243
+ in srgb,
244
+ var(--color-error) 25%,
245
+ var(--color-background)
246
+ );
247
+ --color-error-40: color-mix(
248
+ in srgb,
249
+ var(--color-error) 40%,
250
+ var(--color-background)
251
+ );
252
+ --color-error-50: color-mix(
253
+ in srgb,
254
+ var(--color-error) 50%,
255
+ var(--color-background)
256
+ );
257
+ --color-foreground-5: color-mix(
258
+ in srgb,
259
+ var(--color-foreground) 5%,
260
+ var(--color-background)
261
+ );
262
+ --color-foreground-10: color-mix(
263
+ in srgb,
264
+ var(--color-foreground) 10%,
265
+ var(--color-background)
266
+ );
267
+ --color-foreground-15: color-mix(
268
+ in srgb,
269
+ var(--color-foreground) 15%,
270
+ var(--color-background)
271
+ );
272
+ --color-foreground-20: color-mix(
273
+ in srgb,
274
+ var(--color-foreground) 20%,
275
+ var(--color-background)
276
+ );
277
+ --color-foreground-25: color-mix(
278
+ in srgb,
279
+ var(--color-foreground) 25%,
280
+ var(--color-background)
281
+ );
282
+ --color-foreground-40: color-mix(
283
+ in srgb,
284
+ var(--color-foreground) 40%,
285
+ var(--color-background)
286
+ );
287
+ --color-foreground-50: color-mix(
288
+ in srgb,
289
+ var(--color-foreground) 50%,
290
+ var(--color-background)
291
+ );
292
+ }