@phcdevworks/spectre-ui 0.4.0 → 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 +7 -8
- package/dist/components.css +337 -31
- package/dist/index.cjs +98 -8
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +614 -108
- 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 +163 -1
- 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);
|
|
@@ -54,22 +70,21 @@
|
|
|
54
70
|
--sp-component-card-ghost-border: var(--sp-component-card-ghost-bg);
|
|
55
71
|
|
|
56
72
|
/* input roles */
|
|
57
|
-
--sp-component-input-role-border: var(--sp-
|
|
58
|
-
--sp-component-input-role-bg: var(--sp-
|
|
59
|
-
--sp-component-input-role-text: var(--sp-
|
|
60
|
-
--sp-component-input-role-placeholder: var(--sp-
|
|
61
|
-
--sp-component-input-role-border-focus: var(--sp-
|
|
62
|
-
--sp-component-input-role-ring: var(--sp-
|
|
63
|
-
--sp-component-input-role-border-error: var(--sp-
|
|
64
|
-
--sp-component-input-role-bg-error: var(--sp-
|
|
65
|
-
--sp-component-input-role-text-error: var(--sp-
|
|
66
|
-
--sp-component-input-role-border-success: var(--sp-
|
|
67
|
-
--sp-component-input-role-bg-success: var(--sp-
|
|
68
|
-
--sp-component-input-role-text-success: var(--sp-
|
|
69
|
-
--sp-component-input-role-bg-disabled: var(--sp-
|
|
70
|
-
--sp-component-input-role-text-disabled: var(--sp-
|
|
71
|
-
|
|
72
|
-
--sp-component-input-role-border-disabled: var(--sp-color-neutral-200);
|
|
73
|
+
--sp-component-input-role-border: var(--sp-form-default-border);
|
|
74
|
+
--sp-component-input-role-bg: var(--sp-form-default-bg);
|
|
75
|
+
--sp-component-input-role-text: var(--sp-form-default-text);
|
|
76
|
+
--sp-component-input-role-placeholder: var(--sp-form-default-placeholder);
|
|
77
|
+
--sp-component-input-role-border-focus: var(--sp-form-focus-border);
|
|
78
|
+
--sp-component-input-role-ring: var(--sp-form-focus-ring);
|
|
79
|
+
--sp-component-input-role-border-error: var(--sp-form-invalid-border);
|
|
80
|
+
--sp-component-input-role-bg-error: var(--sp-form-invalid-bg);
|
|
81
|
+
--sp-component-input-role-text-error: var(--sp-form-invalid-text);
|
|
82
|
+
--sp-component-input-role-border-success: var(--sp-form-valid-border);
|
|
83
|
+
--sp-component-input-role-bg-success: var(--sp-form-valid-bg);
|
|
84
|
+
--sp-component-input-role-text-success: var(--sp-form-valid-text);
|
|
85
|
+
--sp-component-input-role-bg-disabled: var(--sp-form-disabled-bg);
|
|
86
|
+
--sp-component-input-role-text-disabled: var(--sp-form-disabled-text);
|
|
87
|
+
--sp-component-input-role-border-disabled: var(--sp-form-disabled-border);
|
|
73
88
|
|
|
74
89
|
/* badge roles */
|
|
75
90
|
--sp-component-badge-font: var(--sp-font-family-sans);
|
|
@@ -78,12 +93,29 @@
|
|
|
78
93
|
--sp-component-badge-radius: var(--sp-radius-pill);
|
|
79
94
|
--sp-component-badge-primary-bg: var(--sp-button-primary-bg);
|
|
80
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);
|
|
81
99
|
--sp-component-badge-success-bg: var(--sp-badge-success-bg);
|
|
82
100
|
--sp-component-badge-success-text: var(--sp-badge-success-text);
|
|
83
101
|
--sp-component-badge-warning-bg: var(--sp-badge-warning-bg);
|
|
84
102
|
--sp-component-badge-warning-text: var(--sp-badge-warning-text);
|
|
85
103
|
--sp-component-badge-danger-bg: var(--sp-badge-danger-bg);
|
|
86
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
|
+
|
|
87
119
|
--sp-component-badge-padding-x-sm: var(--sp-space-8);
|
|
88
120
|
--sp-component-badge-padding-x-md: var(--sp-space-12);
|
|
89
121
|
--sp-component-badge-padding-x-lg: var(--sp-space-16);
|
|
@@ -106,6 +138,44 @@
|
|
|
106
138
|
--sp-component-iconbox-danger-text: var(--sp-icon-box-icon-danger);
|
|
107
139
|
--sp-component-iconbox-info-bg: var(--sp-color-info-50);
|
|
108
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);
|
|
109
179
|
}
|
|
110
180
|
|
|
111
181
|
/* BUTTONS -------------------------------------------------------------- */
|
|
@@ -116,7 +186,7 @@
|
|
|
116
186
|
gap: var(--sp-space-4);
|
|
117
187
|
padding: var(--sp-space-4) var(--sp-space-16);
|
|
118
188
|
border-radius: var(--sp-radius-md);
|
|
119
|
-
border:
|
|
189
|
+
border: var(--sp-component-border-width) solid var(--sp-component-button-border-base);
|
|
120
190
|
font-family: var(--sp-font-family-sans);
|
|
121
191
|
font-size: var(--sp-font-md-size);
|
|
122
192
|
line-height: 1;
|
|
@@ -149,6 +219,10 @@
|
|
|
149
219
|
width: 100%;
|
|
150
220
|
}
|
|
151
221
|
|
|
222
|
+
.sp-btn--pill {
|
|
223
|
+
border-radius: var(--sp-radius-pill);
|
|
224
|
+
}
|
|
225
|
+
|
|
152
226
|
.sp-btn--icon {
|
|
153
227
|
padding-inline: var(--sp-space-12);
|
|
154
228
|
padding-block: var(--sp-space-4);
|
|
@@ -173,16 +247,8 @@
|
|
|
173
247
|
line-height: var(--sp-font-lg-line-height);
|
|
174
248
|
}
|
|
175
249
|
|
|
176
|
-
/* Generic forced-state helpers (
|
|
177
|
-
.sp-btn.sp-btn--hover,
|
|
178
|
-
.sp-btn.is-hover {
|
|
179
|
-
/* no-op here; variant sections below define the actual hover colors */
|
|
180
|
-
}
|
|
250
|
+
/* Generic forced-state helpers (actual colors defined in variant sections below) */
|
|
181
251
|
|
|
182
|
-
.sp-btn.sp-btn--active,
|
|
183
|
-
.sp-btn.is-active {
|
|
184
|
-
/* no-op here; variant sections below define the actual active colors */
|
|
185
|
-
}
|
|
186
252
|
|
|
187
253
|
/* primary */
|
|
188
254
|
.sp-btn--primary {
|
|
@@ -308,6 +374,56 @@
|
|
|
308
374
|
color: var(--sp-component-button-success-text-disabled);
|
|
309
375
|
}
|
|
310
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
|
+
|
|
311
427
|
/* INPUTS --------------------------------------------------------------- */
|
|
312
428
|
|
|
313
429
|
.sp-input-wrapper {
|
|
@@ -341,7 +457,7 @@
|
|
|
341
457
|
appearance: none;
|
|
342
458
|
padding: var(--sp-space-4) var(--sp-space-16);
|
|
343
459
|
border-radius: var(--sp-radius-md);
|
|
344
|
-
border:
|
|
460
|
+
border: var(--sp-component-border-width) solid var(--sp-component-input-role-border);
|
|
345
461
|
background-color: var(--sp-component-input-role-bg);
|
|
346
462
|
color: var(--sp-component-input-role-text);
|
|
347
463
|
font-family: var(--sp-font-family-sans);
|
|
@@ -382,7 +498,7 @@
|
|
|
382
498
|
.sp-input:focus,
|
|
383
499
|
.sp-input--focus {
|
|
384
500
|
border-color: var(--sp-component-input-role-border-focus);
|
|
385
|
-
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);
|
|
386
502
|
outline: none;
|
|
387
503
|
}
|
|
388
504
|
|
|
@@ -423,7 +539,7 @@
|
|
|
423
539
|
border-radius: var(--sp-radius-lg);
|
|
424
540
|
padding: var(--sp-space-24);
|
|
425
541
|
box-shadow: var(--sp-component-card-shadow);
|
|
426
|
-
border:
|
|
542
|
+
border: var(--sp-component-border-width) solid var(--sp-component-card-border-base);
|
|
427
543
|
}
|
|
428
544
|
|
|
429
545
|
.sp-card p {
|
|
@@ -474,7 +590,7 @@
|
|
|
474
590
|
.sp-card--interactive:hover,
|
|
475
591
|
.sp-card--interactive:focus-visible,
|
|
476
592
|
.sp-card--interactive:focus-within {
|
|
477
|
-
transform: translateY(-
|
|
593
|
+
transform: translateY(calc(var(--sp-component-border-width) * -1));
|
|
478
594
|
box-shadow: var(--sp-component-card-shadow-elevated);
|
|
479
595
|
}
|
|
480
596
|
|
|
@@ -491,7 +607,7 @@
|
|
|
491
607
|
padding: var(--sp-component-badge-padding-y-md) var(--sp-component-badge-padding-x-md);
|
|
492
608
|
font-size: var(--sp-font-sm-size);
|
|
493
609
|
line-height: var(--sp-font-sm-line-height);
|
|
494
|
-
border:
|
|
610
|
+
border: var(--sp-component-border-width) solid transparent;
|
|
495
611
|
white-space: nowrap;
|
|
496
612
|
}
|
|
497
613
|
|
|
@@ -518,21 +634,70 @@
|
|
|
518
634
|
color: var(--sp-component-badge-primary-text);
|
|
519
635
|
}
|
|
520
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
|
+
|
|
521
651
|
.sp-badge--success {
|
|
522
652
|
background-color: var(--sp-component-badge-success-bg);
|
|
523
653
|
color: var(--sp-component-badge-success-text);
|
|
524
654
|
}
|
|
525
655
|
|
|
656
|
+
.sp-badge--success.sp-badge--interactive:hover {
|
|
657
|
+
background-color: var(--sp-component-badge-success-bg-hover);
|
|
658
|
+
}
|
|
659
|
+
|
|
526
660
|
.sp-badge--warning {
|
|
527
661
|
background-color: var(--sp-component-badge-warning-bg);
|
|
528
662
|
color: var(--sp-component-badge-warning-text);
|
|
529
663
|
}
|
|
530
664
|
|
|
665
|
+
.sp-badge--warning.sp-badge--interactive:hover {
|
|
666
|
+
background-color: var(--sp-component-badge-warning-bg-hover);
|
|
667
|
+
}
|
|
668
|
+
|
|
531
669
|
.sp-badge--danger {
|
|
532
670
|
background-color: var(--sp-component-badge-danger-bg);
|
|
533
671
|
color: var(--sp-component-badge-danger-text);
|
|
534
672
|
}
|
|
535
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
|
+
|
|
536
701
|
/* ICON BOXES ----------------------------------------------------------- */
|
|
537
702
|
|
|
538
703
|
.sp-iconbox {
|
|
@@ -637,4 +802,145 @@
|
|
|
637
802
|
background-color: var(--sp-component-iconbox-info-bg);
|
|
638
803
|
color: var(--sp-component-iconbox-info-text);
|
|
639
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
|
+
}
|
|
640
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;
|