@lifeonlars/prime-yggdrasil 0.1.4 → 0.2.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.
@@ -388,6 +388,22 @@
388
388
  .p-splitbutton {
389
389
  border-radius: var(--radius-md);
390
390
  }
391
+
392
+ /* SplitButton border radius overrides for grouped buttons */
393
+ .p-splitbutton > .p-button {
394
+ border-radius: 0;
395
+ }
396
+
397
+ .p-splitbutton > .p-button:first-child {
398
+ border-top-left-radius: var(--radius-md);
399
+ border-bottom-left-radius: var(--radius-md);
400
+ }
401
+
402
+ .p-splitbutton > .p-button:last-child {
403
+ border-top-right-radius: var(--radius-md);
404
+ border-bottom-right-radius: var(--radius-md);
405
+ }
406
+
391
407
  .p-splitbutton.p-button-outlined > .p-button {
392
408
  background-color: transparent;
393
409
  color: var(--text-state-interactive);
@@ -611,3 +627,82 @@
611
627
  border-color: transparent;
612
628
  color: var(--severity-danger-text);
613
629
  }
630
+
631
+ /* Button Contrast Variant */
632
+ .p-button.p-button-contrast,
633
+ .p-button-group.p-button-contrast > .p-button,
634
+ .p-splitbutton.p-button-contrast > .p-button {
635
+ color: var(--surface-neutral-primary);
636
+ background: var(--text-neutral-loud);
637
+ border: 1px solid var(--text-neutral-loud);
638
+ }
639
+
640
+ .p-button.p-button-contrast:not(:disabled):hover,
641
+ .p-button-group.p-button-contrast > .p-button:not(:disabled):hover,
642
+ .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
643
+ background: var(--text-neutral-loud);
644
+ color: var(--surface-neutral-primary);
645
+ border-color: var(--text-neutral-loud);
646
+ }
647
+
648
+ .p-button.p-button-contrast:not(:disabled):focus,
649
+ .p-button-group.p-button-contrast > .p-button:not(:disabled):focus,
650
+ .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
651
+ box-shadow: none;
652
+ }
653
+
654
+ .p-button.p-button-contrast:not(:disabled):active,
655
+ .p-button-group.p-button-contrast > .p-button:not(:disabled):active,
656
+ .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
657
+ background: var(--text-neutral-default);
658
+ color: var(--surface-neutral-primary);
659
+ border-color: var(--text-neutral-default);
660
+ }
661
+
662
+ .p-button.p-button-contrast.p-button-outlined,
663
+ .p-button-group.p-button-contrast > .p-button.p-button-outlined,
664
+ .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
665
+ background-color: transparent;
666
+ color: var(--text-neutral-loud);
667
+ border: 1px solid;
668
+ }
669
+
670
+ .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover,
671
+ .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover,
672
+ .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
673
+ background: color-mix(in srgb, var(--text-neutral-loud) 4%, transparent);
674
+ color: var(--text-neutral-loud);
675
+ border: 1px solid;
676
+ }
677
+
678
+ .p-button.p-button-contrast.p-button-outlined:not(:disabled):active,
679
+ .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active,
680
+ .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
681
+ background: color-mix(in srgb, var(--text-neutral-loud) 16%, transparent);
682
+ color: var(--text-neutral-loud);
683
+ border: 1px solid;
684
+ }
685
+
686
+ .p-button.p-button-contrast.p-button-text,
687
+ .p-button-group.p-button-contrast > .p-button.p-button-text,
688
+ .p-splitbutton.p-button-contrast > .p-button.p-button-text {
689
+ background-color: transparent;
690
+ color: var(--text-neutral-loud);
691
+ border-color: transparent;
692
+ }
693
+
694
+ .p-button.p-button-contrast.p-button-text:not(:disabled):hover,
695
+ .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover,
696
+ .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
697
+ background: color-mix(in srgb, var(--text-neutral-loud) 4%, transparent);
698
+ border-color: transparent;
699
+ color: var(--text-neutral-loud);
700
+ }
701
+
702
+ .p-button.p-button-contrast.p-button-text:not(:disabled):active,
703
+ .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active,
704
+ .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
705
+ background: color-mix(in srgb, var(--text-neutral-loud) 16%, transparent);
706
+ border-color: transparent;
707
+ color: var(--text-neutral-loud);
708
+ }
@@ -917,3 +917,144 @@
917
917
  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
918
918
  background: var(--surface-state-hover);
919
919
  }
920
+
921
+ /* DataTable Column Filters */
922
+ .p-column-filter-menu-button {
923
+ width: 2rem;
924
+ height: 2rem;
925
+ color: var(--text-neutral-subdued);
926
+ border: 0 none;
927
+ background: transparent;
928
+ border-radius: var(--radius-full);
929
+ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
930
+ }
931
+
932
+ .p-column-filter-menu-button:hover {
933
+ color: var(--text-neutral-loud);
934
+ border-color: transparent;
935
+ background: var(--surface-state-hover);
936
+ }
937
+
938
+ .p-column-filter-menu-button:focus-visible {
939
+ outline: 0 none;
940
+ outline-offset: 0;
941
+ box-shadow: 0 0 0 0.2rem var(--surface-brand-overlay);
942
+ }
943
+
944
+ .p-column-filter-menu-button.p-column-filter-menu-button-open,
945
+ .p-column-filter-menu-button.p-column-filter-menu-button-open:hover {
946
+ background: var(--surface-state-hover);
947
+ color: var(--text-neutral-loud);
948
+ }
949
+
950
+ .p-column-filter-menu-button.p-column-filter-menu-button-active,
951
+ .p-column-filter-menu-button.p-column-filter-menu-button-active:hover {
952
+ background: var(--surface-brand-overlay);
953
+ color: var(--text-state-interactive);
954
+ }
955
+
956
+ .p-column-filter-clear-button {
957
+ width: 2rem;
958
+ height: 2rem;
959
+ color: var(--text-neutral-subdued);
960
+ border: 0 none;
961
+ background: transparent;
962
+ border-radius: var(--radius-full);
963
+ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
964
+ }
965
+
966
+ .p-column-filter-clear-button:hover {
967
+ color: var(--text-neutral-loud);
968
+ border-color: transparent;
969
+ background: var(--surface-state-hover);
970
+ }
971
+
972
+ .p-column-filter-clear-button:focus-visible {
973
+ outline: 0 none;
974
+ outline-offset: 0;
975
+ box-shadow: 0 0 0 0.2rem var(--surface-brand-overlay);
976
+ }
977
+
978
+ .p-column-filter-row .p-column-filter-menu-button,
979
+ .p-column-filter-row .p-column-filter-clear-button {
980
+ margin-left: 0.5rem;
981
+ }
982
+
983
+ .p-column-filter-overlay {
984
+ background: var(--surface-neutral-primary);
985
+ color: var(--text-neutral-default);
986
+ border: 0 none;
987
+ border-radius: var(--radius-md);
988
+ box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
989
+ min-width: 12.5rem;
990
+ }
991
+
992
+ .p-column-filter-overlay .p-column-filter-row-items {
993
+ padding: 0.75rem 0;
994
+ }
995
+
996
+ .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item {
997
+ margin: 0;
998
+ padding: 0.75rem 1.25rem;
999
+ border: 0 none;
1000
+ color: var(--text-neutral-default);
1001
+ background: transparent;
1002
+ transition: box-shadow 0.2s;
1003
+ border-radius: 0;
1004
+ }
1005
+
1006
+ .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
1007
+ outline: 0 none;
1008
+ outline-offset: 0;
1009
+ box-shadow: inset 0 0 0 0.15rem var(--surface-brand-overlay);
1010
+ }
1011
+
1012
+ .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
1013
+ color: var(--text-state-interactive);
1014
+ background: var(--surface-brand-overlay);
1015
+ }
1016
+
1017
+ .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight, .p-disabled):hover {
1018
+ color: var(--text-neutral-default);
1019
+ background: var(--surface-state-hover);
1020
+ }
1021
+
1022
+ .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
1023
+ border-top: 1px solid var(--border-neutral-subdued);
1024
+ margin: 0.25rem 0;
1025
+ }
1026
+
1027
+ .p-column-filter-overlay-menu .p-column-filter-operator {
1028
+ padding: 0.75rem 1.25rem;
1029
+ border-bottom: 1px solid var(--border-neutral-subdued);
1030
+ color: var(--text-neutral-loud);
1031
+ background: var(--surface-neutral-secondary);
1032
+ margin: 0;
1033
+ border-top-right-radius: var(--radius-md);
1034
+ border-top-left-radius: var(--radius-md);
1035
+ }
1036
+
1037
+ .p-column-filter-overlay-menu .p-column-filter-constraint {
1038
+ padding: 1.25rem;
1039
+ border-bottom: 1px solid var(--border-neutral-subdued);
1040
+ }
1041
+
1042
+ .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown {
1043
+ margin-bottom: 0.5rem;
1044
+ }
1045
+
1046
+ .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button {
1047
+ margin-top: 0.5rem;
1048
+ }
1049
+
1050
+ .p-column-filter-overlay-menu .p-column-filter-constraint:last-child {
1051
+ border-bottom: 0 none;
1052
+ }
1053
+
1054
+ .p-column-filter-overlay-menu .p-column-filter-add-rule {
1055
+ padding: 0.75rem 1.25rem;
1056
+ }
1057
+
1058
+ .p-column-filter-overlay-menu .p-column-filter-buttonbar {
1059
+ padding: 1.25rem;
1060
+ }