From 68f1beaedd97afd9f8b79465d63e9482b7e4a4e2 Mon Sep 17 00:00:00 2001
From: Sarah Ridge <sarahmarie@hey.com>
Date: Tue, 7 Sep 2021 23:49:35 -0400
Subject: [PATCH] Fix Swagger UI colors for better Accessibility (#3887)

Co-authored-by: Eric Reynolds <eric.reynolds@konghq.com>
Co-authored-by: Opender Singh <opender.singh@konghq.com>
---
 .../app/ui/css/components/spec-editor.less    | 39 +++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/packages/insomnia-app/app/ui/css/components/spec-editor.less b/packages/insomnia-app/app/ui/css/components/spec-editor.less
index 2bda95b6a5..696c340f6a 100644
--- a/packages/insomnia-app/app/ui/css/components/spec-editor.less
+++ b/packages/insomnia-app/app/ui/css/components/spec-editor.less
@@ -1,3 +1,4 @@
+
 #swagger-ui-wrapper {
   height: 100%;
   overflow-y: scroll;
@@ -9,6 +10,9 @@
   h4,
   p,
   li,
+  small,
+  label,
+  .btn,
   .model-box,
   .model-title,
   .opblock-summary-description,
@@ -30,6 +34,41 @@
     user-select: all;
   }
 
+  .btn {
+    border-width: 2px;
+  }
+
+  .modal-ux,
+  .dialog-ux {
+    background: var(--color-bg);
+  }
+
+  textarea,
+  input {
+    // Taken from https://github.com/Kong/insomnia/blob/c566650f41e8bd642a1727270472bb9d00b350c4/packages/insomnia-app/app/ui/css/components/forms.less#L111
+    height: var(--line-height-xs);
+
+    // Taken from https://github.com/Kong/insomnia/blob/c566650f41e8bd642a1727270472bb9d00b350c4/packages/insomnia-app/app/ui/css/components/forms.less#L315-L325
+    transition: all 130ms ease-out;
+    box-sizing: border-box;
+    text-align: left;
+    font-size: inherit;
+    text-decoration: inherit;
+    color: inherit;
+
+    // Taken from https://github.com/Kong/insomnia/blob/c566650f41e8bd642a1727270472bb9d00b350c4/packages/insomnia-app/app/ui/css/components/forms.less#L95-L98
+    border: 1px solid var(--hl-md);
+    border-radius: var(--radius-md);
+    background-color: var(--hl-xxs);
+  }
+
+  // Taken from https://github.com/Kong/insomnia/blob/c566650f41e8bd642a1727270472bb9d00b350c4/packages/insomnia-app/app/ui/css/components/forms.less#L119-L120
+  textarea:focus,
+  input:focus {
+    background-color: transparent;
+    border-color: var(--hl-lg);
+  }
+
   .model {
     & .model {
       color: var(--color-font);