@keenmate/pure-admin-core 1.0.0-rc06 → 1.1.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 (78) hide show
  1. package/README.md +77 -7
  2. package/dist/css/main.css +1313 -452
  3. package/package.json +1 -1
  4. package/snippets/customization.html +1 -1
  5. package/snippets/layout.html +66 -0
  6. package/snippets/manifest.json +0 -50
  7. package/snippets/profile.html +51 -3
  8. package/src/scss/_base-css-variables.scss +432 -422
  9. package/src/scss/_core.scss +105 -105
  10. package/src/scss/_fonts.scss +0 -14
  11. package/src/scss/_variables.scss +12 -14
  12. package/src/scss/core-components/_alerts.scss +7 -7
  13. package/src/scss/core-components/_base.scss +3 -3
  14. package/src/scss/core-components/_buttons.scss +425 -425
  15. package/src/scss/core-components/_callouts.scss +139 -139
  16. package/src/scss/core-components/_cards.scss +321 -321
  17. package/src/scss/core-components/_checkbox-lists.scss +2 -2
  18. package/src/scss/core-components/_code.scss +4 -4
  19. package/src/scss/core-components/_command-palette.scss +518 -518
  20. package/src/scss/core-components/_comparison.scss +3 -3
  21. package/src/scss/core-components/_file-selector.scss +780 -780
  22. package/src/scss/core-components/_forms.scss +16 -16
  23. package/src/scss/core-components/_grid.scss +25 -0
  24. package/src/scss/core-components/_layout.scss +15 -15
  25. package/src/scss/core-components/_lists.scss +7 -7
  26. package/src/scss/core-components/_logic-tree.scss +280 -280
  27. package/src/scss/core-components/_modals.scss +2 -2
  28. package/src/scss/core-components/_notifications.scss +74 -7
  29. package/src/scss/core-components/_pagers.scss +3 -3
  30. package/src/scss/core-components/_popconfirm.scss +1 -1
  31. package/src/scss/core-components/_profile.scss +400 -379
  32. package/src/scss/core-components/_scrollbars.scss +40 -41
  33. package/src/scss/core-components/_settings-panel.scss +5 -5
  34. package/src/scss/core-components/_statistics.scss +6 -6
  35. package/src/scss/core-components/_tables.scss +566 -566
  36. package/src/scss/core-components/_tabs.scss +493 -493
  37. package/src/scss/core-components/_timeline.scss +15 -15
  38. package/src/scss/core-components/_toasts.scss +4 -4
  39. package/src/scss/core-components/_tooltips.scss +8 -8
  40. package/src/scss/core-components/_utilities.scss +35 -30
  41. package/src/scss/core-components/_web-components-theme.scss +294 -294
  42. package/src/scss/core-components/badges/_composite-badge-variants.scss +3 -3
  43. package/src/scss/core-components/badges/_labels.scss +1 -1
  44. package/src/scss/core-components/forms/_checkboxes-radios.scss +2 -2
  45. package/src/scss/core-components/forms/_form-inputs.scss +4 -4
  46. package/src/scss/core-components/forms/_form-layout.scss +2 -2
  47. package/src/scss/core-components/forms/_form-states.scss +1 -1
  48. package/src/scss/core-components/forms/_input-groups.scss +13 -11
  49. package/src/scss/core-components/forms/_input-wrapper.scss +1 -1
  50. package/src/scss/core-components/forms/_query-editor.scss +17 -17
  51. package/src/scss/core-components/layout/_layout-container.scss +33 -1
  52. package/src/scss/core-components/layout/_navbar-elements.scss +1 -1
  53. package/src/scss/core-components/layout/_sidebar.scss +53 -2
  54. package/src/scss/utilities.scss +81 -2
  55. package/src/scss/variables/_base.scss +20 -10
  56. package/src/scss/variables/_colors.scss +7 -6
  57. package/src/scss/variables/_components.scss +8 -11
  58. package/src/scss/variables/_index.scss +11 -7
  59. package/src/scss/variables/_spacing.scss +12 -0
  60. package/src/scss/variables/_typography.scss +2 -2
  61. package/dist/fonts/Delivery/Delivery_W_Bd.woff2 +0 -0
  62. package/dist/fonts/Delivery/Delivery_W_BdIt.woff2 +0 -0
  63. package/dist/fonts/Delivery/Delivery_W_CdBlk.woff2 +0 -0
  64. package/dist/fonts/Delivery/Delivery_W_CdLt.woff2 +0 -0
  65. package/dist/fonts/Delivery/Delivery_W_It.woff2 +0 -0
  66. package/dist/fonts/Delivery/Delivery_W_Lt.woff2 +0 -0
  67. package/dist/fonts/Delivery/Delivery_W_LtIt.woff2 +0 -0
  68. package/dist/fonts/Delivery/Delivery_W_Rg.woff2 +0 -0
  69. package/src/scss/themes/_dark-base.scss +0 -207
  70. package/src/scss/themes/audi-light.scss +0 -341
  71. package/src/scss/themes/audi.scss +0 -303
  72. package/src/scss/themes/corporate.scss +0 -229
  73. package/src/scss/themes/dark-blue.scss +0 -165
  74. package/src/scss/themes/dark-green.scss +0 -169
  75. package/src/scss/themes/dark-red.scss +0 -173
  76. package/src/scss/themes/dark.scss +0 -158
  77. package/src/scss/themes/express.scss +0 -294
  78. package/src/scss/themes/minimal.scss +0 -134
package/dist/css/main.css CHANGED
@@ -1,5 +1,7 @@
1
1
  @charset "UTF-8";
2
2
  /* Pure Admin Visual Framework - Main Entry Point */
3
+ /* Pure Admin Visual Framework - SCSS Variables Only */
4
+ /* NOTE: 10px rem base - all rem values are now in 10px units (1rem = 10px) */
3
5
  .m-0 {
4
6
  margin: 0 !important;
5
7
  }
@@ -750,6 +752,486 @@
750
752
  margin-bottom: auto !important;
751
753
  }
752
754
 
755
+ .m-0 {
756
+ margin: 0 !important;
757
+ }
758
+
759
+ .mt-0 {
760
+ margin-top: 0 !important;
761
+ }
762
+
763
+ .mr-0 {
764
+ margin-right: 0 !important;
765
+ }
766
+
767
+ .mb-0 {
768
+ margin-bottom: 0 !important;
769
+ }
770
+
771
+ .ml-0 {
772
+ margin-left: 0 !important;
773
+ }
774
+
775
+ .mx-0 {
776
+ margin-left: 0 !important;
777
+ margin-right: 0 !important;
778
+ }
779
+
780
+ .my-0 {
781
+ margin-top: 0 !important;
782
+ margin-bottom: 0 !important;
783
+ }
784
+
785
+ .m-xs {
786
+ margin: 0.4rem !important;
787
+ }
788
+
789
+ .mt-xs {
790
+ margin-top: 0.4rem !important;
791
+ }
792
+
793
+ .mr-xs {
794
+ margin-right: 0.4rem !important;
795
+ }
796
+
797
+ .mb-xs {
798
+ margin-bottom: 0.4rem !important;
799
+ }
800
+
801
+ .ml-xs {
802
+ margin-left: 0.4rem !important;
803
+ }
804
+
805
+ .mx-xs {
806
+ margin-left: 0.4rem !important;
807
+ margin-right: 0.4rem !important;
808
+ }
809
+
810
+ .my-xs {
811
+ margin-top: 0.4rem !important;
812
+ margin-bottom: 0.4rem !important;
813
+ }
814
+
815
+ .m-sm {
816
+ margin: 0.8rem !important;
817
+ }
818
+
819
+ .mt-sm {
820
+ margin-top: 0.8rem !important;
821
+ }
822
+
823
+ .mr-sm {
824
+ margin-right: 0.8rem !important;
825
+ }
826
+
827
+ .mb-sm {
828
+ margin-bottom: 0.8rem !important;
829
+ }
830
+
831
+ .ml-sm {
832
+ margin-left: 0.8rem !important;
833
+ }
834
+
835
+ .mx-sm {
836
+ margin-left: 0.8rem !important;
837
+ margin-right: 0.8rem !important;
838
+ }
839
+
840
+ .my-sm {
841
+ margin-top: 0.8rem !important;
842
+ margin-bottom: 0.8rem !important;
843
+ }
844
+
845
+ .m-md {
846
+ margin: 1.2rem !important;
847
+ }
848
+
849
+ .mt-md {
850
+ margin-top: 1.2rem !important;
851
+ }
852
+
853
+ .mr-md {
854
+ margin-right: 1.2rem !important;
855
+ }
856
+
857
+ .mb-md {
858
+ margin-bottom: 1.2rem !important;
859
+ }
860
+
861
+ .ml-md {
862
+ margin-left: 1.2rem !important;
863
+ }
864
+
865
+ .mx-md {
866
+ margin-left: 1.2rem !important;
867
+ margin-right: 1.2rem !important;
868
+ }
869
+
870
+ .my-md {
871
+ margin-top: 1.2rem !important;
872
+ margin-bottom: 1.2rem !important;
873
+ }
874
+
875
+ .m-base {
876
+ margin: 1.6rem !important;
877
+ }
878
+
879
+ .mt-base {
880
+ margin-top: 1.6rem !important;
881
+ }
882
+
883
+ .mr-base {
884
+ margin-right: 1.6rem !important;
885
+ }
886
+
887
+ .mb-base {
888
+ margin-bottom: 1.6rem !important;
889
+ }
890
+
891
+ .ml-base {
892
+ margin-left: 1.6rem !important;
893
+ }
894
+
895
+ .mx-base {
896
+ margin-left: 1.6rem !important;
897
+ margin-right: 1.6rem !important;
898
+ }
899
+
900
+ .my-base {
901
+ margin-top: 1.6rem !important;
902
+ margin-bottom: 1.6rem !important;
903
+ }
904
+
905
+ .m-lg {
906
+ margin: 2.4rem !important;
907
+ }
908
+
909
+ .mt-lg {
910
+ margin-top: 2.4rem !important;
911
+ }
912
+
913
+ .mr-lg {
914
+ margin-right: 2.4rem !important;
915
+ }
916
+
917
+ .mb-lg {
918
+ margin-bottom: 2.4rem !important;
919
+ }
920
+
921
+ .ml-lg {
922
+ margin-left: 2.4rem !important;
923
+ }
924
+
925
+ .mx-lg {
926
+ margin-left: 2.4rem !important;
927
+ margin-right: 2.4rem !important;
928
+ }
929
+
930
+ .my-lg {
931
+ margin-top: 2.4rem !important;
932
+ margin-bottom: 2.4rem !important;
933
+ }
934
+
935
+ .m-xl {
936
+ margin: 3.2rem !important;
937
+ }
938
+
939
+ .mt-xl {
940
+ margin-top: 3.2rem !important;
941
+ }
942
+
943
+ .mr-xl {
944
+ margin-right: 3.2rem !important;
945
+ }
946
+
947
+ .mb-xl {
948
+ margin-bottom: 3.2rem !important;
949
+ }
950
+
951
+ .ml-xl {
952
+ margin-left: 3.2rem !important;
953
+ }
954
+
955
+ .mx-xl {
956
+ margin-left: 3.2rem !important;
957
+ margin-right: 3.2rem !important;
958
+ }
959
+
960
+ .my-xl {
961
+ margin-top: 3.2rem !important;
962
+ margin-bottom: 3.2rem !important;
963
+ }
964
+
965
+ .m-2xl {
966
+ margin: 4.8rem !important;
967
+ }
968
+
969
+ .mt-2xl {
970
+ margin-top: 4.8rem !important;
971
+ }
972
+
973
+ .mr-2xl {
974
+ margin-right: 4.8rem !important;
975
+ }
976
+
977
+ .mb-2xl {
978
+ margin-bottom: 4.8rem !important;
979
+ }
980
+
981
+ .ml-2xl {
982
+ margin-left: 4.8rem !important;
983
+ }
984
+
985
+ .mx-2xl {
986
+ margin-left: 4.8rem !important;
987
+ margin-right: 4.8rem !important;
988
+ }
989
+
990
+ .my-2xl {
991
+ margin-top: 4.8rem !important;
992
+ margin-bottom: 4.8rem !important;
993
+ }
994
+
995
+ .p-0 {
996
+ padding: 0 !important;
997
+ }
998
+
999
+ .pt-0 {
1000
+ padding-top: 0 !important;
1001
+ }
1002
+
1003
+ .pr-0 {
1004
+ padding-right: 0 !important;
1005
+ }
1006
+
1007
+ .pb-0 {
1008
+ padding-bottom: 0 !important;
1009
+ }
1010
+
1011
+ .pl-0 {
1012
+ padding-left: 0 !important;
1013
+ }
1014
+
1015
+ .px-0 {
1016
+ padding-left: 0 !important;
1017
+ padding-right: 0 !important;
1018
+ }
1019
+
1020
+ .py-0 {
1021
+ padding-top: 0 !important;
1022
+ padding-bottom: 0 !important;
1023
+ }
1024
+
1025
+ .p-xs {
1026
+ padding: 0.4rem !important;
1027
+ }
1028
+
1029
+ .pt-xs {
1030
+ padding-top: 0.4rem !important;
1031
+ }
1032
+
1033
+ .pr-xs {
1034
+ padding-right: 0.4rem !important;
1035
+ }
1036
+
1037
+ .pb-xs {
1038
+ padding-bottom: 0.4rem !important;
1039
+ }
1040
+
1041
+ .pl-xs {
1042
+ padding-left: 0.4rem !important;
1043
+ }
1044
+
1045
+ .px-xs {
1046
+ padding-left: 0.4rem !important;
1047
+ padding-right: 0.4rem !important;
1048
+ }
1049
+
1050
+ .py-xs {
1051
+ padding-top: 0.4rem !important;
1052
+ padding-bottom: 0.4rem !important;
1053
+ }
1054
+
1055
+ .p-sm {
1056
+ padding: 0.8rem !important;
1057
+ }
1058
+
1059
+ .pt-sm {
1060
+ padding-top: 0.8rem !important;
1061
+ }
1062
+
1063
+ .pr-sm {
1064
+ padding-right: 0.8rem !important;
1065
+ }
1066
+
1067
+ .pb-sm {
1068
+ padding-bottom: 0.8rem !important;
1069
+ }
1070
+
1071
+ .pl-sm {
1072
+ padding-left: 0.8rem !important;
1073
+ }
1074
+
1075
+ .px-sm {
1076
+ padding-left: 0.8rem !important;
1077
+ padding-right: 0.8rem !important;
1078
+ }
1079
+
1080
+ .py-sm {
1081
+ padding-top: 0.8rem !important;
1082
+ padding-bottom: 0.8rem !important;
1083
+ }
1084
+
1085
+ .p-md {
1086
+ padding: 1.2rem !important;
1087
+ }
1088
+
1089
+ .pt-md {
1090
+ padding-top: 1.2rem !important;
1091
+ }
1092
+
1093
+ .pr-md {
1094
+ padding-right: 1.2rem !important;
1095
+ }
1096
+
1097
+ .pb-md {
1098
+ padding-bottom: 1.2rem !important;
1099
+ }
1100
+
1101
+ .pl-md {
1102
+ padding-left: 1.2rem !important;
1103
+ }
1104
+
1105
+ .px-md {
1106
+ padding-left: 1.2rem !important;
1107
+ padding-right: 1.2rem !important;
1108
+ }
1109
+
1110
+ .py-md {
1111
+ padding-top: 1.2rem !important;
1112
+ padding-bottom: 1.2rem !important;
1113
+ }
1114
+
1115
+ .p-base {
1116
+ padding: 1.6rem !important;
1117
+ }
1118
+
1119
+ .pt-base {
1120
+ padding-top: 1.6rem !important;
1121
+ }
1122
+
1123
+ .pr-base {
1124
+ padding-right: 1.6rem !important;
1125
+ }
1126
+
1127
+ .pb-base {
1128
+ padding-bottom: 1.6rem !important;
1129
+ }
1130
+
1131
+ .pl-base {
1132
+ padding-left: 1.6rem !important;
1133
+ }
1134
+
1135
+ .px-base {
1136
+ padding-left: 1.6rem !important;
1137
+ padding-right: 1.6rem !important;
1138
+ }
1139
+
1140
+ .py-base {
1141
+ padding-top: 1.6rem !important;
1142
+ padding-bottom: 1.6rem !important;
1143
+ }
1144
+
1145
+ .p-lg {
1146
+ padding: 2.4rem !important;
1147
+ }
1148
+
1149
+ .pt-lg {
1150
+ padding-top: 2.4rem !important;
1151
+ }
1152
+
1153
+ .pr-lg {
1154
+ padding-right: 2.4rem !important;
1155
+ }
1156
+
1157
+ .pb-lg {
1158
+ padding-bottom: 2.4rem !important;
1159
+ }
1160
+
1161
+ .pl-lg {
1162
+ padding-left: 2.4rem !important;
1163
+ }
1164
+
1165
+ .px-lg {
1166
+ padding-left: 2.4rem !important;
1167
+ padding-right: 2.4rem !important;
1168
+ }
1169
+
1170
+ .py-lg {
1171
+ padding-top: 2.4rem !important;
1172
+ padding-bottom: 2.4rem !important;
1173
+ }
1174
+
1175
+ .p-xl {
1176
+ padding: 3.2rem !important;
1177
+ }
1178
+
1179
+ .pt-xl {
1180
+ padding-top: 3.2rem !important;
1181
+ }
1182
+
1183
+ .pr-xl {
1184
+ padding-right: 3.2rem !important;
1185
+ }
1186
+
1187
+ .pb-xl {
1188
+ padding-bottom: 3.2rem !important;
1189
+ }
1190
+
1191
+ .pl-xl {
1192
+ padding-left: 3.2rem !important;
1193
+ }
1194
+
1195
+ .px-xl {
1196
+ padding-left: 3.2rem !important;
1197
+ padding-right: 3.2rem !important;
1198
+ }
1199
+
1200
+ .py-xl {
1201
+ padding-top: 3.2rem !important;
1202
+ padding-bottom: 3.2rem !important;
1203
+ }
1204
+
1205
+ .p-2xl {
1206
+ padding: 4.8rem !important;
1207
+ }
1208
+
1209
+ .pt-2xl {
1210
+ padding-top: 4.8rem !important;
1211
+ }
1212
+
1213
+ .pr-2xl {
1214
+ padding-right: 4.8rem !important;
1215
+ }
1216
+
1217
+ .pb-2xl {
1218
+ padding-bottom: 4.8rem !important;
1219
+ }
1220
+
1221
+ .pl-2xl {
1222
+ padding-left: 4.8rem !important;
1223
+ }
1224
+
1225
+ .px-2xl {
1226
+ padding-left: 4.8rem !important;
1227
+ padding-right: 4.8rem !important;
1228
+ }
1229
+
1230
+ .py-2xl {
1231
+ padding-top: 4.8rem !important;
1232
+ padding-bottom: 4.8rem !important;
1233
+ }
1234
+
753
1235
  .d-none {
754
1236
  display: none !important;
755
1237
  }
@@ -956,6 +1438,10 @@
956
1438
  width: auto !important;
957
1439
  }
958
1440
 
1441
+ .w-1-2 {
1442
+ width: 50% !important;
1443
+ }
1444
+
959
1445
  .w-1-3 {
960
1446
  width: 33.333333% !important;
961
1447
  }
@@ -964,6 +1450,14 @@
964
1450
  width: 66.666667% !important;
965
1451
  }
966
1452
 
1453
+ .w-1-4 {
1454
+ width: 25% !important;
1455
+ }
1456
+
1457
+ .w-3-4 {
1458
+ width: 75% !important;
1459
+ }
1460
+
967
1461
  .mw-25 {
968
1462
  min-width: 25% !important;
969
1463
  }
@@ -984,6 +1478,10 @@
984
1478
  min-width: auto !important;
985
1479
  }
986
1480
 
1481
+ .mw-1-2 {
1482
+ min-width: 50% !important;
1483
+ }
1484
+
987
1485
  .mw-1-3 {
988
1486
  min-width: 33.333333% !important;
989
1487
  }
@@ -992,6 +1490,14 @@
992
1490
  min-width: 66.666667% !important;
993
1491
  }
994
1492
 
1493
+ .mw-1-4 {
1494
+ min-width: 25% !important;
1495
+ }
1496
+
1497
+ .mw-3-4 {
1498
+ min-width: 75% !important;
1499
+ }
1500
+
995
1501
  .w-25-fixed {
996
1502
  min-width: 25% !important;
997
1503
  width: 25% !important;
@@ -1012,6 +1518,11 @@
1012
1518
  width: 100% !important;
1013
1519
  }
1014
1520
 
1521
+ .w-1-2-fixed {
1522
+ min-width: 50% !important;
1523
+ width: 50% !important;
1524
+ }
1525
+
1015
1526
  .w-1-3-fixed {
1016
1527
  min-width: 33.333333% !important;
1017
1528
  width: 33.333333% !important;
@@ -1022,6 +1533,16 @@
1022
1533
  width: 66.666667% !important;
1023
1534
  }
1024
1535
 
1536
+ .w-1-4-fixed {
1537
+ min-width: 25% !important;
1538
+ width: 25% !important;
1539
+ }
1540
+
1541
+ .w-3-4-fixed {
1542
+ min-width: 75% !important;
1543
+ width: 75% !important;
1544
+ }
1545
+
1025
1546
  .h-25 {
1026
1547
  height: 25% !important;
1027
1548
  }
@@ -1042,6 +1563,26 @@
1042
1563
  height: auto !important;
1043
1564
  }
1044
1565
 
1566
+ .h-1-2 {
1567
+ height: 50% !important;
1568
+ }
1569
+
1570
+ .h-1-3 {
1571
+ height: 33.333333% !important;
1572
+ }
1573
+
1574
+ .h-2-3 {
1575
+ height: 66.666667% !important;
1576
+ }
1577
+
1578
+ .h-1-4 {
1579
+ height: 25% !important;
1580
+ }
1581
+
1582
+ .h-3-4 {
1583
+ height: 75% !important;
1584
+ }
1585
+
1045
1586
  .wr-1 {
1046
1587
  width: 1rem !important;
1047
1588
  }
@@ -1094,6 +1635,26 @@
1094
1635
  width: 25rem !important;
1095
1636
  }
1096
1637
 
1638
+ .wr-30 {
1639
+ width: 30rem !important;
1640
+ }
1641
+
1642
+ .wr-35 {
1643
+ width: 35rem !important;
1644
+ }
1645
+
1646
+ .wr-40 {
1647
+ width: 40rem !important;
1648
+ }
1649
+
1650
+ .wr-45 {
1651
+ width: 45rem !important;
1652
+ }
1653
+
1654
+ .wr-50 {
1655
+ width: 50rem !important;
1656
+ }
1657
+
1097
1658
  .minwr-1 {
1098
1659
  min-width: 1rem !important;
1099
1660
  }
@@ -1146,6 +1707,26 @@
1146
1707
  min-width: 25rem !important;
1147
1708
  }
1148
1709
 
1710
+ .minwr-30 {
1711
+ min-width: 30rem !important;
1712
+ }
1713
+
1714
+ .minwr-35 {
1715
+ min-width: 35rem !important;
1716
+ }
1717
+
1718
+ .minwr-40 {
1719
+ min-width: 40rem !important;
1720
+ }
1721
+
1722
+ .minwr-45 {
1723
+ min-width: 45rem !important;
1724
+ }
1725
+
1726
+ .minwr-50 {
1727
+ min-width: 50rem !important;
1728
+ }
1729
+
1149
1730
  .maxwr-1 {
1150
1731
  max-width: 1rem !important;
1151
1732
  }
@@ -1198,6 +1779,26 @@
1198
1779
  max-width: 25rem !important;
1199
1780
  }
1200
1781
 
1782
+ .maxwr-30 {
1783
+ max-width: 30rem !important;
1784
+ }
1785
+
1786
+ .maxwr-35 {
1787
+ max-width: 35rem !important;
1788
+ }
1789
+
1790
+ .maxwr-40 {
1791
+ max-width: 40rem !important;
1792
+ }
1793
+
1794
+ .maxwr-45 {
1795
+ max-width: 45rem !important;
1796
+ }
1797
+
1798
+ .maxwr-50 {
1799
+ max-width: 50rem !important;
1800
+ }
1801
+
1201
1802
  .hr-1 {
1202
1803
  height: 1rem !important;
1203
1804
  }
@@ -1250,6 +1851,26 @@
1250
1851
  height: 25rem !important;
1251
1852
  }
1252
1853
 
1854
+ .hr-30 {
1855
+ height: 30rem !important;
1856
+ }
1857
+
1858
+ .hr-35 {
1859
+ height: 35rem !important;
1860
+ }
1861
+
1862
+ .hr-40 {
1863
+ height: 40rem !important;
1864
+ }
1865
+
1866
+ .hr-45 {
1867
+ height: 45rem !important;
1868
+ }
1869
+
1870
+ .hr-50 {
1871
+ height: 50rem !important;
1872
+ }
1873
+
1253
1874
  .minhr-1 {
1254
1875
  min-height: 1rem !important;
1255
1876
  }
@@ -1286,20 +1907,40 @@
1286
1907
  min-height: 9rem !important;
1287
1908
  }
1288
1909
 
1289
- .minhr-10 {
1290
- min-height: 10rem !important;
1910
+ .minhr-10 {
1911
+ min-height: 10rem !important;
1912
+ }
1913
+
1914
+ .minhr-15 {
1915
+ min-height: 15rem !important;
1916
+ }
1917
+
1918
+ .minhr-20 {
1919
+ min-height: 20rem !important;
1920
+ }
1921
+
1922
+ .minhr-25 {
1923
+ min-height: 25rem !important;
1924
+ }
1925
+
1926
+ .minhr-30 {
1927
+ min-height: 30rem !important;
1928
+ }
1929
+
1930
+ .minhr-35 {
1931
+ min-height: 35rem !important;
1291
1932
  }
1292
1933
 
1293
- .minhr-15 {
1294
- min-height: 15rem !important;
1934
+ .minhr-40 {
1935
+ min-height: 40rem !important;
1295
1936
  }
1296
1937
 
1297
- .minhr-20 {
1298
- min-height: 20rem !important;
1938
+ .minhr-45 {
1939
+ min-height: 45rem !important;
1299
1940
  }
1300
1941
 
1301
- .minhr-25 {
1302
- min-height: 25rem !important;
1942
+ .minhr-50 {
1943
+ min-height: 50rem !important;
1303
1944
  }
1304
1945
 
1305
1946
  .maxhr-1 {
@@ -1354,6 +1995,26 @@
1354
1995
  max-height: 25rem !important;
1355
1996
  }
1356
1997
 
1998
+ .maxhr-30 {
1999
+ max-height: 30rem !important;
2000
+ }
2001
+
2002
+ .maxhr-35 {
2003
+ max-height: 35rem !important;
2004
+ }
2005
+
2006
+ .maxhr-40 {
2007
+ max-height: 40rem !important;
2008
+ }
2009
+
2010
+ .maxhr-45 {
2011
+ max-height: 45rem !important;
2012
+ }
2013
+
2014
+ .maxhr-50 {
2015
+ max-height: 50rem !important;
2016
+ }
2017
+
1357
2018
  .minw-5 {
1358
2019
  min-width: 5% !important;
1359
2020
  }
@@ -1522,6 +2183,10 @@
1522
2183
  max-width: 100% !important;
1523
2184
  }
1524
2185
 
2186
+ .maxw-1-2 {
2187
+ max-width: 50% !important;
2188
+ }
2189
+
1525
2190
  .maxw-1-3 {
1526
2191
  max-width: 33.333333% !important;
1527
2192
  }
@@ -1530,6 +2195,14 @@
1530
2195
  max-width: 66.666667% !important;
1531
2196
  }
1532
2197
 
2198
+ .maxw-1-4 {
2199
+ max-width: 25% !important;
2200
+ }
2201
+
2202
+ .maxw-3-4 {
2203
+ max-width: 75% !important;
2204
+ }
2205
+
1533
2206
  .minh-5 {
1534
2207
  min-height: 5% !important;
1535
2208
  }
@@ -1610,6 +2283,10 @@
1610
2283
  min-height: 100% !important;
1611
2284
  }
1612
2285
 
2286
+ .minh-1-2 {
2287
+ min-height: 50% !important;
2288
+ }
2289
+
1613
2290
  .minh-1-3 {
1614
2291
  min-height: 33.333333% !important;
1615
2292
  }
@@ -1618,6 +2295,14 @@
1618
2295
  min-height: 66.666667% !important;
1619
2296
  }
1620
2297
 
2298
+ .minh-1-4 {
2299
+ min-height: 25% !important;
2300
+ }
2301
+
2302
+ .minh-3-4 {
2303
+ min-height: 75% !important;
2304
+ }
2305
+
1621
2306
  .maxh-5 {
1622
2307
  max-height: 5% !important;
1623
2308
  }
@@ -1698,6 +2383,10 @@
1698
2383
  max-height: 100% !important;
1699
2384
  }
1700
2385
 
2386
+ .maxh-1-2 {
2387
+ max-height: 50% !important;
2388
+ }
2389
+
1701
2390
  .maxh-1-3 {
1702
2391
  max-height: 33.333333% !important;
1703
2392
  }
@@ -1706,6 +2395,14 @@
1706
2395
  max-height: 66.666667% !important;
1707
2396
  }
1708
2397
 
2398
+ .maxh-1-4 {
2399
+ max-height: 25% !important;
2400
+ }
2401
+
2402
+ .maxh-3-4 {
2403
+ max-height: 75% !important;
2404
+ }
2405
+
1709
2406
  .position-static {
1710
2407
  position: static !important;
1711
2408
  }
@@ -1898,9 +2595,6 @@
1898
2595
  /* ========================================
1899
2596
  Reset and Base Styles
1900
2597
  ======================================== */
1901
- /* Pure Admin Visual Framework - Core Styles */
1902
- /* Pure Admin Visual Framework - SCSS Variables Only */
1903
- /* NOTE: 10px rem base - all rem values are now in 10px units (1rem = 10px) */
1904
2598
  html {
1905
2599
  font-size: 10px;
1906
2600
  }
@@ -1966,10 +2660,10 @@ figure {
1966
2660
  body {
1967
2661
  margin: 0;
1968
2662
  padding: 0;
1969
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2663
+ font-family: var(--base-font-family);
1970
2664
  font-size: 1.6rem;
1971
- color: var(--pa-text-primary);
1972
- background-color: var(--pa-primary-bg);
2665
+ color: var(--pa-text-color-1);
2666
+ background-color: var(--pa-main-bg);
1973
2667
  line-height: 1.5;
1974
2668
  overflow-x: hidden;
1975
2669
  overflow-y: scroll;
@@ -2000,9 +2694,6 @@ label {
2000
2694
  font-size: inherit;
2001
2695
  }
2002
2696
 
2003
- /* ========================================
2004
- Reset and Base Styles
2005
- ======================================== */
2006
2697
  /* Webkit browsers (Chrome, Safari, Edge) */
2007
2698
  *::-webkit-scrollbar {
2008
2699
  width: 6px;
@@ -2010,31 +2701,30 @@ label {
2010
2701
  }
2011
2702
 
2012
2703
  *::-webkit-scrollbar-track {
2013
- background: var(--pa-primary-bg);
2704
+ background: var(--pa-main-bg);
2014
2705
  border-radius: 3px;
2015
2706
  }
2016
2707
 
2017
2708
  *::-webkit-scrollbar-thumb {
2018
- background: #e1e5e9;
2709
+ background: var(--pa-border-color);
2019
2710
  border-radius: 3px;
2020
- border: 1px solid var(--pa-primary-bg);
2711
+ border: 1px solid var(--pa-main-bg);
2021
2712
  }
2022
2713
  *::-webkit-scrollbar-thumb:hover {
2023
- background: #007bff;
2024
- border-color: rgba(0, 123, 255, 0.12);
2714
+ background: var(--pa-accent);
2025
2715
  }
2026
2716
  *::-webkit-scrollbar-thumb:active {
2027
- background: rgba(0, 123, 255, 0.12);
2717
+ background: var(--pa-accent-hover);
2028
2718
  }
2029
2719
 
2030
2720
  *::-webkit-scrollbar-corner {
2031
- background: var(--pa-primary-bg);
2721
+ background: var(--pa-main-bg);
2032
2722
  }
2033
2723
 
2034
2724
  /* Firefox */
2035
2725
  * {
2036
2726
  scrollbar-width: thin;
2037
- scrollbar-color: var(--pa-border-color) var(--pa-primary-bg);
2727
+ scrollbar-color: var(--pa-border-color) var(--pa-main-bg);
2038
2728
  }
2039
2729
 
2040
2730
  /* ========================================
@@ -2044,9 +2734,6 @@ label {
2044
2734
  Layout Index
2045
2735
  Central import point for all layout component modules
2046
2736
  ======================================== */
2047
- /* ========================================
2048
- Reset and Base Styles
2049
- ======================================== */
2050
2737
  /* ========================================
2051
2738
  Navbar Component
2052
2739
  Fixed navbar and constrained container widths
@@ -2135,9 +2822,6 @@ body.pa-container-2xl .pa-navbar {
2135
2822
  flex-shrink: 0;
2136
2823
  }
2137
2824
 
2138
- /* ========================================
2139
- Reset and Base Styles
2140
- ======================================== */
2141
2825
  /* ========================================
2142
2826
  Layout Container
2143
2827
  Main layout wrapper, content areas, sticky/scroll modes
@@ -2150,7 +2834,7 @@ body.pa-layout--sticky {
2150
2834
  .pa-layout {
2151
2835
  max-width: 100%;
2152
2836
  margin: 4.8rem auto 0;
2153
- background-color: var(--pa-primary-bg);
2837
+ background-color: var(--pa-main-bg);
2154
2838
  overflow: visible;
2155
2839
  display: flex;
2156
2840
  flex-direction: column;
@@ -2260,22 +2944,87 @@ body.pa-layout--sticky .pa-layout__inner {
2260
2944
  gap: 0.4rem;
2261
2945
  }
2262
2946
 
2263
- /* ========================================
2264
- Reset and Base Styles
2265
- ======================================== */
2947
+ @media (max-width: 768px) {
2948
+ .pa-layout__footer {
2949
+ flex-wrap: wrap;
2950
+ min-height: auto;
2951
+ padding: 0.8rem 1.6rem;
2952
+ }
2953
+ .pa-footer__left,
2954
+ .pa-footer__center,
2955
+ .pa-footer__right {
2956
+ flex-shrink: 1;
2957
+ min-width: 0;
2958
+ }
2959
+ .pa-footer__left {
2960
+ flex: 1 1 auto;
2961
+ }
2962
+ .pa-footer__center {
2963
+ display: none;
2964
+ }
2965
+ .pa-footer__right {
2966
+ flex: 0 1 auto;
2967
+ }
2968
+ .pa-footer__right--vertical {
2969
+ align-items: flex-end;
2970
+ }
2971
+ }
2266
2972
  /* ========================================
2267
2973
  Sidebar Component
2268
2974
  Sidebar navigation with nested submenus
2269
2975
  ======================================== */
2976
+ :root {
2977
+ --pa-local-sidebar-width: 28.8rem;
2978
+ --pa-local-sidebar-min-width: 18rem;
2979
+ --pa-local-sidebar-max-width: 50rem;
2980
+ }
2981
+
2982
+ :where(.pa-layout__sidebar) {
2983
+ width: var(--pa-local-sidebar-width);
2984
+ }
2985
+
2270
2986
  .pa-layout__sidebar {
2271
- width: 28.8rem;
2272
2987
  background-color: var(--pa-sidebar-bg);
2273
2988
  border-right: 1px solid var(--pa-border-color);
2274
2989
  flex-shrink: 0;
2990
+ position: relative;
2991
+ }
2992
+
2993
+ .pa-sidebar-resize {
2994
+ position: absolute;
2995
+ top: 0;
2996
+ right: 0;
2997
+ width: 6px;
2998
+ height: 100%;
2999
+ cursor: ew-resize;
3000
+ z-index: 100;
3001
+ }
3002
+ .pa-sidebar-resize::after {
3003
+ content: "";
3004
+ position: absolute;
3005
+ top: 0;
3006
+ left: 50%;
3007
+ transform: translateX(-50%);
3008
+ width: 2px;
3009
+ height: 100%;
3010
+ background-color: transparent;
3011
+ transition: background-color 0.1s ease-out;
3012
+ }
3013
+ .pa-sidebar-resize:hover::after, .pa-sidebar-resize--active::after {
3014
+ background-color: var(--pa-accent);
3015
+ }
3016
+
3017
+ body.pa-sidebar-resizing {
3018
+ cursor: ew-resize !important;
3019
+ user-select: none;
3020
+ }
3021
+ body.pa-sidebar-resizing * {
3022
+ cursor: ew-resize !important;
2275
3023
  }
2276
3024
 
2277
3025
  body.pa-layout--sticky .pa-layout__sidebar {
2278
3026
  overflow-y: auto;
3027
+ overflow-y: overlay;
2279
3028
  overflow-x: visible;
2280
3029
  }
2281
3030
 
@@ -2400,9 +3149,6 @@ body.loaded .pa-sidebar__chevron {
2400
3149
  transform: rotate(90deg);
2401
3150
  }
2402
3151
 
2403
- /* ========================================
2404
- Reset and Base Styles
2405
- ======================================== */
2406
3152
  /* ========================================
2407
3153
  Sidebar States
2408
3154
  Hidden, icon-collapse, and expanded states
@@ -2601,9 +3347,6 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
2601
3347
  width: 2.4rem;
2602
3348
  }
2603
3349
 
2604
- /* ========================================
2605
- Reset and Base Styles
2606
- ======================================== */
2607
3350
  /* ========================================
2608
3351
  Navbar/Header Elements
2609
3352
  Burger menu, brand, navigation, title, profile button, theme switcher
@@ -2701,7 +3444,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
2701
3444
  .pa-header__dropdown li a {
2702
3445
  display: block;
2703
3446
  padding: 0.8rem 1.6rem;
2704
- color: var(--pa-text-primary);
3447
+ color: var(--pa-text-color-1);
2705
3448
  border-radius: 0;
2706
3449
  white-space: nowrap;
2707
3450
  text-decoration: none;
@@ -2790,9 +3533,6 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
2790
3533
  border-color: var(--pa-accent);
2791
3534
  }
2792
3535
 
2793
- /* ========================================
2794
- Reset and Base Styles
2795
- ======================================== */
2796
3536
  /* ========================================
2797
3537
  Layout Responsive
2798
3538
  Mobile and tablet media queries
@@ -2863,9 +3603,6 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
2863
3603
  font-size: 1.4rem;
2864
3604
  }
2865
3605
  }
2866
- /* ========================================
2867
- Reset and Base Styles
2868
- ======================================== */
2869
3606
  .pa-row {
2870
3607
  display: flex;
2871
3608
  flex-wrap: wrap;
@@ -4333,9 +5070,144 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
4333
5070
  padding-bottom: 0;
4334
5071
  }
4335
5072
 
4336
- /* ========================================
4337
- Reset and Base Styles
4338
- ======================================== */
5073
+ @media (max-width: 768px) {
5074
+ .pa-col-5 {
5075
+ flex: 0 0 100%;
5076
+ max-width: 100%;
5077
+ }
5078
+ .pa-col-10 {
5079
+ flex: 0 0 100%;
5080
+ max-width: 100%;
5081
+ }
5082
+ .pa-col-15 {
5083
+ flex: 0 0 100%;
5084
+ max-width: 100%;
5085
+ }
5086
+ .pa-col-20 {
5087
+ flex: 0 0 100%;
5088
+ max-width: 100%;
5089
+ }
5090
+ .pa-col-25 {
5091
+ flex: 0 0 100%;
5092
+ max-width: 100%;
5093
+ }
5094
+ .pa-col-30 {
5095
+ flex: 0 0 100%;
5096
+ max-width: 100%;
5097
+ }
5098
+ .pa-col-35 {
5099
+ flex: 0 0 100%;
5100
+ max-width: 100%;
5101
+ }
5102
+ .pa-col-40 {
5103
+ flex: 0 0 100%;
5104
+ max-width: 100%;
5105
+ }
5106
+ .pa-col-45 {
5107
+ flex: 0 0 100%;
5108
+ max-width: 100%;
5109
+ }
5110
+ .pa-col-50 {
5111
+ flex: 0 0 100%;
5112
+ max-width: 100%;
5113
+ }
5114
+ .pa-col-55 {
5115
+ flex: 0 0 100%;
5116
+ max-width: 100%;
5117
+ }
5118
+ .pa-col-60 {
5119
+ flex: 0 0 100%;
5120
+ max-width: 100%;
5121
+ }
5122
+ .pa-col-65 {
5123
+ flex: 0 0 100%;
5124
+ max-width: 100%;
5125
+ }
5126
+ .pa-col-70 {
5127
+ flex: 0 0 100%;
5128
+ max-width: 100%;
5129
+ }
5130
+ .pa-col-75 {
5131
+ flex: 0 0 100%;
5132
+ max-width: 100%;
5133
+ }
5134
+ .pa-col-80 {
5135
+ flex: 0 0 100%;
5136
+ max-width: 100%;
5137
+ }
5138
+ .pa-col-85 {
5139
+ flex: 0 0 100%;
5140
+ max-width: 100%;
5141
+ }
5142
+ .pa-col-90 {
5143
+ flex: 0 0 100%;
5144
+ max-width: 100%;
5145
+ }
5146
+ .pa-col-95 {
5147
+ flex: 0 0 100%;
5148
+ max-width: 100%;
5149
+ }
5150
+ .pa-col-1-2 {
5151
+ flex: 0 0 100%;
5152
+ max-width: 100%;
5153
+ }
5154
+ .pa-col-1-3 {
5155
+ flex: 0 0 100%;
5156
+ max-width: 100%;
5157
+ }
5158
+ .pa-col-2-3 {
5159
+ flex: 0 0 100%;
5160
+ max-width: 100%;
5161
+ }
5162
+ .pa-col-1-4 {
5163
+ flex: 0 0 100%;
5164
+ max-width: 100%;
5165
+ }
5166
+ .pa-col-3-4 {
5167
+ flex: 0 0 100%;
5168
+ max-width: 100%;
5169
+ }
5170
+ .pa-col-1-5 {
5171
+ flex: 0 0 100%;
5172
+ max-width: 100%;
5173
+ }
5174
+ .pa-col-2-5 {
5175
+ flex: 0 0 100%;
5176
+ max-width: 100%;
5177
+ }
5178
+ .pa-col-3-5 {
5179
+ flex: 0 0 100%;
5180
+ max-width: 100%;
5181
+ }
5182
+ .pa-col-4-5 {
5183
+ flex: 0 0 100%;
5184
+ max-width: 100%;
5185
+ }
5186
+ .pa-col-1-6 {
5187
+ flex: 0 0 100%;
5188
+ max-width: 100%;
5189
+ }
5190
+ .pa-col-5-6 {
5191
+ flex: 0 0 100%;
5192
+ max-width: 100%;
5193
+ }
5194
+ .pa-col-1-12 {
5195
+ flex: 0 0 100%;
5196
+ max-width: 100%;
5197
+ }
5198
+ .pa-col-5-12 {
5199
+ flex: 0 0 100%;
5200
+ max-width: 100%;
5201
+ }
5202
+ .pa-col-7-12 {
5203
+ flex: 0 0 100%;
5204
+ max-width: 100%;
5205
+ }
5206
+ .pa-col-11-12 {
5207
+ flex: 0 0 100%;
5208
+ max-width: 100%;
5209
+ }
5210
+ }
4339
5211
  /* ========================================
4340
5212
  Card Components
4341
5213
  Cards with headers, bodies, footers, variants, and card sections
@@ -4388,7 +5260,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
4388
5260
  .pa-card__header h4,
4389
5261
  .pa-card__header h5,
4390
5262
  .pa-card__header h6 {
4391
- color: var(--pa-text-primary);
5263
+ color: var(--pa-text-color-1);
4392
5264
  font-size: 1.6rem;
4393
5265
  }
4394
5266
  .pa-card__header .pa-btn {
@@ -4412,7 +5284,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
4412
5284
  text-overflow: ellipsis;
4413
5285
  white-space: nowrap;
4414
5286
  margin: 0;
4415
- color: var(--pa-text-primary);
5287
+ color: var(--pa-text-color-1);
4416
5288
  font-size: 1.6rem;
4417
5289
  font-weight: 600;
4418
5290
  line-height: 1;
@@ -4447,7 +5319,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
4447
5319
  gap: 0.8rem;
4448
5320
  }
4449
5321
  .pa-card__meta {
4450
- color: var(--pa-text-secondary);
5322
+ color: var(--pa-text-color-2);
4451
5323
  font-size: 1.4rem;
4452
5324
  }
4453
5325
  .pa-card--primary {
@@ -4522,13 +5394,13 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
4522
5394
  padding: 1.2rem 1rem;
4523
5395
  border: none;
4524
5396
  background: none;
4525
- color: var(--pa-text-secondary);
5397
+ color: var(--pa-text-color-2);
4526
5398
  cursor: pointer;
4527
5399
  transition: all 0.1s ease-out;
4528
5400
  border-bottom: 2px solid transparent;
4529
5401
  }
4530
5402
  .pa-card__tab:hover {
4531
- color: var(--pa-text-primary);
5403
+ color: var(--pa-text-color-1);
4532
5404
  background-color: rgba(0, 123, 255, 0.05);
4533
5405
  }
4534
5406
  .pa-card__tab--active {
@@ -4554,13 +5426,13 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
4554
5426
  border-radius: 4px;
4555
5427
  font-size: 1.4rem;
4556
5428
  background: transparent;
4557
- color: var(--pa-text-secondary);
5429
+ color: var(--pa-text-color-2);
4558
5430
  cursor: pointer;
4559
5431
  transition: all 0.1s ease-out;
4560
5432
  }
4561
5433
  .pa-card__tabs--inline .pa-card__tab:hover {
4562
5434
  background-color: rgba(0, 123, 255, 0.05);
4563
- color: var(--pa-text-primary);
5435
+ color: var(--pa-text-color-1);
4564
5436
  }
4565
5437
  .pa-card__tabs--inline .pa-card__tab--active {
4566
5438
  background: var(--pa-accent);
@@ -4576,32 +5448,29 @@ a.pa-card:hover, a.pa-card:visited {
4576
5448
  color: inherit;
4577
5449
  }
4578
5450
  a.pa-card h1, a.pa-card h2, a.pa-card h3, a.pa-card h4, a.pa-card h5, a.pa-card h6 {
4579
- color: var(--pa-text-primary);
5451
+ color: var(--pa-text-color-1);
4580
5452
  }
4581
5453
  a.pa-card p {
4582
- color: var(--pa-text-secondary);
5454
+ color: var(--pa-text-color-2);
4583
5455
  }
4584
5456
 
4585
5457
  .pa-section {
4586
5458
  margin-bottom: 3.2rem;
4587
5459
  }
4588
5460
  .pa-section h3 {
4589
- color: var(--pa-text-primary);
5461
+ color: var(--pa-text-color-1);
4590
5462
  margin-bottom: 1.6rem;
4591
5463
  border-bottom: 2px solid var(--pa-accent);
4592
5464
  padding-bottom: 0.8rem;
4593
5465
  }
4594
5466
 
4595
5467
  .pa-section-title {
4596
- color: var(--pa-text-primary);
5468
+ color: var(--pa-text-color-1);
4597
5469
  margin-bottom: 1.6rem;
4598
5470
  border-bottom: 2px solid var(--pa-accent);
4599
5471
  padding-bottom: 0.8rem;
4600
5472
  }
4601
5473
 
4602
- /* ========================================
4603
- Reset and Base Styles
4604
- ======================================== */
4605
5474
  /* ========================================
4606
5475
  Tabs Component
4607
5476
  Standalone tabs for organizing content into separate sections
@@ -4617,7 +5486,7 @@ a.pa-card p {
4617
5486
  padding: 0.8rem 1.2rem;
4618
5487
  border: none;
4619
5488
  background: none;
4620
- color: var(--pa-text-secondary);
5489
+ color: var(--pa-text-color-2);
4621
5490
  cursor: pointer;
4622
5491
  transition: all 0.1s ease-out;
4623
5492
  border-bottom: 2px solid transparent;
@@ -4628,7 +5497,7 @@ a.pa-card p {
4628
5497
  white-space: nowrap;
4629
5498
  }
4630
5499
  .pa-tabs__item:hover {
4631
- color: var(--pa-text-primary);
5500
+ color: var(--pa-text-color-1);
4632
5501
  background-color: rgba(0, 123, 255, 0.05);
4633
5502
  }
4634
5503
  .pa-tabs__item--active {
@@ -4656,12 +5525,12 @@ a.pa-card p {
4656
5525
  .pa-tabs--pills .pa-tabs__item {
4657
5526
  border-radius: 8px;
4658
5527
  border: 1px solid transparent;
4659
- background-color: var(--pa-primary-bg);
5528
+ background-color: var(--pa-main-bg);
4660
5529
  }
4661
5530
  .pa-tabs--pills .pa-tabs__item:hover {
4662
5531
  background-color: rgba(0, 123, 255, 0.1);
4663
5532
  border-color: rgba(0, 123, 255, 0.3);
4664
- color: var(--pa-text-primary);
5533
+ color: var(--pa-text-color-1);
4665
5534
  }
4666
5535
  .pa-tabs--pills .pa-tabs__item--active {
4667
5536
  background-color: var(--pa-accent);
@@ -4672,7 +5541,7 @@ a.pa-card p {
4672
5541
  border: 1px solid var(--pa-border-color);
4673
5542
  border-radius: 8px;
4674
5543
  padding: 0.4rem;
4675
- background-color: var(--pa-primary-bg);
5544
+ background-color: var(--pa-main-bg);
4676
5545
  gap: 0.4rem;
4677
5546
  }
4678
5547
  .pa-tabs--boxed .pa-tabs__item {
@@ -4683,11 +5552,11 @@ a.pa-card p {
4683
5552
  }
4684
5553
  .pa-tabs--boxed .pa-tabs__item:hover {
4685
5554
  background-color: rgba(0, 123, 255, 0.1);
4686
- color: var(--pa-text-primary);
5555
+ color: var(--pa-text-color-1);
4687
5556
  }
4688
5557
  .pa-tabs--boxed .pa-tabs__item--active {
4689
5558
  background-color: var(--pa-card-bg);
4690
- color: var(--pa-text-primary);
5559
+ color: var(--pa-text-color-1);
4691
5560
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
4692
5561
  }
4693
5562
  .pa-tabs--vertical {
@@ -4762,8 +5631,8 @@ a.pa-card p {
4762
5631
  bottom: 0;
4763
5632
  width: 3.2rem;
4764
5633
  border: none;
4765
- background: linear-gradient(to right, color-mix(in srgb, var(--pa-primary-bg) 95%, transparent), transparent);
4766
- color: var(--pa-text-primary);
5634
+ background: linear-gradient(to right, color-mix(in srgb, var(--pa-main-bg) 95%, transparent), transparent);
5635
+ color: var(--pa-text-color-1);
4767
5636
  cursor: pointer;
4768
5637
  z-index: 1;
4769
5638
  display: flex;
@@ -4774,15 +5643,15 @@ a.pa-card p {
4774
5643
  pointer-events: none;
4775
5644
  }
4776
5645
  .pa-tabs--scrollable .pa-tabs__scroll-btn:hover {
4777
- background: linear-gradient(to right, var(--pa-primary-bg), color-mix(in srgb, var(--pa-primary-bg) 80%, transparent));
5646
+ background: linear-gradient(to right, var(--pa-main-bg), color-mix(in srgb, var(--pa-main-bg) 80%, transparent));
4778
5647
  }
4779
5648
  .pa-tabs--scrollable .pa-tabs__scroll-btn--left {
4780
5649
  left: 0;
4781
- background: linear-gradient(to right, color-mix(in srgb, var(--pa-primary-bg) 95%, transparent), transparent);
5650
+ background: linear-gradient(to right, color-mix(in srgb, var(--pa-main-bg) 95%, transparent), transparent);
4782
5651
  }
4783
5652
  .pa-tabs--scrollable .pa-tabs__scroll-btn--right {
4784
5653
  right: 0;
4785
- background: linear-gradient(to left, color-mix(in srgb, var(--pa-primary-bg) 95%, transparent), transparent);
5654
+ background: linear-gradient(to left, color-mix(in srgb, var(--pa-main-bg) 95%, transparent), transparent);
4786
5655
  }
4787
5656
  .pa-tabs--scrollable .pa-tabs__scroll-btn--visible {
4788
5657
  opacity: 1;
@@ -4892,7 +5761,7 @@ a.pa-card p {
4892
5761
  padding: 0;
4893
5762
  border: none;
4894
5763
  background: transparent;
4895
- color: var(--pa-text-secondary);
5764
+ color: var(--pa-text-color-2);
4896
5765
  cursor: pointer;
4897
5766
  transition: all 0.1s ease-out;
4898
5767
  border-left: 1px solid var(--pa-border-color);
@@ -4902,7 +5771,7 @@ a.pa-card p {
4902
5771
  }
4903
5772
  .pa-tabs__container--card .pa-tabs__overflow-toggle:hover {
4904
5773
  background-color: rgba(0, 123, 255, 0.05);
4905
- color: var(--pa-text-primary);
5774
+ color: var(--pa-text-color-1);
4906
5775
  }
4907
5776
  .pa-tabs__container--card .pa-tabs__overflow-toggle--has-active {
4908
5777
  color: var(--pa-accent);
@@ -4973,9 +5842,6 @@ a.pa-card p {
4973
5842
  width: 100%;
4974
5843
  }
4975
5844
 
4976
- /* ========================================
4977
- Reset and Base Styles
4978
- ======================================== */
4979
5845
  /* ========================================
4980
5846
  Statistics Components
4981
5847
  Stat displays with icons, hero variant, and square variant
@@ -5016,11 +5882,11 @@ a.pa-card p {
5016
5882
  .pa-stat__number {
5017
5883
  font-size: 2.4rem;
5018
5884
  font-weight: 600;
5019
- color: var(--pa-text-primary);
5885
+ color: var(--pa-text-color-1);
5020
5886
  margin-bottom: 0.4rem;
5021
5887
  }
5022
5888
  .pa-stat__label {
5023
- color: var(--pa-text-secondary);
5889
+ color: var(--pa-text-color-2);
5024
5890
  font-size: 1.4rem;
5025
5891
  }
5026
5892
  .pa-stat--hero {
@@ -5033,13 +5899,13 @@ a.pa-card p {
5033
5899
  text-transform: uppercase;
5034
5900
  letter-spacing: 0.05em;
5035
5901
  font-weight: 500;
5036
- color: var(--pa-text-secondary);
5902
+ color: var(--pa-text-color-2);
5037
5903
  margin-bottom: 0.8rem;
5038
5904
  }
5039
5905
  .pa-stat--hero .pa-stat__value {
5040
5906
  font-size: 3.2rem;
5041
5907
  font-weight: 700;
5042
- color: var(--pa-text-primary);
5908
+ color: var(--pa-text-color-1);
5043
5909
  line-height: 1.1;
5044
5910
  margin-bottom: 0.8rem;
5045
5911
  }
@@ -5054,7 +5920,7 @@ a.pa-card p {
5054
5920
  color: #dc3545;
5055
5921
  }
5056
5922
  .pa-stat--hero .pa-stat__change--neutral {
5057
- color: var(--pa-text-secondary);
5923
+ color: var(--pa-text-color-2);
5058
5924
  }
5059
5925
  .pa-stat--square {
5060
5926
  display: flex;
@@ -5135,7 +6001,7 @@ a.pa-card p {
5135
6001
  color: #ffffff;
5136
6002
  }
5137
6003
  .pa-stat--square.pa-stat--secondary {
5138
- background-color: var(--pa-text-secondary);
6004
+ background-color: var(--pa-text-color-2);
5139
6005
  color: #ffffff;
5140
6006
  }
5141
6007
 
@@ -5143,9 +6009,6 @@ a.pa-card p {
5143
6009
  margin: -0.8rem;
5144
6010
  }
5145
6011
 
5146
- /* ========================================
5147
- Reset and Base Styles
5148
- ======================================== */
5149
6012
  /* ========================================
5150
6013
  List Components
5151
6014
  List items with avatars, titles, subtitles, and meta information
@@ -5245,7 +6108,7 @@ a.pa-card p {
5245
6108
  }
5246
6109
  .pa-list-definition dt {
5247
6110
  font-weight: 600;
5248
- color: var(--pa-text-primary);
6111
+ color: var(--pa-text-color-1);
5249
6112
  margin-bottom: 0.4rem;
5250
6113
  margin-top: 1.6rem;
5251
6114
  }
@@ -5255,7 +6118,7 @@ a.pa-card p {
5255
6118
  .pa-list-definition dd {
5256
6119
  margin-left: 2.4rem;
5257
6120
  margin-bottom: 0.8rem;
5258
- color: var(--pa-text-secondary);
6121
+ color: var(--pa-text-color-2);
5259
6122
  line-height: 1.6;
5260
6123
  }
5261
6124
  .pa-list-definition--inline dt {
@@ -5286,13 +6149,13 @@ a.pa-card p {
5286
6149
  border-bottom: none;
5287
6150
  }
5288
6151
  .pa-list__item:hover {
5289
- background-color: var(--pa-primary-bg);
6152
+ background-color: var(--pa-main-bg);
5290
6153
  }
5291
6154
  .pa-list__avatar {
5292
6155
  width: 3.5rem;
5293
6156
  height: 3.5rem;
5294
6157
  border-radius: 50%;
5295
- background-color: var(--pa-primary-bg);
6158
+ background-color: var(--pa-main-bg);
5296
6159
  display: flex;
5297
6160
  align-items: center;
5298
6161
  justify-content: center;
@@ -5303,16 +6166,16 @@ a.pa-card p {
5303
6166
  }
5304
6167
  .pa-list__title {
5305
6168
  font-weight: 500;
5306
- color: var(--pa-text-primary);
6169
+ color: var(--pa-text-color-1);
5307
6170
  margin-bottom: 0.4rem;
5308
6171
  }
5309
6172
  .pa-list__subtitle {
5310
- color: var(--pa-text-secondary);
6173
+ color: var(--pa-text-color-2);
5311
6174
  font-size: 1.4rem;
5312
6175
  margin-bottom: 0.4rem;
5313
6176
  }
5314
6177
  .pa-list__meta {
5315
- color: var(--pa-text-secondary);
6178
+ color: var(--pa-text-color-2);
5316
6179
  font-size: 1.2rem;
5317
6180
  }
5318
6181
 
@@ -5324,9 +6187,6 @@ a.pa-card p {
5324
6187
  Badges Index
5325
6188
  Central import point for all badge component modules
5326
6189
  ======================================== */
5327
- /* ========================================
5328
- Reset and Base Styles
5329
- ======================================== */
5330
6190
  /* ========================================
5331
6191
  Badge Base
5332
6192
  Core badge component with sizes, colors, and modifiers
@@ -5416,9 +6276,6 @@ a.pa-card p {
5416
6276
  text-align: left;
5417
6277
  }
5418
6278
 
5419
- /* ========================================
5420
- Reset and Base Styles
5421
- ======================================== */
5422
6279
  /* ========================================
5423
6280
  Composite Badge
5424
6281
  Multi-part badge with [icon][label][button] structure
@@ -5480,9 +6337,6 @@ a.pa-card p {
5480
6337
  box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25);
5481
6338
  }
5482
6339
 
5483
- /* ========================================
5484
- Reset and Base Styles
5485
- ======================================== */
5486
6340
  /* ========================================
5487
6341
  Composite Badge Variants
5488
6342
  Color variations for composite badges
@@ -5514,7 +6368,7 @@ a.pa-card p {
5514
6368
  }
5515
6369
  .pa-composite-badge--secondary .pa-composite-badge__label {
5516
6370
  background-color: #f8f9fa;
5517
- color: var(--pa-text-secondary);
6371
+ color: var(--pa-text-color-2);
5518
6372
  }
5519
6373
  .pa-composite-badge--secondary .pa-composite-badge__label:hover {
5520
6374
  background-color: #f8f9fa;
@@ -5640,7 +6494,7 @@ a.pa-card p {
5640
6494
  }
5641
6495
  .pa-composite-badge--dark .pa-composite-badge__label {
5642
6496
  background-color: #f8f9fa;
5643
- color: var(--pa-text-primary);
6497
+ color: var(--pa-text-color-1);
5644
6498
  }
5645
6499
  .pa-composite-badge--dark .pa-composite-badge__label:hover {
5646
6500
  background-color: #e1e5e9;
@@ -5803,9 +6657,6 @@ a.pa-card p {
5803
6657
  box-shadow: 0 0 0 2px rgba(52, 58, 64, 0.25);
5804
6658
  }
5805
6659
 
5806
- /* ========================================
5807
- Reset and Base Styles
5808
- ======================================== */
5809
6660
  /* ========================================
5810
6661
  Badge Group
5811
6662
  Container for grouped badges with visibility limits
@@ -5823,9 +6674,6 @@ a.pa-card p {
5823
6674
  display: inline-flex;
5824
6675
  }
5825
6676
 
5826
- /* ========================================
5827
- Reset and Base Styles
5828
- ======================================== */
5829
6677
  /* ========================================
5830
6678
  Label Components
5831
6679
  Tag-like labels with colors and sizes
@@ -5836,7 +6684,7 @@ a.pa-card p {
5836
6684
  gap: 0.4rem;
5837
6685
  padding: 0.4rem 0.8rem;
5838
6686
  background-color: var(--pa-accent-light);
5839
- color: var(--pa-text-primary);
6687
+ color: var(--pa-text-color-1);
5840
6688
  font-size: 1.2rem;
5841
6689
  font-weight: 500;
5842
6690
  line-height: 1.2;
@@ -5951,9 +6799,6 @@ a.pa-card p {
5951
6799
  background-color: var(--pa-info-bg-light);
5952
6800
  }
5953
6801
 
5954
- /* ========================================
5955
- Reset and Base Styles
5956
- ======================================== */
5957
6802
  /* ========================================
5958
6803
  Button Components
5959
6804
  Buttons, button groups, sizes, colors, states, and icon buttons
@@ -5971,7 +6816,7 @@ a.pa-card p {
5971
6816
  cursor: pointer;
5972
6817
  transition: all 0.1s ease-out;
5973
6818
  background: none;
5974
- color: var(--pa-text-primary);
6819
+ color: var(--pa-text-color-1);
5975
6820
  }
5976
6821
  .pa-btn:hover {
5977
6822
  transform: translateY(-1px);
@@ -5988,10 +6833,10 @@ a.pa-card p {
5988
6833
  .pa-btn--secondary {
5989
6834
  background-color: transparent;
5990
6835
  border-color: var(--pa-border-color);
5991
- color: var(--pa-text-primary);
6836
+ color: var(--pa-text-color-1);
5992
6837
  }
5993
6838
  .pa-btn--secondary:hover {
5994
- background-color: var(--pa-primary-bg);
6839
+ background-color: var(--pa-main-bg);
5995
6840
  border-color: var(--pa-accent);
5996
6841
  }
5997
6842
  .pa-btn--xs {
@@ -6323,9 +7168,6 @@ a.pa-card p {
6323
7168
  z-index: 7000;
6324
7169
  }
6325
7170
 
6326
- /* ========================================
6327
- Reset and Base Styles
6328
- ======================================== */
6329
7171
  /* ========================================
6330
7172
  Loader Components
6331
7173
  Spinners, dots, bars, pulse, ring, wave loaders and animations
@@ -6554,10 +7396,7 @@ a.pa-card p {
6554
7396
  justify-content: center;
6555
7397
  text-align: center;
6556
7398
  }
6557
-
6558
- /* ========================================
6559
- Reset and Base Styles
6560
- ======================================== */
7399
+
6561
7400
  /* ========================================
6562
7401
  Tooltip and Popover Components
6563
7402
  Tooltips with multiple positions and popovers with rich content
@@ -6714,7 +7553,7 @@ a.pa-card p {
6714
7553
  }
6715
7554
  .pa-tooltip--warning::before {
6716
7555
  background-color: var(--pa-btn-warning-bg);
6717
- color: var(--pa-text-primary);
7556
+ color: var(--pa-text-color-1);
6718
7557
  }
6719
7558
  .pa-tooltip--warning::after {
6720
7559
  border-top-color: var(--pa-btn-warning-bg);
@@ -6985,7 +7824,7 @@ a.pa-card p {
6985
7824
  border: 1px solid var(--pa-border-color);
6986
7825
  border-radius: 50%;
6987
7826
  background-color: var(--pa-popover-content-bg);
6988
- color: var(--pa-text-secondary);
7827
+ color: var(--pa-text-color-2);
6989
7828
  font-size: 1.2rem;
6990
7829
  font-weight: 700;
6991
7830
  cursor: pointer;
@@ -7023,13 +7862,13 @@ a.pa-card p {
7023
7862
  margin: 0;
7024
7863
  font-size: 1.8rem;
7025
7864
  font-weight: 600;
7026
- color: var(--pa-text-primary);
7865
+ color: var(--pa-text-color-1);
7027
7866
  }
7028
7867
  .pa-popover__body {
7029
7868
  padding: 1.6rem;
7030
7869
  font-size: 1.4rem;
7031
7870
  line-height: 1.5;
7032
- color: var(--pa-text-primary);
7871
+ color: var(--pa-text-color-1);
7033
7872
  text-align: left;
7034
7873
  }
7035
7874
  .pa-popover__body p {
@@ -7051,7 +7890,7 @@ a.pa-card p {
7051
7890
  }
7052
7891
  .pa-popover__body code {
7053
7892
  padding: 0.2rem 0.4rem;
7054
- background-color: color-mix(in srgb, var(--pa-text-secondary) 15%, transparent);
7893
+ background-color: color-mix(in srgb, var(--pa-text-color-2) 15%, transparent);
7055
7894
  border-radius: 2px;
7056
7895
  font-family: monospace;
7057
7896
  font-size: 0.9em;
@@ -7061,7 +7900,7 @@ a.pa-card p {
7061
7900
  border: none;
7062
7901
  font-size: 1.8rem;
7063
7902
  line-height: 1;
7064
- color: var(--pa-text-secondary);
7903
+ color: var(--pa-text-color-2);
7065
7904
  cursor: pointer;
7066
7905
  padding: 0;
7067
7906
  width: 2.4rem;
@@ -7073,8 +7912,8 @@ a.pa-card p {
7073
7912
  transition: all 0.1s ease;
7074
7913
  }
7075
7914
  .pa-popover__close:hover {
7076
- background-color: color-mix(in srgb, var(--pa-text-secondary) 10%, transparent);
7077
- color: var(--pa-text-primary);
7915
+ background-color: color-mix(in srgb, var(--pa-text-color-2) 10%, transparent);
7916
+ color: var(--pa-text-color-1);
7078
7917
  }
7079
7918
  .pa-popover--sm .pa-popover__content {
7080
7919
  min-width: 19.2rem;
@@ -7153,9 +7992,6 @@ a.pa-card p {
7153
7992
  background-color: var(--pa-color-9);
7154
7993
  }
7155
7994
 
7156
- /* ========================================
7157
- Reset and Base Styles
7158
- ======================================== */
7159
7995
  /* ========================================
7160
7996
  Alert Components
7161
7997
  Alerts with variants, sizes, dismissible functionality
@@ -7186,8 +8022,8 @@ a.pa-card p {
7186
8022
  border-color: rgba(0, 123, 255, 0.2);
7187
8023
  }
7188
8024
  .pa-alert--secondary {
7189
- color: var(--pa-text-secondary);
7190
- background-color: color-mix(in srgb, var(--pa-text-secondary) 15%, transparent);
8025
+ color: var(--pa-text-color-2);
8026
+ background-color: color-mix(in srgb, var(--pa-text-color-2) 15%, transparent);
7191
8027
  border-color: var(--pa-border-color);
7192
8028
  }
7193
8029
  .pa-alert--success {
@@ -7212,14 +8048,14 @@ a.pa-card p {
7212
8048
  border-color: var(--pa-alert-info-border);
7213
8049
  }
7214
8050
  .pa-alert--light {
7215
- color: var(--pa-text-primary);
7216
- background-color: color-mix(in srgb, var(--pa-text-primary) 5%, transparent);
8051
+ color: var(--pa-text-color-1);
8052
+ background-color: color-mix(in srgb, var(--pa-text-color-1) 5%, transparent);
7217
8053
  border-color: var(--pa-border-color);
7218
8054
  }
7219
8055
  .pa-alert--dark {
7220
- color: var(--pa-text-primary);
7221
- background-color: color-mix(in srgb, var(--pa-text-primary) 5%, transparent);
7222
- border-color: color-mix(in srgb, var(--pa-text-primary) 10%, transparent);
8056
+ color: var(--pa-text-color-1);
8057
+ background-color: color-mix(in srgb, var(--pa-text-color-1) 5%, transparent);
8058
+ border-color: color-mix(in srgb, var(--pa-text-color-1) 10%, transparent);
7223
8059
  }
7224
8060
  .pa-alert--outline-primary {
7225
8061
  color: var(--pa-accent);
@@ -7327,9 +8163,6 @@ a.pa-card p {
7327
8163
  border-top: 1px solid rgba(0, 0, 0, 0.1);
7328
8164
  }
7329
8165
 
7330
- /* ========================================
7331
- Reset and Base Styles
7332
- ======================================== */
7333
8166
  /* ========================================
7334
8167
  Callout Components
7335
8168
  Documentation-style callouts with left border accent
@@ -7355,8 +8188,8 @@ a.pa-card p {
7355
8188
  background-color: rgba(0, 123, 255, 0.08);
7356
8189
  }
7357
8190
  .pa-callout--secondary {
7358
- border-left-color: var(--pa-text-secondary);
7359
- background-color: color-mix(in srgb, var(--pa-text-secondary) 5%, transparent);
8191
+ border-left-color: var(--pa-text-color-2);
8192
+ background-color: color-mix(in srgb, var(--pa-text-color-2) 5%, transparent);
7360
8193
  }
7361
8194
  .pa-callout--success {
7362
8195
  border-left-color: var(--pa-success-bg);
@@ -7441,9 +8274,6 @@ a.pa-card p {
7441
8274
  Forms Index
7442
8275
  Central import point for all form component modules
7443
8276
  ======================================== */
7444
- /* ========================================
7445
- Reset and Base Styles
7446
- ======================================== */
7447
8277
  /* ========================================
7448
8278
  Form Layout
7449
8279
  Form groups, form containers, horizontal layouts
@@ -7467,7 +8297,7 @@ a.pa-card p {
7467
8297
  flex-shrink: 0;
7468
8298
  padding-top: 0.8rem;
7469
8299
  margin-bottom: 0;
7470
- color: var(--pa-text-primary);
8300
+ color: var(--pa-text-color-1);
7471
8301
  font-weight: 500;
7472
8302
  font-size: 1.4rem;
7473
8303
  }
@@ -7482,7 +8312,7 @@ a.pa-card p {
7482
8312
  align-items: center;
7483
8313
  gap: 0.8rem;
7484
8314
  margin-bottom: 0.3rem;
7485
- color: var(--pa-text-primary);
8315
+ color: var(--pa-text-color-1);
7486
8316
  font-weight: 500;
7487
8317
  font-size: 1.4rem;
7488
8318
  }
@@ -7493,9 +8323,6 @@ a.pa-card p {
7493
8323
  flex-wrap: wrap;
7494
8324
  }
7495
8325
 
7496
- /* ========================================
7497
- Reset and Base Styles
7498
- ======================================== */
7499
8326
  /* ========================================
7500
8327
  Form Input Elements
7501
8328
  Input, select, textarea base styles and sizes
@@ -7508,7 +8335,7 @@ a.pa-card p {
7508
8335
  border-radius: 4px;
7509
8336
  font-size: 1.4rem;
7510
8337
  background-color: var(--pa-input-bg);
7511
- color: var(--pa-text-primary);
8338
+ color: var(--pa-text-color-1);
7512
8339
  transition: border-color 0.1s ease-out;
7513
8340
  }
7514
8341
  .pa-input:focus {
@@ -7525,7 +8352,7 @@ a.pa-card p {
7525
8352
  border-radius: 4px;
7526
8353
  font-size: 1.4rem;
7527
8354
  background-color: var(--pa-input-bg);
7528
- color: var(--pa-text-primary);
8355
+ color: var(--pa-text-color-1);
7529
8356
  transition: border-color 0.1s ease-out;
7530
8357
  }
7531
8358
  .pa-select:focus {
@@ -7541,7 +8368,7 @@ a.pa-card p {
7541
8368
  border-radius: 4px;
7542
8369
  font-size: 1.4rem;
7543
8370
  background-color: var(--pa-input-bg);
7544
- color: var(--pa-text-primary);
8371
+ color: var(--pa-text-color-1);
7545
8372
  transition: border-color 0.1s ease-out;
7546
8373
  resize: vertical;
7547
8374
  min-height: 9.6rem;
@@ -7552,7 +8379,7 @@ a.pa-card p {
7552
8379
  box-shadow: 0 0 0 3px var(--pa-accent-light);
7553
8380
  }
7554
8381
  .pa-textarea::placeholder {
7555
- color: var(--pa-text-secondary);
8382
+ color: var(--pa-text-color-2);
7556
8383
  }
7557
8384
 
7558
8385
  .pa-input--xs,
@@ -7591,9 +8418,6 @@ a.pa-card p {
7591
8418
  filter: invert(1);
7592
8419
  }
7593
8420
 
7594
- /* ========================================
7595
- Reset and Base Styles
7596
- ======================================== */
7597
8421
  /* ========================================
7598
8422
  Form Validation States
7599
8423
  Input states (error, success, warning), form groups with states, help text
@@ -7662,7 +8486,7 @@ a.pa-card p {
7662
8486
  display: block;
7663
8487
  margin-top: 0.4rem;
7664
8488
  font-size: 1.2rem;
7665
- color: var(--pa-text-secondary);
8489
+ color: var(--pa-text-color-2);
7666
8490
  }
7667
8491
  .pa-form-help--error {
7668
8492
  color: var(--pa-danger-bg);
@@ -7671,9 +8495,6 @@ a.pa-card p {
7671
8495
  color: var(--pa-success-bg);
7672
8496
  }
7673
8497
 
7674
- /* ========================================
7675
- Reset and Base Styles
7676
- ======================================== */
7677
8498
  /* ========================================
7678
8499
  Input Groups
7679
8500
  Input groups with prepend/append addons and buttons
@@ -7703,10 +8524,11 @@ a.pa-card p {
7703
8524
  .pa-input-group__prepend, .pa-input-group__append {
7704
8525
  display: flex;
7705
8526
  align-items: center;
7706
- padding: 0.8rem 0.8rem;
8527
+ height: 3.5rem;
8528
+ line-height: 3.5rem;
8529
+ padding: 0 0.8rem;
7707
8530
  border: 1px solid var(--pa-border-color);
7708
8531
  font-size: 1.4rem;
7709
- line-height: 1;
7710
8532
  white-space: nowrap;
7711
8533
  border-radius: 0;
7712
8534
  }
@@ -7734,27 +8556,24 @@ a.pa-card p {
7734
8556
  .pa-input-group__append + .pa-input-group__append {
7735
8557
  border-left: 1px solid var(--pa-border-color);
7736
8558
  }
7737
- .pa-input-group:focus-within .pa-input-group__prepend {
8559
+ .pa-input-group:has(.pa-input:focus) .pa-input-group__prepend {
7738
8560
  border-right: 1px solid var(--pa-input-focus-border-color);
7739
8561
  }
7740
- .pa-input-group:focus-within .pa-input-group__prepend:has(+ .pa-input-group__prepend) {
8562
+ .pa-input-group:has(.pa-input:focus) .pa-input-group__prepend:has(+ .pa-input-group__prepend) {
7741
8563
  border-right: none;
7742
8564
  }
7743
- .pa-input-group:focus-within .pa-input-group__append {
8565
+ .pa-input-group:has(.pa-input:focus) .pa-input-group__append {
7744
8566
  border-left: 1px solid var(--pa-input-focus-border-color);
7745
8567
  }
7746
- .pa-input-group:focus-within .pa-input-group__append + .pa-input-group__append {
8568
+ .pa-input-group:has(.pa-input:focus) .pa-input-group__append + .pa-input-group__append {
7747
8569
  border-left: 1px solid var(--pa-border-color);
7748
8570
  }
7749
8571
  .pa-input-group__button {
7750
8572
  border-radius: 0;
7751
- border-color: var(--pa-border-color);
7752
- border-left: none;
7753
8573
  }
7754
8574
  .pa-input-group__button:first-child {
7755
8575
  border-top-left-radius: 4px;
7756
8576
  border-bottom-left-radius: 4px;
7757
- border-left: 1px solid var(--pa-border-color);
7758
8577
  }
7759
8578
  .pa-input-group__button:last-child {
7760
8579
  border-top-right-radius: 4px;
@@ -7762,28 +8581,29 @@ a.pa-card p {
7762
8581
  }
7763
8582
  .pa-input-group--xs .pa-input-group__prepend,
7764
8583
  .pa-input-group--xs .pa-input-group__append {
7765
- padding: 0.6rem 0.8rem;
8584
+ height: 3.1rem;
8585
+ line-height: 3.1rem;
7766
8586
  font-size: 1.2rem;
7767
8587
  }
7768
8588
  .pa-input-group--sm .pa-input-group__prepend,
7769
8589
  .pa-input-group--sm .pa-input-group__append {
7770
- padding: 0.8rem 0.8rem;
8590
+ height: 3.3rem;
8591
+ line-height: 3.3rem;
7771
8592
  font-size: 1.4rem;
7772
8593
  }
7773
8594
  .pa-input-group--lg .pa-input-group__prepend,
7774
8595
  .pa-input-group--lg .pa-input-group__append {
7775
- padding: 0.8rem 0.8rem;
8596
+ height: 3.8rem;
8597
+ line-height: 3.8rem;
7776
8598
  font-size: 1.6rem;
7777
8599
  }
7778
8600
  .pa-input-group--xl .pa-input-group__prepend,
7779
8601
  .pa-input-group--xl .pa-input-group__append {
7780
- padding: 0.8rem 0.8rem;
8602
+ height: 4.1rem;
8603
+ line-height: 4.1rem;
7781
8604
  font-size: 1.8rem;
7782
8605
  }
7783
8606
 
7784
- /* ========================================
7785
- Reset and Base Styles
7786
- ======================================== */
7787
8607
  /* ========================================
7788
8608
  Input Wrapper
7789
8609
  Input with clear button, search tokens container
@@ -7810,7 +8630,7 @@ a.pa-card p {
7810
8630
  transform: translateY(-50%);
7811
8631
  background: transparent;
7812
8632
  border: none;
7813
- color: var(--pa-text-secondary);
8633
+ color: var(--pa-text-color-2);
7814
8634
  cursor: pointer;
7815
8635
  padding: 0.4rem;
7816
8636
  font-size: 1.6rem;
@@ -7862,9 +8682,6 @@ a.pa-card p {
7862
8682
  opacity: 1;
7863
8683
  }
7864
8684
 
7865
- /* ========================================
7866
- Reset and Base Styles
7867
- ======================================== */
7868
8685
  /* ========================================
7869
8686
  Query Editor Components
7870
8687
  Syntax highlighting, autocomplete, virtual textbox, inline query editor
@@ -7894,7 +8711,7 @@ a.pa-card p {
7894
8711
  position: relative;
7895
8712
  z-index: 1;
7896
8713
  background: transparent;
7897
- color: var(--pa-text-primary);
8714
+ color: var(--pa-text-color-1);
7898
8715
  }
7899
8716
  .pa-search-highlight__field {
7900
8717
  display: inline;
@@ -7943,14 +8760,14 @@ a.pa-card p {
7943
8760
  .pa-search-autocomplete__item-type {
7944
8761
  margin-left: auto;
7945
8762
  font-size: 1.2rem;
7946
- color: var(--pa-text-secondary);
8763
+ color: var(--pa-text-color-2);
7947
8764
  opacity: 0.7;
7948
8765
  }
7949
8766
  .pa-search-autocomplete__section {
7950
8767
  padding: 0.4rem 1.2rem;
7951
8768
  font-size: 1.2rem;
7952
8769
  font-weight: 500;
7953
- color: var(--pa-text-secondary);
8770
+ color: var(--pa-text-color-2);
7954
8771
  text-transform: uppercase;
7955
8772
  letter-spacing: 0.05em;
7956
8773
  background-color: var(--pa-card-header-bg);
@@ -7959,7 +8776,7 @@ a.pa-card p {
7959
8776
  .pa-search-autocomplete__empty {
7960
8777
  padding: 1.2rem;
7961
8778
  text-align: center;
7962
- color: var(--pa-text-secondary);
8779
+ color: var(--pa-text-color-2);
7963
8780
  font-size: 1.4rem;
7964
8781
  }
7965
8782
 
@@ -7970,7 +8787,7 @@ a.pa-card p {
7970
8787
  border-radius: 4px;
7971
8788
  font-size: 1.4rem;
7972
8789
  background-color: var(--pa-input-bg);
7973
- color: var(--pa-text-primary);
8790
+ color: var(--pa-text-color-1);
7974
8791
  cursor: text;
7975
8792
  overflow-wrap: break-word;
7976
8793
  word-wrap: break-word;
@@ -7984,7 +8801,7 @@ a.pa-card p {
7984
8801
  }
7985
8802
  .pa-virtual-textbox:empty::before {
7986
8803
  content: attr(data-placeholder);
7987
- color: var(--pa-text-secondary);
8804
+ color: var(--pa-text-color-2);
7988
8805
  opacity: 0.7;
7989
8806
  pointer-events: none;
7990
8807
  }
@@ -8016,7 +8833,7 @@ a.pa-card p {
8016
8833
  border: 1px solid transparent;
8017
8834
  border-radius: 4px;
8018
8835
  font-size: 1.4rem;
8019
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
8836
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
8020
8837
  white-space: pre-wrap;
8021
8838
  word-wrap: break-word;
8022
8839
  pointer-events: none;
@@ -8033,10 +8850,10 @@ a.pa-card p {
8033
8850
  border: 1px solid #e1e5e9;
8034
8851
  border-radius: 4px;
8035
8852
  font-size: 1.4rem;
8036
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
8853
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
8037
8854
  background: transparent;
8038
8855
  color: transparent;
8039
- caret-color: var(--pa-text-primary);
8856
+ caret-color: var(--pa-text-color-1);
8040
8857
  resize: none;
8041
8858
  overflow: hidden;
8042
8859
  line-height: 1.5;
@@ -8049,7 +8866,7 @@ a.pa-card p {
8049
8866
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.05);
8050
8867
  }
8051
8868
  .pa-inline-query-editor__input::placeholder {
8052
- color: var(--pa-text-secondary);
8869
+ color: var(--pa-text-color-2);
8053
8870
  opacity: 0.7;
8054
8871
  }
8055
8872
 
@@ -8059,24 +8876,24 @@ a.pa-card p {
8059
8876
  }
8060
8877
  .pa-inline-query-token--field {
8061
8878
  background-color: rgba(0, 123, 255, 0.15);
8062
- color: var(--pa-text-primary);
8879
+ color: var(--pa-text-color-1);
8063
8880
  }
8064
8881
  .pa-inline-query-token--field.pa-inline-query-token--invalid {
8065
8882
  background-color: rgba(220, 53, 69, 0.15);
8066
- color: var(--pa-text-primary);
8883
+ color: var(--pa-text-color-1);
8067
8884
  text-decoration: wavy underline;
8068
8885
  }
8069
8886
  .pa-inline-query-token--operator {
8070
- background-color: rgba(var(--pa-text-secondary), 0.15);
8071
- color: var(--pa-text-primary);
8887
+ background-color: rgba(var(--pa-text-color-2), 0.15);
8888
+ color: var(--pa-text-color-1);
8072
8889
  }
8073
8890
  .pa-inline-query-token--value {
8074
8891
  background-color: rgba(40, 167, 69, 0.15);
8075
- color: var(--pa-text-primary);
8892
+ color: var(--pa-text-color-1);
8076
8893
  }
8077
8894
  .pa-inline-query-token--keyword {
8078
8895
  background-color: rgba(255, 193, 7, 0.15);
8079
- color: var(--pa-text-primary);
8896
+ color: var(--pa-text-color-1);
8080
8897
  font-style: italic;
8081
8898
  }
8082
8899
 
@@ -8121,7 +8938,7 @@ a.pa-card p {
8121
8938
  .pa-inline-query-autocomplete__item-type {
8122
8939
  display: block;
8123
8940
  font-size: 1.2rem;
8124
- color: var(--pa-text-secondary);
8941
+ color: var(--pa-text-color-2);
8125
8942
  opacity: 0.7;
8126
8943
  line-height: 1.3;
8127
8944
  }
@@ -8129,15 +8946,12 @@ a.pa-card p {
8129
8946
  flex-shrink: 0;
8130
8947
  font-size: 1.2rem;
8131
8948
  padding: 0.2rem 0.6rem;
8132
- background-color: rgba(var(--pa-text-secondary), 0.1);
8133
- color: var(--pa-text-secondary);
8949
+ background-color: rgba(var(--pa-text-color-2), 0.1);
8950
+ color: var(--pa-text-color-2);
8134
8951
  border-radius: 0.4rem;
8135
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
8952
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
8136
8953
  }
8137
8954
 
8138
- /* ========================================
8139
- Reset and Base Styles
8140
- ======================================== */
8141
8955
  /* ========================================
8142
8956
  Checkboxes and Radio Buttons
8143
8957
  Custom checkbox component with tri-state support, radio buttons
@@ -8155,7 +8969,7 @@ a.pa-card p {
8155
8969
  gap: 0.8rem;
8156
8970
  cursor: pointer;
8157
8971
  font-size: 1.4rem;
8158
- color: var(--pa-text-primary);
8972
+ color: var(--pa-text-color-1);
8159
8973
  user-select: none;
8160
8974
  }
8161
8975
  .pa-checkbox input[type=checkbox] {
@@ -8276,7 +9090,7 @@ input:indeterminate + .pa-checkbox__box::after {
8276
9090
  gap: 0.8rem;
8277
9091
  cursor: pointer;
8278
9092
  font-size: 1.4rem;
8279
- color: var(--pa-text-primary);
9093
+ color: var(--pa-text-color-1);
8280
9094
  }
8281
9095
  .pa-radio input {
8282
9096
  margin: 0;
@@ -8302,9 +9116,6 @@ input:indeterminate + .pa-checkbox__box::after {
8302
9116
  height: 2.4rem;
8303
9117
  }
8304
9118
 
8305
- /* ========================================
8306
- Reset and Base Styles
8307
- ======================================== */
8308
9119
  /* Pure Admin - Web Components Theme Integration
8309
9120
  * Maps Pure Admin SCSS variables to web component CSS custom properties
8310
9121
  *
@@ -8327,8 +9138,8 @@ web-daterangepicker {
8327
9138
  --drp-accent-color: #007bff;
8328
9139
  --drp-primary-bg: #007bff;
8329
9140
  --drp-primary-bg-hover: rgb(51, 149.4, 255);
8330
- --drp-text-primary: var(--pa-text-primary);
8331
- --drp-text-secondary: var(--pa-text-secondary);
9141
+ --drp-text-primary: var(--pa-text-color-1);
9142
+ --drp-text-secondary: var(--pa-text-color-2);
8332
9143
  --drp-border-color: #e1e5e9;
8333
9144
  --drp-card-bg: var(--pa-card-bg);
8334
9145
  --drp-hover-bg: #f8f9fa;
@@ -8367,18 +9178,18 @@ web-daterangepicker {
8367
9178
  /* ===== INPUT FIELD SEMANTIC VARIABLES ===== */
8368
9179
  /* Input colors */
8369
9180
  --drp-input-background: var(--pa-input-bg);
8370
- --drp-input-color: var(--pa-text-primary);
9181
+ --drp-input-color: var(--pa-text-color-1);
8371
9182
  --drp-input-border-color: #ced4da;
8372
9183
  --drp-input-border-color-hover: #007bff;
8373
9184
  --drp-input-border-color-focus: #007bff;
8374
- --drp-input-placeholder-color: var(--pa-text-secondary);
9185
+ --drp-input-placeholder-color: var(--pa-text-color-2);
8375
9186
  --drp-input-disabled-background: var(--pa-input-bg);
8376
- --drp-input-disabled-color: var(--pa-text-secondary);
9187
+ --drp-input-disabled-color: var(--pa-text-color-2);
8377
9188
  /* Input focus effects */
8378
9189
  --drp-input-focus-shadow-color: rgba(0, 123, 255, 0.05);
8379
9190
  --drp-input-focus-shadow-size: 3px;
8380
9191
  /* Input icon */
8381
- --drp-input-icon-color: var(--pa-text-secondary);
9192
+ --drp-input-icon-color: var(--pa-text-color-2);
8382
9193
  --drp-input-icon-opacity: 1;
8383
9194
  /* Input size variants - matched to Pure Admin .pa-input sizes (10px base)
8384
9195
  Heights: xs=31px, sm=33px, md=35px, lg=38px, xl=41px */
@@ -8423,12 +9234,12 @@ web-daterangepicker {
8423
9234
  --drp-header-padding: 0.8rem 1.2rem;
8424
9235
  --drp-header-font-size: 1.6rem;
8425
9236
  --drp-header-font-weight: 600;
8426
- --drp-header-text-color: var(--pa-text-primary);
9237
+ --drp-header-text-color: var(--pa-text-color-1);
8427
9238
  --drp-header-bg-hover: rgba(0, 123, 255, 0.12);
8428
9239
  --drp-header-bg-active: rgba(0, 123, 255, 0.05);
8429
9240
  /* ===== NAVIGATION ===== */
8430
9241
  --drp-nav-btn-size: 3.2rem; /* 32px (10px base) */
8431
- --drp-nav-text-color: var(--pa-text-primary);
9242
+ --drp-nav-text-color: var(--pa-text-color-1);
8432
9243
  --drp-nav-border-color: #e1e5e9;
8433
9244
  --drp-nav-bg-hover: rgba(0, 123, 255, 0.12);
8434
9245
  --drp-nav-bg-active: rgba(0, 123, 255, 0.05);
@@ -8436,14 +9247,14 @@ web-daterangepicker {
8436
9247
  /* ===== WEEKDAY HEADER ===== */
8437
9248
  --drp-weekday-font-size: 1.2rem;
8438
9249
  --drp-weekday-font-weight: 600;
8439
- --drp-weekday-color: var(--pa-text-secondary);
9250
+ --drp-weekday-color: var(--pa-text-color-2);
8440
9251
  --drp-weekday-padding: 0.4rem;
8441
9252
  /* ===== CALENDAR GRID ===== */
8442
9253
  --drp-day-size: 3.6rem; /* 36px (10px base) */
8443
9254
  --drp-day-font-size: 1.4rem;
8444
9255
  --drp-day-border-radius: 2px;
8445
9256
  /* Day states */
8446
- --drp-day-text-color: var(--pa-text-primary);
9257
+ --drp-day-text-color: var(--pa-text-color-1);
8447
9258
  --drp-day-bg-hover: rgba(0, 123, 255, 0.12);
8448
9259
  --drp-day-border-hover: transparent;
8449
9260
  /* Today indicator */
@@ -8453,14 +9264,14 @@ web-daterangepicker {
8453
9264
  --drp-day-selected-color: #ffffff;
8454
9265
  /* Range state */
8455
9266
  --drp-day-range-bg: rgba(0, 123, 255, 0.05);
8456
- --drp-day-range-text: var(--pa-text-primary);
9267
+ --drp-day-range-text: var(--pa-text-color-1);
8457
9268
  /* Focused state */
8458
9269
  --drp-day-focused-outline: #007bff;
8459
9270
  /* Disabled state */
8460
- --drp-day-disabled-color: var(--pa-text-secondary);
9271
+ --drp-day-disabled-color: var(--pa-text-color-2);
8461
9272
  --drp-day-disabled-opacity: 0.65;
8462
9273
  /* Other month */
8463
- --drp-day-other-month-color: var(--pa-text-secondary);
9274
+ --drp-day-other-month-color: var(--pa-text-color-2);
8464
9275
  --drp-day-other-month-opacity: 0.5;
8465
9276
  /* ===== BADGES ===== */
8466
9277
  /* Dot badges (original style) */
@@ -8478,11 +9289,11 @@ web-daterangepicker {
8478
9289
  --drp-badge-count-color: #ffffff;
8479
9290
  /* Text badges */
8480
9291
  --drp-badge-text-bg: rgba(0, 123, 255, 0.05);
8481
- --drp-badge-text-color: var(--pa-text-primary);
9292
+ --drp-badge-text-color: var(--pa-text-color-1);
8482
9293
  /* ===== SUMMARY BAR ===== */
8483
9294
  --drp-summary-bg: #f8f9fa;
8484
9295
  --drp-summary-border-color: #e1e5e9;
8485
- --drp-summary-text-color: var(--pa-text-primary);
9296
+ --drp-summary-text-color: var(--pa-text-color-1);
8486
9297
  --drp-summary-count-color: #007bff;
8487
9298
  --drp-summary-padding: 0.8rem 1.2rem;
8488
9299
  --drp-summary-font-size: 1.4rem;
@@ -8515,13 +9326,13 @@ web-daterangepicker {
8515
9326
  --drp-button-gap: 0.8rem;
8516
9327
  /* ===== UNIFIED NAVIGATION ===== */
8517
9328
  /* Range selectors in unified nav */
8518
- --drp-unified-range-text-color: var(--pa-text-primary);
9329
+ --drp-unified-range-text-color: var(--pa-text-color-1);
8519
9330
  --drp-unified-range-bg-hover: rgba(0, 123, 255, 0.12);
8520
9331
  --drp-unified-range-bg-active: rgba(0, 123, 255, 0.05);
8521
9332
  /* Month/Year display */
8522
- --drp-unified-month-color: var(--pa-text-primary);
9333
+ --drp-unified-month-color: var(--pa-text-color-1);
8523
9334
  /* Rolling selector disabled state */
8524
- --drp-unified-rolling-disabled-color: var(--pa-text-secondary);
9335
+ --drp-unified-rolling-disabled-color: var(--pa-text-color-2);
8525
9336
  /* ===== ROLLING SELECTOR ===== */
8526
9337
  --drp-rolling-bg: var(--pa-card-bg);
8527
9338
  --drp-rolling-border: #e1e5e9;
@@ -8530,8 +9341,8 @@ web-daterangepicker {
8530
9341
  --drp-rolling-item-selected-bg: #007bff;
8531
9342
  --drp-rolling-item-selected-text: #ffffff;
8532
9343
  --drp-rolling-font-size: 1.4rem;
8533
- --drp-rolling-item-text-color: var(--pa-text-primary);
8534
- --drp-rolling-item-disabled-color: var(--pa-text-secondary);
9344
+ --drp-rolling-item-text-color: var(--pa-text-color-1);
9345
+ --drp-rolling-item-disabled-color: var(--pa-text-color-2);
8535
9346
  /* ===== LOADING OVERLAY ===== */
8536
9347
  --drp-loading-bg: rgba(255, 255, 255, 0.8);
8537
9348
  --drp-loading-spinner-color: #007bff;
@@ -8540,9 +9351,6 @@ web-daterangepicker {
8540
9351
  --drp-months-gap: 2.4rem;
8541
9352
  }
8542
9353
 
8543
- /* ========================================
8544
- Reset and Base Styles
8545
- ======================================== */
8546
9354
  .pa-file-input {
8547
9355
  display: flex;
8548
9356
  align-items: center;
@@ -8564,7 +9372,7 @@ web-daterangepicker {
8564
9372
  }
8565
9373
  .pa-file-input__filename {
8566
9374
  font-size: 1.4rem;
8567
- color: var(--pa-text-secondary);
9375
+ color: var(--pa-text-color-2);
8568
9376
  overflow: hidden;
8569
9377
  text-overflow: ellipsis;
8570
9378
  white-space: nowrap;
@@ -8608,7 +9416,7 @@ web-daterangepicker {
8608
9416
  }
8609
9417
  .pa-file-dropzone__text {
8610
9418
  font-size: 1.6rem;
8611
- color: var(--pa-text-primary);
9419
+ color: var(--pa-text-color-1);
8612
9420
  margin-bottom: 0.4rem;
8613
9421
  }
8614
9422
  .pa-file-dropzone__text strong {
@@ -8617,7 +9425,7 @@ web-daterangepicker {
8617
9425
  }
8618
9426
  .pa-file-dropzone__hint {
8619
9427
  font-size: 1.2rem;
8620
- color: var(--pa-text-secondary);
9428
+ color: var(--pa-text-color-2);
8621
9429
  }
8622
9430
  .pa-file-dropzone__drop-prompt {
8623
9431
  padding: 1.2rem;
@@ -8625,7 +9433,7 @@ web-daterangepicker {
8625
9433
  margin: -3.2rem -3.2rem 1.2rem -3.2rem;
8626
9434
  text-align: center;
8627
9435
  font-size: 1.4rem;
8628
- color: var(--pa-text-secondary);
9436
+ color: var(--pa-text-color-2);
8629
9437
  }
8630
9438
  .pa-file-dropzone__drop-prompt-icon {
8631
9439
  display: inline-block;
@@ -8660,7 +9468,7 @@ web-daterangepicker {
8660
9468
  }
8661
9469
  .pa-file-dropzone__file-card-name {
8662
9470
  font-size: 1rem;
8663
- color: var(--pa-text-primary);
9471
+ color: var(--pa-text-color-1);
8664
9472
  overflow: hidden;
8665
9473
  text-overflow: ellipsis;
8666
9474
  white-space: nowrap;
@@ -8669,7 +9477,7 @@ web-daterangepicker {
8669
9477
  }
8670
9478
  .pa-file-dropzone__file-card-size {
8671
9479
  font-size: 1rem;
8672
- color: var(--pa-text-secondary);
9480
+ color: var(--pa-text-color-2);
8673
9481
  margin-top: 0.4rem;
8674
9482
  }
8675
9483
  .pa-file-dropzone__file-card-remove {
@@ -8748,7 +9556,7 @@ web-daterangepicker {
8748
9556
  border: none;
8749
9557
  background: transparent;
8750
9558
  font-size: 1.6rem;
8751
- color: var(--pa-text-secondary);
9559
+ color: var(--pa-text-color-2);
8752
9560
  }
8753
9561
  .pa-file-dropzone__summary-line {
8754
9562
  display: inline-block;
@@ -8772,14 +9580,14 @@ web-daterangepicker {
8772
9580
  color: #007bff;
8773
9581
  }
8774
9582
  .pa-file-dropzone__summary-size {
8775
- color: var(--pa-text-secondary);
9583
+ color: var(--pa-text-color-2);
8776
9584
  font-weight: normal;
8777
9585
  }
8778
9586
  .pa-file-dropzone__summary-current {
8779
9587
  display: block;
8780
9588
  margin-top: 0.4rem;
8781
9589
  font-style: italic;
8782
- color: var(--pa-text-primary);
9590
+ color: var(--pa-text-color-1);
8783
9591
  overflow: hidden;
8784
9592
  text-overflow: ellipsis;
8785
9593
  white-space: nowrap;
@@ -8825,14 +9633,14 @@ web-daterangepicker {
8825
9633
  .pa-file-popover__title {
8826
9634
  font-size: 1.6rem;
8827
9635
  font-weight: 600;
8828
- color: var(--pa-text-primary);
9636
+ color: var(--pa-text-color-1);
8829
9637
  }
8830
9638
  .pa-file-popover__close {
8831
9639
  width: 2.4rem;
8832
9640
  height: 2.4rem;
8833
9641
  border: none;
8834
9642
  background: transparent;
8835
- color: var(--pa-text-secondary);
9643
+ color: var(--pa-text-color-2);
8836
9644
  cursor: pointer;
8837
9645
  border-radius: 2px;
8838
9646
  font-size: 2rem;
@@ -8843,8 +9651,8 @@ web-daterangepicker {
8843
9651
  justify-content: center;
8844
9652
  }
8845
9653
  .pa-file-popover__close:hover {
8846
- background: rgba(var(--pa-text-secondary), 0.1);
8847
- color: var(--pa-text-primary);
9654
+ background: rgba(var(--pa-text-color-2), 0.1);
9655
+ color: var(--pa-text-color-1);
8848
9656
  }
8849
9657
  .pa-file-popover__body {
8850
9658
  padding: 1.2rem;
@@ -8866,7 +9674,7 @@ web-daterangepicker {
8866
9674
  text-align: left;
8867
9675
  padding: 0.4rem 0.8rem;
8868
9676
  border-bottom: 1px solid var(--pa-border-color);
8869
- color: var(--pa-text-secondary);
9677
+ color: var(--pa-text-color-2);
8870
9678
  font-weight: 600;
8871
9679
  font-size: 1.2rem;
8872
9680
  text-transform: uppercase;
@@ -8874,7 +9682,7 @@ web-daterangepicker {
8874
9682
  .pa-file-popover__table td {
8875
9683
  padding: 0.4rem 0.8rem;
8876
9684
  border-bottom: 1px solid var(--pa-border-color);
8877
- color: var(--pa-text-primary);
9685
+ color: var(--pa-text-color-1);
8878
9686
  }
8879
9687
  .pa-file-popover__table tbody tr:hover {
8880
9688
  background: rgba(0, 123, 255, 0.05);
@@ -8889,7 +9697,7 @@ web-daterangepicker {
8889
9697
  max-width: 32rem;
8890
9698
  }
8891
9699
  .pa-file-popover__file-size {
8892
- color: var(--pa-text-secondary);
9700
+ color: var(--pa-text-color-2);
8893
9701
  white-space: nowrap;
8894
9702
  }
8895
9703
  .pa-file-popover__progress-cell {
@@ -8910,7 +9718,7 @@ web-daterangepicker {
8910
9718
  }
8911
9719
  .pa-file-popover__progress-text {
8912
9720
  font-size: 1rem;
8913
- color: var(--pa-text-secondary);
9721
+ color: var(--pa-text-color-2);
8914
9722
  }
8915
9723
  .pa-file-popover__status {
8916
9724
  font-size: 1rem;
@@ -8918,7 +9726,7 @@ web-daterangepicker {
8918
9726
  text-transform: uppercase;
8919
9727
  }
8920
9728
  .pa-file-popover__status--pending {
8921
- color: var(--pa-text-secondary);
9729
+ color: var(--pa-text-color-2);
8922
9730
  }
8923
9731
  .pa-file-popover__status--uploading {
8924
9732
  color: #007bff;
@@ -9001,14 +9809,14 @@ web-daterangepicker {
9001
9809
  .pa-file-item__name {
9002
9810
  font-size: 1.4rem;
9003
9811
  font-weight: 600;
9004
- color: var(--pa-text-primary);
9812
+ color: var(--pa-text-color-1);
9005
9813
  overflow: hidden;
9006
9814
  text-overflow: ellipsis;
9007
9815
  white-space: nowrap;
9008
9816
  }
9009
9817
  .pa-file-item__meta {
9010
9818
  font-size: 1.2rem;
9011
- color: var(--pa-text-secondary);
9819
+ color: var(--pa-text-color-2);
9012
9820
  margin-top: 0.4rem;
9013
9821
  }
9014
9822
  .pa-file-item__remove {
@@ -9017,7 +9825,7 @@ web-daterangepicker {
9017
9825
  height: 2.4rem;
9018
9826
  border: none;
9019
9827
  background: transparent;
9020
- color: var(--pa-text-secondary);
9828
+ color: var(--pa-text-color-2);
9021
9829
  cursor: pointer;
9022
9830
  border-radius: 2px;
9023
9831
  font-size: 1.8rem;
@@ -9113,7 +9921,7 @@ web-daterangepicker {
9113
9921
  }
9114
9922
  .pa-file-progress__text {
9115
9923
  font-size: 1.2rem;
9116
- color: var(--pa-text-secondary);
9924
+ color: var(--pa-text-color-2);
9117
9925
  margin-top: 0.4rem;
9118
9926
  display: flex;
9119
9927
  justify-content: space-between;
@@ -9182,9 +9990,6 @@ web-daterangepicker {
9182
9990
  color: #007bff;
9183
9991
  }
9184
9992
 
9185
- /* ========================================
9186
- Reset and Base Styles
9187
- ======================================== */
9188
9993
  /* ========================================
9189
9994
  Checkbox Lists
9190
9995
  Styled checkbox lists with various layouts and features
@@ -9215,7 +10020,7 @@ web-daterangepicker {
9215
10020
  margin: 0;
9216
10021
  cursor: pointer;
9217
10022
  font-size: 1.4rem;
9218
- color: var(--pa-text-primary);
10023
+ color: var(--pa-text-color-1);
9219
10024
  user-select: none;
9220
10025
  width: 100%;
9221
10026
  }
@@ -9238,7 +10043,7 @@ web-daterangepicker {
9238
10043
  display: block;
9239
10044
  margin-top: 0.4rem;
9240
10045
  font-size: 1.2rem;
9241
- color: var(--pa-text-secondary);
10046
+ color: var(--pa-text-color-2);
9242
10047
  }
9243
10048
  .pa-checkbox-list__actions {
9244
10049
  position: absolute;
@@ -9396,9 +10201,6 @@ web-daterangepicker {
9396
10201
  background-color: var(--pa-accent-light);
9397
10202
  }
9398
10203
 
9399
- /* ========================================
9400
- Reset and Base Styles
9401
- ======================================== */
9402
10204
  /* ========================================
9403
10205
  Table Components
9404
10206
  Tables, virtual tables, with striped, hover, and spacing variants
@@ -9427,11 +10229,11 @@ web-daterangepicker {
9427
10229
  .pa-table th {
9428
10230
  background-color: var(--pa-table-header-bg);
9429
10231
  font-weight: 600;
9430
- color: var(--pa-text-primary);
10232
+ color: var(--pa-text-color-1);
9431
10233
  border-bottom: 2px solid var(--pa-border-color);
9432
10234
  }
9433
10235
  .pa-table td {
9434
- color: var(--pa-text-primary);
10236
+ color: var(--pa-text-color-1);
9435
10237
  background-color: var(--pa-table-bg);
9436
10238
  height: 3.5rem0.8rem;
9437
10239
  }
@@ -9526,7 +10328,7 @@ web-daterangepicker {
9526
10328
  text-align: center;
9527
10329
  }
9528
10330
  .pa-pager__text {
9529
- color: var(--pa-text-secondary);
10331
+ color: var(--pa-text-color-2);
9530
10332
  font-size: 1.4rem;
9531
10333
  }
9532
10334
 
@@ -9560,7 +10362,7 @@ web-daterangepicker {
9560
10362
  background-color: transparent;
9561
10363
  border: 1px solid var(--pa-border-color);
9562
10364
  border-radius: 4px;
9563
- color: var(--pa-text-primary);
10365
+ color: var(--pa-text-color-1);
9564
10366
  font-size: 1.4rem;
9565
10367
  cursor: pointer;
9566
10368
  transition: all 0.1s ease-out;
@@ -9588,7 +10390,7 @@ web-daterangepicker {
9588
10390
  color: inherit;
9589
10391
  }
9590
10392
  .pa-load-more__count {
9591
- color: var(--pa-text-secondary);
10393
+ color: var(--pa-text-color-2);
9592
10394
  font-size: 1.2rem;
9593
10395
  margin-left: 0.4rem;
9594
10396
  }
@@ -9618,7 +10420,7 @@ web-daterangepicker {
9618
10420
  font-weight: 600;
9619
10421
  border-right: 1px solid var(--pa-border-color);
9620
10422
  background: var(--pa-table-header-bg);
9621
- color: var(--pa-text-primary);
10423
+ color: var(--pa-text-color-1);
9622
10424
  }
9623
10425
 
9624
10426
  .pa-virtual-table__header-cell:last-child {
@@ -9650,7 +10452,7 @@ web-daterangepicker {
9650
10452
  overflow: hidden;
9651
10453
  text-overflow: ellipsis;
9652
10454
  white-space: nowrap;
9653
- color: var(--pa-text-primary);
10455
+ color: var(--pa-text-color-1);
9654
10456
  background-color: inherit;
9655
10457
  }
9656
10458
 
@@ -9756,7 +10558,7 @@ web-daterangepicker {
9756
10558
  content: attr(data-label);
9757
10559
  display: block;
9758
10560
  font-weight: 600;
9759
- color: var(--pa-text-secondary);
10561
+ color: var(--pa-text-color-2);
9760
10562
  font-size: 1.2rem;
9761
10563
  margin-bottom: 0.4rem;
9762
10564
  text-transform: uppercase;
@@ -9805,9 +10607,6 @@ web-daterangepicker {
9805
10607
  }
9806
10608
  }
9807
10609
 
9808
- /* ========================================
9809
- Reset and Base Styles
9810
- ======================================== */
9811
10610
  /* ========================================
9812
10611
  Comparison Table Component
9813
10612
  Two-column and three-column comparison tables for version control, data changes, and merge operations
@@ -9834,8 +10633,8 @@ web-daterangepicker {
9834
10633
  }
9835
10634
  .pa-comparison-table__label {
9836
10635
  font-weight: 500;
9837
- color: var(--pa-text-secondary);
9838
- background-color: var(--pa-primary-bg);
10636
+ color: var(--pa-text-color-2);
10637
+ background-color: var(--pa-main-bg);
9839
10638
  }
9840
10639
  .pa-comparison-table__value {
9841
10640
  display: flex;
@@ -9891,7 +10690,7 @@ tbody tr:hover .pa-comparison-table__copy {
9891
10690
  .pa-comparison-table__section td {
9892
10691
  background-color: var(--pa-table-header-bg);
9893
10692
  font-weight: 600;
9894
- color: var(--pa-text-secondary);
10693
+ color: var(--pa-text-color-2);
9895
10694
  padding: 0.4rem 1.6rem;
9896
10695
  border-top: 2px solid var(--pa-border-color);
9897
10696
  border-bottom: 1px solid var(--pa-border-color);
@@ -9936,9 +10735,6 @@ tbody tr:hover .pa-comparison-table__copy {
9936
10735
  }
9937
10736
  }
9938
10737
 
9939
- /* ========================================
9940
- Reset and Base Styles
9941
- ======================================== */
9942
10738
  /* Code Component */
9943
10739
  code {
9944
10740
  padding: 0.2rem 0.6rem;
@@ -9955,8 +10751,8 @@ code {
9955
10751
  font-family: "Courier New", Courier, monospace;
9956
10752
  font-size: 1.4rem;
9957
10753
  line-height: 1.8;
9958
- background-color: var(--pa-primary-bg);
9959
- color: var(--pa-text-primary);
10754
+ background-color: var(--pa-main-bg);
10755
+ color: var(--pa-text-color-1);
9960
10756
  border: 1px solid var(--pa-border-color);
9961
10757
  border-radius: 4px;
9962
10758
  overflow-x: auto;
@@ -10020,7 +10816,7 @@ code {
10020
10816
  .pa-code-block__title {
10021
10817
  font-size: 1.4rem;
10022
10818
  font-weight: 600;
10023
- color: var(--pa-text-secondary);
10819
+ color: var(--pa-text-color-2);
10024
10820
  margin: 0;
10025
10821
  }
10026
10822
  .pa-code-block__body {
@@ -10046,7 +10842,7 @@ code {
10046
10842
  }
10047
10843
 
10048
10844
  .pa-code-comment {
10049
- color: var(--pa-text-secondary);
10845
+ color: var(--pa-text-color-2);
10050
10846
  font-style: italic;
10051
10847
  }
10052
10848
 
@@ -10058,9 +10854,6 @@ code {
10058
10854
  color: #dd4a68;
10059
10855
  }
10060
10856
 
10061
- /* ========================================
10062
- Reset and Base Styles
10063
- ======================================== */
10064
10857
  /* ========================================
10065
10858
  Pager and Load More Components
10066
10859
  Pagination controls and load more buttons
@@ -10107,7 +10900,7 @@ code {
10107
10900
  text-align: center;
10108
10901
  }
10109
10902
  .pa-pager__text {
10110
- color: var(--pa-text-secondary);
10903
+ color: var(--pa-text-color-2);
10111
10904
  font-size: 1.4rem;
10112
10905
  }
10113
10906
 
@@ -10141,7 +10934,7 @@ code {
10141
10934
  background-color: transparent;
10142
10935
  border: 1px solid var(--pa-border-color);
10143
10936
  border-radius: 4px;
10144
- color: var(--pa-text-primary);
10937
+ color: var(--pa-text-color-1);
10145
10938
  font-size: 1.4rem;
10146
10939
  cursor: pointer;
10147
10940
  transition: all 0.1s ease-out;
@@ -10169,26 +10962,34 @@ code {
10169
10962
  color: inherit;
10170
10963
  }
10171
10964
  .pa-load-more__count {
10172
- color: var(--pa-text-secondary);
10965
+ color: var(--pa-text-color-2);
10173
10966
  font-size: 1.2rem;
10174
10967
  margin-left: 0.4rem;
10175
10968
  }
10176
10969
 
10177
- /* ========================================
10178
- Reset and Base Styles
10179
- ======================================== */
10180
10970
  /* ========================================
10181
10971
  Profile Panel Components
10182
10972
  Profile panel and header button
10183
10973
  ======================================== */
10974
+ :root {
10975
+ --pa-local-profile-panel-width: 20vw;
10976
+ --pa-local-profile-panel-max-width: 48rem;
10977
+ }
10978
+
10979
+ :where(.pa-profile-panel__content) {
10980
+ width: var(--pa-local-profile-panel-width);
10981
+ max-width: var(--pa-local-profile-panel-max-width);
10982
+ }
10983
+
10184
10984
  .pa-header__profile-btn {
10185
10985
  display: flex;
10186
10986
  align-items: center;
10987
+ gap: 0.4rem;
10187
10988
  background: none;
10188
10989
  border: none;
10189
10990
  padding: 0.4rem 0.8rem;
10190
10991
  border-radius: 4px;
10191
- color: var(--pa-text-primary);
10992
+ color: var(--pa-header-text);
10192
10993
  cursor: pointer;
10193
10994
  font-size: 1.4rem;
10194
10995
  transition: background-color 0.1s ease-out;
@@ -10203,7 +11004,7 @@ code {
10203
11004
 
10204
11005
  .pa-header__profile-name {
10205
11006
  font-weight: 500;
10206
- color: #2c3e50;
11007
+ color: var(--pa-header-profile-name-color);
10207
11008
  }
10208
11009
 
10209
11010
  .pa-profile-panel {
@@ -10238,8 +11039,6 @@ code {
10238
11039
  position: absolute;
10239
11040
  top: 0;
10240
11041
  right: 0;
10241
- width: 20vw;
10242
- max-width: 48rem;
10243
11042
  height: 100vh;
10244
11043
  background-color: var(--pa-card-bg);
10245
11044
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
@@ -10284,7 +11083,7 @@ code {
10284
11083
  margin: 0 0 0.4rem 0;
10285
11084
  font-size: 1.8rem;
10286
11085
  font-weight: 600;
10287
- color: var(--pa-text-primary);
11086
+ color: var(--pa-text-color-1);
10288
11087
  overflow: hidden;
10289
11088
  text-overflow: ellipsis;
10290
11089
  white-space: nowrap;
@@ -10292,7 +11091,7 @@ code {
10292
11091
  .pa-profile-panel__email {
10293
11092
  margin: 0 0 0.8rem 0;
10294
11093
  font-size: 1.4rem;
10295
- color: var(--pa-text-secondary);
11094
+ color: var(--pa-text-color-2);
10296
11095
  overflow: hidden;
10297
11096
  text-overflow: ellipsis;
10298
11097
  white-space: nowrap;
@@ -10320,7 +11119,7 @@ code {
10320
11119
  display: flex;
10321
11120
  align-items: center;
10322
11121
  justify-content: center;
10323
- color: var(--pa-text-secondary);
11122
+ color: var(--pa-text-color-2);
10324
11123
  border-radius: 4px;
10325
11124
  transition: background-color 0.1s ease-out, color 0.1s ease-out;
10326
11125
  }
@@ -10353,7 +11152,7 @@ code {
10353
11152
  align-items: center;
10354
11153
  gap: 1.2rem;
10355
11154
  padding: 0.8rem 1.6rem;
10356
- color: var(--pa-text-primary);
11155
+ color: var(--pa-text-color-1);
10357
11156
  text-decoration: none;
10358
11157
  border-radius: 4px;
10359
11158
  transition: background-color 0.1s ease-out, color 0.1s ease-out;
@@ -10412,6 +11211,9 @@ code {
10412
11211
  color: var(--pa-header-text);
10413
11212
  border-bottom-color: var(--pa-accent);
10414
11213
  }
11214
+ .pa-profile-panel__tabs--icon-only .pa-profile-panel__tab-text {
11215
+ display: none;
11216
+ }
10415
11217
  .pa-profile-panel__favorites ul {
10416
11218
  list-style: none;
10417
11219
  margin: 0;
@@ -10425,7 +11227,7 @@ code {
10425
11227
  align-items: center;
10426
11228
  gap: 1.2rem;
10427
11229
  padding: 0.8rem 1.6rem;
10428
- color: var(--pa-text-primary);
11230
+ color: var(--pa-text-color-1);
10429
11231
  text-decoration: none;
10430
11232
  border-radius: 4px;
10431
11233
  cursor: pointer;
@@ -10457,7 +11259,7 @@ code {
10457
11259
  background: none;
10458
11260
  border: none;
10459
11261
  padding: 0.4rem;
10460
- color: var(--pa-text-secondary);
11262
+ color: var(--pa-text-color-2);
10461
11263
  cursor: pointer;
10462
11264
  border-radius: 4px;
10463
11265
  font-size: 1.4rem;
@@ -10465,7 +11267,7 @@ code {
10465
11267
  transition: opacity 0.1s ease-out, color 0.1s ease-out, background-color 0.1s ease-out;
10466
11268
  }
10467
11269
  .pa-profile-panel__favorite-remove:hover {
10468
- color: var(--pa-danger);
11270
+ color: var(--pa-danger-bg);
10469
11271
  background-color: var(--pa-danger-bg-light);
10470
11272
  }
10471
11273
  .pa-profile-panel__favorite-item:hover .pa-profile-panel__favorite-remove {
@@ -10485,9 +11287,6 @@ code {
10485
11287
  display: none;
10486
11288
  }
10487
11289
  }
10488
- /* ========================================
10489
- Reset and Base Styles
10490
- ======================================== */
10491
11290
  /* ========================================
10492
11291
  Modal Components
10493
11292
  Modal windows with overlay, sizes, and themed headers
@@ -10567,14 +11366,14 @@ code {
10567
11366
  margin: 0;
10568
11367
  font-size: 1.8rem;
10569
11368
  font-weight: 600;
10570
- color: var(--pa-text-primary);
11369
+ color: var(--pa-text-color-1);
10571
11370
  }
10572
11371
 
10573
11372
  .pa-modal__body {
10574
11373
  padding: 1.2rem 1.6rem;
10575
11374
  flex: 1;
10576
11375
  overflow-y: auto;
10577
- color: var(--pa-text-primary);
11376
+ color: var(--pa-text-color-1);
10578
11377
  }
10579
11378
 
10580
11379
  .pa-modal__footer {
@@ -10652,9 +11451,6 @@ code {
10652
11451
  padding: 1.2rem 1.6rem;
10653
11452
  }
10654
11453
  }
10655
- /* ========================================
10656
- Reset and Base Styles
10657
- ======================================== */
10658
11454
  /* ========================================
10659
11455
  Toast Notifications
10660
11456
  Temporary notification messages that auto-dismiss
@@ -10758,13 +11554,13 @@ code {
10758
11554
  .pa-toast__title {
10759
11555
  font-weight: 600;
10760
11556
  margin: 0 0 0.4rem 0;
10761
- color: var(--pa-text-primary);
11557
+ color: var(--pa-text-color-1);
10762
11558
  font-size: 1.4rem;
10763
11559
  }
10764
11560
 
10765
11561
  .pa-toast__message {
10766
11562
  margin: 0;
10767
- color: var(--pa-text-secondary);
11563
+ color: var(--pa-text-color-2);
10768
11564
  font-size: 1.4rem;
10769
11565
  line-height: 1.5;
10770
11566
  }
@@ -10773,7 +11569,7 @@ code {
10773
11569
  flex-shrink: 0;
10774
11570
  background: none;
10775
11571
  border: none;
10776
- color: var(--pa-text-secondary);
11572
+ color: var(--pa-text-color-2);
10777
11573
  cursor: pointer;
10778
11574
  padding: 0;
10779
11575
  width: 2.4rem;
@@ -10788,7 +11584,7 @@ code {
10788
11584
  }
10789
11585
  .pa-toast__close:hover {
10790
11586
  background-color: var(--pa-accent-hover);
10791
- color: var(--pa-text-primary);
11587
+ color: var(--pa-text-color-1);
10792
11588
  }
10793
11589
  .pa-toast__close:focus {
10794
11590
  outline: 2px solid var(--pa-accent);
@@ -10876,9 +11672,6 @@ code {
10876
11672
  max-width: 100%;
10877
11673
  }
10878
11674
  }
10879
- /* ========================================
10880
- Reset and Base Styles
10881
- ======================================== */
10882
11675
  /* ========================================
10883
11676
  Timeline Component
10884
11677
  ======================================== */
@@ -10911,7 +11704,7 @@ code {
10911
11704
  top: 0;
10912
11705
  width: 15px;
10913
11706
  height: 15px;
10914
- background: var(--pa-primary-bg);
11707
+ background: var(--pa-main-bg);
10915
11708
  border: 1px solid #007bff;
10916
11709
  border-radius: 50%;
10917
11710
  box-shadow: 3px 3px 0 rgba(0, 123, 255, 0.3);
@@ -10937,8 +11730,8 @@ code {
10937
11730
  box-shadow: 3px 3px 0 rgba(23, 162, 184, 0.3);
10938
11731
  }
10939
11732
  .pa-timeline--simple .pa-timeline__item--secondary::before {
10940
- border-color: var(--pa-text-secondary);
10941
- box-shadow: 3px 3px 0 rgba(var(--pa-text-secondary), 0.3);
11733
+ border-color: var(--pa-text-color-2);
11734
+ box-shadow: 3px 3px 0 rgba(var(--pa-text-color-2), 0.3);
10942
11735
  }
10943
11736
  .pa-timeline--simple .pa-timeline__item--filled::before {
10944
11737
  background: #007bff;
@@ -10959,18 +11752,18 @@ code {
10959
11752
  background: #17a2b8;
10960
11753
  }
10961
11754
  .pa-timeline--simple .pa-timeline__item--filled.pa-timeline__item--secondary::before {
10962
- background: var(--pa-text-secondary);
11755
+ background: var(--pa-text-color-2);
10963
11756
  }
10964
11757
  .pa-timeline--simple .pa-timeline__time {
10965
11758
  display: block;
10966
11759
  font-size: 1.4rem;
10967
11760
  font-weight: 600;
10968
- color: var(--pa-text-primary);
11761
+ color: var(--pa-text-color-1);
10969
11762
  margin-bottom: 0.4rem;
10970
11763
  }
10971
11764
  .pa-timeline--simple .pa-timeline__content {
10972
11765
  font-size: 1.4rem;
10973
- color: var(--pa-text-secondary);
11766
+ color: var(--pa-text-color-2);
10974
11767
  line-height: 1.8;
10975
11768
  margin-top: 0.6rem;
10976
11769
  }
@@ -11017,7 +11810,7 @@ code {
11017
11810
  height: 16px;
11018
11811
  top: calc(50% - 8px);
11019
11812
  right: -8px;
11020
- background: var(--pa-primary-bg);
11813
+ background: var(--pa-main-bg);
11021
11814
  border: 2px solid #007bff;
11022
11815
  border-radius: 50%;
11023
11816
  z-index: 1;
@@ -11053,7 +11846,7 @@ code {
11053
11846
  height: 16px;
11054
11847
  top: calc(50% - 8px);
11055
11848
  left: -8px;
11056
- background: var(--pa-primary-bg);
11849
+ background: var(--pa-main-bg);
11057
11850
  border: 2px solid #007bff;
11058
11851
  border-radius: 50%;
11059
11852
  z-index: 1;
@@ -11103,7 +11896,7 @@ code {
11103
11896
  margin: 0 0 0.8rem 0;
11104
11897
  font-size: 1.8rem;
11105
11898
  font-weight: 400;
11106
- color: var(--pa-text-primary);
11899
+ color: var(--pa-text-color-1);
11107
11900
  }
11108
11901
  .pa-timeline--alternating .pa-timeline__content p {
11109
11902
  margin: 0;
@@ -11243,7 +12036,7 @@ code {
11243
12036
  .pa-timeline--feed .pa-timeline__content {
11244
12037
  flex: 1;
11245
12038
  font-size: 1.4rem;
11246
- color: var(--pa-text-secondary);
12039
+ color: var(--pa-text-color-2);
11247
12040
  line-height: 1.8;
11248
12041
  }
11249
12042
  .pa-timeline--feed .pa-timeline__content a {
@@ -11255,7 +12048,7 @@ code {
11255
12048
  text-decoration: underline;
11256
12049
  }
11257
12050
  .pa-timeline--feed .pa-timeline__content time {
11258
- color: var(--pa-text-secondary);
12051
+ color: var(--pa-text-color-2);
11259
12052
  font-size: 1.2rem;
11260
12053
  }
11261
12054
  .pa-timeline--feed .pa-timeline__avatar {
@@ -11281,7 +12074,7 @@ code {
11281
12074
  }
11282
12075
  .pa-timeline--feed .pa-timeline__comment p {
11283
12076
  margin: 0 0 0.8rem 0;
11284
- color: var(--pa-text-primary);
12077
+ color: var(--pa-text-color-1);
11285
12078
  line-height: 1.8;
11286
12079
  }
11287
12080
  .pa-timeline--feed .pa-timeline__comment p:last-child {
@@ -11304,7 +12097,7 @@ code {
11304
12097
  .pa-timeline--feed .pa-timeline__date-label {
11305
12098
  font-size: 1.4rem;
11306
12099
  font-weight: 600;
11307
- color: var(--pa-text-primary);
12100
+ color: var(--pa-text-color-1);
11308
12101
  text-transform: uppercase;
11309
12102
  letter-spacing: 0.5px;
11310
12103
  }
@@ -11312,7 +12105,7 @@ code {
11312
12105
  flex-shrink: 0;
11313
12106
  width: 50px;
11314
12107
  font-size: 1.2rem;
11315
- color: var(--pa-text-secondary);
12108
+ color: var(--pa-text-color-2);
11316
12109
  font-weight: 500;
11317
12110
  text-align: right;
11318
12111
  padding-right: 0.8rem;
@@ -11331,16 +12124,13 @@ code {
11331
12124
  .pa-timeline__loader-text {
11332
12125
  margin-top: 0.8rem;
11333
12126
  font-size: 1.4rem;
11334
- color: var(--pa-text-secondary);
12127
+ color: var(--pa-text-color-2);
11335
12128
  }
11336
12129
  .pa-timeline__load-more-wrapper {
11337
12130
  text-align: center;
11338
12131
  margin-top: 2.4rem;
11339
12132
  }
11340
12133
 
11341
- /* ========================================
11342
- Reset and Base Styles
11343
- ======================================== */
11344
12134
  /* ========================================
11345
12135
  Command Palette Component
11346
12136
  macOS Spotlight-style search with context switching
@@ -11419,7 +12209,7 @@ code {
11419
12209
  border: 1px solid var(--pa-border-color);
11420
12210
  border-radius: 4px;
11421
12211
  background-color: var(--pa-input-bg);
11422
- color: var(--pa-text-primary);
12212
+ color: var(--pa-text-color-1);
11423
12213
  outline: none;
11424
12214
  transition: border-color 0.1s ease-out;
11425
12215
  }
@@ -11428,7 +12218,7 @@ code {
11428
12218
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.05);
11429
12219
  }
11430
12220
  .pa-command-palette__input::placeholder {
11431
- color: var(--pa-text-secondary);
12221
+ color: var(--pa-text-color-2);
11432
12222
  opacity: 0.5;
11433
12223
  }
11434
12224
  .pa-command-palette__context {
@@ -11468,7 +12258,7 @@ code {
11468
12258
  .pa-command-palette__empty {
11469
12259
  padding: 4.8rem 0.8rem;
11470
12260
  text-align: center;
11471
- color: var(--pa-text-secondary);
12261
+ color: var(--pa-text-color-2);
11472
12262
  font-size: 1.4rem;
11473
12263
  }
11474
12264
  .pa-command-palette__loader {
@@ -11477,7 +12267,7 @@ code {
11477
12267
  align-items: center;
11478
12268
  justify-content: center;
11479
12269
  gap: 0.8rem;
11480
- color: var(--pa-text-secondary);
12270
+ color: var(--pa-text-color-2);
11481
12271
  font-size: 1.4rem;
11482
12272
  }
11483
12273
  .pa-command-palette__loader .pa-spinner {
@@ -11517,7 +12307,7 @@ code {
11517
12307
  .pa-command-palette__item-title {
11518
12308
  font-size: 1.4rem;
11519
12309
  font-weight: 500;
11520
- color: var(--pa-text-primary);
12310
+ color: var(--pa-text-color-1);
11521
12311
  margin: 0;
11522
12312
  white-space: nowrap;
11523
12313
  overflow: hidden;
@@ -11532,7 +12322,7 @@ code {
11532
12322
  }
11533
12323
  .pa-command-palette__item-meta {
11534
12324
  font-size: 1.2rem;
11535
- color: var(--pa-text-secondary);
12325
+ color: var(--pa-text-color-2);
11536
12326
  margin: 0;
11537
12327
  margin-top: 2px;
11538
12328
  white-space: nowrap;
@@ -11544,7 +12334,7 @@ code {
11544
12334
  font-size: 1.2rem;
11545
12335
  padding: 2px 0.4rem;
11546
12336
  background-color: #e9ecef;
11547
- color: var(--pa-text-secondary);
12337
+ color: var(--pa-text-color-2);
11548
12338
  border-radius: 2px;
11549
12339
  }
11550
12340
  .pa-command-palette__footer {
@@ -11553,7 +12343,7 @@ code {
11553
12343
  display: flex;
11554
12344
  gap: 1.6rem;
11555
12345
  font-size: 1.2rem;
11556
- color: var(--pa-text-secondary);
12346
+ color: var(--pa-text-color-2);
11557
12347
  }
11558
12348
  .pa-command-palette__hint {
11559
12349
  display: flex;
@@ -11565,7 +12355,7 @@ code {
11565
12355
  background-color: #e9ecef;
11566
12356
  border: 1px solid var(--pa-border-color);
11567
12357
  border-radius: 2px;
11568
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
12358
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
11569
12359
  font-weight: 500;
11570
12360
  font-size: 1rem;
11571
12361
  line-height: 1;
@@ -11574,7 +12364,7 @@ code {
11574
12364
  padding: 0.8rem 0.8rem 0.4rem;
11575
12365
  font-size: 1.2rem;
11576
12366
  font-weight: 600;
11577
- color: var(--pa-text-secondary);
12367
+ color: var(--pa-text-color-2);
11578
12368
  text-transform: uppercase;
11579
12369
  letter-spacing: 0.5px;
11580
12370
  }
@@ -11582,7 +12372,7 @@ code {
11582
12372
  padding: 0.4rem 0.8rem;
11583
12373
  text-align: center;
11584
12374
  font-size: 1.2rem;
11585
- color: var(--pa-text-secondary);
12375
+ color: var(--pa-text-color-2);
11586
12376
  border-top: 1px solid var(--pa-border-color);
11587
12377
  }
11588
12378
 
@@ -11664,7 +12454,7 @@ code {
11664
12454
  }
11665
12455
  .pa-navbar-search__placeholder {
11666
12456
  flex: 1;
11667
- color: var(--pa-text-secondary);
12457
+ color: var(--pa-text-color-2);
11668
12458
  white-space: nowrap;
11669
12459
  overflow: hidden;
11670
12460
  text-overflow: ellipsis;
@@ -11682,10 +12472,10 @@ code {
11682
12472
  min-width: 2rem;
11683
12473
  height: 2rem;
11684
12474
  padding: 0 0.4rem;
11685
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
12475
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
11686
12476
  font-size: 1rem;
11687
12477
  font-weight: 500;
11688
- color: var(--pa-text-secondary);
12478
+ color: var(--pa-text-color-2);
11689
12479
  background-color: #e9ecef;
11690
12480
  border: 1px solid var(--pa-border-color);
11691
12481
  border-radius: 2px;
@@ -11721,7 +12511,7 @@ code {
11721
12511
  font-weight: 600;
11722
12512
  text-transform: uppercase;
11723
12513
  letter-spacing: 0.5px;
11724
- color: var(--pa-text-secondary);
12514
+ color: var(--pa-text-color-2);
11725
12515
  margin: 0;
11726
12516
  padding-bottom: 0.4rem;
11727
12517
  border-bottom: 1px solid var(--pa-border-color);
@@ -11755,10 +12545,10 @@ code {
11755
12545
  min-width: 2.4rem;
11756
12546
  height: 2.4rem;
11757
12547
  padding: 0 0.4rem;
11758
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
12548
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
11759
12549
  font-size: 1rem;
11760
12550
  font-weight: 500;
11761
- color: var(--pa-text-primary);
12551
+ color: var(--pa-text-color-1);
11762
12552
  background-color: #e9ecef;
11763
12553
  border: 1px solid var(--pa-border-color);
11764
12554
  border-radius: 2px;
@@ -11766,24 +12556,21 @@ code {
11766
12556
  }
11767
12557
 
11768
12558
  .pa-shortcut-help__separator {
11769
- color: var(--pa-text-secondary);
12559
+ color: var(--pa-text-color-2);
11770
12560
  font-size: 1.2rem;
11771
12561
  }
11772
12562
 
11773
12563
  .pa-shortcut-help__description {
11774
- color: var(--pa-text-primary);
12564
+ color: var(--pa-text-color-1);
11775
12565
  font-size: 1.4rem;
11776
12566
  }
11777
12567
 
11778
12568
  .pa-shortcut-help__empty {
11779
12569
  text-align: center;
11780
- color: var(--pa-text-secondary);
12570
+ color: var(--pa-text-color-2);
11781
12571
  padding: 3.2rem;
11782
12572
  }
11783
12573
 
11784
- /* ========================================
11785
- Reset and Base Styles
11786
- ======================================== */
11787
12574
  /**
11788
12575
  * Logic Tree Renderer - Scratch-style visual query representation
11789
12576
  * Renders nested blocks showing logical flow and precedence
@@ -11793,16 +12580,16 @@ code {
11793
12580
  background: #f9fafb;
11794
12581
  border-radius: 4px;
11795
12582
  min-height: 6.4rem;
11796
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
12583
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
11797
12584
  }
11798
12585
  .pa-logic-tree__empty {
11799
12586
  text-align: center;
11800
- color: var(--pa-text-secondary);
12587
+ color: var(--pa-text-color-2);
11801
12588
  padding: 3.2rem;
11802
12589
  font-style: italic;
11803
12590
  }
11804
12591
  .pa-logic-tree__empty-branch {
11805
- color: var(--pa-text-secondary);
12592
+ color: var(--pa-text-color-2);
11806
12593
  font-style: italic;
11807
12594
  padding: 0.8rem 1.2rem;
11808
12595
  background: #f9fafb;
@@ -11829,7 +12616,7 @@ code {
11829
12616
  }
11830
12617
  .pa-logic-tree__block--condition {
11831
12618
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
11832
- border-color: var(--pa-primary-bg);
12619
+ border-color: var(--pa-main-bg);
11833
12620
  border-left-width: 6.4px;
11834
12621
  }
11835
12622
  .pa-logic-tree__block--logical {
@@ -11929,7 +12716,7 @@ code {
11929
12716
  .pa-logic-tree__group-label {
11930
12717
  font-weight: 500;
11931
12718
  font-size: 1.4rem;
11932
- color: var(--pa-text-secondary);
12719
+ color: var(--pa-text-color-2);
11933
12720
  margin-bottom: 0.8rem;
11934
12721
  padding-bottom: 0.8rem;
11935
12722
  border-bottom: 1.6px dashed #e1e5e9;
@@ -11999,9 +12786,6 @@ code {
11999
12786
  opacity: 1;
12000
12787
  }
12001
12788
  }
12002
- /* ========================================
12003
- Reset and Base Styles
12004
- ======================================== */
12005
12789
  /* ========================================
12006
12790
  Notification Bell Component
12007
12791
  Bell button with badge counter and dropdown panel
@@ -12021,7 +12805,7 @@ code {
12021
12805
  background: none;
12022
12806
  border: none;
12023
12807
  border-radius: 4px;
12024
- color: var(--pa-text-primary);
12808
+ color: var(--pa-header-text);
12025
12809
  cursor: pointer;
12026
12810
  transition: background-color 0.1s ease-out;
12027
12811
  }
@@ -12087,7 +12871,7 @@ code {
12087
12871
  margin: 0;
12088
12872
  font-size: 1.4rem;
12089
12873
  font-weight: 600;
12090
- color: var(--pa-text-primary);
12874
+ color: var(--pa-text-color-1);
12091
12875
  }
12092
12876
 
12093
12877
  .pa-notifications__mark-read {
@@ -12162,8 +12946,8 @@ code {
12162
12946
  color: #dc3545;
12163
12947
  }
12164
12948
  .pa-notifications__icon-wrapper--secondary {
12165
- background-color: rgba(var(--pa-text-secondary), 0.1);
12166
- color: var(--pa-text-secondary);
12949
+ background-color: rgba(var(--pa-text-color-2), 0.1);
12950
+ color: var(--pa-text-color-2);
12167
12951
  }
12168
12952
 
12169
12953
  .pa-notifications__content {
@@ -12174,12 +12958,12 @@ code {
12174
12958
  margin: 0 0 0.2rem 0;
12175
12959
  font-size: 1.2rem;
12176
12960
  font-weight: 600;
12177
- color: var(--pa-text-primary);
12961
+ color: var(--pa-text-color-1);
12178
12962
  }
12179
12963
  .pa-notifications__content p {
12180
12964
  margin: 0 0 0.2rem 0;
12181
12965
  font-size: 1.2rem;
12182
- color: var(--pa-text-secondary);
12966
+ color: var(--pa-text-color-2);
12183
12967
  line-height: 1.3;
12184
12968
  overflow: hidden;
12185
12969
  text-overflow: ellipsis;
@@ -12190,7 +12974,7 @@ code {
12190
12974
 
12191
12975
  .pa-notifications__time {
12192
12976
  font-size: 1rem;
12193
- color: var(--pa-text-secondary);
12977
+ color: var(--pa-text-color-2);
12194
12978
  font-weight: 400;
12195
12979
  opacity: 0.7;
12196
12980
  }
@@ -12218,9 +13002,55 @@ code {
12218
13002
  right: -1.6rem;
12219
13003
  }
12220
13004
  }
12221
- /* ========================================
12222
- Reset and Base Styles
12223
- ======================================== */
13005
+ .pa-notifications__list--page {
13006
+ max-height: none;
13007
+ overflow: visible;
13008
+ }
13009
+ .pa-notifications__list--page .pa-notifications__item {
13010
+ padding: 1.6rem 2.4rem;
13011
+ }
13012
+ .pa-notifications__list--page .pa-notifications__icon-wrapper {
13013
+ width: 4rem;
13014
+ height: 4rem;
13015
+ font-size: 1.8rem;
13016
+ }
13017
+ .pa-notifications__list--page .pa-notifications__content h4 {
13018
+ font-size: 1.4rem;
13019
+ margin-bottom: 0.4rem;
13020
+ }
13021
+ .pa-notifications__list--page .pa-notifications__content p {
13022
+ font-size: 1.4rem;
13023
+ -webkit-line-clamp: 3;
13024
+ }
13025
+ .pa-notifications__list--page .pa-notifications__time {
13026
+ font-size: 1.2rem;
13027
+ }
13028
+
13029
+ .pa-notifications__actions {
13030
+ display: flex;
13031
+ gap: 0.4rem;
13032
+ flex-shrink: 0;
13033
+ opacity: 0;
13034
+ transition: opacity 0.1s ease-out;
13035
+ }
13036
+
13037
+ .pa-notifications__item:hover .pa-notifications__actions {
13038
+ opacity: 1;
13039
+ }
13040
+
13041
+ @media (max-width: 768px) {
13042
+ .pa-notifications__list--page .pa-notifications__item {
13043
+ flex-wrap: wrap;
13044
+ }
13045
+ .pa-notifications__list--page .pa-notifications__actions {
13046
+ opacity: 1;
13047
+ width: 100%;
13048
+ justify-content: flex-end;
13049
+ margin-top: 0.8rem;
13050
+ padding-top: 0.8rem;
13051
+ border-top: 1px solid var(--pa-border-color);
13052
+ }
13053
+ }
12224
13054
  /* ========================================
12225
13055
  Popconfirm Component
12226
13056
  Small confirmation dialog anchored to trigger button
@@ -12262,7 +13092,7 @@ code {
12262
13092
  .pa-popconfirm__message p {
12263
13093
  margin: 0;
12264
13094
  font-size: 1.4rem;
12265
- color: var(--pa-text-primary);
13095
+ color: var(--pa-text-color-1);
12266
13096
  line-height: 1.5;
12267
13097
  }
12268
13098
 
@@ -12355,9 +13185,6 @@ code {
12355
13185
  padding: 0.4rem 0.8rem;
12356
13186
  }
12357
13187
 
12358
- /* ========================================
12359
- Reset and Base Styles
12360
- ======================================== */
12361
13188
  /* ========================================
12362
13189
  Settings Panel Component
12363
13190
  Floating panel for global settings management
@@ -12394,7 +13221,7 @@ code {
12394
13221
  right: 325px;
12395
13222
  }
12396
13223
  .pa-settings-panel__content {
12397
- background: var(--pa-content-bg);
13224
+ background: var(--pa-subtle-bg);
12398
13225
  border: 1px solid var(--pa-border-color);
12399
13226
  border-right: none;
12400
13227
  border-radius: 4px 0 0 4px;
@@ -12410,7 +13237,7 @@ code {
12410
13237
  margin: 0 0 2.4rem 0;
12411
13238
  padding-bottom: 1.2rem;
12412
13239
  border-bottom: 2px solid var(--pa-border-color);
12413
- color: var(--pa-text-primary);
13240
+ color: var(--pa-text-color-1);
12414
13241
  font-size: 1.8rem;
12415
13242
  font-weight: 600;
12416
13243
  }
@@ -12423,7 +13250,7 @@ code {
12423
13250
  .pa-settings-panel__label {
12424
13251
  display: block;
12425
13252
  margin-bottom: 0.8rem;
12426
- color: var(--pa-text-primary);
13253
+ color: var(--pa-text-color-1);
12427
13254
  font-size: 1.4rem;
12428
13255
  font-weight: 500;
12429
13256
  }
@@ -12433,7 +13260,7 @@ code {
12433
13260
  border: 1px solid var(--pa-border-color);
12434
13261
  border-radius: 4px;
12435
13262
  background: var(--pa-input-bg);
12436
- color: var(--pa-text-primary);
13263
+ color: var(--pa-text-color-1);
12437
13264
  font-size: 1.4rem;
12438
13265
  cursor: pointer;
12439
13266
  }
@@ -12451,7 +13278,7 @@ code {
12451
13278
  display: flex;
12452
13279
  align-items: center;
12453
13280
  cursor: pointer;
12454
- color: var(--pa-text-primary);
13281
+ color: var(--pa-text-color-1);
12455
13282
  font-size: 1.4rem;
12456
13283
  }
12457
13284
  .pa-settings-panel__checkbox input[type=checkbox] {
@@ -12469,9 +13296,6 @@ code {
12469
13296
  transform: rotate(180deg);
12470
13297
  }
12471
13298
 
12472
- /* ========================================
12473
- Reset and Base Styles
12474
- ======================================== */
12475
13299
  /* ========================================
12476
13300
  Utility Components
12477
13301
  Font utilities, compact mode, component showcase
@@ -12686,6 +13510,21 @@ html.font-size-4xl {
12686
13510
  overflow: visible;
12687
13511
  }
12688
13512
 
13513
+ .overflow-overlay {
13514
+ overflow: auto;
13515
+ overflow: overlay;
13516
+ }
13517
+
13518
+ .overflow-y-overlay {
13519
+ overflow-y: auto;
13520
+ overflow-y: overlay;
13521
+ }
13522
+
13523
+ .overflow-x-overlay {
13524
+ overflow-x: auto;
13525
+ overflow-x: overlay;
13526
+ }
13527
+
12689
13528
  .cursor-pointer {
12690
13529
  cursor: pointer;
12691
13530
  }
@@ -12732,7 +13571,7 @@ html.font-size-4xl {
12732
13571
 
12733
13572
  .pa-text {
12734
13573
  font-size: 1.4rem;
12735
- color: var(--pa-text-primary);
13574
+ color: var(--pa-text-color-1);
12736
13575
  }
12737
13576
  .pa-text--xs {
12738
13577
  font-size: 1rem;
@@ -12747,10 +13586,10 @@ html.font-size-4xl {
12747
13586
  font-size: 1.8rem;
12748
13587
  }
12749
13588
  .pa-text--primary {
12750
- color: var(--pa-text-primary);
13589
+ color: var(--pa-text-color-1);
12751
13590
  }
12752
13591
  .pa-text--secondary {
12753
- color: var(--pa-text-secondary);
13592
+ color: var(--pa-text-color-2);
12754
13593
  }
12755
13594
  .pa-text--left {
12756
13595
  text-align: left;
@@ -12763,7 +13602,7 @@ html.font-size-4xl {
12763
13602
  }
12764
13603
  .pa-text--caption {
12765
13604
  font-size: 1.2rem;
12766
- color: var(--pa-text-secondary);
13605
+ color: var(--pa-text-color-2);
12767
13606
  margin-bottom: 0.8rem;
12768
13607
  }
12769
13608
  .pa-text--lead {
@@ -12775,34 +13614,98 @@ html.font-size-4xl {
12775
13614
  gap: 0;
12776
13615
  }
12777
13616
 
13617
+ .row-gap-0 {
13618
+ row-gap: 0;
13619
+ }
13620
+
13621
+ .column-gap-0 {
13622
+ column-gap: 0;
13623
+ }
13624
+
12778
13625
  .gap-xs {
12779
13626
  gap: 0.4rem;
12780
13627
  }
12781
13628
 
13629
+ .row-gap-xs {
13630
+ row-gap: 0.4rem;
13631
+ }
13632
+
13633
+ .column-gap-xs {
13634
+ column-gap: 0.4rem;
13635
+ }
13636
+
12782
13637
  .gap-sm {
12783
13638
  gap: 0.8rem;
12784
13639
  }
12785
13640
 
13641
+ .row-gap-sm {
13642
+ row-gap: 0.8rem;
13643
+ }
13644
+
13645
+ .column-gap-sm {
13646
+ column-gap: 0.8rem;
13647
+ }
13648
+
12786
13649
  .gap-md {
12787
13650
  gap: 1.2rem;
12788
13651
  }
12789
13652
 
13653
+ .row-gap-md {
13654
+ row-gap: 1.2rem;
13655
+ }
13656
+
13657
+ .column-gap-md {
13658
+ column-gap: 1.2rem;
13659
+ }
13660
+
12790
13661
  .gap-base {
12791
13662
  gap: 1.6rem;
12792
13663
  }
12793
13664
 
13665
+ .row-gap-base {
13666
+ row-gap: 1.6rem;
13667
+ }
13668
+
13669
+ .column-gap-base {
13670
+ column-gap: 1.6rem;
13671
+ }
13672
+
12794
13673
  .gap-lg {
12795
13674
  gap: 2.4rem;
12796
13675
  }
12797
13676
 
13677
+ .row-gap-lg {
13678
+ row-gap: 2.4rem;
13679
+ }
13680
+
13681
+ .column-gap-lg {
13682
+ column-gap: 2.4rem;
13683
+ }
13684
+
12798
13685
  .gap-xl {
12799
13686
  gap: 3.2rem;
12800
13687
  }
12801
13688
 
13689
+ .row-gap-xl {
13690
+ row-gap: 3.2rem;
13691
+ }
13692
+
13693
+ .column-gap-xl {
13694
+ column-gap: 3.2rem;
13695
+ }
13696
+
12802
13697
  .gap-2xl {
12803
13698
  gap: 4.8rem;
12804
13699
  }
12805
13700
 
13701
+ .row-gap-2xl {
13702
+ row-gap: 4.8rem;
13703
+ }
13704
+
13705
+ .column-gap-2xl {
13706
+ column-gap: 4.8rem;
13707
+ }
13708
+
12806
13709
  .gap-1 {
12807
13710
  gap: 0.1rem;
12808
13711
  }
@@ -12847,54 +13750,6 @@ html.font-size-4xl {
12847
13750
  gap: 2rem;
12848
13751
  }
12849
13752
 
12850
- .row-gap-0 {
12851
- row-gap: 0;
12852
- }
12853
-
12854
- .row-gap-xs {
12855
- row-gap: 0.4rem;
12856
- }
12857
-
12858
- .row-gap-sm {
12859
- row-gap: 0.8rem;
12860
- }
12861
-
12862
- .row-gap-md {
12863
- row-gap: 1.2rem;
12864
- }
12865
-
12866
- .row-gap-base {
12867
- row-gap: 1.6rem;
12868
- }
12869
-
12870
- .row-gap-lg {
12871
- row-gap: 2.4rem;
12872
- }
12873
-
12874
- .column-gap-0 {
12875
- column-gap: 0;
12876
- }
12877
-
12878
- .column-gap-xs {
12879
- column-gap: 0.4rem;
12880
- }
12881
-
12882
- .column-gap-sm {
12883
- column-gap: 0.8rem;
12884
- }
12885
-
12886
- .column-gap-md {
12887
- column-gap: 1.2rem;
12888
- }
12889
-
12890
- .column-gap-base {
12891
- column-gap: 1.6rem;
12892
- }
12893
-
12894
- .column-gap-lg {
12895
- column-gap: 2.4rem;
12896
- }
12897
-
12898
13753
  .self-start {
12899
13754
  align-self: flex-start;
12900
13755
  }
@@ -12955,6 +13810,12 @@ html.font-size-4xl {
12955
13810
  font-size: 3.2rem;
12956
13811
  }
12957
13812
 
13813
+ .text-truncate {
13814
+ overflow: hidden;
13815
+ text-overflow: ellipsis;
13816
+ white-space: nowrap;
13817
+ }
13818
+
12958
13819
  .component-showcase {
12959
13820
  display: flex;
12960
13821
  flex-wrap: wrap;