add border to tooltip and modal in high contrast theme (#10834)

app/assets/css/theme.css

@@ -566,6 +566,10 @@
   --border-widget: var(--white-color);
   --border-stepper-color: var(--ui-gray-warm-9);
 
+  --button-close-color: var(--white-color);
+  --button-opacity: 1;
+  --button-opacity-hover: 0.7;
+
   --shadow-box-color: none;
   --shadow-boxselector-color: none;
 

app/assets/css/vendor-override.css

@@ -349,6 +349,26 @@ input:-webkit-autofill {
   border-left: 8px solid var(--bg-tooltip-color);
 }
 
+[theme='highcontrast'] .tippy-box[data-placement^='top'] > .tippy-arrow:before {
+  border-top: 8px solid var(--white-color);
+  margin-bottom: -1px;
+}
+
+[theme='highcontrast'] .tippy-box[data-placement^='bottom'] > .tippy-arrow:before {
+  border-bottom: 8px solid var(--white-color);
+  margin-top: -1px;
+}
+
+[theme='highcontrast'] .tippy-box[data-placement^='right'] > .tippy-arrow:before {
+  border-right: 8px solid var(--white-color);
+  margin-left: -1px;
+}
+
+[theme='highcontrast'] .tippy-box[data-placement^='left'] > .tippy-arrow:before {
+  border-left: 8px solid var(--white-color);
+  margin-right: -1px;
+}
+
 /* Sidebar */
 .sidebar .tippy-box {
   font-size: 12px;

app/react/components/Tip/TooltipWithChildren/TooltipWithChildren.module.css

@@ -21,6 +21,11 @@
   opacity: 1 !important;
 }
 
+[theme='highcontrast'] .tooltip {
+  border: 1px solid var(--border-widget);
+  border-color: var(--white-color) !important;
+}
+
 .tooltip-container {
   line-height: 18px;
   padding: 8px 10px !important;

app/react/components/modals/Modal/Modal.module.css

@@ -21,3 +21,7 @@
 
   box-shadow: 0 5px 15px rgb(0 0 0 / 50%);
 }
+
+[theme='highcontrast'] .modal-content {
+  border: 1px solid var(--border-widget);
+}