[High Contrast Mode] Form controls

packages/eui/src/components/card/checkable_card/__snapshots__/checkable_card.test.tsx.snap

@@ -17,7 +17,7 @@ exports[`EuiCheckableCard is rendered 1`] = `
       >
         <span
           class="emotion-euiRadio__icon"
-          data-euiicon-type="dot"
+          data-euiicon-type="empty"
         />
         <input
           class="euiRadio__input emotion-euiRadio__input"
@@ -96,7 +96,7 @@ exports[`EuiCheckableCard renders children 1`] = `
       >
         <span
           class="emotion-euiRadio__icon"
-          data-euiicon-type="dot"
+          data-euiicon-type="empty"
         />
         <input
           class="euiRadio__input emotion-euiRadio__input"
@@ -142,7 +142,7 @@ exports[`EuiCheckableCard renders disabled 1`] = `
       >
         <span
           class="emotion-euiRadio__icon"
-          data-euiicon-type="dot"
+          data-euiicon-type="empty"
         />
         <input
           class="euiRadio__input emotion-euiRadio__input"
@@ -182,7 +182,7 @@ exports[`EuiCheckableCard renders panel props 1`] = `
       >
         <span
           class="emotion-euiRadio__icon"
-          data-euiicon-type="dot"
+          data-euiicon-type="empty"
         />
         <input
           class="euiRadio__input emotion-euiRadio__input"

packages/eui/src/components/filter_group/filter_select_item.styles.ts

@@ -45,7 +45,10 @@ export const euiFilterSelectItemStyles = (euiThemeContext: UseEuiTheme) => {
       color: ${euiTheme.colors.text};
       ${logicalCSS(
         'border-bottom',
-        `${euiTheme.border.width.thin} solid ${euiTheme.colors.lightestShade}`
+        `${euiTheme.border.width.thin} solid ${transparentize(
+          euiTheme.border.color,
+          0.4
+        )}`
       )}
 
       &:hover {

packages/eui/src/components/form/checkbox/checkbox_group.stories.tsx

@@ -44,3 +44,9 @@ export const Playground: Story = {
     },
   },
 };
+
+export const HighContrast: Story = {
+  ...Playground,
+  tags: ['vrt-only'],
+  globals: { highContrastMode: true },
+};

packages/eui/src/components/form/file_picker/file_picker.styles.ts

@@ -98,7 +98,7 @@ export const euiFilePickerStyles = (euiThemeContext: UseEuiTheme) => {
       ${euiTextTruncate()}
       color: ${euiTheme.colors.text};
       border: ${euiTheme.border.width.thick} dashed
-        var(--euiFormControlStateColor, ${euiTheme.colors.lightShade});
+        var(--euiFormControlStateColor, ${euiTheme.border.color});
 
       ${euiCanAnimate} {
         transition: border-color ${euiTheme.animation.fast} ease-in,

packages/eui/src/components/form/form.styles.test.tsx

@@ -54,6 +54,7 @@ describe('euiFormVariables', () => {
         "iconAffordance": "24px",
         "iconCompressedAffordance": "18px",
         "maxWidth": "400px",
+        "stateUnderlineHeight": "2px",
         "textColor": "#343741",
       }
     `);
@@ -123,11 +124,11 @@ describe('euiFormControlStyles', () => {
 
         ",
         "focus": "
-        --euiFormControlStateColor: #07C;
-        background-color: #FFF;
-        background-size: 100% 100%;
-        outline: none; /* Remove all outlines and rely on our own bottom border gradient */
-      ",
+          --euiFormControlStateColor: #07C;
+          background-color: #FFF;
+          background-size: 100% 100%;
+          outline: none; /* Remove all outlines and rely on our own bottom border gradient */
+        ",
         "formWidth": "
             max-inline-size: 400px;
             inline-size: 100%;
@@ -142,9 +143,9 @@ describe('euiFormControlStyles', () => {
             border-radius: 0;
           ",
         "invalid": "
-        --euiFormControlStateColor: #BD271E;
-        background-size: 100% 100%;
-      ",
+          --euiFormControlStateColor: #BD271E;
+          background-size: 100% 100%;
+        ",
         "readOnly": "
           cursor: default;
           color: #343741;
@@ -224,26 +225,40 @@ describe('euiFormCustomControlStyles', () => {
         "input": {
           "disabled": {
             "selected": "
-                label: disabled;
-                color: #69707D;
-                background-color: #D3DAE6;
-              ",
+
+                  label: disabled;
+                  cursor: not-allowed;
+                  background-color: #D3DAE6;
+                  border-color: #D3DAE6;
+
+                  color: #69707D;
+                ",
+            "shared": "
+                  label: disabled;
+                  cursor: not-allowed;
+                  background-color: #D3DAE6;
+                  border-color: #D3DAE6;
+                ",
             "unselected": "
-                label: disabled;
-                color: #D3DAE6;
-                background-color: #D3DAE6;
-                cursor: not-allowed;
-              ",
+
+                  label: disabled;
+                  cursor: not-allowed;
+                  background-color: #D3DAE6;
+                  border-color: #D3DAE6;
+
+                  color: #D3DAE6;
+                ",
           },
           "enabled": {
             "selected": "
                 color: #FFF;
                 background-color: #07C;
+                border-color: #07C;
               ",
             "unselected": "
                 color: transparent;
                 background-color: #FFF;
-                border: 1px solid #919296;
+                border-color: #919296;
 
                 &:has(input:focus) {
                   border-color: #07C;
@@ -257,6 +272,8 @@ describe('euiFormCustomControlStyles', () => {
               display: flex;
               justify-content: center;
               align-items: center;
+              /* For Windows high contrast themes, a border must always be rendered, not just a background */
+              border: 1px solid transparent;
 
               &:has(input:focus-visible) {
                 outline: 2px solid #07C;