@phcdevworks/spectre-ui 1.1.2 → 1.3.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 +38 -11
- package/dist/base.css +35 -22
- package/dist/components.css +256 -63
- package/dist/index.cjs +88 -12
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +260 -66
- package/dist/index.d.cts +29 -0
- package/dist/index.d.ts +29 -0
- package/dist/index.js +88 -12
- package/dist/index.js.map +1 -1
- package/dist/utilities.css +31 -19
- package/package.json +25 -13
package/dist/components.css
CHANGED
|
@@ -3,17 +3,20 @@
|
|
|
3
3
|
--sp-surface-card: #ffffff;
|
|
4
4
|
--sp-surface-input: #ffffff;
|
|
5
5
|
--sp-surface-overlay: rgba(20, 27, 36, 0.6);
|
|
6
|
+
--sp-surface-alternate: #eef1f6;
|
|
6
7
|
--sp-surface-hero: linear-gradient(135deg, #5b6ee1 0%, #6f3fd7 100%);
|
|
7
8
|
--sp-text-on-page-default: #141b24;
|
|
8
9
|
--sp-text-on-page-muted: #4b576a;
|
|
9
10
|
--sp-text-on-page-subtle: #657287;
|
|
10
11
|
--sp-text-on-page-meta: #657287;
|
|
12
|
+
--sp-text-on-page-brand: #1f57db;
|
|
11
13
|
--sp-text-on-surface-default: #141b24;
|
|
12
14
|
--sp-text-on-surface-muted: #4b576a;
|
|
13
15
|
--sp-text-on-surface-subtle: #657287;
|
|
14
16
|
--sp-text-on-surface-meta: #657287;
|
|
17
|
+
--sp-text-on-surface-brand: #1f57db;
|
|
15
18
|
--sp-component-card-text: #141b24;
|
|
16
|
-
--sp-component-card-text-muted: #
|
|
19
|
+
--sp-component-card-text-muted: #4b576a;
|
|
17
20
|
--sp-component-input-text: #141b24;
|
|
18
21
|
--sp-component-input-placeholder: #657287;
|
|
19
22
|
--sp-button-text-default: #141b24;
|
|
@@ -110,20 +113,8 @@
|
|
|
110
113
|
--sp-color-focus-primary: #336df4;
|
|
111
114
|
--sp-color-focus-error: #ef4444;
|
|
112
115
|
--sp-color-focus-info: #0369a1;
|
|
113
|
-
--sp-color-white
|
|
114
|
-
--sp-color-
|
|
115
|
-
--sp-color-white-2: f;
|
|
116
|
-
--sp-color-white-3: f;
|
|
117
|
-
--sp-color-white-4: f;
|
|
118
|
-
--sp-color-white-5: f;
|
|
119
|
-
--sp-color-white-6: f;
|
|
120
|
-
--sp-color-black-0: #;
|
|
121
|
-
--sp-color-black-1: 0;
|
|
122
|
-
--sp-color-black-2: 0;
|
|
123
|
-
--sp-color-black-3: 0;
|
|
124
|
-
--sp-color-black-4: 0;
|
|
125
|
-
--sp-color-black-5: 0;
|
|
126
|
-
--sp-color-black-6: 0;
|
|
116
|
+
--sp-color-white: #ffffff;
|
|
117
|
+
--sp-color-black: #000000;
|
|
127
118
|
--sp-space-0: 0rem;
|
|
128
119
|
--sp-space-4: 0.25rem;
|
|
129
120
|
--sp-space-8: 0.5rem;
|
|
@@ -172,13 +163,25 @@
|
|
|
172
163
|
--sp-font-md-weight: 500;
|
|
173
164
|
--sp-font-lg-size: 1.25rem;
|
|
174
165
|
--sp-font-lg-line-height: 2rem;
|
|
175
|
-
--sp-font-lg-weight:
|
|
166
|
+
--sp-font-lg-weight: 600;
|
|
176
167
|
--sp-font-xl-size: 1.5rem;
|
|
177
168
|
--sp-font-xl-line-height: 2.125rem;
|
|
178
169
|
--sp-font-xl-weight: 600;
|
|
179
170
|
--sp-font-2xl-size: 1.875rem;
|
|
180
171
|
--sp-font-2xl-line-height: 2.5rem;
|
|
181
|
-
--sp-font-2xl-weight:
|
|
172
|
+
--sp-font-2xl-weight: 700;
|
|
173
|
+
--sp-font-3xl-size: 2.25rem;
|
|
174
|
+
--sp-font-3xl-line-height: 2.75rem;
|
|
175
|
+
--sp-font-3xl-weight: 700;
|
|
176
|
+
--sp-font-4xl-size: 3rem;
|
|
177
|
+
--sp-font-4xl-line-height: 3.5rem;
|
|
178
|
+
--sp-font-4xl-weight: 800;
|
|
179
|
+
--sp-font-5xl-size: 3.75rem;
|
|
180
|
+
--sp-font-5xl-line-height: 4.25rem;
|
|
181
|
+
--sp-font-5xl-weight: 800;
|
|
182
|
+
--sp-font-6xl-size: 4.5rem;
|
|
183
|
+
--sp-font-6xl-line-height: 5rem;
|
|
184
|
+
--sp-font-6xl-weight: 900;
|
|
182
185
|
--sp-font-xs-letter-spacing: 0.02em;
|
|
183
186
|
--sp-text-on-page-default: #141b24;
|
|
184
187
|
--sp-text-on-page-muted: #4b576a;
|
|
@@ -250,6 +253,7 @@
|
|
|
250
253
|
--sp-button-primary-text: #ffffff;
|
|
251
254
|
--sp-button-primary-textdisabled: #8a96ad;
|
|
252
255
|
--sp-button-primary-focusring: rgba(14, 165, 233, 0.4);
|
|
256
|
+
--sp-button-primary-focusvisible: rgba(14, 165, 233, 0.4);
|
|
253
257
|
--sp-button-secondary-bg: #ffffff;
|
|
254
258
|
--sp-button-secondary-bghover: #f7f8fb;
|
|
255
259
|
--sp-button-secondary-bgactive: #eef1f6;
|
|
@@ -259,6 +263,7 @@
|
|
|
259
263
|
--sp-button-secondary-border: #075985;
|
|
260
264
|
--sp-button-secondary-borderdisabled: #d9dfeb;
|
|
261
265
|
--sp-button-secondary-focusring: rgba(14, 165, 233, 0.4);
|
|
266
|
+
--sp-button-secondary-focusvisible: rgba(14, 165, 233, 0.4);
|
|
262
267
|
--sp-button-ghost-bg: transparent;
|
|
263
268
|
--sp-button-ghost-bghover: #f0f9ff;
|
|
264
269
|
--sp-button-ghost-bgactive: #e0f2fe;
|
|
@@ -266,6 +271,7 @@
|
|
|
266
271
|
--sp-button-ghost-text: #075985;
|
|
267
272
|
--sp-button-ghost-textdisabled: #8a96ad;
|
|
268
273
|
--sp-button-ghost-focusring: rgba(14, 165, 233, 0.4);
|
|
274
|
+
--sp-button-ghost-focusvisible: rgba(14, 165, 233, 0.4);
|
|
269
275
|
--sp-button-danger-bg: #dc2626;
|
|
270
276
|
--sp-button-danger-bghover: #b91c1c;
|
|
271
277
|
--sp-button-danger-bgactive: #991b1b;
|
|
@@ -295,6 +301,7 @@
|
|
|
295
301
|
--sp-button-accent-text: #ffffff;
|
|
296
302
|
--sp-button-accent-textdisabled: #8a96ad;
|
|
297
303
|
--sp-button-accent-focusring: rgba(133, 79, 247, 0.4);
|
|
304
|
+
--sp-button-accent-focusvisible: rgba(133, 79, 247, 0.4);
|
|
298
305
|
--sp-form-default-bg: #ffffff;
|
|
299
306
|
--sp-form-default-border: #b7c1d4;
|
|
300
307
|
--sp-form-default-text: #141b24;
|
|
@@ -302,6 +309,8 @@
|
|
|
302
309
|
--sp-form-hover-border: #0ea5e9;
|
|
303
310
|
--sp-form-focus-border: #0ea5e9;
|
|
304
311
|
--sp-form-focus-ring: #0ea5e9;
|
|
312
|
+
--sp-form-focusvisible-border: #0ea5e9;
|
|
313
|
+
--sp-form-focusvisible-ring: #0ea5e9;
|
|
305
314
|
--sp-form-valid-border: #22c55e;
|
|
306
315
|
--sp-form-valid-bg: #f0fdf4;
|
|
307
316
|
--sp-form-valid-text: #15803d;
|
|
@@ -341,15 +350,18 @@
|
|
|
341
350
|
--sp-surface-card: #222b38;
|
|
342
351
|
--sp-surface-input: #374253;
|
|
343
352
|
--sp-surface-overlay: #222b38;
|
|
344
|
-
--sp-surface-
|
|
353
|
+
--sp-surface-alternate: #222b38;
|
|
354
|
+
--sp-surface-hero: linear-gradient(135deg, #5d28b8 0%, #401f75 100%);
|
|
345
355
|
--sp-text-on-page-default: #f7f8fb;
|
|
346
356
|
--sp-text-on-page-muted: #b7c1d4;
|
|
347
357
|
--sp-text-on-page-subtle: #8a96ad;
|
|
348
358
|
--sp-text-on-page-meta: #8a96ad;
|
|
359
|
+
--sp-text-on-page-brand: #5a92ff;
|
|
349
360
|
--sp-text-on-surface-default: #eef1f6;
|
|
350
361
|
--sp-text-on-surface-muted: #b7c1d4;
|
|
351
362
|
--sp-text-on-surface-subtle: #8a96ad;
|
|
352
363
|
--sp-text-on-surface-meta: #8a96ad;
|
|
364
|
+
--sp-text-on-surface-brand: #5a92ff;
|
|
353
365
|
--sp-component-card-text: #eef1f6;
|
|
354
366
|
--sp-component-card-text-muted: #b7c1d4;
|
|
355
367
|
--sp-component-input-text: #eef1f6;
|
|
@@ -368,14 +380,14 @@
|
|
|
368
380
|
--sp-badge-danger-text: #fee2e2;
|
|
369
381
|
--sp-icon-box-bg: #222b38;
|
|
370
382
|
--sp-icon-box-border: #374253;
|
|
371
|
-
--sp-icon-box-icon-default: #
|
|
383
|
+
--sp-icon-box-icon-default: #38bdf8;
|
|
372
384
|
--sp-icon-box-icon-success: #4ade80;
|
|
373
385
|
--sp-icon-box-icon-warning: #ffc21a;
|
|
374
386
|
--sp-icon-box-icon-danger: #f87171;
|
|
375
387
|
}
|
|
376
388
|
@layer components {
|
|
377
389
|
|
|
378
|
-
:root {
|
|
390
|
+
:where(:root) {
|
|
379
391
|
/* structural border width */
|
|
380
392
|
--sp-component-border-width: var(--sp-border-width-base);
|
|
381
393
|
|
|
@@ -431,8 +443,7 @@
|
|
|
431
443
|
|
|
432
444
|
/* card roles */
|
|
433
445
|
--sp-component-card-bg: var(--sp-surface-card);
|
|
434
|
-
--sp-component-card-text
|
|
435
|
-
--sp-component-card-text-muted: var(--sp-text-on-surface-muted);
|
|
446
|
+
/* --sp-component-card-text and --sp-component-card-text-muted are now provided directly by the token package */
|
|
436
447
|
--sp-component-card-border: var(--sp-color-neutral-200);
|
|
437
448
|
--sp-component-card-border-base: var(--sp-component-card-ghost-border);
|
|
438
449
|
--sp-component-card-shadow: var(--sp-shadow-sm);
|
|
@@ -448,8 +459,8 @@
|
|
|
448
459
|
/* input roles */
|
|
449
460
|
--sp-component-input-role-border: var(--sp-form-default-border);
|
|
450
461
|
--sp-component-input-role-bg: var(--sp-form-default-bg);
|
|
451
|
-
--sp-component-input-role-text: var(--sp-
|
|
452
|
-
--sp-component-input-role-placeholder: var(--sp-
|
|
462
|
+
--sp-component-input-role-text: var(--sp-component-input-text);
|
|
463
|
+
--sp-component-input-role-placeholder: var(--sp-component-input-placeholder);
|
|
453
464
|
--sp-component-input-role-border-hover: var(--sp-form-hover-border);
|
|
454
465
|
--sp-component-input-role-border-focus: var(--sp-form-focus-border);
|
|
455
466
|
--sp-component-input-role-ring: var(--sp-form-focus-ring);
|
|
@@ -510,7 +521,7 @@
|
|
|
510
521
|
--sp-component-iconbox-success-bg: var(--sp-color-success-50);
|
|
511
522
|
--sp-component-iconbox-success-text: var(--sp-icon-box-icon-success);
|
|
512
523
|
--sp-component-iconbox-warning-bg: var(--sp-color-warning-50);
|
|
513
|
-
--sp-component-iconbox-warning-text: var(--sp-
|
|
524
|
+
--sp-component-iconbox-warning-text: var(--sp-color-warning-800);
|
|
514
525
|
--sp-component-iconbox-danger-bg: var(--sp-color-error-50);
|
|
515
526
|
--sp-component-iconbox-danger-text: var(--sp-icon-box-icon-danger);
|
|
516
527
|
--sp-component-iconbox-info-bg: var(--sp-color-info-50);
|
|
@@ -539,10 +550,13 @@
|
|
|
539
550
|
--sp-component-rating-star-filled: var(--sp-color-warning-500);
|
|
540
551
|
--sp-component-rating-star-empty: var(--sp-color-neutral-200);
|
|
541
552
|
--sp-component-rating-text: var(--sp-color-neutral-500);
|
|
553
|
+
--sp-component-rating-size-sm: var(--sp-font-sm-size);
|
|
554
|
+
--sp-component-rating-size-md: var(--sp-font-md-size);
|
|
555
|
+
--sp-component-rating-size-lg: var(--sp-font-lg-size);
|
|
542
556
|
}
|
|
543
557
|
|
|
544
558
|
/* dark mode overrides mapped from Spectre token mode definitions */
|
|
545
|
-
:root[data-spectre-theme="dark"] {
|
|
559
|
+
:where(:root[data-spectre-theme="dark"]) {
|
|
546
560
|
--sp-component-testimonial-bg: var(--sp-color-neutral-800);
|
|
547
561
|
--sp-component-testimonial-border: var(--sp-color-neutral-700);
|
|
548
562
|
--sp-component-testimonial-text: var(--sp-color-neutral-200);
|
|
@@ -558,23 +572,6 @@
|
|
|
558
572
|
--sp-component-rating-star-filled: var(--sp-color-warning-400);
|
|
559
573
|
--sp-component-rating-star-empty: var(--sp-color-neutral-700);
|
|
560
574
|
--sp-component-rating-text: var(--sp-color-neutral-400);
|
|
561
|
-
|
|
562
|
-
--sp-component-badge-success-bg: var(--sp-color-success-800);
|
|
563
|
-
--sp-component-badge-success-text: var(--sp-color-success-100);
|
|
564
|
-
--sp-component-badge-warning-bg: var(--sp-color-warning-800);
|
|
565
|
-
--sp-component-badge-warning-text: var(--sp-color-warning-100);
|
|
566
|
-
--sp-component-badge-danger-bg: var(--sp-color-error-800);
|
|
567
|
-
--sp-component-badge-danger-text: var(--sp-color-error-100);
|
|
568
|
-
--sp-component-badge-neutral-bg: var(--sp-color-neutral-700);
|
|
569
|
-
--sp-component-badge-neutral-text: var(--sp-color-neutral-100);
|
|
570
|
-
--sp-component-badge-info-bg: var(--sp-color-info-900);
|
|
571
|
-
--sp-component-badge-info-text: var(--sp-color-info-100);
|
|
572
|
-
|
|
573
|
-
--sp-component-badge-success-bg-hover: var(--sp-color-success-700);
|
|
574
|
-
--sp-component-badge-warning-bg-hover: var(--sp-color-warning-800);
|
|
575
|
-
--sp-component-badge-danger-bg-hover: var(--sp-color-error-700);
|
|
576
|
-
--sp-component-badge-neutral-bg-hover: var(--sp-color-neutral-600);
|
|
577
|
-
--sp-component-badge-info-bg-hover: var(--sp-color-info-700);
|
|
578
575
|
}
|
|
579
576
|
|
|
580
577
|
/* BUTTONS -------------------------------------------------------------- */
|
|
@@ -588,7 +585,7 @@
|
|
|
588
585
|
border: var(--sp-component-border-width) solid var(--sp-component-button-border-base);
|
|
589
586
|
font-family: var(--sp-font-family-sans);
|
|
590
587
|
font-size: var(--sp-font-md-size);
|
|
591
|
-
line-height:
|
|
588
|
+
line-height: var(--sp-font-md-line-height);
|
|
592
589
|
font-weight: var(--sp-font-md-weight);
|
|
593
590
|
text-decoration: none;
|
|
594
591
|
appearance: none;
|
|
@@ -614,6 +611,13 @@
|
|
|
614
611
|
opacity: var(--sp-opacity-active);
|
|
615
612
|
}
|
|
616
613
|
|
|
614
|
+
.sp-btn:focus-visible,
|
|
615
|
+
.sp-btn--focus,
|
|
616
|
+
.sp-btn.is-focus {
|
|
617
|
+
outline: none;
|
|
618
|
+
box-shadow: 0 0 0 calc(var(--sp-focus-ring-width) + var(--sp-component-border-width)) var(--sp-color-focus-primary);
|
|
619
|
+
}
|
|
620
|
+
|
|
617
621
|
.sp-btn--full {
|
|
618
622
|
width: 100%;
|
|
619
623
|
}
|
|
@@ -899,10 +903,17 @@
|
|
|
899
903
|
}
|
|
900
904
|
|
|
901
905
|
.sp-input:hover,
|
|
902
|
-
.sp-input--hover
|
|
906
|
+
.sp-input--hover,
|
|
907
|
+
.sp-input.is-hover {
|
|
903
908
|
border-color: var(--sp-component-input-role-border-hover);
|
|
904
909
|
}
|
|
905
910
|
|
|
911
|
+
.sp-input:active,
|
|
912
|
+
.sp-input--active,
|
|
913
|
+
.sp-input.is-active {
|
|
914
|
+
opacity: var(--sp-opacity-active);
|
|
915
|
+
}
|
|
916
|
+
|
|
906
917
|
.sp-input:focus,
|
|
907
918
|
.sp-input--focus,
|
|
908
919
|
.sp-input.is-focus {
|
|
@@ -930,6 +941,7 @@
|
|
|
930
941
|
background-color: var(--sp-component-input-role-bg-disabled);
|
|
931
942
|
color: var(--sp-component-input-role-text-disabled);
|
|
932
943
|
border-color: var(--sp-component-input-role-border-disabled);
|
|
944
|
+
box-shadow: none;
|
|
933
945
|
cursor: not-allowed;
|
|
934
946
|
pointer-events: none;
|
|
935
947
|
}
|
|
@@ -938,7 +950,6 @@
|
|
|
938
950
|
color: var(--sp-component-input-role-text-disabled);
|
|
939
951
|
}
|
|
940
952
|
|
|
941
|
-
.sp-input--disabled,
|
|
942
953
|
.sp-input--disabled:focus {
|
|
943
954
|
box-shadow: none;
|
|
944
955
|
}
|
|
@@ -1011,7 +1022,8 @@
|
|
|
1011
1022
|
cursor: pointer;
|
|
1012
1023
|
transition:
|
|
1013
1024
|
transform var(--sp-duration-fast) var(--sp-easing-out),
|
|
1014
|
-
box-shadow var(--sp-duration-fast) var(--sp-easing-out)
|
|
1025
|
+
box-shadow var(--sp-duration-fast) var(--sp-easing-out),
|
|
1026
|
+
opacity var(--sp-duration-fast) var(--sp-easing-out);
|
|
1015
1027
|
}
|
|
1016
1028
|
|
|
1017
1029
|
.sp-card--interactive:hover,
|
|
@@ -1025,6 +1037,13 @@
|
|
|
1025
1037
|
box-shadow: var(--sp-component-card-shadow-elevated);
|
|
1026
1038
|
}
|
|
1027
1039
|
|
|
1040
|
+
.sp-card--interactive:active,
|
|
1041
|
+
.sp-card--interactive.sp-card--active,
|
|
1042
|
+
.sp-card--interactive.is-active {
|
|
1043
|
+
opacity: var(--sp-opacity-active);
|
|
1044
|
+
transform: translateY(0);
|
|
1045
|
+
}
|
|
1046
|
+
|
|
1028
1047
|
/* BADGES --------------------------------------------------------------- */
|
|
1029
1048
|
|
|
1030
1049
|
.sp-badge {
|
|
@@ -1066,7 +1085,8 @@
|
|
|
1066
1085
|
}
|
|
1067
1086
|
|
|
1068
1087
|
.sp-badge--primary.sp-badge--interactive:hover,
|
|
1069
|
-
.sp-badge--primary.sp-badge--interactive.sp-badge--hover
|
|
1088
|
+
.sp-badge--primary.sp-badge--interactive.sp-badge--hover,
|
|
1089
|
+
.sp-badge--primary.sp-badge--interactive.is-hover {
|
|
1070
1090
|
background-color: var(--sp-component-badge-primary-bg-hover);
|
|
1071
1091
|
}
|
|
1072
1092
|
|
|
@@ -1077,7 +1097,8 @@
|
|
|
1077
1097
|
}
|
|
1078
1098
|
|
|
1079
1099
|
.sp-badge--secondary.sp-badge--interactive:hover,
|
|
1080
|
-
.sp-badge--secondary.sp-badge--interactive.sp-badge--hover
|
|
1100
|
+
.sp-badge--secondary.sp-badge--interactive.sp-badge--hover,
|
|
1101
|
+
.sp-badge--secondary.sp-badge--interactive.is-hover {
|
|
1081
1102
|
background-color: var(--sp-component-badge-secondary-bg-hover);
|
|
1082
1103
|
}
|
|
1083
1104
|
|
|
@@ -1087,7 +1108,8 @@
|
|
|
1087
1108
|
}
|
|
1088
1109
|
|
|
1089
1110
|
.sp-badge--success.sp-badge--interactive:hover,
|
|
1090
|
-
.sp-badge--success.sp-badge--interactive.sp-badge--hover
|
|
1111
|
+
.sp-badge--success.sp-badge--interactive.sp-badge--hover,
|
|
1112
|
+
.sp-badge--success.sp-badge--interactive.is-hover {
|
|
1091
1113
|
background-color: var(--sp-component-badge-success-bg-hover);
|
|
1092
1114
|
}
|
|
1093
1115
|
|
|
@@ -1097,7 +1119,8 @@
|
|
|
1097
1119
|
}
|
|
1098
1120
|
|
|
1099
1121
|
.sp-badge--warning.sp-badge--interactive:hover,
|
|
1100
|
-
.sp-badge--warning.sp-badge--interactive.sp-badge--hover
|
|
1122
|
+
.sp-badge--warning.sp-badge--interactive.sp-badge--hover,
|
|
1123
|
+
.sp-badge--warning.sp-badge--interactive.is-hover {
|
|
1101
1124
|
background-color: var(--sp-component-badge-warning-bg-hover);
|
|
1102
1125
|
}
|
|
1103
1126
|
|
|
@@ -1107,7 +1130,8 @@
|
|
|
1107
1130
|
}
|
|
1108
1131
|
|
|
1109
1132
|
.sp-badge--danger.sp-badge--interactive:hover,
|
|
1110
|
-
.sp-badge--danger.sp-badge--interactive.sp-badge--hover
|
|
1133
|
+
.sp-badge--danger.sp-badge--interactive.sp-badge--hover,
|
|
1134
|
+
.sp-badge--danger.sp-badge--interactive.is-hover {
|
|
1111
1135
|
background-color: var(--sp-component-badge-danger-bg-hover);
|
|
1112
1136
|
}
|
|
1113
1137
|
|
|
@@ -1117,7 +1141,8 @@
|
|
|
1117
1141
|
}
|
|
1118
1142
|
|
|
1119
1143
|
.sp-badge--neutral.sp-badge--interactive:hover,
|
|
1120
|
-
.sp-badge--neutral.sp-badge--interactive.sp-badge--hover
|
|
1144
|
+
.sp-badge--neutral.sp-badge--interactive.sp-badge--hover,
|
|
1145
|
+
.sp-badge--neutral.sp-badge--interactive.is-hover {
|
|
1121
1146
|
background-color: var(--sp-component-badge-neutral-bg-hover);
|
|
1122
1147
|
}
|
|
1123
1148
|
|
|
@@ -1127,13 +1152,32 @@
|
|
|
1127
1152
|
}
|
|
1128
1153
|
|
|
1129
1154
|
.sp-badge--info.sp-badge--interactive:hover,
|
|
1130
|
-
.sp-badge--info.sp-badge--interactive.sp-badge--hover
|
|
1155
|
+
.sp-badge--info.sp-badge--interactive.sp-badge--hover,
|
|
1156
|
+
.sp-badge--info.sp-badge--interactive.is-hover {
|
|
1131
1157
|
background-color: var(--sp-component-badge-info-bg-hover);
|
|
1132
1158
|
}
|
|
1133
1159
|
|
|
1134
1160
|
.sp-badge--interactive {
|
|
1135
1161
|
cursor: pointer;
|
|
1136
|
-
transition:
|
|
1162
|
+
transition:
|
|
1163
|
+
background-color var(--sp-duration-fast) var(--sp-easing-out),
|
|
1164
|
+
color var(--sp-duration-fast) var(--sp-easing-out),
|
|
1165
|
+
box-shadow var(--sp-duration-fast) var(--sp-easing-out),
|
|
1166
|
+
border-color var(--sp-duration-fast) var(--sp-easing-out),
|
|
1167
|
+
opacity var(--sp-duration-fast) var(--sp-easing-out);
|
|
1168
|
+
}
|
|
1169
|
+
|
|
1170
|
+
.sp-badge--interactive:active,
|
|
1171
|
+
.sp-badge--interactive.sp-badge--active,
|
|
1172
|
+
.sp-badge--interactive.is-active {
|
|
1173
|
+
opacity: var(--sp-opacity-active);
|
|
1174
|
+
}
|
|
1175
|
+
|
|
1176
|
+
.sp-badge--interactive:focus-visible,
|
|
1177
|
+
.sp-badge--interactive.sp-badge--focus,
|
|
1178
|
+
.sp-badge--interactive.is-focus {
|
|
1179
|
+
outline: none;
|
|
1180
|
+
box-shadow: 0 0 0 calc(var(--sp-focus-ring-width) + var(--sp-component-border-width)) var(--sp-color-focus-primary);
|
|
1137
1181
|
}
|
|
1138
1182
|
|
|
1139
1183
|
.sp-badge--disabled {
|
|
@@ -1157,7 +1201,12 @@
|
|
|
1157
1201
|
background-color: var(--sp-component-iconbox-primary-bg);
|
|
1158
1202
|
font-family: var(--sp-font-family-sans);
|
|
1159
1203
|
font-weight: var(--sp-font-md-weight);
|
|
1160
|
-
|
|
1204
|
+
transition:
|
|
1205
|
+
background-color var(--sp-duration-fast) var(--sp-easing-out),
|
|
1206
|
+
color var(--sp-duration-fast) var(--sp-easing-out),
|
|
1207
|
+
box-shadow var(--sp-duration-fast) var(--sp-easing-out),
|
|
1208
|
+
border-color var(--sp-duration-fast) var(--sp-easing-out),
|
|
1209
|
+
opacity var(--sp-duration-fast) var(--sp-easing-out);
|
|
1161
1210
|
}
|
|
1162
1211
|
|
|
1163
1212
|
/* Harden icon rendering:
|
|
@@ -1165,11 +1214,6 @@
|
|
|
1165
1214
|
- force currentColor for common svg shapes
|
|
1166
1215
|
- preserve stroke-only icons (fill="none")
|
|
1167
1216
|
*/
|
|
1168
|
-
.sp-iconbox,
|
|
1169
|
-
.sp-iconbox>i {
|
|
1170
|
-
line-height: 0;
|
|
1171
|
-
}
|
|
1172
|
-
|
|
1173
1217
|
.sp-iconbox>i {
|
|
1174
1218
|
display: inline-flex;
|
|
1175
1219
|
align-items: center;
|
|
@@ -1188,7 +1232,6 @@
|
|
|
1188
1232
|
}
|
|
1189
1233
|
|
|
1190
1234
|
/* default to inheriting via currentColor */
|
|
1191
|
-
.sp-iconbox svg,
|
|
1192
1235
|
.sp-iconbox svg path,
|
|
1193
1236
|
.sp-iconbox svg circle,
|
|
1194
1237
|
.sp-iconbox svg rect,
|
|
@@ -1226,6 +1269,10 @@
|
|
|
1226
1269
|
font-size: var(--sp-font-lg-size);
|
|
1227
1270
|
}
|
|
1228
1271
|
|
|
1272
|
+
.sp-iconbox--pill {
|
|
1273
|
+
border-radius: var(--sp-radius-pill);
|
|
1274
|
+
}
|
|
1275
|
+
|
|
1229
1276
|
.sp-iconbox--primary {
|
|
1230
1277
|
background-color: var(--sp-component-iconbox-primary-bg);
|
|
1231
1278
|
color: var(--sp-component-iconbox-primary-text);
|
|
@@ -1251,9 +1298,35 @@
|
|
|
1251
1298
|
color: var(--sp-component-iconbox-info-text);
|
|
1252
1299
|
}
|
|
1253
1300
|
|
|
1301
|
+
.sp-iconbox--interactive {
|
|
1302
|
+
cursor: pointer;
|
|
1303
|
+
}
|
|
1304
|
+
|
|
1305
|
+
.sp-iconbox--interactive:hover,
|
|
1306
|
+
.sp-iconbox--interactive.sp-iconbox--hover,
|
|
1307
|
+
.sp-iconbox--interactive.is-hover {
|
|
1308
|
+
opacity: var(--sp-opacity-hover);
|
|
1309
|
+
}
|
|
1310
|
+
|
|
1311
|
+
.sp-iconbox--interactive:active,
|
|
1312
|
+
.sp-iconbox--interactive.sp-iconbox--active,
|
|
1313
|
+
.sp-iconbox--interactive.is-active {
|
|
1314
|
+
opacity: var(--sp-opacity-active);
|
|
1315
|
+
}
|
|
1316
|
+
|
|
1317
|
+
.sp-iconbox--interactive:focus-visible,
|
|
1318
|
+
.sp-iconbox--interactive.sp-iconbox--focus,
|
|
1319
|
+
.sp-iconbox--interactive.is-focus {
|
|
1320
|
+
outline: none;
|
|
1321
|
+
box-shadow: 0 0 0 calc(var(--sp-focus-ring-width) + var(--sp-component-border-width)) var(--sp-color-focus-primary);
|
|
1322
|
+
}
|
|
1323
|
+
|
|
1324
|
+
.sp-iconbox:disabled,
|
|
1325
|
+
.sp-iconbox[aria-disabled="true"],
|
|
1254
1326
|
.sp-iconbox--disabled {
|
|
1255
1327
|
opacity: var(--sp-opacity-disabled);
|
|
1256
1328
|
pointer-events: none;
|
|
1329
|
+
cursor: not-allowed;
|
|
1257
1330
|
}
|
|
1258
1331
|
|
|
1259
1332
|
.sp-iconbox--loading {
|
|
@@ -1283,6 +1356,37 @@
|
|
|
1283
1356
|
pointer-events: none;
|
|
1284
1357
|
}
|
|
1285
1358
|
|
|
1359
|
+
.sp-testimonial--interactive {
|
|
1360
|
+
cursor: pointer;
|
|
1361
|
+
transition:
|
|
1362
|
+
transform var(--sp-duration-fast) var(--sp-easing-out),
|
|
1363
|
+
box-shadow var(--sp-duration-fast) var(--sp-easing-out),
|
|
1364
|
+
opacity var(--sp-duration-fast) var(--sp-easing-out);
|
|
1365
|
+
}
|
|
1366
|
+
|
|
1367
|
+
.sp-testimonial--interactive:hover,
|
|
1368
|
+
.sp-testimonial--interactive:focus-within,
|
|
1369
|
+
.sp-testimonial--interactive.sp-testimonial--hover,
|
|
1370
|
+
.sp-testimonial--interactive.is-hover {
|
|
1371
|
+
transform: translateY(calc(var(--sp-component-border-width) * -1));
|
|
1372
|
+
box-shadow: var(--sp-shadow-lg);
|
|
1373
|
+
}
|
|
1374
|
+
|
|
1375
|
+
.sp-testimonial--interactive:active,
|
|
1376
|
+
.sp-testimonial--interactive.sp-testimonial--active,
|
|
1377
|
+
.sp-testimonial--interactive.is-active {
|
|
1378
|
+
opacity: var(--sp-opacity-active);
|
|
1379
|
+
transform: translateY(0);
|
|
1380
|
+
}
|
|
1381
|
+
|
|
1382
|
+
.sp-testimonial--interactive:focus-visible,
|
|
1383
|
+
.sp-testimonial--interactive.sp-testimonial--focus,
|
|
1384
|
+
.sp-testimonial--interactive.is-focus {
|
|
1385
|
+
outline: none;
|
|
1386
|
+
transform: translateY(calc(var(--sp-component-border-width) * -1));
|
|
1387
|
+
box-shadow: 0 0 0 calc(var(--sp-focus-ring-width) + var(--sp-component-border-width)) var(--sp-color-focus-primary);
|
|
1388
|
+
}
|
|
1389
|
+
|
|
1286
1390
|
.sp-testimonial-quote {
|
|
1287
1391
|
color: var(--sp-component-testimonial-text);
|
|
1288
1392
|
font-size: var(--sp-font-lg-size);
|
|
@@ -1334,7 +1438,10 @@
|
|
|
1334
1438
|
flex-direction: column;
|
|
1335
1439
|
gap: var(--sp-space-24);
|
|
1336
1440
|
position: relative;
|
|
1337
|
-
transition:
|
|
1441
|
+
transition:
|
|
1442
|
+
transform var(--sp-duration-fast) var(--sp-easing-out),
|
|
1443
|
+
box-shadow var(--sp-duration-fast) var(--sp-easing-out),
|
|
1444
|
+
opacity var(--sp-duration-fast) var(--sp-easing-out);
|
|
1338
1445
|
}
|
|
1339
1446
|
|
|
1340
1447
|
.sp-pricing-card--featured {
|
|
@@ -1355,6 +1462,49 @@
|
|
|
1355
1462
|
pointer-events: none;
|
|
1356
1463
|
}
|
|
1357
1464
|
|
|
1465
|
+
.sp-pricing-card--interactive {
|
|
1466
|
+
cursor: pointer;
|
|
1467
|
+
}
|
|
1468
|
+
|
|
1469
|
+
.sp-pricing-card--interactive:hover,
|
|
1470
|
+
.sp-pricing-card--interactive:focus-within,
|
|
1471
|
+
.sp-pricing-card--interactive.sp-pricing-card--hover,
|
|
1472
|
+
.sp-pricing-card--interactive.is-hover {
|
|
1473
|
+
transform: translateY(calc(var(--sp-component-border-width) * -1));
|
|
1474
|
+
box-shadow: var(--sp-shadow-lg);
|
|
1475
|
+
}
|
|
1476
|
+
|
|
1477
|
+
.sp-pricing-card--featured.sp-pricing-card--interactive:hover,
|
|
1478
|
+
.sp-pricing-card--featured.sp-pricing-card--interactive:focus-visible,
|
|
1479
|
+
.sp-pricing-card--featured.sp-pricing-card--interactive:focus-within,
|
|
1480
|
+
.sp-pricing-card--featured.sp-pricing-card--interactive.sp-pricing-card--hover,
|
|
1481
|
+
.sp-pricing-card--featured.sp-pricing-card--interactive.is-hover,
|
|
1482
|
+
.sp-pricing-card--featured.sp-pricing-card--interactive.sp-pricing-card--focus,
|
|
1483
|
+
.sp-pricing-card--featured.sp-pricing-card--interactive.is-focus {
|
|
1484
|
+
transform: scale(1.05) translateY(calc(var(--sp-component-border-width) * -1));
|
|
1485
|
+
}
|
|
1486
|
+
|
|
1487
|
+
.sp-pricing-card--interactive:active,
|
|
1488
|
+
.sp-pricing-card--interactive.sp-pricing-card--active,
|
|
1489
|
+
.sp-pricing-card--interactive.is-active {
|
|
1490
|
+
opacity: var(--sp-opacity-active);
|
|
1491
|
+
transform: translateY(0);
|
|
1492
|
+
}
|
|
1493
|
+
|
|
1494
|
+
.sp-pricing-card--featured.sp-pricing-card--interactive:active,
|
|
1495
|
+
.sp-pricing-card--featured.sp-pricing-card--interactive.sp-pricing-card--active,
|
|
1496
|
+
.sp-pricing-card--featured.sp-pricing-card--interactive.is-active {
|
|
1497
|
+
transform: scale(1.05) translateY(0);
|
|
1498
|
+
}
|
|
1499
|
+
|
|
1500
|
+
.sp-pricing-card--interactive:focus-visible,
|
|
1501
|
+
.sp-pricing-card--interactive.sp-pricing-card--focus,
|
|
1502
|
+
.sp-pricing-card--interactive.is-focus {
|
|
1503
|
+
outline: none;
|
|
1504
|
+
transform: translateY(calc(var(--sp-component-border-width) * -1));
|
|
1505
|
+
box-shadow: 0 0 0 calc(var(--sp-focus-ring-width) + var(--sp-component-border-width)) var(--sp-color-focus-primary);
|
|
1506
|
+
}
|
|
1507
|
+
|
|
1358
1508
|
.sp-pricing-card-badge {
|
|
1359
1509
|
position: absolute;
|
|
1360
1510
|
top: var(--sp-space-16);
|
|
@@ -1399,11 +1549,31 @@
|
|
|
1399
1549
|
display: inline-flex;
|
|
1400
1550
|
align-items: center;
|
|
1401
1551
|
gap: var(--sp-space-8);
|
|
1552
|
+
font-size: var(--sp-component-rating-size-md);
|
|
1553
|
+
border-radius: var(--sp-radius-md);
|
|
1554
|
+
transition:
|
|
1555
|
+
opacity var(--sp-duration-fast) var(--sp-easing-out),
|
|
1556
|
+
box-shadow var(--sp-duration-fast) var(--sp-easing-out);
|
|
1557
|
+
}
|
|
1558
|
+
|
|
1559
|
+
.sp-rating--sm {
|
|
1560
|
+
font-size: var(--sp-component-rating-size-sm);
|
|
1561
|
+
}
|
|
1562
|
+
|
|
1563
|
+
.sp-rating--md {
|
|
1564
|
+
font-size: var(--sp-component-rating-size-md);
|
|
1565
|
+
}
|
|
1566
|
+
|
|
1567
|
+
.sp-rating--lg {
|
|
1568
|
+
font-size: var(--sp-component-rating-size-lg);
|
|
1402
1569
|
}
|
|
1403
1570
|
|
|
1571
|
+
.sp-rating:disabled,
|
|
1572
|
+
.sp-rating[aria-disabled="true"],
|
|
1404
1573
|
.sp-rating--disabled {
|
|
1405
1574
|
opacity: var(--sp-opacity-disabled);
|
|
1406
1575
|
pointer-events: none;
|
|
1576
|
+
cursor: not-allowed;
|
|
1407
1577
|
}
|
|
1408
1578
|
|
|
1409
1579
|
.sp-rating--loading {
|
|
@@ -1411,6 +1581,29 @@
|
|
|
1411
1581
|
pointer-events: none;
|
|
1412
1582
|
}
|
|
1413
1583
|
|
|
1584
|
+
.sp-rating--interactive {
|
|
1585
|
+
cursor: pointer;
|
|
1586
|
+
}
|
|
1587
|
+
|
|
1588
|
+
.sp-rating--interactive:hover,
|
|
1589
|
+
.sp-rating--interactive.sp-rating--hover,
|
|
1590
|
+
.sp-rating--interactive.is-hover {
|
|
1591
|
+
opacity: var(--sp-opacity-hover);
|
|
1592
|
+
}
|
|
1593
|
+
|
|
1594
|
+
.sp-rating--interactive:active,
|
|
1595
|
+
.sp-rating--interactive.sp-rating--active,
|
|
1596
|
+
.sp-rating--interactive.is-active {
|
|
1597
|
+
opacity: var(--sp-opacity-active);
|
|
1598
|
+
}
|
|
1599
|
+
|
|
1600
|
+
.sp-rating--interactive:focus-visible,
|
|
1601
|
+
.sp-rating--interactive.sp-rating--focus,
|
|
1602
|
+
.sp-rating--interactive.is-focus {
|
|
1603
|
+
outline: none;
|
|
1604
|
+
box-shadow: 0 0 0 calc(var(--sp-focus-ring-width) + var(--sp-component-border-width)) var(--sp-color-focus-primary);
|
|
1605
|
+
}
|
|
1606
|
+
|
|
1414
1607
|
.sp-rating-stars {
|
|
1415
1608
|
display: flex;
|
|
1416
1609
|
gap: var(--sp-space-4);
|