@phcdevworks/spectre-ui 0.3.0 → 0.4.1

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.
Files changed (6) hide show
  1. package/README.md +91 -14
  2. package/dist/base.css +7 -8
  3. package/dist/components.css +227 -189
  4. package/dist/index.css +407 -204
  5. package/dist/utilities.css +166 -7
  6. package/package.json +4 -4
package/dist/index.css CHANGED
@@ -9,9 +9,11 @@
9
9
  --sp-surface-overlay: rgba(15,23,42,0.6);
10
10
  --sp-text-on-page-default: #0f172a;
11
11
  --sp-text-on-page-muted: #475569;
12
+ --sp-text-on-page-subtle: #94a3b8;
12
13
  --sp-text-on-page-meta: #94a3b8;
13
14
  --sp-text-on-surface-default: #0f172a;
14
15
  --sp-text-on-surface-muted: #6b7280;
16
+ --sp-text-on-surface-subtle: #94a3b8;
15
17
  --sp-text-on-surface-meta: #94a3b8;
16
18
  --sp-component-card-text: #0f172a;
17
19
  --sp-component-card-text-muted: #6b7280;
@@ -163,8 +165,11 @@
163
165
  --sp-font-xs-letter-spacing: 0.02em;
164
166
  --sp-text-on-page-default: #0f172a;
165
167
  --sp-text-on-page-muted: #475569;
168
+ --sp-text-on-page-subtle: #94a3b8;
169
+ --sp-text-on-page-meta: #94a3b8;
166
170
  --sp-text-on-surface-default: #0f172a;
167
171
  --sp-text-on-surface-muted: #6b7280;
172
+ --sp-text-on-surface-subtle: #94a3b8;
168
173
  --sp-text-on-surface-meta: #94a3b8;
169
174
  --sp-badge-neutral-bg: #f1f5f9;
170
175
  --sp-badge-neutral-text: #334155;
@@ -301,9 +306,11 @@
301
306
  --sp-surface-overlay: #1e293b;
302
307
  --sp-text-on-page-default: #f8fafc;
303
308
  --sp-text-on-page-muted: #cbd5f5;
309
+ --sp-text-on-page-subtle: #94a3b8;
304
310
  --sp-text-on-page-meta: #94a3b8;
305
311
  --sp-text-on-surface-default: #f1f5f9;
306
312
  --sp-text-on-surface-muted: #cbd5f5;
313
+ --sp-text-on-surface-subtle: #94a3b8;
307
314
  --sp-text-on-surface-meta: #94a3b8;
308
315
  --sp-component-card-text: #f1f5f9;
309
316
  --sp-component-card-text-muted: #cbd5f5;
@@ -344,9 +351,9 @@
344
351
 
345
352
  body {
346
353
  min-height: 100vh;
347
- font-family: var(--sp-font-family-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
348
- font-size: var(--sp-font-md-size, 1rem);
349
- line-height: var(--sp-font-md-line-height, 1.5);
354
+ font-family: var(--sp-font-family-sans);
355
+ font-size: var(--sp-font-md-size);
356
+ line-height: var(--sp-font-md-line-height);
350
357
  color: var(--sp-text-on-page-default);
351
358
  background-color: var(--sp-surface-page);
352
359
  }
@@ -375,7 +382,7 @@
375
382
  }
376
383
 
377
384
  a {
378
- color: var(--sp-color-brand-600, inherit);
385
+ color: var(--sp-color-brand-600);
379
386
  text-decoration: none;
380
387
  }
381
388
 
@@ -384,13 +391,12 @@
384
391
  }
385
392
 
386
393
  :focus-visible {
387
- outline: var(--sp-focus-ring-width, 2px) solid var(--sp-color-focus-primary,
388
- var(--sp-color-brand-600, currentColor));
389
- outline-offset: var(--sp-focus-ring-offset, 2px);
394
+ outline: var(--sp-focus-ring-width) solid var(--sp-color-focus-primary);
395
+ outline-offset: var(--sp-focus-ring-offset);
390
396
  }
391
397
 
392
398
  ::selection {
393
- background-color: var(--sp-color-brand-100, #ebe2ff);
399
+ background-color: var(--sp-color-brand-100);
394
400
  color: inherit;
395
401
  }
396
402
  }
@@ -398,7 +404,7 @@
398
404
 
399
405
  :root {
400
406
  /* button roles */
401
- --sp-component-button-border-base: var(--sp-component-button-ghost-bg, var(--sp-button-ghost-bg));
407
+ --sp-component-button-border-base: var(--sp-component-button-ghost-bg);
402
408
  --sp-component-button-shadow: var(--sp-shadow-sm);
403
409
  --sp-component-button-primary-bg: var(--sp-button-primary-bg);
404
410
  --sp-component-button-primary-bg-hover: var(--sp-button-primary-bghover);
@@ -434,11 +440,11 @@
434
440
  --sp-component-button-success-text-disabled: var(--sp-button-success-textdisabled);
435
441
 
436
442
  /* card roles */
437
- --sp-component-card-bg: var(--sp-surface-card, var(--sp-color-neutral-50));
438
- --sp-component-card-text: var(--sp-text-on-surface-default, var(--sp-color-neutral-900));
439
- --sp-component-card-text-muted: var(--sp-text-on-surface-muted, var(--sp-color-neutral-600));
443
+ --sp-component-card-bg: var(--sp-surface-card);
444
+ --sp-component-card-text: var(--sp-text-on-surface-default);
445
+ --sp-component-card-text-muted: var(--sp-text-on-surface-muted);
440
446
  --sp-component-card-border: var(--sp-color-neutral-200);
441
- --sp-component-card-border-base: var(--sp-component-card-ghost-border, var(--sp-component-card-bg));
447
+ --sp-component-card-border-base: var(--sp-component-card-ghost-border);
442
448
  --sp-component-card-shadow: var(--sp-shadow-sm);
443
449
  --sp-component-card-shadow-elevated: var(--sp-shadow-lg);
444
450
  --sp-component-card-shadow-flat: var(--sp-shadow-none);
@@ -446,84 +452,61 @@
446
452
  --sp-component-card-shadow-ghost: var(--sp-shadow-none);
447
453
  --sp-component-card-outline-bg: var(--sp-component-card-bg);
448
454
  --sp-component-card-outline-border: var(--sp-component-card-border);
449
- --sp-component-card-ghost-bg: var(--sp-component-button-ghost-bg, var(--sp-button-ghost-bg));
455
+ --sp-component-card-ghost-bg: var(--sp-component-button-ghost-bg);
450
456
  --sp-component-card-ghost-border: var(--sp-component-card-ghost-bg);
451
457
 
452
458
  /* input roles */
453
- --sp-component-input-role-border: var(--sp-component-input-border,
454
- var(--sp-surface-input, var(--sp-color-neutral-200, #e2e8f0)));
455
- --sp-component-input-role-bg: var(--sp-component-input-bg,
456
- var(--sp-surface-input, var(--sp-color-neutral-50, #f8fafc)));
457
- --sp-component-input-role-text: var(--sp-component-input-text,
458
- var(--sp-text-on-surface-default, var(--sp-color-neutral-900, #0f172a)));
459
- --sp-component-input-role-placeholder: var(--sp-component-input-placeholder,
460
- var(--sp-text-on-surface-muted, var(--sp-color-neutral-500, #64748b)));
461
- --sp-component-input-role-border-focus: var(--sp-component-input-border-focus,
462
- var(--sp-color-brand-500, #8652ff));
463
- --sp-component-input-role-ring: var(--sp-component-input-ring,
464
- var(--sp-color-brand-500, #8652ff));
465
- --sp-component-input-role-border-error: var(--sp-component-input-border-error,
466
- var(--sp-color-error-500, #ef4444));
467
- --sp-component-input-role-bg-error: var(--sp-component-input-bg-error,
468
- var(--sp-color-error-50, #fef2f2));
469
- --sp-component-input-role-text-error: var(--sp-component-input-text-error,
470
- var(--sp-color-error-700, #b91c1c));
471
- --sp-component-input-role-border-success: var(--sp-component-input-border-success,
472
- var(--sp-color-success-500, #22c55e));
473
- --sp-component-input-role-bg-success: var(--sp-component-input-bg-success,
474
- var(--sp-color-success-50, #f0fdf4));
475
- --sp-component-input-role-text-success: var(--sp-component-input-text-success,
476
- var(--sp-color-success-700, #15803d));
477
- --sp-component-input-role-bg-disabled: var(--sp-component-input-bg-disabled,
478
- var(--sp-surface-input, var(--sp-color-neutral-50, #f8fafc)));
479
- --sp-component-input-role-text-disabled: var(--sp-component-input-text-disabled,
480
- var(--sp-text-on-surface-muted, var(--sp-color-neutral-400, #94a3b8)));
481
- --sp-component-input-role-border-disabled: var(--sp-component-input-border-disabled,
482
- var(--sp-surface-input, var(--sp-color-neutral-200, #e2e8f0)));
459
+ --sp-component-input-role-border: var(--sp-form-default-border);
460
+ --sp-component-input-role-bg: var(--sp-form-default-bg);
461
+ --sp-component-input-role-text: var(--sp-form-default-text);
462
+ --sp-component-input-role-placeholder: var(--sp-form-default-placeholder);
463
+ --sp-component-input-role-border-focus: var(--sp-form-focus-border);
464
+ --sp-component-input-role-ring: var(--sp-form-focus-ring);
465
+ --sp-component-input-role-border-error: var(--sp-form-invalid-border);
466
+ --sp-component-input-role-bg-error: var(--sp-form-invalid-bg);
467
+ --sp-component-input-role-text-error: var(--sp-form-invalid-text);
468
+ --sp-component-input-role-border-success: var(--sp-form-valid-border);
469
+ --sp-component-input-role-bg-success: var(--sp-form-valid-bg);
470
+ --sp-component-input-role-text-success: var(--sp-form-valid-text);
471
+ --sp-component-input-role-bg-disabled: var(--sp-form-disabled-bg);
472
+ --sp-component-input-role-text-disabled: var(--sp-form-disabled-text);
473
+ --sp-component-input-role-border-disabled: var(--sp-form-disabled-border);
483
474
 
484
475
  /* badge roles */
485
- --sp-component-badge-font: var(--sp-font-family-sans, system-ui);
486
- --sp-component-badge-weight: var(--sp-font-sm-weight, 500);
487
- --sp-component-badge-gap: var(--sp-space-4xs, 0.125rem);
488
- --sp-component-badge-radius: var(--sp-radius-pill, 999px);
489
- --sp-component-badge-primary-bg: var(--sp-badge-primary-bg,
490
- var(--sp-color-brand-500, #8652ff));
491
- --sp-component-badge-primary-text: var(--sp-badge-primary-text,
492
- var(--sp-text-on-surface-default, var(--sp-color-neutral-900, #0f172a)));
493
- --sp-component-badge-success-bg: var(--sp-badge-success-bg,
494
- var(--sp-color-success-500, #22c55e));
495
- --sp-component-badge-success-text: var(--sp-badge-success-text,
496
- var(--sp-text-on-surface-default, var(--sp-color-neutral-900, #0f172a)));
497
- --sp-component-badge-warning-bg: var(--sp-badge-warning-bg,
498
- var(--sp-color-warning-500, #f59e0b));
499
- --sp-component-badge-warning-text: var(--sp-badge-warning-text,
500
- var(--sp-text-on-surface-default, var(--sp-color-neutral-900, #0f172a)));
501
- --sp-component-badge-danger-bg: var(--sp-badge-danger-bg,
502
- var(--sp-color-error-500, #ef4444));
503
- --sp-component-badge-danger-text: var(--sp-badge-danger-text,
504
- var(--sp-text-on-surface-default, var(--sp-color-neutral-900, #0f172a)));
505
- --sp-component-badge-padding-x-sm: var(--sp-space-xs, 0.5rem);
506
- --sp-component-badge-padding-x-md: var(--sp-space-sm, 0.75rem);
507
- --sp-component-badge-padding-x-lg: var(--sp-space-md, 1rem);
508
- --sp-component-badge-padding-y-sm: var(--sp-space-4xs, 0.125rem);
509
- --sp-component-badge-padding-y-md: var(--sp-space-3xs, 0.1875rem);
510
- --sp-component-badge-padding-y-lg: var(--sp-space-2xs, 0.25rem);
476
+ --sp-component-badge-font: var(--sp-font-family-sans);
477
+ --sp-component-badge-weight: var(--sp-font-sm-weight);
478
+ --sp-component-badge-gap: var(--sp-space-4);
479
+ --sp-component-badge-radius: var(--sp-radius-pill);
480
+ --sp-component-badge-primary-bg: var(--sp-button-primary-bg);
481
+ --sp-component-badge-primary-text: var(--sp-button-text-on-primary);
482
+ --sp-component-badge-success-bg: var(--sp-badge-success-bg);
483
+ --sp-component-badge-success-text: var(--sp-badge-success-text);
484
+ --sp-component-badge-warning-bg: var(--sp-badge-warning-bg);
485
+ --sp-component-badge-warning-text: var(--sp-badge-warning-text);
486
+ --sp-component-badge-danger-bg: var(--sp-badge-danger-bg);
487
+ --sp-component-badge-danger-text: var(--sp-badge-danger-text);
488
+ --sp-component-badge-padding-x-sm: var(--sp-space-8);
489
+ --sp-component-badge-padding-x-md: var(--sp-space-12);
490
+ --sp-component-badge-padding-x-lg: var(--sp-space-16);
491
+ --sp-component-badge-padding-y-sm: var(--sp-space-4);
492
+ --sp-component-badge-padding-y-md: var(--sp-space-4);
493
+ --sp-component-badge-padding-y-lg: var(--sp-space-4);
511
494
 
512
495
  /* icon box roles */
513
- --sp-component-iconbox-radius: var(--sp-radius-lg, 8px);
514
- --sp-component-iconbox-size-sm: var(--sp-space-xl, 2rem);
515
- --sp-component-iconbox-size-md: var(--sp-space-2xl, 3rem);
516
- --sp-component-iconbox-size-lg: var(--sp-space-3xl, 4rem);
517
- --sp-component-iconbox-primary-bg: var(--sp-color-brand-50, #f5f0ff);
518
- --sp-component-iconbox-primary-text: var(--sp-color-brand-700, #5626b4);
519
- --sp-component-iconbox-success-bg: var(--sp-color-success-50, #f0fdf4);
520
- --sp-component-iconbox-success-text: var(--sp-color-success-700, #15803d);
521
- --sp-component-iconbox-warning-bg: var(--sp-color-warning-50, #fffbeb);
522
- --sp-component-iconbox-warning-text: var(--sp-color-warning-700, #b45309);
523
- --sp-component-iconbox-danger-bg: var(--sp-color-error-50, #fef2f2);
524
- --sp-component-iconbox-danger-text: var(--sp-color-error-700, #b91c1c);
525
- --sp-component-iconbox-info-bg: var(--sp-color-info-50, #eff6ff);
526
- --sp-component-iconbox-info-text: var(--sp-color-info-700, #1d4ed8);
496
+ --sp-component-iconbox-radius: var(--sp-radius-lg);
497
+ --sp-component-iconbox-size-sm: var(--sp-space-32);
498
+ --sp-component-iconbox-size-md: var(--sp-space-48);
499
+ --sp-component-iconbox-size-lg: var(--sp-space-64);
500
+ --sp-component-iconbox-primary-bg: var(--sp-color-brand-50);
501
+ --sp-component-iconbox-primary-text: var(--sp-icon-box-icon-default);
502
+ --sp-component-iconbox-success-bg: var(--sp-color-success-50);
503
+ --sp-component-iconbox-success-text: var(--sp-icon-box-icon-success);
504
+ --sp-component-iconbox-warning-bg: var(--sp-color-warning-50);
505
+ --sp-component-iconbox-warning-text: var(--sp-icon-box-icon-warning);
506
+ --sp-component-iconbox-danger-bg: var(--sp-color-error-50);
507
+ --sp-component-iconbox-danger-text: var(--sp-icon-box-icon-danger);
508
+ --sp-component-iconbox-info-bg: var(--sp-color-info-50);
509
+ --sp-component-iconbox-info-text: var(--sp-badge-info-text);
527
510
  }
528
511
 
529
512
  /* BUTTONS -------------------------------------------------------------- */
@@ -531,37 +514,36 @@
531
514
  display: inline-flex;
532
515
  align-items: center;
533
516
  justify-content: center;
534
- gap: var(--sp-space-2xs, 0.25rem);
535
- padding: var(--sp-space-2xs, 0.25rem) var(--sp-space-md, 1rem);
536
- border-radius: var(--sp-radius-md, 4px);
537
- border: 1px solid var(--sp-component-button-border-base,
538
- var(--sp-component-button-ghost-bg, var(--sp-button-ghost-bg)));
539
- font-family: var(--sp-font-family-sans, system-ui);
540
- font-size: var(--sp-font-md-size, 1rem);
517
+ gap: var(--sp-space-4);
518
+ padding: var(--sp-space-4) var(--sp-space-16);
519
+ border-radius: var(--sp-radius-md);
520
+ border: 1px solid var(--sp-component-button-border-base);
521
+ font-family: var(--sp-font-family-sans);
522
+ font-size: var(--sp-font-md-size);
541
523
  line-height: 1;
542
- font-weight: var(--sp-font-md-weight, 500);
524
+ font-weight: var(--sp-font-md-weight);
543
525
  text-decoration: none;
544
526
  appearance: none;
545
527
  transition:
546
- background-color var(--sp-duration-fast, 150ms) var(--sp-easing-out, ease),
547
- color var(--sp-duration-fast, 150ms) var(--sp-easing-out, ease),
548
- box-shadow var(--sp-duration-fast, 150ms) var(--sp-easing-out, ease),
549
- border-color var(--sp-duration-fast, 150ms) var(--sp-easing-out, ease);
528
+ background-color var(--sp-duration-fast) var(--sp-easing-out),
529
+ color var(--sp-duration-fast) var(--sp-easing-out),
530
+ box-shadow var(--sp-duration-fast) var(--sp-easing-out),
531
+ border-color var(--sp-duration-fast) var(--sp-easing-out);
550
532
  cursor: pointer;
551
- min-height: var(--sp-min-touch-target, 44px);
533
+ min-height: var(--sp-min-touch-target);
552
534
  }
553
535
 
554
536
  .sp-btn:disabled,
555
537
  .sp-btn[aria-disabled="true"],
556
538
  .sp-btn.sp-btn--disabled {
557
539
  cursor: not-allowed;
558
- opacity: var(--sp-opacity-disabled, 0.5);
540
+ opacity: var(--sp-opacity-disabled);
559
541
  pointer-events: none;
560
542
  }
561
543
 
562
544
  .sp-btn--loading {
563
545
  pointer-events: none;
564
- opacity: var(--sp-opacity-loading, 0.7);
546
+ opacity: var(--sp-opacity-active);
565
547
  }
566
548
 
567
549
  .sp-btn--full {
@@ -569,43 +551,55 @@
569
551
  }
570
552
 
571
553
  .sp-btn--icon {
572
- padding-inline: var(--sp-space-sm, 0.75rem);
573
- padding-block: var(--sp-space-3xs, 0.125rem);
554
+ padding-inline: var(--sp-space-12);
555
+ padding-block: var(--sp-space-4);
574
556
  }
575
557
 
576
558
  /* sizes */
577
559
  .sp-btn--sm {
578
- padding: var(--sp-space-3xs, 0.125rem) var(--sp-space-sm, 0.75rem);
579
- font-size: var(--sp-font-sm-size, 0.875rem);
580
- line-height: var(--sp-font-sm-line-height, 1.5rem);
560
+ padding: var(--sp-space-4) var(--sp-space-12);
561
+ font-size: var(--sp-font-sm-size);
562
+ line-height: var(--sp-font-sm-line-height);
581
563
  }
582
564
 
583
565
  .sp-btn--md {
584
- padding: var(--sp-space-2xs, 0.25rem) var(--sp-space-md, 1rem);
585
- font-size: var(--sp-font-md-size, 1rem);
586
- line-height: var(--sp-font-md-line-height, 1.75rem);
566
+ padding: var(--sp-space-4) var(--sp-space-16);
567
+ font-size: var(--sp-font-md-size);
568
+ line-height: var(--sp-font-md-line-height);
587
569
  }
588
570
 
589
571
  .sp-btn--lg {
590
- padding: var(--sp-space-xs, 0.5rem) var(--sp-space-lg, 1.5rem);
591
- font-size: var(--sp-font-lg-size, 1.125rem);
592
- line-height: var(--sp-font-lg-line-height, 1.75rem);
572
+ padding: var(--sp-space-8) var(--sp-space-24);
573
+ font-size: var(--sp-font-lg-size);
574
+ line-height: var(--sp-font-lg-line-height);
575
+ }
576
+
577
+ /* Generic forced-state helpers (safe, variant rules still set actual colors) */
578
+ .sp-btn.sp-btn--hover,
579
+ .sp-btn.is-hover {
580
+ /* no-op here; variant sections below define the actual hover colors */
581
+ }
582
+
583
+ .sp-btn.sp-btn--active,
584
+ .sp-btn.is-active {
585
+ /* no-op here; variant sections below define the actual active colors */
593
586
  }
594
587
 
595
588
  /* primary */
596
589
  .sp-btn--primary {
597
590
  background-color: var(--sp-component-button-primary-bg);
598
591
  color: var(--sp-component-button-primary-text);
599
- box-shadow: var(--sp-component-button-shadow,
600
- var(--sp-shadow-sm));
592
+ box-shadow: var(--sp-component-button-shadow);
601
593
  }
602
594
 
603
595
  .sp-btn--primary.sp-btn--hover,
596
+ .sp-btn--primary.is-hover,
604
597
  .sp-btn--primary:hover {
605
598
  background-color: var(--sp-component-button-primary-bg-hover);
606
599
  }
607
600
 
608
601
  .sp-btn--primary.sp-btn--active,
602
+ .sp-btn--primary.is-active,
609
603
  .sp-btn--primary:active {
610
604
  background-color: var(--sp-component-button-primary-bg-active);
611
605
  }
@@ -625,11 +619,13 @@
625
619
  }
626
620
 
627
621
  .sp-btn--secondary.sp-btn--hover,
622
+ .sp-btn--secondary.is-hover,
628
623
  .sp-btn--secondary:hover {
629
624
  background-color: var(--sp-component-button-secondary-bg-hover);
630
625
  }
631
626
 
632
627
  .sp-btn--secondary.sp-btn--active,
628
+ .sp-btn--secondary.is-active,
633
629
  .sp-btn--secondary:active {
634
630
  background-color: var(--sp-component-button-secondary-bg-active);
635
631
  }
@@ -648,11 +644,13 @@
648
644
  }
649
645
 
650
646
  .sp-btn--ghost.sp-btn--hover,
647
+ .sp-btn--ghost.is-hover,
651
648
  .sp-btn--ghost:hover {
652
649
  background-color: var(--sp-component-button-ghost-bg-hover);
653
650
  }
654
651
 
655
652
  .sp-btn--ghost.sp-btn--active,
653
+ .sp-btn--ghost.is-active,
656
654
  .sp-btn--ghost:active {
657
655
  background-color: var(--sp-component-button-ghost-bg-active);
658
656
  }
@@ -670,11 +668,13 @@
670
668
  }
671
669
 
672
670
  .sp-btn--danger.sp-btn--hover,
671
+ .sp-btn--danger.is-hover,
673
672
  .sp-btn--danger:hover {
674
673
  background-color: var(--sp-component-button-danger-bg-hover);
675
674
  }
676
675
 
677
676
  .sp-btn--danger.sp-btn--active,
677
+ .sp-btn--danger.is-active,
678
678
  .sp-btn--danger:active {
679
679
  background-color: var(--sp-component-button-danger-bg-active);
680
680
  }
@@ -692,11 +692,13 @@
692
692
  }
693
693
 
694
694
  .sp-btn--success.sp-btn--hover,
695
+ .sp-btn--success.is-hover,
695
696
  .sp-btn--success:hover {
696
697
  background-color: var(--sp-component-button-success-bg-hover);
697
698
  }
698
699
 
699
700
  .sp-btn--success.sp-btn--active,
701
+ .sp-btn--success.is-active,
700
702
  .sp-btn--success:active {
701
703
  background-color: var(--sp-component-button-success-bg-active);
702
704
  }
@@ -711,45 +713,45 @@
711
713
 
712
714
  .sp-input-wrapper {
713
715
  display: grid;
714
- gap: var(--sp-space-4xs, 0.125rem);
716
+ gap: var(--sp-space-4);
715
717
  width: 100%;
716
718
  }
717
719
 
718
720
  .sp-label {
719
721
  color: var(--sp-component-input-role-text);
720
- font-size: var(--sp-font-sm-size, 0.875rem);
721
- font-weight: var(--sp-font-sm-weight, 500);
722
- line-height: var(--sp-font-sm-line-height, 1.25rem);
722
+ font-size: var(--sp-font-sm-size);
723
+ font-weight: var(--sp-font-sm-weight);
724
+ line-height: var(--sp-font-sm-line-height);
723
725
  }
724
726
 
725
727
  .sp-helper-text {
726
- color: var(--sp-text-on-surface-muted);
727
- font-size: var(--sp-font-xs-size, 0.75rem);
728
- line-height: var(--sp-font-xs-line-height, 1rem);
728
+ color: var(--sp-text-on-surface-meta);
729
+ font-size: var(--sp-font-xs-size);
730
+ line-height: var(--sp-font-xs-line-height);
729
731
  }
730
732
 
731
733
  .sp-error-message {
732
- color: var(--sp-color-error-600, #dc2626);
733
- font-size: var(--sp-font-xs-size, 0.75rem);
734
- line-height: var(--sp-font-xs-line-height, 1rem);
734
+ color: var(--sp-component-input-role-text-error);
735
+ font-size: var(--sp-font-xs-size);
736
+ line-height: var(--sp-font-xs-line-height);
735
737
  }
736
738
 
737
739
  .sp-input {
738
740
  width: 100%;
739
741
  display: block;
740
742
  appearance: none;
741
- padding: var(--sp-space-2xs, 0.25rem) var(--sp-space-md, 1rem);
742
- border-radius: var(--sp-radius-md, 4px);
743
+ padding: var(--sp-space-4) var(--sp-space-16);
744
+ border-radius: var(--sp-radius-md);
743
745
  border: 1px solid var(--sp-component-input-role-border);
744
746
  background-color: var(--sp-component-input-role-bg);
745
747
  color: var(--sp-component-input-role-text);
746
- font-family: var(--sp-font-family-sans, system-ui);
747
- font-size: var(--sp-font-md-size, 1rem);
748
- line-height: var(--sp-font-md-line-height, 1.5rem);
748
+ font-family: var(--sp-font-family-sans);
749
+ font-size: var(--sp-font-md-size);
750
+ line-height: var(--sp-font-md-line-height);
749
751
  transition:
750
- border-color var(--sp-duration-fast, 150ms) var(--sp-easing-out, ease),
751
- box-shadow var(--sp-duration-fast, 150ms) var(--sp-easing-out, ease),
752
- background-color var(--sp-duration-fast, 150ms) var(--sp-easing-out, ease);
752
+ border-color var(--sp-duration-fast) var(--sp-easing-out),
753
+ box-shadow var(--sp-duration-fast) var(--sp-easing-out),
754
+ background-color var(--sp-duration-fast) var(--sp-easing-out);
753
755
  }
754
756
 
755
757
  .sp-input::placeholder {
@@ -757,21 +759,21 @@
757
759
  }
758
760
 
759
761
  .sp-input--sm {
760
- padding: var(--sp-space-3xs, 0.125rem) var(--sp-space-sm, 0.75rem);
761
- font-size: var(--sp-font-sm-size, 0.875rem);
762
- line-height: var(--sp-font-sm-line-height, 1.25rem);
762
+ padding: var(--sp-space-4) var(--sp-space-12);
763
+ font-size: var(--sp-font-sm-size);
764
+ line-height: var(--sp-font-sm-line-height);
763
765
  }
764
766
 
765
767
  .sp-input--md {
766
- padding: var(--sp-space-2xs, 0.25rem) var(--sp-space-md, 1rem);
767
- font-size: var(--sp-font-md-size, 1rem);
768
- line-height: var(--sp-font-md-line-height, 1.5rem);
768
+ padding: var(--sp-space-4) var(--sp-space-16);
769
+ font-size: var(--sp-font-md-size);
770
+ line-height: var(--sp-font-md-line-height);
769
771
  }
770
772
 
771
773
  .sp-input--lg {
772
- padding: var(--sp-space-xs, 0.5rem) var(--sp-space-lg, 1.5rem);
773
- font-size: var(--sp-font-lg-size, 1.125rem);
774
- line-height: var(--sp-font-lg-line-height, 1.75rem);
774
+ padding: var(--sp-space-8) var(--sp-space-24);
775
+ font-size: var(--sp-font-lg-size);
776
+ line-height: var(--sp-font-lg-line-height);
775
777
  }
776
778
 
777
779
  .sp-input--full {
@@ -781,20 +783,21 @@
781
783
  .sp-input:focus,
782
784
  .sp-input--focus {
783
785
  border-color: var(--sp-component-input-role-border-focus);
784
- box-shadow: 0 0 0 var(--sp-focus-ring-width, 2px) var(--sp-component-input-role-ring);
786
+ box-shadow: 0 0 0 calc(var(--sp-focus-ring-width) + 1px) var(--sp-component-input-role-ring);
785
787
  outline: none;
786
788
  }
787
789
 
790
+ /* State styling should not force typed text to be red/green by default */
788
791
  .sp-input--error {
789
792
  border-color: var(--sp-component-input-role-border-error);
790
793
  background-color: var(--sp-component-input-role-bg-error);
791
- color: var(--sp-component-input-role-text-error);
794
+ color: var(--sp-component-input-role-text);
792
795
  }
793
796
 
794
797
  .sp-input--success {
795
798
  border-color: var(--sp-component-input-role-border-success);
796
799
  background-color: var(--sp-component-input-role-bg-success);
797
- color: var(--sp-component-input-role-text-success);
800
+ color: var(--sp-component-input-role-text);
798
801
  }
799
802
 
800
803
  .sp-input--disabled {
@@ -804,6 +807,10 @@
804
807
  cursor: not-allowed;
805
808
  }
806
809
 
810
+ .sp-input--disabled::placeholder {
811
+ color: var(--sp-component-input-role-text-disabled);
812
+ }
813
+
807
814
  .sp-input--disabled,
808
815
  .sp-input--disabled:focus {
809
816
  box-shadow: none;
@@ -814,15 +821,13 @@
814
821
  .sp-card {
815
822
  background-color: var(--sp-component-card-bg);
816
823
  color: var(--sp-component-card-text);
817
- border-radius: var(--sp-radius-lg, 8px);
818
- padding: var(--sp-space-lg, 1.5rem);
819
- box-shadow: var(--sp-component-card-shadow, var(--sp-shadow-sm));
820
- border: 1px solid var(--sp-component-card-border-base,
821
- var(--sp-component-card-ghost-border, var(--sp-component-card-bg)));
824
+ border-radius: var(--sp-radius-lg);
825
+ padding: var(--sp-space-24);
826
+ box-shadow: var(--sp-component-card-shadow);
827
+ border: 1px solid var(--sp-component-card-border-base);
822
828
  }
823
829
 
824
- .sp-card p,
825
- .sp-card span {
830
+ .sp-card p {
826
831
  color: var(--sp-component-card-text-muted);
827
832
  }
828
833
 
@@ -832,28 +837,28 @@
832
837
  }
833
838
 
834
839
  .sp-card--elevated {
835
- box-shadow: var(--sp-component-card-shadow-elevated, var(--sp-shadow-lg));
840
+ box-shadow: var(--sp-component-card-shadow-elevated);
836
841
  }
837
842
 
838
843
  .sp-card--flat {
839
- box-shadow: var(--sp-component-card-shadow-flat, var(--sp-shadow-none));
844
+ box-shadow: var(--sp-component-card-shadow-flat);
840
845
  border-color: var(--sp-component-card-border);
841
846
  }
842
847
 
843
848
  .sp-card--outline {
844
- background-color: var(--sp-component-card-outline-bg, var(--sp-component-card-bg));
845
- border-color: var(--sp-component-card-outline-border, var(--sp-component-card-border));
846
- box-shadow: var(--sp-component-card-shadow-outline, var(--sp-shadow-none));
849
+ background-color: var(--sp-component-card-outline-bg);
850
+ border-color: var(--sp-component-card-outline-border);
851
+ box-shadow: var(--sp-component-card-shadow-outline);
847
852
  }
848
853
 
849
854
  .sp-card--ghost {
850
855
  background-color: var(--sp-component-card-ghost-bg);
851
856
  border-color: var(--sp-component-card-ghost-border);
852
- box-shadow: var(--sp-component-card-shadow-ghost, var(--sp-shadow-none));
857
+ box-shadow: var(--sp-component-card-shadow-ghost);
853
858
  }
854
859
 
855
860
  .sp-card--padded {
856
- padding: var(--sp-space-xl, 2rem);
861
+ padding: var(--sp-space-32);
857
862
  }
858
863
 
859
864
  .sp-card--full {
@@ -863,15 +868,15 @@
863
868
  .sp-card--interactive {
864
869
  cursor: pointer;
865
870
  transition:
866
- transform var(--sp-duration-fast, 150ms) var(--sp-easing-out, ease),
867
- box-shadow var(--sp-duration-fast, 150ms) var(--sp-easing-out, ease);
871
+ transform var(--sp-duration-fast) var(--sp-easing-out),
872
+ box-shadow var(--sp-duration-fast) var(--sp-easing-out);
868
873
  }
869
874
 
870
875
  .sp-card--interactive:hover,
871
876
  .sp-card--interactive:focus-visible,
872
877
  .sp-card--interactive:focus-within {
873
878
  transform: translateY(-1px);
874
- box-shadow: var(--sp-component-card-shadow-elevated, var(--sp-shadow-lg));
879
+ box-shadow: var(--sp-component-card-shadow-elevated);
875
880
  }
876
881
 
877
882
  /* BADGES --------------------------------------------------------------- */
@@ -880,37 +885,33 @@
880
885
  display: inline-flex;
881
886
  align-items: center;
882
887
  justify-content: center;
883
- gap: var(--sp-component-badge-gap, var(--sp-space-4xs, 0.125rem));
884
- border-radius: var(--sp-component-badge-radius, var(--sp-radius-pill, 999px));
885
- font-family: var(--sp-component-badge-font, var(--sp-font-family-sans, system-ui));
886
- font-weight: var(--sp-component-badge-weight, var(--sp-font-sm-weight, 500));
887
- padding: var(--sp-component-badge-padding-y-md, var(--sp-space-3xs, 0.1875rem))
888
- var(--sp-component-badge-padding-x-md, var(--sp-space-sm, 0.75rem));
889
- font-size: var(--sp-font-sm-size, 0.875rem);
890
- line-height: var(--sp-font-sm-line-height, 1.5rem);
888
+ gap: var(--sp-component-badge-gap);
889
+ border-radius: var(--sp-component-badge-radius);
890
+ font-family: var(--sp-component-badge-font);
891
+ font-weight: var(--sp-component-badge-weight);
892
+ padding: var(--sp-component-badge-padding-y-md) var(--sp-component-badge-padding-x-md);
893
+ font-size: var(--sp-font-sm-size);
894
+ line-height: var(--sp-font-sm-line-height);
891
895
  border: 1px solid transparent;
892
896
  white-space: nowrap;
893
897
  }
894
898
 
895
899
  .sp-badge--sm {
896
- padding: var(--sp-component-badge-padding-y-sm, var(--sp-space-4xs, 0.125rem))
897
- var(--sp-component-badge-padding-x-sm, var(--sp-space-xs, 0.5rem));
898
- font-size: var(--sp-font-xs-size, 0.75rem);
899
- line-height: var(--sp-font-xs-line-height, 1.25rem);
900
+ padding: var(--sp-component-badge-padding-y-sm) var(--sp-component-badge-padding-x-sm);
901
+ font-size: var(--sp-font-xs-size);
902
+ line-height: var(--sp-font-xs-line-height);
900
903
  }
901
904
 
902
905
  .sp-badge--md {
903
- padding: var(--sp-component-badge-padding-y-md, var(--sp-space-3xs, 0.1875rem))
904
- var(--sp-component-badge-padding-x-md, var(--sp-space-sm, 0.75rem));
905
- font-size: var(--sp-font-sm-size, 0.875rem);
906
- line-height: var(--sp-font-sm-line-height, 1.5rem);
906
+ padding: var(--sp-component-badge-padding-y-md) var(--sp-component-badge-padding-x-md);
907
+ font-size: var(--sp-font-sm-size);
908
+ line-height: var(--sp-font-sm-line-height);
907
909
  }
908
910
 
909
911
  .sp-badge--lg {
910
- padding: var(--sp-component-badge-padding-y-lg, var(--sp-space-2xs, 0.25rem))
911
- var(--sp-component-badge-padding-x-lg, var(--sp-space-md, 1rem));
912
- font-size: var(--sp-font-md-size, 1rem);
913
- line-height: var(--sp-font-md-line-height, 1.75rem);
912
+ padding: var(--sp-component-badge-padding-y-lg) var(--sp-component-badge-padding-x-lg);
913
+ font-size: var(--sp-font-md-size);
914
+ line-height: var(--sp-font-md-line-height);
914
915
  }
915
916
 
916
917
  .sp-badge--primary {
@@ -939,35 +940,78 @@
939
940
  display: inline-flex;
940
941
  align-items: center;
941
942
  justify-content: center;
942
- border-radius: var(--sp-component-iconbox-radius, var(--sp-radius-lg, 8px));
943
+ border-radius: var(--sp-component-iconbox-radius);
943
944
  color: var(--sp-component-iconbox-primary-text);
944
945
  background-color: var(--sp-component-iconbox-primary-bg);
945
- font-family: var(--sp-font-family-sans, system-ui);
946
- font-weight: var(--sp-font-md-weight, 500);
946
+ font-family: var(--sp-font-family-sans);
947
+ font-weight: var(--sp-font-md-weight);
948
+ line-height: 0;
949
+ }
950
+
951
+ /* Harden icon rendering:
952
+ - center, no baseline wobble
953
+ - force currentColor for common svg shapes
954
+ - preserve stroke-only icons (fill="none")
955
+ */
956
+ .sp-iconbox,
957
+ .sp-iconbox>i {
958
+ line-height: 0;
959
+ }
960
+
961
+ .sp-iconbox>i {
962
+ display: inline-flex;
963
+ align-items: center;
964
+ justify-content: center;
965
+ width: 1em;
966
+ height: 1em;
967
+ flex-shrink: 0;
968
+ vertical-align: middle;
969
+ }
970
+
971
+ .sp-iconbox svg {
972
+ display: block;
973
+ width: 1em;
974
+ height: 1em;
975
+ flex-shrink: 0;
976
+ }
977
+
978
+ /* default to inheriting via currentColor */
979
+ .sp-iconbox svg,
980
+ .sp-iconbox svg path,
981
+ .sp-iconbox svg circle,
982
+ .sp-iconbox svg rect,
983
+ .sp-iconbox svg line,
984
+ .sp-iconbox svg polyline,
985
+ .sp-iconbox svg polygon,
986
+ .sp-iconbox svg g {
987
+ stroke: currentColor;
988
+ }
989
+
990
+ /* only force fill when the icon isn't explicitly stroke-only */
991
+ .sp-iconbox svg:not([fill="none"]),
992
+ .sp-iconbox svg:not([fill="none"]) path,
993
+ .sp-iconbox svg:not([fill="none"]) circle,
994
+ .sp-iconbox svg:not([fill="none"]) rect,
995
+ .sp-iconbox svg:not([fill="none"]) polygon {
996
+ fill: currentColor;
947
997
  }
948
998
 
949
999
  .sp-iconbox--sm {
950
- width: var(--sp-component-iconbox-size-sm, var(--sp-space-xl, 2rem));
951
- height: var(--sp-component-iconbox-size-sm, var(--sp-space-xl, 2rem));
952
- font-size: var(--sp-font-sm-size, 0.875rem);
1000
+ width: var(--sp-component-iconbox-size-sm);
1001
+ height: var(--sp-component-iconbox-size-sm);
1002
+ font-size: var(--sp-font-sm-size);
953
1003
  }
954
1004
 
955
1005
  .sp-iconbox--md {
956
- width: var(--sp-component-iconbox-size-md, var(--sp-space-2xl, 3rem));
957
- height: var(--sp-component-iconbox-size-md, var(--sp-space-2xl, 3rem));
958
- font-size: var(--sp-font-md-size, 1rem);
1006
+ width: var(--sp-component-iconbox-size-md);
1007
+ height: var(--sp-component-iconbox-size-md);
1008
+ font-size: var(--sp-font-md-size);
959
1009
  }
960
1010
 
961
1011
  .sp-iconbox--lg {
962
- width: var(--sp-component-iconbox-size-lg, var(--sp-space-3xl, 4rem));
963
- height: var(--sp-component-iconbox-size-lg, var(--sp-space-3xl, 4rem));
964
- font-size: var(--sp-font-lg-size, 1.125rem);
965
- }
966
-
967
- .sp-iconbox > svg,
968
- .sp-iconbox > i {
969
- width: 1em;
970
- height: 1em;
1012
+ width: var(--sp-component-iconbox-size-lg);
1013
+ height: var(--sp-component-iconbox-size-lg);
1014
+ font-size: var(--sp-font-lg-size);
971
1015
  }
972
1016
 
973
1017
  .sp-iconbox--primary {
@@ -999,28 +1043,28 @@
999
1043
  .sp-stack {
1000
1044
  display: flex;
1001
1045
  flex-direction: column;
1002
- gap: var(--sp-layout-stack-gap-md, var(--sp-space-md, 1rem));
1046
+ gap: var(--sp-layout-stack-gap-md);
1003
1047
  }
1004
1048
 
1005
1049
  .sp-hstack {
1006
1050
  display: flex;
1007
1051
  flex-direction: row;
1008
1052
  align-items: center;
1009
- gap: var(--sp-layout-stack-gap-md, var(--sp-space-md, 1rem));
1053
+ gap: var(--sp-layout-stack-gap-md);
1010
1054
  }
1011
1055
 
1012
1056
  .sp-container {
1013
1057
  width: 100%;
1014
1058
  margin-left: auto;
1015
1059
  margin-right: auto;
1016
- padding-left: var(--sp-layout-container-padding-inline-md, var(--sp-space-md, 1rem));
1017
- padding-right: var(--sp-layout-container-padding-inline-md, var(--sp-space-md, 1rem));
1018
- max-width: var(--sp-container-max-width, 72rem);
1060
+ padding-left: var(--sp-layout-container-padding-inline-md);
1061
+ padding-right: var(--sp-layout-container-padding-inline-md);
1062
+ max-width: 72rem;
1019
1063
  }
1020
1064
 
1021
1065
  .sp-section {
1022
- padding-top: var(--sp-layout-section-padding-md, var(--sp-space-2xl, 3rem));
1023
- padding-bottom: var(--sp-layout-section-padding-md, var(--sp-space-2xl, 3rem));
1066
+ padding-top: var(--sp-layout-section-padding-md);
1067
+ padding-bottom: var(--sp-layout-section-padding-md);
1024
1068
  }
1025
1069
 
1026
1070
  .sp-shadow-soft {
@@ -1030,4 +1074,163 @@
1030
1074
  .sp-shadow-strong {
1031
1075
  box-shadow: var(--sp-shadow-lg);
1032
1076
  }
1077
+
1078
+ .sp-z-base {
1079
+ z-index: var(--sp-z-index-base);
1080
+ }
1081
+
1082
+ .sp-z-dropdown {
1083
+ z-index: var(--sp-z-index-dropdown);
1084
+ }
1085
+
1086
+ .sp-z-sticky {
1087
+ z-index: var(--sp-z-index-sticky);
1088
+ }
1089
+
1090
+ .sp-z-fixed {
1091
+ z-index: var(--sp-z-index-fixed);
1092
+ }
1093
+
1094
+ .sp-z-overlay {
1095
+ z-index: var(--sp-z-index-overlay);
1096
+ }
1097
+
1098
+ .sp-z-modal {
1099
+ z-index: var(--sp-z-index-modal);
1100
+ }
1101
+
1102
+ .sp-z-popover {
1103
+ z-index: var(--sp-z-index-popover);
1104
+ }
1105
+
1106
+ .sp-z-tooltip {
1107
+ z-index: var(--sp-z-index-tooltip);
1108
+ }
1109
+
1110
+ .sp-animate-fade-in {
1111
+ animation: var(--sp-animation-fadein-keyframes)
1112
+ var(--sp-animation-fadein-duration) var(--sp-animation-fadein-easing);
1113
+ }
1114
+
1115
+ .sp-animate-fade-out {
1116
+ animation: var(--sp-animation-fadeout-keyframes)
1117
+ var(--sp-animation-fadeout-duration) var(--sp-animation-fadeout-easing);
1118
+ }
1119
+
1120
+ .sp-animate-slide-up {
1121
+ animation: var(--sp-animation-slideup-keyframes)
1122
+ var(--sp-animation-slideup-duration) var(--sp-animation-slideup-easing);
1123
+ }
1124
+
1125
+ .sp-animate-slide-down {
1126
+ animation: var(--sp-animation-slidedown-keyframes)
1127
+ var(--sp-animation-slidedown-duration)
1128
+ var(--sp-animation-slidedown-easing);
1129
+ }
1130
+
1131
+ .sp-animate-scale-in {
1132
+ animation: var(--sp-animation-scalein-keyframes)
1133
+ var(--sp-animation-scalein-duration) var(--sp-animation-scalein-easing);
1134
+ }
1135
+
1136
+ .sp-animate-bounce {
1137
+ animation: var(--sp-animation-bounce-keyframes)
1138
+ var(--sp-animation-bounce-duration) var(--sp-animation-bounce-easing);
1139
+ }
1140
+
1141
+ .sp-animate-shake {
1142
+ animation: var(--sp-animation-shake-keyframes)
1143
+ var(--sp-animation-shake-duration) var(--sp-animation-shake-easing);
1144
+ }
1145
+
1146
+ .sp-animate-pulse {
1147
+ animation: var(--sp-animation-pulse-keyframes)
1148
+ var(--sp-animation-pulse-duration) var(--sp-animation-pulse-easing);
1149
+ }
1150
+
1151
+ @keyframes fade-in {
1152
+ from {
1153
+ opacity: 0;
1154
+ }
1155
+ to {
1156
+ opacity: 1;
1157
+ }
1158
+ }
1159
+
1160
+ @keyframes fade-out {
1161
+ from {
1162
+ opacity: 1;
1163
+ }
1164
+ to {
1165
+ opacity: 0;
1166
+ }
1167
+ }
1168
+
1169
+ @keyframes slide-up {
1170
+ from {
1171
+ opacity: 0;
1172
+ transform: translateY(0.5rem);
1173
+ }
1174
+ to {
1175
+ opacity: 1;
1176
+ transform: translateY(0);
1177
+ }
1178
+ }
1179
+
1180
+ @keyframes slide-down {
1181
+ from {
1182
+ opacity: 0;
1183
+ transform: translateY(-0.5rem);
1184
+ }
1185
+ to {
1186
+ opacity: 1;
1187
+ transform: translateY(0);
1188
+ }
1189
+ }
1190
+
1191
+ @keyframes scale-in {
1192
+ from {
1193
+ opacity: 0;
1194
+ transform: scale(0.95);
1195
+ }
1196
+ to {
1197
+ opacity: 1;
1198
+ transform: scale(1);
1199
+ }
1200
+ }
1201
+
1202
+ @keyframes bounce {
1203
+ 0%,
1204
+ 100% {
1205
+ transform: translateY(0);
1206
+ }
1207
+ 50% {
1208
+ transform: translateY(-0.375rem);
1209
+ }
1210
+ }
1211
+
1212
+ @keyframes shake {
1213
+ 0%,
1214
+ 100% {
1215
+ transform: translateX(0);
1216
+ }
1217
+ 20%,
1218
+ 60% {
1219
+ transform: translateX(-0.375rem);
1220
+ }
1221
+ 40%,
1222
+ 80% {
1223
+ transform: translateX(0.375rem);
1224
+ }
1225
+ }
1226
+
1227
+ @keyframes pulse {
1228
+ 0%,
1229
+ 100% {
1230
+ transform: scale(1);
1231
+ }
1232
+ 50% {
1233
+ transform: scale(1.04);
1234
+ }
1235
+ }
1033
1236
  }