@keenmate/pure-admin-core 1.0.0 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (77) hide show
  1. package/README.md +85 -7
  2. package/dist/css/main.css +970 -434
  3. package/package.json +1 -1
  4. package/snippets/customization.html +1 -1
  5. package/snippets/forms.html +65 -8
  6. package/snippets/layout.html +4 -4
  7. package/snippets/manifest.json +329 -219
  8. package/snippets/profile.html +51 -3
  9. package/src/scss/_base-css-variables.scss +432 -422
  10. package/src/scss/_core.scss +105 -105
  11. package/src/scss/_fonts.scss +0 -14
  12. package/src/scss/_variables.scss +12 -14
  13. package/src/scss/core-components/_alerts.scss +7 -7
  14. package/src/scss/core-components/_base.scss +3 -3
  15. package/src/scss/core-components/_buttons.scss +425 -425
  16. package/src/scss/core-components/_callouts.scss +139 -139
  17. package/src/scss/core-components/_cards.scss +321 -321
  18. package/src/scss/core-components/_checkbox-lists.scss +2 -2
  19. package/src/scss/core-components/_code.scss +4 -4
  20. package/src/scss/core-components/_command-palette.scss +518 -518
  21. package/src/scss/core-components/_comparison.scss +3 -3
  22. package/src/scss/core-components/_file-selector.scss +780 -780
  23. package/src/scss/core-components/_forms.scss +16 -16
  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 +7 -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 -389
  32. package/src/scss/core-components/_scrollbars.scss +40 -40
  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 +11 -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 +33 -4
  46. package/src/scss/core-components/forms/_form-layout.scss +2 -2
  47. package/src/scss/core-components/forms/_form-states.scss +27 -1
  48. package/src/scss/core-components/forms/_input-wrapper.scss +1 -1
  49. package/src/scss/core-components/forms/_query-editor.scss +17 -17
  50. package/src/scss/core-components/layout/_layout-container.scss +1 -1
  51. package/src/scss/core-components/layout/_navbar-elements.scss +1 -1
  52. package/src/scss/core-components/layout/_sidebar.scss +5 -5
  53. package/src/scss/utilities.scss +24 -0
  54. package/src/scss/variables/_base.scss +20 -10
  55. package/src/scss/variables/_colors.scss +7 -6
  56. package/src/scss/variables/_components.scss +8 -11
  57. package/src/scss/variables/_index.scss +11 -7
  58. package/src/scss/variables/_spacing.scss +12 -0
  59. package/src/scss/variables/_typography.scss +2 -2
  60. package/dist/fonts/Delivery/Delivery_W_Bd.woff2 +0 -0
  61. package/dist/fonts/Delivery/Delivery_W_BdIt.woff2 +0 -0
  62. package/dist/fonts/Delivery/Delivery_W_CdBlk.woff2 +0 -0
  63. package/dist/fonts/Delivery/Delivery_W_CdLt.woff2 +0 -0
  64. package/dist/fonts/Delivery/Delivery_W_It.woff2 +0 -0
  65. package/dist/fonts/Delivery/Delivery_W_Lt.woff2 +0 -0
  66. package/dist/fonts/Delivery/Delivery_W_LtIt.woff2 +0 -0
  67. package/dist/fonts/Delivery/Delivery_W_Rg.woff2 +0 -0
  68. package/src/scss/themes/_dark-base.scss +0 -207
  69. package/src/scss/themes/audi-light.scss +0 -341
  70. package/src/scss/themes/audi.scss +0 -303
  71. package/src/scss/themes/corporate.scss +0 -229
  72. package/src/scss/themes/dark-blue.scss +0 -165
  73. package/src/scss/themes/dark-green.scss +0 -169
  74. package/src/scss/themes/dark-red.scss +0 -173
  75. package/src/scss/themes/dark.scss +0 -158
  76. package/src/scss/themes/express.scss +0 -294
  77. 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
  }
@@ -2113,9 +2595,6 @@
2113
2595
  /* ========================================
2114
2596
  Reset and Base Styles
2115
2597
  ======================================== */
2116
- /* Pure Admin Visual Framework - Core Styles */
2117
- /* Pure Admin Visual Framework - SCSS Variables Only */
2118
- /* NOTE: 10px rem base - all rem values are now in 10px units (1rem = 10px) */
2119
2598
  html {
2120
2599
  font-size: 10px;
2121
2600
  }
@@ -2181,10 +2660,10 @@ figure {
2181
2660
  body {
2182
2661
  margin: 0;
2183
2662
  padding: 0;
2184
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2663
+ font-family: var(--base-font-family);
2185
2664
  font-size: 1.6rem;
2186
- color: var(--pa-text-primary);
2187
- background-color: var(--pa-primary-bg);
2665
+ color: var(--pa-text-color-1);
2666
+ background-color: var(--pa-main-bg);
2188
2667
  line-height: 1.5;
2189
2668
  overflow-x: hidden;
2190
2669
  overflow-y: scroll;
@@ -2215,9 +2694,6 @@ label {
2215
2694
  font-size: inherit;
2216
2695
  }
2217
2696
 
2218
- /* ========================================
2219
- Reset and Base Styles
2220
- ======================================== */
2221
2697
  /* Webkit browsers (Chrome, Safari, Edge) */
2222
2698
  *::-webkit-scrollbar {
2223
2699
  width: 6px;
@@ -2225,14 +2701,14 @@ label {
2225
2701
  }
2226
2702
 
2227
2703
  *::-webkit-scrollbar-track {
2228
- background: var(--pa-primary-bg);
2704
+ background: var(--pa-main-bg);
2229
2705
  border-radius: 3px;
2230
2706
  }
2231
2707
 
2232
2708
  *::-webkit-scrollbar-thumb {
2233
2709
  background: var(--pa-border-color);
2234
2710
  border-radius: 3px;
2235
- border: 1px solid var(--pa-primary-bg);
2711
+ border: 1px solid var(--pa-main-bg);
2236
2712
  }
2237
2713
  *::-webkit-scrollbar-thumb:hover {
2238
2714
  background: var(--pa-accent);
@@ -2242,13 +2718,13 @@ label {
2242
2718
  }
2243
2719
 
2244
2720
  *::-webkit-scrollbar-corner {
2245
- background: var(--pa-primary-bg);
2721
+ background: var(--pa-main-bg);
2246
2722
  }
2247
2723
 
2248
2724
  /* Firefox */
2249
2725
  * {
2250
2726
  scrollbar-width: thin;
2251
- scrollbar-color: var(--pa-border-color) var(--pa-primary-bg);
2727
+ scrollbar-color: var(--pa-border-color) var(--pa-main-bg);
2252
2728
  }
2253
2729
 
2254
2730
  /* ========================================
@@ -2258,9 +2734,6 @@ label {
2258
2734
  Layout Index
2259
2735
  Central import point for all layout component modules
2260
2736
  ======================================== */
2261
- /* ========================================
2262
- Reset and Base Styles
2263
- ======================================== */
2264
2737
  /* ========================================
2265
2738
  Navbar Component
2266
2739
  Fixed navbar and constrained container widths
@@ -2349,9 +2822,6 @@ body.pa-container-2xl .pa-navbar {
2349
2822
  flex-shrink: 0;
2350
2823
  }
2351
2824
 
2352
- /* ========================================
2353
- Reset and Base Styles
2354
- ======================================== */
2355
2825
  /* ========================================
2356
2826
  Layout Container
2357
2827
  Main layout wrapper, content areas, sticky/scroll modes
@@ -2364,7 +2834,7 @@ body.pa-layout--sticky {
2364
2834
  .pa-layout {
2365
2835
  max-width: 100%;
2366
2836
  margin: 4.8rem auto 0;
2367
- background-color: var(--pa-primary-bg);
2837
+ background-color: var(--pa-main-bg);
2368
2838
  overflow: visible;
2369
2839
  display: flex;
2370
2840
  flex-direction: column;
@@ -2499,21 +2969,18 @@ body.pa-layout--sticky .pa-layout__inner {
2499
2969
  align-items: flex-end;
2500
2970
  }
2501
2971
  }
2502
- /* ========================================
2503
- Reset and Base Styles
2504
- ======================================== */
2505
2972
  /* ========================================
2506
2973
  Sidebar Component
2507
2974
  Sidebar navigation with nested submenus
2508
2975
  ======================================== */
2509
2976
  :root {
2510
- --pa-sidebar-width: 28.8rem;
2511
- --pa-sidebar-min-width: 18rem;
2512
- --pa-sidebar-max-width: 50rem;
2977
+ --pa-local-sidebar-width: 28.8rem;
2978
+ --pa-local-sidebar-min-width: 18rem;
2979
+ --pa-local-sidebar-max-width: 50rem;
2513
2980
  }
2514
2981
 
2515
2982
  :where(.pa-layout__sidebar) {
2516
- width: var(--pa-sidebar-width);
2983
+ width: var(--pa-local-sidebar-width);
2517
2984
  }
2518
2985
 
2519
2986
  .pa-layout__sidebar {
@@ -2682,9 +3149,6 @@ body.loaded .pa-sidebar__chevron {
2682
3149
  transform: rotate(90deg);
2683
3150
  }
2684
3151
 
2685
- /* ========================================
2686
- Reset and Base Styles
2687
- ======================================== */
2688
3152
  /* ========================================
2689
3153
  Sidebar States
2690
3154
  Hidden, icon-collapse, and expanded states
@@ -2883,9 +3347,6 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
2883
3347
  width: 2.4rem;
2884
3348
  }
2885
3349
 
2886
- /* ========================================
2887
- Reset and Base Styles
2888
- ======================================== */
2889
3350
  /* ========================================
2890
3351
  Navbar/Header Elements
2891
3352
  Burger menu, brand, navigation, title, profile button, theme switcher
@@ -2983,7 +3444,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
2983
3444
  .pa-header__dropdown li a {
2984
3445
  display: block;
2985
3446
  padding: 0.8rem 1.6rem;
2986
- color: var(--pa-text-primary);
3447
+ color: var(--pa-text-color-1);
2987
3448
  border-radius: 0;
2988
3449
  white-space: nowrap;
2989
3450
  text-decoration: none;
@@ -3072,9 +3533,6 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
3072
3533
  border-color: var(--pa-accent);
3073
3534
  }
3074
3535
 
3075
- /* ========================================
3076
- Reset and Base Styles
3077
- ======================================== */
3078
3536
  /* ========================================
3079
3537
  Layout Responsive
3080
3538
  Mobile and tablet media queries
@@ -3145,9 +3603,6 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
3145
3603
  font-size: 1.4rem;
3146
3604
  }
3147
3605
  }
3148
- /* ========================================
3149
- Reset and Base Styles
3150
- ======================================== */
3151
3606
  .pa-row {
3152
3607
  display: flex;
3153
3608
  flex-wrap: wrap;
@@ -4753,9 +5208,6 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
4753
5208
  max-width: 100%;
4754
5209
  }
4755
5210
  }
4756
- /* ========================================
4757
- Reset and Base Styles
4758
- ======================================== */
4759
5211
  /* ========================================
4760
5212
  Card Components
4761
5213
  Cards with headers, bodies, footers, variants, and card sections
@@ -4808,7 +5260,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
4808
5260
  .pa-card__header h4,
4809
5261
  .pa-card__header h5,
4810
5262
  .pa-card__header h6 {
4811
- color: var(--pa-text-primary);
5263
+ color: var(--pa-text-color-1);
4812
5264
  font-size: 1.6rem;
4813
5265
  }
4814
5266
  .pa-card__header .pa-btn {
@@ -4832,7 +5284,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
4832
5284
  text-overflow: ellipsis;
4833
5285
  white-space: nowrap;
4834
5286
  margin: 0;
4835
- color: var(--pa-text-primary);
5287
+ color: var(--pa-text-color-1);
4836
5288
  font-size: 1.6rem;
4837
5289
  font-weight: 600;
4838
5290
  line-height: 1;
@@ -4867,7 +5319,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
4867
5319
  gap: 0.8rem;
4868
5320
  }
4869
5321
  .pa-card__meta {
4870
- color: var(--pa-text-secondary);
5322
+ color: var(--pa-text-color-2);
4871
5323
  font-size: 1.4rem;
4872
5324
  }
4873
5325
  .pa-card--primary {
@@ -4942,13 +5394,13 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
4942
5394
  padding: 1.2rem 1rem;
4943
5395
  border: none;
4944
5396
  background: none;
4945
- color: var(--pa-text-secondary);
5397
+ color: var(--pa-text-color-2);
4946
5398
  cursor: pointer;
4947
5399
  transition: all 0.1s ease-out;
4948
5400
  border-bottom: 2px solid transparent;
4949
5401
  }
4950
5402
  .pa-card__tab:hover {
4951
- color: var(--pa-text-primary);
5403
+ color: var(--pa-text-color-1);
4952
5404
  background-color: rgba(0, 123, 255, 0.05);
4953
5405
  }
4954
5406
  .pa-card__tab--active {
@@ -4974,13 +5426,13 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
4974
5426
  border-radius: 4px;
4975
5427
  font-size: 1.4rem;
4976
5428
  background: transparent;
4977
- color: var(--pa-text-secondary);
5429
+ color: var(--pa-text-color-2);
4978
5430
  cursor: pointer;
4979
5431
  transition: all 0.1s ease-out;
4980
5432
  }
4981
5433
  .pa-card__tabs--inline .pa-card__tab:hover {
4982
5434
  background-color: rgba(0, 123, 255, 0.05);
4983
- color: var(--pa-text-primary);
5435
+ color: var(--pa-text-color-1);
4984
5436
  }
4985
5437
  .pa-card__tabs--inline .pa-card__tab--active {
4986
5438
  background: var(--pa-accent);
@@ -4996,32 +5448,29 @@ a.pa-card:hover, a.pa-card:visited {
4996
5448
  color: inherit;
4997
5449
  }
4998
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 {
4999
- color: var(--pa-text-primary);
5451
+ color: var(--pa-text-color-1);
5000
5452
  }
5001
5453
  a.pa-card p {
5002
- color: var(--pa-text-secondary);
5454
+ color: var(--pa-text-color-2);
5003
5455
  }
5004
5456
 
5005
5457
  .pa-section {
5006
5458
  margin-bottom: 3.2rem;
5007
5459
  }
5008
5460
  .pa-section h3 {
5009
- color: var(--pa-text-primary);
5461
+ color: var(--pa-text-color-1);
5010
5462
  margin-bottom: 1.6rem;
5011
5463
  border-bottom: 2px solid var(--pa-accent);
5012
5464
  padding-bottom: 0.8rem;
5013
5465
  }
5014
5466
 
5015
5467
  .pa-section-title {
5016
- color: var(--pa-text-primary);
5468
+ color: var(--pa-text-color-1);
5017
5469
  margin-bottom: 1.6rem;
5018
5470
  border-bottom: 2px solid var(--pa-accent);
5019
5471
  padding-bottom: 0.8rem;
5020
5472
  }
5021
5473
 
5022
- /* ========================================
5023
- Reset and Base Styles
5024
- ======================================== */
5025
5474
  /* ========================================
5026
5475
  Tabs Component
5027
5476
  Standalone tabs for organizing content into separate sections
@@ -5037,7 +5486,7 @@ a.pa-card p {
5037
5486
  padding: 0.8rem 1.2rem;
5038
5487
  border: none;
5039
5488
  background: none;
5040
- color: var(--pa-text-secondary);
5489
+ color: var(--pa-text-color-2);
5041
5490
  cursor: pointer;
5042
5491
  transition: all 0.1s ease-out;
5043
5492
  border-bottom: 2px solid transparent;
@@ -5048,7 +5497,7 @@ a.pa-card p {
5048
5497
  white-space: nowrap;
5049
5498
  }
5050
5499
  .pa-tabs__item:hover {
5051
- color: var(--pa-text-primary);
5500
+ color: var(--pa-text-color-1);
5052
5501
  background-color: rgba(0, 123, 255, 0.05);
5053
5502
  }
5054
5503
  .pa-tabs__item--active {
@@ -5076,12 +5525,12 @@ a.pa-card p {
5076
5525
  .pa-tabs--pills .pa-tabs__item {
5077
5526
  border-radius: 8px;
5078
5527
  border: 1px solid transparent;
5079
- background-color: var(--pa-primary-bg);
5528
+ background-color: var(--pa-main-bg);
5080
5529
  }
5081
5530
  .pa-tabs--pills .pa-tabs__item:hover {
5082
5531
  background-color: rgba(0, 123, 255, 0.1);
5083
5532
  border-color: rgba(0, 123, 255, 0.3);
5084
- color: var(--pa-text-primary);
5533
+ color: var(--pa-text-color-1);
5085
5534
  }
5086
5535
  .pa-tabs--pills .pa-tabs__item--active {
5087
5536
  background-color: var(--pa-accent);
@@ -5092,7 +5541,7 @@ a.pa-card p {
5092
5541
  border: 1px solid var(--pa-border-color);
5093
5542
  border-radius: 8px;
5094
5543
  padding: 0.4rem;
5095
- background-color: var(--pa-primary-bg);
5544
+ background-color: var(--pa-main-bg);
5096
5545
  gap: 0.4rem;
5097
5546
  }
5098
5547
  .pa-tabs--boxed .pa-tabs__item {
@@ -5103,11 +5552,11 @@ a.pa-card p {
5103
5552
  }
5104
5553
  .pa-tabs--boxed .pa-tabs__item:hover {
5105
5554
  background-color: rgba(0, 123, 255, 0.1);
5106
- color: var(--pa-text-primary);
5555
+ color: var(--pa-text-color-1);
5107
5556
  }
5108
5557
  .pa-tabs--boxed .pa-tabs__item--active {
5109
5558
  background-color: var(--pa-card-bg);
5110
- color: var(--pa-text-primary);
5559
+ color: var(--pa-text-color-1);
5111
5560
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
5112
5561
  }
5113
5562
  .pa-tabs--vertical {
@@ -5182,8 +5631,8 @@ a.pa-card p {
5182
5631
  bottom: 0;
5183
5632
  width: 3.2rem;
5184
5633
  border: none;
5185
- background: linear-gradient(to right, color-mix(in srgb, var(--pa-primary-bg) 95%, transparent), transparent);
5186
- 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);
5187
5636
  cursor: pointer;
5188
5637
  z-index: 1;
5189
5638
  display: flex;
@@ -5194,15 +5643,15 @@ a.pa-card p {
5194
5643
  pointer-events: none;
5195
5644
  }
5196
5645
  .pa-tabs--scrollable .pa-tabs__scroll-btn:hover {
5197
- 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));
5198
5647
  }
5199
5648
  .pa-tabs--scrollable .pa-tabs__scroll-btn--left {
5200
5649
  left: 0;
5201
- 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);
5202
5651
  }
5203
5652
  .pa-tabs--scrollable .pa-tabs__scroll-btn--right {
5204
5653
  right: 0;
5205
- 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);
5206
5655
  }
5207
5656
  .pa-tabs--scrollable .pa-tabs__scroll-btn--visible {
5208
5657
  opacity: 1;
@@ -5312,7 +5761,7 @@ a.pa-card p {
5312
5761
  padding: 0;
5313
5762
  border: none;
5314
5763
  background: transparent;
5315
- color: var(--pa-text-secondary);
5764
+ color: var(--pa-text-color-2);
5316
5765
  cursor: pointer;
5317
5766
  transition: all 0.1s ease-out;
5318
5767
  border-left: 1px solid var(--pa-border-color);
@@ -5322,7 +5771,7 @@ a.pa-card p {
5322
5771
  }
5323
5772
  .pa-tabs__container--card .pa-tabs__overflow-toggle:hover {
5324
5773
  background-color: rgba(0, 123, 255, 0.05);
5325
- color: var(--pa-text-primary);
5774
+ color: var(--pa-text-color-1);
5326
5775
  }
5327
5776
  .pa-tabs__container--card .pa-tabs__overflow-toggle--has-active {
5328
5777
  color: var(--pa-accent);
@@ -5393,9 +5842,6 @@ a.pa-card p {
5393
5842
  width: 100%;
5394
5843
  }
5395
5844
 
5396
- /* ========================================
5397
- Reset and Base Styles
5398
- ======================================== */
5399
5845
  /* ========================================
5400
5846
  Statistics Components
5401
5847
  Stat displays with icons, hero variant, and square variant
@@ -5436,11 +5882,11 @@ a.pa-card p {
5436
5882
  .pa-stat__number {
5437
5883
  font-size: 2.4rem;
5438
5884
  font-weight: 600;
5439
- color: var(--pa-text-primary);
5885
+ color: var(--pa-text-color-1);
5440
5886
  margin-bottom: 0.4rem;
5441
5887
  }
5442
5888
  .pa-stat__label {
5443
- color: var(--pa-text-secondary);
5889
+ color: var(--pa-text-color-2);
5444
5890
  font-size: 1.4rem;
5445
5891
  }
5446
5892
  .pa-stat--hero {
@@ -5453,13 +5899,13 @@ a.pa-card p {
5453
5899
  text-transform: uppercase;
5454
5900
  letter-spacing: 0.05em;
5455
5901
  font-weight: 500;
5456
- color: var(--pa-text-secondary);
5902
+ color: var(--pa-text-color-2);
5457
5903
  margin-bottom: 0.8rem;
5458
5904
  }
5459
5905
  .pa-stat--hero .pa-stat__value {
5460
5906
  font-size: 3.2rem;
5461
5907
  font-weight: 700;
5462
- color: var(--pa-text-primary);
5908
+ color: var(--pa-text-color-1);
5463
5909
  line-height: 1.1;
5464
5910
  margin-bottom: 0.8rem;
5465
5911
  }
@@ -5474,7 +5920,7 @@ a.pa-card p {
5474
5920
  color: #dc3545;
5475
5921
  }
5476
5922
  .pa-stat--hero .pa-stat__change--neutral {
5477
- color: var(--pa-text-secondary);
5923
+ color: var(--pa-text-color-2);
5478
5924
  }
5479
5925
  .pa-stat--square {
5480
5926
  display: flex;
@@ -5555,7 +6001,7 @@ a.pa-card p {
5555
6001
  color: #ffffff;
5556
6002
  }
5557
6003
  .pa-stat--square.pa-stat--secondary {
5558
- background-color: var(--pa-text-secondary);
6004
+ background-color: var(--pa-text-color-2);
5559
6005
  color: #ffffff;
5560
6006
  }
5561
6007
 
@@ -5563,9 +6009,6 @@ a.pa-card p {
5563
6009
  margin: -0.8rem;
5564
6010
  }
5565
6011
 
5566
- /* ========================================
5567
- Reset and Base Styles
5568
- ======================================== */
5569
6012
  /* ========================================
5570
6013
  List Components
5571
6014
  List items with avatars, titles, subtitles, and meta information
@@ -5665,7 +6108,7 @@ a.pa-card p {
5665
6108
  }
5666
6109
  .pa-list-definition dt {
5667
6110
  font-weight: 600;
5668
- color: var(--pa-text-primary);
6111
+ color: var(--pa-text-color-1);
5669
6112
  margin-bottom: 0.4rem;
5670
6113
  margin-top: 1.6rem;
5671
6114
  }
@@ -5675,7 +6118,7 @@ a.pa-card p {
5675
6118
  .pa-list-definition dd {
5676
6119
  margin-left: 2.4rem;
5677
6120
  margin-bottom: 0.8rem;
5678
- color: var(--pa-text-secondary);
6121
+ color: var(--pa-text-color-2);
5679
6122
  line-height: 1.6;
5680
6123
  }
5681
6124
  .pa-list-definition--inline dt {
@@ -5706,13 +6149,13 @@ a.pa-card p {
5706
6149
  border-bottom: none;
5707
6150
  }
5708
6151
  .pa-list__item:hover {
5709
- background-color: var(--pa-primary-bg);
6152
+ background-color: var(--pa-main-bg);
5710
6153
  }
5711
6154
  .pa-list__avatar {
5712
6155
  width: 3.5rem;
5713
6156
  height: 3.5rem;
5714
6157
  border-radius: 50%;
5715
- background-color: var(--pa-primary-bg);
6158
+ background-color: var(--pa-main-bg);
5716
6159
  display: flex;
5717
6160
  align-items: center;
5718
6161
  justify-content: center;
@@ -5723,16 +6166,16 @@ a.pa-card p {
5723
6166
  }
5724
6167
  .pa-list__title {
5725
6168
  font-weight: 500;
5726
- color: var(--pa-text-primary);
6169
+ color: var(--pa-text-color-1);
5727
6170
  margin-bottom: 0.4rem;
5728
6171
  }
5729
6172
  .pa-list__subtitle {
5730
- color: var(--pa-text-secondary);
6173
+ color: var(--pa-text-color-2);
5731
6174
  font-size: 1.4rem;
5732
6175
  margin-bottom: 0.4rem;
5733
6176
  }
5734
6177
  .pa-list__meta {
5735
- color: var(--pa-text-secondary);
6178
+ color: var(--pa-text-color-2);
5736
6179
  font-size: 1.2rem;
5737
6180
  }
5738
6181
 
@@ -5744,9 +6187,6 @@ a.pa-card p {
5744
6187
  Badges Index
5745
6188
  Central import point for all badge component modules
5746
6189
  ======================================== */
5747
- /* ========================================
5748
- Reset and Base Styles
5749
- ======================================== */
5750
6190
  /* ========================================
5751
6191
  Badge Base
5752
6192
  Core badge component with sizes, colors, and modifiers
@@ -5836,9 +6276,6 @@ a.pa-card p {
5836
6276
  text-align: left;
5837
6277
  }
5838
6278
 
5839
- /* ========================================
5840
- Reset and Base Styles
5841
- ======================================== */
5842
6279
  /* ========================================
5843
6280
  Composite Badge
5844
6281
  Multi-part badge with [icon][label][button] structure
@@ -5900,9 +6337,6 @@ a.pa-card p {
5900
6337
  box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25);
5901
6338
  }
5902
6339
 
5903
- /* ========================================
5904
- Reset and Base Styles
5905
- ======================================== */
5906
6340
  /* ========================================
5907
6341
  Composite Badge Variants
5908
6342
  Color variations for composite badges
@@ -5934,7 +6368,7 @@ a.pa-card p {
5934
6368
  }
5935
6369
  .pa-composite-badge--secondary .pa-composite-badge__label {
5936
6370
  background-color: #f8f9fa;
5937
- color: var(--pa-text-secondary);
6371
+ color: var(--pa-text-color-2);
5938
6372
  }
5939
6373
  .pa-composite-badge--secondary .pa-composite-badge__label:hover {
5940
6374
  background-color: #f8f9fa;
@@ -6060,7 +6494,7 @@ a.pa-card p {
6060
6494
  }
6061
6495
  .pa-composite-badge--dark .pa-composite-badge__label {
6062
6496
  background-color: #f8f9fa;
6063
- color: var(--pa-text-primary);
6497
+ color: var(--pa-text-color-1);
6064
6498
  }
6065
6499
  .pa-composite-badge--dark .pa-composite-badge__label:hover {
6066
6500
  background-color: #e1e5e9;
@@ -6223,9 +6657,6 @@ a.pa-card p {
6223
6657
  box-shadow: 0 0 0 2px rgba(52, 58, 64, 0.25);
6224
6658
  }
6225
6659
 
6226
- /* ========================================
6227
- Reset and Base Styles
6228
- ======================================== */
6229
6660
  /* ========================================
6230
6661
  Badge Group
6231
6662
  Container for grouped badges with visibility limits
@@ -6243,9 +6674,6 @@ a.pa-card p {
6243
6674
  display: inline-flex;
6244
6675
  }
6245
6676
 
6246
- /* ========================================
6247
- Reset and Base Styles
6248
- ======================================== */
6249
6677
  /* ========================================
6250
6678
  Label Components
6251
6679
  Tag-like labels with colors and sizes
@@ -6256,7 +6684,7 @@ a.pa-card p {
6256
6684
  gap: 0.4rem;
6257
6685
  padding: 0.4rem 0.8rem;
6258
6686
  background-color: var(--pa-accent-light);
6259
- color: var(--pa-text-primary);
6687
+ color: var(--pa-text-color-1);
6260
6688
  font-size: 1.2rem;
6261
6689
  font-weight: 500;
6262
6690
  line-height: 1.2;
@@ -6371,9 +6799,6 @@ a.pa-card p {
6371
6799
  background-color: var(--pa-info-bg-light);
6372
6800
  }
6373
6801
 
6374
- /* ========================================
6375
- Reset and Base Styles
6376
- ======================================== */
6377
6802
  /* ========================================
6378
6803
  Button Components
6379
6804
  Buttons, button groups, sizes, colors, states, and icon buttons
@@ -6391,7 +6816,7 @@ a.pa-card p {
6391
6816
  cursor: pointer;
6392
6817
  transition: all 0.1s ease-out;
6393
6818
  background: none;
6394
- color: var(--pa-text-primary);
6819
+ color: var(--pa-text-color-1);
6395
6820
  }
6396
6821
  .pa-btn:hover {
6397
6822
  transform: translateY(-1px);
@@ -6408,10 +6833,10 @@ a.pa-card p {
6408
6833
  .pa-btn--secondary {
6409
6834
  background-color: transparent;
6410
6835
  border-color: var(--pa-border-color);
6411
- color: var(--pa-text-primary);
6836
+ color: var(--pa-text-color-1);
6412
6837
  }
6413
6838
  .pa-btn--secondary:hover {
6414
- background-color: var(--pa-primary-bg);
6839
+ background-color: var(--pa-main-bg);
6415
6840
  border-color: var(--pa-accent);
6416
6841
  }
6417
6842
  .pa-btn--xs {
@@ -6743,9 +7168,6 @@ a.pa-card p {
6743
7168
  z-index: 7000;
6744
7169
  }
6745
7170
 
6746
- /* ========================================
6747
- Reset and Base Styles
6748
- ======================================== */
6749
7171
  /* ========================================
6750
7172
  Loader Components
6751
7173
  Spinners, dots, bars, pulse, ring, wave loaders and animations
@@ -6975,9 +7397,6 @@ a.pa-card p {
6975
7397
  text-align: center;
6976
7398
  }
6977
7399
 
6978
- /* ========================================
6979
- Reset and Base Styles
6980
- ======================================== */
6981
7400
  /* ========================================
6982
7401
  Tooltip and Popover Components
6983
7402
  Tooltips with multiple positions and popovers with rich content
@@ -7134,7 +7553,7 @@ a.pa-card p {
7134
7553
  }
7135
7554
  .pa-tooltip--warning::before {
7136
7555
  background-color: var(--pa-btn-warning-bg);
7137
- color: var(--pa-text-primary);
7556
+ color: var(--pa-text-color-1);
7138
7557
  }
7139
7558
  .pa-tooltip--warning::after {
7140
7559
  border-top-color: var(--pa-btn-warning-bg);
@@ -7405,7 +7824,7 @@ a.pa-card p {
7405
7824
  border: 1px solid var(--pa-border-color);
7406
7825
  border-radius: 50%;
7407
7826
  background-color: var(--pa-popover-content-bg);
7408
- color: var(--pa-text-secondary);
7827
+ color: var(--pa-text-color-2);
7409
7828
  font-size: 1.2rem;
7410
7829
  font-weight: 700;
7411
7830
  cursor: pointer;
@@ -7443,13 +7862,13 @@ a.pa-card p {
7443
7862
  margin: 0;
7444
7863
  font-size: 1.8rem;
7445
7864
  font-weight: 600;
7446
- color: var(--pa-text-primary);
7865
+ color: var(--pa-text-color-1);
7447
7866
  }
7448
7867
  .pa-popover__body {
7449
7868
  padding: 1.6rem;
7450
7869
  font-size: 1.4rem;
7451
7870
  line-height: 1.5;
7452
- color: var(--pa-text-primary);
7871
+ color: var(--pa-text-color-1);
7453
7872
  text-align: left;
7454
7873
  }
7455
7874
  .pa-popover__body p {
@@ -7471,7 +7890,7 @@ a.pa-card p {
7471
7890
  }
7472
7891
  .pa-popover__body code {
7473
7892
  padding: 0.2rem 0.4rem;
7474
- 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);
7475
7894
  border-radius: 2px;
7476
7895
  font-family: monospace;
7477
7896
  font-size: 0.9em;
@@ -7481,7 +7900,7 @@ a.pa-card p {
7481
7900
  border: none;
7482
7901
  font-size: 1.8rem;
7483
7902
  line-height: 1;
7484
- color: var(--pa-text-secondary);
7903
+ color: var(--pa-text-color-2);
7485
7904
  cursor: pointer;
7486
7905
  padding: 0;
7487
7906
  width: 2.4rem;
@@ -7493,8 +7912,8 @@ a.pa-card p {
7493
7912
  transition: all 0.1s ease;
7494
7913
  }
7495
7914
  .pa-popover__close:hover {
7496
- background-color: color-mix(in srgb, var(--pa-text-secondary) 10%, transparent);
7497
- 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);
7498
7917
  }
7499
7918
  .pa-popover--sm .pa-popover__content {
7500
7919
  min-width: 19.2rem;
@@ -7573,9 +7992,6 @@ a.pa-card p {
7573
7992
  background-color: var(--pa-color-9);
7574
7993
  }
7575
7994
 
7576
- /* ========================================
7577
- Reset and Base Styles
7578
- ======================================== */
7579
7995
  /* ========================================
7580
7996
  Alert Components
7581
7997
  Alerts with variants, sizes, dismissible functionality
@@ -7606,8 +8022,8 @@ a.pa-card p {
7606
8022
  border-color: rgba(0, 123, 255, 0.2);
7607
8023
  }
7608
8024
  .pa-alert--secondary {
7609
- color: var(--pa-text-secondary);
7610
- 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);
7611
8027
  border-color: var(--pa-border-color);
7612
8028
  }
7613
8029
  .pa-alert--success {
@@ -7632,14 +8048,14 @@ a.pa-card p {
7632
8048
  border-color: var(--pa-alert-info-border);
7633
8049
  }
7634
8050
  .pa-alert--light {
7635
- color: var(--pa-text-primary);
7636
- 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);
7637
8053
  border-color: var(--pa-border-color);
7638
8054
  }
7639
8055
  .pa-alert--dark {
7640
- color: var(--pa-text-primary);
7641
- background-color: color-mix(in srgb, var(--pa-text-primary) 5%, transparent);
7642
- 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);
7643
8059
  }
7644
8060
  .pa-alert--outline-primary {
7645
8061
  color: var(--pa-accent);
@@ -7747,9 +8163,6 @@ a.pa-card p {
7747
8163
  border-top: 1px solid rgba(0, 0, 0, 0.1);
7748
8164
  }
7749
8165
 
7750
- /* ========================================
7751
- Reset and Base Styles
7752
- ======================================== */
7753
8166
  /* ========================================
7754
8167
  Callout Components
7755
8168
  Documentation-style callouts with left border accent
@@ -7775,8 +8188,8 @@ a.pa-card p {
7775
8188
  background-color: rgba(0, 123, 255, 0.08);
7776
8189
  }
7777
8190
  .pa-callout--secondary {
7778
- border-left-color: var(--pa-text-secondary);
7779
- 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);
7780
8193
  }
7781
8194
  .pa-callout--success {
7782
8195
  border-left-color: var(--pa-success-bg);
@@ -7861,9 +8274,6 @@ a.pa-card p {
7861
8274
  Forms Index
7862
8275
  Central import point for all form component modules
7863
8276
  ======================================== */
7864
- /* ========================================
7865
- Reset and Base Styles
7866
- ======================================== */
7867
8277
  /* ========================================
7868
8278
  Form Layout
7869
8279
  Form groups, form containers, horizontal layouts
@@ -7887,7 +8297,7 @@ a.pa-card p {
7887
8297
  flex-shrink: 0;
7888
8298
  padding-top: 0.8rem;
7889
8299
  margin-bottom: 0;
7890
- color: var(--pa-text-primary);
8300
+ color: var(--pa-text-color-1);
7891
8301
  font-weight: 500;
7892
8302
  font-size: 1.4rem;
7893
8303
  }
@@ -7902,7 +8312,7 @@ a.pa-card p {
7902
8312
  align-items: center;
7903
8313
  gap: 0.8rem;
7904
8314
  margin-bottom: 0.3rem;
7905
- color: var(--pa-text-primary);
8315
+ color: var(--pa-text-color-1);
7906
8316
  font-weight: 500;
7907
8317
  font-size: 1.4rem;
7908
8318
  }
@@ -7913,9 +8323,6 @@ a.pa-card p {
7913
8323
  flex-wrap: wrap;
7914
8324
  }
7915
8325
 
7916
- /* ========================================
7917
- Reset and Base Styles
7918
- ======================================== */
7919
8326
  /* ========================================
7920
8327
  Form Input Elements
7921
8328
  Input, select, textarea base styles and sizes
@@ -7928,7 +8335,7 @@ a.pa-card p {
7928
8335
  border-radius: 4px;
7929
8336
  font-size: 1.4rem;
7930
8337
  background-color: var(--pa-input-bg);
7931
- color: var(--pa-text-primary);
8338
+ color: var(--pa-text-color-1);
7932
8339
  transition: border-color 0.1s ease-out;
7933
8340
  }
7934
8341
  .pa-input:focus {
@@ -7945,7 +8352,7 @@ a.pa-card p {
7945
8352
  border-radius: 4px;
7946
8353
  font-size: 1.4rem;
7947
8354
  background-color: var(--pa-input-bg);
7948
- color: var(--pa-text-primary);
8355
+ color: var(--pa-text-color-1);
7949
8356
  transition: border-color 0.1s ease-out;
7950
8357
  }
7951
8358
  .pa-select:focus {
@@ -7961,7 +8368,7 @@ a.pa-card p {
7961
8368
  border-radius: 4px;
7962
8369
  font-size: 1.4rem;
7963
8370
  background-color: var(--pa-input-bg);
7964
- color: var(--pa-text-primary);
8371
+ color: var(--pa-text-color-1);
7965
8372
  transition: border-color 0.1s ease-out;
7966
8373
  resize: vertical;
7967
8374
  min-height: 9.6rem;
@@ -7972,7 +8379,7 @@ a.pa-card p {
7972
8379
  box-shadow: 0 0 0 3px var(--pa-accent-light);
7973
8380
  }
7974
8381
  .pa-textarea::placeholder {
7975
- color: var(--pa-text-secondary);
8382
+ color: var(--pa-text-color-2);
7976
8383
  }
7977
8384
 
7978
8385
  .pa-input--xs,
@@ -7996,9 +8403,37 @@ a.pa-card p {
7996
8403
  font-size: 1.6rem;
7997
8404
  }
7998
8405
 
7999
- .pa-input--xl,
8000
- .pa-select--xl {
8001
- height: 4.1rem;
8406
+ .pa-input--xl,
8407
+ .pa-select--xl {
8408
+ height: 4.1rem;
8409
+ padding: 0.8rem 0.8rem;
8410
+ font-size: 1.8rem;
8411
+ }
8412
+
8413
+ .pa-textarea--xs {
8414
+ height: 4rem;
8415
+ min-height: 4rem;
8416
+ padding: 0.6rem 0.8rem;
8417
+ font-size: 1.2rem;
8418
+ }
8419
+
8420
+ .pa-textarea--sm {
8421
+ height: 6rem;
8422
+ min-height: 6rem;
8423
+ padding: 0.8rem 0.8rem;
8424
+ font-size: 1.4rem;
8425
+ }
8426
+
8427
+ .pa-textarea--lg {
8428
+ height: 12rem;
8429
+ min-height: 12rem;
8430
+ padding: 0.8rem 0.8rem;
8431
+ font-size: 1.6rem;
8432
+ }
8433
+
8434
+ .pa-textarea--xl {
8435
+ height: 16rem;
8436
+ min-height: 16rem;
8002
8437
  padding: 0.8rem 0.8rem;
8003
8438
  font-size: 1.8rem;
8004
8439
  }
@@ -8011,9 +8446,6 @@ a.pa-card p {
8011
8446
  filter: invert(1);
8012
8447
  }
8013
8448
 
8014
- /* ========================================
8015
- Reset and Base Styles
8016
- ======================================== */
8017
8449
  /* ========================================
8018
8450
  Form Validation States
8019
8451
  Input states (error, success, warning), form groups with states, help text
@@ -8082,7 +8514,7 @@ a.pa-card p {
8082
8514
  display: block;
8083
8515
  margin-top: 0.4rem;
8084
8516
  font-size: 1.2rem;
8085
- color: var(--pa-text-secondary);
8517
+ color: var(--pa-text-color-2);
8086
8518
  }
8087
8519
  .pa-form-help--error {
8088
8520
  color: var(--pa-danger-bg);
@@ -8090,10 +8522,154 @@ a.pa-card p {
8090
8522
  .pa-form-help--success {
8091
8523
  color: var(--pa-success-bg);
8092
8524
  }
8525
+ .pa-form-help--warning {
8526
+ color: var(--pa-warning-bg);
8527
+ }
8528
+
8529
+ .pa-form-help--color-1 {
8530
+ color: var(--pa-color-1);
8531
+ }
8532
+
8533
+ .pa-form-help--color-2 {
8534
+ color: var(--pa-color-2);
8535
+ }
8536
+
8537
+ .pa-form-help--color-3 {
8538
+ color: var(--pa-color-3);
8539
+ }
8540
+
8541
+ .pa-form-help--color-4 {
8542
+ color: var(--pa-color-4);
8543
+ }
8544
+
8545
+ .pa-form-help--color-5 {
8546
+ color: var(--pa-color-5);
8547
+ }
8548
+
8549
+ .pa-form-help--color-6 {
8550
+ color: var(--pa-color-6);
8551
+ }
8552
+
8553
+ .pa-form-help--color-7 {
8554
+ color: var(--pa-color-7);
8555
+ }
8556
+
8557
+ .pa-form-help--color-8 {
8558
+ color: var(--pa-color-8);
8559
+ }
8560
+
8561
+ .pa-form-help--color-9 {
8562
+ color: var(--pa-color-9);
8563
+ }
8564
+
8565
+ .pa-input--color-1,
8566
+ .pa-select--color-1,
8567
+ .pa-textarea--color-1 {
8568
+ border-color: var(--pa-color-1);
8569
+ }
8570
+ .pa-input--color-1:focus,
8571
+ .pa-select--color-1:focus,
8572
+ .pa-textarea--color-1:focus {
8573
+ border-color: var(--pa-color-1);
8574
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-color-1) 25%, transparent);
8575
+ }
8576
+
8577
+ .pa-input--color-2,
8578
+ .pa-select--color-2,
8579
+ .pa-textarea--color-2 {
8580
+ border-color: var(--pa-color-2);
8581
+ }
8582
+ .pa-input--color-2:focus,
8583
+ .pa-select--color-2:focus,
8584
+ .pa-textarea--color-2:focus {
8585
+ border-color: var(--pa-color-2);
8586
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-color-2) 25%, transparent);
8587
+ }
8588
+
8589
+ .pa-input--color-3,
8590
+ .pa-select--color-3,
8591
+ .pa-textarea--color-3 {
8592
+ border-color: var(--pa-color-3);
8593
+ }
8594
+ .pa-input--color-3:focus,
8595
+ .pa-select--color-3:focus,
8596
+ .pa-textarea--color-3:focus {
8597
+ border-color: var(--pa-color-3);
8598
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-color-3) 25%, transparent);
8599
+ }
8600
+
8601
+ .pa-input--color-4,
8602
+ .pa-select--color-4,
8603
+ .pa-textarea--color-4 {
8604
+ border-color: var(--pa-color-4);
8605
+ }
8606
+ .pa-input--color-4:focus,
8607
+ .pa-select--color-4:focus,
8608
+ .pa-textarea--color-4:focus {
8609
+ border-color: var(--pa-color-4);
8610
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-color-4) 25%, transparent);
8611
+ }
8612
+
8613
+ .pa-input--color-5,
8614
+ .pa-select--color-5,
8615
+ .pa-textarea--color-5 {
8616
+ border-color: var(--pa-color-5);
8617
+ }
8618
+ .pa-input--color-5:focus,
8619
+ .pa-select--color-5:focus,
8620
+ .pa-textarea--color-5:focus {
8621
+ border-color: var(--pa-color-5);
8622
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-color-5) 25%, transparent);
8623
+ }
8624
+
8625
+ .pa-input--color-6,
8626
+ .pa-select--color-6,
8627
+ .pa-textarea--color-6 {
8628
+ border-color: var(--pa-color-6);
8629
+ }
8630
+ .pa-input--color-6:focus,
8631
+ .pa-select--color-6:focus,
8632
+ .pa-textarea--color-6:focus {
8633
+ border-color: var(--pa-color-6);
8634
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-color-6) 25%, transparent);
8635
+ }
8636
+
8637
+ .pa-input--color-7,
8638
+ .pa-select--color-7,
8639
+ .pa-textarea--color-7 {
8640
+ border-color: var(--pa-color-7);
8641
+ }
8642
+ .pa-input--color-7:focus,
8643
+ .pa-select--color-7:focus,
8644
+ .pa-textarea--color-7:focus {
8645
+ border-color: var(--pa-color-7);
8646
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-color-7) 25%, transparent);
8647
+ }
8648
+
8649
+ .pa-input--color-8,
8650
+ .pa-select--color-8,
8651
+ .pa-textarea--color-8 {
8652
+ border-color: var(--pa-color-8);
8653
+ }
8654
+ .pa-input--color-8:focus,
8655
+ .pa-select--color-8:focus,
8656
+ .pa-textarea--color-8:focus {
8657
+ border-color: var(--pa-color-8);
8658
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-color-8) 25%, transparent);
8659
+ }
8660
+
8661
+ .pa-input--color-9,
8662
+ .pa-select--color-9,
8663
+ .pa-textarea--color-9 {
8664
+ border-color: var(--pa-color-9);
8665
+ }
8666
+ .pa-input--color-9:focus,
8667
+ .pa-select--color-9:focus,
8668
+ .pa-textarea--color-9:focus {
8669
+ border-color: var(--pa-color-9);
8670
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-color-9) 25%, transparent);
8671
+ }
8093
8672
 
8094
- /* ========================================
8095
- Reset and Base Styles
8096
- ======================================== */
8097
8673
  /* ========================================
8098
8674
  Input Groups
8099
8675
  Input groups with prepend/append addons and buttons
@@ -8203,9 +8779,6 @@ a.pa-card p {
8203
8779
  font-size: 1.8rem;
8204
8780
  }
8205
8781
 
8206
- /* ========================================
8207
- Reset and Base Styles
8208
- ======================================== */
8209
8782
  /* ========================================
8210
8783
  Input Wrapper
8211
8784
  Input with clear button, search tokens container
@@ -8232,7 +8805,7 @@ a.pa-card p {
8232
8805
  transform: translateY(-50%);
8233
8806
  background: transparent;
8234
8807
  border: none;
8235
- color: var(--pa-text-secondary);
8808
+ color: var(--pa-text-color-2);
8236
8809
  cursor: pointer;
8237
8810
  padding: 0.4rem;
8238
8811
  font-size: 1.6rem;
@@ -8284,9 +8857,6 @@ a.pa-card p {
8284
8857
  opacity: 1;
8285
8858
  }
8286
8859
 
8287
- /* ========================================
8288
- Reset and Base Styles
8289
- ======================================== */
8290
8860
  /* ========================================
8291
8861
  Query Editor Components
8292
8862
  Syntax highlighting, autocomplete, virtual textbox, inline query editor
@@ -8316,7 +8886,7 @@ a.pa-card p {
8316
8886
  position: relative;
8317
8887
  z-index: 1;
8318
8888
  background: transparent;
8319
- color: var(--pa-text-primary);
8889
+ color: var(--pa-text-color-1);
8320
8890
  }
8321
8891
  .pa-search-highlight__field {
8322
8892
  display: inline;
@@ -8365,14 +8935,14 @@ a.pa-card p {
8365
8935
  .pa-search-autocomplete__item-type {
8366
8936
  margin-left: auto;
8367
8937
  font-size: 1.2rem;
8368
- color: var(--pa-text-secondary);
8938
+ color: var(--pa-text-color-2);
8369
8939
  opacity: 0.7;
8370
8940
  }
8371
8941
  .pa-search-autocomplete__section {
8372
8942
  padding: 0.4rem 1.2rem;
8373
8943
  font-size: 1.2rem;
8374
8944
  font-weight: 500;
8375
- color: var(--pa-text-secondary);
8945
+ color: var(--pa-text-color-2);
8376
8946
  text-transform: uppercase;
8377
8947
  letter-spacing: 0.05em;
8378
8948
  background-color: var(--pa-card-header-bg);
@@ -8381,7 +8951,7 @@ a.pa-card p {
8381
8951
  .pa-search-autocomplete__empty {
8382
8952
  padding: 1.2rem;
8383
8953
  text-align: center;
8384
- color: var(--pa-text-secondary);
8954
+ color: var(--pa-text-color-2);
8385
8955
  font-size: 1.4rem;
8386
8956
  }
8387
8957
 
@@ -8392,7 +8962,7 @@ a.pa-card p {
8392
8962
  border-radius: 4px;
8393
8963
  font-size: 1.4rem;
8394
8964
  background-color: var(--pa-input-bg);
8395
- color: var(--pa-text-primary);
8965
+ color: var(--pa-text-color-1);
8396
8966
  cursor: text;
8397
8967
  overflow-wrap: break-word;
8398
8968
  word-wrap: break-word;
@@ -8406,7 +8976,7 @@ a.pa-card p {
8406
8976
  }
8407
8977
  .pa-virtual-textbox:empty::before {
8408
8978
  content: attr(data-placeholder);
8409
- color: var(--pa-text-secondary);
8979
+ color: var(--pa-text-color-2);
8410
8980
  opacity: 0.7;
8411
8981
  pointer-events: none;
8412
8982
  }
@@ -8438,7 +9008,7 @@ a.pa-card p {
8438
9008
  border: 1px solid transparent;
8439
9009
  border-radius: 4px;
8440
9010
  font-size: 1.4rem;
8441
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
9011
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
8442
9012
  white-space: pre-wrap;
8443
9013
  word-wrap: break-word;
8444
9014
  pointer-events: none;
@@ -8455,10 +9025,10 @@ a.pa-card p {
8455
9025
  border: 1px solid #e1e5e9;
8456
9026
  border-radius: 4px;
8457
9027
  font-size: 1.4rem;
8458
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
9028
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
8459
9029
  background: transparent;
8460
9030
  color: transparent;
8461
- caret-color: var(--pa-text-primary);
9031
+ caret-color: var(--pa-text-color-1);
8462
9032
  resize: none;
8463
9033
  overflow: hidden;
8464
9034
  line-height: 1.5;
@@ -8471,7 +9041,7 @@ a.pa-card p {
8471
9041
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.05);
8472
9042
  }
8473
9043
  .pa-inline-query-editor__input::placeholder {
8474
- color: var(--pa-text-secondary);
9044
+ color: var(--pa-text-color-2);
8475
9045
  opacity: 0.7;
8476
9046
  }
8477
9047
 
@@ -8481,24 +9051,24 @@ a.pa-card p {
8481
9051
  }
8482
9052
  .pa-inline-query-token--field {
8483
9053
  background-color: rgba(0, 123, 255, 0.15);
8484
- color: var(--pa-text-primary);
9054
+ color: var(--pa-text-color-1);
8485
9055
  }
8486
9056
  .pa-inline-query-token--field.pa-inline-query-token--invalid {
8487
9057
  background-color: rgba(220, 53, 69, 0.15);
8488
- color: var(--pa-text-primary);
9058
+ color: var(--pa-text-color-1);
8489
9059
  text-decoration: wavy underline;
8490
9060
  }
8491
9061
  .pa-inline-query-token--operator {
8492
- background-color: rgba(var(--pa-text-secondary), 0.15);
8493
- color: var(--pa-text-primary);
9062
+ background-color: rgba(var(--pa-text-color-2), 0.15);
9063
+ color: var(--pa-text-color-1);
8494
9064
  }
8495
9065
  .pa-inline-query-token--value {
8496
9066
  background-color: rgba(40, 167, 69, 0.15);
8497
- color: var(--pa-text-primary);
9067
+ color: var(--pa-text-color-1);
8498
9068
  }
8499
9069
  .pa-inline-query-token--keyword {
8500
9070
  background-color: rgba(255, 193, 7, 0.15);
8501
- color: var(--pa-text-primary);
9071
+ color: var(--pa-text-color-1);
8502
9072
  font-style: italic;
8503
9073
  }
8504
9074
 
@@ -8543,7 +9113,7 @@ a.pa-card p {
8543
9113
  .pa-inline-query-autocomplete__item-type {
8544
9114
  display: block;
8545
9115
  font-size: 1.2rem;
8546
- color: var(--pa-text-secondary);
9116
+ color: var(--pa-text-color-2);
8547
9117
  opacity: 0.7;
8548
9118
  line-height: 1.3;
8549
9119
  }
@@ -8551,15 +9121,12 @@ a.pa-card p {
8551
9121
  flex-shrink: 0;
8552
9122
  font-size: 1.2rem;
8553
9123
  padding: 0.2rem 0.6rem;
8554
- background-color: rgba(var(--pa-text-secondary), 0.1);
8555
- color: var(--pa-text-secondary);
9124
+ background-color: rgba(var(--pa-text-color-2), 0.1);
9125
+ color: var(--pa-text-color-2);
8556
9126
  border-radius: 0.4rem;
8557
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
9127
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
8558
9128
  }
8559
9129
 
8560
- /* ========================================
8561
- Reset and Base Styles
8562
- ======================================== */
8563
9130
  /* ========================================
8564
9131
  Checkboxes and Radio Buttons
8565
9132
  Custom checkbox component with tri-state support, radio buttons
@@ -8577,7 +9144,7 @@ a.pa-card p {
8577
9144
  gap: 0.8rem;
8578
9145
  cursor: pointer;
8579
9146
  font-size: 1.4rem;
8580
- color: var(--pa-text-primary);
9147
+ color: var(--pa-text-color-1);
8581
9148
  user-select: none;
8582
9149
  }
8583
9150
  .pa-checkbox input[type=checkbox] {
@@ -8698,7 +9265,7 @@ input:indeterminate + .pa-checkbox__box::after {
8698
9265
  gap: 0.8rem;
8699
9266
  cursor: pointer;
8700
9267
  font-size: 1.4rem;
8701
- color: var(--pa-text-primary);
9268
+ color: var(--pa-text-color-1);
8702
9269
  }
8703
9270
  .pa-radio input {
8704
9271
  margin: 0;
@@ -8724,9 +9291,6 @@ input:indeterminate + .pa-checkbox__box::after {
8724
9291
  height: 2.4rem;
8725
9292
  }
8726
9293
 
8727
- /* ========================================
8728
- Reset and Base Styles
8729
- ======================================== */
8730
9294
  /* Pure Admin - Web Components Theme Integration
8731
9295
  * Maps Pure Admin SCSS variables to web component CSS custom properties
8732
9296
  *
@@ -8749,8 +9313,8 @@ web-daterangepicker {
8749
9313
  --drp-accent-color: #007bff;
8750
9314
  --drp-primary-bg: #007bff;
8751
9315
  --drp-primary-bg-hover: rgb(51, 149.4, 255);
8752
- --drp-text-primary: var(--pa-text-primary);
8753
- --drp-text-secondary: var(--pa-text-secondary);
9316
+ --drp-text-primary: var(--pa-text-color-1);
9317
+ --drp-text-secondary: var(--pa-text-color-2);
8754
9318
  --drp-border-color: #e1e5e9;
8755
9319
  --drp-card-bg: var(--pa-card-bg);
8756
9320
  --drp-hover-bg: #f8f9fa;
@@ -8789,18 +9353,18 @@ web-daterangepicker {
8789
9353
  /* ===== INPUT FIELD SEMANTIC VARIABLES ===== */
8790
9354
  /* Input colors */
8791
9355
  --drp-input-background: var(--pa-input-bg);
8792
- --drp-input-color: var(--pa-text-primary);
9356
+ --drp-input-color: var(--pa-text-color-1);
8793
9357
  --drp-input-border-color: #ced4da;
8794
9358
  --drp-input-border-color-hover: #007bff;
8795
9359
  --drp-input-border-color-focus: #007bff;
8796
- --drp-input-placeholder-color: var(--pa-text-secondary);
9360
+ --drp-input-placeholder-color: var(--pa-text-color-2);
8797
9361
  --drp-input-disabled-background: var(--pa-input-bg);
8798
- --drp-input-disabled-color: var(--pa-text-secondary);
9362
+ --drp-input-disabled-color: var(--pa-text-color-2);
8799
9363
  /* Input focus effects */
8800
9364
  --drp-input-focus-shadow-color: rgba(0, 123, 255, 0.05);
8801
9365
  --drp-input-focus-shadow-size: 3px;
8802
9366
  /* Input icon */
8803
- --drp-input-icon-color: var(--pa-text-secondary);
9367
+ --drp-input-icon-color: var(--pa-text-color-2);
8804
9368
  --drp-input-icon-opacity: 1;
8805
9369
  /* Input size variants - matched to Pure Admin .pa-input sizes (10px base)
8806
9370
  Heights: xs=31px, sm=33px, md=35px, lg=38px, xl=41px */
@@ -8845,12 +9409,12 @@ web-daterangepicker {
8845
9409
  --drp-header-padding: 0.8rem 1.2rem;
8846
9410
  --drp-header-font-size: 1.6rem;
8847
9411
  --drp-header-font-weight: 600;
8848
- --drp-header-text-color: var(--pa-text-primary);
9412
+ --drp-header-text-color: var(--pa-text-color-1);
8849
9413
  --drp-header-bg-hover: rgba(0, 123, 255, 0.12);
8850
9414
  --drp-header-bg-active: rgba(0, 123, 255, 0.05);
8851
9415
  /* ===== NAVIGATION ===== */
8852
9416
  --drp-nav-btn-size: 3.2rem; /* 32px (10px base) */
8853
- --drp-nav-text-color: var(--pa-text-primary);
9417
+ --drp-nav-text-color: var(--pa-text-color-1);
8854
9418
  --drp-nav-border-color: #e1e5e9;
8855
9419
  --drp-nav-bg-hover: rgba(0, 123, 255, 0.12);
8856
9420
  --drp-nav-bg-active: rgba(0, 123, 255, 0.05);
@@ -8858,14 +9422,14 @@ web-daterangepicker {
8858
9422
  /* ===== WEEKDAY HEADER ===== */
8859
9423
  --drp-weekday-font-size: 1.2rem;
8860
9424
  --drp-weekday-font-weight: 600;
8861
- --drp-weekday-color: var(--pa-text-secondary);
9425
+ --drp-weekday-color: var(--pa-text-color-2);
8862
9426
  --drp-weekday-padding: 0.4rem;
8863
9427
  /* ===== CALENDAR GRID ===== */
8864
9428
  --drp-day-size: 3.6rem; /* 36px (10px base) */
8865
9429
  --drp-day-font-size: 1.4rem;
8866
9430
  --drp-day-border-radius: 2px;
8867
9431
  /* Day states */
8868
- --drp-day-text-color: var(--pa-text-primary);
9432
+ --drp-day-text-color: var(--pa-text-color-1);
8869
9433
  --drp-day-bg-hover: rgba(0, 123, 255, 0.12);
8870
9434
  --drp-day-border-hover: transparent;
8871
9435
  /* Today indicator */
@@ -8875,14 +9439,14 @@ web-daterangepicker {
8875
9439
  --drp-day-selected-color: #ffffff;
8876
9440
  /* Range state */
8877
9441
  --drp-day-range-bg: rgba(0, 123, 255, 0.05);
8878
- --drp-day-range-text: var(--pa-text-primary);
9442
+ --drp-day-range-text: var(--pa-text-color-1);
8879
9443
  /* Focused state */
8880
9444
  --drp-day-focused-outline: #007bff;
8881
9445
  /* Disabled state */
8882
- --drp-day-disabled-color: var(--pa-text-secondary);
9446
+ --drp-day-disabled-color: var(--pa-text-color-2);
8883
9447
  --drp-day-disabled-opacity: 0.65;
8884
9448
  /* Other month */
8885
- --drp-day-other-month-color: var(--pa-text-secondary);
9449
+ --drp-day-other-month-color: var(--pa-text-color-2);
8886
9450
  --drp-day-other-month-opacity: 0.5;
8887
9451
  /* ===== BADGES ===== */
8888
9452
  /* Dot badges (original style) */
@@ -8900,11 +9464,11 @@ web-daterangepicker {
8900
9464
  --drp-badge-count-color: #ffffff;
8901
9465
  /* Text badges */
8902
9466
  --drp-badge-text-bg: rgba(0, 123, 255, 0.05);
8903
- --drp-badge-text-color: var(--pa-text-primary);
9467
+ --drp-badge-text-color: var(--pa-text-color-1);
8904
9468
  /* ===== SUMMARY BAR ===== */
8905
9469
  --drp-summary-bg: #f8f9fa;
8906
9470
  --drp-summary-border-color: #e1e5e9;
8907
- --drp-summary-text-color: var(--pa-text-primary);
9471
+ --drp-summary-text-color: var(--pa-text-color-1);
8908
9472
  --drp-summary-count-color: #007bff;
8909
9473
  --drp-summary-padding: 0.8rem 1.2rem;
8910
9474
  --drp-summary-font-size: 1.4rem;
@@ -8937,13 +9501,13 @@ web-daterangepicker {
8937
9501
  --drp-button-gap: 0.8rem;
8938
9502
  /* ===== UNIFIED NAVIGATION ===== */
8939
9503
  /* Range selectors in unified nav */
8940
- --drp-unified-range-text-color: var(--pa-text-primary);
9504
+ --drp-unified-range-text-color: var(--pa-text-color-1);
8941
9505
  --drp-unified-range-bg-hover: rgba(0, 123, 255, 0.12);
8942
9506
  --drp-unified-range-bg-active: rgba(0, 123, 255, 0.05);
8943
9507
  /* Month/Year display */
8944
- --drp-unified-month-color: var(--pa-text-primary);
9508
+ --drp-unified-month-color: var(--pa-text-color-1);
8945
9509
  /* Rolling selector disabled state */
8946
- --drp-unified-rolling-disabled-color: var(--pa-text-secondary);
9510
+ --drp-unified-rolling-disabled-color: var(--pa-text-color-2);
8947
9511
  /* ===== ROLLING SELECTOR ===== */
8948
9512
  --drp-rolling-bg: var(--pa-card-bg);
8949
9513
  --drp-rolling-border: #e1e5e9;
@@ -8952,8 +9516,8 @@ web-daterangepicker {
8952
9516
  --drp-rolling-item-selected-bg: #007bff;
8953
9517
  --drp-rolling-item-selected-text: #ffffff;
8954
9518
  --drp-rolling-font-size: 1.4rem;
8955
- --drp-rolling-item-text-color: var(--pa-text-primary);
8956
- --drp-rolling-item-disabled-color: var(--pa-text-secondary);
9519
+ --drp-rolling-item-text-color: var(--pa-text-color-1);
9520
+ --drp-rolling-item-disabled-color: var(--pa-text-color-2);
8957
9521
  /* ===== LOADING OVERLAY ===== */
8958
9522
  --drp-loading-bg: rgba(255, 255, 255, 0.8);
8959
9523
  --drp-loading-spinner-color: #007bff;
@@ -8962,9 +9526,6 @@ web-daterangepicker {
8962
9526
  --drp-months-gap: 2.4rem;
8963
9527
  }
8964
9528
 
8965
- /* ========================================
8966
- Reset and Base Styles
8967
- ======================================== */
8968
9529
  .pa-file-input {
8969
9530
  display: flex;
8970
9531
  align-items: center;
@@ -8986,7 +9547,7 @@ web-daterangepicker {
8986
9547
  }
8987
9548
  .pa-file-input__filename {
8988
9549
  font-size: 1.4rem;
8989
- color: var(--pa-text-secondary);
9550
+ color: var(--pa-text-color-2);
8990
9551
  overflow: hidden;
8991
9552
  text-overflow: ellipsis;
8992
9553
  white-space: nowrap;
@@ -9030,7 +9591,7 @@ web-daterangepicker {
9030
9591
  }
9031
9592
  .pa-file-dropzone__text {
9032
9593
  font-size: 1.6rem;
9033
- color: var(--pa-text-primary);
9594
+ color: var(--pa-text-color-1);
9034
9595
  margin-bottom: 0.4rem;
9035
9596
  }
9036
9597
  .pa-file-dropzone__text strong {
@@ -9039,7 +9600,7 @@ web-daterangepicker {
9039
9600
  }
9040
9601
  .pa-file-dropzone__hint {
9041
9602
  font-size: 1.2rem;
9042
- color: var(--pa-text-secondary);
9603
+ color: var(--pa-text-color-2);
9043
9604
  }
9044
9605
  .pa-file-dropzone__drop-prompt {
9045
9606
  padding: 1.2rem;
@@ -9047,7 +9608,7 @@ web-daterangepicker {
9047
9608
  margin: -3.2rem -3.2rem 1.2rem -3.2rem;
9048
9609
  text-align: center;
9049
9610
  font-size: 1.4rem;
9050
- color: var(--pa-text-secondary);
9611
+ color: var(--pa-text-color-2);
9051
9612
  }
9052
9613
  .pa-file-dropzone__drop-prompt-icon {
9053
9614
  display: inline-block;
@@ -9082,7 +9643,7 @@ web-daterangepicker {
9082
9643
  }
9083
9644
  .pa-file-dropzone__file-card-name {
9084
9645
  font-size: 1rem;
9085
- color: var(--pa-text-primary);
9646
+ color: var(--pa-text-color-1);
9086
9647
  overflow: hidden;
9087
9648
  text-overflow: ellipsis;
9088
9649
  white-space: nowrap;
@@ -9091,7 +9652,7 @@ web-daterangepicker {
9091
9652
  }
9092
9653
  .pa-file-dropzone__file-card-size {
9093
9654
  font-size: 1rem;
9094
- color: var(--pa-text-secondary);
9655
+ color: var(--pa-text-color-2);
9095
9656
  margin-top: 0.4rem;
9096
9657
  }
9097
9658
  .pa-file-dropzone__file-card-remove {
@@ -9170,7 +9731,7 @@ web-daterangepicker {
9170
9731
  border: none;
9171
9732
  background: transparent;
9172
9733
  font-size: 1.6rem;
9173
- color: var(--pa-text-secondary);
9734
+ color: var(--pa-text-color-2);
9174
9735
  }
9175
9736
  .pa-file-dropzone__summary-line {
9176
9737
  display: inline-block;
@@ -9194,14 +9755,14 @@ web-daterangepicker {
9194
9755
  color: #007bff;
9195
9756
  }
9196
9757
  .pa-file-dropzone__summary-size {
9197
- color: var(--pa-text-secondary);
9758
+ color: var(--pa-text-color-2);
9198
9759
  font-weight: normal;
9199
9760
  }
9200
9761
  .pa-file-dropzone__summary-current {
9201
9762
  display: block;
9202
9763
  margin-top: 0.4rem;
9203
9764
  font-style: italic;
9204
- color: var(--pa-text-primary);
9765
+ color: var(--pa-text-color-1);
9205
9766
  overflow: hidden;
9206
9767
  text-overflow: ellipsis;
9207
9768
  white-space: nowrap;
@@ -9247,14 +9808,14 @@ web-daterangepicker {
9247
9808
  .pa-file-popover__title {
9248
9809
  font-size: 1.6rem;
9249
9810
  font-weight: 600;
9250
- color: var(--pa-text-primary);
9811
+ color: var(--pa-text-color-1);
9251
9812
  }
9252
9813
  .pa-file-popover__close {
9253
9814
  width: 2.4rem;
9254
9815
  height: 2.4rem;
9255
9816
  border: none;
9256
9817
  background: transparent;
9257
- color: var(--pa-text-secondary);
9818
+ color: var(--pa-text-color-2);
9258
9819
  cursor: pointer;
9259
9820
  border-radius: 2px;
9260
9821
  font-size: 2rem;
@@ -9265,8 +9826,8 @@ web-daterangepicker {
9265
9826
  justify-content: center;
9266
9827
  }
9267
9828
  .pa-file-popover__close:hover {
9268
- background: rgba(var(--pa-text-secondary), 0.1);
9269
- color: var(--pa-text-primary);
9829
+ background: rgba(var(--pa-text-color-2), 0.1);
9830
+ color: var(--pa-text-color-1);
9270
9831
  }
9271
9832
  .pa-file-popover__body {
9272
9833
  padding: 1.2rem;
@@ -9288,7 +9849,7 @@ web-daterangepicker {
9288
9849
  text-align: left;
9289
9850
  padding: 0.4rem 0.8rem;
9290
9851
  border-bottom: 1px solid var(--pa-border-color);
9291
- color: var(--pa-text-secondary);
9852
+ color: var(--pa-text-color-2);
9292
9853
  font-weight: 600;
9293
9854
  font-size: 1.2rem;
9294
9855
  text-transform: uppercase;
@@ -9296,7 +9857,7 @@ web-daterangepicker {
9296
9857
  .pa-file-popover__table td {
9297
9858
  padding: 0.4rem 0.8rem;
9298
9859
  border-bottom: 1px solid var(--pa-border-color);
9299
- color: var(--pa-text-primary);
9860
+ color: var(--pa-text-color-1);
9300
9861
  }
9301
9862
  .pa-file-popover__table tbody tr:hover {
9302
9863
  background: rgba(0, 123, 255, 0.05);
@@ -9311,7 +9872,7 @@ web-daterangepicker {
9311
9872
  max-width: 32rem;
9312
9873
  }
9313
9874
  .pa-file-popover__file-size {
9314
- color: var(--pa-text-secondary);
9875
+ color: var(--pa-text-color-2);
9315
9876
  white-space: nowrap;
9316
9877
  }
9317
9878
  .pa-file-popover__progress-cell {
@@ -9332,7 +9893,7 @@ web-daterangepicker {
9332
9893
  }
9333
9894
  .pa-file-popover__progress-text {
9334
9895
  font-size: 1rem;
9335
- color: var(--pa-text-secondary);
9896
+ color: var(--pa-text-color-2);
9336
9897
  }
9337
9898
  .pa-file-popover__status {
9338
9899
  font-size: 1rem;
@@ -9340,7 +9901,7 @@ web-daterangepicker {
9340
9901
  text-transform: uppercase;
9341
9902
  }
9342
9903
  .pa-file-popover__status--pending {
9343
- color: var(--pa-text-secondary);
9904
+ color: var(--pa-text-color-2);
9344
9905
  }
9345
9906
  .pa-file-popover__status--uploading {
9346
9907
  color: #007bff;
@@ -9423,14 +9984,14 @@ web-daterangepicker {
9423
9984
  .pa-file-item__name {
9424
9985
  font-size: 1.4rem;
9425
9986
  font-weight: 600;
9426
- color: var(--pa-text-primary);
9987
+ color: var(--pa-text-color-1);
9427
9988
  overflow: hidden;
9428
9989
  text-overflow: ellipsis;
9429
9990
  white-space: nowrap;
9430
9991
  }
9431
9992
  .pa-file-item__meta {
9432
9993
  font-size: 1.2rem;
9433
- color: var(--pa-text-secondary);
9994
+ color: var(--pa-text-color-2);
9434
9995
  margin-top: 0.4rem;
9435
9996
  }
9436
9997
  .pa-file-item__remove {
@@ -9439,7 +10000,7 @@ web-daterangepicker {
9439
10000
  height: 2.4rem;
9440
10001
  border: none;
9441
10002
  background: transparent;
9442
- color: var(--pa-text-secondary);
10003
+ color: var(--pa-text-color-2);
9443
10004
  cursor: pointer;
9444
10005
  border-radius: 2px;
9445
10006
  font-size: 1.8rem;
@@ -9535,7 +10096,7 @@ web-daterangepicker {
9535
10096
  }
9536
10097
  .pa-file-progress__text {
9537
10098
  font-size: 1.2rem;
9538
- color: var(--pa-text-secondary);
10099
+ color: var(--pa-text-color-2);
9539
10100
  margin-top: 0.4rem;
9540
10101
  display: flex;
9541
10102
  justify-content: space-between;
@@ -9604,9 +10165,6 @@ web-daterangepicker {
9604
10165
  color: #007bff;
9605
10166
  }
9606
10167
 
9607
- /* ========================================
9608
- Reset and Base Styles
9609
- ======================================== */
9610
10168
  /* ========================================
9611
10169
  Checkbox Lists
9612
10170
  Styled checkbox lists with various layouts and features
@@ -9637,7 +10195,7 @@ web-daterangepicker {
9637
10195
  margin: 0;
9638
10196
  cursor: pointer;
9639
10197
  font-size: 1.4rem;
9640
- color: var(--pa-text-primary);
10198
+ color: var(--pa-text-color-1);
9641
10199
  user-select: none;
9642
10200
  width: 100%;
9643
10201
  }
@@ -9660,7 +10218,7 @@ web-daterangepicker {
9660
10218
  display: block;
9661
10219
  margin-top: 0.4rem;
9662
10220
  font-size: 1.2rem;
9663
- color: var(--pa-text-secondary);
10221
+ color: var(--pa-text-color-2);
9664
10222
  }
9665
10223
  .pa-checkbox-list__actions {
9666
10224
  position: absolute;
@@ -9818,9 +10376,6 @@ web-daterangepicker {
9818
10376
  background-color: var(--pa-accent-light);
9819
10377
  }
9820
10378
 
9821
- /* ========================================
9822
- Reset and Base Styles
9823
- ======================================== */
9824
10379
  /* ========================================
9825
10380
  Table Components
9826
10381
  Tables, virtual tables, with striped, hover, and spacing variants
@@ -9849,11 +10404,11 @@ web-daterangepicker {
9849
10404
  .pa-table th {
9850
10405
  background-color: var(--pa-table-header-bg);
9851
10406
  font-weight: 600;
9852
- color: var(--pa-text-primary);
10407
+ color: var(--pa-text-color-1);
9853
10408
  border-bottom: 2px solid var(--pa-border-color);
9854
10409
  }
9855
10410
  .pa-table td {
9856
- color: var(--pa-text-primary);
10411
+ color: var(--pa-text-color-1);
9857
10412
  background-color: var(--pa-table-bg);
9858
10413
  height: 3.5rem0.8rem;
9859
10414
  }
@@ -9948,7 +10503,7 @@ web-daterangepicker {
9948
10503
  text-align: center;
9949
10504
  }
9950
10505
  .pa-pager__text {
9951
- color: var(--pa-text-secondary);
10506
+ color: var(--pa-text-color-2);
9952
10507
  font-size: 1.4rem;
9953
10508
  }
9954
10509
 
@@ -9982,7 +10537,7 @@ web-daterangepicker {
9982
10537
  background-color: transparent;
9983
10538
  border: 1px solid var(--pa-border-color);
9984
10539
  border-radius: 4px;
9985
- color: var(--pa-text-primary);
10540
+ color: var(--pa-text-color-1);
9986
10541
  font-size: 1.4rem;
9987
10542
  cursor: pointer;
9988
10543
  transition: all 0.1s ease-out;
@@ -10010,7 +10565,7 @@ web-daterangepicker {
10010
10565
  color: inherit;
10011
10566
  }
10012
10567
  .pa-load-more__count {
10013
- color: var(--pa-text-secondary);
10568
+ color: var(--pa-text-color-2);
10014
10569
  font-size: 1.2rem;
10015
10570
  margin-left: 0.4rem;
10016
10571
  }
@@ -10040,7 +10595,7 @@ web-daterangepicker {
10040
10595
  font-weight: 600;
10041
10596
  border-right: 1px solid var(--pa-border-color);
10042
10597
  background: var(--pa-table-header-bg);
10043
- color: var(--pa-text-primary);
10598
+ color: var(--pa-text-color-1);
10044
10599
  }
10045
10600
 
10046
10601
  .pa-virtual-table__header-cell:last-child {
@@ -10072,7 +10627,7 @@ web-daterangepicker {
10072
10627
  overflow: hidden;
10073
10628
  text-overflow: ellipsis;
10074
10629
  white-space: nowrap;
10075
- color: var(--pa-text-primary);
10630
+ color: var(--pa-text-color-1);
10076
10631
  background-color: inherit;
10077
10632
  }
10078
10633
 
@@ -10178,7 +10733,7 @@ web-daterangepicker {
10178
10733
  content: attr(data-label);
10179
10734
  display: block;
10180
10735
  font-weight: 600;
10181
- color: var(--pa-text-secondary);
10736
+ color: var(--pa-text-color-2);
10182
10737
  font-size: 1.2rem;
10183
10738
  margin-bottom: 0.4rem;
10184
10739
  text-transform: uppercase;
@@ -10227,9 +10782,6 @@ web-daterangepicker {
10227
10782
  }
10228
10783
  }
10229
10784
 
10230
- /* ========================================
10231
- Reset and Base Styles
10232
- ======================================== */
10233
10785
  /* ========================================
10234
10786
  Comparison Table Component
10235
10787
  Two-column and three-column comparison tables for version control, data changes, and merge operations
@@ -10256,8 +10808,8 @@ web-daterangepicker {
10256
10808
  }
10257
10809
  .pa-comparison-table__label {
10258
10810
  font-weight: 500;
10259
- color: var(--pa-text-secondary);
10260
- background-color: var(--pa-primary-bg);
10811
+ color: var(--pa-text-color-2);
10812
+ background-color: var(--pa-main-bg);
10261
10813
  }
10262
10814
  .pa-comparison-table__value {
10263
10815
  display: flex;
@@ -10313,7 +10865,7 @@ tbody tr:hover .pa-comparison-table__copy {
10313
10865
  .pa-comparison-table__section td {
10314
10866
  background-color: var(--pa-table-header-bg);
10315
10867
  font-weight: 600;
10316
- color: var(--pa-text-secondary);
10868
+ color: var(--pa-text-color-2);
10317
10869
  padding: 0.4rem 1.6rem;
10318
10870
  border-top: 2px solid var(--pa-border-color);
10319
10871
  border-bottom: 1px solid var(--pa-border-color);
@@ -10358,9 +10910,6 @@ tbody tr:hover .pa-comparison-table__copy {
10358
10910
  }
10359
10911
  }
10360
10912
 
10361
- /* ========================================
10362
- Reset and Base Styles
10363
- ======================================== */
10364
10913
  /* Code Component */
10365
10914
  code {
10366
10915
  padding: 0.2rem 0.6rem;
@@ -10377,8 +10926,8 @@ code {
10377
10926
  font-family: "Courier New", Courier, monospace;
10378
10927
  font-size: 1.4rem;
10379
10928
  line-height: 1.8;
10380
- background-color: var(--pa-primary-bg);
10381
- color: var(--pa-text-primary);
10929
+ background-color: var(--pa-main-bg);
10930
+ color: var(--pa-text-color-1);
10382
10931
  border: 1px solid var(--pa-border-color);
10383
10932
  border-radius: 4px;
10384
10933
  overflow-x: auto;
@@ -10442,7 +10991,7 @@ code {
10442
10991
  .pa-code-block__title {
10443
10992
  font-size: 1.4rem;
10444
10993
  font-weight: 600;
10445
- color: var(--pa-text-secondary);
10994
+ color: var(--pa-text-color-2);
10446
10995
  margin: 0;
10447
10996
  }
10448
10997
  .pa-code-block__body {
@@ -10468,7 +11017,7 @@ code {
10468
11017
  }
10469
11018
 
10470
11019
  .pa-code-comment {
10471
- color: var(--pa-text-secondary);
11020
+ color: var(--pa-text-color-2);
10472
11021
  font-style: italic;
10473
11022
  }
10474
11023
 
@@ -10480,9 +11029,6 @@ code {
10480
11029
  color: #dd4a68;
10481
11030
  }
10482
11031
 
10483
- /* ========================================
10484
- Reset and Base Styles
10485
- ======================================== */
10486
11032
  /* ========================================
10487
11033
  Pager and Load More Components
10488
11034
  Pagination controls and load more buttons
@@ -10529,7 +11075,7 @@ code {
10529
11075
  text-align: center;
10530
11076
  }
10531
11077
  .pa-pager__text {
10532
- color: var(--pa-text-secondary);
11078
+ color: var(--pa-text-color-2);
10533
11079
  font-size: 1.4rem;
10534
11080
  }
10535
11081
 
@@ -10563,7 +11109,7 @@ code {
10563
11109
  background-color: transparent;
10564
11110
  border: 1px solid var(--pa-border-color);
10565
11111
  border-radius: 4px;
10566
- color: var(--pa-text-primary);
11112
+ color: var(--pa-text-color-1);
10567
11113
  font-size: 1.4rem;
10568
11114
  cursor: pointer;
10569
11115
  transition: all 0.1s ease-out;
@@ -10591,36 +11137,34 @@ code {
10591
11137
  color: inherit;
10592
11138
  }
10593
11139
  .pa-load-more__count {
10594
- color: var(--pa-text-secondary);
11140
+ color: var(--pa-text-color-2);
10595
11141
  font-size: 1.2rem;
10596
11142
  margin-left: 0.4rem;
10597
11143
  }
10598
11144
 
10599
- /* ========================================
10600
- Reset and Base Styles
10601
- ======================================== */
10602
11145
  /* ========================================
10603
11146
  Profile Panel Components
10604
11147
  Profile panel and header button
10605
11148
  ======================================== */
10606
11149
  :root {
10607
- --pa-profile-panel-width: 20vw;
10608
- --pa-profile-panel-max-width: 48rem;
11150
+ --pa-local-profile-panel-width: 20vw;
11151
+ --pa-local-profile-panel-max-width: 48rem;
10609
11152
  }
10610
11153
 
10611
11154
  :where(.pa-profile-panel__content) {
10612
- width: var(--pa-profile-panel-width);
10613
- max-width: var(--pa-profile-panel-max-width);
11155
+ width: var(--pa-local-profile-panel-width);
11156
+ max-width: var(--pa-local-profile-panel-max-width);
10614
11157
  }
10615
11158
 
10616
11159
  .pa-header__profile-btn {
10617
11160
  display: flex;
10618
11161
  align-items: center;
11162
+ gap: 0.4rem;
10619
11163
  background: none;
10620
11164
  border: none;
10621
11165
  padding: 0.4rem 0.8rem;
10622
11166
  border-radius: 4px;
10623
- color: var(--pa-text-primary);
11167
+ color: var(--pa-header-text);
10624
11168
  cursor: pointer;
10625
11169
  font-size: 1.4rem;
10626
11170
  transition: background-color 0.1s ease-out;
@@ -10635,7 +11179,7 @@ code {
10635
11179
 
10636
11180
  .pa-header__profile-name {
10637
11181
  font-weight: 500;
10638
- color: #2c3e50;
11182
+ color: var(--pa-header-profile-name-color);
10639
11183
  }
10640
11184
 
10641
11185
  .pa-profile-panel {
@@ -10714,7 +11258,7 @@ code {
10714
11258
  margin: 0 0 0.4rem 0;
10715
11259
  font-size: 1.8rem;
10716
11260
  font-weight: 600;
10717
- color: var(--pa-text-primary);
11261
+ color: var(--pa-text-color-1);
10718
11262
  overflow: hidden;
10719
11263
  text-overflow: ellipsis;
10720
11264
  white-space: nowrap;
@@ -10722,7 +11266,7 @@ code {
10722
11266
  .pa-profile-panel__email {
10723
11267
  margin: 0 0 0.8rem 0;
10724
11268
  font-size: 1.4rem;
10725
- color: var(--pa-text-secondary);
11269
+ color: var(--pa-text-color-2);
10726
11270
  overflow: hidden;
10727
11271
  text-overflow: ellipsis;
10728
11272
  white-space: nowrap;
@@ -10750,7 +11294,7 @@ code {
10750
11294
  display: flex;
10751
11295
  align-items: center;
10752
11296
  justify-content: center;
10753
- color: var(--pa-text-secondary);
11297
+ color: var(--pa-text-color-2);
10754
11298
  border-radius: 4px;
10755
11299
  transition: background-color 0.1s ease-out, color 0.1s ease-out;
10756
11300
  }
@@ -10783,7 +11327,7 @@ code {
10783
11327
  align-items: center;
10784
11328
  gap: 1.2rem;
10785
11329
  padding: 0.8rem 1.6rem;
10786
- color: var(--pa-text-primary);
11330
+ color: var(--pa-text-color-1);
10787
11331
  text-decoration: none;
10788
11332
  border-radius: 4px;
10789
11333
  transition: background-color 0.1s ease-out, color 0.1s ease-out;
@@ -10842,6 +11386,9 @@ code {
10842
11386
  color: var(--pa-header-text);
10843
11387
  border-bottom-color: var(--pa-accent);
10844
11388
  }
11389
+ .pa-profile-panel__tabs--icon-only .pa-profile-panel__tab-text {
11390
+ display: none;
11391
+ }
10845
11392
  .pa-profile-panel__favorites ul {
10846
11393
  list-style: none;
10847
11394
  margin: 0;
@@ -10855,7 +11402,7 @@ code {
10855
11402
  align-items: center;
10856
11403
  gap: 1.2rem;
10857
11404
  padding: 0.8rem 1.6rem;
10858
- color: var(--pa-text-primary);
11405
+ color: var(--pa-text-color-1);
10859
11406
  text-decoration: none;
10860
11407
  border-radius: 4px;
10861
11408
  cursor: pointer;
@@ -10887,7 +11434,7 @@ code {
10887
11434
  background: none;
10888
11435
  border: none;
10889
11436
  padding: 0.4rem;
10890
- color: var(--pa-text-secondary);
11437
+ color: var(--pa-text-color-2);
10891
11438
  cursor: pointer;
10892
11439
  border-radius: 4px;
10893
11440
  font-size: 1.4rem;
@@ -10895,7 +11442,7 @@ code {
10895
11442
  transition: opacity 0.1s ease-out, color 0.1s ease-out, background-color 0.1s ease-out;
10896
11443
  }
10897
11444
  .pa-profile-panel__favorite-remove:hover {
10898
- color: var(--pa-danger);
11445
+ color: var(--pa-danger-bg);
10899
11446
  background-color: var(--pa-danger-bg-light);
10900
11447
  }
10901
11448
  .pa-profile-panel__favorite-item:hover .pa-profile-panel__favorite-remove {
@@ -10915,9 +11462,6 @@ code {
10915
11462
  display: none;
10916
11463
  }
10917
11464
  }
10918
- /* ========================================
10919
- Reset and Base Styles
10920
- ======================================== */
10921
11465
  /* ========================================
10922
11466
  Modal Components
10923
11467
  Modal windows with overlay, sizes, and themed headers
@@ -10997,14 +11541,14 @@ code {
10997
11541
  margin: 0;
10998
11542
  font-size: 1.8rem;
10999
11543
  font-weight: 600;
11000
- color: var(--pa-text-primary);
11544
+ color: var(--pa-text-color-1);
11001
11545
  }
11002
11546
 
11003
11547
  .pa-modal__body {
11004
11548
  padding: 1.2rem 1.6rem;
11005
11549
  flex: 1;
11006
11550
  overflow-y: auto;
11007
- color: var(--pa-text-primary);
11551
+ color: var(--pa-text-color-1);
11008
11552
  }
11009
11553
 
11010
11554
  .pa-modal__footer {
@@ -11082,9 +11626,6 @@ code {
11082
11626
  padding: 1.2rem 1.6rem;
11083
11627
  }
11084
11628
  }
11085
- /* ========================================
11086
- Reset and Base Styles
11087
- ======================================== */
11088
11629
  /* ========================================
11089
11630
  Toast Notifications
11090
11631
  Temporary notification messages that auto-dismiss
@@ -11188,13 +11729,13 @@ code {
11188
11729
  .pa-toast__title {
11189
11730
  font-weight: 600;
11190
11731
  margin: 0 0 0.4rem 0;
11191
- color: var(--pa-text-primary);
11732
+ color: var(--pa-text-color-1);
11192
11733
  font-size: 1.4rem;
11193
11734
  }
11194
11735
 
11195
11736
  .pa-toast__message {
11196
11737
  margin: 0;
11197
- color: var(--pa-text-secondary);
11738
+ color: var(--pa-text-color-2);
11198
11739
  font-size: 1.4rem;
11199
11740
  line-height: 1.5;
11200
11741
  }
@@ -11203,7 +11744,7 @@ code {
11203
11744
  flex-shrink: 0;
11204
11745
  background: none;
11205
11746
  border: none;
11206
- color: var(--pa-text-secondary);
11747
+ color: var(--pa-text-color-2);
11207
11748
  cursor: pointer;
11208
11749
  padding: 0;
11209
11750
  width: 2.4rem;
@@ -11218,7 +11759,7 @@ code {
11218
11759
  }
11219
11760
  .pa-toast__close:hover {
11220
11761
  background-color: var(--pa-accent-hover);
11221
- color: var(--pa-text-primary);
11762
+ color: var(--pa-text-color-1);
11222
11763
  }
11223
11764
  .pa-toast__close:focus {
11224
11765
  outline: 2px solid var(--pa-accent);
@@ -11306,9 +11847,6 @@ code {
11306
11847
  max-width: 100%;
11307
11848
  }
11308
11849
  }
11309
- /* ========================================
11310
- Reset and Base Styles
11311
- ======================================== */
11312
11850
  /* ========================================
11313
11851
  Timeline Component
11314
11852
  ======================================== */
@@ -11341,7 +11879,7 @@ code {
11341
11879
  top: 0;
11342
11880
  width: 15px;
11343
11881
  height: 15px;
11344
- background: var(--pa-primary-bg);
11882
+ background: var(--pa-main-bg);
11345
11883
  border: 1px solid #007bff;
11346
11884
  border-radius: 50%;
11347
11885
  box-shadow: 3px 3px 0 rgba(0, 123, 255, 0.3);
@@ -11367,8 +11905,8 @@ code {
11367
11905
  box-shadow: 3px 3px 0 rgba(23, 162, 184, 0.3);
11368
11906
  }
11369
11907
  .pa-timeline--simple .pa-timeline__item--secondary::before {
11370
- border-color: var(--pa-text-secondary);
11371
- box-shadow: 3px 3px 0 rgba(var(--pa-text-secondary), 0.3);
11908
+ border-color: var(--pa-text-color-2);
11909
+ box-shadow: 3px 3px 0 rgba(var(--pa-text-color-2), 0.3);
11372
11910
  }
11373
11911
  .pa-timeline--simple .pa-timeline__item--filled::before {
11374
11912
  background: #007bff;
@@ -11389,18 +11927,18 @@ code {
11389
11927
  background: #17a2b8;
11390
11928
  }
11391
11929
  .pa-timeline--simple .pa-timeline__item--filled.pa-timeline__item--secondary::before {
11392
- background: var(--pa-text-secondary);
11930
+ background: var(--pa-text-color-2);
11393
11931
  }
11394
11932
  .pa-timeline--simple .pa-timeline__time {
11395
11933
  display: block;
11396
11934
  font-size: 1.4rem;
11397
11935
  font-weight: 600;
11398
- color: var(--pa-text-primary);
11936
+ color: var(--pa-text-color-1);
11399
11937
  margin-bottom: 0.4rem;
11400
11938
  }
11401
11939
  .pa-timeline--simple .pa-timeline__content {
11402
11940
  font-size: 1.4rem;
11403
- color: var(--pa-text-secondary);
11941
+ color: var(--pa-text-color-2);
11404
11942
  line-height: 1.8;
11405
11943
  margin-top: 0.6rem;
11406
11944
  }
@@ -11447,7 +11985,7 @@ code {
11447
11985
  height: 16px;
11448
11986
  top: calc(50% - 8px);
11449
11987
  right: -8px;
11450
- background: var(--pa-primary-bg);
11988
+ background: var(--pa-main-bg);
11451
11989
  border: 2px solid #007bff;
11452
11990
  border-radius: 50%;
11453
11991
  z-index: 1;
@@ -11483,7 +12021,7 @@ code {
11483
12021
  height: 16px;
11484
12022
  top: calc(50% - 8px);
11485
12023
  left: -8px;
11486
- background: var(--pa-primary-bg);
12024
+ background: var(--pa-main-bg);
11487
12025
  border: 2px solid #007bff;
11488
12026
  border-radius: 50%;
11489
12027
  z-index: 1;
@@ -11533,7 +12071,7 @@ code {
11533
12071
  margin: 0 0 0.8rem 0;
11534
12072
  font-size: 1.8rem;
11535
12073
  font-weight: 400;
11536
- color: var(--pa-text-primary);
12074
+ color: var(--pa-text-color-1);
11537
12075
  }
11538
12076
  .pa-timeline--alternating .pa-timeline__content p {
11539
12077
  margin: 0;
@@ -11673,7 +12211,7 @@ code {
11673
12211
  .pa-timeline--feed .pa-timeline__content {
11674
12212
  flex: 1;
11675
12213
  font-size: 1.4rem;
11676
- color: var(--pa-text-secondary);
12214
+ color: var(--pa-text-color-2);
11677
12215
  line-height: 1.8;
11678
12216
  }
11679
12217
  .pa-timeline--feed .pa-timeline__content a {
@@ -11685,7 +12223,7 @@ code {
11685
12223
  text-decoration: underline;
11686
12224
  }
11687
12225
  .pa-timeline--feed .pa-timeline__content time {
11688
- color: var(--pa-text-secondary);
12226
+ color: var(--pa-text-color-2);
11689
12227
  font-size: 1.2rem;
11690
12228
  }
11691
12229
  .pa-timeline--feed .pa-timeline__avatar {
@@ -11711,7 +12249,7 @@ code {
11711
12249
  }
11712
12250
  .pa-timeline--feed .pa-timeline__comment p {
11713
12251
  margin: 0 0 0.8rem 0;
11714
- color: var(--pa-text-primary);
12252
+ color: var(--pa-text-color-1);
11715
12253
  line-height: 1.8;
11716
12254
  }
11717
12255
  .pa-timeline--feed .pa-timeline__comment p:last-child {
@@ -11734,7 +12272,7 @@ code {
11734
12272
  .pa-timeline--feed .pa-timeline__date-label {
11735
12273
  font-size: 1.4rem;
11736
12274
  font-weight: 600;
11737
- color: var(--pa-text-primary);
12275
+ color: var(--pa-text-color-1);
11738
12276
  text-transform: uppercase;
11739
12277
  letter-spacing: 0.5px;
11740
12278
  }
@@ -11742,7 +12280,7 @@ code {
11742
12280
  flex-shrink: 0;
11743
12281
  width: 50px;
11744
12282
  font-size: 1.2rem;
11745
- color: var(--pa-text-secondary);
12283
+ color: var(--pa-text-color-2);
11746
12284
  font-weight: 500;
11747
12285
  text-align: right;
11748
12286
  padding-right: 0.8rem;
@@ -11761,16 +12299,13 @@ code {
11761
12299
  .pa-timeline__loader-text {
11762
12300
  margin-top: 0.8rem;
11763
12301
  font-size: 1.4rem;
11764
- color: var(--pa-text-secondary);
12302
+ color: var(--pa-text-color-2);
11765
12303
  }
11766
12304
  .pa-timeline__load-more-wrapper {
11767
12305
  text-align: center;
11768
12306
  margin-top: 2.4rem;
11769
12307
  }
11770
12308
 
11771
- /* ========================================
11772
- Reset and Base Styles
11773
- ======================================== */
11774
12309
  /* ========================================
11775
12310
  Command Palette Component
11776
12311
  macOS Spotlight-style search with context switching
@@ -11849,7 +12384,7 @@ code {
11849
12384
  border: 1px solid var(--pa-border-color);
11850
12385
  border-radius: 4px;
11851
12386
  background-color: var(--pa-input-bg);
11852
- color: var(--pa-text-primary);
12387
+ color: var(--pa-text-color-1);
11853
12388
  outline: none;
11854
12389
  transition: border-color 0.1s ease-out;
11855
12390
  }
@@ -11858,7 +12393,7 @@ code {
11858
12393
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.05);
11859
12394
  }
11860
12395
  .pa-command-palette__input::placeholder {
11861
- color: var(--pa-text-secondary);
12396
+ color: var(--pa-text-color-2);
11862
12397
  opacity: 0.5;
11863
12398
  }
11864
12399
  .pa-command-palette__context {
@@ -11898,7 +12433,7 @@ code {
11898
12433
  .pa-command-palette__empty {
11899
12434
  padding: 4.8rem 0.8rem;
11900
12435
  text-align: center;
11901
- color: var(--pa-text-secondary);
12436
+ color: var(--pa-text-color-2);
11902
12437
  font-size: 1.4rem;
11903
12438
  }
11904
12439
  .pa-command-palette__loader {
@@ -11907,7 +12442,7 @@ code {
11907
12442
  align-items: center;
11908
12443
  justify-content: center;
11909
12444
  gap: 0.8rem;
11910
- color: var(--pa-text-secondary);
12445
+ color: var(--pa-text-color-2);
11911
12446
  font-size: 1.4rem;
11912
12447
  }
11913
12448
  .pa-command-palette__loader .pa-spinner {
@@ -11947,7 +12482,7 @@ code {
11947
12482
  .pa-command-palette__item-title {
11948
12483
  font-size: 1.4rem;
11949
12484
  font-weight: 500;
11950
- color: var(--pa-text-primary);
12485
+ color: var(--pa-text-color-1);
11951
12486
  margin: 0;
11952
12487
  white-space: nowrap;
11953
12488
  overflow: hidden;
@@ -11962,7 +12497,7 @@ code {
11962
12497
  }
11963
12498
  .pa-command-palette__item-meta {
11964
12499
  font-size: 1.2rem;
11965
- color: var(--pa-text-secondary);
12500
+ color: var(--pa-text-color-2);
11966
12501
  margin: 0;
11967
12502
  margin-top: 2px;
11968
12503
  white-space: nowrap;
@@ -11974,7 +12509,7 @@ code {
11974
12509
  font-size: 1.2rem;
11975
12510
  padding: 2px 0.4rem;
11976
12511
  background-color: #e9ecef;
11977
- color: var(--pa-text-secondary);
12512
+ color: var(--pa-text-color-2);
11978
12513
  border-radius: 2px;
11979
12514
  }
11980
12515
  .pa-command-palette__footer {
@@ -11983,7 +12518,7 @@ code {
11983
12518
  display: flex;
11984
12519
  gap: 1.6rem;
11985
12520
  font-size: 1.2rem;
11986
- color: var(--pa-text-secondary);
12521
+ color: var(--pa-text-color-2);
11987
12522
  }
11988
12523
  .pa-command-palette__hint {
11989
12524
  display: flex;
@@ -11995,7 +12530,7 @@ code {
11995
12530
  background-color: #e9ecef;
11996
12531
  border: 1px solid var(--pa-border-color);
11997
12532
  border-radius: 2px;
11998
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
12533
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
11999
12534
  font-weight: 500;
12000
12535
  font-size: 1rem;
12001
12536
  line-height: 1;
@@ -12004,7 +12539,7 @@ code {
12004
12539
  padding: 0.8rem 0.8rem 0.4rem;
12005
12540
  font-size: 1.2rem;
12006
12541
  font-weight: 600;
12007
- color: var(--pa-text-secondary);
12542
+ color: var(--pa-text-color-2);
12008
12543
  text-transform: uppercase;
12009
12544
  letter-spacing: 0.5px;
12010
12545
  }
@@ -12012,7 +12547,7 @@ code {
12012
12547
  padding: 0.4rem 0.8rem;
12013
12548
  text-align: center;
12014
12549
  font-size: 1.2rem;
12015
- color: var(--pa-text-secondary);
12550
+ color: var(--pa-text-color-2);
12016
12551
  border-top: 1px solid var(--pa-border-color);
12017
12552
  }
12018
12553
 
@@ -12094,7 +12629,7 @@ code {
12094
12629
  }
12095
12630
  .pa-navbar-search__placeholder {
12096
12631
  flex: 1;
12097
- color: var(--pa-text-secondary);
12632
+ color: var(--pa-text-color-2);
12098
12633
  white-space: nowrap;
12099
12634
  overflow: hidden;
12100
12635
  text-overflow: ellipsis;
@@ -12112,10 +12647,10 @@ code {
12112
12647
  min-width: 2rem;
12113
12648
  height: 2rem;
12114
12649
  padding: 0 0.4rem;
12115
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
12650
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
12116
12651
  font-size: 1rem;
12117
12652
  font-weight: 500;
12118
- color: var(--pa-text-secondary);
12653
+ color: var(--pa-text-color-2);
12119
12654
  background-color: #e9ecef;
12120
12655
  border: 1px solid var(--pa-border-color);
12121
12656
  border-radius: 2px;
@@ -12151,7 +12686,7 @@ code {
12151
12686
  font-weight: 600;
12152
12687
  text-transform: uppercase;
12153
12688
  letter-spacing: 0.5px;
12154
- color: var(--pa-text-secondary);
12689
+ color: var(--pa-text-color-2);
12155
12690
  margin: 0;
12156
12691
  padding-bottom: 0.4rem;
12157
12692
  border-bottom: 1px solid var(--pa-border-color);
@@ -12185,10 +12720,10 @@ code {
12185
12720
  min-width: 2.4rem;
12186
12721
  height: 2.4rem;
12187
12722
  padding: 0 0.4rem;
12188
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
12723
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
12189
12724
  font-size: 1rem;
12190
12725
  font-weight: 500;
12191
- color: var(--pa-text-primary);
12726
+ color: var(--pa-text-color-1);
12192
12727
  background-color: #e9ecef;
12193
12728
  border: 1px solid var(--pa-border-color);
12194
12729
  border-radius: 2px;
@@ -12196,24 +12731,21 @@ code {
12196
12731
  }
12197
12732
 
12198
12733
  .pa-shortcut-help__separator {
12199
- color: var(--pa-text-secondary);
12734
+ color: var(--pa-text-color-2);
12200
12735
  font-size: 1.2rem;
12201
12736
  }
12202
12737
 
12203
12738
  .pa-shortcut-help__description {
12204
- color: var(--pa-text-primary);
12739
+ color: var(--pa-text-color-1);
12205
12740
  font-size: 1.4rem;
12206
12741
  }
12207
12742
 
12208
12743
  .pa-shortcut-help__empty {
12209
12744
  text-align: center;
12210
- color: var(--pa-text-secondary);
12745
+ color: var(--pa-text-color-2);
12211
12746
  padding: 3.2rem;
12212
12747
  }
12213
12748
 
12214
- /* ========================================
12215
- Reset and Base Styles
12216
- ======================================== */
12217
12749
  /**
12218
12750
  * Logic Tree Renderer - Scratch-style visual query representation
12219
12751
  * Renders nested blocks showing logical flow and precedence
@@ -12223,16 +12755,16 @@ code {
12223
12755
  background: #f9fafb;
12224
12756
  border-radius: 4px;
12225
12757
  min-height: 6.4rem;
12226
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
12758
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
12227
12759
  }
12228
12760
  .pa-logic-tree__empty {
12229
12761
  text-align: center;
12230
- color: var(--pa-text-secondary);
12762
+ color: var(--pa-text-color-2);
12231
12763
  padding: 3.2rem;
12232
12764
  font-style: italic;
12233
12765
  }
12234
12766
  .pa-logic-tree__empty-branch {
12235
- color: var(--pa-text-secondary);
12767
+ color: var(--pa-text-color-2);
12236
12768
  font-style: italic;
12237
12769
  padding: 0.8rem 1.2rem;
12238
12770
  background: #f9fafb;
@@ -12259,7 +12791,7 @@ code {
12259
12791
  }
12260
12792
  .pa-logic-tree__block--condition {
12261
12793
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
12262
- border-color: var(--pa-primary-bg);
12794
+ border-color: var(--pa-main-bg);
12263
12795
  border-left-width: 6.4px;
12264
12796
  }
12265
12797
  .pa-logic-tree__block--logical {
@@ -12359,7 +12891,7 @@ code {
12359
12891
  .pa-logic-tree__group-label {
12360
12892
  font-weight: 500;
12361
12893
  font-size: 1.4rem;
12362
- color: var(--pa-text-secondary);
12894
+ color: var(--pa-text-color-2);
12363
12895
  margin-bottom: 0.8rem;
12364
12896
  padding-bottom: 0.8rem;
12365
12897
  border-bottom: 1.6px dashed #e1e5e9;
@@ -12429,9 +12961,6 @@ code {
12429
12961
  opacity: 1;
12430
12962
  }
12431
12963
  }
12432
- /* ========================================
12433
- Reset and Base Styles
12434
- ======================================== */
12435
12964
  /* ========================================
12436
12965
  Notification Bell Component
12437
12966
  Bell button with badge counter and dropdown panel
@@ -12451,7 +12980,7 @@ code {
12451
12980
  background: none;
12452
12981
  border: none;
12453
12982
  border-radius: 4px;
12454
- color: var(--pa-text-primary);
12983
+ color: var(--pa-header-text);
12455
12984
  cursor: pointer;
12456
12985
  transition: background-color 0.1s ease-out;
12457
12986
  }
@@ -12517,7 +13046,7 @@ code {
12517
13046
  margin: 0;
12518
13047
  font-size: 1.4rem;
12519
13048
  font-weight: 600;
12520
- color: var(--pa-text-primary);
13049
+ color: var(--pa-text-color-1);
12521
13050
  }
12522
13051
 
12523
13052
  .pa-notifications__mark-read {
@@ -12592,8 +13121,8 @@ code {
12592
13121
  color: #dc3545;
12593
13122
  }
12594
13123
  .pa-notifications__icon-wrapper--secondary {
12595
- background-color: rgba(var(--pa-text-secondary), 0.1);
12596
- color: var(--pa-text-secondary);
13124
+ background-color: rgba(var(--pa-text-color-2), 0.1);
13125
+ color: var(--pa-text-color-2);
12597
13126
  }
12598
13127
 
12599
13128
  .pa-notifications__content {
@@ -12604,12 +13133,12 @@ code {
12604
13133
  margin: 0 0 0.2rem 0;
12605
13134
  font-size: 1.2rem;
12606
13135
  font-weight: 600;
12607
- color: var(--pa-text-primary);
13136
+ color: var(--pa-text-color-1);
12608
13137
  }
12609
13138
  .pa-notifications__content p {
12610
13139
  margin: 0 0 0.2rem 0;
12611
13140
  font-size: 1.2rem;
12612
- color: var(--pa-text-secondary);
13141
+ color: var(--pa-text-color-2);
12613
13142
  line-height: 1.3;
12614
13143
  overflow: hidden;
12615
13144
  text-overflow: ellipsis;
@@ -12620,7 +13149,7 @@ code {
12620
13149
 
12621
13150
  .pa-notifications__time {
12622
13151
  font-size: 1rem;
12623
- color: var(--pa-text-secondary);
13152
+ color: var(--pa-text-color-2);
12624
13153
  font-weight: 400;
12625
13154
  opacity: 0.7;
12626
13155
  }
@@ -12697,9 +13226,6 @@ code {
12697
13226
  border-top: 1px solid var(--pa-border-color);
12698
13227
  }
12699
13228
  }
12700
- /* ========================================
12701
- Reset and Base Styles
12702
- ======================================== */
12703
13229
  /* ========================================
12704
13230
  Popconfirm Component
12705
13231
  Small confirmation dialog anchored to trigger button
@@ -12741,7 +13267,7 @@ code {
12741
13267
  .pa-popconfirm__message p {
12742
13268
  margin: 0;
12743
13269
  font-size: 1.4rem;
12744
- color: var(--pa-text-primary);
13270
+ color: var(--pa-text-color-1);
12745
13271
  line-height: 1.5;
12746
13272
  }
12747
13273
 
@@ -12834,9 +13360,6 @@ code {
12834
13360
  padding: 0.4rem 0.8rem;
12835
13361
  }
12836
13362
 
12837
- /* ========================================
12838
- Reset and Base Styles
12839
- ======================================== */
12840
13363
  /* ========================================
12841
13364
  Settings Panel Component
12842
13365
  Floating panel for global settings management
@@ -12873,7 +13396,7 @@ code {
12873
13396
  right: 325px;
12874
13397
  }
12875
13398
  .pa-settings-panel__content {
12876
- background: var(--pa-content-bg);
13399
+ background: var(--pa-subtle-bg);
12877
13400
  border: 1px solid var(--pa-border-color);
12878
13401
  border-right: none;
12879
13402
  border-radius: 4px 0 0 4px;
@@ -12889,7 +13412,7 @@ code {
12889
13412
  margin: 0 0 2.4rem 0;
12890
13413
  padding-bottom: 1.2rem;
12891
13414
  border-bottom: 2px solid var(--pa-border-color);
12892
- color: var(--pa-text-primary);
13415
+ color: var(--pa-text-color-1);
12893
13416
  font-size: 1.8rem;
12894
13417
  font-weight: 600;
12895
13418
  }
@@ -12902,7 +13425,7 @@ code {
12902
13425
  .pa-settings-panel__label {
12903
13426
  display: block;
12904
13427
  margin-bottom: 0.8rem;
12905
- color: var(--pa-text-primary);
13428
+ color: var(--pa-text-color-1);
12906
13429
  font-size: 1.4rem;
12907
13430
  font-weight: 500;
12908
13431
  }
@@ -12912,7 +13435,7 @@ code {
12912
13435
  border: 1px solid var(--pa-border-color);
12913
13436
  border-radius: 4px;
12914
13437
  background: var(--pa-input-bg);
12915
- color: var(--pa-text-primary);
13438
+ color: var(--pa-text-color-1);
12916
13439
  font-size: 1.4rem;
12917
13440
  cursor: pointer;
12918
13441
  }
@@ -12930,7 +13453,7 @@ code {
12930
13453
  display: flex;
12931
13454
  align-items: center;
12932
13455
  cursor: pointer;
12933
- color: var(--pa-text-primary);
13456
+ color: var(--pa-text-color-1);
12934
13457
  font-size: 1.4rem;
12935
13458
  }
12936
13459
  .pa-settings-panel__checkbox input[type=checkbox] {
@@ -12948,9 +13471,6 @@ code {
12948
13471
  transform: rotate(180deg);
12949
13472
  }
12950
13473
 
12951
- /* ========================================
12952
- Reset and Base Styles
12953
- ======================================== */
12954
13474
  /* ========================================
12955
13475
  Utility Components
12956
13476
  Font utilities, compact mode, component showcase
@@ -13226,7 +13746,7 @@ html.font-size-4xl {
13226
13746
 
13227
13747
  .pa-text {
13228
13748
  font-size: 1.4rem;
13229
- color: var(--pa-text-primary);
13749
+ color: var(--pa-text-color-1);
13230
13750
  }
13231
13751
  .pa-text--xs {
13232
13752
  font-size: 1rem;
@@ -13241,10 +13761,10 @@ html.font-size-4xl {
13241
13761
  font-size: 1.8rem;
13242
13762
  }
13243
13763
  .pa-text--primary {
13244
- color: var(--pa-text-primary);
13764
+ color: var(--pa-text-color-1);
13245
13765
  }
13246
13766
  .pa-text--secondary {
13247
- color: var(--pa-text-secondary);
13767
+ color: var(--pa-text-color-2);
13248
13768
  }
13249
13769
  .pa-text--left {
13250
13770
  text-align: left;
@@ -13257,7 +13777,7 @@ html.font-size-4xl {
13257
13777
  }
13258
13778
  .pa-text--caption {
13259
13779
  font-size: 1.2rem;
13260
- color: var(--pa-text-secondary);
13780
+ color: var(--pa-text-color-2);
13261
13781
  margin-bottom: 0.8rem;
13262
13782
  }
13263
13783
  .pa-text--lead {
@@ -13269,34 +13789,98 @@ html.font-size-4xl {
13269
13789
  gap: 0;
13270
13790
  }
13271
13791
 
13792
+ .row-gap-0 {
13793
+ row-gap: 0;
13794
+ }
13795
+
13796
+ .column-gap-0 {
13797
+ column-gap: 0;
13798
+ }
13799
+
13272
13800
  .gap-xs {
13273
13801
  gap: 0.4rem;
13274
13802
  }
13275
13803
 
13804
+ .row-gap-xs {
13805
+ row-gap: 0.4rem;
13806
+ }
13807
+
13808
+ .column-gap-xs {
13809
+ column-gap: 0.4rem;
13810
+ }
13811
+
13276
13812
  .gap-sm {
13277
13813
  gap: 0.8rem;
13278
13814
  }
13279
13815
 
13816
+ .row-gap-sm {
13817
+ row-gap: 0.8rem;
13818
+ }
13819
+
13820
+ .column-gap-sm {
13821
+ column-gap: 0.8rem;
13822
+ }
13823
+
13280
13824
  .gap-md {
13281
13825
  gap: 1.2rem;
13282
13826
  }
13283
13827
 
13828
+ .row-gap-md {
13829
+ row-gap: 1.2rem;
13830
+ }
13831
+
13832
+ .column-gap-md {
13833
+ column-gap: 1.2rem;
13834
+ }
13835
+
13284
13836
  .gap-base {
13285
13837
  gap: 1.6rem;
13286
13838
  }
13287
13839
 
13840
+ .row-gap-base {
13841
+ row-gap: 1.6rem;
13842
+ }
13843
+
13844
+ .column-gap-base {
13845
+ column-gap: 1.6rem;
13846
+ }
13847
+
13288
13848
  .gap-lg {
13289
13849
  gap: 2.4rem;
13290
13850
  }
13291
13851
 
13852
+ .row-gap-lg {
13853
+ row-gap: 2.4rem;
13854
+ }
13855
+
13856
+ .column-gap-lg {
13857
+ column-gap: 2.4rem;
13858
+ }
13859
+
13292
13860
  .gap-xl {
13293
13861
  gap: 3.2rem;
13294
13862
  }
13295
13863
 
13864
+ .row-gap-xl {
13865
+ row-gap: 3.2rem;
13866
+ }
13867
+
13868
+ .column-gap-xl {
13869
+ column-gap: 3.2rem;
13870
+ }
13871
+
13296
13872
  .gap-2xl {
13297
13873
  gap: 4.8rem;
13298
13874
  }
13299
13875
 
13876
+ .row-gap-2xl {
13877
+ row-gap: 4.8rem;
13878
+ }
13879
+
13880
+ .column-gap-2xl {
13881
+ column-gap: 4.8rem;
13882
+ }
13883
+
13300
13884
  .gap-1 {
13301
13885
  gap: 0.1rem;
13302
13886
  }
@@ -13341,54 +13925,6 @@ html.font-size-4xl {
13341
13925
  gap: 2rem;
13342
13926
  }
13343
13927
 
13344
- .row-gap-0 {
13345
- row-gap: 0;
13346
- }
13347
-
13348
- .row-gap-xs {
13349
- row-gap: 0.4rem;
13350
- }
13351
-
13352
- .row-gap-sm {
13353
- row-gap: 0.8rem;
13354
- }
13355
-
13356
- .row-gap-md {
13357
- row-gap: 1.2rem;
13358
- }
13359
-
13360
- .row-gap-base {
13361
- row-gap: 1.6rem;
13362
- }
13363
-
13364
- .row-gap-lg {
13365
- row-gap: 2.4rem;
13366
- }
13367
-
13368
- .column-gap-0 {
13369
- column-gap: 0;
13370
- }
13371
-
13372
- .column-gap-xs {
13373
- column-gap: 0.4rem;
13374
- }
13375
-
13376
- .column-gap-sm {
13377
- column-gap: 0.8rem;
13378
- }
13379
-
13380
- .column-gap-md {
13381
- column-gap: 1.2rem;
13382
- }
13383
-
13384
- .column-gap-base {
13385
- column-gap: 1.6rem;
13386
- }
13387
-
13388
- .column-gap-lg {
13389
- column-gap: 2.4rem;
13390
- }
13391
-
13392
13928
  .self-start {
13393
13929
  align-self: flex-start;
13394
13930
  }