@awenovations/aura 0.0.1

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 (82) hide show
  1. package/README.md +13 -0
  2. package/dist/alert/alert.stories.svelte +27 -0
  3. package/dist/alert/alert.stories.svelte.d.ts +28 -0
  4. package/dist/alert/alert.svelte +65 -0
  5. package/dist/alert/alert.svelte.d.ts +23 -0
  6. package/dist/alert/props.d.ts +2 -0
  7. package/dist/alert/props.js +1 -0
  8. package/dist/button/button.stories.svelte +456 -0
  9. package/dist/button/button.stories.svelte.d.ts +39 -0
  10. package/dist/button/button.svelte +143 -0
  11. package/dist/button/button.svelte.d.ts +29 -0
  12. package/dist/button/props.d.ts +6 -0
  13. package/dist/button/props.js +3 -0
  14. package/dist/container/container.stories.svelte +52 -0
  15. package/dist/container/container.stories.svelte.d.ts +32 -0
  16. package/dist/container/container.svelte +35 -0
  17. package/dist/container/container.svelte.d.ts +23 -0
  18. package/dist/container/props.d.ts +4 -0
  19. package/dist/container/props.js +2 -0
  20. package/dist/directives/click-outside.d.ts +6 -0
  21. package/dist/directives/click-outside.js +24 -0
  22. package/dist/dropdown/dropdown.stories.svelte +56 -0
  23. package/dist/dropdown/dropdown.stories.svelte.d.ts +23 -0
  24. package/dist/dropdown/dropdown.svelte +171 -0
  25. package/dist/dropdown/dropdown.svelte.d.ts +28 -0
  26. package/dist/error-state/error-state.stories.svelte +18 -0
  27. package/dist/error-state/error-state.stories.svelte.d.ts +23 -0
  28. package/dist/error-state/error-state.svelte +33 -0
  29. package/dist/error-state/error-state.svelte.d.ts +18 -0
  30. package/dist/float/float.svelte +34 -0
  31. package/dist/float/float.svelte.d.ts +22 -0
  32. package/dist/form-item/form-item.svelte +42 -0
  33. package/dist/form-item/form-item.svelte.d.ts +24 -0
  34. package/dist/icon/icon.stories.d.ts +25 -0
  35. package/dist/icon/icon.stories.js +49 -0
  36. package/dist/icon/icon.svelte +67 -0
  37. package/dist/icon/icon.svelte.d.ts +22 -0
  38. package/dist/icon/props.d.ts +2 -0
  39. package/dist/icon/props.js +1 -0
  40. package/dist/icons/arrow-circle-left-large.svg +10 -0
  41. package/dist/icons/arrow-circle-left-medium.svg +3 -0
  42. package/dist/icons/arrow-circle-left-small.svg +10 -0
  43. package/dist/icons/bug-large.svg +3 -0
  44. package/dist/icons/bug-medium.svg +3 -0
  45. package/dist/icons/bug-small.svg +3 -0
  46. package/dist/icons/caret-down-large.svg +0 -0
  47. package/dist/icons/caret-down-medium.svg +3 -0
  48. package/dist/icons/caret-down-small.svg +3 -0
  49. package/dist/icons/microsoft-color-large.svg +6 -0
  50. package/dist/icons/microsoft-color-medium.svg +6 -0
  51. package/dist/icons/microsoft-color-small.svg +6 -0
  52. package/dist/icons/user-story-large.svg +8 -0
  53. package/dist/icons/user-story-medium.svg +8 -0
  54. package/dist/icons/user-story-small.svg +8 -0
  55. package/dist/index.d.ts +2 -0
  56. package/dist/index.js +3 -0
  57. package/dist/input/input.stories.svelte +28 -0
  58. package/dist/input/input.stories.svelte.d.ts +23 -0
  59. package/dist/input/input.svelte +112 -0
  60. package/dist/input/input.svelte.d.ts +108 -0
  61. package/dist/progress/progress-ring.stories.svelte +27 -0
  62. package/dist/progress/progress-ring.stories.svelte.d.ts +28 -0
  63. package/dist/progress/progress-ring.svelte +78 -0
  64. package/dist/progress/progress-ring.svelte.d.ts +19 -0
  65. package/dist/progress/props.d.ts +2 -0
  66. package/dist/progress/props.js +1 -0
  67. package/dist/skeleton/skeleton.stories.svelte +22 -0
  68. package/dist/skeleton/skeleton.stories.svelte.d.ts +30 -0
  69. package/dist/skeleton/skeleton.svelte +23 -0
  70. package/dist/skeleton/skeleton.svelte.d.ts +19 -0
  71. package/dist/svgs/error-state-dark.svg +26 -0
  72. package/dist/svgs/error-state-light.svg +26 -0
  73. package/dist/svgs/zero-state-dark.svg +9 -0
  74. package/dist/svgs/zero-state-light.svg +9 -0
  75. package/dist/tokens/_variables.css +422 -0
  76. package/dist/utilities/wait-for-elm.d.ts +1 -0
  77. package/dist/utilities/wait-for-elm.js +17 -0
  78. package/dist/zero-state/zero-state.stories.svelte +18 -0
  79. package/dist/zero-state/zero-state.stories.svelte.d.ts +23 -0
  80. package/dist/zero-state/zero-state.svelte +34 -0
  81. package/dist/zero-state/zero-state.svelte.d.ts +18 -0
  82. package/package.json +97 -0
@@ -0,0 +1,422 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Mon Jul 01 2024 01:09:59 GMT+0000 (Coordinated Universal Time)
4
+ */
5
+
6
+ :root {
7
+ --aura-display1: 600 52px/62.4px Roboto;
8
+ --aura-display2: 600 36px/43.2px Roboto;
9
+ --aura-h1: 600 32px/38.4px Roboto;
10
+ --aura-h2: 600 28px/33.6px Roboto;
11
+ --aura-h3: 600 22px/26.4px Roboto;
12
+ --aura-h4: 600 16px/19.2px Roboto;
13
+ --aura-default-regular: 300 14px/16.8px Roboto;
14
+ --aura-default-semibold: 500 14px/16.8px Roboto;
15
+ --aura-button-default: 600 18px/21.6px Roboto;
16
+ --aura-button-small: 600 14px/16.8px Roboto;
17
+ --aura-tea-rose-red: #e6b3b3ff;
18
+ --aura-white-smoke: #f5f5f5ff;
19
+ --aura-erie-black: #1f1f1fff;
20
+ --aura-vista-blue: #8195bbff;
21
+ --aura-picton-blue: #00a5f0ff;
22
+ --aura-light-red: #ff6b6bff;
23
+ --aura-button-border-radius: 5px;
24
+ --aura-button-default-padding-horizontal: 24px;
25
+ --aura-button-default-padding-vertical: 12px;
26
+ --aura-button-small-padding-horizontal: 16px;
27
+ --aura-button-small-padding-vertical: 6px;
28
+ --aura-icon-small-size: 14px;
29
+ --aura-icon-medium-size: 18px;
30
+ --aura-icon-large-size: 24px;
31
+ --aura-progress-ring-diameter: 48px;
32
+ --aura-progress-ring-stroke: 4px;
33
+ --aura-progress-ring-spin-rate: 1s;
34
+ --aura-progress-ring-transition-time: 0.2s;
35
+ --aura-progress-ring-arc-size: 0.25;
36
+ --aura-container-border-radius: 10px;
37
+ --aura-container-padding: 20px;
38
+ --aura-form-item-border-radius: 5px;
39
+ --aura-form-item-color: #1f1f1fff;
40
+ --aura-form-item-border-color: #cdd5e4ff;
41
+ --aura-form-item-hover-border-color: #a7b5cfff;
42
+ --aura-form-item-active-border-color: #00a5f0ff;
43
+ --aura-form-item-effect-drop-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.05);
44
+ --aura-form-item-background-color: #ffffffff;
45
+ --aura-form-item-error-border-color: #ff6b6bff;
46
+ --aura-form-item-error-text-color: #ff6b6bff;
47
+ --aura-form-item-horizontal-padding: 10px;
48
+ --aura-form-item-vertical-padding: 8px;
49
+ --aura-menu-border-radius: 5px;
50
+ --aura-menu-drop-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.10);
51
+ --aura-menu-background-color: #ffffffff;
52
+ --aura-menu-border-color: #cdd5e4ff;
53
+ --aura-menu-margin-top: 8px;
54
+ --aura-menu-padding: 4px;
55
+ --aura-dropdown-option-border-radius: 5px;
56
+ --aura-dropdown-option-color: #1f1f1fff;
57
+ --aura-dropdown-open-icon-color: #c1c2c4ff;
58
+ --aura-dropdown-option-hover-background: #dfe0e1ff;
59
+ --aura-dropdown-option-active-background: #e5f6fdff;
60
+ --aura-dropdown-option-active-color: #00a5f0ff;
61
+ --aura-dropdown-option-padding: 6px;
62
+ --aura-alert-border-radius: 5px;
63
+ --aura-alert-padding-horizontal: 16px;
64
+ --aura-alert-padding-vertical: 12px;
65
+ --aura-alert-drop-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 0.20); --aura-light-primary-10: #f5e1e1ff;
66
+ --aura-light-primary-20: #eecacaff;
67
+ --aura-light-primary-30: #e6b3b3ff;
68
+ --aura-light-primary-40: #cd6868ff;
69
+ --aura-light-primary-50: #ae0a0aff;
70
+ --aura-light-primary-60: #8d0000ff;
71
+ --aura-light-primary-70: #3e0000ff;
72
+ --aura-light-secondary-10: #cdd5e4ff;
73
+ --aura-light-secondary-20: #a7b5cfff;
74
+ --aura-light-secondary-30: #8195bbff;
75
+ --aura-light-secondary-40: #5e78a8ff;
76
+ --aura-light-secondary-50: #4f6ba0ff;
77
+ --aura-light-secondary-60: #244789ff;
78
+ --aura-light-secondary-70: #0a317bff;
79
+ --aura-light-tertiary-10: #dfe0e1ff;
80
+ --aura-light-tertiary-20: #c1c2c4ff;
81
+ --aura-light-tertiary-30: #a3a4a7ff;
82
+ --aura-light-tertiary-40: #84868aff;
83
+ --aura-light-tertiary-50: #66686dff;
84
+ --aura-light-tertiary-60: #474a50ff;
85
+ --aura-light-tertiary-70: #292c33ff;
86
+ --aura-light-font-color: #1f1f1fff;
87
+ --aura-light-highlight: #00a5f0ff;
88
+ --aura-light-error: #ff6b6bff;
89
+ --aura-light-informational-10: #99dbf9ff;
90
+ --aura-light-informational-20: #4dc0f5ff;
91
+ --aura-light-informational-30: #00a5f0ff;
92
+ --aura-light-informational-40: #006eb9ff;
93
+ --aura-light-informational-50: #005da8ff;
94
+ --aura-light-informational-60: #003984ff;
95
+ --aura-light-informational-70: #002974ff;
96
+ --aura-light-error-10: #ffc4c4ff;
97
+ --aura-light-error-20: #ff9797ff;
98
+ --aura-light-error-30: #ff6b6bff;
99
+ --aura-light-error-40: #c83434ff;
100
+ --aura-light-error-50: #b72323ff;
101
+ --aura-light-error-60: #930000ff;
102
+ --aura-light-error-70: #830000ff;
103
+ --aura-light-success-10: #cff0d1ff;
104
+ --aura-light-success-20: #abe4afff;
105
+ --aura-light-success-30: #87d98cff;
106
+ --aura-light-success-40: #50a255ff;
107
+ --aura-light-success-50: #3f9144ff;
108
+ --aura-light-success-60: #1b6d20ff;
109
+ --aura-light-success-70: #0b5d10ff;
110
+ --aura-light-warning-10: #ffebbaff;
111
+ --aura-light-warning-20: #ffdd86ff;
112
+ --aura-light-warning-30: #ffce52ff;
113
+ --aura-light-warning-40: #c8971bff;
114
+ --aura-light-warning-50: #b7860aff;
115
+ --aura-light-warning-60: #936200ff;
116
+ --aura-light-warning-70: #835200ff;
117
+ --aura-light-background: #f5f5f5ff;
118
+ --aura-light-container-drop-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.10);
119
+ --aura-light-container-background: #ffffffff;
120
+ --aura-light-container-border-color: #c1c2c4ff;
121
+ --aura-light-label-text-color: #292c33ff; --aura-dark-primary-70: #f5e1e1ff;
122
+ --aura-dark-primary-60: #eecacaff;
123
+ --aura-dark-primary-50: #e6b3b3ff;
124
+ --aura-dark-primary-40: #cd6868ff;
125
+ --aura-dark-primary-30: #ae0a0aff;
126
+ --aura-dark-primary-20: #8d0000ff;
127
+ --aura-dark-primary-10: #3e0000ff;
128
+ --aura-dark-secondary-70: #cdd5e4ff;
129
+ --aura-dark-secondary-60: #a7b5cfff;
130
+ --aura-dark-secondary-50: #8195bbff;
131
+ --aura-dark-secondary-40: #5e78a8ff;
132
+ --aura-dark-secondary-30: #4f6ba0ff;
133
+ --aura-dark-secondary-20: #244789ff;
134
+ --aura-dark-secondary-10: #0a317bff;
135
+ --aura-dark-tertiary-70: #b0b1b4ff;
136
+ --aura-dark-tertiary-60: #9a9c9fff;
137
+ --aura-dark-tertiary-50: #898b8fff;
138
+ --aura-dark-tertiary-40: #74767aff;
139
+ --aura-dark-tertiary-30: #66686dff;
140
+ --aura-dark-tertiary-20: #474a50ff;
141
+ --aura-dark-tertiary-10: #292c33ff;
142
+ --aura-dark-font-color: #f5f5f5ff;
143
+ --aura-dark-highlight: #00a5f0ff;
144
+ --aura-dark-error: #e32a2aff;
145
+ --aura-dark-informational-70: #99dbf9ff;
146
+ --aura-dark-informational-60: #4dc0f5ff;
147
+ --aura-dark-informational-50: #00a5f0ff;
148
+ --aura-dark-informational-40: #006eb9ff;
149
+ --aura-dark-informational-30: #005da8ff;
150
+ --aura-dark-informational-20: #003984ff;
151
+ --aura-dark-informational-10: #002974ff;
152
+ --aura-dark-error-70: #ffc4c4ff;
153
+ --aura-dark-error-60: #ff9797ff;
154
+ --aura-dark-error-50: #ff6b6bff;
155
+ --aura-dark-error-40: #c83434ff;
156
+ --aura-dark-error-30: #b72323ff;
157
+ --aura-dark-error-20: #930000ff;
158
+ --aura-dark-error-10: #830000ff;
159
+ --aura-dark-success-70: #cff0d1ff;
160
+ --aura-dark-success-60: #abe4afff;
161
+ --aura-dark-success-50: #87d98cff;
162
+ --aura-dark-success-40: #50a255ff;
163
+ --aura-dark-success-30: #3f9144ff;
164
+ --aura-dark-success-20: #1b6d20ff;
165
+ --aura-dark-success-10: #0b5d10ff;
166
+ --aura-dark-warning-70: #ffebbaff;
167
+ --aura-dark-warning-60: #ffdd86ff;
168
+ --aura-dark-warning-50: #ffce52ff;
169
+ --aura-dark-warning-40: #c8971bff;
170
+ --aura-dark-warning-30: #b7860aff;
171
+ --aura-dark-warning-20: #936200ff;
172
+ --aura-dark-warning-10: #835200ff;
173
+ --aura-dark-background: #1f1f1fff;
174
+ --aura-dark-container-drop-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.50);
175
+ --aura-dark-container-background: #898b8fff;
176
+ --aura-dark-container-border-color: #c1c2c4ff;
177
+ --aura-dark-label-text-color: #b0b1b4ff;
178
+ }
179
+
180
+ @media (prefers-color-scheme: light) {
181
+ :root {
182
+ --aura-primary-10: #f5e1e1ff;
183
+ --aura-primary-20: #eecacaff;
184
+ --aura-primary-30: #e6b3b3ff;
185
+ --aura-primary-40: #cd6868ff;
186
+ --aura-primary-50: #ae0a0aff;
187
+ --aura-primary-60: #8d0000ff;
188
+ --aura-primary-70: #3e0000ff;
189
+ --aura-secondary-10: #cdd5e4ff;
190
+ --aura-secondary-20: #a7b5cfff;
191
+ --aura-secondary-30: #8195bbff;
192
+ --aura-secondary-40: #5e78a8ff;
193
+ --aura-secondary-50: #4f6ba0ff;
194
+ --aura-secondary-60: #244789ff;
195
+ --aura-secondary-70: #0a317bff;
196
+ --aura-tertiary-10: #dfe0e1ff;
197
+ --aura-tertiary-20: #c1c2c4ff;
198
+ --aura-tertiary-30: #a3a4a7ff;
199
+ --aura-tertiary-40: #84868aff;
200
+ --aura-tertiary-50: #66686dff;
201
+ --aura-tertiary-60: #474a50ff;
202
+ --aura-tertiary-70: #292c33ff;
203
+ --aura-font-color: #1f1f1fff;
204
+ --aura-highlight: #00a5f0ff;
205
+ --aura-error: #ff6b6bff;
206
+ --aura-informational-10: #99dbf9ff;
207
+ --aura-informational-20: #4dc0f5ff;
208
+ --aura-informational-30: #00a5f0ff;
209
+ --aura-informational-40: #006eb9ff;
210
+ --aura-informational-50: #005da8ff;
211
+ --aura-informational-60: #003984ff;
212
+ --aura-informational-70: #002974ff;
213
+ --aura-error-10: #ffc4c4ff;
214
+ --aura-error-20: #ff9797ff;
215
+ --aura-error-30: #ff6b6bff;
216
+ --aura-error-40: #c83434ff;
217
+ --aura-error-50: #b72323ff;
218
+ --aura-error-60: #930000ff;
219
+ --aura-error-70: #830000ff;
220
+ --aura-success-10: #cff0d1ff;
221
+ --aura-success-20: #abe4afff;
222
+ --aura-success-30: #87d98cff;
223
+ --aura-success-40: #50a255ff;
224
+ --aura-success-50: #3f9144ff;
225
+ --aura-success-60: #1b6d20ff;
226
+ --aura-success-70: #0b5d10ff;
227
+ --aura-warning-10: #ffebbaff;
228
+ --aura-warning-20: #ffdd86ff;
229
+ --aura-warning-30: #ffce52ff;
230
+ --aura-warning-40: #c8971bff;
231
+ --aura-warning-50: #b7860aff;
232
+ --aura-warning-60: #936200ff;
233
+ --aura-warning-70: #835200ff;
234
+ --aura-background: #f5f5f5ff;
235
+ --aura-container-drop-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.10);
236
+ --aura-container-background: #ffffffff;
237
+ --aura-container-border-color: #c1c2c4ff;
238
+ --aura-label-text-color: #292c33ff;
239
+ }
240
+ }
241
+
242
+ @media (prefers-color-scheme: dark) {
243
+ :root {
244
+ --aura-primary-70: #f5e1e1ff;
245
+ --aura-primary-60: #eecacaff;
246
+ --aura-primary-50: #e6b3b3ff;
247
+ --aura-primary-40: #cd6868ff;
248
+ --aura-primary-30: #ae0a0aff;
249
+ --aura-primary-20: #8d0000ff;
250
+ --aura-primary-10: #3e0000ff;
251
+ --aura-secondary-70: #cdd5e4ff;
252
+ --aura-secondary-60: #a7b5cfff;
253
+ --aura-secondary-50: #8195bbff;
254
+ --aura-secondary-40: #5e78a8ff;
255
+ --aura-secondary-30: #4f6ba0ff;
256
+ --aura-secondary-20: #244789ff;
257
+ --aura-secondary-10: #0a317bff;
258
+ --aura-tertiary-70: #b0b1b4ff;
259
+ --aura-tertiary-60: #9a9c9fff;
260
+ --aura-tertiary-50: #898b8fff;
261
+ --aura-tertiary-40: #74767aff;
262
+ --aura-tertiary-30: #66686dff;
263
+ --aura-tertiary-20: #474a50ff;
264
+ --aura-tertiary-10: #292c33ff;
265
+ --aura-font-color: #f5f5f5ff;
266
+ --aura-highlight: #00a5f0ff;
267
+ --aura-error: #e32a2aff;
268
+ --aura-informational-70: #99dbf9ff;
269
+ --aura-informational-60: #4dc0f5ff;
270
+ --aura-informational-50: #00a5f0ff;
271
+ --aura-informational-40: #006eb9ff;
272
+ --aura-informational-30: #005da8ff;
273
+ --aura-informational-20: #003984ff;
274
+ --aura-informational-10: #002974ff;
275
+ --aura-error-70: #ffc4c4ff;
276
+ --aura-error-60: #ff9797ff;
277
+ --aura-error-50: #ff6b6bff;
278
+ --aura-error-40: #c83434ff;
279
+ --aura-error-30: #b72323ff;
280
+ --aura-error-20: #930000ff;
281
+ --aura-error-10: #830000ff;
282
+ --aura-success-70: #cff0d1ff;
283
+ --aura-success-60: #abe4afff;
284
+ --aura-success-50: #87d98cff;
285
+ --aura-success-40: #50a255ff;
286
+ --aura-success-30: #3f9144ff;
287
+ --aura-success-20: #1b6d20ff;
288
+ --aura-success-10: #0b5d10ff;
289
+ --aura-warning-70: #ffebbaff;
290
+ --aura-warning-60: #ffdd86ff;
291
+ --aura-warning-50: #ffce52ff;
292
+ --aura-warning-40: #c8971bff;
293
+ --aura-warning-30: #b7860aff;
294
+ --aura-warning-20: #936200ff;
295
+ --aura-warning-10: #835200ff;
296
+ --aura-background: #1f1f1fff;
297
+ --aura-container-drop-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.50);
298
+ --aura-container-background: #898b8fff;
299
+ --aura-container-border-color: #c1c2c4ff;
300
+ --aura-label-text-color: #b0b1b4ff;
301
+ }
302
+ }
303
+
304
+ [data-theme="light"] {
305
+ --aura-primary-10: #f5e1e1ff;
306
+ --aura-primary-20: #eecacaff;
307
+ --aura-primary-30: #e6b3b3ff;
308
+ --aura-primary-40: #cd6868ff;
309
+ --aura-primary-50: #ae0a0aff;
310
+ --aura-primary-60: #8d0000ff;
311
+ --aura-primary-70: #3e0000ff;
312
+ --aura-secondary-10: #cdd5e4ff;
313
+ --aura-secondary-20: #a7b5cfff;
314
+ --aura-secondary-30: #8195bbff;
315
+ --aura-secondary-40: #5e78a8ff;
316
+ --aura-secondary-50: #4f6ba0ff;
317
+ --aura-secondary-60: #244789ff;
318
+ --aura-secondary-70: #0a317bff;
319
+ --aura-tertiary-10: #dfe0e1ff;
320
+ --aura-tertiary-20: #c1c2c4ff;
321
+ --aura-tertiary-30: #a3a4a7ff;
322
+ --aura-tertiary-40: #84868aff;
323
+ --aura-tertiary-50: #66686dff;
324
+ --aura-tertiary-60: #474a50ff;
325
+ --aura-tertiary-70: #292c33ff;
326
+ --aura-font-color: #1f1f1fff;
327
+ --aura-highlight: #00a5f0ff;
328
+ --aura-error: #ff6b6bff;
329
+ --aura-informational-10: #99dbf9ff;
330
+ --aura-informational-20: #4dc0f5ff;
331
+ --aura-informational-30: #00a5f0ff;
332
+ --aura-informational-40: #006eb9ff;
333
+ --aura-informational-50: #005da8ff;
334
+ --aura-informational-60: #003984ff;
335
+ --aura-informational-70: #002974ff;
336
+ --aura-error-10: #ffc4c4ff;
337
+ --aura-error-20: #ff9797ff;
338
+ --aura-error-30: #ff6b6bff;
339
+ --aura-error-40: #c83434ff;
340
+ --aura-error-50: #b72323ff;
341
+ --aura-error-60: #930000ff;
342
+ --aura-error-70: #830000ff;
343
+ --aura-success-10: #cff0d1ff;
344
+ --aura-success-20: #abe4afff;
345
+ --aura-success-30: #87d98cff;
346
+ --aura-success-40: #50a255ff;
347
+ --aura-success-50: #3f9144ff;
348
+ --aura-success-60: #1b6d20ff;
349
+ --aura-success-70: #0b5d10ff;
350
+ --aura-warning-10: #ffebbaff;
351
+ --aura-warning-20: #ffdd86ff;
352
+ --aura-warning-30: #ffce52ff;
353
+ --aura-warning-40: #c8971bff;
354
+ --aura-warning-50: #b7860aff;
355
+ --aura-warning-60: #936200ff;
356
+ --aura-warning-70: #835200ff;
357
+ --aura-background: #f5f5f5ff;
358
+ --aura-container-drop-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.10);
359
+ --aura-container-background: #ffffffff;
360
+ --aura-container-border-color: #c1c2c4ff;
361
+ --aura-label-text-color: #292c33ff;
362
+ }
363
+
364
+ [data-theme="dark"] {
365
+ --aura-primary-70: #f5e1e1ff;
366
+ --aura-primary-60: #eecacaff;
367
+ --aura-primary-50: #e6b3b3ff;
368
+ --aura-primary-40: #cd6868ff;
369
+ --aura-primary-30: #ae0a0aff;
370
+ --aura-primary-20: #8d0000ff;
371
+ --aura-primary-10: #3e0000ff;
372
+ --aura-secondary-70: #cdd5e4ff;
373
+ --aura-secondary-60: #a7b5cfff;
374
+ --aura-secondary-50: #8195bbff;
375
+ --aura-secondary-40: #5e78a8ff;
376
+ --aura-secondary-30: #4f6ba0ff;
377
+ --aura-secondary-20: #244789ff;
378
+ --aura-secondary-10: #0a317bff;
379
+ --aura-tertiary-70: #b0b1b4ff;
380
+ --aura-tertiary-60: #9a9c9fff;
381
+ --aura-tertiary-50: #898b8fff;
382
+ --aura-tertiary-40: #74767aff;
383
+ --aura-tertiary-30: #66686dff;
384
+ --aura-tertiary-20: #474a50ff;
385
+ --aura-tertiary-10: #292c33ff;
386
+ --aura-font-color: #f5f5f5ff;
387
+ --aura-highlight: #00a5f0ff;
388
+ --aura-error: #e32a2aff;
389
+ --aura-informational-70: #99dbf9ff;
390
+ --aura-informational-60: #4dc0f5ff;
391
+ --aura-informational-50: #00a5f0ff;
392
+ --aura-informational-40: #006eb9ff;
393
+ --aura-informational-30: #005da8ff;
394
+ --aura-informational-20: #003984ff;
395
+ --aura-informational-10: #002974ff;
396
+ --aura-error-70: #ffc4c4ff;
397
+ --aura-error-60: #ff9797ff;
398
+ --aura-error-50: #ff6b6bff;
399
+ --aura-error-40: #c83434ff;
400
+ --aura-error-30: #b72323ff;
401
+ --aura-error-20: #930000ff;
402
+ --aura-error-10: #830000ff;
403
+ --aura-success-70: #cff0d1ff;
404
+ --aura-success-60: #abe4afff;
405
+ --aura-success-50: #87d98cff;
406
+ --aura-success-40: #50a255ff;
407
+ --aura-success-30: #3f9144ff;
408
+ --aura-success-20: #1b6d20ff;
409
+ --aura-success-10: #0b5d10ff;
410
+ --aura-warning-70: #ffebbaff;
411
+ --aura-warning-60: #ffdd86ff;
412
+ --aura-warning-50: #ffce52ff;
413
+ --aura-warning-40: #c8971bff;
414
+ --aura-warning-30: #b7860aff;
415
+ --aura-warning-20: #936200ff;
416
+ --aura-warning-10: #835200ff;
417
+ --aura-background: #1f1f1fff;
418
+ --aura-container-drop-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.50);
419
+ --aura-container-background: #898b8fff;
420
+ --aura-container-border-color: #c1c2c4ff;
421
+ --aura-label-text-color: #b0b1b4ff;
422
+ }
@@ -0,0 +1 @@
1
+ export declare function waitForElm(selector: string): Promise<unknown>;
@@ -0,0 +1,17 @@
1
+ export function waitForElm(selector) {
2
+ return new Promise((resolve) => {
3
+ if (document.querySelector(selector)) {
4
+ return resolve(document.querySelector(selector));
5
+ }
6
+ const observer = new MutationObserver(() => {
7
+ if (document.querySelector(selector)) {
8
+ observer.disconnect();
9
+ resolve(document.querySelector(selector));
10
+ }
11
+ });
12
+ observer.observe(document.body, {
13
+ childList: true,
14
+ subtree: true
15
+ });
16
+ });
17
+ }
@@ -0,0 +1,18 @@
1
+ <script context="module">import "../../app.scss";
2
+ import ZeroState from "./zero-state.svelte";
3
+ export const meta = {
4
+ title: "AURA/Zero State",
5
+ component: ZeroState,
6
+ tags: ["autodocs"],
7
+ argTypes: {}
8
+ };
9
+ </script>
10
+
11
+ <script>import { Story, Template } from "@storybook/addon-svelte-csf";
12
+ </script>
13
+
14
+ <Template>
15
+ <ZeroState />
16
+ </Template>
17
+
18
+ <Story name="Default ZeroState" />
@@ -0,0 +1,23 @@
1
+ import { SvelteComponent } from "svelte";
2
+ import '../../app.scss';
3
+ export declare const meta: {
4
+ title: string;
5
+ component: typeof ZeroState;
6
+ tags: string[];
7
+ argTypes: {};
8
+ };
9
+ declare const __propDef: {
10
+ props: Record<string, never>;
11
+ events: {
12
+ [evt: string]: CustomEvent<any>;
13
+ };
14
+ slots: {};
15
+ exports?: {} | undefined;
16
+ bindings?: string | undefined;
17
+ };
18
+ export type ZeroStateProps = typeof __propDef.props;
19
+ export type ZeroStateEvents = typeof __propDef.events;
20
+ export type ZeroStateSlots = typeof __propDef.slots;
21
+ export default class ZeroState extends SvelteComponent<ZeroStateProps, ZeroStateEvents, ZeroStateSlots> {
22
+ }
23
+ export {};
@@ -0,0 +1,34 @@
1
+ <script>export let message = "No results";
2
+ </script>
3
+
4
+ <div class="aura-zero-state">
5
+ <div class="zero-state-graphic" />
6
+ <div class="zero-state-message">{message}</div>
7
+ </div>
8
+
9
+ <style>.aura-zero-state {
10
+ width: 300px;
11
+ height: 200px;
12
+ }
13
+ .aura-zero-state .zero-state-graphic {
14
+ width: 100%;
15
+ height: 100%;
16
+ background-image: url(/svgs/zero-state-light.svg);
17
+ background-repeat: no-repeat;
18
+ background-position: center;
19
+ background-size: contain;
20
+ }
21
+ .aura-zero-state .zero-state-message {
22
+ width: 100%;
23
+ margin-top: -30px;
24
+ text-align: center;
25
+ color: var(--aura-light-secondary-50);
26
+ }
27
+
28
+ :global([data-theme="dark"] .zero-state-graphic) {
29
+ background-image: url(/svgs/zero-state-dark.svg) !important;
30
+ }
31
+
32
+ :global([data-theme="dark"] .zero-state-message) {
33
+ color: var(--aura-dark-tertiary-70) !important;
34
+ }</style>
@@ -0,0 +1,18 @@
1
+ import { SvelteComponent } from "svelte";
2
+ declare const __propDef: {
3
+ props: {
4
+ message?: string;
5
+ };
6
+ events: {
7
+ [evt: string]: CustomEvent<any>;
8
+ };
9
+ slots: {};
10
+ exports?: {} | undefined;
11
+ bindings?: string | undefined;
12
+ };
13
+ export type ZeroStateProps = typeof __propDef.props;
14
+ export type ZeroStateEvents = typeof __propDef.events;
15
+ export type ZeroStateSlots = typeof __propDef.slots;
16
+ export default class ZeroState extends SvelteComponent<ZeroStateProps, ZeroStateEvents, ZeroStateSlots> {
17
+ }
18
+ export {};
package/package.json ADDED
@@ -0,0 +1,97 @@
1
+ {
2
+ "name": "@awenovations/aura",
3
+ "version": "0.0.1",
4
+ "scripts": {
5
+ "dev": "vite dev",
6
+ "build": "npm run transform-tokens && vite build && npm run package",
7
+ "preview": "vite preview",
8
+ "copy-icons": "cp -rf icons dist/icons",
9
+ "copy-svgs": "cp -rf svgs dist/svgs",
10
+ "package": "svelte-kit sync && svelte-package && cp -rf tokens dist/tokens && npm run copy-icons && npm run copy-svgs && publint",
11
+ "prepublishOnly": "npm run package",
12
+ "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
13
+ "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
14
+ "lint": "prettier --check . && eslint .",
15
+ "format": "prettier --write .",
16
+ "transform-tokens": "node ./src/tokens/transform-tokens.js",
17
+ "storybook": "npm run transform-tokens && storybook dev -p 6006",
18
+ "build-storybook": "npm run transform-tokens && storybook build",
19
+ "replace-icons": "replace-in-file //icons//g ../icons/ docs/**/*.* --isRegex",
20
+ "replace-svgs": "replace-in-file //svgs//g ../svgs/ docs/**/*.* --isRegex",
21
+ "build-storybook-for-pages": "rimraf docs && npm run transform-tokens && storybook build --output-dir docs && npm run replace-icons &&npm run replace-svgs && touch docs/.nojekyll"
22
+ },
23
+ "exports": {
24
+ ".": {
25
+ "types": "./dist/index.d.ts",
26
+ "svelte": "./dist/index.js"
27
+ },
28
+ "./package.json": "./package.json",
29
+ "./button.svelte": "./dist/button/button.svelte",
30
+ "./icon.svelte": "./dist/icon/icon.svelte",
31
+ "./container.svelte": "./dist/container/container.svelte",
32
+ "./dropdown.svelte": "./dist/dropdown/dropdown.svelte",
33
+ "./form-item.svelte": "./dist/form-item/form-item.svelte",
34
+ "./zero-state.svelte": "./dist/zero-state/zero-state.svelte",
35
+ "./error-state.svelte": "./dist/error-state/error-state.svelte",
36
+ "./float.svelte": "./dist/float/float.svelte",
37
+ "./input.svelte": "./dist/input/input.svelte",
38
+ "./progress-ring.svelte": "./dist/progress/progress-ring.svelte",
39
+ "./skeleton.svelte": "./dist/skeleton/skeleton.svelte",
40
+ "./alert.svelte": "./dist/alert/alert.svelte",
41
+ "./dist/tokens/_variables.css": {
42
+ "import": "./dist/tokens/_variables.css",
43
+ "require": "./dist/tokens/_variables.css"
44
+ }
45
+ },
46
+ "files": [
47
+ "dist",
48
+ "!dist/**/*.test.*",
49
+ "!dist/**/*.spec.*"
50
+ ],
51
+ "peerDependencies": {
52
+ "svelte": "^4.0.0"
53
+ },
54
+ "devDependencies": {
55
+ "@storybook/addon-essentials": "^8.1.11",
56
+ "@storybook/addon-interactions": "^8.1.11",
57
+ "@storybook/addon-links": "^8.1.11",
58
+ "@storybook/blocks": "^8.1.11",
59
+ "@storybook/svelte": "^8.1.11",
60
+ "@storybook/sveltekit": "^8.1.11",
61
+ "@storybook/test": "^8.1.11",
62
+ "@sveltejs/adapter-auto": "^3.2.2",
63
+ "@sveltejs/kit": "^2.5.18",
64
+ "@sveltejs/package": "^2.3.2",
65
+ "@sveltejs/vite-plugin-svelte": "^3.1.1",
66
+ "@typescript-eslint/eslint-plugin": "^7.14.1",
67
+ "@typescript-eslint/parser": "^7.14.1",
68
+ "eslint": "^9.6.0",
69
+ "eslint-config-prettier": "^9.1.0",
70
+ "eslint-plugin-storybook": "^0.8.0",
71
+ "eslint-plugin-svelte": "^2.41.0",
72
+ "prettier": "^3.3.2",
73
+ "prettier-plugin-svelte": "^3.2.5",
74
+ "publint": "^0.2.8",
75
+ "react": "^18.3.1",
76
+ "react-dom": "^18.3.1",
77
+ "rimraf": "^5.0.7",
78
+ "sass": "^1.77.6",
79
+ "storybook": "^8.1.11",
80
+ "style-dictionary": "^3.9.1",
81
+ "style-dictionary-utils": "^2.4.1",
82
+ "svelte": "^4.2.18",
83
+ "svelte-check": "^3.8.4",
84
+ "tslib": "^2.6.3",
85
+ "typescript": "^5.5.2",
86
+ "vite": "^5.3.2"
87
+ },
88
+ "svelte": "./dist/index.js",
89
+ "types": "./dist/index.d.ts",
90
+ "type": "module",
91
+ "dependencies": {
92
+ "@floating-ui/dom": "^1.6.6",
93
+ "@storybook/addon-svelte-csf": "^4.1.3",
94
+ "@storybook/addon-themes": "^8.1.11",
95
+ "replace-in-file": "^8.0.1"
96
+ }
97
+ }