Merge pull request #333 from zendesk/jbdietrich/GG-2903

[GG-2903] Improve contrast in theme elements
zendesk · Nov 30, 2022 · af0293a · af0293a
2 parents 24126b8 + e73ddc8
commit af0293a
Show file tree

Hide file tree

Showing 22 changed files with 53 additions and 52 deletions.
diff --git a/style.css b/style.css
@@ -270,7 +270,7 @@ select {
   -moz-appearance: none;
   background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23CCC' d='M0 0h10L5 6 0 0z'/%3E%3C/svg%3E%0A") no-repeat #fff;
   background-position: right 10px center;
-  border: 1px solid #ddd;
+  border: 1px solid #87929D;
   border-radius: 4px;
   padding: 8px 30px 8px 10px;
   outline: none;
@@ -287,7 +287,7 @@ select::-ms-expand {
 }
 
 textarea {
-  border: 1px solid #ddd;
+  border: 1px solid #87929D;
   border-radius: 2px;
   resize: vertical;
   width: 100%;
@@ -428,7 +428,7 @@ ul {
 
 .button-secondary {
   color: lighten($text_color, 20%);
-  border: 1px solid #ddd;
+  border: 1px solid #87929D;
   background-color: transparent;
 }
 
@@ -438,7 +438,7 @@ ul {
 
 .button-secondary:hover, .button-secondary:focus, .button-secondary:active {
   color: $text_color;
-  border: 1px solid #ddd;
+  border: 1px solid #87929D;
   background-color: darken($background_color, 3%);
 }
 
@@ -565,7 +565,7 @@ ul {
 }
 
 .form-field input {
-  border: 1px solid #ddd;
+  border: 1px solid #87929D;
   border-radius: 4px;
   padding: 10px;
   width: 100%;
@@ -576,7 +576,7 @@ ul {
 }
 
 .form-field input[type="text"] {
-  border: 1px solid #ddd;
+  border: 1px solid #87929D;
   border-radius: 4px;
 }
 
@@ -1090,7 +1090,7 @@ ul {
 }
 
 .search {
-  border-color: #ddd;
+  border-color: #87929D;
   border-radius: 30px;
   border-style: solid;
   border-width: 1px;
@@ -2036,7 +2036,7 @@ ul {
 }
 
 .article-return-to-top {
-  border-top: 1px solid #ddd;
+  border-top: 1px solid #87929D;
 }
 
 @media (min-width: 1024px) {

diff --git a/styles/_article.scss b/styles/_article.scss
@@ -117,8 +117,8 @@
       height: auto;
     }
 
-    border-bottom: 1px solid $border-color;
-    border-top: 1px solid $border-color;
+    border-bottom: 1px solid $low-contrast-border-color;
+    border-top: 1px solid $low-contrast-border-color;
     flex: 1 0 auto; //Explicit values needed whith flex-direction: column for IE11
     margin-bottom: 20px;
     padding: 0;
@@ -129,7 +129,7 @@
       flex-direction: row;
     }
 
-    border-top: 1px solid $border-color;
+    border-top: 1px solid $low-contrast-border-color;
     display: flex;
     flex-direction: column;
     padding: 20px 0;
@@ -151,7 +151,7 @@
   }
 
   &-votes {
-    border-top: 1px solid $border-color;
+    border-top: 1px solid $low-contrast-border-color;
     padding: 30px 0;
     text-align: center;
   }
@@ -173,7 +173,7 @@
       display: none;
     }
 
-    border-top: 1px solid $border-color;
+    border-top: 1px solid $high-contrast-border-color;
 
     a {
       color: $text_color;

diff --git a/styles/_base.scss b/styles/_base.scss
@@ -90,7 +90,7 @@ select {
   background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23CCC' d='M0 0h10L5 6 0 0z'/%3E%3C/svg%3E%0A")
     no-repeat #fff;
   background-position: right 10px center;
-  border: 1px solid $border-color;
+  border: 1px solid $high-contrast-border-color;
   border-radius: 4px;
   padding: 8px 30px 8px 10px;
   outline: none;
@@ -107,7 +107,7 @@ select {
 }
 
 textarea {
-  border: 1px solid $border-color;
+  border: 1px solid $high-contrast-border-color;
   border-radius: 2px;
   resize: vertical;
   width: 100%;
@@ -124,7 +124,7 @@ textarea {
 }
 
 .container-divider {
-  border-top: 1px solid $border-color;
+  border-top: 1px solid $low-contrast-border-color;
   margin-bottom: 20px;
 }
 

diff --git a/styles/_blocks.scss b/styles/_blocks.scss
@@ -41,7 +41,7 @@
 
     &-internal {
       background-color: transparent;
-      border: 1px solid $border-color;
+      border: 1px solid $low-contrast-border-color;
 
       .icon-lock {
         height: 15px;

diff --git a/styles/_buttons.scss b/styles/_buttons.scss
@@ -80,7 +80,7 @@
 
 .button-secondary {
   color: $secondary-text-color;
-  border: 1px solid $border-color;
+  border: 1px solid $high-contrast-border-color;
   background-color: transparent;
 
   &:visited {
@@ -91,7 +91,7 @@
   &:focus,
   &:active {
     color: $text_color;
-    border: 1px solid $border-color;
+    border: 1px solid $high-contrast-border-color;
     background-color: $primary-shade;
   }
 }
diff --git a/styles/_collapsible-nav.scss b/styles/_collapsible-nav.scss
@@ -14,8 +14,8 @@
     border-top: 0;
   }
 
-  border-bottom: 1px solid $border-color;
-  border-top: 1px solid $border-color;
+  border-bottom: 1px solid $low-contrast-border-color;
+  border-top: 1px solid $low-contrast-border-color;
 }
 
 .collapsible-nav-toggle {

diff --git a/styles/_comments.scss b/styles/_comments.scss
@@ -1,7 +1,7 @@
 /***** Comments *****/
 /* Styles comments inside articles, posts and requests */
 .comment {
-  border-bottom: 1px solid $border-color;
+  border-bottom: 1px solid $low-contrast-border-color;
   padding: 20px 0;
 
   &-heading {
@@ -12,8 +12,8 @@
   }
 
   &-overview {
-    border-bottom: 1px solid $border-color;
-    border-top: 1px solid $border-color;
+    border-bottom: 1px solid $low-contrast-border-color;
+    border-top: 1px solid $low-contrast-border-color;
     padding: 20px 0;
 
     p { margin-top: 0; }

diff --git a/styles/_community.scss b/styles/_community.scss
@@ -58,7 +58,7 @@
 
 .topic-header {
   @include tablet { padding-bottom: 10px; }
-  border-bottom: 1px solid $border-color;
+  border-bottom: 1px solid $low-contrast-border-color;
   font-size: $font-size-small;
 
   .dropdown {
@@ -70,7 +70,7 @@
     }
 
     display: block;
-    border-top: 1px solid $border-color;
+    border-top: 1px solid $low-contrast-border-color;
     padding: 10px 0;
   }
 }

diff --git a/styles/_footer.scss b/styles/_footer.scss
@@ -1,6 +1,6 @@
 /***** Footer *****/
 .footer {
-  border-top: 1px solid $border-color;
+  border-top: 1px solid $low-contrast-border-color;
   margin-top: 60px;
   padding: 30px 0;
 

diff --git a/styles/_forms.scss b/styles/_forms.scss
@@ -15,7 +15,7 @@
 }
 
 .form-field input {
-  border: 1px solid $border-color;
+  border: 1px solid $high-contrast-border-color;
   border-radius: 4px;
   padding: 10px;
   width: 100%;
@@ -24,7 +24,7 @@
 }
 
 .form-field input[type="text"] {
-  border: 1px solid $border-color;
+  border: 1px solid $high-contrast-border-color;
   border-radius: 4px;
 
   &:focus { border: 1px solid $brand_color; }
@@ -89,7 +89,7 @@
   margin-top: 30px;
 
   label {
-    border-bottom: 1px solid $border-color;
+    border-bottom: 1px solid $low-contrast-border-color;
     display: block;
     padding-bottom: 5px;
   }

diff --git a/styles/_home-page.scss b/styles/_home-page.scss
@@ -39,7 +39,7 @@
 
     a {
       display: block;
-      border-bottom: 1px solid $border-color;
+      border-bottom: 1px solid $low-contrast-border-color;
       padding: 15px 0;
     }
 
@@ -49,7 +49,7 @@
 
     &:last-child a {
       @include desktop {
-        border-bottom: 1px solid $border-color;
+        border-bottom: 1px solid $low-contrast-border-color;
       }
 
       border: 0;
@@ -76,6 +76,6 @@
 
 .community,
 .activity {
-  border-top: 1px solid $border-color;
+  border-top: 1px solid $low-contrast-border-color;
   padding: 30px 0;
 }
diff --git a/styles/_mixins.scss b/styles/_mixins.scss
@@ -102,23 +102,23 @@
 
   :not(pre) > code {
     background: $primary-shade;
-    border: 1px solid $border-color;
+    border: 1px solid $low-contrast-border-color;
     border-radius: 3px;
     padding: 0 5px;
     margin: 0 2px;
   }
 
   pre {
     background: $primary-shade;
-    border: 1px solid $border-color;
+    border: 1px solid $low-contrast-border-color;
     border-radius: 3px;
     padding: 10px 15px;
     overflow: auto;
     white-space: pre;
   }
 
   blockquote {
-    border-left: 1px solid $border-color;
+    border-left: 1px solid $low-contrast-border-color;
     color: $secondary-text-color;
     font-style: italic;
     padding: 0 15px;

diff --git a/styles/_post.scss b/styles/_post.scss
@@ -134,7 +134,7 @@
       [dir="rtl"] & { padding: 0 50px 0 0; }
     }
 
-    border-top: 1px solid $border-color;
+    border-top: 1px solid $low-contrast-border-color;
     flex: 1;
     padding: 30px 0;
     text-align: center;

diff --git a/styles/_recent-activity.scss b/styles/_recent-activity.scss
@@ -9,7 +9,7 @@
   &-list { padding: 0; }
 
   &-item {
-    border-bottom: 1px solid $border-color;
+    border-bottom: 1px solid $low-contrast-border-color;
     overflow: auto;
     padding: 20px 0;
   }

diff --git a/styles/_request.scss b/styles/_request.scss
@@ -45,7 +45,7 @@
 
     .comment-show-container {
       border-radius: 2px;
-      border: 1px solid $border-color;
+      border: 1px solid $low-contrast-border-color;
       color: $secondary-text-color;
       text-align: inherit;
       padding: 8px 25px;
@@ -89,7 +89,7 @@
 
   &-title {
     @include desktop {
-      border-bottom: 1px solid $border-color;
+      border-bottom: 1px solid $low-contrast-border-color;
       margin-bottom: 0;
       max-width: 66%; //Same as main container
       padding-bottom: 20px;
@@ -108,8 +108,8 @@
       width: 30%; //IE11 fix
     }
 
-    border-bottom: 1px solid $border-color;
-    border-top: 1px solid $border-color;
+    border-bottom: 1px solid $low-contrast-border-color;
+    border-top: 1px solid $low-contrast-border-color;
     flex: 1 0 auto;
     order: 0; //Bring to top
 
@@ -125,7 +125,7 @@
   }
 
   &-details {
-    border-bottom: 1px solid $border-color;
+    border-bottom: 1px solid $low-contrast-border-color;
     font-size: 0; // To remove whitespace and do a 40%/60% split
     margin: 0;
     padding-bottom: 20px;

diff --git a/styles/_search.scss b/styles/_search.scss
@@ -9,7 +9,7 @@ $padding-right: 20px;
 }
 
 .search {
-  border-color: $border-color;
+  border-color: $high-contrast-border-color;
   border-radius: 30px;
   border-style: solid;
   border-width: 1px;

diff --git a/styles/_search_results.scss b/styles/_search_results.scss
@@ -18,7 +18,7 @@
   }
 
   &-sidebar {
-    border-top: 1px solid $border-color;
+    border-top: 1px solid $low-contrast-border-color;
     flex: 1 0 auto;
     margin-bottom: 20px;
     padding: 0;
@@ -131,7 +131,7 @@
     > li {
       padding: 20px 0;
       &:first-child {
-        border-top: 1px solid $border-color;
+        border-top: 1px solid $low-contrast-border-color;
       }
 
       h2 {

diff --git a/styles/_section.scss b/styles/_section.scss
@@ -25,12 +25,12 @@
 }
 
 .section-list-item {
-  border-bottom: 1px solid $border-color;
+  border-bottom: 1px solid $low-contrast-border-color;
   font-size: $font-size-bigger;
   padding: 15px 0;
 
   &:first-child {
-    border-top: 1px solid $border-color;
+    border-top: 1px solid $low-contrast-border-color;
   }
 
   a {