refactor: accessibility - adjust colors to have a sufficient contrast…

… ratio - add new gray color #6b6b6b, consolidate text color variables
intershop · Aug 21, 2024 · e96ad20 · e96ad20
1 parent 329197d
commit e96ad20
Show file tree

Hide file tree

Showing 26 changed files with 49 additions and 49 deletions.
diff --git a/src/styles/components/cookies.scss b/src/styles/components/cookies.scss
@@ -22,7 +22,7 @@
     text-decoration: underline;
 
     &:hover {
-      color: $text-color-quaternary !important;
+      color: $text-color-tertiary !important;
     }
 
     @media (max-width: $screen-xs-max) {

diff --git a/src/styles/components/footer/footer.scss b/src/styles/components/footer/footer.scss
@@ -4,7 +4,7 @@
 
 footer {
   clear: both;
-  color: $text-color-secondary;
+  color: $text-color-tertiary;
 
   // h4 is obsolete, should use .link-group-heading instead
   h4,
@@ -71,7 +71,7 @@ footer {
       a,
       a:not([href]):not([tabindex]) {
         font-family: $font-family-condensedregular;
-        color: $text-color-quaternary;
+        color: $text-color-tertiary;
         text-decoration: none;
 
         &:hover {

diff --git a/src/styles/components/header/header-sticky.scss b/src/styles/components/header/header-sticky.scss
@@ -94,7 +94,7 @@
         .ng-fa-icon {
           &.header-icon {
             padding: 0 10px;
-            color: $text-color-secondary;
+            color: $text-color-tertiary;
           }
         }
 

diff --git a/src/styles/components/header/header.scss b/src/styles/components/header/header.scss
@@ -131,7 +131,7 @@ header {
     padding-right: ($space-default * 1.5);
     font-family: $font-family-bold;
     font-size: 12px;
-    color: $text-color-quaternary;
+    color: $text-color-tertiary;
     text-transform: uppercase;
     list-style: none;
 

diff --git a/src/styles/components/header/main-navigation.scss b/src/styles/components/header/main-navigation.scss
@@ -99,7 +99,7 @@
       .category-level3,
       .category-level4 {
         > li > a {
-          color: $text-color-tertiary;
+          color: $text-color-quaternary;
         }
       }
     }
@@ -232,7 +232,7 @@
 
             a {
               font-size: $font-size-sub-menu-item;
-              color: $text-color-tertiary;
+              color: $text-color-quaternary;
               text-transform: none;
             }
           }

diff --git a/src/styles/components/header/search-container.scss b/src/styles/components/header/search-container.scss
@@ -102,7 +102,7 @@
         font-family: $font-family-regular;
         font-size: 13px;
         line-height: 47px;
-        color: $text-color-quaternary;
+        color: $text-color-tertiary;
         text-align: left;
         background: none;
         border: 0;

diff --git a/src/styles/components/header/user-information-mobile.scss b/src/styles/components/header/user-information-mobile.scss
@@ -17,7 +17,7 @@
     display: flex;
     font-family: $font-family-bold;
     font-size: 12px;
-    color: $text-color-quaternary;
+    color: $text-color-tertiary;
     text-transform: uppercase;
   }
 

diff --git a/src/styles/global/breadcrumbs.scss b/src/styles/global/breadcrumbs.scss
@@ -24,10 +24,10 @@
 
     a {
       font-size: 12px;
-      color: $text-color-quaternary;
+      color: $text-color-tertiary;
 
       &:hover {
-        color: $text-color-tertiary;
+        color: $text-color-quaternary;
       }
     }
   }

diff --git a/src/styles/global/buttons.scss b/src/styles/global/buttons.scss
@@ -36,7 +36,7 @@
 
     &.disabled,
     &:disabled {
-      color: $text-color-primary;
+      color: $text-color-secondary;
       background-color: $color-tertiary;
       border-color: $border-color-light;
     }
@@ -94,7 +94,7 @@
 
     &.disabled,
     &:disabled {
-      color: $text-color-primary;
+      color: $text-color-secondary;
       border-color: $border-color-light;
     }
 

diff --git a/src/styles/global/forms.scss b/src/styles/global/forms.scss
@@ -8,7 +8,7 @@ fieldset {
 
 // 	REQUIRED FIELDS
 .indicates-required {
-  color: $text-color-quaternary;
+  color: $text-color-tertiary;
 
   .required {
     margin-right: 4px;
@@ -140,7 +140,7 @@ input.form-check-input {
 }
 
 .input-help {
-  color: $text-color-quaternary;
+  color: $text-color-tertiary;
 }
 
 select {

diff --git a/src/styles/global/global.scss b/src/styles/global/global.scss
@@ -65,7 +65,7 @@ h3,
   .header-note {
     font-family: $font-family-regular;
     font-size: $font-size-corporate;
-    color: $text-color-quaternary;
+    color: $text-color-tertiary;
     text-transform: none;
   }
 
@@ -115,7 +115,7 @@ a {
   }
 
   h3:hover {
-    color: $text-color-quaternary;
+    color: $text-color-tertiary;
   }
 
   &.teaser-link {
@@ -291,12 +291,12 @@ img {
 // Help Text
 .form-text {
   margin: divide($space-default, 3) 0 $space-default * 0.5;
-  color: $text-color-quaternary;
+  color: $text-color-tertiary;
 }
 
 h2.form-text {
   font-family: $font-family-regular;
-  color: $text-color-quaternary;
+  color: $text-color-tertiary;
   text-transform: none;
 }
 

diff --git a/src/styles/global/lists.scss b/src/styles/global/lists.scss
@@ -19,7 +19,7 @@
 // General class for status 'deactivated' in general lists
 .inactive {
   *:not(a) {
-    color: $text-color-quaternary;
+    color: $text-color-tertiary;
   }
 
   a {

diff --git a/src/styles/pages/account/account-dashboard.scss b/src/styles/pages/account/account-dashboard.scss
@@ -9,13 +9,13 @@
 
   .dashboard-item {
     margin-bottom: ($space-default * 2);
-    color: $text-color-secondary;
+    color: $text-color-tertiary;
     text-align: center;
     text-transform: uppercase;
 
     a {
       font-size: 13px;
-      color: $text-color-secondary;
+      color: $text-color-tertiary;
 
       &:hover {
         text-decoration: none;

diff --git a/src/styles/pages/category/category.scss b/src/styles/pages/category/category.scss
@@ -13,7 +13,7 @@
 .old-price {
   margin-bottom: $space-default * 0.5;
   font-family: $font-family-condensedregular;
-  color: $text-color-tertiary;
+  color: $text-color-quaternary;
 
   .price-value {
     text-decoration: line-through;

diff --git a/src/styles/pages/category/filter-panel.scss b/src/styles/pages/category/filter-panel.scss
@@ -77,14 +77,14 @@
   li {
     &.filter-item {
       padding: 3px 0;
-      color: $text-color-quaternary;
+      color: $text-color-tertiary;
 
       a,
       .btn-link-action {
         display: block;
 
         &.filter-item-name {
-          color: $text-color-quaternary;
+          color: $text-color-tertiary;
         }
 
         &.filter-swatch {
@@ -134,7 +134,7 @@
 
       span {
         font-weight: normal;
-        color: $text-color-quaternary;
+        color: $text-color-tertiary;
 
         &.icon-selected {
           display: inline-block;
@@ -147,7 +147,7 @@
       }
 
       &.filter-color {
-        border-color: $text-color-quaternary;
+        border-color: $text-color-tertiary;
 
         a,
         .btn-link-action {

diff --git a/src/styles/pages/category/filter-row.scss b/src/styles/pages/category/filter-row.scss
@@ -26,7 +26,7 @@
       &.list-view-link,
       &.list-view-link:hover,
       &.list-view-link:focus {
-        color: $text-color-quaternary;
+        color: $text-color-tertiary;
       }
 
       &.grid-view-link {

diff --git a/src/styles/pages/category/product-list.scss b/src/styles/pages/category/product-list.scss
@@ -175,7 +175,7 @@
 .scaled-prices {
   margin-bottom: $space-default;
   font-family: $font-family-condensedregular;
-  color: $text-color-quaternary;
+  color: $text-color-tertiary;
 }
 
 .product-list-container {

diff --git a/src/styles/pages/checkout/checkout.scss b/src/styles/pages/checkout/checkout.scss
@@ -16,7 +16,7 @@
   }
 
   .cart-pli-data {
-    color: $text-color-quaternary;
+    color: $text-color-tertiary;
 
     span {
       display: inline-block;

diff --git a/src/styles/pages/checkout/progress-bar.scss b/src/styles/pages/checkout/progress-bar.scss
@@ -15,7 +15,7 @@
     width: 20%;
     padding-left: $space-default;
     line-height: 50px;
-    color: $text-color-primary;
+    color: $text-color-secondary;
     border-bottom: 4px solid $border-color-light;
 
     @media (max-width: $screen-xs-max) {

diff --git a/src/styles/pages/checkout/quick-cart.scss b/src/styles/pages/checkout/quick-cart.scss
@@ -11,7 +11,7 @@
     text-transform: uppercase;
 
     span {
-      color: $text-color-quaternary;
+      color: $text-color-secondary;
 
       &.mini-cart-price {
         font-size: $font-size-base;
@@ -24,7 +24,7 @@
       padding: 0 !important;
       margin-right: ($space-default * 0.5);
       font-size: 17px;
-      color: $text-color-quaternary;
+      color: $text-color-secondary;
     }
   }
 
@@ -118,7 +118,7 @@
       font-family: $font-family-condensedregular;
       font-size: $font-size-base;
       font-weight: normal;
-      color: $text-color-quaternary;
+      color: $text-color-tertiary;
       text-overflow: ellipsis;
       text-transform: none;
       white-space: nowrap;
@@ -133,7 +133,7 @@
 
     .cart-pli-data {
       font-size: 85%;
-      color: $text-color-quaternary;
+      color: $text-color-tertiary;
 
       span {
         display: inline-block;

diff --git a/src/styles/pages/checkout/shopping-cart.scss b/src/styles/pages/checkout/shopping-cart.scss
@@ -165,7 +165,7 @@
     padding: ($space-default * 4) 0 0;
     font-family: $font-family-bold;
     font-size: 70px;
-    color: $text-color-quaternary;
+    color: $text-color-tertiary;
   }
 
   h2 {

diff --git a/src/styles/pages/productdetail/product-info.scss b/src/styles/pages/productdetail/product-info.scss
@@ -11,7 +11,7 @@ a.product-title {
 
 .product-id {
   font-size: $font-size-corporate;
-  color: $text-color-quaternary;
+  color: $text-color-tertiary;
 
   .product-id-label {
     padding-right: divide($space-default, 3);
@@ -20,7 +20,7 @@ a.product-title {
 
 .product-info {
   font-family: $font-family-condensedregular;
-  color: $text-color-quaternary;
+  color: $text-color-tertiary;
 
   .label-quantity {
     text-transform: uppercase;

diff --git a/src/styles/pages/productdetail/productdetail.scss b/src/styles/pages/productdetail/productdetail.scss
@@ -42,10 +42,10 @@
     padding: divide($space-default, 3) 0;
 
     a {
-      color: $text-color-quaternary;
+      color: $text-color-tertiary;
 
       &:hover {
-        color: $text-color-tertiary;
+        color: $text-color-quaternary;
       }
     }
 
@@ -135,7 +135,7 @@
   margin-bottom: $space-default * 2;
 
   .review-item-created {
-    color: $text-color-quaternary;
+    color: $text-color-tertiary;
   }
 
   .review-item-header-title {

diff --git a/src/styles/themes/b2b/variables.scss b/src/styles/themes/b2b/variables.scss
@@ -40,9 +40,9 @@ $CORPORATE-SHADOW: #7f9ecc80; // with alpha transparency
 $text-color-corporate: $CORPORATE-PRIMARY;
 
 $text-color-primary: #222;
-$text-color-secondary: #757575;
-$text-color-tertiary: #8b8b8b;
-$text-color-quaternary: #757575;
+$text-color-secondary: #6b6b6b;
+$text-color-tertiary: #757575;
+$text-color-quaternary: #8b8b8b;
 $text-color-quinary: #eee;
 
 $text-color-inverse: #fff;
@@ -210,7 +210,7 @@ $headings-color: $text-color-primary;
 // Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
 
 // Forms
-$input-placeholder-color: $text-color-quaternary;
+$input-placeholder-color: $text-color-tertiary;
 $input-accent-color: #222;
 
 // Dropdown

diff --git a/src/styles/themes/b2c/properties.scss b/src/styles/themes/b2c/properties.scss
@@ -23,9 +23,9 @@
   // TEXT COLOR
   --text-color-corporate: var(--corporate-primary);
   --text-color-primary: #222;
-  --text-color-secondary: #757575;
-  --text-color-tertiary: #8b8b8b;
-  --text-color-quaternary: #757575;
+  --text-color-secondary: #6b6b6b;
+  --text-color-tertiary: #757575;
+  --text-color-quaternary: #8b8b8b;
   --text-color-quinary: #eee;
 
   // GENERAL COLORS

diff --git a/src/styles/themes/b2c/variables.scss b/src/styles/themes/b2c/variables.scss
@@ -214,7 +214,7 @@ $headings-color: $text-color-primary;
 // Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
 
 // Forms
-$input-placeholder-color: $text-color-quaternary;
+$input-placeholder-color: $text-color-tertiary;
 $input-accent-color: #222;
 
 // Dropdown