@turquoisehealth/pit-viper 2.238.1-dev.0 → 2.240.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/_site/assets/css/pit-viper-a11y.css +265 -263
  2. package/_site/assets/css/pit-viper-consumer.css +265 -263
  3. package/_site/assets/css/pit-viper-v2-scoped.css +265 -263
  4. package/_site/assets/css/pit-viper-v2.css +265 -263
  5. package/_site/assets/css/pit-viper.css +256 -254
  6. package/package.json +1 -1
  7. package/pv-components/dist/stats/vue/ai/stats.html +1 -1
  8. package/pv-components/dist/stats/vue/base/stats.html +1 -1
  9. package/pv-components/dist/stats/vue/visualizations/stats.html +1 -1
  10. package/pv-components/dist/stats/web/pv-date-time-stats.html +1 -1
  11. package/pv-components/dist/stats/web/pv-dropdown-stats.html +1 -1
  12. package/pv-components/dist/stats/web/pv-filter-modal-stats.html +1 -1
  13. package/pv-components/dist/stats/web/pv-filter-panel-stats.html +1 -1
  14. package/pv-components/dist/stats/web/pv-menu-stats.html +1 -1
  15. package/pv-components/dist/stats/web/pv-modal-stats.html +1 -1
  16. package/pv-components/dist/stats/web/pv-multi-select-button-stats.html +1 -1
  17. package/pv-components/dist/stats/web/pv-pagination-stats.html +1 -1
  18. package/pv-components/dist/stats/web/pv-query-builder-input-stats.html +1 -1
  19. package/pv-components/dist/stats/web/pv-question-stats.html +1 -1
  20. package/pv-components/dist/stats/web/pv-select-button-stats.html +1 -1
  21. package/pv-components/dist/stats/web/pv-tab-list-stats.html +1 -1
  22. package/pv-components/dist/stats/web/pv-tabs-stats.html +1 -1
  23. package/pv-components/dist/vue/ai/components/base/PvTabs/PvTabs.vue.d.ts +2 -0
  24. package/pv-components/dist/vue/ai/components/base/PvTabs/types.d.ts +5 -0
  25. package/pv-components/dist/vue/ai/pv-components-ai.mjs +2 -2
  26. package/pv-components/dist/vue/ai/pv-components-ai.mjs.map +1 -1
  27. package/pv-components/dist/vue/base/components/base/PvTabs/PvTabs.vue.d.ts +2 -0
  28. package/pv-components/dist/vue/base/components/base/PvTabs/types.d.ts +5 -0
  29. package/pv-components/dist/vue/base/pv-components-base.mjs +32 -22
  30. package/pv-components/dist/vue/base/pv-components-base.mjs.map +1 -1
  31. package/pv-components/dist/vue/visualizations/components/base/PvTabs/PvTabs.vue.d.ts +2 -0
  32. package/pv-components/dist/vue/visualizations/components/base/PvTabs/types.d.ts +5 -0
  33. package/pv-components/dist/vue/visualizations/components/charts/PvDataTableWithChart/PvDataTableWithChart.vue.d.ts +1 -0
  34. package/pv-components/dist/vue/visualizations/pv-components-visualizations.mjs +13 -12
  35. package/pv-components/dist/vue/visualizations/pv-components-visualizations.mjs.map +1 -1
  36. package/pv-components/dist/web/components/pv-date-time/pv-date-time.js +1 -1
  37. package/pv-components/dist/web/components/pv-dropdown/pv-dropdown.js +1 -1
  38. package/pv-components/dist/web/components/pv-filter-modal/pv-filter-modal.js +3 -3
  39. package/pv-components/dist/web/components/pv-filter-panel/pv-filter-panel.js +1 -1
  40. package/pv-components/dist/web/components/pv-menu/pv-menu.js +2 -2
  41. package/pv-components/dist/web/components/pv-modal/pv-modal.js +1 -1
  42. package/pv-components/dist/web/components/pv-multi-select-button/pv-multi-select-button.js +3 -3
  43. package/pv-components/dist/web/components/pv-pagination/pv-pagination.js +1 -1
  44. package/pv-components/dist/web/components/pv-query-builder-input/pv-query-builder-input.js +3 -3
  45. package/pv-components/dist/web/components/pv-question/pv-question.js +1 -1
  46. package/pv-components/dist/web/components/pv-select-button/pv-select-button.js +2 -2
  47. package/pv-components/dist/web/components/pv-tab-list/pv-tab-list.js +1 -1
  48. package/pv-components/dist/web/components/pv-tabs/pv-tabs.js +22 -12
  49. package/pv-components/dist/web/pv-components.iife.js +3 -3
  50. package/pv-components/dist/web/pv-components.iife.js.map +1 -1
@@ -20,7 +20,7 @@
20
20
  :where(*) {
21
21
  box-sizing: border-box;
22
22
  margin: 0;
23
- outline-color: #36C5BA;
23
+ outline-color: var(--color-focus-ring, #36C5BA);
24
24
  }
25
25
 
26
26
  :where(input, button, textarea, select) {
@@ -96,7 +96,7 @@
96
96
  }
97
97
 
98
98
  :where(blockquote):not(.pv-blockquote) {
99
- border: 0 solid #E3E7EA;
99
+ border: 0 solid var(--color-border, #E3E7EA);
100
100
  border-inline-start-width: 0.25rem;
101
101
  padding-inline-start: 1.5rem;
102
102
  }
@@ -422,14 +422,14 @@
422
422
  }
423
423
  [data-list-style=display]::before {
424
424
  content: counter(display) ".";
425
- color: #16696D;
425
+ color: var(--color-text-brand, #16696D);
426
426
  font-family: "Inter", sans-serif;
427
427
  font-size: var(--display-counter-list-font-size, 0.875rem);
428
428
  line-height: var(--display-counter-list-line-height, 1.4285714);
429
429
  }
430
430
 
431
431
  [data-list-incomplete] {
432
- color: #4B595C;
432
+ color: var(--color-text-subdued, #4B595C);
433
433
  }
434
434
  [data-list-incomplete]::before {
435
435
  color: #4B595C;
@@ -671,11 +671,11 @@
671
671
  }
672
672
 
673
673
  .pv-button-ghost.pv-button-inverse {
674
- color: #FFFFFF;
674
+ color: var(--color-text-inverse, #FFFFFF);
675
675
  }
676
676
  .pv-button-ghost.pv-button-inverse:not(disabled):hover, .pv-button-ghost.pv-button-inverse:not(disabled):focus-visible {
677
- color: #FFFFFF;
678
- background-color: #16696D;
677
+ color: var(--color-text-inverse, #FFFFFF);
678
+ background-color: var(--button-primary-background-color, #16696D);
679
679
  }
680
680
 
681
681
  .pv-button-ghost-destructive {
@@ -780,14 +780,14 @@
780
780
  border-radius: 4px;
781
781
  display: grid;
782
782
  place-items: center;
783
- color: currentColor;
784
- background-color: transparent;
783
+ color: var(--button-icon-color, currentColor);
784
+ background-color: var(--button-icon-background-color, transparent);
785
785
  }
786
786
  .pv-button-icon:hover, .pv-button-icon:focus-visible {
787
- background-color: #E8F2F4;
787
+ background-color: var(--button-icon-hover-background-color, #E8F2F4);
788
788
  }
789
789
  .pv-button-icon:active {
790
- background-color: #C7D8DB;
790
+ background-color: var(--button-icon-pressed-background-color, #C7D8DB);
791
791
  }
792
792
  .pv-button-icon:disabled {
793
793
  color: var(--button-icon-disabled-color, #7D898D);
@@ -801,16 +801,16 @@
801
801
  }
802
802
 
803
803
  .pv-button-icon-outline {
804
- background-color: #F7F8F8;
805
- border: 1px solid #E3E7EA;
804
+ background-color: var(--color-background-accent, #F7F8F8);
805
+ border: 1px solid var(--color-border, #E3E7EA);
806
806
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
807
- color: #121313;
807
+ color: var(--color-text-body, #121313);
808
808
  font-size: 0.8rem;
809
809
  height: 2.5rem;
810
810
  padding: 0.5rem 0.7rem;
811
811
  }
812
812
  .pv-button-icon-outline:hover, .pv-button-icon-outline:focus-visible {
813
- background-color: #FFFFFF;
813
+ background-color: var(--color-background-body, #FFFFFF);
814
814
  box-shadow: 0px 12px 16px 0px rgba(0, 0, 0, 0.1), 0px 8px 12px -4px rgba(0, 0, 0, 0.08), 0px 0px 1px 0 rgba(0, 0, 0, 0.3);
815
815
  transition-duration: 0.3s;
816
816
  transition-property: box-shadow;
@@ -870,7 +870,7 @@
870
870
 
871
871
  [class*=pv-segmented-control] {
872
872
  padding: 0.125rem;
873
- background-color: #F0F2F2;
873
+ background-color: var(--segmented-control-background, #F0F2F2);
874
874
  border-radius: 4px;
875
875
  display: inline-flex;
876
876
  align-items: center;
@@ -885,14 +885,14 @@
885
885
  box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.1);
886
886
  }
887
887
  [class*=pv-segmented-control] button[data-active] {
888
- background-color: #FFFFFF;
888
+ background-color: var(--segmented-control-button-selected-background, #FFFFFF);
889
889
  }
890
890
  [class*=pv-segmented-control] button:hover:not(:disabled),
891
891
  [class*=pv-segmented-control] button:focus-visible:not(:disabled) {
892
- background-color: #E8F2F4;
892
+ background-color: var(--segmented-control-button-hover-background, #E8F2F4);
893
893
  }
894
894
  [class*=pv-segmented-control] button:active:not(:disabled) {
895
- background-color: #C7D8DB;
895
+ background-color: var(--segmented-control-button-active-background, #C7D8DB);
896
896
  }
897
897
  [class*=pv-segmented-control] button:has(svg:is(:only-child)) {
898
898
  padding: calc(0.125rem - 1px);
@@ -971,8 +971,8 @@
971
971
  right: var(--right);
972
972
  bottom: var(--bottom);
973
973
  z-index: 50;
974
- background-color: #16696D;
975
- color: #FFFFFF;
974
+ background-color: var(--button-floating-background-color, #16696D);
975
+ color: var(--color-text-inverse, #FFFFFF);
976
976
  width: 3rem;
977
977
  aspect-ratio: 1;
978
978
  border-radius: 50%;
@@ -980,10 +980,10 @@
980
980
  box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.05), 0px 4px 6px -2px rgba(0, 0, 0, 0.04), 0px 0px 0px 0 rgba(0, 0, 0, 0.15);
981
981
  }
982
982
  [class*=pv-button-floating]:hover:not(:disabled), [class*=pv-button-floating]:focus-visible:not(:disabled) {
983
- background-color: #16696D;
983
+ background-color: var(--button-floating-hover-background-color, #16696D);
984
984
  }
985
985
  [class*=pv-button-floating]:active:not(:disabled) {
986
- background-color: #02363D;
986
+ background-color: var(--button-floating-active-background-color, #02363D);
987
987
  }
988
988
  [class*=pv-button-floating]:disabled {
989
989
  background-color: var(--button-floating-disabled-background-color, #6E7784);
@@ -994,14 +994,14 @@
994
994
  }
995
995
 
996
996
  .pv-button-floating-on-dark {
997
- background-color: #A8E6E1;
998
- color: #121313;
997
+ background-color: var(--button-floating-on-dark-background-color, #A8E6E1);
998
+ color: var(--color-text-body, #121313);
999
999
  }
1000
1000
  .pv-button-floating-on-dark:hover:not(:disabled), .pv-button-floating-on-dark:focus-visible:not(:disabled) {
1001
- background-color: #E8F2F4;
1001
+ background-color: var(--button-floating-on-dark-hover-background-color, #E8F2F4);
1002
1002
  }
1003
1003
  .pv-button-floating-on-dark:active:not(:disabled) {
1004
- background-color: #6FD6CE;
1004
+ background-color: var(--button-floating-on-dark-active-background-color, #6FD6CE);
1005
1005
  }
1006
1006
  .pv-button-floating-on-dark:disabled {
1007
1007
  background-color: var(--button-floating-on-dark-disabled-background-color, #DCDFE4);
@@ -1010,7 +1010,7 @@
1010
1010
  .pv-alpha-button,
1011
1011
  [data-collapsed] .pv-alpha-button {
1012
1012
  width: min-content;
1013
- background-color: #FFFFFF;
1013
+ background-color: var(--alpha-button-background-color, #FFFFFF);
1014
1014
  border-radius: 4px;
1015
1015
  border: 0;
1016
1016
  padding: 0.5rem;
@@ -1028,7 +1028,7 @@
1028
1028
  .pv-alpha-button span:last-child,
1029
1029
  [data-collapsed] .pv-alpha-button span:last-child {
1030
1030
  display: inline-block;
1031
- background-color: #FFEB99;
1031
+ background-color: var(--alpha-button-tag-background-color, #FFEB99);
1032
1032
  border-radius: 4px;
1033
1033
  padding: 0.125rem;
1034
1034
  font-size: 0.6875rem;
@@ -1040,7 +1040,7 @@
1040
1040
  [data-collapsed] .pv-alpha-button:hover,
1041
1041
  [data-collapsed] .pv-alpha-button:focus-visible,
1042
1042
  [data-collapsed] .pv-alpha-button:active {
1043
- background-color: #176F6F;
1043
+ background-color: var(--alpha-button-hover-background-color, #176F6F);
1044
1044
  }
1045
1045
  .pv-alpha-button:hover span:first-child, .pv-alpha-button:focus-visible span:first-child, .pv-alpha-button:active span:first-child,
1046
1046
  [data-collapsed] .pv-alpha-button:hover span:first-child,
@@ -1050,7 +1050,7 @@
1050
1050
  }
1051
1051
  .pv-alpha-button:active,
1052
1052
  [data-collapsed] .pv-alpha-button:active {
1053
- background-color: #0D5256;
1053
+ background-color: var(--alpha-button-active-background-color, #0D5256);
1054
1054
  }
1055
1055
 
1056
1056
  @media (width >= 768px) {
@@ -1070,14 +1070,14 @@
1070
1070
  .pv-textarea,
1071
1071
  .pv-select,
1072
1072
  .pv-select-multiple {
1073
- color: #121313;
1073
+ color: var(--color-text-body, #121313);
1074
1074
  padding: var(--text-input-padding, calc(0.5rem - 1px) 0.75rem);
1075
1075
  font-size: var(--text-input-font-size, 0.75rem);
1076
1076
  line-height: var(--text-input-line-height, 1.33333333);
1077
1077
  border: var(--text-input-border-width, 1px) solid var(--text-input-border-color, #E3E7EA);
1078
1078
  border-radius: var(--text-input-radius, 4px);
1079
1079
  appearance: none;
1080
- background-color: #fff;
1080
+ background-color: var(--color-background-body, #FFFFFF);
1081
1081
  width: 100%;
1082
1082
  min-width: fit-content;
1083
1083
  transition-duration: 0.125s;
@@ -1158,15 +1158,15 @@
1158
1158
  background-repeat: no-repeat;
1159
1159
  background-size: 1rem 1rem;
1160
1160
  background-position: top 50% left 0.75rem;
1161
- background-color: #F7F8F8;
1162
- border-radius: 4px;
1163
- border-color: #DCDFE4;
1161
+ background-color: var(--search-background-color, #F7F8F8);
1162
+ border-radius: var(--search-border-radius, 4px);
1163
+ border-color: var(--search-border-color, #DCDFE4);
1164
1164
  }
1165
1165
  .pv-input-search:hover:not(:disabled) {
1166
1166
  box-shadow: 0px 0.25px 3px 0px rgba(0, 0, 0, 0.2);
1167
1167
  }
1168
1168
  .pv-input-search:focus-visible {
1169
- border-color: #36C5BA;
1169
+ border-color: var(--search-focus-border-color, #36C5BA);
1170
1170
  }
1171
1171
 
1172
1172
  .pv-select,
@@ -1185,7 +1185,7 @@
1185
1185
  .pv-select:disabled, .pv-select:disabled > option,
1186
1186
  .pv-select-multiple:disabled,
1187
1187
  .pv-select-multiple:disabled > option {
1188
- color: #121313;
1188
+ color: var(--color-text-body, #121313);
1189
1189
  opacity: 1;
1190
1190
  }
1191
1191
 
@@ -1221,7 +1221,7 @@ label:has(input:not(:disabled)).pv-label-hover:hover {
1221
1221
  appearance: none;
1222
1222
  width: 1rem;
1223
1223
  height: 1rem;
1224
- background-color: #FFFFFF;
1224
+ background-color: var(--color-background-body, #FFFFFF);
1225
1225
  border: 2px solid var(--checkbox-border, #D2D8DC);
1226
1226
  flex-shrink: 0;
1227
1227
  transition-duration: 0.125s;
@@ -1283,7 +1283,7 @@ label:has(input:not(:disabled)).pv-label-hover:hover {
1283
1283
  }
1284
1284
  .pv-checkbox:disabled + span,
1285
1285
  .pv-radio:disabled + span {
1286
- color: #4B595C;
1286
+ color: var(--color-text-subdued, #4B595C);
1287
1287
  }
1288
1288
 
1289
1289
  .pv-checkbox {
@@ -1351,7 +1351,7 @@ label:has(input:not(:disabled)).pv-label-hover:hover {
1351
1351
  }
1352
1352
 
1353
1353
  .pv-input-file {
1354
- background-color: #F7F8F8;
1354
+ background-color: var(--color-background-accent, #F7F8F8);
1355
1355
  padding: 0.75rem;
1356
1356
  border-radius: 4px;
1357
1357
  display: flex;
@@ -1385,7 +1385,7 @@ label:has(input:not(:disabled)).pv-label-hover:hover {
1385
1385
  }
1386
1386
  .pv-switch input[type=checkbox] {
1387
1387
  appearance: none;
1388
- background-color: #D9DEDE;
1388
+ background-color: var(--switch-off-background-color, #D9DEDE);
1389
1389
  border-color: transparent;
1390
1390
  border-radius: 1rem;
1391
1391
  display: flex;
@@ -1397,39 +1397,39 @@ label:has(input:not(:disabled)).pv-label-hover:hover {
1397
1397
  }
1398
1398
  .pv-switch input[type=checkbox]:not(:disabled):hover,
1399
1399
  .pv-switch input[type=checkbox]:not(:disabled):focus-visible {
1400
- background-color: #E8F2F4;
1400
+ background-color: var(--switch-off-background-color-hover, #E8F2F4);
1401
1401
  cursor: pointer;
1402
1402
  }
1403
1403
  .pv-switch input[type=checkbox]:not(:disabled):active {
1404
- background-color: #C7D8DB;
1404
+ background-color: var(--switch-off-background-color-active, #C7D8DB);
1405
1405
  }
1406
1406
  .pv-switch input[type=checkbox]:checked:not(:disabled):hover,
1407
1407
  .pv-switch input[type=checkbox]:checked:not(:disabled):focus-visible {
1408
- background-color: #0D5256;
1408
+ background-color: var(--switch-background-color-hover, #0D5256);
1409
1409
  }
1410
1410
  .pv-switch input[type=checkbox]:checked:not(:disabled):hover:after,
1411
1411
  .pv-switch input[type=checkbox]:checked:not(:disabled):focus-visible:after {
1412
1412
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.293 5.293a1 1 0 0 1 1.414 1.414l-11 11a.999.999 0 0 1-1.414 0l-5-5a1 1 0 0 1 1.414-1.414L9 15.586 19.293 5.293Z' fill='%230D5256'/%3E%3C/svg%3E");
1413
1413
  }
1414
1414
  .pv-switch input[type=checkbox]:checked:not(:disabled):active {
1415
- background-color: #02363D;
1415
+ background-color: var(--switch-background-color-active, #02363D);
1416
1416
  }
1417
1417
  .pv-switch input[type=checkbox]:checked:not(:disabled):active:after {
1418
1418
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.293 5.293a1 1 0 0 1 1.414 1.414l-11 11a.999.999 0 0 1-1.414 0l-5-5a1 1 0 0 1 1.414-1.414L9 15.586 19.293 5.293Z' fill='%2302363D'/%3E%3C/svg%3E");
1419
1419
  }
1420
1420
  .pv-switch input[type=checkbox]:disabled,
1421
1421
  .pv-switch input[type=checkbox]:checked:disabled {
1422
- background-color: #ECECEC;
1422
+ background-color: var(--switch-background-color-disabled, #ECECEC);
1423
1423
  }
1424
1424
  .pv-switch input[type=checkbox]:disabled:after,
1425
1425
  .pv-switch input[type=checkbox]:checked:disabled:after {
1426
- background-color: #C9D1D0;
1426
+ background-color: var(--switch-knob-color-disabled, #C9D1D0);
1427
1427
  }
1428
1428
  .pv-switch input[type=checkbox]:checked:disabled:after {
1429
1429
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.293 5.293a1 1 0 0 1 1.414 1.414l-11 11a.999.999 0 0 1-1.414 0l-5-5a1 1 0 0 1 1.414-1.414L9 15.586 19.293 5.293Z' fill='%237D898D'/%3E%3C/svg%3E");
1430
1430
  }
1431
1431
  .pv-switch input[type=checkbox]:after {
1432
- background-color: #FFFFFF;
1432
+ background-color: var(--switch-knob-color, #FFFFFF);
1433
1433
  border-radius: 50%;
1434
1434
  content: "";
1435
1435
  display: block;
@@ -1444,10 +1444,10 @@ label:has(input:not(:disabled)).pv-label-hover:hover {
1444
1444
  background-position: center center;
1445
1445
  }
1446
1446
  .pv-switch input[type=checkbox]:checked {
1447
- background-color: #16696D;
1447
+ background-color: var(--button-primary-background-color, #16696D);
1448
1448
  }
1449
1449
  .pv-switch input[type=checkbox]:checked:after {
1450
- background-color: #FFFFFF;
1450
+ background-color: var(--color-background-body, #FFFFFF);
1451
1451
  right: 2px;
1452
1452
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.293 5.293a1 1 0 0 1 1.414 1.414l-11 11a.999.999 0 0 1-1.414 0l-5-5a1 1 0 0 1 1.414-1.414L9 15.586 19.293 5.293Z' fill='%2316696D'/%3E%3C/svg%3E");
1453
1453
  }
@@ -1586,7 +1586,7 @@ div:has(> .pv-input-text[data-suffix="%"]) .pv-input-text {
1586
1586
  line-height: 1.33333333;
1587
1587
  }
1588
1588
  .pv-ghost-input input::placeholder, .pv-ghost-input input::-webkit-input-placeholder {
1589
- color: #89989B;
1589
+ color: var(--color-text-quaternary, #89989B);
1590
1590
  }
1591
1591
  .pv-ghost-input button {
1592
1592
  opacity: 0;
@@ -1598,7 +1598,7 @@ div:has(> .pv-input-text[data-suffix="%"]) .pv-input-text {
1598
1598
  outline: 0;
1599
1599
  }
1600
1600
  .pv-ghost-input:hover input::placeholder, .pv-ghost-input:hover input::-webkit-input-placeholder, .pv-ghost-input:focus-visible input::placeholder, .pv-ghost-input:focus-visible input::-webkit-input-placeholder, .pv-ghost-input:focus-within input::placeholder, .pv-ghost-input:focus-within input::-webkit-input-placeholder {
1601
- color: #6E8081;
1601
+ color: var(--color-text-tertiary, #6E8081);
1602
1602
  }
1603
1603
  .pv-ghost-input[data-style=h1] input {
1604
1604
  font-weight: 600;
@@ -1914,26 +1914,26 @@ div:has(> .pv-input-text[data-suffix="%"]) .pv-input-text {
1914
1914
  display: flex;
1915
1915
  align-items: center;
1916
1916
  gap: 0.25rem;
1917
- border-inline-start: 1px solid #E3E7EA;
1917
+ border-inline-start: 1px solid var(--toc-border-color, #E3E7EA);
1918
1918
  padding: 0.5rem;
1919
1919
  font-size: 0.75rem;
1920
1920
  line-height: 1.33333333;
1921
1921
  font-weight: 500;
1922
1922
  }
1923
1923
  .pv-toc > li a:hover, .pv-toc > li a:focus-visible {
1924
- color: #0D5256;
1925
- background-color: #E8F2F4;
1926
- border-color: #02363D;
1924
+ color: var(--toc-hover-color, #0D5256);
1925
+ background-color: var(--toc-hover-background-color, #E8F2F4);
1926
+ border-color: var(--toc-active-border-color, #02363D);
1927
1927
  text-decoration: none;
1928
1928
  }
1929
1929
  .pv-toc > li a:active {
1930
- color: #02363D;
1931
- background-color: #C7D8DB;
1932
- border-color: #02363D;
1930
+ color: var(--toc-pressed-color, #02363D);
1931
+ background-color: var(--toc-pressed-background-color, #C7D8DB);
1932
+ border-color: var(--toc-active-border-color, #02363D);
1933
1933
  }
1934
1934
  .pv-toc > li[aria-current] a {
1935
- border-color: #02363D;
1936
- color: #16696D;
1935
+ border-color: var(--toc-active-border-color, #02363D);
1936
+ color: var(--toc-active-color, #16696D);
1937
1937
  }
1938
1938
 
1939
1939
  [class*=pv-container] {
@@ -1961,8 +1961,8 @@ div:has(> .pv-input-text[data-suffix="%"]) .pv-input-text {
1961
1961
  aspect-ratio: 1;
1962
1962
  display: grid;
1963
1963
  place-items: center;
1964
- color: #FFFFFF;
1965
- background-color: #36C5BA;
1964
+ color: var(--color-text-inverse, #FFFFFF);
1965
+ background-color: var(--avatar-background-color, #36C5BA);
1966
1966
  border-radius: 50%;
1967
1967
  overflow: hidden;
1968
1968
  font-weight: 600;
@@ -2055,15 +2055,15 @@ div:has(> .pv-input-text[data-suffix="%"]) .pv-input-text {
2055
2055
  }
2056
2056
  .pv-avatar-group > li, .pv-avatar-group[data-more]:after {
2057
2057
  margin-inline-start: -0.5rem;
2058
- outline: 2px solid white;
2058
+ outline: 2px solid var(--color-background-body, white);
2059
2059
  }
2060
2060
  .pv-avatar-group[data-more]:after {
2061
2061
  content: "+" attr(data-more);
2062
- color: #4B595C;
2063
- background-color: #D9DEDE;
2062
+ color: var(--avatar-group-more-font-color, #4B595C);
2063
+ background-color: var(--avatar-group-more-background-color, #D9DEDE);
2064
2064
  font-size: #D9DEDE;
2065
2065
  letter-spacing: 0.12px;
2066
- outline-color: #D2D8DC;
2066
+ outline-color: var(--avatar-group-more-border-color, #D2D8DC);
2067
2067
  }
2068
2068
  .pv-avatar-group :nth-child(2) {
2069
2069
  background-color: #16696D;
@@ -2085,7 +2085,7 @@ div:has(> .pv-input-text[data-suffix="%"]) .pv-input-text {
2085
2085
  }
2086
2086
 
2087
2087
  [class*=pv-company]:empty {
2088
- background-color: #E8F2F4;
2088
+ background-color: var(--company-background-color, #E8F2F4);
2089
2089
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 13c0 5.49-3.763 8.302-8.331 9.894l-.008.003a1.997 1.997 0 0 1-1.326-.015C6.759 21.3 3 18.487 3 13V6a2 2 0 0 1 2-2c1.794 0 4.021-1.11 5.582-2.473l.009-.007a2.165 2.165 0 0 1 2.818 0l.009.007C14.988 2.899 17.206 4 19 4a2.008 2.008 0 0 1 1.11.336l.304.25A2 2 0 0 1 21 6v7Zm-2 0V6c-2.206 0-4.966-1.278-6.896-2.965a.171.171 0 0 0-.214.005C9.971 4.713 7.203 6 5 6v7c0 4.51 3.235 6.696 6.996 7.995l.023.008C15.768 19.694 19 17.507 19 13Zm-8-2V9a1 1 0 0 1 2 0v2h2a1 1 0 0 1 0 2h-2v2a1 1 0 0 1-2 0v-2H9a1 1 0 0 1 0-2h2Z' fill='%23B8C1C4'/%3E%3C/svg%3E");
2090
2090
  background-repeat: no-repeat;
2091
2091
  background-position: center center;
@@ -2291,15 +2291,15 @@ div:has(> .pv-input-text[data-suffix="%"]) .pv-input-text {
2291
2291
  [data-collapsed] .pv-nav-list-inverse summary {
2292
2292
  max-width: none;
2293
2293
  display: flex;
2294
- color: #121313;
2294
+ color: var(--color-text-body, #121313);
2295
2295
  }
2296
2296
  .pv-nav-list-inverse a:focus-visible:not([aria-current=page]), .pv-nav-list-inverse a:hover:not([aria-current=page]), .pv-nav-list-inverse summary:focus-visible:not([aria-current=page]), .pv-nav-list-inverse summary:hover:not([aria-current=page]),
2297
2297
  [data-collapsed] .pv-nav-list-inverse a:focus-visible:not([aria-current=page]),
2298
2298
  [data-collapsed] .pv-nav-list-inverse a:hover:not([aria-current=page]),
2299
2299
  [data-collapsed] .pv-nav-list-inverse summary:focus-visible:not([aria-current=page]),
2300
2300
  [data-collapsed] .pv-nav-list-inverse summary:hover:not([aria-current=page]) {
2301
- color: #121313;
2302
- background-color: #F7F8F8;
2301
+ color: var(--color-text-body, #121313);
2302
+ background-color: var(--nav-list-inverse-hover-background-color, #F7F8F8);
2303
2303
  }
2304
2304
  .pv-nav-list-inverse summary,
2305
2305
  [data-collapsed] .pv-nav-list-inverse summary {
@@ -2311,8 +2311,8 @@ div:has(> .pv-input-text[data-suffix="%"]) .pv-input-text {
2311
2311
  }
2312
2312
  .pv-nav-list-inverse [aria-current=page],
2313
2313
  [data-collapsed] .pv-nav-list-inverse [aria-current=page] {
2314
- background-color: #16696D;
2315
- color: #FFFFFF;
2314
+ background-color: var(--nav-list-active-background-color, #16696D);
2315
+ color: var(--color-text-inverse, #FFFFFF);
2316
2316
  }
2317
2317
  .pv-nav-list-inverse li:not(:last-child),
2318
2318
  [data-collapsed] .pv-nav-list-inverse li:not(:last-child) {
@@ -2422,7 +2422,7 @@ div:has(> .pv-input-text[data-suffix="%"]) .pv-input-text {
2422
2422
  }
2423
2423
  }
2424
2424
  .pv-notification {
2425
- --bg-color: white;
2425
+ --bg-color: var(--color-background-body, white);
2426
2426
  position: relative;
2427
2427
  }
2428
2428
  .pv-notification:after {
@@ -2442,7 +2442,7 @@ div:has(> .pv-input-text[data-suffix="%"]) .pv-input-text {
2442
2442
  }
2443
2443
 
2444
2444
  [class*=pv-toast] {
2445
- color: #121313;
2445
+ color: var(--toast-text-color, #121313);
2446
2446
  padding: 0.75rem 1rem;
2447
2447
  display: flex;
2448
2448
  align-items: center;
@@ -2454,29 +2454,29 @@ div:has(> .pv-input-text[data-suffix="%"]) .pv-input-text {
2454
2454
  }
2455
2455
 
2456
2456
  .pv-toast-info {
2457
- background-color: #F7F8F8;
2457
+ background-color: var(--toast-info-background-color, #F7F8F8);
2458
2458
  }
2459
2459
  .pv-toast-info svg:not([class*=pv-button] svg) {
2460
2460
  fill: #36C5BA;
2461
2461
  }
2462
2462
 
2463
2463
  .pv-toast-success {
2464
- background-color: #E8FDEA;
2464
+ background-color: var(--toast-success-background-color, #E8FDEA);
2465
2465
  }
2466
2466
  .pv-toast-success svg:not([class*=pv-button] svg) {
2467
2467
  fill: var(--toast-success-icon-color, #0E8019);
2468
2468
  }
2469
2469
 
2470
2470
  .pv-toast-error {
2471
- background-color: #FFEFEB;
2471
+ background-color: var(--toast-error-background-color, #FFEFEB);
2472
2472
  }
2473
2473
  .pv-toast-error svg:not([class*=pv-button] svg) {
2474
2474
  fill: #FF471A;
2475
2475
  }
2476
2476
 
2477
2477
  .pv-toast-dark {
2478
- background-color: #242626;
2479
- color: #FFFFFF;
2478
+ background-color: var(--toast-dark-background-color, #242626);
2479
+ color: var(--toast-dark-color, #FFFFFF);
2480
2480
  }
2481
2481
  .pv-toast-dark svg:not([class*=pv-button] svg) {
2482
2482
  background-image: linear-gradient(138deg, #F1E8FF 4.38%, #D7F3F1 99.39%);
@@ -2623,7 +2623,7 @@ div:has(> .pv-input-text[data-suffix="%"]) .pv-input-text {
2623
2623
  .pv-table-compressed {
2624
2624
  width: 100%;
2625
2625
  border-spacing: 0;
2626
- background-color: #FFFFFF;
2626
+ background-color: var(--color-background-body, #FFFFFF);
2627
2627
  text-align: left;
2628
2628
  font-size: 0.75rem;
2629
2629
  line-height: 1.33333333;
@@ -2631,8 +2631,8 @@ div:has(> .pv-input-text[data-suffix="%"]) .pv-input-text {
2631
2631
  .pv-table th,
2632
2632
  .pv-table-compressed th {
2633
2633
  padding: 0.5rem 0.75rem;
2634
- border-block-end: 1px solid #E3E7EA;
2635
- background-color: #F7F8F8;
2634
+ border-block-end: 1px solid var(--color-border, #E3E7EA);
2635
+ background-color: var(--table-heading-background-color, #F7F8F8);
2636
2636
  }
2637
2637
  .pv-table th a,
2638
2638
  .pv-table-compressed th a {
@@ -2674,7 +2674,7 @@ div:has(> .pv-input-text[data-suffix="%"]) .pv-input-text {
2674
2674
  padding-block: 0.25rem;
2675
2675
  }
2676
2676
  .pv-table-compressed :where(th) {
2677
- background-color: #F7F8F8;
2677
+ background-color: var(--table-compressed-heading-background-color, #F7F8F8);
2678
2678
  font-size: inherit;
2679
2679
  line-height: inherit;
2680
2680
  font-weight: 600;
@@ -2686,11 +2686,11 @@ div:has(> .pv-input-text[data-suffix="%"]) .pv-input-text {
2686
2686
 
2687
2687
  .pv-table-bordered,
2688
2688
  .pv-table-compressed {
2689
- border-block-start: 1px solid #E3E7EA;
2689
+ border-block-start: 1px solid var(--color-border, #E3E7EA);
2690
2690
  }
2691
2691
  .pv-table-bordered td,
2692
2692
  .pv-table-compressed td {
2693
- border-block-end: 1px solid #E3E7EA;
2693
+ border-block-end: 1px solid var(--color-border, #E3E7EA);
2694
2694
  }
2695
2695
 
2696
2696
  .pv-table.pv-expand th:first-child,
@@ -2725,15 +2725,15 @@ div:has(> .pv-input-text[data-suffix="%"]) .pv-input-text {
2725
2725
  }
2726
2726
 
2727
2727
  [class*=pv-table] [data-sort] {
2728
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2302363D66'%3E%3Cpath d='M6.2 14.2c.5-.5 1.2-.5 1.7 0l4.2 4.2 4.2-4.2c.5-.5 1.2-.5 1.7 0s.5 1.2 0 1.7l-5 5c-.5.5-1.2.5-1.7 0l-5-5c-.6-.5-.6-1.3-.1-1.7z'/%3E%3Cpath d='M11.2 3.2c.5-.5 1.2-.5 1.7 0l5 5c.5.5.5 1.2 0 1.7s-1.2.5-1.7 0L12 5.7 7.8 9.8c-.5.5-1.2.5-1.7 0s-.5-1.2 0-1.7l5.1-4.9z'/%3E%3C/svg%3E");
2728
+ background-image: var(--table-sort-background-image, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2302363D66'%3E%3Cpath d='M6.2 14.2c.5-.5 1.2-.5 1.7 0l4.2 4.2 4.2-4.2c.5-.5 1.2-.5 1.7 0s.5 1.2 0 1.7l-5 5c-.5.5-1.2.5-1.7 0l-5-5c-.6-.5-.6-1.3-.1-1.7z'/%3E%3Cpath d='M11.2 3.2c.5-.5 1.2-.5 1.7 0l5 5c.5.5.5 1.2 0 1.7s-1.2.5-1.7 0L12 5.7 7.8 9.8c-.5.5-1.2.5-1.7 0s-.5-1.2 0-1.7l5.1-4.9z'/%3E%3C/svg%3E"));
2729
2729
  }
2730
2730
 
2731
2731
  [class*=pv-table] [data-sort=descending] {
2732
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2302363D66'%3E%3Cpath d='M6.2 14.2c.5-.5 1.2-.5 1.7 0l4.2 4.2 4.2-4.2c.5-.5 1.2-.5 1.7 0s.5 1.2 0 1.7l-5 5c-.5.5-1.2.5-1.7 0l-5-5c-.6-.5-.6-1.3-.1-1.7z' fill='%2302363D'/%3E%3Cpath d='M11.2 3.2c.5-.5 1.2-.5 1.7 0l5 5c.5.5.5 1.2 0 1.7s-1.2.5-1.7 0L12 5.7 7.8 9.8c-.5.5-1.2.5-1.7 0s-.5-1.2 0-1.7l5.1-4.9z'/%3E%3C/svg%3E");
2732
+ background-image: var(--table-sort-descending-background-image, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2302363D66'%3E%3Cpath d='M6.2 14.2c.5-.5 1.2-.5 1.7 0l4.2 4.2 4.2-4.2c.5-.5 1.2-.5 1.7 0s.5 1.2 0 1.7l-5 5c-.5.5-1.2.5-1.7 0l-5-5c-.6-.5-.6-1.3-.1-1.7z' fill='%2302363D'/%3E%3Cpath d='M11.2 3.2c.5-.5 1.2-.5 1.7 0l5 5c.5.5.5 1.2 0 1.7s-1.2.5-1.7 0L12 5.7 7.8 9.8c-.5.5-1.2.5-1.7 0s-.5-1.2 0-1.7l5.1-4.9z'/%3E%3C/svg%3E"));
2733
2733
  }
2734
2734
 
2735
2735
  [class*=pv-table] [data-sort=ascending] {
2736
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2302363D66'%3E%3Cpath d='M6.2 14.2c.5-.5 1.2-.5 1.7 0l4.2 4.2 4.2-4.2c.5-.5 1.2-.5 1.7 0s.5 1.2 0 1.7l-5 5c-.5.5-1.2.5-1.7 0l-5-5c-.6-.5-.6-1.3-.1-1.7z'/%3E%3Cpath d='M11.2 3.2c.5-.5 1.2-.5 1.7 0l5 5c.5.5.5 1.2 0 1.7s-1.2.5-1.7 0L12 5.7 7.8 9.8c-.5.5-1.2.5-1.7 0s-.5-1.2 0-1.7l5.1-4.9z' fill='%2302363D'/%3E%3C/svg%3E");
2736
+ background-image: var(--table-sort-ascending-background-image, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2302363D66'%3E%3Cpath d='M6.2 14.2c.5-.5 1.2-.5 1.7 0l4.2 4.2 4.2-4.2c.5-.5 1.2-.5 1.7 0s.5 1.2 0 1.7l-5 5c-.5.5-1.2.5-1.7 0l-5-5c-.6-.5-.6-1.3-.1-1.7z'/%3E%3Cpath d='M11.2 3.2c.5-.5 1.2-.5 1.7 0l5 5c.5.5.5 1.2 0 1.7s-1.2.5-1.7 0L12 5.7 7.8 9.8c-.5.5-1.2.5-1.7 0s-.5-1.2 0-1.7l5.1-4.9z' fill='%2302363D'/%3E%3C/svg%3E"));
2737
2737
  }
2738
2738
 
2739
2739
  .pv-table-matrix,
@@ -2750,16 +2750,16 @@ div:has(> .pv-input-text[data-suffix="%"]) .pv-input-text {
2750
2750
  .pv-table-matrix-compressed :where(thead th) {
2751
2751
  padding: 0.5rem 0.75rem;
2752
2752
  min-height: 69px;
2753
- background-color: #F7F8F8;
2753
+ background-color: var(--table-matrix-heading-background-color, #F7F8F8);
2754
2754
  }
2755
2755
  .pv-table-matrix :where(thead td),
2756
2756
  .pv-table-matrix-compressed :where(thead td) {
2757
- background-color: #F7F8F8;
2757
+ background-color: var(--table-matrix-heading-background-color, #F7F8F8);
2758
2758
  text-align: center;
2759
2759
  }
2760
2760
  .pv-table-matrix :where(thead td):not(:last-of-type),
2761
2761
  .pv-table-matrix-compressed :where(thead td):not(:last-of-type) {
2762
- border-right: 1px solid #E3E7EA;
2762
+ border-right: 1px solid var(--color-border, #E3E7EA);
2763
2763
  }
2764
2764
  .pv-table-matrix thead th:not(:first-of-type),
2765
2765
  .pv-table-matrix-compressed thead th:not(:first-of-type) {
@@ -2769,7 +2769,7 @@ div:has(> .pv-input-text[data-suffix="%"]) .pv-input-text {
2769
2769
  .pv-table-matrix th:first-of-type,
2770
2770
  .pv-table-matrix-compressed th:first-of-type {
2771
2771
  padding-inline: 1.5rem;
2772
- border-right: 1px solid #E3E7EA;
2772
+ border-right: 1px solid var(--color-border, #E3E7EA);
2773
2773
  }
2774
2774
  .pv-table-matrix th, .pv-table-matrix td,
2775
2775
  .pv-table-matrix-compressed th,
@@ -2779,13 +2779,13 @@ div:has(> .pv-input-text[data-suffix="%"]) .pv-input-text {
2779
2779
  }
2780
2780
  .pv-table-matrix tr > *,
2781
2781
  .pv-table-matrix-compressed tr > * {
2782
- border-bottom: 1px solid #E3E7EA;
2782
+ border-bottom: 1px solid var(--color-border, #E3E7EA);
2783
2783
  }
2784
2784
  .pv-table-matrix tr > *:not(:first-of-type, :last-of-type),
2785
2785
  .pv-table-matrix tbody td:not(:last-of-type),
2786
2786
  .pv-table-matrix-compressed tr > *:not(:first-of-type, :last-of-type),
2787
2787
  .pv-table-matrix-compressed tbody td:not(:last-of-type) {
2788
- border-right: 1px solid #E3E7EA;
2788
+ border-right: 1px solid var(--color-border, #E3E7EA);
2789
2789
  }
2790
2790
  .pv-table-matrix tbody th,
2791
2791
  .pv-table-matrix thead th:first-of-type,
@@ -2797,7 +2797,7 @@ div:has(> .pv-input-text[data-suffix="%"]) .pv-input-text {
2797
2797
  .pv-table-matrix tbody th,
2798
2798
  .pv-table-matrix-compressed tbody th {
2799
2799
  z-index: 20;
2800
- background-color: #FFFFFF;
2800
+ background-color: var(--color-background-body, #FFFFFF);
2801
2801
  }
2802
2802
  .pv-table-matrix thead th:first-of-type,
2803
2803
  .pv-table-matrix-compressed thead th:first-of-type {
@@ -2831,7 +2831,7 @@ div:has(> .pv-input-text[data-suffix="%"]) .pv-input-text {
2831
2831
  }
2832
2832
  [class*=pv-table]:has(td .pv-table-button) td:has(.pv-table-button) button:where(:hover, :focus-visible),
2833
2833
  [class*=pv-table]:has(td .pv-table-button) td:has(.pv-table-button) .pv-table-button:where(:hover, :focus-visible) {
2834
- background-color: #F7F8F8;
2834
+ background-color: var(--table-button-hover-background-color, #F7F8F8);
2835
2835
  }
2836
2836
  [class*=pv-table]:has(td .pv-table-button) td:has(.pv-table-button) button:where(:hover, :focus-visible) > div:last-of-type,
2837
2837
  [class*=pv-table]:has(td .pv-table-button) td:has(.pv-table-button) .pv-table-button:where(:hover, :focus-visible) > div:last-of-type {
@@ -2865,7 +2865,7 @@ div:has(> .pv-input-text[data-suffix="%"]) .pv-input-text {
2865
2865
 
2866
2866
  .pv-table-vertical-borders td:not(:last-child),
2867
2867
  .pv-table-vertical-borders th:not(:last-child) {
2868
- border-inline-end: 1px solid #E3E7EA;
2868
+ border-inline-end: 1px solid var(--color-border, #E3E7EA);
2869
2869
  }
2870
2870
 
2871
2871
  [class*=pv-table] [data-symbol] {
@@ -2925,11 +2925,12 @@ td:not([rowspan]) > .pv-responsive-cell {
2925
2925
  --offset: 0;
2926
2926
  position: sticky;
2927
2927
  left: var(--offset);
2928
- background-color: #F8F8FA;
2928
+ background-color: var(--table-sticky-column-background-color, #F8F8FA);
2929
2929
  z-index: 10;
2930
2930
  }
2931
2931
 
2932
2932
  [class*=pv-table] thead [data-sticky-col] {
2933
+ background-color: var(--table-sticky-heading-background-color, var(--table-sticky-column-background-color, #F8F8FA));
2933
2934
  z-index: 60;
2934
2935
  }
2935
2936
 
@@ -2939,7 +2940,7 @@ td:not([rowspan]) > .pv-responsive-cell {
2939
2940
 
2940
2941
  .pv-cell-hover:hover,
2941
2942
  .pv-cell-hover:focus-within {
2942
- background-color: #F7F8F8;
2943
+ background-color: var(--color-background-accent, #F7F8F8);
2943
2944
  }
2944
2945
 
2945
2946
  .pv-floating-native {
@@ -2969,7 +2970,7 @@ td:not([rowspan]) > .pv-responsive-cell {
2969
2970
  overflow-y: auto;
2970
2971
  overflow-x: hidden;
2971
2972
  position: var(--position);
2972
- background-color: #FFFFFF;
2973
+ background-color: var(--color-background-body, #FFFFFF);
2973
2974
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3), 0px 8px 12px -4px rgba(0, 0, 0, 0.08), 0px 12px 16px rgba(0, 0, 0, 0.1);
2974
2975
  border-radius: 4px;
2975
2976
  top: 100%;
@@ -3005,7 +3006,7 @@ td:not([rowspan]) > .pv-responsive-cell {
3005
3006
  line-height: var(--popover-list-item-line-height, 1.33333333);
3006
3007
  font-weight: 400;
3007
3008
  text-decoration: none;
3008
- color: #121313;
3009
+ color: var(--color-text-body, #121313);
3009
3010
  transition-duration: 0.125s;
3010
3011
  transition-property: background-color;
3011
3012
  }
@@ -3126,8 +3127,8 @@ strong[class*=pv-tag] {
3126
3127
  .pv-tag-green-inverse,
3127
3128
  .pv-tag-orange-inverse,
3128
3129
  .pv-tag-turquoise-inverse {
3129
- border-color: transparent;
3130
- color: #FFFFFF;
3130
+ border-color: var(--tag-inverse-border-color, transparent);
3131
+ color: var(--tag-inverse-color, #FFFFFF);
3131
3132
  }
3132
3133
 
3133
3134
  .pv-tag-inverse {
@@ -3154,8 +3155,8 @@ strong[class*=pv-tag] {
3154
3155
  }
3155
3156
 
3156
3157
  .pv-tag-yellow-inverse {
3157
- background-color: #EAB333;
3158
- color: #121313;
3158
+ background-color: var(--tag-yellow-inverse-background-color, #EAB333);
3159
+ color: var(--tag-yellow-inverse-color, #121313);
3159
3160
  }
3160
3161
 
3161
3162
  .pv-tag-green,
@@ -3166,7 +3167,7 @@ strong[class*=pv-tag] {
3166
3167
  }
3167
3168
 
3168
3169
  .pv-tag-green-inverse {
3169
- background-color: #198038;
3170
+ background-color: var(--tag-green-inverse-background-color, #198038);
3170
3171
  }
3171
3172
 
3172
3173
  .pv-tag-orange,
@@ -3177,7 +3178,7 @@ strong[class*=pv-tag] {
3177
3178
  }
3178
3179
 
3179
3180
  .pv-tag-orange-inverse {
3180
- background-color: #BA4E01;
3181
+ background-color: var(--tag-orange-inverse-background-color, #BA4E01);
3181
3182
  }
3182
3183
 
3183
3184
  .pv-tag-turquoise {
@@ -3187,7 +3188,7 @@ strong[class*=pv-tag] {
3187
3188
  }
3188
3189
 
3189
3190
  .pv-tag-turquoise-inverse {
3190
- background-color: #176F6F;
3191
+ background-color: var(--tag-turquoise-inverse-background-color, #176F6F);
3191
3192
  }
3192
3193
 
3193
3194
  .pv-tag-purple {
@@ -3213,10 +3214,10 @@ strong[class*=pv-tag] {
3213
3214
  }
3214
3215
 
3215
3216
  button.pv-tag-primary:hover, button.pv-tag-primary:focus-visible {
3216
- background-color: #0D5256;
3217
+ background-color: var(--tag-primary-hover-background-color, #0D5256);
3217
3218
  }
3218
3219
  button.pv-tag-primary:active {
3219
- background-color: #02363D;
3220
+ background-color: var(--tag-primary-pressed-background-color, #02363D);
3220
3221
  }
3221
3222
 
3222
3223
  .pv-tag-secondary {
@@ -3226,11 +3227,11 @@ button.pv-tag-primary:active {
3226
3227
  }
3227
3228
 
3228
3229
  button.pv-tag-secondary:hover, button.pv-tag-secondary:focus-visible {
3229
- background-color: #E8F2F4;
3230
+ background-color: var(--tag-secondary-hover-background-color, #E8F2F4);
3230
3231
  color: #121313;
3231
3232
  }
3232
3233
  button.pv-tag-secondary:active {
3233
- background-color: #C7D8DB;
3234
+ background-color: var(--tag-secondary-pressed-background-color, #C7D8DB);
3234
3235
  color: #121313;
3235
3236
  }
3236
3237
 
@@ -3359,8 +3360,8 @@ button.pv-tag-secondary:active {
3359
3360
  display: inline-block;
3360
3361
  width: 1.5rem;
3361
3362
  height: 1.5rem;
3362
- color: #FFFFFF;
3363
- background-color: #ADB5C0;
3363
+ color: var(--color-text-inverse, #FFFFFF);
3364
+ background-color: var(--tab-list-counter-background-color, #ADB5C0);
3364
3365
  margin-inline-end: 0.5rem;
3365
3366
  text-align: center;
3366
3367
  border-radius: 50%;
@@ -3368,13 +3369,13 @@ button.pv-tag-secondary:active {
3368
3369
  line-height: 2;
3369
3370
  }
3370
3371
  :where(ol.pv-tab-list) [data-active] > a:before {
3371
- background-color: #16696D;
3372
+ background-color: var(--tab-list-indicator-color, #16696D);
3372
3373
  }
3373
3374
  :where(ol.pv-tab-list) [data-complete] {
3374
3375
  opacity: 1;
3375
3376
  }
3376
3377
  :where(ol.pv-tab-list) [data-complete] > a:before {
3377
- background-color: #16696D;
3378
+ background-color: var(--tab-list-indicator-color, #16696D);
3378
3379
  color: transparent;
3379
3380
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.1 4.9c.6.6.6 1.5 0 2.1l-11 11c-.6.6-1.5.6-2.1 0l-5-5c-.6-.6-.6-1.5 0-2.1.6-.6 1.5-.6 2.1 0l3.9 4L18.9 5c.6-.6 1.6-.6 2.2-.1z' fill='%23fff'/%3E%3C/svg%3E");
3380
3381
  background-repeat: no-repeat;
@@ -3389,7 +3390,7 @@ button.pv-tag-secondary:active {
3389
3390
  border: none;
3390
3391
  border-radius: 4px;
3391
3392
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.35), 0px 12px 20px rgba(0, 0, 0, 0.25), 0px 16px 28px -8px rgba(0, 0, 0, 0.25);
3392
- color: #121313;
3393
+ color: var(--color-text-body, #121313);
3393
3394
  max-width: min(100% - 2rem, var(--max-width));
3394
3395
  max-height: min(100% - 2rem, var(--max-height));
3395
3396
  margin-inline: auto;
@@ -3439,7 +3440,7 @@ button.pv-tag-secondary:active {
3439
3440
  display: flex;
3440
3441
  gap: 0.25rem;
3441
3442
  align-items: center;
3442
- color: #4B595C;
3443
+ color: var(--breadcrumbs-color, #4B595C);
3443
3444
  }
3444
3445
  .pv-breadcrumbs li a {
3445
3446
  color: inherit;
@@ -3448,17 +3449,17 @@ button.pv-tag-secondary:active {
3448
3449
  .pv-breadcrumbs li:not(:last-child):after {
3449
3450
  display: block;
3450
3451
  content: "";
3451
- color: #6E8081;
3452
+ color: var(--breadcrumbs-separator-color, #6E8081);
3452
3453
  width: 0.75rem;
3453
3454
  height: 0.75rem;
3454
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.707 18.707a1 1 0 0 1-1.414-1.414L13.586 12 8.293 6.707a1 1 0 0 1 1.414-1.414l6 6a.999.999 0 0 1 0 1.414l-6 6Z' fill='%2389989B'/%3E%3C/svg%3E");
3455
+ background-image: var(--breadcrumbs-background-image, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.707 18.707a1 1 0 0 1-1.414-1.414L13.586 12 8.293 6.707a1 1 0 0 1 1.414-1.414l6 6a.999.999 0 0 1 0 1.414l-6 6Z' fill='%2389989B'/%3E%3C/svg%3E"));
3455
3456
  background-repeat: no-repeat;
3456
3457
  background-size: 100% 100%;
3457
3458
  background-position: center center;
3458
3459
  }
3459
3460
  .pv-breadcrumbs li:last-child {
3460
3461
  font-weight: 600;
3461
- color: #121313;
3462
+ color: var(--breadcrumbs-active-color, #121313);
3462
3463
  }
3463
3464
 
3464
3465
  .pv-dropdown {
@@ -3771,15 +3772,15 @@ pv-dropdown-auto-close.pv-dropdown > [class*=pv-button][data-dropdown] {
3771
3772
  top: calc(100% + 0.25rem);
3772
3773
  width: max-content;
3773
3774
  max-width: var(--max-width);
3774
- background-color: #242626;
3775
- color: #FFFFFF;
3775
+ background-color: var(--tooltip-background-color, #242626);
3776
+ color: var(--tooltip-color, #FFFFFF);
3776
3777
  padding: 0.5rem;
3777
3778
  border-radius: 4px;
3778
3779
  font-size: 0.6875rem;
3779
3780
  line-height: 1.45454545;
3780
3781
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.12);
3781
3782
  z-index: 50;
3782
- border: 1px solid transparent;
3783
+ border: 1px solid var(--tooltip-border-color, transparent);
3783
3784
  }
3784
3785
  .pv-tooltip[data-position*=top] > [role=tooltip],
3785
3786
  .pv-hover-card[data-position*=top] > [role=tooltip] {
@@ -3847,17 +3848,17 @@ pv-dropdown-auto-close.pv-dropdown > [class*=pv-button][data-dropdown] {
3847
3848
  }
3848
3849
  .pv-tooltip > [role=tooltip] a,
3849
3850
  .pv-hover-card > [role=tooltip] a {
3850
- color: #E4F8F6;
3851
+ color: var(--tooltip-link-color, #E4F8F6);
3851
3852
  }
3852
3853
  .pv-tooltip[data-style=white] > [role=tooltip],
3853
3854
  .pv-hover-card[data-style=white] > [role=tooltip] {
3854
- background-color: white;
3855
- color: #121313;
3856
- border-color: #E3E7EA;
3855
+ background-color: var(--tooltip-white-background-color, white);
3856
+ color: var(--tooltip-white-color, #121313);
3857
+ border-color: var(--tooltip-white-border-color, #E3E7EA);
3857
3858
  }
3858
3859
  .pv-tooltip[data-style=white] > [role=tooltip] a,
3859
3860
  .pv-hover-card[data-style=white] > [role=tooltip] a {
3860
- color: #16696D;
3861
+ color: var(--tooltip-white-link-color, #16696D);
3861
3862
  }
3862
3863
  .pv-tooltip[data-static]:after,
3863
3864
  .pv-hover-card[data-static]:after {
@@ -3884,9 +3885,9 @@ pv-dropdown-auto-close.pv-dropdown > [class*=pv-button][data-dropdown] {
3884
3885
  }
3885
3886
 
3886
3887
  .pv-hover-card:hover > [role=tooltip] {
3887
- background-color: #FFFFFF;
3888
- border: 1px solid #E3E7EA;
3889
- color: #121313;
3888
+ background-color: var(--color-background-body, #FFFFFF);
3889
+ border: 1px solid var(--color-border, #E3E7EA);
3890
+ color: var(--color-text-body, #121313);
3890
3891
  padding: 1rem;
3891
3892
  }
3892
3893
 
@@ -3895,13 +3896,13 @@ pv-dropdown-auto-close.pv-dropdown > [class*=pv-button][data-dropdown] {
3895
3896
  max-width: var(--max-width);
3896
3897
  width: max-content;
3897
3898
  padding: 0.5rem;
3898
- border: 1px solid transparent;
3899
+ border: 1px solid var(--tooltip-border-color, transparent);
3899
3900
  border-radius: 4px;
3900
3901
  font-size: 0.6875rem;
3901
3902
  line-height: 1.45454545;
3902
3903
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.12);
3903
- background-color: #242626;
3904
- color: #FFFFFF;
3904
+ background-color: var(--tooltip-background-color, #242626);
3905
+ color: var(--tooltip-color, #FFFFFF);
3905
3906
  }
3906
3907
 
3907
3908
  .pv-tooltip-v2-content-small {
@@ -3910,30 +3911,30 @@ pv-dropdown-auto-close.pv-dropdown > [class*=pv-button][data-dropdown] {
3910
3911
  }
3911
3912
 
3912
3913
  .pv-tooltip[data-style=white] .pv-tooltip-v2-content {
3913
- background-color: white;
3914
- color: #121313;
3915
- border-color: #E3E7EA;
3914
+ background-color: var(--tooltip-white-background-color, white);
3915
+ color: var(--tooltip-white-color, #121313);
3916
+ border-color: var(--tooltip-white-border-color, #E3E7EA);
3916
3917
  }
3917
3918
  .pv-tooltip[data-style=white] .pv-tooltip-v2-content a {
3918
- color: #16696D;
3919
+ color: var(--tooltip-white-link-color, #16696D);
3919
3920
  }
3920
3921
 
3921
3922
  .pv-tooltip[data-style=dark] .pv-tooltip-v2-content {
3922
- background-color: #242626;
3923
- color: #FFFFFF;
3924
- border-color: transparent;
3923
+ background-color: var(--tooltip-background-color, #242626);
3924
+ color: var(--tooltip-color, #FFFFFF);
3925
+ border-color: var(--tooltip-border-color, transparent);
3925
3926
  }
3926
3927
  .pv-tooltip[data-style=dark] .pv-tooltip-v2-content a {
3927
- color: #E4F8F6;
3928
+ color: var(--tooltip-link-color, #E4F8F6);
3928
3929
  }
3929
3930
 
3930
3931
  .pv-tooltip-v2-content[data-variant=white] {
3931
- background-color: white;
3932
- color: #121313;
3933
- border-color: #E3E7EA;
3932
+ background-color: var(--tooltip-white-background-color, white);
3933
+ color: var(--tooltip-white-color, #121313);
3934
+ border-color: var(--tooltip-white-border-color, #E3E7EA);
3934
3935
  }
3935
3936
  .pv-tooltip-v2-content[data-variant=white] a {
3936
- color: #16696D;
3937
+ color: var(--tooltip-white-link-color, #16696D);
3937
3938
  }
3938
3939
 
3939
3940
  .pv-tooltip-v2-content[data-variant=dark] .pv-accordion {
@@ -4119,7 +4120,7 @@ pv-dropdown-auto-close.pv-dropdown > [class*=pv-button][data-dropdown] {
4119
4120
  --max-width: 360px;
4120
4121
  --text-color: #FFFFFF;
4121
4122
  --hover-color: #FFFFFF;
4122
- background-color: #16696D;
4123
+ background-color: var(--color-background-brand, #16696D);
4123
4124
  box-shadow: 0 8px 32px rgba(22, 105, 109, 0.24);
4124
4125
  color: var(--text-color);
4125
4126
  display: flex;
@@ -4154,8 +4155,8 @@ pv-dropdown-auto-close.pv-dropdown > [class*=pv-button][data-dropdown] {
4154
4155
  white-space: nowrap;
4155
4156
  justify-content: unset;
4156
4157
  gap: 0.5rem;
4157
- background-color: #242626;
4158
- color: #FFFFFF;
4158
+ background-color: var(--action-bar-background-color, #242626);
4159
+ color: var(--action-bar-color, #FFFFFF);
4159
4160
  padding: 0.5rem 0.75rem;
4160
4161
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.12);
4161
4162
  border-radius: 8px;
@@ -4170,8 +4171,8 @@ pv-dropdown-auto-close.pv-dropdown > [class*=pv-button][data-dropdown] {
4170
4171
  white-space: nowrap;
4171
4172
  justify-content: unset;
4172
4173
  gap: 0.5rem;
4173
- background-color: #242626;
4174
- color: #FFFFFF;
4174
+ background-color: var(--action-bar-background-color, #242626);
4175
+ color: var(--action-bar-color, #FFFFFF);
4175
4176
  padding: 0.5rem 0.75rem;
4176
4177
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.12);
4177
4178
  border-radius: 8px;
@@ -4181,13 +4182,13 @@ pv-dropdown-auto-close.pv-dropdown > [class*=pv-button][data-dropdown] {
4181
4182
  }
4182
4183
 
4183
4184
  .pv-action-bar-container[data-style=white] > div {
4184
- background-color: #FFFFFF;
4185
- color: #121313;
4185
+ background-color: var(--action-bar-white-background-color, #FFFFFF);
4186
+ color: var(--action-bar-white-color, #121313);
4186
4187
  }
4187
4188
 
4188
4189
  .pv-action-bar-container[data-style=white] > ::slotted(*) {
4189
- background-color: #FFFFFF;
4190
- color: #121313;
4190
+ background-color: var(--action-bar-white-background-color, #FFFFFF);
4191
+ color: var(--action-bar-white-color, #121313);
4191
4192
  }
4192
4193
 
4193
4194
  pv-header [slot=left],
@@ -4286,7 +4287,7 @@ pv-header [slot=left] h3.pv-heading-3 {
4286
4287
 
4287
4288
  .pv-card:is(button) {
4288
4289
  text-align: left;
4289
- background-color: #FFFFFF;
4290
+ background-color: var(--card-background-color, #FFFFFF);
4290
4291
  cursor: pointer;
4291
4292
  }
4292
4293
 
@@ -4320,8 +4321,8 @@ pv-header [slot=left] h3.pv-heading-3 {
4320
4321
  .pv-card-select {
4321
4322
  --unselected: "Apply to Table";
4322
4323
  --selected: "Applied";
4323
- --unselected-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.85 11.151a1.2 1.2 0 0 0-1.698 0l-4.951 4.952V5a1.2 1.2 0 0 0-2.4 0v11.103L5.849 11.15a1.2 1.2 0 1 0-1.697 1.697l7 7a1.2 1.2 0 0 0 1.697 0l7-7a1.2 1.2 0 0 0 0-1.697Z' fill='%23176F6F'/%3E%3C/svg%3E");
4324
- --selected-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.1 4.9c.6.6.6 1.5 0 2.1l-11 11c-.6.6-1.5.6-2.1 0l-5-5c-.6-.6-.6-1.5 0-2.1.6-.6 1.5-.6 2.1 0l3.9 4L18.9 5c.6-.6 1.6-.6 2.2-.1z' fill='%23176F6F'/%3E%3C/svg%3E");
4324
+ --unselected-icon: var(--card-select-unselected-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.85 11.151a1.2 1.2 0 0 0-1.698 0l-4.951 4.952V5a1.2 1.2 0 0 0-2.4 0v11.103L5.849 11.15a1.2 1.2 0 1 0-1.697 1.697l7 7a1.2 1.2 0 0 0 1.697 0l7-7a1.2 1.2 0 0 0 0-1.697Z' fill='%23176F6F'/%3E%3C/svg%3E"));
4325
+ --selected-icon: var(--card-select-selected-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.1 4.9c.6.6.6 1.5 0 2.1l-11 11c-.6.6-1.5.6-2.1 0l-5-5c-.6-.6-1.5-.6-2.1 0l3.9 4L18.9 5c.6-.6 1.6-.6 2.2-.1z' fill='%23176F6F'/%3E%3C/svg%3E"));
4325
4326
  --gap: 1rem;
4326
4327
  display: flex;
4327
4328
  gap: var(--gap);
@@ -4331,10 +4332,10 @@ pv-header [slot=left] h3.pv-heading-3 {
4331
4332
  }
4332
4333
  .pv-card-select > label {
4333
4334
  flex: 1;
4334
- background-color: #FFFFFF;
4335
- color: #121313;
4335
+ background-color: var(--card-background-color, #FFFFFF);
4336
+ color: var(--color-text-body, #121313);
4336
4337
  font-weight: 400;
4337
- border: 2px solid #E3E7EA;
4338
+ border: 2px solid var(--card-border-color, #E3E7EA);
4338
4339
  border-radius: 4px;
4339
4340
  display: flex;
4340
4341
  flex-direction: column;
@@ -4344,13 +4345,13 @@ pv-header [slot=left] h3.pv-heading-3 {
4344
4345
  }
4345
4346
  .pv-card-select > label > :first-child {
4346
4347
  flex: 1;
4347
- border-bottom: 1px solid #E3E7EA;
4348
+ border-bottom: 1px solid var(--card-border-color, #E3E7EA);
4348
4349
  transition-duration: 0.125s;
4349
4350
  }
4350
4351
  .pv-card-select > label > :last-child {
4351
4352
  padding: 1rem 1.5rem;
4352
4353
  font-weight: 600;
4353
- color: #16696D;
4354
+ color: var(--color-text-brand, #16696D);
4354
4355
  background-image: var(--unselected-icon);
4355
4356
  background-repeat: no-repeat;
4356
4357
  background-size: 1.5rem 1.5rem;
@@ -4360,19 +4361,19 @@ pv-header [slot=left] h3.pv-heading-3 {
4360
4361
  content: var(--unselected);
4361
4362
  }
4362
4363
  .pv-card-select > label:hover {
4363
- color: #16696D;
4364
+ color: var(--color-text-brand, #16696D);
4364
4365
  cursor: pointer;
4365
- border-color: #36C5BA;
4366
+ border-color: var(--color-border-accent, #36C5BA);
4366
4367
  }
4367
4368
  .pv-card-select > label:hover > :first-child {
4368
- border-color: #36C5BA;
4369
+ border-color: var(--color-border-accent, #36C5BA);
4369
4370
  }
4370
4371
  .pv-card-select > input:checked + label {
4371
- background-color: #E8F2F4;
4372
- border-color: #36C5BA;
4372
+ background-color: var(--card-hover-background-color, #E8F2F4);
4373
+ border-color: var(--color-border-accent, #36C5BA);
4373
4374
  }
4374
4375
  .pv-card-select > input:checked + label > :first-child {
4375
- border-color: #36C5BA;
4376
+ border-color: var(--color-border-accent, #36C5BA);
4376
4377
  }
4377
4378
  .pv-card-select > input:checked + label > :last-child {
4378
4379
  background-image: var(--selected-icon);
@@ -4421,10 +4422,10 @@ pv-figure-details details > div {
4421
4422
  pv-figure-details details {
4422
4423
  max-width: 520px;
4423
4424
  margin-inline: auto;
4424
- border-block-end: 1px solid #E3E7EA;
4425
+ border-block-end: 1px solid var(--color-border, #E3E7EA);
4425
4426
  }
4426
4427
  pv-figure-details details:first-of-type {
4427
- border-block-start: 1px solid #E3E7EA;
4428
+ border-block-start: 1px solid var(--color-border, #E3E7EA);
4428
4429
  }
4429
4430
  pv-figure-details.pv-text-inverse summary {
4430
4431
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23fff' d='M10 2.917c.69 0 1.25.56 1.25 1.25V8.75h4.584a1.25 1.25 0 0 1 0 2.5H11.25v4.583a1.25 1.25 0 0 1-2.5 0V11.25H4.167a1.25 1.25 0 1 1 0-2.5H8.75V4.167c0-.69.56-1.25 1.25-1.25Z'/%3E%3C/svg%3E");
@@ -4433,10 +4434,10 @@ pv-figure-details.pv-text-inverse details[open] summary {
4433
4434
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23fff' d='M2.917 10c0-.69.56-1.25 1.25-1.25h11.667a1.25 1.25 0 0 1 0 2.5H4.167c-.69 0-1.25-.56-1.25-1.25Z'/%3E%3C/svg%3E");
4434
4435
  }
4435
4436
  pv-figure-details.pv-text-inverse details {
4436
- border-block-end: 1px solid #36C5BA;
4437
+ border-block-end: 1px solid var(--color-border-accent, #36C5BA);
4437
4438
  }
4438
4439
  pv-figure-details.pv-text-inverse details:first-of-type {
4439
- border-block-start: 1px solid #36C5BA;
4440
+ border-block-start: 1px solid var(--color-border-accent, #36C5BA);
4440
4441
  }
4441
4442
 
4442
4443
  div:has(> pv-figure-details) {
@@ -4525,8 +4526,8 @@ div.pv-drawer[open] {
4525
4526
  }
4526
4527
 
4527
4528
  .pv-rating {
4528
- --background-color: #D9DEDE;
4529
- --icon-color: #36C5BA;
4529
+ --background-color: var(--rating-background-color, #D9DEDE);
4530
+ --icon-color: var(--rating-icon-color, #36C5BA);
4530
4531
  --height: 40px;
4531
4532
  aspect-ratio: 220/40;
4532
4533
  position: relative;
@@ -4574,8 +4575,8 @@ div.pv-drawer[open] {
4574
4575
  }
4575
4576
 
4576
4577
  .pv-rating[data-rating=bar] {
4577
- --background-color: #D9DEDE;
4578
- --icon-color: #176F6F;
4578
+ --background-color: var(--rating-background-color, #D9DEDE);
4579
+ --icon-color: var(--rating-bar-icon-color, #176F6F);
4579
4580
  --height: 10px;
4580
4581
  display: flex;
4581
4582
  align-items: center;
@@ -4600,9 +4601,9 @@ div.pv-drawer[open] {
4600
4601
  }
4601
4602
 
4602
4603
  .pv-rating[data-rating=dot] {
4603
- --background-color: #D9DEDE;
4604
+ --background-color: var(--rating-background-color, #D9DEDE);
4604
4605
  --mask-color: white;
4605
- --icon-color: #36C5BA;
4606
+ --icon-color: var(--rating-icon-color, #36C5BA);
4606
4607
  --height: 10px;
4607
4608
  display: flex;
4608
4609
  aspect-ratio: unset;
@@ -4674,8 +4675,8 @@ div.pv-drawer[open] {
4674
4675
  --size: 40px;
4675
4676
  width: var(--size);
4676
4677
  aspect-ratio: 1;
4677
- background-color: #16696D;
4678
- color: #FFFFFF;
4678
+ background-color: var(--counter-background-color, #16696D);
4679
+ color: var(--counter-color, #FFFFFF);
4679
4680
  display: grid;
4680
4681
  place-items: center;
4681
4682
  font-size: 0.75rem;
@@ -4695,11 +4696,11 @@ div.pv-drawer[open] {
4695
4696
  border: 2px solid transparent;
4696
4697
  }
4697
4698
  .ag-theme-pv .ag-header-cell-filter-button:hover {
4698
- border: 2px solid #176F6F;
4699
+ border: 2px solid var(--ag-filter-active-color, #176F6F);
4699
4700
  }
4700
4701
 
4701
4702
  .ag-theme-pv .ag-filter-active {
4702
- border-color: #176F6F;
4703
+ border-color: var(--ag-filter-active-color, #176F6F);
4703
4704
  }
4704
4705
  .ag-theme-pv .ag-filter-active .ag-icon-filter:after {
4705
4706
  background-image: var(--ag-icon-image-filter-active);
@@ -4718,10 +4719,10 @@ div.pv-drawer[open] {
4718
4719
  padding: 0.5rem;
4719
4720
  font-size: 16px;
4720
4721
  line-height: 1.5;
4721
- border: 2px solid #DCDFE4;
4722
+ border: 2px solid var(--color-border, #DCDFE4);
4722
4723
  border-radius: 2px;
4723
4724
  appearance: none;
4724
- background-color: #fff;
4725
+ background-color: var(--color-background-body, #fff);
4725
4726
  width: 100%;
4726
4727
  min-width: fit-content;
4727
4728
  }
@@ -4729,7 +4730,7 @@ div.pv-drawer[open] {
4729
4730
  box-shadow: none;
4730
4731
  }
4731
4732
  .ag-theme-pv .ag-ltr input[class^=ag-][type=text]:not(:disabled, [data-invalid]):focus-visible, .ag-theme-pv .ag-ltr input[class^=ag-][type=text]:not(:disabled, [data-invalid]):hover {
4732
- border-color: #176F6F;
4733
+ border-color: var(--ag-filter-active-color, #176F6F);
4733
4734
  outline: none;
4734
4735
  }
4735
4736
 
@@ -4769,10 +4770,10 @@ pv-data-grid.ag-theme-pv {
4769
4770
  display: block;
4770
4771
  --ag-font-family: Inter, sans-serif !important;
4771
4772
  --ag-font-size: 0.6875rem !important;
4772
- --ag-foreground-color: #121313 !important;
4773
- --ag-border-color: #E3E7EA !important;
4774
- --ag-background-color: #FFFFFF !important;
4775
- --ag-odd-row-background-color: #FFFFFF !important;
4773
+ --ag-foreground-color: var(--pv-ag-foreground-color, #121313) !important;
4774
+ --ag-border-color: var(--pv-ag-border-color, #E3E7EA) !important;
4775
+ --ag-background-color: var(--pv-ag-background-color, #FFFFFF) !important;
4776
+ --ag-odd-row-background-color: var(--pv-ag-odd-row-background-color, #FFFFFF) !important;
4776
4777
  --ag-row-grid-size: 0.25rem !important;
4777
4778
  --ag-header-height: 1.6875rem !important;
4778
4779
  --ag-row-height: 1.6875rem !important;
@@ -4780,21 +4781,22 @@ pv-data-grid.ag-theme-pv {
4780
4781
  --ag-cell-horizontal-border: solid #E3E7EA !important;
4781
4782
  --ag-column-border: solid 1px #E3E7EA !important;
4782
4783
  --ag-active-color: #36C5BA !important;
4783
- --ag-row-hover-color: #F7F8F8 !important;
4784
+ --ag-row-hover-color: var(--pv-ag-row-hover-color, #F7F8F8) !important;
4784
4785
  --ag-range-selection-background-color: rgba(0,0,0,0.2) !important;
4785
- --ag-accent-color: #16696D !important;
4786
- --ag-header-cell-hover-background-color: #E2F7F5;
4786
+ --ag-accent-color: var(--pv-ag-accent-color, #16696D) !important;
4787
+ --ag-header-cell-hover-background-color: var(--pv-ag-header-cell-hover-background-color, #E2F7F5);
4787
4788
  --ag-header-column-separator-height: 100%;
4788
4789
  --ag-popup-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.30), 0px 8px 12px -4px rgba(0, 0, 0, 0.08), 0px 12px 16px 0px rgba(0, 0, 0, 0.10);
4789
4790
  --ag-card-radius: .25rem;
4790
4791
  --ag-borders: 1px solid;
4791
- --ag-menu-border-color: #DCDFE4;
4792
- --ag-menu-background-color: #FFFFFF;
4792
+ --ag-menu-border-color: var(--pv-ag-menu-border-color, #DCDFE4);
4793
+ --ag-menu-background-color: var(--pv-ag-menu-background-color, #FFFFFF);
4793
4794
  --ag-list-item-height: 36px;
4794
- --ag-secondary-foreground-color: #02363D;
4795
+ --ag-secondary-foreground-color: var(--pv-ag-secondary-foreground-color, #02363D);
4795
4796
  --ag-icon-size: 16px;
4796
4797
  --ag-icon-font-display: none;
4797
4798
  --ag-icon-font-color: $color-text-body;
4799
+ --ag-icon-font-color-filter: var(--pv-ag-icon-font-color-filter, #121313);
4798
4800
  --ag-icon-image-none: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2302363D66'%3E%3Cpath d='M6.2 14.2c.5-.5 1.2-.5 1.7 0l4.2 4.2 4.2-4.2c.5-.5 1.2-.5 1.7 0s.5 1.2 0 1.7l-5 5c-.5.5-1.2.5-1.7 0l-5-5c-.6-.5-.6-1.3-.1-1.7z'/%3E%3Cpath d='M11.2 3.2c.5-.5 1.2-.5 1.7 0l5 5c.5.5.5 1.2 0 1.7s-1.2.5-1.7 0L12 5.7 7.8 9.8c-.5.5-1.2.5-1.7 0s-.5-1.2 0-1.7l5.1-4.9z'/%3E%3C/svg%3E");
4799
4801
  --ag-icon-image-asc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2302363D66'%3E%3Cpath d='M6.2 14.2c.5-.5 1.2-.5 1.7 0l4.2 4.2 4.2-4.2c.5-.5 1.2-.5 1.7 0s.5 1.2 0 1.7l-5 5c-.5.5-1.2.5-1.7 0l-5-5c-.6-.5-.6-1.3-.1-1.7z'/%3E%3Cpath d='M11.2 3.2c.5-.5 1.2-.5 1.7 0l5 5c.5.5.5 1.2 0 1.7s-1.2.5-1.7 0L12 5.7 7.8 9.8c-.5.5-1.2.5-1.7 0s-.5-1.2 0-1.7l5.1-4.9z' fill='%2302363D'/%3E%3C/svg%3E");
4800
4802
  --ag-icon-image-desc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2302363D66'%3E%3Cpath d='M6.2 14.2c.5-.5 1.2-.5 1.7 0l4.2 4.2 4.2-4.2c.5-.5 1.2-.5 1.7 0s.5 1.2 0 1.7l-5 5c-.5.5-1.2.5-1.7 0l-5-5c-.6-.5-.6-1.3-.1-1.7z' fill='%2302363D'/%3E%3Cpath d='M11.2 3.2c.5-.5 1.2-.5 1.7 0l5 5c.5.5.5 1.2 0 1.7s-1.2.5-1.7 0L12 5.7 7.8 9.8c-.5.5-1.2.5-1.7 0s-.5-1.2 0-1.7l5.1-4.9z'/%3E%3C/svg%3E");
@@ -4886,36 +4888,36 @@ pv-data-grid.ag-theme-pv {
4886
4888
  transition-property: background-color, color;
4887
4889
  padding: 0.5rem 1rem;
4888
4890
  color: white !important;
4889
- background-color: #176F6F;
4891
+ background-color: var(--button-primary-background-color, #176F6F);
4890
4892
  }
4891
4893
  .ag-button:not(:disabled):hover, .ag-button:not(:disabled):focus-visible,
4892
4894
  .ag-filter-apply-panel-button:not(:disabled):hover,
4893
4895
  .ag-filter-apply-panel-button:not(:disabled):focus-visible {
4894
4896
  color: white;
4895
- background-color: #0D5256;
4897
+ background-color: var(--button-primary-hover-background-color, #0D5256);
4896
4898
  }
4897
4899
 
4898
4900
  .ag-checkbox-input-wrapper {
4899
4901
  appearance: none;
4900
4902
  width: 1rem !important;
4901
4903
  height: 1rem !important;
4902
- background-color: white;
4903
- border: 2px solid #DCDFE4;
4904
+ background-color: var(--color-background-body, white);
4905
+ border: 2px solid var(--checkbox-border, #DCDFE4);
4904
4906
  flex-shrink: 0;
4905
4907
  border-radius: 2px !important;
4906
4908
  transition-duration: 0.125s;
4907
4909
  transition-property: background-color, border-color;
4908
4910
  }
4909
4911
  .ag-checkbox-input-wrapper:focus-visible:not(:disabled), .ag-checkbox-input-wrapper:hover:not(:disabled) {
4910
- border-color: #176F6F;
4912
+ border-color: var(--ag-filter-active-color, #176F6F);
4911
4913
  }
4912
4914
  .ag-checkbox-input-wrapper.ag-checked {
4913
4915
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23fff' d='m12 2.256-7.762 8.87L0 6.89l1.466-1.466 2.67 2.67L10.44.892 12 2.256Z'/%3E%3C/svg%3E");
4914
- background-color: #218C88;
4915
- border-color: #218C88;
4916
+ background-color: var(--checkbox-checked-background-color, #218C88);
4917
+ border-color: var(--checkbox-checked-border-color, #218C88);
4916
4918
  }
4917
4919
  .ag-checkbox-input-wrapper.ag-checked:focus-visible:not(:disabled), .ag-checkbox-input-wrapper.ag-checked:hover:not(:disabled) {
4918
- background-color: #176F6F;
4920
+ background-color: var(--checkbox-checked-hover-background-color, #176F6F);
4919
4921
  }
4920
4922
  .ag-checkbox-input-wrapper.ag-checked:before {
4921
4923
  background-image: none !important;
@@ -4943,7 +4945,7 @@ pv-data-grid.ag-theme-pv {
4943
4945
  }
4944
4946
 
4945
4947
  .ag-cell-range-single-cell {
4946
- border: 1px solid #02363D !important;
4948
+ border: 1px solid var(--ag-cell-range-border-color, #02363D) !important;
4947
4949
  }
4948
4950
 
4949
4951
  .ag-select .ag-picker-field-wrapper {
@@ -4996,11 +4998,11 @@ pv-data-grid.ag-theme-pv {
4996
4998
  }
4997
4999
 
4998
5000
  .ag-theme-pv .data-grid-cell-top-border {
4999
- border-top: 1px solid #E3E7EA;
5001
+ border-top: 1px solid var(--color-border, #E3E7EA);
5000
5002
  }
5001
5003
 
5002
5004
  .ag-theme-pv .data-grid-cell-bottom-border {
5003
- border-bottom: 1px solid #E3E7EA;
5005
+ border-bottom: 1px solid var(--color-border, #E3E7EA);
5004
5006
  }
5005
5007
 
5006
5008
  [class*=pv-banner] {
@@ -5147,26 +5149,26 @@ pv-data-grid.ag-theme-pv {
5147
5149
  font-size: 12px;
5148
5150
  line-height: 1rem;
5149
5151
  border: 1px solid transparent;
5150
- color: #FFFFFF;
5152
+ color: var(--badge-primary-color, #FFFFFF);
5151
5153
  padding: calc(0.125rem - 1px);
5152
5154
  min-width: 20px;
5153
- background-color: #16696D;
5155
+ background-color: var(--badge-primary-background-color, #16696D);
5154
5156
  }
5155
5157
 
5156
5158
  .pv-badge-secondary {
5157
- border-color: #E3E7EA;
5158
- background-color: #FFFFFF;
5159
- color: #121313;
5159
+ border-color: var(--badge-secondary-border-color, #E3E7EA);
5160
+ background-color: var(--badge-secondary-background-color, #FFFFFF);
5161
+ color: var(--badge-secondary-color, #121313);
5160
5162
  }
5161
5163
 
5162
5164
  .pv-badge-tertiary {
5163
- background-color: #E0E5E4;
5164
- color: #4B595C;
5165
+ background-color: var(--badge-tertiary-background-color, #E0E5E4);
5166
+ color: var(--badge-tertiary-color, #4B595C);
5165
5167
  }
5166
5168
 
5167
5169
  .pv-badge-ghost {
5168
- background-color: transparent;
5169
- color: #4B595C;
5170
+ background-color: var(--badge-ghost-background-color, transparent);
5171
+ color: var(--badge-ghost-color, #4B595C);
5170
5172
  }
5171
5173
 
5172
5174
  .pv-badge-sm {
@@ -5352,7 +5354,7 @@ pv-data-grid.ag-theme-pv {
5352
5354
  }
5353
5355
  .pv-layout-primary > [data-grid-area=content] > [data-grid-area=header],
5354
5356
  .pv-layout-primary[data-collapsed] > [data-grid-area=content] > [data-grid-area=header] {
5355
- background-color: #F7F8F8;
5357
+ background-color: var(--color-background-accent, #F7F8F8);
5356
5358
  padding-inline: 1.5rem;
5357
5359
  border-block-end: 1px solid var(--layout-primary-sidebar-header-border-color, #FFFFFF);
5358
5360
  }
@@ -5883,12 +5885,12 @@ pv-sidebar {
5883
5885
  }
5884
5886
  .pv-layout-sidebar > [data-grid-area=main] > :nth-child(2) {
5885
5887
  grid-row: 2/2;
5886
- background-color: #F7F8F8;
5887
- border-top: 1px solid #E3E7EA;
5888
+ background-color: var(--color-background-accent, #F7F8F8);
5889
+ border-top: 1px solid var(--color-border, #E3E7EA);
5888
5890
  }
5889
5891
  .pv-layout-sidebar > [data-grid-area=sidebar] {
5890
5892
  grid-area: sidebar;
5891
- border-left: 1px solid #E3E7EA;
5893
+ border-left: 1px solid var(--color-border, #E3E7EA);
5892
5894
  display: grid;
5893
5895
  grid-template-rows: auto 1fr;
5894
5896
  }
@@ -5908,7 +5910,7 @@ pv-sidebar {
5908
5910
  .pv-layout-ama {
5909
5911
  display: grid;
5910
5912
  align-content: start;
5911
- background-image: linear-gradient(109.07deg, #176F6F 0%, #02363D 100%);
5913
+ background-image: var(--color-background-brand-gradient, linear-gradient(109.07deg, #176F6F 0%, #02363D 100%));
5912
5914
  min-height: 100%;
5913
5915
  }
5914
5916
 
@@ -5935,7 +5937,7 @@ pv-sidebar {
5935
5937
  height: 100%;
5936
5938
  }
5937
5939
  .pv-layout-sidebar-left > :first-child {
5938
- border-right: 1px solid #E3E7EA;
5940
+ border-right: 1px solid var(--color-border, #E3E7EA);
5939
5941
  }
5940
5942
 
5941
5943
  .pv-layout-website > section > div,
@@ -5999,7 +6001,7 @@ pv-sidebar {
5999
6001
  --right-size: var(--min-size) !important;
6000
6002
  }
6001
6003
  .pv-layout-two-sidebar [data-layout=left-sidebar] {
6002
- border-right: 1px solid #E3E7EA;
6004
+ border-right: 1px solid var(--color-border, #E3E7EA);
6003
6005
  min-width: var(--left-size);
6004
6006
  }
6005
6007
  .pv-layout-two-sidebar [data-layout=left-sidebar][data-hidden] {
@@ -6007,7 +6009,7 @@ pv-sidebar {
6007
6009
  width: var(--min-size);
6008
6010
  }
6009
6011
  .pv-layout-two-sidebar [data-layout=right-sidebar] {
6010
- border-left: 1px solid #E3E7EA;
6012
+ border-left: 1px solid var(--color-border, #E3E7EA);
6011
6013
  min-width: var(--right-size);
6012
6014
  }
6013
6015
  .pv-layout-two-sidebar [data-layout=right-sidebar][data-hidden] {
@@ -6029,7 +6031,7 @@ pv-sidebar {
6029
6031
  }
6030
6032
 
6031
6033
  .pv-surface {
6032
- background-color: var(--color-background-white, #FFFFFF);
6034
+ background-color: var(--color-background-white, var(--color-background-body, #FFFFFF));
6033
6035
  }
6034
6036
 
6035
6037
  .pv-surface-brand-inverse {
@@ -6139,7 +6141,7 @@ svg.pv-text-inherit {
6139
6141
  }
6140
6142
 
6141
6143
  .pv-data-text-visualization-2 {
6142
- color: #16696D;
6144
+ color: var(--data-visualization-2-color, #16696D);
6143
6145
  }
6144
6146
 
6145
6147
  .pv-data-text-visualization-3 {
@@ -6167,7 +6169,7 @@ svg.pv-text-inherit {
6167
6169
  }
6168
6170
 
6169
6171
  .pv-data-surface-visualization-2 {
6170
- background-color: #16696D;
6172
+ background-color: var(--data-visualization-2-color, #16696D);
6171
6173
  }
6172
6174
 
6173
6175
  .pv-data-surface-visualization-3 {
@@ -6900,8 +6902,8 @@ svg.pv-text-inherit {
6900
6902
  }
6901
6903
 
6902
6904
  .select2-selection {
6903
- background-color: #fff;
6904
- border: 1px solid #E3E7EA;
6905
+ background-color: var(--color-background-body, #fff);
6906
+ border: var(--select2-border, 1px solid #E3E7EA);
6905
6907
  border-radius: 4px;
6906
6908
  padding-inline-end: 2rem;
6907
6909
  background-repeat: no-repeat;
@@ -6920,7 +6922,7 @@ svg.pv-text-inherit {
6920
6922
  overflow: hidden;
6921
6923
  text-overflow: ellipsis;
6922
6924
  white-space: nowrap;
6923
- color: #4B595C;
6925
+ color: var(--color-text-subdued, #4B595C);
6924
6926
  line-height: 12px;
6925
6927
  }
6926
6928
  .select2-selection .select2-selection__clear {
@@ -6930,15 +6932,15 @@ svg.pv-text-inherit {
6930
6932
  font-weight: bold;
6931
6933
  }
6932
6934
  .select2-selection .select2-selection__placeholder {
6933
- color: #89989B;
6935
+ color: var(--select2-input-placeholder-color, #89989B);
6934
6936
  }
6935
6937
  .select2-selection .select2-selection__arrow {
6936
6938
  display: none;
6937
6939
  }
6938
6940
 
6939
6941
  .select2-selection--multiple {
6940
- background-color: white;
6941
- border: 1px solid #E3E7EA;
6942
+ background-color: var(--color-background-body, white);
6943
+ border: var(--select2-border, 1px solid #E3E7EA);
6942
6944
  border-radius: 4px;
6943
6945
  cursor: text;
6944
6946
  }
@@ -6968,7 +6970,7 @@ svg.pv-text-inherit {
6968
6970
  }
6969
6971
 
6970
6972
  .select2-dropdown {
6971
- background-color: white;
6973
+ background-color: var(--color-background-body, white);
6972
6974
  border-radius: 4px;
6973
6975
  padding-block: 0.5rem;
6974
6976
  display: block;
@@ -6987,13 +6989,13 @@ svg.pv-text-inherit {
6987
6989
  padding: 0.5rem 2rem 0.5rem 0.5rem;
6988
6990
  line-height: 12px;
6989
6991
  border-radius: 4px;
6990
- border: 1px solid #E3E7EA;
6992
+ border: var(--select2-border, 1px solid #E3E7EA);
6991
6993
  height: 32px;
6992
6994
  width: 100%;
6993
6995
  position: absolute;
6994
6996
  top: -33px;
6995
6997
  left: 0;
6996
- background-color: white;
6998
+ background-color: var(--color-background-body, white);
6997
6999
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.151 15.848a1.2 1.2 0 0 0 1.698 0L12 10.698l5.151 5.15a1.2 1.2 0 1 0 1.698-1.697l-6-6a1.2 1.2 0 0 0-1.697 0l-6 6a1.2 1.2 0 0 0 0 1.697Z' fill='%2302363D'/%3E%3C/svg%3E");
6998
7000
  background-repeat: no-repeat;
6999
7001
  background-size: 1rem 1rem;
@@ -7002,7 +7004,7 @@ svg.pv-text-inherit {
7002
7004
  }
7003
7005
 
7004
7006
  .select2-dropdown--above .select2-search__field {
7005
- background-color: #fff;
7007
+ background-color: var(--color-background-body, #fff);
7006
7008
  }
7007
7009
 
7008
7010
  .select2-container--open .select2-selection__placeholder,
@@ -7014,7 +7016,7 @@ svg.pv-text-inherit {
7014
7016
  .select2-container--focus .select2-selection,
7015
7017
  .select2-container--focus .select2-selection--multiple,
7016
7018
  .select2-container--focus .select2-selection__rendered {
7017
- border-color: #36C5BA;
7019
+ border-color: var(--color-border-accent, #36C5BA);
7018
7020
  outline: 0;
7019
7021
  font-size: 0.75rem;
7020
7022
  line-height: 1.33333333;
@@ -7048,7 +7050,7 @@ svg.pv-text-inherit {
7048
7050
  -webkit-user-select: none;
7049
7051
  font-size: 0.75rem;
7050
7052
  line-height: 1.33333333;
7051
- color: #121313;
7053
+ color: var(--select2-menu-item-color, #121313);
7052
7054
  }
7053
7055
 
7054
7056
  .select2-results__option[aria-selected] {
@@ -7127,7 +7129,7 @@ svg.pv-text-inherit {
7127
7129
  }
7128
7130
 
7129
7131
  .select2-container--default .select2-selection--multiple .select2-selection__placeholder {
7130
- color: #89989B;
7132
+ color: var(--select2-input-placeholder-color, #89989B);
7131
7133
  margin-top: 5px;
7132
7134
  float: left;
7133
7135
  }
@@ -7141,7 +7143,7 @@ svg.pv-text-inherit {
7141
7143
  }
7142
7144
 
7143
7145
  .select2-container--default .select2-selection--multiple .select2-selection__choice {
7144
- background-color: #E8EBEB;
7146
+ background-color: var(--select2-menu-item-background-color, #E8EBEB);
7145
7147
  border: none;
7146
7148
  border-radius: 4px;
7147
7149
  padding: 0.125rem 0.5rem;
@@ -7152,7 +7154,7 @@ svg.pv-text-inherit {
7152
7154
  }
7153
7155
 
7154
7156
  .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
7155
- color: #4B595C;
7157
+ color: var(--select2-menu-item-tag-remove-icon-color, #4B595C);
7156
7158
  cursor: pointer;
7157
7159
  display: inline-block;
7158
7160
  font-weight: bold;
@@ -7160,7 +7162,7 @@ svg.pv-text-inherit {
7160
7162
  }
7161
7163
 
7162
7164
  .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
7163
- color: #4B595C;
7165
+ color: var(--select2-menu-item-tag-remove-icon-color, #4B595C);
7164
7166
  }
7165
7167
 
7166
7168
  .select2-container--default.select2-container--disabled .select2-selection--multiple {
@@ -7193,7 +7195,7 @@ svg.pv-text-inherit {
7193
7195
  }
7194
7196
 
7195
7197
  .select2-container--default .select2-results__option[aria-disabled=true] {
7196
- color: #89989B;
7198
+ color: var(--select2-input-placeholder-color, #89989B);
7197
7199
  }
7198
7200
 
7199
7201
  .select2-results__option {
@@ -7203,7 +7205,7 @@ svg.pv-text-inherit {
7203
7205
 
7204
7206
  .select2-results__option[aria-selected=true],
7205
7207
  .select2-results__option--highlighted {
7206
- background-color: #F7F8F8;
7208
+ background-color: var(--color-background-accent, #F7F8F8);
7207
7209
  }
7208
7210
 
7209
7211
  .select2-container--default .select2-results__group {
@@ -7219,25 +7221,25 @@ svg.pv-text-inherit {
7219
7221
  }
7220
7222
 
7221
7223
  .select2-selection--single .select2-selection__rendered {
7222
- color: #121313;
7224
+ color: var(--select2-text-color, #121313);
7223
7225
  padding: calc(0.5rem - 1px) 0.5rem;
7224
7226
  font-weight: 500;
7225
7227
  }
7226
7228
 
7227
7229
  .select2-results__option[aria-selected=true] {
7228
- background-color: #E4F8F6;
7230
+ background-color: var(--select2-menu-item-selected-background-color, #E4F8F6);
7229
7231
  }
7230
7232
 
7231
7233
  .select2-results__option--highlighted {
7232
- background-color: #E8F2F4;
7234
+ background-color: var(--select2-menu-item-hover-background-color, #E8F2F4);
7233
7235
  }
7234
7236
 
7235
7237
  input.select2-search__field::placeholder {
7236
- color: #89989B !important;
7238
+ color: var(--select2-input-placeholder-color, #89989B) !important;
7237
7239
  }
7238
7240
 
7239
7241
  .select2-container--pv-dark .select2-selection {
7240
- background-color: #353938;
7242
+ background-color: var(--select2-dark-background-color, #353938);
7241
7243
  color: white;
7242
7244
  }
7243
7245
  .select2-container--pv-dark .select2-selection:not([aria-expanded=true]) {
@@ -7252,7 +7254,7 @@ input.select2-search__field::placeholder {
7252
7254
  color: white;
7253
7255
  }
7254
7256
  .select2-container--pv-dark .select2-search__field {
7255
- background-color: #353938;
7257
+ background-color: var(--select2-dark-background-color, #353938);
7256
7258
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.151 15.848a1.2 1.2 0 0 0 1.698 0L12 10.698l5.151 5.15a1.2 1.2 0 1 0 1.698-1.697l-6-6a1.2 1.2 0 0 0-1.697 0l-6 6a1.2 1.2 0 0 0 0 1.697Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
7257
7259
  }
7258
7260
  .select2-container--pv-dark .select2-results__options {
@@ -7305,7 +7307,7 @@ input.select2-search__field::placeholder {
7305
7307
  top: 0px;
7306
7308
  padding: 0.5rem 0.5rem 0.5rem calc(0.5rem + 1px);
7307
7309
  width: 2rem;
7308
- color: #4B595C;
7310
+ color: var(--color-text-subdued, #4B595C);
7309
7311
  }
7310
7312
 
7311
7313
  .p-datepicker-panel {
@@ -7361,15 +7363,15 @@ input.select2-search__field::placeholder {
7361
7363
  .p-datepicker-month-view .p-datepicker-year-selected,
7362
7364
  .p-datepicker-year-view .p-datepicker-month-selected,
7363
7365
  .p-datepicker-year-view .p-datepicker-year-selected {
7364
- background-color: #16696D;
7366
+ background-color: var(--p-datepicker-date-selected-background, #16696D);
7365
7367
  color: white;
7366
7368
  }
7367
7369
  .p-datepicker-month-view .p-datepicker-month-selected + .p-datepicker-month-selected:has(+ .p-datepicker-month-selected),
7368
7370
  .p-datepicker-month-view .p-datepicker-year-selected + .p-datepicker-year-selected:has(+ .p-datepicker-year-selected),
7369
7371
  .p-datepicker-year-view .p-datepicker-month-selected + .p-datepicker-month-selected:has(+ .p-datepicker-month-selected),
7370
7372
  .p-datepicker-year-view .p-datepicker-year-selected + .p-datepicker-year-selected:has(+ .p-datepicker-year-selected) {
7371
- background-color: #E4F8F6;
7372
- color: #121313;
7373
+ background-color: var(--p-datepicker-date-range-selected-background, #E4F8F6);
7374
+ color: var(--p-datepicker-date-range-selected-color, #121313);
7373
7375
  }
7374
7376
 
7375
7377
  .p-datepicker-calendar-container .p-datepicker-header .p-button {
@@ -7382,17 +7384,17 @@ input.select2-search__field::placeholder {
7382
7384
  font-size: 0.75rem;
7383
7385
  }
7384
7386
  .p-datepicker-calendar-container .p-datepicker-day-selected:hover, .p-datepicker-calendar-container .p-datepicker-day-selected:focus-visible {
7385
- background-color: #0D5256;
7387
+ background-color: var(--button-primary-hover-background-color, #0D5256);
7386
7388
  }
7387
7389
  .p-datepicker-calendar-container .p-datepicker-day-selected:active {
7388
- background-color: #02363D;
7390
+ background-color: var(--button-primary-pressed-background-color, #02363D);
7389
7391
  }
7390
7392
  .p-datepicker-calendar-container .p-datepicker-day-selected-range {
7391
- background-color: #E4F8F6;
7392
- color: #121313;
7393
+ background-color: var(--p-datepicker-date-range-selected-background, #E4F8F6);
7394
+ color: var(--p-datepicker-date-range-selected-color, #121313);
7393
7395
  }
7394
7396
  .p-datepicker-calendar-container .p-datepicker-day:not(.p-datepicker-day-selected):not(.p-disabled):active {
7395
- background-color: #C7D8DB;
7397
+ background-color: var(--p-button-text-secondary-active-background, #C7D8DB);
7396
7398
  }
7397
7399
  .p-datepicker-calendar-container .p-icon {
7398
7400
  height: 0.75rem;