@phcdevworks/spectre-ui 0.3.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +90 -13
  2. package/dist/components.css +228 -189
  3. package/dist/index.css +235 -196
  4. package/dist/utilities.css +7 -7
  5. package/package.json +3 -3
package/dist/index.css CHANGED
@@ -398,7 +398,7 @@
398
398
 
399
399
  :root {
400
400
  /* button roles */
401
- --sp-component-button-border-base: var(--sp-component-button-ghost-bg, var(--sp-button-ghost-bg));
401
+ --sp-component-button-border-base: var(--sp-component-button-ghost-bg);
402
402
  --sp-component-button-shadow: var(--sp-shadow-sm);
403
403
  --sp-component-button-primary-bg: var(--sp-button-primary-bg);
404
404
  --sp-component-button-primary-bg-hover: var(--sp-button-primary-bghover);
@@ -434,11 +434,11 @@
434
434
  --sp-component-button-success-text-disabled: var(--sp-button-success-textdisabled);
435
435
 
436
436
  /* 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));
437
+ --sp-component-card-bg: var(--sp-surface-card);
438
+ --sp-component-card-text: var(--sp-text-on-surface-default);
439
+ --sp-component-card-text-muted: var(--sp-text-on-surface-muted);
440
440
  --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));
441
+ --sp-component-card-border-base: var(--sp-component-card-ghost-border);
442
442
  --sp-component-card-shadow: var(--sp-shadow-sm);
443
443
  --sp-component-card-shadow-elevated: var(--sp-shadow-lg);
444
444
  --sp-component-card-shadow-flat: var(--sp-shadow-none);
@@ -446,84 +446,62 @@
446
446
  --sp-component-card-shadow-ghost: var(--sp-shadow-none);
447
447
  --sp-component-card-outline-bg: var(--sp-component-card-bg);
448
448
  --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));
449
+ --sp-component-card-ghost-bg: var(--sp-component-button-ghost-bg);
450
450
  --sp-component-card-ghost-border: var(--sp-component-card-ghost-bg);
451
451
 
452
452
  /* 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)));
453
+ --sp-component-input-role-border: var(--sp-color-neutral-300);
454
+ --sp-component-input-role-bg: var(--sp-surface-input);
455
+ --sp-component-input-role-text: var(--sp-component-input-text);
456
+ --sp-component-input-role-placeholder: var(--sp-component-input-placeholder);
457
+ --sp-component-input-role-border-focus: var(--sp-color-focus-primary);
458
+ --sp-component-input-role-ring: var(--sp-color-focus-primary);
459
+ --sp-component-input-role-border-error: var(--sp-color-error-500);
460
+ --sp-component-input-role-bg-error: var(--sp-color-error-50);
461
+ --sp-component-input-role-text-error: var(--sp-color-error-700);
462
+ --sp-component-input-role-border-success: var(--sp-color-success-500);
463
+ --sp-component-input-role-bg-success: var(--sp-color-success-50);
464
+ --sp-component-input-role-text-success: var(--sp-color-success-700);
465
+ --sp-component-input-role-bg-disabled: var(--sp-surface-input);
466
+ --sp-component-input-role-text-disabled: var(--sp-text-on-surface-meta);
467
+ /* Important: border-disabled should fall back to a BORDER token, not a surface token */
468
+ --sp-component-input-role-border-disabled: var(--sp-color-neutral-200);
483
469
 
484
470
  /* 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);
471
+ --sp-component-badge-font: var(--sp-font-family-sans);
472
+ --sp-component-badge-weight: var(--sp-font-sm-weight);
473
+ --sp-component-badge-gap: var(--sp-space-4);
474
+ --sp-component-badge-radius: var(--sp-radius-pill);
475
+ --sp-component-badge-primary-bg: var(--sp-button-primary-bg);
476
+ --sp-component-badge-primary-text: var(--sp-button-text-on-primary);
477
+ --sp-component-badge-success-bg: var(--sp-badge-success-bg);
478
+ --sp-component-badge-success-text: var(--sp-badge-success-text);
479
+ --sp-component-badge-warning-bg: var(--sp-badge-warning-bg);
480
+ --sp-component-badge-warning-text: var(--sp-badge-warning-text);
481
+ --sp-component-badge-danger-bg: var(--sp-badge-danger-bg);
482
+ --sp-component-badge-danger-text: var(--sp-badge-danger-text);
483
+ --sp-component-badge-padding-x-sm: var(--sp-space-8);
484
+ --sp-component-badge-padding-x-md: var(--sp-space-12);
485
+ --sp-component-badge-padding-x-lg: var(--sp-space-16);
486
+ --sp-component-badge-padding-y-sm: var(--sp-space-4);
487
+ --sp-component-badge-padding-y-md: var(--sp-space-4);
488
+ --sp-component-badge-padding-y-lg: var(--sp-space-4);
511
489
 
512
490
  /* 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);
491
+ --sp-component-iconbox-radius: var(--sp-radius-lg);
492
+ --sp-component-iconbox-size-sm: var(--sp-space-32);
493
+ --sp-component-iconbox-size-md: var(--sp-space-48);
494
+ --sp-component-iconbox-size-lg: var(--sp-space-64);
495
+ --sp-component-iconbox-primary-bg: var(--sp-color-brand-50);
496
+ --sp-component-iconbox-primary-text: var(--sp-icon-box-icon-default);
497
+ --sp-component-iconbox-success-bg: var(--sp-color-success-50);
498
+ --sp-component-iconbox-success-text: var(--sp-icon-box-icon-success);
499
+ --sp-component-iconbox-warning-bg: var(--sp-color-warning-50);
500
+ --sp-component-iconbox-warning-text: var(--sp-icon-box-icon-warning);
501
+ --sp-component-iconbox-danger-bg: var(--sp-color-error-50);
502
+ --sp-component-iconbox-danger-text: var(--sp-icon-box-icon-danger);
503
+ --sp-component-iconbox-info-bg: var(--sp-color-info-50);
504
+ --sp-component-iconbox-info-text: var(--sp-badge-info-text);
527
505
  }
528
506
 
529
507
  /* BUTTONS -------------------------------------------------------------- */
@@ -531,37 +509,36 @@
531
509
  display: inline-flex;
532
510
  align-items: center;
533
511
  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);
512
+ gap: var(--sp-space-4);
513
+ padding: var(--sp-space-4) var(--sp-space-16);
514
+ border-radius: var(--sp-radius-md);
515
+ border: 1px solid var(--sp-component-button-border-base);
516
+ font-family: var(--sp-font-family-sans);
517
+ font-size: var(--sp-font-md-size);
541
518
  line-height: 1;
542
- font-weight: var(--sp-font-md-weight, 500);
519
+ font-weight: var(--sp-font-md-weight);
543
520
  text-decoration: none;
544
521
  appearance: none;
545
522
  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);
523
+ background-color var(--sp-duration-fast) var(--sp-easing-out),
524
+ color var(--sp-duration-fast) var(--sp-easing-out),
525
+ box-shadow var(--sp-duration-fast) var(--sp-easing-out),
526
+ border-color var(--sp-duration-fast) var(--sp-easing-out);
550
527
  cursor: pointer;
551
- min-height: var(--sp-min-touch-target, 44px);
528
+ min-height: var(--sp-min-touch-target);
552
529
  }
553
530
 
554
531
  .sp-btn:disabled,
555
532
  .sp-btn[aria-disabled="true"],
556
533
  .sp-btn.sp-btn--disabled {
557
534
  cursor: not-allowed;
558
- opacity: var(--sp-opacity-disabled, 0.5);
535
+ opacity: var(--sp-opacity-disabled);
559
536
  pointer-events: none;
560
537
  }
561
538
 
562
539
  .sp-btn--loading {
563
540
  pointer-events: none;
564
- opacity: var(--sp-opacity-loading, 0.7);
541
+ opacity: var(--sp-opacity-active);
565
542
  }
566
543
 
567
544
  .sp-btn--full {
@@ -569,43 +546,55 @@
569
546
  }
570
547
 
571
548
  .sp-btn--icon {
572
- padding-inline: var(--sp-space-sm, 0.75rem);
573
- padding-block: var(--sp-space-3xs, 0.125rem);
549
+ padding-inline: var(--sp-space-12);
550
+ padding-block: var(--sp-space-4);
574
551
  }
575
552
 
576
553
  /* sizes */
577
554
  .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);
555
+ padding: var(--sp-space-4) var(--sp-space-12);
556
+ font-size: var(--sp-font-sm-size);
557
+ line-height: var(--sp-font-sm-line-height);
581
558
  }
582
559
 
583
560
  .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);
561
+ padding: var(--sp-space-4) var(--sp-space-16);
562
+ font-size: var(--sp-font-md-size);
563
+ line-height: var(--sp-font-md-line-height);
587
564
  }
588
565
 
589
566
  .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);
567
+ padding: var(--sp-space-8) var(--sp-space-24);
568
+ font-size: var(--sp-font-lg-size);
569
+ line-height: var(--sp-font-lg-line-height);
570
+ }
571
+
572
+ /* Generic forced-state helpers (safe, variant rules still set actual colors) */
573
+ .sp-btn.sp-btn--hover,
574
+ .sp-btn.is-hover {
575
+ /* no-op here; variant sections below define the actual hover colors */
576
+ }
577
+
578
+ .sp-btn.sp-btn--active,
579
+ .sp-btn.is-active {
580
+ /* no-op here; variant sections below define the actual active colors */
593
581
  }
594
582
 
595
583
  /* primary */
596
584
  .sp-btn--primary {
597
585
  background-color: var(--sp-component-button-primary-bg);
598
586
  color: var(--sp-component-button-primary-text);
599
- box-shadow: var(--sp-component-button-shadow,
600
- var(--sp-shadow-sm));
587
+ box-shadow: var(--sp-component-button-shadow);
601
588
  }
602
589
 
603
590
  .sp-btn--primary.sp-btn--hover,
591
+ .sp-btn--primary.is-hover,
604
592
  .sp-btn--primary:hover {
605
593
  background-color: var(--sp-component-button-primary-bg-hover);
606
594
  }
607
595
 
608
596
  .sp-btn--primary.sp-btn--active,
597
+ .sp-btn--primary.is-active,
609
598
  .sp-btn--primary:active {
610
599
  background-color: var(--sp-component-button-primary-bg-active);
611
600
  }
@@ -625,11 +614,13 @@
625
614
  }
626
615
 
627
616
  .sp-btn--secondary.sp-btn--hover,
617
+ .sp-btn--secondary.is-hover,
628
618
  .sp-btn--secondary:hover {
629
619
  background-color: var(--sp-component-button-secondary-bg-hover);
630
620
  }
631
621
 
632
622
  .sp-btn--secondary.sp-btn--active,
623
+ .sp-btn--secondary.is-active,
633
624
  .sp-btn--secondary:active {
634
625
  background-color: var(--sp-component-button-secondary-bg-active);
635
626
  }
@@ -648,11 +639,13 @@
648
639
  }
649
640
 
650
641
  .sp-btn--ghost.sp-btn--hover,
642
+ .sp-btn--ghost.is-hover,
651
643
  .sp-btn--ghost:hover {
652
644
  background-color: var(--sp-component-button-ghost-bg-hover);
653
645
  }
654
646
 
655
647
  .sp-btn--ghost.sp-btn--active,
648
+ .sp-btn--ghost.is-active,
656
649
  .sp-btn--ghost:active {
657
650
  background-color: var(--sp-component-button-ghost-bg-active);
658
651
  }
@@ -670,11 +663,13 @@
670
663
  }
671
664
 
672
665
  .sp-btn--danger.sp-btn--hover,
666
+ .sp-btn--danger.is-hover,
673
667
  .sp-btn--danger:hover {
674
668
  background-color: var(--sp-component-button-danger-bg-hover);
675
669
  }
676
670
 
677
671
  .sp-btn--danger.sp-btn--active,
672
+ .sp-btn--danger.is-active,
678
673
  .sp-btn--danger:active {
679
674
  background-color: var(--sp-component-button-danger-bg-active);
680
675
  }
@@ -692,11 +687,13 @@
692
687
  }
693
688
 
694
689
  .sp-btn--success.sp-btn--hover,
690
+ .sp-btn--success.is-hover,
695
691
  .sp-btn--success:hover {
696
692
  background-color: var(--sp-component-button-success-bg-hover);
697
693
  }
698
694
 
699
695
  .sp-btn--success.sp-btn--active,
696
+ .sp-btn--success.is-active,
700
697
  .sp-btn--success:active {
701
698
  background-color: var(--sp-component-button-success-bg-active);
702
699
  }
@@ -711,45 +708,45 @@
711
708
 
712
709
  .sp-input-wrapper {
713
710
  display: grid;
714
- gap: var(--sp-space-4xs, 0.125rem);
711
+ gap: var(--sp-space-4);
715
712
  width: 100%;
716
713
  }
717
714
 
718
715
  .sp-label {
719
716
  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);
717
+ font-size: var(--sp-font-sm-size);
718
+ font-weight: var(--sp-font-sm-weight);
719
+ line-height: var(--sp-font-sm-line-height);
723
720
  }
724
721
 
725
722
  .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);
723
+ color: var(--sp-text-on-surface-meta);
724
+ font-size: var(--sp-font-xs-size);
725
+ line-height: var(--sp-font-xs-line-height);
729
726
  }
730
727
 
731
728
  .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);
729
+ color: var(--sp-component-input-role-text-error);
730
+ font-size: var(--sp-font-xs-size);
731
+ line-height: var(--sp-font-xs-line-height);
735
732
  }
736
733
 
737
734
  .sp-input {
738
735
  width: 100%;
739
736
  display: block;
740
737
  appearance: none;
741
- padding: var(--sp-space-2xs, 0.25rem) var(--sp-space-md, 1rem);
742
- border-radius: var(--sp-radius-md, 4px);
738
+ padding: var(--sp-space-4) var(--sp-space-16);
739
+ border-radius: var(--sp-radius-md);
743
740
  border: 1px solid var(--sp-component-input-role-border);
744
741
  background-color: var(--sp-component-input-role-bg);
745
742
  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);
743
+ font-family: var(--sp-font-family-sans);
744
+ font-size: var(--sp-font-md-size);
745
+ line-height: var(--sp-font-md-line-height);
749
746
  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);
747
+ border-color var(--sp-duration-fast) var(--sp-easing-out),
748
+ box-shadow var(--sp-duration-fast) var(--sp-easing-out),
749
+ background-color var(--sp-duration-fast) var(--sp-easing-out);
753
750
  }
754
751
 
755
752
  .sp-input::placeholder {
@@ -757,21 +754,21 @@
757
754
  }
758
755
 
759
756
  .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);
757
+ padding: var(--sp-space-4) var(--sp-space-12);
758
+ font-size: var(--sp-font-sm-size);
759
+ line-height: var(--sp-font-sm-line-height);
763
760
  }
764
761
 
765
762
  .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);
763
+ padding: var(--sp-space-4) var(--sp-space-16);
764
+ font-size: var(--sp-font-md-size);
765
+ line-height: var(--sp-font-md-line-height);
769
766
  }
770
767
 
771
768
  .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);
769
+ padding: var(--sp-space-8) var(--sp-space-24);
770
+ font-size: var(--sp-font-lg-size);
771
+ line-height: var(--sp-font-lg-line-height);
775
772
  }
776
773
 
777
774
  .sp-input--full {
@@ -781,20 +778,21 @@
781
778
  .sp-input:focus,
782
779
  .sp-input--focus {
783
780
  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);
781
+ box-shadow: 0 0 0 calc(var(--sp-focus-ring-width) + 1px) var(--sp-component-input-role-ring);
785
782
  outline: none;
786
783
  }
787
784
 
785
+ /* State styling should not force typed text to be red/green by default */
788
786
  .sp-input--error {
789
787
  border-color: var(--sp-component-input-role-border-error);
790
788
  background-color: var(--sp-component-input-role-bg-error);
791
- color: var(--sp-component-input-role-text-error);
789
+ color: var(--sp-component-input-role-text);
792
790
  }
793
791
 
794
792
  .sp-input--success {
795
793
  border-color: var(--sp-component-input-role-border-success);
796
794
  background-color: var(--sp-component-input-role-bg-success);
797
- color: var(--sp-component-input-role-text-success);
795
+ color: var(--sp-component-input-role-text);
798
796
  }
799
797
 
800
798
  .sp-input--disabled {
@@ -804,6 +802,10 @@
804
802
  cursor: not-allowed;
805
803
  }
806
804
 
805
+ .sp-input--disabled::placeholder {
806
+ color: var(--sp-component-input-role-text-disabled);
807
+ }
808
+
807
809
  .sp-input--disabled,
808
810
  .sp-input--disabled:focus {
809
811
  box-shadow: none;
@@ -814,15 +816,13 @@
814
816
  .sp-card {
815
817
  background-color: var(--sp-component-card-bg);
816
818
  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)));
819
+ border-radius: var(--sp-radius-lg);
820
+ padding: var(--sp-space-24);
821
+ box-shadow: var(--sp-component-card-shadow);
822
+ border: 1px solid var(--sp-component-card-border-base);
822
823
  }
823
824
 
824
- .sp-card p,
825
- .sp-card span {
825
+ .sp-card p {
826
826
  color: var(--sp-component-card-text-muted);
827
827
  }
828
828
 
@@ -832,28 +832,28 @@
832
832
  }
833
833
 
834
834
  .sp-card--elevated {
835
- box-shadow: var(--sp-component-card-shadow-elevated, var(--sp-shadow-lg));
835
+ box-shadow: var(--sp-component-card-shadow-elevated);
836
836
  }
837
837
 
838
838
  .sp-card--flat {
839
- box-shadow: var(--sp-component-card-shadow-flat, var(--sp-shadow-none));
839
+ box-shadow: var(--sp-component-card-shadow-flat);
840
840
  border-color: var(--sp-component-card-border);
841
841
  }
842
842
 
843
843
  .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));
844
+ background-color: var(--sp-component-card-outline-bg);
845
+ border-color: var(--sp-component-card-outline-border);
846
+ box-shadow: var(--sp-component-card-shadow-outline);
847
847
  }
848
848
 
849
849
  .sp-card--ghost {
850
850
  background-color: var(--sp-component-card-ghost-bg);
851
851
  border-color: var(--sp-component-card-ghost-border);
852
- box-shadow: var(--sp-component-card-shadow-ghost, var(--sp-shadow-none));
852
+ box-shadow: var(--sp-component-card-shadow-ghost);
853
853
  }
854
854
 
855
855
  .sp-card--padded {
856
- padding: var(--sp-space-xl, 2rem);
856
+ padding: var(--sp-space-32);
857
857
  }
858
858
 
859
859
  .sp-card--full {
@@ -863,15 +863,15 @@
863
863
  .sp-card--interactive {
864
864
  cursor: pointer;
865
865
  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);
866
+ transform var(--sp-duration-fast) var(--sp-easing-out),
867
+ box-shadow var(--sp-duration-fast) var(--sp-easing-out);
868
868
  }
869
869
 
870
870
  .sp-card--interactive:hover,
871
871
  .sp-card--interactive:focus-visible,
872
872
  .sp-card--interactive:focus-within {
873
873
  transform: translateY(-1px);
874
- box-shadow: var(--sp-component-card-shadow-elevated, var(--sp-shadow-lg));
874
+ box-shadow: var(--sp-component-card-shadow-elevated);
875
875
  }
876
876
 
877
877
  /* BADGES --------------------------------------------------------------- */
@@ -880,37 +880,33 @@
880
880
  display: inline-flex;
881
881
  align-items: center;
882
882
  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);
883
+ gap: var(--sp-component-badge-gap);
884
+ border-radius: var(--sp-component-badge-radius);
885
+ font-family: var(--sp-component-badge-font);
886
+ font-weight: var(--sp-component-badge-weight);
887
+ padding: var(--sp-component-badge-padding-y-md) var(--sp-component-badge-padding-x-md);
888
+ font-size: var(--sp-font-sm-size);
889
+ line-height: var(--sp-font-sm-line-height);
891
890
  border: 1px solid transparent;
892
891
  white-space: nowrap;
893
892
  }
894
893
 
895
894
  .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);
895
+ padding: var(--sp-component-badge-padding-y-sm) var(--sp-component-badge-padding-x-sm);
896
+ font-size: var(--sp-font-xs-size);
897
+ line-height: var(--sp-font-xs-line-height);
900
898
  }
901
899
 
902
900
  .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);
901
+ padding: var(--sp-component-badge-padding-y-md) var(--sp-component-badge-padding-x-md);
902
+ font-size: var(--sp-font-sm-size);
903
+ line-height: var(--sp-font-sm-line-height);
907
904
  }
908
905
 
909
906
  .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);
907
+ padding: var(--sp-component-badge-padding-y-lg) var(--sp-component-badge-padding-x-lg);
908
+ font-size: var(--sp-font-md-size);
909
+ line-height: var(--sp-font-md-line-height);
914
910
  }
915
911
 
916
912
  .sp-badge--primary {
@@ -939,35 +935,78 @@
939
935
  display: inline-flex;
940
936
  align-items: center;
941
937
  justify-content: center;
942
- border-radius: var(--sp-component-iconbox-radius, var(--sp-radius-lg, 8px));
938
+ border-radius: var(--sp-component-iconbox-radius);
943
939
  color: var(--sp-component-iconbox-primary-text);
944
940
  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);
941
+ font-family: var(--sp-font-family-sans);
942
+ font-weight: var(--sp-font-md-weight);
943
+ line-height: 0;
944
+ }
945
+
946
+ /* Harden icon rendering:
947
+ - center, no baseline wobble
948
+ - force currentColor for common svg shapes
949
+ - preserve stroke-only icons (fill="none")
950
+ */
951
+ .sp-iconbox,
952
+ .sp-iconbox>i {
953
+ line-height: 0;
954
+ }
955
+
956
+ .sp-iconbox>i {
957
+ display: inline-flex;
958
+ align-items: center;
959
+ justify-content: center;
960
+ width: 1em;
961
+ height: 1em;
962
+ flex-shrink: 0;
963
+ vertical-align: middle;
964
+ }
965
+
966
+ .sp-iconbox svg {
967
+ display: block;
968
+ width: 1em;
969
+ height: 1em;
970
+ flex-shrink: 0;
971
+ }
972
+
973
+ /* default to inheriting via currentColor */
974
+ .sp-iconbox svg,
975
+ .sp-iconbox svg path,
976
+ .sp-iconbox svg circle,
977
+ .sp-iconbox svg rect,
978
+ .sp-iconbox svg line,
979
+ .sp-iconbox svg polyline,
980
+ .sp-iconbox svg polygon,
981
+ .sp-iconbox svg g {
982
+ stroke: currentColor;
983
+ }
984
+
985
+ /* only force fill when the icon isn't explicitly stroke-only */
986
+ .sp-iconbox svg:not([fill="none"]),
987
+ .sp-iconbox svg:not([fill="none"]) path,
988
+ .sp-iconbox svg:not([fill="none"]) circle,
989
+ .sp-iconbox svg:not([fill="none"]) rect,
990
+ .sp-iconbox svg:not([fill="none"]) polygon {
991
+ fill: currentColor;
947
992
  }
948
993
 
949
994
  .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);
995
+ width: var(--sp-component-iconbox-size-sm);
996
+ height: var(--sp-component-iconbox-size-sm);
997
+ font-size: var(--sp-font-sm-size);
953
998
  }
954
999
 
955
1000
  .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);
1001
+ width: var(--sp-component-iconbox-size-md);
1002
+ height: var(--sp-component-iconbox-size-md);
1003
+ font-size: var(--sp-font-md-size);
959
1004
  }
960
1005
 
961
1006
  .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;
1007
+ width: var(--sp-component-iconbox-size-lg);
1008
+ height: var(--sp-component-iconbox-size-lg);
1009
+ font-size: var(--sp-font-lg-size);
971
1010
  }
972
1011
 
973
1012
  .sp-iconbox--primary {
@@ -999,28 +1038,28 @@
999
1038
  .sp-stack {
1000
1039
  display: flex;
1001
1040
  flex-direction: column;
1002
- gap: var(--sp-layout-stack-gap-md, var(--sp-space-md, 1rem));
1041
+ gap: var(--sp-layout-stack-gap-md);
1003
1042
  }
1004
1043
 
1005
1044
  .sp-hstack {
1006
1045
  display: flex;
1007
1046
  flex-direction: row;
1008
1047
  align-items: center;
1009
- gap: var(--sp-layout-stack-gap-md, var(--sp-space-md, 1rem));
1048
+ gap: var(--sp-layout-stack-gap-md);
1010
1049
  }
1011
1050
 
1012
1051
  .sp-container {
1013
1052
  width: 100%;
1014
1053
  margin-left: auto;
1015
1054
  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);
1055
+ padding-left: var(--sp-layout-container-padding-inline-md);
1056
+ padding-right: var(--sp-layout-container-padding-inline-md);
1057
+ max-width: 72rem;
1019
1058
  }
1020
1059
 
1021
1060
  .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));
1061
+ padding-top: var(--sp-layout-section-padding-md);
1062
+ padding-bottom: var(--sp-layout-section-padding-md);
1024
1063
  }
1025
1064
 
1026
1065
  .sp-shadow-soft {