@placeholderco/placeholder-ui 1.0.5 → 1.0.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.
- package/dist/styles/tokens.css +6 -0
- package/dist/ui/Badge.svelte +50 -0
- package/dist/ui/Button.svelte +62 -0
- package/dist/ui/ButtonVariant.d.ts +1 -1
- package/package.json +1 -1
package/dist/styles/tokens.css
CHANGED
|
@@ -37,11 +37,17 @@
|
|
|
37
37
|
|
|
38
38
|
--pui-color-warning: #fcc419;
|
|
39
39
|
--pui-color-warning-hover: #fab005;
|
|
40
|
+
--pui-color-warning-active: #f59f00;
|
|
40
41
|
--pui-color-warning-dark: #e8b508;
|
|
42
|
+
--pui-color-warning-subtle: rgba(252, 196, 25, 0.12);
|
|
43
|
+
--pui-color-warning-subtle-dark: rgba(252, 196, 25, 0.2);
|
|
41
44
|
|
|
42
45
|
--pui-color-success: #37b24d;
|
|
43
46
|
--pui-color-success-hover: #2f9e44;
|
|
47
|
+
--pui-color-success-active: #2b8a3e;
|
|
44
48
|
--pui-color-success-dark: #2b8a3e;
|
|
49
|
+
--pui-color-success-subtle: rgba(55, 178, 77, 0.12);
|
|
50
|
+
--pui-color-success-subtle-dark: rgba(55, 178, 77, 0.2);
|
|
45
51
|
|
|
46
52
|
--pui-color-info: #1c7ed6;
|
|
47
53
|
--pui-color-info-hover: #1971c2;
|
package/dist/ui/Badge.svelte
CHANGED
|
@@ -215,6 +215,46 @@
|
|
|
215
215
|
--badge-border-color: var(--pui-color-accent-dark);
|
|
216
216
|
}
|
|
217
217
|
|
|
218
|
+
.success {
|
|
219
|
+
--badge-text-color: var(--pui-color-white);
|
|
220
|
+
--badge-bg-color: var(--pui-color-success);
|
|
221
|
+
--badge-hover-bg-color: var(--pui-color-success-hover);
|
|
222
|
+
--badge-outline-color: var(--pui-color-success);
|
|
223
|
+
--badge-border-color: var(--pui-color-success-hover);
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
.success :global(.loader) {
|
|
227
|
+
color: var(--pui-color-white);
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
.success-subtle {
|
|
231
|
+
--badge-text-color: var(--pui-color-success);
|
|
232
|
+
--badge-bg-color: var(--pui-color-success-subtle);
|
|
233
|
+
--badge-hover-bg-color: var(--pui-color-success-subtle-dark);
|
|
234
|
+
--badge-outline-color: var(--pui-color-success);
|
|
235
|
+
--badge-border-color: var(--pui-color-success);
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
.warning {
|
|
239
|
+
--badge-text-color: var(--pui-color-black);
|
|
240
|
+
--badge-bg-color: var(--pui-color-warning);
|
|
241
|
+
--badge-hover-bg-color: var(--pui-color-warning-hover);
|
|
242
|
+
--badge-outline-color: var(--pui-color-warning);
|
|
243
|
+
--badge-border-color: var(--pui-color-warning-hover);
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
.warning :global(.loader) {
|
|
247
|
+
color: var(--pui-color-black);
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
.warning-subtle {
|
|
251
|
+
--badge-text-color: var(--pui-color-warning-dark);
|
|
252
|
+
--badge-bg-color: var(--pui-color-warning-subtle);
|
|
253
|
+
--badge-hover-bg-color: var(--pui-color-warning-subtle-dark);
|
|
254
|
+
--badge-outline-color: var(--pui-color-warning);
|
|
255
|
+
--badge-border-color: var(--pui-color-warning);
|
|
256
|
+
}
|
|
257
|
+
|
|
218
258
|
button,
|
|
219
259
|
a,
|
|
220
260
|
div {
|
|
@@ -259,6 +299,16 @@
|
|
|
259
299
|
--badge-hover-bg-color: var(--pui-color-primary);
|
|
260
300
|
--badge-outline-color: var(--pui-color-secondary);
|
|
261
301
|
}
|
|
302
|
+
|
|
303
|
+
.success-subtle {
|
|
304
|
+
--badge-bg-color: var(--pui-color-success-subtle-dark);
|
|
305
|
+
--badge-hover-bg-color: rgba(55, 178, 77, 0.3);
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
.warning-subtle {
|
|
309
|
+
--badge-bg-color: var(--pui-color-warning-subtle-dark);
|
|
310
|
+
--badge-hover-bg-color: rgba(252, 196, 25, 0.3);
|
|
311
|
+
}
|
|
262
312
|
}
|
|
263
313
|
|
|
264
314
|
.disabled {
|
package/dist/ui/Button.svelte
CHANGED
|
@@ -268,6 +268,56 @@
|
|
|
268
268
|
}
|
|
269
269
|
}
|
|
270
270
|
|
|
271
|
+
.success {
|
|
272
|
+
--button-text-color: var(--pui-color-white);
|
|
273
|
+
--button-bg-color: var(--pui-color-success);
|
|
274
|
+
--button-hover-bg-color: var(--pui-color-success-hover);
|
|
275
|
+
--button-active-bg-color: var(--pui-color-success-active);
|
|
276
|
+
--button-outline-color: var(--pui-color-success);
|
|
277
|
+
|
|
278
|
+
:global(.loader) {
|
|
279
|
+
color: var(--pui-color-white);
|
|
280
|
+
}
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
.success-subtle {
|
|
284
|
+
background-color: initial;
|
|
285
|
+
color: var(--pui-color-success);
|
|
286
|
+
|
|
287
|
+
&:hover:not(:disabled) {
|
|
288
|
+
background-color: var(--pui-color-success-subtle);
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
:global(.loader) {
|
|
292
|
+
color: var(--pui-color-success);
|
|
293
|
+
}
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
.warning {
|
|
297
|
+
--button-text-color: var(--pui-color-black);
|
|
298
|
+
--button-bg-color: var(--pui-color-warning);
|
|
299
|
+
--button-hover-bg-color: var(--pui-color-warning-hover);
|
|
300
|
+
--button-active-bg-color: var(--pui-color-warning-active);
|
|
301
|
+
--button-outline-color: var(--pui-color-warning);
|
|
302
|
+
|
|
303
|
+
:global(.loader) {
|
|
304
|
+
color: var(--pui-color-black);
|
|
305
|
+
}
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
.warning-subtle {
|
|
309
|
+
background-color: initial;
|
|
310
|
+
color: var(--pui-color-warning-dark);
|
|
311
|
+
|
|
312
|
+
&:hover:not(:disabled) {
|
|
313
|
+
background-color: var(--pui-color-warning-subtle);
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
:global(.loader) {
|
|
317
|
+
color: var(--pui-color-warning-dark);
|
|
318
|
+
}
|
|
319
|
+
}
|
|
320
|
+
|
|
271
321
|
button,
|
|
272
322
|
a {
|
|
273
323
|
border-color: var(--pui-color-primary);
|
|
@@ -329,6 +379,18 @@
|
|
|
329
379
|
--button-active-bg-color: var(--pui-color-primary);
|
|
330
380
|
--button-outline-color: var(--pui-color-secondary);
|
|
331
381
|
}
|
|
382
|
+
|
|
383
|
+
.success-subtle {
|
|
384
|
+
&:hover:not(:disabled) {
|
|
385
|
+
background-color: var(--pui-color-success-subtle-dark);
|
|
386
|
+
}
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
.warning-subtle {
|
|
390
|
+
&:hover:not(:disabled) {
|
|
391
|
+
background-color: var(--pui-color-warning-subtle-dark);
|
|
392
|
+
}
|
|
393
|
+
}
|
|
332
394
|
}
|
|
333
395
|
|
|
334
396
|
.action-icon {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export type ButtonVariant = 'white' | 'muted' | 'muted-subtle' | 'muted-selected' | 'secondary-selected' | 'danger' | 'danger-subtle' | 'auto-subtle' | 'auto-outline' | 'secondary' | 'secondary-outline' | 'secondary-subtle' | 'primary' | 'primary-outline' | 'primary-subtle' | 'accent' | 'accent-subtle';
|
|
1
|
+
export type ButtonVariant = 'white' | 'muted' | 'muted-subtle' | 'muted-selected' | 'secondary-selected' | 'danger' | 'danger-subtle' | 'auto-subtle' | 'auto-outline' | 'secondary' | 'secondary-outline' | 'secondary-subtle' | 'primary' | 'primary-outline' | 'primary-subtle' | 'accent' | 'accent-subtle' | 'success' | 'success-subtle' | 'warning' | 'warning-subtle';
|