@phcdevworks/spectre-ui 1.2.0 → 1.4.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.
- package/README.md +6 -0
- package/dist/base.css +23 -28
- package/dist/components.css +208 -72
- package/dist/index.cjs +73 -17
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +212 -75
- package/dist/index.d.cts +25 -1
- package/dist/index.d.ts +25 -1
- package/dist/index.js +73 -18
- package/dist/index.js.map +1 -1
- package/dist/utilities.css +19 -25
- package/package.json +18 -15
package/dist/index.css
CHANGED
|
@@ -7,15 +7,18 @@
|
|
|
7
7
|
--sp-surface-card: #ffffff;
|
|
8
8
|
--sp-surface-input: #ffffff;
|
|
9
9
|
--sp-surface-overlay: rgba(20, 27, 36, 0.6);
|
|
10
|
+
--sp-surface-alternate: #eef1f6;
|
|
10
11
|
--sp-surface-hero: linear-gradient(135deg, #5b6ee1 0%, #6f3fd7 100%);
|
|
11
12
|
--sp-text-on-page-default: #141b24;
|
|
12
13
|
--sp-text-on-page-muted: #4b576a;
|
|
13
14
|
--sp-text-on-page-subtle: #657287;
|
|
14
15
|
--sp-text-on-page-meta: #657287;
|
|
16
|
+
--sp-text-on-page-brand: #1f57db;
|
|
15
17
|
--sp-text-on-surface-default: #141b24;
|
|
16
18
|
--sp-text-on-surface-muted: #4b576a;
|
|
17
19
|
--sp-text-on-surface-subtle: #657287;
|
|
18
20
|
--sp-text-on-surface-meta: #657287;
|
|
21
|
+
--sp-text-on-surface-brand: #1f57db;
|
|
19
22
|
--sp-component-card-text: #141b24;
|
|
20
23
|
--sp-component-card-text-muted: #4b576a;
|
|
21
24
|
--sp-component-input-text: #141b24;
|
|
@@ -114,20 +117,8 @@
|
|
|
114
117
|
--sp-color-focus-primary: #336df4;
|
|
115
118
|
--sp-color-focus-error: #ef4444;
|
|
116
119
|
--sp-color-focus-info: #0369a1;
|
|
117
|
-
--sp-color-white
|
|
118
|
-
--sp-color-
|
|
119
|
-
--sp-color-white-2: f;
|
|
120
|
-
--sp-color-white-3: f;
|
|
121
|
-
--sp-color-white-4: f;
|
|
122
|
-
--sp-color-white-5: f;
|
|
123
|
-
--sp-color-white-6: f;
|
|
124
|
-
--sp-color-black-0: #;
|
|
125
|
-
--sp-color-black-1: 0;
|
|
126
|
-
--sp-color-black-2: 0;
|
|
127
|
-
--sp-color-black-3: 0;
|
|
128
|
-
--sp-color-black-4: 0;
|
|
129
|
-
--sp-color-black-5: 0;
|
|
130
|
-
--sp-color-black-6: 0;
|
|
120
|
+
--sp-color-white: #ffffff;
|
|
121
|
+
--sp-color-black: #000000;
|
|
131
122
|
--sp-space-0: 0rem;
|
|
132
123
|
--sp-space-4: 0.25rem;
|
|
133
124
|
--sp-space-8: 0.5rem;
|
|
@@ -221,9 +212,9 @@
|
|
|
221
212
|
--sp-icon-box-icon-warning: #d48806;
|
|
222
213
|
--sp-icon-box-icon-danger: #dc2626;
|
|
223
214
|
--sp-shadow-none: none;
|
|
224
|
-
--sp-shadow-sm: 0 1px 2px 0 rgba(
|
|
225
|
-
--sp-shadow-md: 0 2px 6px -1px rgba(
|
|
226
|
-
--sp-shadow-lg: 0 6px 16px -4px rgba(
|
|
215
|
+
--sp-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
|
216
|
+
--sp-shadow-md: 0 2px 6px -1px rgba(0, 0, 0, 0.08);
|
|
217
|
+
--sp-shadow-lg: 0 6px 16px -4px rgba(0, 0, 0, 0.12);
|
|
227
218
|
--sp-breakpoint-sm: 640px;
|
|
228
219
|
--sp-breakpoint-md: 768px;
|
|
229
220
|
--sp-breakpoint-lg: 1024px;
|
|
@@ -266,7 +257,7 @@
|
|
|
266
257
|
--sp-button-primary-text: #ffffff;
|
|
267
258
|
--sp-button-primary-textdisabled: #8a96ad;
|
|
268
259
|
--sp-button-primary-focusring: rgba(14, 165, 233, 0.4);
|
|
269
|
-
--sp-button-primary-focusvisible:
|
|
260
|
+
--sp-button-primary-focusvisible: rgba(14, 165, 233, 0.4);
|
|
270
261
|
--sp-button-secondary-bg: #ffffff;
|
|
271
262
|
--sp-button-secondary-bghover: #f7f8fb;
|
|
272
263
|
--sp-button-secondary-bgactive: #eef1f6;
|
|
@@ -276,7 +267,7 @@
|
|
|
276
267
|
--sp-button-secondary-border: #075985;
|
|
277
268
|
--sp-button-secondary-borderdisabled: #d9dfeb;
|
|
278
269
|
--sp-button-secondary-focusring: rgba(14, 165, 233, 0.4);
|
|
279
|
-
--sp-button-secondary-focusvisible:
|
|
270
|
+
--sp-button-secondary-focusvisible: rgba(14, 165, 233, 0.4);
|
|
280
271
|
--sp-button-ghost-bg: transparent;
|
|
281
272
|
--sp-button-ghost-bghover: #f0f9ff;
|
|
282
273
|
--sp-button-ghost-bgactive: #e0f2fe;
|
|
@@ -284,7 +275,7 @@
|
|
|
284
275
|
--sp-button-ghost-text: #075985;
|
|
285
276
|
--sp-button-ghost-textdisabled: #8a96ad;
|
|
286
277
|
--sp-button-ghost-focusring: rgba(14, 165, 233, 0.4);
|
|
287
|
-
--sp-button-ghost-focusvisible:
|
|
278
|
+
--sp-button-ghost-focusvisible: rgba(14, 165, 233, 0.4);
|
|
288
279
|
--sp-button-danger-bg: #dc2626;
|
|
289
280
|
--sp-button-danger-bghover: #b91c1c;
|
|
290
281
|
--sp-button-danger-bgactive: #991b1b;
|
|
@@ -314,7 +305,7 @@
|
|
|
314
305
|
--sp-button-accent-text: #ffffff;
|
|
315
306
|
--sp-button-accent-textdisabled: #8a96ad;
|
|
316
307
|
--sp-button-accent-focusring: rgba(133, 79, 247, 0.4);
|
|
317
|
-
--sp-button-accent-focusvisible:
|
|
308
|
+
--sp-button-accent-focusvisible: rgba(133, 79, 247, 0.4);
|
|
318
309
|
--sp-form-default-bg: #ffffff;
|
|
319
310
|
--sp-form-default-border: #b7c1d4;
|
|
320
311
|
--sp-form-default-text: #141b24;
|
|
@@ -322,8 +313,8 @@
|
|
|
322
313
|
--sp-form-hover-border: #0ea5e9;
|
|
323
314
|
--sp-form-focus-border: #0ea5e9;
|
|
324
315
|
--sp-form-focus-ring: #0ea5e9;
|
|
325
|
-
--sp-form-focusvisible-border:
|
|
326
|
-
--sp-form-focusvisible-ring:
|
|
316
|
+
--sp-form-focusvisible-border: #0ea5e9;
|
|
317
|
+
--sp-form-focusvisible-ring: #0ea5e9;
|
|
327
318
|
--sp-form-valid-border: #22c55e;
|
|
328
319
|
--sp-form-valid-bg: #f0fdf4;
|
|
329
320
|
--sp-form-valid-text: #15803d;
|
|
@@ -362,16 +353,19 @@
|
|
|
362
353
|
--sp-surface-page: #141b24;
|
|
363
354
|
--sp-surface-card: #222b38;
|
|
364
355
|
--sp-surface-input: #374253;
|
|
365
|
-
--sp-surface-overlay:
|
|
366
|
-
--sp-surface-
|
|
356
|
+
--sp-surface-overlay: rgba(0, 0, 0, 0.6);
|
|
357
|
+
--sp-surface-alternate: #222b38;
|
|
358
|
+
--sp-surface-hero: linear-gradient(135deg, #5d28b8 0%, #401f75 100%);
|
|
367
359
|
--sp-text-on-page-default: #f7f8fb;
|
|
368
360
|
--sp-text-on-page-muted: #b7c1d4;
|
|
369
361
|
--sp-text-on-page-subtle: #8a96ad;
|
|
370
362
|
--sp-text-on-page-meta: #8a96ad;
|
|
363
|
+
--sp-text-on-page-brand: #5a92ff;
|
|
371
364
|
--sp-text-on-surface-default: #eef1f6;
|
|
372
365
|
--sp-text-on-surface-muted: #b7c1d4;
|
|
373
366
|
--sp-text-on-surface-subtle: #8a96ad;
|
|
374
367
|
--sp-text-on-surface-meta: #8a96ad;
|
|
368
|
+
--sp-text-on-surface-brand: #5a92ff;
|
|
375
369
|
--sp-component-card-text: #eef1f6;
|
|
376
370
|
--sp-component-card-text-muted: #b7c1d4;
|
|
377
371
|
--sp-component-input-text: #eef1f6;
|
|
@@ -403,13 +397,14 @@
|
|
|
403
397
|
box-sizing: border-box;
|
|
404
398
|
}
|
|
405
399
|
|
|
406
|
-
html
|
|
407
|
-
body {
|
|
400
|
+
html {
|
|
408
401
|
margin: 0;
|
|
409
402
|
padding: 0;
|
|
410
403
|
}
|
|
411
404
|
|
|
412
405
|
body {
|
|
406
|
+
margin: 0;
|
|
407
|
+
padding: 0;
|
|
413
408
|
min-height: 100vh;
|
|
414
409
|
font-family: var(--sp-font-family-sans);
|
|
415
410
|
font-size: var(--sp-font-md-size);
|
|
@@ -428,13 +423,13 @@
|
|
|
428
423
|
}
|
|
429
424
|
|
|
430
425
|
input,
|
|
431
|
-
button,
|
|
432
426
|
textarea,
|
|
433
427
|
select {
|
|
434
428
|
font: inherit;
|
|
435
429
|
}
|
|
436
430
|
|
|
437
431
|
button {
|
|
432
|
+
font: inherit;
|
|
438
433
|
border: none;
|
|
439
434
|
background: none;
|
|
440
435
|
padding: 0;
|
|
@@ -462,7 +457,7 @@
|
|
|
462
457
|
}
|
|
463
458
|
@layer components {
|
|
464
459
|
|
|
465
|
-
:root {
|
|
460
|
+
:where(:root) {
|
|
466
461
|
/* structural border width */
|
|
467
462
|
--sp-component-border-width: var(--sp-border-width-base);
|
|
468
463
|
|
|
@@ -518,8 +513,7 @@
|
|
|
518
513
|
|
|
519
514
|
/* card roles */
|
|
520
515
|
--sp-component-card-bg: var(--sp-surface-card);
|
|
521
|
-
--sp-component-card-text
|
|
522
|
-
--sp-component-card-text-muted: var(--sp-text-on-surface-muted);
|
|
516
|
+
/* --sp-component-card-text and --sp-component-card-text-muted are now provided directly by the token package */
|
|
523
517
|
--sp-component-card-border: var(--sp-color-neutral-200);
|
|
524
518
|
--sp-component-card-border-base: var(--sp-component-card-ghost-border);
|
|
525
519
|
--sp-component-card-shadow: var(--sp-shadow-sm);
|
|
@@ -535,8 +529,8 @@
|
|
|
535
529
|
/* input roles */
|
|
536
530
|
--sp-component-input-role-border: var(--sp-form-default-border);
|
|
537
531
|
--sp-component-input-role-bg: var(--sp-form-default-bg);
|
|
538
|
-
--sp-component-input-role-text: var(--sp-
|
|
539
|
-
--sp-component-input-role-placeholder: var(--sp-
|
|
532
|
+
--sp-component-input-role-text: var(--sp-component-input-text);
|
|
533
|
+
--sp-component-input-role-placeholder: var(--sp-component-input-placeholder);
|
|
540
534
|
--sp-component-input-role-border-hover: var(--sp-form-hover-border);
|
|
541
535
|
--sp-component-input-role-border-focus: var(--sp-form-focus-border);
|
|
542
536
|
--sp-component-input-role-ring: var(--sp-form-focus-ring);
|
|
@@ -570,6 +564,8 @@
|
|
|
570
564
|
--sp-component-badge-neutral-text: var(--sp-badge-neutral-text);
|
|
571
565
|
--sp-component-badge-info-bg: var(--sp-badge-info-bg);
|
|
572
566
|
--sp-component-badge-info-text: var(--sp-badge-info-text);
|
|
567
|
+
--sp-component-badge-ghost-bg: var(--sp-button-ghost-bg);
|
|
568
|
+
--sp-component-badge-ghost-text: var(--sp-button-ghost-text);
|
|
573
569
|
|
|
574
570
|
/* badge hover states derived from Spectre token semantics */
|
|
575
571
|
--sp-component-badge-primary-bg-hover: var(--sp-button-primary-bghover);
|
|
@@ -579,6 +575,7 @@
|
|
|
579
575
|
--sp-component-badge-danger-bg-hover: var(--sp-color-error-200);
|
|
580
576
|
--sp-component-badge-neutral-bg-hover: var(--sp-color-neutral-200);
|
|
581
577
|
--sp-component-badge-info-bg-hover: var(--sp-color-info-200);
|
|
578
|
+
--sp-component-badge-ghost-bg-hover: var(--sp-button-ghost-bghover);
|
|
582
579
|
|
|
583
580
|
--sp-component-badge-padding-x-sm: var(--sp-space-8);
|
|
584
581
|
--sp-component-badge-padding-x-md: var(--sp-space-12);
|
|
@@ -602,6 +599,13 @@
|
|
|
602
599
|
--sp-component-iconbox-danger-text: var(--sp-icon-box-icon-danger);
|
|
603
600
|
--sp-component-iconbox-info-bg: var(--sp-color-info-50);
|
|
604
601
|
--sp-component-iconbox-info-text: var(--sp-badge-info-text);
|
|
602
|
+
--sp-component-iconbox-secondary-bg: var(--sp-button-secondary-bg);
|
|
603
|
+
--sp-component-iconbox-secondary-text: var(--sp-button-secondary-text);
|
|
604
|
+
--sp-component-iconbox-secondary-border: var(--sp-button-secondary-border);
|
|
605
|
+
--sp-component-iconbox-neutral-bg: var(--sp-color-neutral-50);
|
|
606
|
+
--sp-component-iconbox-neutral-text: var(--sp-badge-neutral-text);
|
|
607
|
+
--sp-component-iconbox-ghost-bg: var(--sp-button-ghost-bg);
|
|
608
|
+
--sp-component-iconbox-ghost-text: var(--sp-button-ghost-text);
|
|
605
609
|
|
|
606
610
|
/* testimonial roles */
|
|
607
611
|
--sp-component-testimonial-bg: var(--sp-surface-card);
|
|
@@ -609,7 +613,7 @@
|
|
|
609
613
|
--sp-component-testimonial-text: var(--sp-color-neutral-700);
|
|
610
614
|
--sp-component-testimonial-author-name: var(--sp-color-neutral-900);
|
|
611
615
|
--sp-component-testimonial-author-title: var(--sp-color-neutral-500);
|
|
612
|
-
--sp-component-testimonial-quote-mark: var(--sp-color-neutral-
|
|
616
|
+
--sp-component-testimonial-quote-mark: var(--sp-color-neutral-500);
|
|
613
617
|
|
|
614
618
|
/* pricing card roles */
|
|
615
619
|
--sp-component-pricing-card-bg: var(--sp-surface-card);
|
|
@@ -619,7 +623,7 @@
|
|
|
619
623
|
--sp-component-pricing-card-featured-badge-bg: var(--sp-color-warning-500);
|
|
620
624
|
--sp-component-pricing-card-featured-badge-text: var(--sp-color-neutral-900);
|
|
621
625
|
--sp-component-pricing-card-price: var(--sp-color-neutral-900);
|
|
622
|
-
--sp-component-pricing-card-featured-price: var(--sp-color-
|
|
626
|
+
--sp-component-pricing-card-featured-price: var(--sp-color-white);
|
|
623
627
|
--sp-component-pricing-card-price-description: var(--sp-color-neutral-500);
|
|
624
628
|
|
|
625
629
|
/* rating roles */
|
|
@@ -632,45 +636,22 @@
|
|
|
632
636
|
}
|
|
633
637
|
|
|
634
638
|
/* dark mode overrides mapped from Spectre token mode definitions */
|
|
635
|
-
:root[data-spectre-theme="dark"] {
|
|
639
|
+
:where(:root[data-spectre-theme="dark"]) {
|
|
636
640
|
--sp-component-testimonial-bg: var(--sp-color-neutral-800);
|
|
637
641
|
--sp-component-testimonial-border: var(--sp-color-neutral-700);
|
|
638
642
|
--sp-component-testimonial-text: var(--sp-color-neutral-200);
|
|
639
643
|
--sp-component-testimonial-author-name: var(--sp-color-neutral-100);
|
|
640
|
-
--sp-component-testimonial-author-title: var(--sp-color-neutral-
|
|
641
|
-
--sp-component-testimonial-quote-mark: var(--sp-color-neutral-
|
|
644
|
+
--sp-component-testimonial-author-title: var(--sp-color-neutral-400);
|
|
645
|
+
--sp-component-testimonial-quote-mark: var(--sp-color-neutral-400);
|
|
642
646
|
|
|
643
647
|
--sp-component-pricing-card-bg: var(--sp-color-neutral-800);
|
|
644
648
|
--sp-component-pricing-card-border: var(--sp-color-neutral-700);
|
|
645
649
|
--sp-component-pricing-card-price: var(--sp-color-neutral-100);
|
|
646
|
-
--sp-component-pricing-card-price-description: var(--sp-color-neutral-
|
|
650
|
+
--sp-component-pricing-card-price-description: var(--sp-color-neutral-400);
|
|
647
651
|
|
|
648
652
|
--sp-component-rating-star-filled: var(--sp-color-warning-400);
|
|
649
653
|
--sp-component-rating-star-empty: var(--sp-color-neutral-700);
|
|
650
654
|
--sp-component-rating-text: var(--sp-color-neutral-400);
|
|
651
|
-
|
|
652
|
-
--sp-component-badge-success-bg: var(--sp-color-success-800);
|
|
653
|
-
--sp-component-badge-success-text: var(--sp-color-success-100);
|
|
654
|
-
--sp-component-badge-warning-bg: var(--sp-color-warning-800);
|
|
655
|
-
--sp-component-badge-warning-text: var(--sp-color-warning-100);
|
|
656
|
-
--sp-component-badge-danger-bg: var(--sp-color-error-800);
|
|
657
|
-
--sp-component-badge-danger-text: var(--sp-color-error-100);
|
|
658
|
-
--sp-component-badge-neutral-bg: var(--sp-color-neutral-700);
|
|
659
|
-
--sp-component-badge-neutral-text: var(--sp-color-neutral-100);
|
|
660
|
-
--sp-component-badge-info-bg: var(--sp-color-info-900);
|
|
661
|
-
--sp-component-badge-info-text: var(--sp-color-info-100);
|
|
662
|
-
|
|
663
|
-
--sp-component-badge-success-bg-hover: var(--sp-color-success-700);
|
|
664
|
-
--sp-component-badge-warning-bg-hover: var(--sp-color-warning-800);
|
|
665
|
-
--sp-component-badge-danger-bg-hover: var(--sp-color-error-700);
|
|
666
|
-
--sp-component-badge-neutral-bg-hover: var(--sp-color-neutral-600);
|
|
667
|
-
--sp-component-badge-info-bg-hover: var(--sp-color-info-700);
|
|
668
|
-
|
|
669
|
-
--sp-component-iconbox-primary-bg: var(--sp-color-brand-900);
|
|
670
|
-
--sp-component-iconbox-success-bg: var(--sp-color-success-900);
|
|
671
|
-
--sp-component-iconbox-warning-bg: var(--sp-color-warning-900);
|
|
672
|
-
--sp-component-iconbox-danger-bg: var(--sp-color-error-900);
|
|
673
|
-
--sp-component-iconbox-info-bg: var(--sp-color-info-900);
|
|
674
655
|
}
|
|
675
656
|
|
|
676
657
|
/* BUTTONS -------------------------------------------------------------- */
|
|
@@ -684,7 +665,7 @@
|
|
|
684
665
|
border: var(--sp-component-border-width) solid var(--sp-component-button-border-base);
|
|
685
666
|
font-family: var(--sp-font-family-sans);
|
|
686
667
|
font-size: var(--sp-font-md-size);
|
|
687
|
-
line-height:
|
|
668
|
+
line-height: var(--sp-font-md-line-height);
|
|
688
669
|
font-weight: var(--sp-font-md-weight);
|
|
689
670
|
text-decoration: none;
|
|
690
671
|
appearance: none;
|
|
@@ -1002,10 +983,17 @@
|
|
|
1002
983
|
}
|
|
1003
984
|
|
|
1004
985
|
.sp-input:hover,
|
|
1005
|
-
.sp-input--hover
|
|
986
|
+
.sp-input--hover,
|
|
987
|
+
.sp-input.is-hover {
|
|
1006
988
|
border-color: var(--sp-component-input-role-border-hover);
|
|
1007
989
|
}
|
|
1008
990
|
|
|
991
|
+
.sp-input:active,
|
|
992
|
+
.sp-input--active,
|
|
993
|
+
.sp-input.is-active {
|
|
994
|
+
opacity: var(--sp-opacity-active);
|
|
995
|
+
}
|
|
996
|
+
|
|
1009
997
|
.sp-input:focus,
|
|
1010
998
|
.sp-input--focus,
|
|
1011
999
|
.sp-input.is-focus {
|
|
@@ -1033,6 +1021,7 @@
|
|
|
1033
1021
|
background-color: var(--sp-component-input-role-bg-disabled);
|
|
1034
1022
|
color: var(--sp-component-input-role-text-disabled);
|
|
1035
1023
|
border-color: var(--sp-component-input-role-border-disabled);
|
|
1024
|
+
box-shadow: none;
|
|
1036
1025
|
cursor: not-allowed;
|
|
1037
1026
|
pointer-events: none;
|
|
1038
1027
|
}
|
|
@@ -1041,12 +1030,12 @@
|
|
|
1041
1030
|
color: var(--sp-component-input-role-text-disabled);
|
|
1042
1031
|
}
|
|
1043
1032
|
|
|
1044
|
-
.sp-input--disabled,
|
|
1045
1033
|
.sp-input--disabled:focus {
|
|
1046
1034
|
box-shadow: none;
|
|
1047
1035
|
}
|
|
1048
1036
|
|
|
1049
|
-
.sp-input--loading
|
|
1037
|
+
.sp-input--loading,
|
|
1038
|
+
.sp-input[aria-busy="true"] {
|
|
1050
1039
|
pointer-events: none;
|
|
1051
1040
|
opacity: var(--sp-opacity-active);
|
|
1052
1041
|
}
|
|
@@ -1114,7 +1103,8 @@
|
|
|
1114
1103
|
cursor: pointer;
|
|
1115
1104
|
transition:
|
|
1116
1105
|
transform var(--sp-duration-fast) var(--sp-easing-out),
|
|
1117
|
-
box-shadow var(--sp-duration-fast) var(--sp-easing-out)
|
|
1106
|
+
box-shadow var(--sp-duration-fast) var(--sp-easing-out),
|
|
1107
|
+
opacity var(--sp-duration-fast) var(--sp-easing-out);
|
|
1118
1108
|
}
|
|
1119
1109
|
|
|
1120
1110
|
.sp-card--interactive:hover,
|
|
@@ -1128,6 +1118,13 @@
|
|
|
1128
1118
|
box-shadow: var(--sp-component-card-shadow-elevated);
|
|
1129
1119
|
}
|
|
1130
1120
|
|
|
1121
|
+
.sp-card--interactive:active,
|
|
1122
|
+
.sp-card--interactive.sp-card--active,
|
|
1123
|
+
.sp-card--interactive.is-active {
|
|
1124
|
+
opacity: var(--sp-opacity-active);
|
|
1125
|
+
transform: translateY(0);
|
|
1126
|
+
}
|
|
1127
|
+
|
|
1131
1128
|
/* BADGES --------------------------------------------------------------- */
|
|
1132
1129
|
|
|
1133
1130
|
.sp-badge {
|
|
@@ -1241,6 +1238,17 @@
|
|
|
1241
1238
|
background-color: var(--sp-component-badge-info-bg-hover);
|
|
1242
1239
|
}
|
|
1243
1240
|
|
|
1241
|
+
.sp-badge--ghost {
|
|
1242
|
+
background-color: var(--sp-component-badge-ghost-bg);
|
|
1243
|
+
color: var(--sp-component-badge-ghost-text);
|
|
1244
|
+
}
|
|
1245
|
+
|
|
1246
|
+
.sp-badge--ghost.sp-badge--interactive:hover,
|
|
1247
|
+
.sp-badge--ghost.sp-badge--interactive.sp-badge--hover,
|
|
1248
|
+
.sp-badge--ghost.sp-badge--interactive.is-hover {
|
|
1249
|
+
background-color: var(--sp-component-badge-ghost-bg-hover);
|
|
1250
|
+
}
|
|
1251
|
+
|
|
1244
1252
|
.sp-badge--interactive {
|
|
1245
1253
|
cursor: pointer;
|
|
1246
1254
|
transition:
|
|
@@ -1283,9 +1291,9 @@
|
|
|
1283
1291
|
border-radius: var(--sp-component-iconbox-radius);
|
|
1284
1292
|
color: var(--sp-component-iconbox-primary-text);
|
|
1285
1293
|
background-color: var(--sp-component-iconbox-primary-bg);
|
|
1294
|
+
border: var(--sp-component-border-width) solid transparent;
|
|
1286
1295
|
font-family: var(--sp-font-family-sans);
|
|
1287
1296
|
font-weight: var(--sp-font-md-weight);
|
|
1288
|
-
line-height: 0;
|
|
1289
1297
|
transition:
|
|
1290
1298
|
background-color var(--sp-duration-fast) var(--sp-easing-out),
|
|
1291
1299
|
color var(--sp-duration-fast) var(--sp-easing-out),
|
|
@@ -1299,11 +1307,6 @@
|
|
|
1299
1307
|
- force currentColor for common svg shapes
|
|
1300
1308
|
- preserve stroke-only icons (fill="none")
|
|
1301
1309
|
*/
|
|
1302
|
-
.sp-iconbox,
|
|
1303
|
-
.sp-iconbox>i {
|
|
1304
|
-
line-height: 0;
|
|
1305
|
-
}
|
|
1306
|
-
|
|
1307
1310
|
.sp-iconbox>i {
|
|
1308
1311
|
display: inline-flex;
|
|
1309
1312
|
align-items: center;
|
|
@@ -1322,7 +1325,6 @@
|
|
|
1322
1325
|
}
|
|
1323
1326
|
|
|
1324
1327
|
/* default to inheriting via currentColor */
|
|
1325
|
-
.sp-iconbox svg,
|
|
1326
1328
|
.sp-iconbox svg path,
|
|
1327
1329
|
.sp-iconbox svg circle,
|
|
1328
1330
|
.sp-iconbox svg rect,
|
|
@@ -1360,11 +1362,21 @@
|
|
|
1360
1362
|
font-size: var(--sp-font-lg-size);
|
|
1361
1363
|
}
|
|
1362
1364
|
|
|
1365
|
+
.sp-iconbox--pill {
|
|
1366
|
+
border-radius: var(--sp-radius-pill);
|
|
1367
|
+
}
|
|
1368
|
+
|
|
1363
1369
|
.sp-iconbox--primary {
|
|
1364
1370
|
background-color: var(--sp-component-iconbox-primary-bg);
|
|
1365
1371
|
color: var(--sp-component-iconbox-primary-text);
|
|
1366
1372
|
}
|
|
1367
1373
|
|
|
1374
|
+
.sp-iconbox--secondary {
|
|
1375
|
+
background-color: var(--sp-component-iconbox-secondary-bg);
|
|
1376
|
+
color: var(--sp-component-iconbox-secondary-text);
|
|
1377
|
+
border-color: var(--sp-component-iconbox-secondary-border);
|
|
1378
|
+
}
|
|
1379
|
+
|
|
1368
1380
|
.sp-iconbox--success {
|
|
1369
1381
|
background-color: var(--sp-component-iconbox-success-bg);
|
|
1370
1382
|
color: var(--sp-component-iconbox-success-text);
|
|
@@ -1385,6 +1397,16 @@
|
|
|
1385
1397
|
color: var(--sp-component-iconbox-info-text);
|
|
1386
1398
|
}
|
|
1387
1399
|
|
|
1400
|
+
.sp-iconbox--neutral {
|
|
1401
|
+
background-color: var(--sp-component-iconbox-neutral-bg);
|
|
1402
|
+
color: var(--sp-component-iconbox-neutral-text);
|
|
1403
|
+
}
|
|
1404
|
+
|
|
1405
|
+
.sp-iconbox--ghost {
|
|
1406
|
+
background-color: var(--sp-component-iconbox-ghost-bg);
|
|
1407
|
+
color: var(--sp-component-iconbox-ghost-text);
|
|
1408
|
+
}
|
|
1409
|
+
|
|
1388
1410
|
.sp-iconbox--interactive {
|
|
1389
1411
|
cursor: pointer;
|
|
1390
1412
|
}
|
|
@@ -1443,6 +1465,41 @@
|
|
|
1443
1465
|
pointer-events: none;
|
|
1444
1466
|
}
|
|
1445
1467
|
|
|
1468
|
+
.sp-testimonial--full {
|
|
1469
|
+
height: 100%;
|
|
1470
|
+
}
|
|
1471
|
+
|
|
1472
|
+
.sp-testimonial--interactive {
|
|
1473
|
+
cursor: pointer;
|
|
1474
|
+
transition:
|
|
1475
|
+
transform var(--sp-duration-fast) var(--sp-easing-out),
|
|
1476
|
+
box-shadow var(--sp-duration-fast) var(--sp-easing-out),
|
|
1477
|
+
opacity var(--sp-duration-fast) var(--sp-easing-out);
|
|
1478
|
+
}
|
|
1479
|
+
|
|
1480
|
+
.sp-testimonial--interactive:hover,
|
|
1481
|
+
.sp-testimonial--interactive:focus-within,
|
|
1482
|
+
.sp-testimonial--interactive.sp-testimonial--hover,
|
|
1483
|
+
.sp-testimonial--interactive.is-hover {
|
|
1484
|
+
transform: translateY(calc(var(--sp-component-border-width) * -1));
|
|
1485
|
+
box-shadow: var(--sp-shadow-lg);
|
|
1486
|
+
}
|
|
1487
|
+
|
|
1488
|
+
.sp-testimonial--interactive:active,
|
|
1489
|
+
.sp-testimonial--interactive.sp-testimonial--active,
|
|
1490
|
+
.sp-testimonial--interactive.is-active {
|
|
1491
|
+
opacity: var(--sp-opacity-active);
|
|
1492
|
+
transform: translateY(0);
|
|
1493
|
+
}
|
|
1494
|
+
|
|
1495
|
+
.sp-testimonial--interactive:focus-visible,
|
|
1496
|
+
.sp-testimonial--interactive.sp-testimonial--focus,
|
|
1497
|
+
.sp-testimonial--interactive.is-focus {
|
|
1498
|
+
outline: none;
|
|
1499
|
+
transform: translateY(calc(var(--sp-component-border-width) * -1));
|
|
1500
|
+
box-shadow: 0 0 0 calc(var(--sp-focus-ring-width) + var(--sp-component-border-width)) var(--sp-color-focus-primary);
|
|
1501
|
+
}
|
|
1502
|
+
|
|
1446
1503
|
.sp-testimonial-quote {
|
|
1447
1504
|
color: var(--sp-component-testimonial-text);
|
|
1448
1505
|
font-size: var(--sp-font-lg-size);
|
|
@@ -1494,7 +1551,10 @@
|
|
|
1494
1551
|
flex-direction: column;
|
|
1495
1552
|
gap: var(--sp-space-24);
|
|
1496
1553
|
position: relative;
|
|
1497
|
-
transition:
|
|
1554
|
+
transition:
|
|
1555
|
+
transform var(--sp-duration-fast) var(--sp-easing-out),
|
|
1556
|
+
box-shadow var(--sp-duration-fast) var(--sp-easing-out),
|
|
1557
|
+
opacity var(--sp-duration-fast) var(--sp-easing-out);
|
|
1498
1558
|
}
|
|
1499
1559
|
|
|
1500
1560
|
.sp-pricing-card--featured {
|
|
@@ -1515,6 +1575,53 @@
|
|
|
1515
1575
|
pointer-events: none;
|
|
1516
1576
|
}
|
|
1517
1577
|
|
|
1578
|
+
.sp-pricing-card--full {
|
|
1579
|
+
height: 100%;
|
|
1580
|
+
}
|
|
1581
|
+
|
|
1582
|
+
.sp-pricing-card--interactive {
|
|
1583
|
+
cursor: pointer;
|
|
1584
|
+
}
|
|
1585
|
+
|
|
1586
|
+
.sp-pricing-card--interactive:hover,
|
|
1587
|
+
.sp-pricing-card--interactive:focus-within,
|
|
1588
|
+
.sp-pricing-card--interactive.sp-pricing-card--hover,
|
|
1589
|
+
.sp-pricing-card--interactive.is-hover {
|
|
1590
|
+
transform: translateY(calc(var(--sp-component-border-width) * -1));
|
|
1591
|
+
box-shadow: var(--sp-shadow-lg);
|
|
1592
|
+
}
|
|
1593
|
+
|
|
1594
|
+
.sp-pricing-card--featured.sp-pricing-card--interactive:hover,
|
|
1595
|
+
.sp-pricing-card--featured.sp-pricing-card--interactive:focus-visible,
|
|
1596
|
+
.sp-pricing-card--featured.sp-pricing-card--interactive:focus-within,
|
|
1597
|
+
.sp-pricing-card--featured.sp-pricing-card--interactive.sp-pricing-card--hover,
|
|
1598
|
+
.sp-pricing-card--featured.sp-pricing-card--interactive.is-hover,
|
|
1599
|
+
.sp-pricing-card--featured.sp-pricing-card--interactive.sp-pricing-card--focus,
|
|
1600
|
+
.sp-pricing-card--featured.sp-pricing-card--interactive.is-focus {
|
|
1601
|
+
transform: scale(1.05) translateY(calc(var(--sp-component-border-width) * -1));
|
|
1602
|
+
}
|
|
1603
|
+
|
|
1604
|
+
.sp-pricing-card--interactive:active,
|
|
1605
|
+
.sp-pricing-card--interactive.sp-pricing-card--active,
|
|
1606
|
+
.sp-pricing-card--interactive.is-active {
|
|
1607
|
+
opacity: var(--sp-opacity-active);
|
|
1608
|
+
transform: translateY(0);
|
|
1609
|
+
}
|
|
1610
|
+
|
|
1611
|
+
.sp-pricing-card--featured.sp-pricing-card--interactive:active,
|
|
1612
|
+
.sp-pricing-card--featured.sp-pricing-card--interactive.sp-pricing-card--active,
|
|
1613
|
+
.sp-pricing-card--featured.sp-pricing-card--interactive.is-active {
|
|
1614
|
+
transform: scale(1.05) translateY(0);
|
|
1615
|
+
}
|
|
1616
|
+
|
|
1617
|
+
.sp-pricing-card--interactive:focus-visible,
|
|
1618
|
+
.sp-pricing-card--interactive.sp-pricing-card--focus,
|
|
1619
|
+
.sp-pricing-card--interactive.is-focus {
|
|
1620
|
+
outline: none;
|
|
1621
|
+
transform: translateY(calc(var(--sp-component-border-width) * -1));
|
|
1622
|
+
box-shadow: 0 0 0 calc(var(--sp-focus-ring-width) + var(--sp-component-border-width)) var(--sp-color-focus-primary);
|
|
1623
|
+
}
|
|
1624
|
+
|
|
1518
1625
|
.sp-pricing-card-badge {
|
|
1519
1626
|
position: absolute;
|
|
1520
1627
|
top: var(--sp-space-16);
|
|
@@ -1560,6 +1667,10 @@
|
|
|
1560
1667
|
align-items: center;
|
|
1561
1668
|
gap: var(--sp-space-8);
|
|
1562
1669
|
font-size: var(--sp-component-rating-size-md);
|
|
1670
|
+
border-radius: var(--sp-radius-md);
|
|
1671
|
+
transition:
|
|
1672
|
+
opacity var(--sp-duration-fast) var(--sp-easing-out),
|
|
1673
|
+
box-shadow var(--sp-duration-fast) var(--sp-easing-out);
|
|
1563
1674
|
}
|
|
1564
1675
|
|
|
1565
1676
|
.sp-rating--sm {
|
|
@@ -1574,9 +1685,12 @@
|
|
|
1574
1685
|
font-size: var(--sp-component-rating-size-lg);
|
|
1575
1686
|
}
|
|
1576
1687
|
|
|
1688
|
+
.sp-rating:disabled,
|
|
1689
|
+
.sp-rating[aria-disabled="true"],
|
|
1577
1690
|
.sp-rating--disabled {
|
|
1578
1691
|
opacity: var(--sp-opacity-disabled);
|
|
1579
1692
|
pointer-events: none;
|
|
1693
|
+
cursor: not-allowed;
|
|
1580
1694
|
}
|
|
1581
1695
|
|
|
1582
1696
|
.sp-rating--loading {
|
|
@@ -1584,6 +1698,29 @@
|
|
|
1584
1698
|
pointer-events: none;
|
|
1585
1699
|
}
|
|
1586
1700
|
|
|
1701
|
+
.sp-rating--interactive {
|
|
1702
|
+
cursor: pointer;
|
|
1703
|
+
}
|
|
1704
|
+
|
|
1705
|
+
.sp-rating--interactive:hover,
|
|
1706
|
+
.sp-rating--interactive.sp-rating--hover,
|
|
1707
|
+
.sp-rating--interactive.is-hover {
|
|
1708
|
+
opacity: var(--sp-opacity-hover);
|
|
1709
|
+
}
|
|
1710
|
+
|
|
1711
|
+
.sp-rating--interactive:active,
|
|
1712
|
+
.sp-rating--interactive.sp-rating--active,
|
|
1713
|
+
.sp-rating--interactive.is-active {
|
|
1714
|
+
opacity: var(--sp-opacity-active);
|
|
1715
|
+
}
|
|
1716
|
+
|
|
1717
|
+
.sp-rating--interactive:focus-visible,
|
|
1718
|
+
.sp-rating--interactive.sp-rating--focus,
|
|
1719
|
+
.sp-rating--interactive.is-focus {
|
|
1720
|
+
outline: none;
|
|
1721
|
+
box-shadow: 0 0 0 calc(var(--sp-focus-ring-width) + var(--sp-component-border-width)) var(--sp-color-focus-primary);
|
|
1722
|
+
}
|
|
1723
|
+
|
|
1587
1724
|
.sp-rating-stars {
|
|
1588
1725
|
display: flex;
|
|
1589
1726
|
gap: var(--sp-space-4);
|
package/dist/index.d.cts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
declare const spectreBaseStylesPath = "@phcdevworks/spectre-ui/base.css";
|
|
2
2
|
declare const spectreComponentsStylesPath = "@phcdevworks/spectre-ui/components.css";
|
|
3
3
|
declare const spectreUtilitiesStylesPath = "@phcdevworks/spectre-ui/utilities.css";
|
|
4
|
+
declare const spectreIndexStylesPath = "@phcdevworks/spectre-ui/index.css";
|
|
4
5
|
declare const spectreStyles: {
|
|
5
6
|
index: string;
|
|
6
7
|
base: string;
|
|
@@ -58,6 +59,7 @@ interface CardRecipeOptions {
|
|
|
58
59
|
loading?: boolean;
|
|
59
60
|
hovered?: boolean;
|
|
60
61
|
focused?: boolean;
|
|
62
|
+
active?: boolean;
|
|
61
63
|
}
|
|
62
64
|
declare function getCardClasses(opts?: CardRecipeOptions): string;
|
|
63
65
|
|
|
@@ -82,6 +84,9 @@ interface InputRecipeOptions {
|
|
|
82
84
|
pill?: boolean;
|
|
83
85
|
focused?: boolean;
|
|
84
86
|
hovered?: boolean;
|
|
87
|
+
active?: boolean;
|
|
88
|
+
disabled?: boolean;
|
|
89
|
+
loading?: boolean;
|
|
85
90
|
}
|
|
86
91
|
declare function getInputClasses(opts?: InputRecipeOptions): string;
|
|
87
92
|
|
|
@@ -93,6 +98,7 @@ declare const BADGE_VARIANTS: {
|
|
|
93
98
|
readonly danger: true;
|
|
94
99
|
readonly neutral: true;
|
|
95
100
|
readonly info: true;
|
|
101
|
+
readonly ghost: true;
|
|
96
102
|
};
|
|
97
103
|
declare const BADGE_SIZES: {
|
|
98
104
|
readonly sm: true;
|
|
@@ -119,10 +125,13 @@ declare function getBadgeClasses(opts?: BadgeRecipeOptions): string;
|
|
|
119
125
|
|
|
120
126
|
declare const ICONBOX_VARIANTS: {
|
|
121
127
|
readonly primary: true;
|
|
128
|
+
readonly secondary: true;
|
|
122
129
|
readonly success: true;
|
|
123
130
|
readonly warning: true;
|
|
124
131
|
readonly danger: true;
|
|
125
132
|
readonly info: true;
|
|
133
|
+
readonly neutral: true;
|
|
134
|
+
readonly ghost: true;
|
|
126
135
|
};
|
|
127
136
|
declare const ICONBOX_SIZES: {
|
|
128
137
|
readonly sm: true;
|
|
@@ -140,6 +149,7 @@ interface IconBoxRecipeOptions {
|
|
|
140
149
|
hovered?: boolean;
|
|
141
150
|
focused?: boolean;
|
|
142
151
|
active?: boolean;
|
|
152
|
+
pill?: boolean;
|
|
143
153
|
}
|
|
144
154
|
declare function getIconBoxClasses(opts?: IconBoxRecipeOptions): string;
|
|
145
155
|
|
|
@@ -150,6 +160,11 @@ declare function getIconBoxClasses(opts?: IconBoxRecipeOptions): string;
|
|
|
150
160
|
interface TestimonialRecipeOptions {
|
|
151
161
|
disabled?: boolean;
|
|
152
162
|
loading?: boolean;
|
|
163
|
+
interactive?: boolean;
|
|
164
|
+
hovered?: boolean;
|
|
165
|
+
focused?: boolean;
|
|
166
|
+
active?: boolean;
|
|
167
|
+
fullHeight?: boolean;
|
|
153
168
|
}
|
|
154
169
|
declare function getTestimonialClasses(opts?: TestimonialRecipeOptions): string;
|
|
155
170
|
declare function getTestimonialQuoteClasses(): string;
|
|
@@ -166,6 +181,11 @@ interface PricingCardRecipeOptions {
|
|
|
166
181
|
featured?: boolean;
|
|
167
182
|
disabled?: boolean;
|
|
168
183
|
loading?: boolean;
|
|
184
|
+
interactive?: boolean;
|
|
185
|
+
hovered?: boolean;
|
|
186
|
+
focused?: boolean;
|
|
187
|
+
active?: boolean;
|
|
188
|
+
fullHeight?: boolean;
|
|
169
189
|
}
|
|
170
190
|
declare function getPricingCardClasses(opts?: PricingCardRecipeOptions): string;
|
|
171
191
|
declare function getPricingCardBadgeClasses(): string;
|
|
@@ -187,10 +207,14 @@ interface RatingRecipeOptions {
|
|
|
187
207
|
size?: RatingSize;
|
|
188
208
|
disabled?: boolean;
|
|
189
209
|
loading?: boolean;
|
|
210
|
+
interactive?: boolean;
|
|
211
|
+
hovered?: boolean;
|
|
212
|
+
focused?: boolean;
|
|
213
|
+
active?: boolean;
|
|
190
214
|
}
|
|
191
215
|
declare function getRatingClasses(opts?: RatingRecipeOptions): string;
|
|
192
216
|
declare function getRatingStarsClasses(): string;
|
|
193
217
|
declare function getRatingStarClasses(isFilled?: boolean): string;
|
|
194
218
|
declare function getRatingTextClasses(): string;
|
|
195
219
|
|
|
196
|
-
export { type BadgeRecipeOptions, type BadgeSize, type BadgeVariant, type ButtonRecipeOptions, type ButtonSize, type ButtonVariant, type CardRecipeOptions, type CardVariant, type IconBoxRecipeOptions, type IconBoxSize, type IconBoxVariant, type InputRecipeOptions, type InputSize, type InputState, type PricingCardRecipeOptions, type RatingRecipeOptions, type TestimonialRecipeOptions, getBadgeClasses, getButtonClasses, getCardClasses, getIconBoxClasses, getInputClasses, getPricingCardBadgeClasses, getPricingCardClasses, getPricingCardDescriptionClasses, getPricingCardPriceClasses, getPricingCardPriceContainerClasses, getRatingClasses, getRatingStarClasses, getRatingStarsClasses, getRatingTextClasses, getTestimonialAuthorClasses, getTestimonialAuthorInfoClasses, getTestimonialAuthorNameClasses, getTestimonialAuthorTitleClasses, getTestimonialClasses, getTestimonialQuoteClasses, spectreBaseStylesPath, spectreComponentsStylesPath, spectreStyles, spectreUtilitiesStylesPath };
|
|
220
|
+
export { type BadgeRecipeOptions, type BadgeSize, type BadgeVariant, type ButtonRecipeOptions, type ButtonSize, type ButtonVariant, type CardRecipeOptions, type CardVariant, type IconBoxRecipeOptions, type IconBoxSize, type IconBoxVariant, type InputRecipeOptions, type InputSize, type InputState, type PricingCardRecipeOptions, type RatingRecipeOptions, type TestimonialRecipeOptions, getBadgeClasses, getButtonClasses, getCardClasses, getIconBoxClasses, getInputClasses, getPricingCardBadgeClasses, getPricingCardClasses, getPricingCardDescriptionClasses, getPricingCardPriceClasses, getPricingCardPriceContainerClasses, getRatingClasses, getRatingStarClasses, getRatingStarsClasses, getRatingTextClasses, getTestimonialAuthorClasses, getTestimonialAuthorInfoClasses, getTestimonialAuthorNameClasses, getTestimonialAuthorTitleClasses, getTestimonialClasses, getTestimonialQuoteClasses, spectreBaseStylesPath, spectreComponentsStylesPath, spectreIndexStylesPath, spectreStyles, spectreUtilitiesStylesPath };
|