@signiphi/page-assembly 0.2.0-beta.16 → 0.2.0-beta.17

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 (7) hide show
  1. package/dist/index.js +10 -8
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +10 -8
  4. package/dist/index.mjs.map +1 -1
  5. package/dist/styles/index.css +182 -155
  6. package/package.json +1 -1
  7. package/src/styles/index.css +164 -109
package/dist/styles/index.css CHANGED
@@ -15,7 +15,6 @@
15
15
  --color-red-700: rgb(191, 0, 15);
16
16
  --color-blue-50: rgb(239, 246, 255);
17
17
  --color-blue-500: rgb(50, 128, 255);
18
- --color-gray-50: rgb(249, 250, 251);
19
18
  --color-gray-100: rgb(243, 244, 246);
20
19
  --color-gray-200: rgb(229, 231, 235);
21
20
  --color-gray-300: rgb(209, 213, 220);
@@ -49,26 +48,6 @@
49
48
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
50
49
  --default-font-family: var(--font-sans);
51
50
  --default-mono-font-family: var(--font-mono);
52
- --color-primary: #0099cd;
53
- --color-primary-foreground: #ffffff;
54
- --color-secondary: #f1f5f9;
55
- --color-secondary-foreground: #0f172a;
56
- --color-destructive: #ef4444;
57
- --color-destructive-foreground: #ffffff;
58
- --color-muted: #f1f5f9;
59
- --color-muted-foreground: #64748b;
60
- --color-accent: #f1f5f9;
61
- --color-accent-foreground: #0f172a;
62
- --color-popover: #ffffff;
63
- --color-popover-foreground: #0f172a;
64
- --color-card: #ffffff;
65
- --color-card-foreground: #0f172a;
66
- --color-border: #e2e8f0;
67
- --color-input: #e2e8f0;
68
- --color-ring: #0099cd;
69
- --color-background: #ffffff;
70
- --color-foreground: #0f172a;
71
- --xpa-border: 214.3 31.8% 91.4%;
72
51
  }
73
52
  @supports (color: color(display-p3 0 0 0%)) {
74
53
  :root:not(#\#), .signiphi-page-assembly:not(#\#) :host {
@@ -710,20 +689,21 @@
710
689
  border-style: dashed;
711
690
  }
712
691
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) .border-border {
713
- border-color: #e2e8f0;
714
- border-color: var(--color-border);
692
+ border-color: hsl(214, 32%, 91%);
693
+ border-color: hsl(var(--xpa-border));
715
694
  }
716
695
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) .border-destructive\/50 {
717
- border-color: rgba(239, 68, 68, 0.5);
696
+ border-color: hsl(0, 84%, 60%);
697
+ border-color: hsl(var(--xpa-destructive));
718
698
  }
719
699
  @supports (color: color-mix(in lab, red, red)) {
720
700
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) .border-destructive\/50 {
721
- border-color: color-mix(in oklab, #ef4444 50%, transparent);
701
+ border-color: color-mix(in oklab, hsl(0, 84%, 60%) 50%, transparent);
722
702
  }
723
703
 
724
704
  @supports (color: color-mix(in lch, red, blue)) {
725
705
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) .border-destructive\/50 {
726
- border-color: color-mix(in oklab, var(--color-destructive) 50%, transparent);
706
+ border-color: color-mix(in oklab, hsl(var(--xpa-destructive)) 50%, transparent);
727
707
  }
728
708
  }
729
709
  }
@@ -731,29 +711,26 @@
731
711
  border-color: rgb(229, 231, 235);
732
712
  border-color: var(--color-gray-200);
733
713
  }
734
- .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) .border-gray-300 {
735
- border-color: rgb(209, 213, 220);
736
- border-color: var(--color-gray-300);
737
- }
738
714
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) .border-input {
739
- border-color: #e2e8f0;
740
- border-color: var(--color-input);
715
+ border-color: hsl(214, 32%, 91%);
716
+ border-color: hsl(var(--xpa-input));
741
717
  }
742
718
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) .border-primary {
743
- border-color: #0099cd;
744
- border-color: var(--color-primary);
719
+ border-color: hsl(198, 100%, 40%);
720
+ border-color: hsl(var(--xpa-primary));
745
721
  }
746
722
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) .border-primary\/20 {
747
- border-color: rgba(0, 153, 205, 0.2);
723
+ border-color: hsl(198, 100%, 40%);
724
+ border-color: hsl(var(--xpa-primary));
748
725
  }
749
726
  @supports (color: color-mix(in lab, red, red)) {
750
727
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) .border-primary\/20 {
751
- border-color: color-mix(in oklab, #0099cd 20%, transparent);
728
+ border-color: color-mix(in oklab, hsl(198, 100%, 40%) 20%, transparent);
752
729
  }
753
730
 
754
731
  @supports (color: color-mix(in lch, red, blue)) {
755
732
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) .border-primary\/20 {
756
- border-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
733
+ border-color: color-mix(in oklab, hsl(var(--xpa-primary)) 20%, transparent);
757
734
  }
758
735
  }
759
736
  }
@@ -761,8 +738,8 @@
761
738
  border-color: transparent;
762
739
  }
763
740
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) .bg-background {
764
- background-color: #ffffff;
765
- background-color: var(--color-background);
741
+ background-color: hsl(0, 0%, 100%);
742
+ background-color: hsl(var(--xpa-background));
766
743
  }
767
744
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) .bg-black\/50 {
768
745
  background-color: rgba(0, 0, 0, 0.5);
@@ -797,74 +774,73 @@
797
774
  background-color: var(--color-blue-50);
798
775
  }
799
776
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) .bg-card {
800
- background-color: #ffffff;
801
- background-color: var(--color-card);
777
+ background-color: hsl(0, 0%, 100%);
778
+ background-color: hsl(var(--xpa-card));
779
+ }
780
+ .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) .bg-card\/90 {
781
+ background-color: hsl(0, 0%, 100%);
782
+ background-color: hsl(var(--xpa-card));
783
+ }
784
+ @supports (color: color-mix(in lab, red, red)) {
785
+ .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) .bg-card\/90 {
786
+ background-color: color-mix(in oklab, hsl(0, 0%, 100%) 90%, transparent);
787
+ }
788
+
789
+ @supports (color: color-mix(in lch, red, blue)) {
790
+ .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) .bg-card\/90 {
791
+ background-color: color-mix(in oklab, hsl(var(--xpa-card)) 90%, transparent);
792
+ }
793
+ }
802
794
  }
803
795
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) .bg-destructive {
804
- background-color: #ef4444;
805
- background-color: var(--color-destructive);
796
+ background-color: hsl(0, 84%, 60%);
797
+ background-color: hsl(var(--xpa-destructive));
806
798
  }
807
799
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) .bg-destructive\/5 {
808
- background-color: rgba(239, 68, 68, 0.05);
800
+ background-color: hsl(0, 84%, 60%);
801
+ background-color: hsl(var(--xpa-destructive));
809
802
  }
810
803
  @supports (color: color-mix(in lab, red, red)) {
811
804
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) .bg-destructive\/5 {
812
- background-color: color-mix(in oklab, #ef4444 5%, transparent);
805
+ background-color: color-mix(in oklab, hsl(0, 84%, 60%) 5%, transparent);
813
806
  }
814
807
 
815
808
  @supports (color: color-mix(in lch, red, blue)) {
816
809
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) .bg-destructive\/5 {
817
- background-color: color-mix(in oklab, var(--color-destructive) 5%, transparent);
810
+ background-color: color-mix(in oklab, hsl(var(--xpa-destructive)) 5%, transparent);
818
811
  }
819
812
  }
820
813
  }
821
814
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) .bg-muted {
822
- background-color: #f1f5f9;
823
- background-color: var(--color-muted);
815
+ background-color: hsl(210, 40%, 96%);
816
+ background-color: hsl(var(--xpa-muted));
824
817
  }
825
818
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) .bg-popover {
826
- background-color: #ffffff;
827
- background-color: var(--color-popover);
819
+ background-color: hsl(0, 0%, 100%);
820
+ background-color: hsl(var(--xpa-popover));
828
821
  }
829
822
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) .bg-primary {
830
- background-color: #0099cd;
831
- background-color: var(--color-primary);
823
+ background-color: hsl(198, 100%, 40%);
824
+ background-color: hsl(var(--xpa-primary));
832
825
  }
833
826
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) .bg-primary\/20 {
834
- background-color: rgba(0, 153, 205, 0.2);
827
+ background-color: hsl(198, 100%, 40%);
828
+ background-color: hsl(var(--xpa-primary));
835
829
  }
836
830
  @supports (color: color-mix(in lab, red, red)) {
837
831
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) .bg-primary\/20 {
838
- background-color: color-mix(in oklab, #0099cd 20%, transparent);
832
+ background-color: color-mix(in oklab, hsl(198, 100%, 40%) 20%, transparent);
839
833
  }
840
834
 
841
835
  @supports (color: color-mix(in lch, red, blue)) {
842
836
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) .bg-primary\/20 {
843
- background-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
837
+ background-color: color-mix(in oklab, hsl(var(--xpa-primary)) 20%, transparent);
844
838
  }
845
839
  }
846
840
  }
847
841
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) .bg-secondary {
848
- background-color: #f1f5f9;
849
- background-color: var(--color-secondary);
850
- }
851
- .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) .bg-white {
852
- background-color: #fff;
853
- background-color: var(--color-white);
854
- }
855
- .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) .bg-white\/90 {
856
- background-color: rgba(255, 255, 255, 0.9);
857
- }
858
- @supports (color: color-mix(in lab, red, red)) {
859
- .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) .bg-white\/90 {
860
- background-color: color-mix(in oklab, #fff 90%, transparent);
861
- }
862
-
863
- @supports (color: color-mix(in lch, red, blue)) {
864
- .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) .bg-white\/90 {
865
- background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
866
- }
867
- }
842
+ background-color: hsl(210, 40%, 96%);
843
+ background-color: hsl(var(--xpa-secondary));
868
844
  }
869
845
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) .fill-current {
870
846
  fill: currentcolor;
@@ -1037,20 +1013,20 @@
1037
1013
  color: var(--color-blue-500);
1038
1014
  }
1039
1015
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) .text-card-foreground {
1040
- color: #0f172a;
1041
- color: var(--color-card-foreground);
1016
+ color: hsl(222, 84%, 5%);
1017
+ color: hsl(var(--xpa-card-foreground));
1042
1018
  }
1043
1019
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) .text-destructive {
1044
- color: #ef4444;
1045
- color: var(--color-destructive);
1020
+ color: hsl(0, 84%, 60%);
1021
+ color: hsl(var(--xpa-destructive));
1046
1022
  }
1047
1023
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) .text-destructive-foreground {
1048
- color: #ffffff;
1049
- color: var(--color-destructive-foreground);
1024
+ color: hsl(0, 0%, 100%);
1025
+ color: hsl(var(--xpa-destructive-foreground));
1050
1026
  }
1051
1027
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) .text-foreground {
1052
- color: #0f172a;
1053
- color: var(--color-foreground);
1028
+ color: hsl(222, 84%, 5%);
1029
+ color: hsl(var(--xpa-foreground));
1054
1030
  }
1055
1031
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) .text-gray-400 {
1056
1032
  color: rgb(153, 161, 175);
@@ -1069,20 +1045,20 @@
1069
1045
  color: var(--color-gray-900);
1070
1046
  }
1071
1047
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) .text-muted-foreground {
1072
- color: #64748b;
1073
- color: var(--color-muted-foreground);
1048
+ color: hsl(215, 16%, 47%);
1049
+ color: hsl(var(--xpa-muted-foreground));
1074
1050
  }
1075
1051
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) .text-popover-foreground {
1076
- color: #0f172a;
1077
- color: var(--color-popover-foreground);
1052
+ color: hsl(222, 84%, 5%);
1053
+ color: hsl(var(--xpa-popover-foreground));
1078
1054
  }
1079
1055
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) .text-primary {
1080
- color: #0099cd;
1081
- color: var(--color-primary);
1056
+ color: hsl(198, 100%, 40%);
1057
+ color: hsl(var(--xpa-primary));
1082
1058
  }
1083
1059
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) .text-primary-foreground {
1084
- color: #ffffff;
1085
- color: var(--color-primary-foreground);
1060
+ color: hsl(0, 0%, 100%);
1061
+ color: hsl(var(--xpa-primary-foreground));
1086
1062
  }
1087
1063
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) .text-red-500 {
1088
1064
  color: rgb(251, 44, 54);
@@ -1094,8 +1070,8 @@
1094
1070
  color: var(--color-red-600);
1095
1071
  }
1096
1072
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) .text-secondary-foreground {
1097
- color: #0f172a;
1098
- color: var(--color-secondary-foreground);
1073
+ color: hsl(222, 47%, 11%);
1074
+ color: hsl(var(--xpa-secondary-foreground));
1099
1075
  }
1100
1076
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) .text-white {
1101
1077
  color: #fff;
@@ -1140,7 +1116,7 @@
1140
1116
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1141
1117
  }
1142
1118
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) .ring-offset-background {
1143
- --tw-ring-offset-color: var(--color-background);
1119
+ --tw-ring-offset-color: hsl(var(--xpa-background));
1144
1120
  }
1145
1121
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) .outline {
1146
1122
  outline-style: var(--tw-outline-style);
@@ -1210,12 +1186,12 @@
1210
1186
  font-weight: var(--font-weight-medium);
1211
1187
  }
1212
1188
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) :is(.signiphi-page-assembly .placeholder\:text-muted-foreground)::-moz-placeholder {
1213
- color: #64748b;
1214
- color: var(--color-muted-foreground);
1189
+ color: hsl(215, 16%, 47%);
1190
+ color: hsl(var(--xpa-muted-foreground));
1215
1191
  }
1216
1192
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) :is(.signiphi-page-assembly .placeholder\:text-muted-foreground)::placeholder {
1217
- color: #64748b;
1218
- color: var(--color-muted-foreground);
1193
+ color: hsl(215, 16%, 47%);
1194
+ color: hsl(var(--xpa-muted-foreground));
1219
1195
  }
1220
1196
  @media (hover: hover) {
1221
1197
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) :is(.signiphi-page-assembly .hover\:border-gray-300):hover {
@@ -1225,54 +1201,57 @@
1225
1201
  }
1226
1202
  @media (hover: hover) {
1227
1203
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) :is(.signiphi-page-assembly .hover\:border-primary\/60):hover {
1228
- border-color: rgba(0, 153, 205, 0.6);
1204
+ border-color: hsl(198, 100%, 40%);
1205
+ border-color: hsl(var(--xpa-primary));
1229
1206
  }
1230
1207
  @supports (color: color-mix(in lab, red, red)) {
1231
1208
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) :is(.signiphi-page-assembly .hover\:border-primary\/60):hover {
1232
- border-color: color-mix(in oklab, #0099cd 60%, transparent);
1209
+ border-color: color-mix(in oklab, hsl(198, 100%, 40%) 60%, transparent);
1233
1210
  }
1234
1211
 
1235
1212
  @supports (color: color-mix(in lch, red, blue)) {
1236
1213
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) :is(.signiphi-page-assembly .hover\:border-primary\/60):hover {
1237
- border-color: color-mix(in oklab, var(--color-primary) 60%, transparent);
1214
+ border-color: color-mix(in oklab, hsl(var(--xpa-primary)) 60%, transparent);
1238
1215
  }
1239
1216
  }
1240
1217
  }
1241
1218
  }
1242
1219
  @media (hover: hover) {
1243
1220
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) :is(.signiphi-page-assembly .hover\:bg-accent):hover {
1244
- background-color: #f1f5f9;
1245
- background-color: var(--color-accent);
1221
+ background-color: hsl(210, 40%, 96%);
1222
+ background-color: hsl(var(--xpa-accent));
1246
1223
  }
1247
1224
  }
1248
1225
  @media (hover: hover) {
1249
1226
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) :is(.signiphi-page-assembly .hover\:bg-destructive\/80):hover {
1250
- background-color: rgba(239, 68, 68, 0.8);
1227
+ background-color: hsl(0, 84%, 60%);
1228
+ background-color: hsl(var(--xpa-destructive));
1251
1229
  }
1252
1230
  @supports (color: color-mix(in lab, red, red)) {
1253
1231
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) :is(.signiphi-page-assembly .hover\:bg-destructive\/80):hover {
1254
- background-color: color-mix(in oklab, #ef4444 80%, transparent);
1232
+ background-color: color-mix(in oklab, hsl(0, 84%, 60%) 80%, transparent);
1255
1233
  }
1256
1234
 
1257
1235
  @supports (color: color-mix(in lch, red, blue)) {
1258
1236
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) :is(.signiphi-page-assembly .hover\:bg-destructive\/80):hover {
1259
- background-color: color-mix(in oklab, var(--color-destructive) 80%, transparent);
1237
+ background-color: color-mix(in oklab, hsl(var(--xpa-destructive)) 80%, transparent);
1260
1238
  }
1261
1239
  }
1262
1240
  }
1263
1241
  }
1264
1242
  @media (hover: hover) {
1265
1243
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) :is(.signiphi-page-assembly .hover\:bg-destructive\/90):hover {
1266
- background-color: rgba(239, 68, 68, 0.9);
1244
+ background-color: hsl(0, 84%, 60%);
1245
+ background-color: hsl(var(--xpa-destructive));
1267
1246
  }
1268
1247
  @supports (color: color-mix(in lab, red, red)) {
1269
1248
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) :is(.signiphi-page-assembly .hover\:bg-destructive\/90):hover {
1270
- background-color: color-mix(in oklab, #ef4444 90%, transparent);
1249
+ background-color: color-mix(in oklab, hsl(0, 84%, 60%) 90%, transparent);
1271
1250
  }
1272
1251
 
1273
1252
  @supports (color: color-mix(in lch, red, blue)) {
1274
1253
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) :is(.signiphi-page-assembly .hover\:bg-destructive\/90):hover {
1275
- background-color: color-mix(in oklab, var(--color-destructive) 90%, transparent);
1254
+ background-color: color-mix(in oklab, hsl(var(--xpa-destructive)) 90%, transparent);
1276
1255
  }
1277
1256
  }
1278
1257
  }
@@ -1285,48 +1264,51 @@
1285
1264
  }
1286
1265
  @media (hover: hover) {
1287
1266
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) :is(.signiphi-page-assembly .hover\:bg-primary\/10):hover {
1288
- background-color: rgba(0, 153, 205, 0.1);
1267
+ background-color: hsl(198, 100%, 40%);
1268
+ background-color: hsl(var(--xpa-primary));
1289
1269
  }
1290
1270
  @supports (color: color-mix(in lab, red, red)) {
1291
1271
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) :is(.signiphi-page-assembly .hover\:bg-primary\/10):hover {
1292
- background-color: color-mix(in oklab, #0099cd 10%, transparent);
1272
+ background-color: color-mix(in oklab, hsl(198, 100%, 40%) 10%, transparent);
1293
1273
  }
1294
1274
 
1295
1275
  @supports (color: color-mix(in lch, red, blue)) {
1296
1276
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) :is(.signiphi-page-assembly .hover\:bg-primary\/10):hover {
1297
- background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
1277
+ background-color: color-mix(in oklab, hsl(var(--xpa-primary)) 10%, transparent);
1298
1278
  }
1299
1279
  }
1300
1280
  }
1301
1281
  }
1302
1282
  @media (hover: hover) {
1303
1283
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) :is(.signiphi-page-assembly .hover\:bg-primary\/80):hover {
1304
- background-color: rgba(0, 153, 205, 0.8);
1284
+ background-color: hsl(198, 100%, 40%);
1285
+ background-color: hsl(var(--xpa-primary));
1305
1286
  }
1306
1287
  @supports (color: color-mix(in lab, red, red)) {
1307
1288
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) :is(.signiphi-page-assembly .hover\:bg-primary\/80):hover {
1308
- background-color: color-mix(in oklab, #0099cd 80%, transparent);
1289
+ background-color: color-mix(in oklab, hsl(198, 100%, 40%) 80%, transparent);
1309
1290
  }
1310
1291
 
1311
1292
  @supports (color: color-mix(in lch, red, blue)) {
1312
1293
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) :is(.signiphi-page-assembly .hover\:bg-primary\/80):hover {
1313
- background-color: color-mix(in oklab, var(--color-primary) 80%, transparent);
1294
+ background-color: color-mix(in oklab, hsl(var(--xpa-primary)) 80%, transparent);
1314
1295
  }
1315
1296
  }
1316
1297
  }
1317
1298
  }
1318
1299
  @media (hover: hover) {
1319
1300
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) :is(.signiphi-page-assembly .hover\:bg-primary\/90):hover {
1320
- background-color: rgba(0, 153, 205, 0.9);
1301
+ background-color: hsl(198, 100%, 40%);
1302
+ background-color: hsl(var(--xpa-primary));
1321
1303
  }
1322
1304
  @supports (color: color-mix(in lab, red, red)) {
1323
1305
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) :is(.signiphi-page-assembly .hover\:bg-primary\/90):hover {
1324
- background-color: color-mix(in oklab, #0099cd 90%, transparent);
1306
+ background-color: color-mix(in oklab, hsl(198, 100%, 40%) 90%, transparent);
1325
1307
  }
1326
1308
 
1327
1309
  @supports (color: color-mix(in lch, red, blue)) {
1328
1310
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) :is(.signiphi-page-assembly .hover\:bg-primary\/90):hover {
1329
- background-color: color-mix(in oklab, var(--color-primary) 90%, transparent);
1311
+ background-color: color-mix(in oklab, hsl(var(--xpa-primary)) 90%, transparent);
1330
1312
  }
1331
1313
  }
1332
1314
  }
@@ -1339,24 +1321,25 @@
1339
1321
  }
1340
1322
  @media (hover: hover) {
1341
1323
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) :is(.signiphi-page-assembly .hover\:bg-secondary\/80):hover {
1342
- background-color: rgba(241, 245, 249, 0.8);
1324
+ background-color: hsl(210, 40%, 96%);
1325
+ background-color: hsl(var(--xpa-secondary));
1343
1326
  }
1344
1327
  @supports (color: color-mix(in lab, red, red)) {
1345
1328
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) :is(.signiphi-page-assembly .hover\:bg-secondary\/80):hover {
1346
- background-color: color-mix(in oklab, #f1f5f9 80%, transparent);
1329
+ background-color: color-mix(in oklab, hsl(210, 40%, 96%) 80%, transparent);
1347
1330
  }
1348
1331
 
1349
1332
  @supports (color: color-mix(in lch, red, blue)) {
1350
1333
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) :is(.signiphi-page-assembly .hover\:bg-secondary\/80):hover {
1351
- background-color: color-mix(in oklab, var(--color-secondary) 80%, transparent);
1334
+ background-color: color-mix(in oklab, hsl(var(--xpa-secondary)) 80%, transparent);
1352
1335
  }
1353
1336
  }
1354
1337
  }
1355
1338
  }
1356
1339
  @media (hover: hover) {
1357
1340
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) :is(.signiphi-page-assembly .hover\:text-accent-foreground):hover {
1358
- color: #0f172a;
1359
- color: var(--color-accent-foreground);
1341
+ color: hsl(222, 47%, 11%);
1342
+ color: hsl(var(--xpa-accent-foreground));
1360
1343
  }
1361
1344
  }
1362
1345
  @media (hover: hover) {
@@ -1377,20 +1360,20 @@
1377
1360
  }
1378
1361
  }
1379
1362
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) :is(.signiphi-page-assembly .focus\:border-primary):focus {
1380
- border-color: #0099cd;
1381
- border-color: var(--color-primary);
1363
+ border-color: hsl(198, 100%, 40%);
1364
+ border-color: hsl(var(--xpa-primary));
1382
1365
  }
1383
1366
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) :is(.signiphi-page-assembly .focus\:bg-accent):focus {
1384
- background-color: #f1f5f9;
1385
- background-color: var(--color-accent);
1367
+ background-color: hsl(210, 40%, 96%);
1368
+ background-color: hsl(var(--xpa-accent));
1386
1369
  }
1387
1370
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) :is(.signiphi-page-assembly .focus\:bg-red-50):focus {
1388
1371
  background-color: rgb(254, 242, 242);
1389
1372
  background-color: var(--color-red-50);
1390
1373
  }
1391
1374
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) :is(.signiphi-page-assembly .focus\:text-accent-foreground):focus {
1392
- color: #0f172a;
1393
- color: var(--color-accent-foreground);
1375
+ color: hsl(222, 47%, 11%);
1376
+ color: hsl(var(--xpa-accent-foreground));
1394
1377
  }
1395
1378
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) :is(.signiphi-page-assembly .focus\:text-red-700):focus {
1396
1379
  color: rgb(191, 0, 15);
@@ -1411,10 +1394,10 @@
1411
1394
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1412
1395
  }
1413
1396
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) :is(.signiphi-page-assembly .focus\:ring-primary):focus {
1414
- --tw-ring-color: var(--color-primary);
1397
+ --tw-ring-color: hsl(var(--xpa-primary));
1415
1398
  }
1416
1399
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) :is(.signiphi-page-assembly .focus\:ring-ring):focus {
1417
- --tw-ring-color: var(--color-ring);
1400
+ --tw-ring-color: hsl(var(--xpa-ring));
1418
1401
  }
1419
1402
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) :is(.signiphi-page-assembly .focus\:ring-offset-2):focus {
1420
1403
  --tw-ring-offset-width: 2px;
@@ -1425,8 +1408,8 @@
1425
1408
  outline-style: none;
1426
1409
  }
1427
1410
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) :is(.signiphi-page-assembly .focus-visible\:border-primary):focus-visible {
1428
- border-color: #0099cd;
1429
- border-color: var(--color-primary);
1411
+ border-color: hsl(198, 100%, 40%);
1412
+ border-color: hsl(var(--xpa-primary));
1430
1413
  }
1431
1414
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) :is(.signiphi-page-assembly .focus-visible\:shadow-\[0_0_0_3px_rgba\(0\,153\,205\,0\.15\)\]):focus-visible {
1432
1415
  --tw-shadow: 0 0 0 3px var(--tw-shadow-color, rgba(0,153,205,0.15));
@@ -1442,7 +1425,7 @@
1442
1425
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1443
1426
  }
1444
1427
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) :is(.signiphi-page-assembly .focus-visible\:ring-ring):focus-visible {
1445
- --tw-ring-color: var(--color-ring);
1428
+ --tw-ring-color: hsl(var(--xpa-ring));
1446
1429
  }
1447
1430
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) :is(.signiphi-page-assembly .focus-visible\:ring-offset-2):focus-visible {
1448
1431
  --tw-ring-offset-width: 2px;
@@ -1488,8 +1471,8 @@
1488
1471
  translate: var(--tw-translate-x) var(--tw-translate-y);
1489
1472
  }
1490
1473
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) [data-state="open"]:is(.signiphi-page-assembly .data-\[state\=open\]\:bg-accent) {
1491
- background-color: #f1f5f9;
1492
- background-color: var(--color-accent);
1474
+ background-color: hsl(210, 40%, 96%);
1475
+ background-color: hsl(var(--xpa-accent));
1493
1476
  }
1494
1477
  @media (min-width: 40rem) {
1495
1478
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) .sm\:mt-0 {
@@ -1579,15 +1562,59 @@
1579
1562
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) :is(.signiphi-page-assembly .\[\&\>svg\]\:shrink-0) > svg {
1580
1563
  flex-shrink: 0;
1581
1564
  }
1565
+ :root:not(#\#):not(#\#) {
1566
+ --xpa-background: 0 0% 100%;
1567
+ --xpa-foreground: 222.2 84% 4.9%;
1568
+ --xpa-card: 0 0% 100%;
1569
+ --xpa-card-foreground: 222.2 84% 4.9%;
1570
+ --xpa-popover: 0 0% 100%;
1571
+ --xpa-popover-foreground: 222.2 84% 4.9%;
1572
+ --xpa-primary: 198 100% 40%;
1573
+ --xpa-primary-foreground: 0 0% 100%;
1574
+ --xpa-secondary: 210 40% 96.1%;
1575
+ --xpa-secondary-foreground: 222.2 47.4% 11.2%;
1576
+ --xpa-muted: 210 40% 96.1%;
1577
+ --xpa-muted-foreground: 215.4 16.3% 46.9%;
1578
+ --xpa-accent: 210 40% 96.1%;
1579
+ --xpa-accent-foreground: 222.2 47.4% 11.2%;
1580
+ --xpa-destructive: 0 84.2% 60.2%;
1581
+ --xpa-destructive-foreground: 0 0% 100%;
1582
+ --xpa-border: 214.3 31.8% 91.4%;
1583
+ --xpa-input: 214.3 31.8% 91.4%;
1584
+ --xpa-ring: 198 100% 40%;
1585
+ --xpa-radius: 0.5rem;
1586
+ }
1587
+ :root[data-theme="dark"]:not(#\#):not(#\#),
1588
+ :root.dark:not(#\#):not(#\#) {
1589
+ --xpa-background: 222.2 47.4% 11.2%;
1590
+ --xpa-foreground: 210 40% 98%;
1591
+ --xpa-card: 222.2 47.4% 11.2%;
1592
+ --xpa-card-foreground: 210 40% 98%;
1593
+ --xpa-popover: 222.2 47.4% 11.2%;
1594
+ --xpa-popover-foreground: 210 40% 98%;
1595
+ --xpa-primary: 198 100% 40%;
1596
+ --xpa-primary-foreground: 210 40% 98%;
1597
+ --xpa-secondary: 217.2 32.6% 17.5%;
1598
+ --xpa-secondary-foreground: 210 40% 98%;
1599
+ --xpa-muted: 217.2 32.6% 17.5%;
1600
+ --xpa-muted-foreground: 215 20.2% 65.1%;
1601
+ --xpa-accent: 217.2 32.6% 17.5%;
1602
+ --xpa-accent-foreground: 210 40% 98%;
1603
+ --xpa-destructive: 0 62.8% 30.6%;
1604
+ --xpa-destructive-foreground: 210 40% 98%;
1605
+ --xpa-border: 217.2 32.6% 17.5%;
1606
+ --xpa-input: 217.2 32.6% 17.5%;
1607
+ --xpa-ring: 198 100% 40%;
1608
+ }
1582
1609
  .signiphi-page-assembly:not(#\#):not(#\#) * {
1583
- border-color: #e2e8f0;
1584
- border-color: var(--color-border);
1610
+ border-color: hsl(214, 32%, 91%);
1611
+ border-color: hsl(var(--xpa-border));
1585
1612
  }
1586
1613
  .signiphi-page-assembly:not(#\#):not(#\#) body {
1587
- background-color: #ffffff;
1588
- background-color: var(--color-background);
1589
- color: #0f172a;
1590
- color: var(--color-foreground);
1614
+ background-color: hsl(0, 0%, 100%);
1615
+ background-color: hsl(var(--xpa-background));
1616
+ color: hsl(222, 84%, 5%);
1617
+ color: hsl(var(--xpa-foreground));
1591
1618
  }
1592
1619
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#) .animate-spin {
1593
1620
  animation: spin 1s linear infinite;
@@ -1622,10 +1649,10 @@
1622
1649
  transition-duration: var(--tw-duration, var(--default-transition-duration));
1623
1650
  }
1624
1651
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .tab-button-active {
1625
- background-color: #0099cd;
1626
- background-color: var(--color-primary);
1627
- color: #ffffff;
1628
- color: var(--color-primary-foreground);
1652
+ background-color: hsl(198, 100%, 40%);
1653
+ background-color: hsl(var(--xpa-primary));
1654
+ color: hsl(0, 0%, 100%);
1655
+ color: hsl(var(--xpa-primary-foreground));
1629
1656
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgba(0, 0, 0, 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgba(0, 0, 0, 0.1));
1630
1657
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
1631
1658
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1633,17 +1660,17 @@
1633
1660
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .tab-button-inactive {
1634
1661
  border-style: var(--tw-border-style);
1635
1662
  border-width: 1px;
1636
- border-color: rgb(209, 213, 220);
1637
- border-color: var(--color-gray-300);
1638
- background-color: #fff;
1639
- background-color: var(--color-white);
1640
- color: rgb(54, 65, 83);
1641
- color: var(--color-gray-700);
1663
+ border-color: hsl(214, 32%, 91%);
1664
+ border-color: hsl(var(--xpa-border));
1665
+ background-color: hsl(0, 0%, 100%);
1666
+ background-color: hsl(var(--xpa-card));
1667
+ color: hsl(222, 84%, 5%);
1668
+ color: hsl(var(--xpa-foreground));
1642
1669
  }
1643
1670
  @media (hover: hover) {
1644
1671
  .signiphi-page-assembly:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) :is(.signiphi-page-assembly .tab-button-inactive):hover {
1645
- background-color: rgb(249, 250, 251);
1646
- background-color: var(--color-gray-50);
1672
+ background-color: hsl(210, 40%, 96%);
1673
+ background-color: hsl(var(--xpa-muted));
1647
1674
  }
1648
1675
  }
1649
1676
  @property --tw-translate-x {
@@ -1838,4 +1865,4 @@
1838
1865
  --tw-duration: initial;
1839
1866
  --tw-space-x-reverse: 0;
1840
1867
  }
1841
- }
1868
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@signiphi/page-assembly",
3
- "version": "0.2.0-beta.16",
3
+ "version": "0.2.0-beta.17",
4
4
  "description": "React component for PDF and image page manipulation - upload, reorder, delete, and combine pages",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",