@phcdevworks/spectre-ui 0.4.1 → 1.0.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 +62 -423
- package/dist/base.css +0 -0
- package/dist/components.css +322 -15
- package/dist/index.cjs +98 -8
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +453 -111
- package/dist/index.d.cts +30 -3
- package/dist/index.d.ts +30 -3
- package/dist/index.js +84 -9
- package/dist/index.js.map +1 -1
- package/dist/tailwind/index.cjs +8 -1
- package/dist/tailwind/index.cjs.map +1 -1
- package/dist/tailwind/index.js +8 -1
- package/dist/tailwind/index.js.map +1 -1
- package/dist/utilities.css +26 -23
- package/package.json +3 -2
package/dist/components.css
CHANGED
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
@layer components {
|
|
2
2
|
|
|
3
3
|
:root {
|
|
4
|
+
/* structural border width — swap to token when spectre-tokens ships sp-border-width-base */
|
|
5
|
+
--sp-component-border-width: 1px;
|
|
6
|
+
|
|
4
7
|
/* button roles */
|
|
5
8
|
--sp-component-button-border-base: var(--sp-component-button-ghost-bg);
|
|
6
9
|
--sp-component-button-shadow: var(--sp-shadow-sm);
|
|
@@ -36,6 +39,19 @@
|
|
|
36
39
|
--sp-component-button-success-bg-disabled: var(--sp-button-success-bgdisabled);
|
|
37
40
|
--sp-component-button-success-text: var(--sp-button-success-text);
|
|
38
41
|
--sp-component-button-success-text-disabled: var(--sp-button-success-textdisabled);
|
|
42
|
+
--sp-component-button-cta-bg: var(--sp-color-accent-600);
|
|
43
|
+
--sp-component-button-cta-bg-hover: var(--sp-color-accent-700);
|
|
44
|
+
--sp-component-button-cta-bg-active: var(--sp-color-accent-800);
|
|
45
|
+
--sp-component-button-cta-bg-disabled: var(--sp-color-accent-200);
|
|
46
|
+
--sp-component-button-cta-text: var(--sp-color-neutral-50);
|
|
47
|
+
--sp-component-button-cta-text-disabled: var(--sp-color-neutral-400);
|
|
48
|
+
--sp-component-button-cta-shadow: 0 4px 14px 0 var(--sp-color-accent-500) / 0.39;
|
|
49
|
+
--sp-component-button-accent-bg: var(--sp-button-accent-bg);
|
|
50
|
+
--sp-component-button-accent-bg-hover: var(--sp-button-accent-bghover);
|
|
51
|
+
--sp-component-button-accent-bg-active: var(--sp-button-accent-bgactive);
|
|
52
|
+
--sp-component-button-accent-bg-disabled: var(--sp-button-accent-bgdisabled);
|
|
53
|
+
--sp-component-button-accent-text: var(--sp-button-accent-text);
|
|
54
|
+
--sp-component-button-accent-text-disabled: var(--sp-button-accent-textdisabled);
|
|
39
55
|
|
|
40
56
|
/* card roles */
|
|
41
57
|
--sp-component-card-bg: var(--sp-surface-card);
|
|
@@ -77,12 +93,29 @@
|
|
|
77
93
|
--sp-component-badge-radius: var(--sp-radius-pill);
|
|
78
94
|
--sp-component-badge-primary-bg: var(--sp-button-primary-bg);
|
|
79
95
|
--sp-component-badge-primary-text: var(--sp-button-text-on-primary);
|
|
96
|
+
--sp-component-badge-secondary-bg: var(--sp-button-secondary-bg);
|
|
97
|
+
--sp-component-badge-secondary-text: var(--sp-button-secondary-text);
|
|
98
|
+
--sp-component-badge-secondary-border: var(--sp-button-secondary-border);
|
|
80
99
|
--sp-component-badge-success-bg: var(--sp-badge-success-bg);
|
|
81
100
|
--sp-component-badge-success-text: var(--sp-badge-success-text);
|
|
82
101
|
--sp-component-badge-warning-bg: var(--sp-badge-warning-bg);
|
|
83
102
|
--sp-component-badge-warning-text: var(--sp-badge-warning-text);
|
|
84
103
|
--sp-component-badge-danger-bg: var(--sp-badge-danger-bg);
|
|
85
104
|
--sp-component-badge-danger-text: var(--sp-badge-danger-text);
|
|
105
|
+
--sp-component-badge-neutral-bg: var(--sp-badge-neutral-bg);
|
|
106
|
+
--sp-component-badge-neutral-text: var(--sp-badge-neutral-text);
|
|
107
|
+
--sp-component-badge-info-bg: var(--sp-badge-info-bg);
|
|
108
|
+
--sp-component-badge-info-text: var(--sp-badge-info-text);
|
|
109
|
+
|
|
110
|
+
/* badge hover states — missing from core token exports, mapped to semantic logic */
|
|
111
|
+
--sp-component-badge-primary-bg-hover: var(--sp-button-primary-bghover);
|
|
112
|
+
--sp-component-badge-secondary-bg-hover: var(--sp-button-secondary-bghover);
|
|
113
|
+
--sp-component-badge-success-bg-hover: var(--sp-color-success-200);
|
|
114
|
+
--sp-component-badge-warning-bg-hover: var(--sp-color-warning-200);
|
|
115
|
+
--sp-component-badge-danger-bg-hover: var(--sp-color-error-200);
|
|
116
|
+
--sp-component-badge-neutral-bg-hover: var(--sp-color-neutral-200);
|
|
117
|
+
--sp-component-badge-info-bg-hover: var(--sp-color-info-200);
|
|
118
|
+
|
|
86
119
|
--sp-component-badge-padding-x-sm: var(--sp-space-8);
|
|
87
120
|
--sp-component-badge-padding-x-md: var(--sp-space-12);
|
|
88
121
|
--sp-component-badge-padding-x-lg: var(--sp-space-16);
|
|
@@ -105,6 +138,44 @@
|
|
|
105
138
|
--sp-component-iconbox-danger-text: var(--sp-icon-box-icon-danger);
|
|
106
139
|
--sp-component-iconbox-info-bg: var(--sp-color-info-50);
|
|
107
140
|
--sp-component-iconbox-info-text: var(--sp-badge-info-text);
|
|
141
|
+
|
|
142
|
+
/* testimonial roles */
|
|
143
|
+
--sp-component-testimonial-bg: var(--sp-surface-card);
|
|
144
|
+
--sp-component-testimonial-border: var(--sp-color-neutral-200);
|
|
145
|
+
--sp-component-testimonial-text: var(--sp-text-on-surface-muted);
|
|
146
|
+
--sp-component-testimonial-author-name: var(--sp-text-on-surface-default);
|
|
147
|
+
--sp-component-testimonial-author-title: var(--sp-text-on-surface-subtle);
|
|
148
|
+
--sp-component-testimonial-quote-mark: var(--sp-color-neutral-300);
|
|
149
|
+
|
|
150
|
+
/* pricing card roles */
|
|
151
|
+
--sp-component-pricing-card-bg: var(--sp-surface-card);
|
|
152
|
+
--sp-component-pricing-card-border: var(--sp-color-neutral-200);
|
|
153
|
+
--sp-component-pricing-card-featured-bg: var(--sp-color-neutral-900);
|
|
154
|
+
--sp-component-pricing-card-featured-text: var(--sp-color-neutral-50);
|
|
155
|
+
--sp-component-pricing-card-featured-badge-bg: var(--sp-color-warning-500);
|
|
156
|
+
--sp-component-pricing-card-featured-badge-text: var(--sp-color-neutral-900);
|
|
157
|
+
--sp-component-pricing-card-price: var(--sp-text-on-surface-default);
|
|
158
|
+
--sp-component-pricing-card-featured-price: var(--sp-color-neutral-50);
|
|
159
|
+
--sp-component-pricing-card-price-description: var(--sp-text-on-surface-subtle);
|
|
160
|
+
|
|
161
|
+
/* rating roles */
|
|
162
|
+
--sp-component-rating-star-filled: var(--sp-color-warning-500);
|
|
163
|
+
--sp-component-rating-star-empty: var(--sp-color-neutral-200);
|
|
164
|
+
--sp-component-rating-text: var(--sp-text-on-surface-subtle);
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
/* dark mode overrides for complex component tokens not yet exported by spectre-tokens v2.x */
|
|
168
|
+
:root[data-spectre-theme="dark"] {
|
|
169
|
+
--sp-component-testimonial-border: var(--sp-color-neutral-700);
|
|
170
|
+
--sp-component-testimonial-quote-mark: var(--sp-color-neutral-600);
|
|
171
|
+
--sp-component-pricing-card-border: var(--sp-color-neutral-700);
|
|
172
|
+
--sp-component-rating-star-empty: var(--sp-color-neutral-700);
|
|
173
|
+
|
|
174
|
+
--sp-component-badge-success-bg-hover: var(--sp-color-success-700);
|
|
175
|
+
--sp-component-badge-warning-bg-hover: var(--sp-color-warning-700);
|
|
176
|
+
--sp-component-badge-danger-bg-hover: var(--sp-color-error-700);
|
|
177
|
+
--sp-component-badge-neutral-bg-hover: var(--sp-color-neutral-600);
|
|
178
|
+
--sp-component-badge-info-bg-hover: var(--sp-color-info-700);
|
|
108
179
|
}
|
|
109
180
|
|
|
110
181
|
/* BUTTONS -------------------------------------------------------------- */
|
|
@@ -115,7 +186,7 @@
|
|
|
115
186
|
gap: var(--sp-space-4);
|
|
116
187
|
padding: var(--sp-space-4) var(--sp-space-16);
|
|
117
188
|
border-radius: var(--sp-radius-md);
|
|
118
|
-
border:
|
|
189
|
+
border: var(--sp-component-border-width) solid var(--sp-component-button-border-base);
|
|
119
190
|
font-family: var(--sp-font-family-sans);
|
|
120
191
|
font-size: var(--sp-font-md-size);
|
|
121
192
|
line-height: 1;
|
|
@@ -148,6 +219,10 @@
|
|
|
148
219
|
width: 100%;
|
|
149
220
|
}
|
|
150
221
|
|
|
222
|
+
.sp-btn--pill {
|
|
223
|
+
border-radius: var(--sp-radius-pill);
|
|
224
|
+
}
|
|
225
|
+
|
|
151
226
|
.sp-btn--icon {
|
|
152
227
|
padding-inline: var(--sp-space-12);
|
|
153
228
|
padding-block: var(--sp-space-4);
|
|
@@ -172,16 +247,8 @@
|
|
|
172
247
|
line-height: var(--sp-font-lg-line-height);
|
|
173
248
|
}
|
|
174
249
|
|
|
175
|
-
/* Generic forced-state helpers (
|
|
176
|
-
.sp-btn.sp-btn--hover,
|
|
177
|
-
.sp-btn.is-hover {
|
|
178
|
-
/* no-op here; variant sections below define the actual hover colors */
|
|
179
|
-
}
|
|
250
|
+
/* Generic forced-state helpers (actual colors defined in variant sections below) */
|
|
180
251
|
|
|
181
|
-
.sp-btn.sp-btn--active,
|
|
182
|
-
.sp-btn.is-active {
|
|
183
|
-
/* no-op here; variant sections below define the actual active colors */
|
|
184
|
-
}
|
|
185
252
|
|
|
186
253
|
/* primary */
|
|
187
254
|
.sp-btn--primary {
|
|
@@ -307,6 +374,56 @@
|
|
|
307
374
|
color: var(--sp-component-button-success-text-disabled);
|
|
308
375
|
}
|
|
309
376
|
|
|
377
|
+
/* cta */
|
|
378
|
+
.sp-btn--cta {
|
|
379
|
+
background-color: var(--sp-component-button-cta-bg);
|
|
380
|
+
color: var(--sp-component-button-cta-text);
|
|
381
|
+
box-shadow: var(--sp-component-button-cta-shadow);
|
|
382
|
+
}
|
|
383
|
+
|
|
384
|
+
.sp-btn--cta.sp-btn--hover,
|
|
385
|
+
.sp-btn--cta.is-hover,
|
|
386
|
+
.sp-btn--cta:hover {
|
|
387
|
+
background-color: var(--sp-component-button-cta-bg-hover);
|
|
388
|
+
}
|
|
389
|
+
|
|
390
|
+
.sp-btn--cta.sp-btn--active,
|
|
391
|
+
.sp-btn--cta.is-active,
|
|
392
|
+
.sp-btn--cta:active {
|
|
393
|
+
background-color: var(--sp-component-button-cta-bg-active);
|
|
394
|
+
}
|
|
395
|
+
|
|
396
|
+
.sp-btn--cta.sp-btn--disabled,
|
|
397
|
+
.sp-btn--cta:disabled {
|
|
398
|
+
background-color: var(--sp-component-button-cta-bg-disabled);
|
|
399
|
+
color: var(--sp-component-button-cta-text-disabled);
|
|
400
|
+
box-shadow: none;
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
/* accent */
|
|
404
|
+
.sp-btn--accent {
|
|
405
|
+
background-color: var(--sp-component-button-accent-bg);
|
|
406
|
+
color: var(--sp-component-button-accent-text);
|
|
407
|
+
}
|
|
408
|
+
|
|
409
|
+
.sp-btn--accent.sp-btn--hover,
|
|
410
|
+
.sp-btn--accent.is-hover,
|
|
411
|
+
.sp-btn--accent:hover {
|
|
412
|
+
background-color: var(--sp-component-button-accent-bg-hover);
|
|
413
|
+
}
|
|
414
|
+
|
|
415
|
+
.sp-btn--accent.sp-btn--active,
|
|
416
|
+
.sp-btn--accent.is-active,
|
|
417
|
+
.sp-btn--accent:active {
|
|
418
|
+
background-color: var(--sp-component-button-accent-bg-active);
|
|
419
|
+
}
|
|
420
|
+
|
|
421
|
+
.sp-btn--accent.sp-btn--disabled,
|
|
422
|
+
.sp-btn--accent:disabled {
|
|
423
|
+
background-color: var(--sp-component-button-accent-bg-disabled);
|
|
424
|
+
color: var(--sp-component-button-accent-text-disabled);
|
|
425
|
+
}
|
|
426
|
+
|
|
310
427
|
/* INPUTS --------------------------------------------------------------- */
|
|
311
428
|
|
|
312
429
|
.sp-input-wrapper {
|
|
@@ -340,7 +457,7 @@
|
|
|
340
457
|
appearance: none;
|
|
341
458
|
padding: var(--sp-space-4) var(--sp-space-16);
|
|
342
459
|
border-radius: var(--sp-radius-md);
|
|
343
|
-
border:
|
|
460
|
+
border: var(--sp-component-border-width) solid var(--sp-component-input-role-border);
|
|
344
461
|
background-color: var(--sp-component-input-role-bg);
|
|
345
462
|
color: var(--sp-component-input-role-text);
|
|
346
463
|
font-family: var(--sp-font-family-sans);
|
|
@@ -381,7 +498,7 @@
|
|
|
381
498
|
.sp-input:focus,
|
|
382
499
|
.sp-input--focus {
|
|
383
500
|
border-color: var(--sp-component-input-role-border-focus);
|
|
384
|
-
box-shadow: 0 0 0 calc(var(--sp-focus-ring-width) +
|
|
501
|
+
box-shadow: 0 0 0 calc(var(--sp-focus-ring-width) + var(--sp-component-border-width)) var(--sp-component-input-role-ring);
|
|
385
502
|
outline: none;
|
|
386
503
|
}
|
|
387
504
|
|
|
@@ -422,7 +539,7 @@
|
|
|
422
539
|
border-radius: var(--sp-radius-lg);
|
|
423
540
|
padding: var(--sp-space-24);
|
|
424
541
|
box-shadow: var(--sp-component-card-shadow);
|
|
425
|
-
border:
|
|
542
|
+
border: var(--sp-component-border-width) solid var(--sp-component-card-border-base);
|
|
426
543
|
}
|
|
427
544
|
|
|
428
545
|
.sp-card p {
|
|
@@ -473,7 +590,7 @@
|
|
|
473
590
|
.sp-card--interactive:hover,
|
|
474
591
|
.sp-card--interactive:focus-visible,
|
|
475
592
|
.sp-card--interactive:focus-within {
|
|
476
|
-
transform: translateY(-
|
|
593
|
+
transform: translateY(calc(var(--sp-component-border-width) * -1));
|
|
477
594
|
box-shadow: var(--sp-component-card-shadow-elevated);
|
|
478
595
|
}
|
|
479
596
|
|
|
@@ -490,7 +607,7 @@
|
|
|
490
607
|
padding: var(--sp-component-badge-padding-y-md) var(--sp-component-badge-padding-x-md);
|
|
491
608
|
font-size: var(--sp-font-sm-size);
|
|
492
609
|
line-height: var(--sp-font-sm-line-height);
|
|
493
|
-
border:
|
|
610
|
+
border: var(--sp-component-border-width) solid transparent;
|
|
494
611
|
white-space: nowrap;
|
|
495
612
|
}
|
|
496
613
|
|
|
@@ -517,21 +634,70 @@
|
|
|
517
634
|
color: var(--sp-component-badge-primary-text);
|
|
518
635
|
}
|
|
519
636
|
|
|
637
|
+
.sp-badge--primary.sp-badge--interactive:hover {
|
|
638
|
+
background-color: var(--sp-component-badge-primary-bg-hover);
|
|
639
|
+
}
|
|
640
|
+
|
|
641
|
+
.sp-badge--secondary {
|
|
642
|
+
background-color: var(--sp-component-badge-secondary-bg);
|
|
643
|
+
color: var(--sp-component-badge-secondary-text);
|
|
644
|
+
border-color: var(--sp-component-badge-secondary-border);
|
|
645
|
+
}
|
|
646
|
+
|
|
647
|
+
.sp-badge--secondary.sp-badge--interactive:hover {
|
|
648
|
+
background-color: var(--sp-component-badge-secondary-bg-hover);
|
|
649
|
+
}
|
|
650
|
+
|
|
520
651
|
.sp-badge--success {
|
|
521
652
|
background-color: var(--sp-component-badge-success-bg);
|
|
522
653
|
color: var(--sp-component-badge-success-text);
|
|
523
654
|
}
|
|
524
655
|
|
|
656
|
+
.sp-badge--success.sp-badge--interactive:hover {
|
|
657
|
+
background-color: var(--sp-component-badge-success-bg-hover);
|
|
658
|
+
}
|
|
659
|
+
|
|
525
660
|
.sp-badge--warning {
|
|
526
661
|
background-color: var(--sp-component-badge-warning-bg);
|
|
527
662
|
color: var(--sp-component-badge-warning-text);
|
|
528
663
|
}
|
|
529
664
|
|
|
665
|
+
.sp-badge--warning.sp-badge--interactive:hover {
|
|
666
|
+
background-color: var(--sp-component-badge-warning-bg-hover);
|
|
667
|
+
}
|
|
668
|
+
|
|
530
669
|
.sp-badge--danger {
|
|
531
670
|
background-color: var(--sp-component-badge-danger-bg);
|
|
532
671
|
color: var(--sp-component-badge-danger-text);
|
|
533
672
|
}
|
|
534
673
|
|
|
674
|
+
.sp-badge--danger.sp-badge--interactive:hover {
|
|
675
|
+
background-color: var(--sp-component-badge-danger-bg-hover);
|
|
676
|
+
}
|
|
677
|
+
|
|
678
|
+
.sp-badge--neutral {
|
|
679
|
+
background-color: var(--sp-component-badge-neutral-bg);
|
|
680
|
+
color: var(--sp-component-badge-neutral-text);
|
|
681
|
+
}
|
|
682
|
+
|
|
683
|
+
.sp-badge--neutral.sp-badge--interactive:hover {
|
|
684
|
+
background-color: var(--sp-component-badge-neutral-bg-hover);
|
|
685
|
+
}
|
|
686
|
+
|
|
687
|
+
.sp-badge--info {
|
|
688
|
+
background-color: var(--sp-component-badge-info-bg);
|
|
689
|
+
color: var(--sp-component-badge-info-text);
|
|
690
|
+
}
|
|
691
|
+
|
|
692
|
+
.sp-badge--info.sp-badge--interactive:hover {
|
|
693
|
+
background-color: var(--sp-component-badge-info-bg-hover);
|
|
694
|
+
}
|
|
695
|
+
|
|
696
|
+
.sp-badge--interactive {
|
|
697
|
+
cursor: pointer;
|
|
698
|
+
transition: background-color var(--sp-duration-fast) var(--sp-easing-out);
|
|
699
|
+
}
|
|
700
|
+
|
|
535
701
|
/* ICON BOXES ----------------------------------------------------------- */
|
|
536
702
|
|
|
537
703
|
.sp-iconbox {
|
|
@@ -636,4 +802,145 @@
|
|
|
636
802
|
background-color: var(--sp-component-iconbox-info-bg);
|
|
637
803
|
color: var(--sp-component-iconbox-info-text);
|
|
638
804
|
}
|
|
805
|
+
|
|
806
|
+
/* TESTIMONIALS --------------------------------------------------------- */
|
|
807
|
+
|
|
808
|
+
.sp-testimonial {
|
|
809
|
+
background-color: var(--sp-component-testimonial-bg);
|
|
810
|
+
border: var(--sp-component-border-width) solid var(--sp-component-testimonial-border);
|
|
811
|
+
border-radius: var(--sp-radius-lg);
|
|
812
|
+
padding: var(--sp-space-32);
|
|
813
|
+
display: flex;
|
|
814
|
+
flex-direction: column;
|
|
815
|
+
gap: var(--sp-space-24);
|
|
816
|
+
}
|
|
817
|
+
|
|
818
|
+
.sp-testimonial-quote {
|
|
819
|
+
color: var(--sp-component-testimonial-text);
|
|
820
|
+
font-size: var(--sp-font-lg-size);
|
|
821
|
+
line-height: var(--sp-font-lg-line-height);
|
|
822
|
+
font-style: italic;
|
|
823
|
+
position: relative;
|
|
824
|
+
}
|
|
825
|
+
|
|
826
|
+
.sp-testimonial-quote::before {
|
|
827
|
+
content: "“";
|
|
828
|
+
color: var(--sp-component-testimonial-quote-mark);
|
|
829
|
+
font-size: var(--sp-space-48);
|
|
830
|
+
position: absolute;
|
|
831
|
+
top: calc(var(--sp-space-24) * -1);
|
|
832
|
+
left: calc(var(--sp-space-16) * -1);
|
|
833
|
+
opacity: var(--sp-opacity-overlay);
|
|
834
|
+
}
|
|
835
|
+
|
|
836
|
+
.sp-testimonial-author {
|
|
837
|
+
display: flex;
|
|
838
|
+
align-items: center;
|
|
839
|
+
gap: var(--sp-space-16);
|
|
840
|
+
}
|
|
841
|
+
|
|
842
|
+
.sp-testimonial-author-info {
|
|
843
|
+
display: flex;
|
|
844
|
+
flex-direction: column;
|
|
845
|
+
}
|
|
846
|
+
|
|
847
|
+
.sp-testimonial-author-name {
|
|
848
|
+
color: var(--sp-component-testimonial-author-name);
|
|
849
|
+
font-weight: var(--sp-font-xl-weight);
|
|
850
|
+
font-size: var(--sp-font-md-size);
|
|
851
|
+
}
|
|
852
|
+
|
|
853
|
+
.sp-testimonial-author-title {
|
|
854
|
+
color: var(--sp-component-testimonial-author-title);
|
|
855
|
+
font-size: var(--sp-font-sm-size);
|
|
856
|
+
}
|
|
857
|
+
|
|
858
|
+
/* PRICING CARDS -------------------------------------------------------- */
|
|
859
|
+
|
|
860
|
+
.sp-pricing-card {
|
|
861
|
+
background-color: var(--sp-component-pricing-card-bg);
|
|
862
|
+
border: var(--sp-component-border-width) solid var(--sp-component-pricing-card-border);
|
|
863
|
+
border-radius: var(--sp-radius-lg);
|
|
864
|
+
padding: var(--sp-space-32);
|
|
865
|
+
display: flex;
|
|
866
|
+
flex-direction: column;
|
|
867
|
+
gap: var(--sp-space-24);
|
|
868
|
+
position: relative;
|
|
869
|
+
transition: transform var(--sp-duration-fast) var(--sp-easing-out);
|
|
870
|
+
}
|
|
871
|
+
|
|
872
|
+
.sp-pricing-card--featured {
|
|
873
|
+
background-color: var(--sp-component-pricing-card-featured-bg);
|
|
874
|
+
color: var(--sp-component-pricing-card-featured-text);
|
|
875
|
+
transform: scale(1.05);
|
|
876
|
+
z-index: 1;
|
|
877
|
+
border: none;
|
|
878
|
+
}
|
|
879
|
+
|
|
880
|
+
.sp-pricing-card-badge {
|
|
881
|
+
position: absolute;
|
|
882
|
+
top: var(--sp-space-16);
|
|
883
|
+
right: var(--sp-space-16);
|
|
884
|
+
background-color: var(--sp-component-pricing-card-featured-badge-bg);
|
|
885
|
+
color: var(--sp-component-pricing-card-featured-badge-text);
|
|
886
|
+
padding: var(--sp-space-4) var(--sp-space-12);
|
|
887
|
+
border-radius: var(--sp-radius-pill);
|
|
888
|
+
font-size: var(--sp-font-xs-size);
|
|
889
|
+
font-weight: var(--sp-font-md-weight);
|
|
890
|
+
}
|
|
891
|
+
|
|
892
|
+
.sp-pricing-card-price-container {
|
|
893
|
+
display: flex;
|
|
894
|
+
align-items: baseline;
|
|
895
|
+
gap: var(--sp-space-4);
|
|
896
|
+
}
|
|
897
|
+
|
|
898
|
+
.sp-pricing-card-price {
|
|
899
|
+
font-size: var(--sp-font-2xl-size);
|
|
900
|
+
font-weight: var(--sp-font-2xl-weight);
|
|
901
|
+
color: var(--sp-component-pricing-card-price);
|
|
902
|
+
}
|
|
903
|
+
|
|
904
|
+
.sp-pricing-card--featured .sp-pricing-card-price {
|
|
905
|
+
color: var(--sp-component-pricing-card-featured-price);
|
|
906
|
+
}
|
|
907
|
+
|
|
908
|
+
.sp-pricing-card-description {
|
|
909
|
+
color: var(--sp-component-pricing-card-price-description);
|
|
910
|
+
font-size: var(--sp-font-sm-size);
|
|
911
|
+
}
|
|
912
|
+
|
|
913
|
+
.sp-pricing-card--featured .sp-pricing-card-description {
|
|
914
|
+
color: var(--sp-component-pricing-card-featured-text);
|
|
915
|
+
opacity: 0.8;
|
|
916
|
+
}
|
|
917
|
+
|
|
918
|
+
/* RATING --------------------------------------------------------------- */
|
|
919
|
+
|
|
920
|
+
.sp-rating {
|
|
921
|
+
display: inline-flex;
|
|
922
|
+
align-items: center;
|
|
923
|
+
gap: var(--sp-space-8);
|
|
924
|
+
}
|
|
925
|
+
|
|
926
|
+
.sp-rating-stars {
|
|
927
|
+
display: flex;
|
|
928
|
+
gap: var(--sp-space-4);
|
|
929
|
+
color: var(--sp-component-rating-star-empty);
|
|
930
|
+
}
|
|
931
|
+
|
|
932
|
+
.sp-rating-star {
|
|
933
|
+
display: flex;
|
|
934
|
+
align-items: center;
|
|
935
|
+
justify-content: center;
|
|
936
|
+
}
|
|
937
|
+
|
|
938
|
+
.sp-rating-star--filled {
|
|
939
|
+
color: var(--sp-component-rating-star-filled);
|
|
940
|
+
}
|
|
941
|
+
|
|
942
|
+
.sp-rating-text {
|
|
943
|
+
color: var(--sp-component-rating-text);
|
|
944
|
+
font-size: var(--sp-font-sm-size);
|
|
945
|
+
}
|
|
639
946
|
}
|
package/dist/index.cjs
CHANGED
|
@@ -55,7 +55,9 @@ var BUTTON_VARIANTS = {
|
|
|
55
55
|
secondary: true,
|
|
56
56
|
ghost: true,
|
|
57
57
|
danger: true,
|
|
58
|
-
success: true
|
|
58
|
+
success: true,
|
|
59
|
+
cta: true,
|
|
60
|
+
accent: true
|
|
59
61
|
};
|
|
60
62
|
var BUTTON_SIZES = {
|
|
61
63
|
sm: true,
|
|
@@ -69,7 +71,8 @@ function getButtonClasses(opts = {}) {
|
|
|
69
71
|
fullWidth = false,
|
|
70
72
|
loading = false,
|
|
71
73
|
disabled = false,
|
|
72
|
-
iconOnly = false
|
|
74
|
+
iconOnly = false,
|
|
75
|
+
pill = false
|
|
73
76
|
} = opts;
|
|
74
77
|
const variant = resolveOption({
|
|
75
78
|
name: "button variant",
|
|
@@ -88,7 +91,9 @@ function getButtonClasses(opts = {}) {
|
|
|
88
91
|
secondary: "sp-btn--secondary",
|
|
89
92
|
ghost: "sp-btn--ghost",
|
|
90
93
|
danger: "sp-btn--danger",
|
|
91
|
-
success: "sp-btn--success"
|
|
94
|
+
success: "sp-btn--success",
|
|
95
|
+
cta: "sp-btn--cta",
|
|
96
|
+
accent: "sp-btn--accent"
|
|
92
97
|
};
|
|
93
98
|
const variantClass = variantMap[variant];
|
|
94
99
|
const sizeMap = {
|
|
@@ -104,7 +109,8 @@ function getButtonClasses(opts = {}) {
|
|
|
104
109
|
fullWidth && "sp-btn--full",
|
|
105
110
|
loading && "sp-btn--loading",
|
|
106
111
|
disabled && "sp-btn--disabled",
|
|
107
|
-
iconOnly && "sp-btn--icon"
|
|
112
|
+
iconOnly && "sp-btn--icon",
|
|
113
|
+
pill && "sp-btn--pill"
|
|
108
114
|
);
|
|
109
115
|
}
|
|
110
116
|
|
|
@@ -190,9 +196,12 @@ function getInputClasses(opts = {}) {
|
|
|
190
196
|
// src/recipes/badge.ts
|
|
191
197
|
var BADGE_VARIANTS = {
|
|
192
198
|
primary: true,
|
|
199
|
+
secondary: true,
|
|
193
200
|
success: true,
|
|
194
201
|
warning: true,
|
|
195
|
-
danger: true
|
|
202
|
+
danger: true,
|
|
203
|
+
neutral: true,
|
|
204
|
+
info: true
|
|
196
205
|
};
|
|
197
206
|
var BADGE_SIZES = {
|
|
198
207
|
sm: true,
|
|
@@ -200,7 +209,7 @@ var BADGE_SIZES = {
|
|
|
200
209
|
lg: true
|
|
201
210
|
};
|
|
202
211
|
function getBadgeClasses(opts = {}) {
|
|
203
|
-
const { variant: variantInput, size: sizeInput } = opts;
|
|
212
|
+
const { variant: variantInput, size: sizeInput, interactive } = opts;
|
|
204
213
|
const variant = resolveOption({
|
|
205
214
|
name: "badge variant",
|
|
206
215
|
value: variantInput,
|
|
@@ -215,9 +224,12 @@ function getBadgeClasses(opts = {}) {
|
|
|
215
224
|
});
|
|
216
225
|
const variantMap = {
|
|
217
226
|
primary: "sp-badge--primary",
|
|
227
|
+
secondary: "sp-badge--secondary",
|
|
218
228
|
success: "sp-badge--success",
|
|
219
229
|
warning: "sp-badge--warning",
|
|
220
|
-
danger: "sp-badge--danger"
|
|
230
|
+
danger: "sp-badge--danger",
|
|
231
|
+
neutral: "sp-badge--neutral",
|
|
232
|
+
info: "sp-badge--info"
|
|
221
233
|
};
|
|
222
234
|
const variantClass = variantMap[variant];
|
|
223
235
|
const sizeMap = {
|
|
@@ -226,7 +238,12 @@ function getBadgeClasses(opts = {}) {
|
|
|
226
238
|
lg: "sp-badge--lg"
|
|
227
239
|
};
|
|
228
240
|
const sizeClass = sizeMap[size];
|
|
229
|
-
return cx(
|
|
241
|
+
return cx(
|
|
242
|
+
"sp-badge",
|
|
243
|
+
variantClass,
|
|
244
|
+
sizeClass,
|
|
245
|
+
interactive && "sp-badge--interactive"
|
|
246
|
+
);
|
|
230
247
|
}
|
|
231
248
|
|
|
232
249
|
// src/recipes/iconbox.ts
|
|
@@ -273,11 +290,84 @@ function getIconBoxClasses(opts = {}) {
|
|
|
273
290
|
return cx("sp-iconbox", variantClass, sizeClass);
|
|
274
291
|
}
|
|
275
292
|
|
|
293
|
+
// src/recipes/testimonial.ts
|
|
294
|
+
function getTestimonialClasses(_opts = {}) {
|
|
295
|
+
return cx("sp-testimonial");
|
|
296
|
+
}
|
|
297
|
+
function getTestimonialQuoteClasses() {
|
|
298
|
+
return cx("sp-testimonial-quote");
|
|
299
|
+
}
|
|
300
|
+
function getTestimonialAuthorClasses() {
|
|
301
|
+
return cx("sp-testimonial-author");
|
|
302
|
+
}
|
|
303
|
+
function getTestimonialAuthorInfoClasses() {
|
|
304
|
+
return cx("sp-testimonial-author-info");
|
|
305
|
+
}
|
|
306
|
+
function getTestimonialAuthorNameClasses() {
|
|
307
|
+
return cx("sp-testimonial-author-name");
|
|
308
|
+
}
|
|
309
|
+
function getTestimonialAuthorTitleClasses() {
|
|
310
|
+
return cx("sp-testimonial-author-title");
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
// src/recipes/pricing-card.ts
|
|
314
|
+
function getPricingCardClasses(opts = {}) {
|
|
315
|
+
const { featured = false } = opts;
|
|
316
|
+
return cx(
|
|
317
|
+
"sp-pricing-card",
|
|
318
|
+
featured && "sp-pricing-card--featured"
|
|
319
|
+
);
|
|
320
|
+
}
|
|
321
|
+
function getPricingCardBadgeClasses() {
|
|
322
|
+
return cx("sp-pricing-card-badge");
|
|
323
|
+
}
|
|
324
|
+
function getPricingCardPriceContainerClasses() {
|
|
325
|
+
return cx("sp-pricing-card-price-container");
|
|
326
|
+
}
|
|
327
|
+
function getPricingCardPriceClasses() {
|
|
328
|
+
return cx("sp-pricing-card-price");
|
|
329
|
+
}
|
|
330
|
+
function getPricingCardDescriptionClasses() {
|
|
331
|
+
return cx("sp-pricing-card-description");
|
|
332
|
+
}
|
|
333
|
+
|
|
334
|
+
// src/recipes/rating.ts
|
|
335
|
+
function getRatingClasses(_opts = {}) {
|
|
336
|
+
return cx("sp-rating");
|
|
337
|
+
}
|
|
338
|
+
function getRatingStarsClasses() {
|
|
339
|
+
return cx("sp-rating-stars");
|
|
340
|
+
}
|
|
341
|
+
function getRatingStarClasses(isFilled = false) {
|
|
342
|
+
return cx(
|
|
343
|
+
"sp-rating-star",
|
|
344
|
+
isFilled && "sp-rating-star--filled"
|
|
345
|
+
);
|
|
346
|
+
}
|
|
347
|
+
function getRatingTextClasses() {
|
|
348
|
+
return cx("sp-rating-text");
|
|
349
|
+
}
|
|
350
|
+
|
|
276
351
|
exports.getBadgeClasses = getBadgeClasses;
|
|
277
352
|
exports.getButtonClasses = getButtonClasses;
|
|
278
353
|
exports.getCardClasses = getCardClasses;
|
|
279
354
|
exports.getIconBoxClasses = getIconBoxClasses;
|
|
280
355
|
exports.getInputClasses = getInputClasses;
|
|
356
|
+
exports.getPricingCardBadgeClasses = getPricingCardBadgeClasses;
|
|
357
|
+
exports.getPricingCardClasses = getPricingCardClasses;
|
|
358
|
+
exports.getPricingCardDescriptionClasses = getPricingCardDescriptionClasses;
|
|
359
|
+
exports.getPricingCardPriceClasses = getPricingCardPriceClasses;
|
|
360
|
+
exports.getPricingCardPriceContainerClasses = getPricingCardPriceContainerClasses;
|
|
361
|
+
exports.getRatingClasses = getRatingClasses;
|
|
362
|
+
exports.getRatingStarClasses = getRatingStarClasses;
|
|
363
|
+
exports.getRatingStarsClasses = getRatingStarsClasses;
|
|
364
|
+
exports.getRatingTextClasses = getRatingTextClasses;
|
|
365
|
+
exports.getTestimonialAuthorClasses = getTestimonialAuthorClasses;
|
|
366
|
+
exports.getTestimonialAuthorInfoClasses = getTestimonialAuthorInfoClasses;
|
|
367
|
+
exports.getTestimonialAuthorNameClasses = getTestimonialAuthorNameClasses;
|
|
368
|
+
exports.getTestimonialAuthorTitleClasses = getTestimonialAuthorTitleClasses;
|
|
369
|
+
exports.getTestimonialClasses = getTestimonialClasses;
|
|
370
|
+
exports.getTestimonialQuoteClasses = getTestimonialQuoteClasses;
|
|
281
371
|
exports.spectreBaseStylesPath = spectreBaseStylesPath;
|
|
282
372
|
exports.spectreComponentsStylesPath = spectreComponentsStylesPath;
|
|
283
373
|
exports.spectreStyles = spectreStyles;
|