feat(storefront):bctheme-173: add color for carousel arrows AA standa…

…rd (#1814) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com>
bigcommerce · Oct 2, 2020 · 0db78db · 0db78db
1 parent 1935f27
commit 0db78db
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Fixed contrast on carousel arrows input according to AA standard [#1814](https://github.com/bigcommerce/cornerstone/pull/1814)
 - Fixed contrast on product ratings according to AA standard [#1799](https://github.com/bigcommerce/cornerstone/pull/1799)
 - Fixed contrast on email address input according to AA standard [#1804](https://github.com/bigcommerce/cornerstone/pull/1804)
 - Cross icon on close button missalignment. [#1822](https://github.com/bigcommerce/cornerstone/pull/1822)

diff --git a/assets/scss/components/vendor/slick/_slick.scss b/assets/scss/components/vendor/slick/_slick.scss
@@ -52,13 +52,13 @@
     }
 
     &::before {
-        background-image: $slick-arrow-next;
+        @include carousel-arrow-color( $slick-arrow-color, 'next')
     }
 
     &:hover {
         // scss-lint:disable NestingDepth
         &::before {
-            background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iNDIiIHZpZXdCb3g9IjAgMCAyNCA0MiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMS40NTY3OSAxLjAwNzQ2MTQ3bDIxIDIwLjAyNDgyMTQzTDEuNTA4ODUgNDEuMDA3NDYxNSIgc3Ryb2tlPSIjOTg5ODk4IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+");
+            @include carousel-arrow-color( $slick-arrow-color-hover, 'next')
         }
     }
 }
@@ -71,13 +71,13 @@
     }
 
     &::before {
-        background-image: $slick-arrow-prev;
+        @include carousel-arrow-color( $slick-arrow-color, 'prev')
     }
 
     &:hover {
         // scss-lint:disable NestingDepth
         &::before {
-            background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iNDIiIHZpZXdCb3g9IjAgMCAyNCA0MiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjIuNDU3MjA3NCAxLjAwNzQ2MTQ3bC0yMSAyMC4wMjQ4MjE0MyAyMC45NDc5Mzk3IDE5Ljk3NTE3ODYiIHN0cm9rZT0iIzk4OTg5OCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==");
+            @include carousel-arrow-color( $slick-arrow-color-hover, 'prev')
         }
     }
 }

diff --git a/assets/scss/components/vendor/slick/_tools.scss b/assets/scss/components/vendor/slick/_tools.scss
@@ -8,6 +8,8 @@
 //
 // 2. Setting opaque background in old browsers
 //
+// 3. Setting color for carousel arrow buttons
+//
 // -----------------------------------------------------------------------------
 
 @function image-url($url) { // 1
@@ -20,3 +22,13 @@
     background-color: $color;
 }
 // scss-lint:enable DuplicateProperty
+
+@mixin carousel-arrow-color($arrow-color, $arrow-direction) {
+    @if $arrow-direction == 'prev' {
+        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='42' viewBox='0 0 24 42'%3E%3Cpath d='M22.4572074 1.00746147l-21 20.02482143 20.9479397 19.9751786' stroke='#{str-replace(#{$arrow-color}, "#", "%23")}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none' fill-rule='evenodd' /%3E%3C/svg%3E");
+    } 
+    @if $arrow-direction == 'next' {
+        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='42' viewBox='0 0 24 42'%3E%3Cpath d='M1.45679 1.00746147l21 20.02482143L1.50885 41.0074615' stroke='#{str-replace(#{$arrow-color}, "#", "%23")}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none' fill-rule='evenodd' /%3E%3C/svg%3E");
+    }
+}
+
diff --git a/assets/scss/settings/vendor/slick/_settings.scss b/assets/scss/settings/vendor/slick/_settings.scss
@@ -9,10 +9,9 @@ $slick-font-path:               "./fonts/";
 $slick-font-family:             inherit;
 $slick-loader-path:             null;
 $slick-arrow-color:             stencilColor("carousel-arrow-color");
+$slick-arrow-color-hover:       stencilColor("carousel-arrow-color--hover");
 $slick-arrow-bgColor:           rgba(stencilColor("carousel-arrow-bgColor"), 0.9);
 $slick-arrow-borderColor:       stencilColor("carousel-arrow-borderColor");
-$slick-arrow-prev:              url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='42' viewBox='0 0 24 42'%3E%3Cpath d='M22.4572074 1.00746147l-21 20.02482143 20.9479397 19.9751786' stroke='#{str-replace(#{$slick-arrow-color}, "#", "%23")}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none' fill-rule='evenodd' /%3E%3C/svg%3E");
-$slick-arrow-next:              url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='42' viewBox='0 0 24 42'%3E%3Cpath d='M1.45679 1.00746147l21 20.02482143L1.50885 41.0074615' stroke='#{str-replace(#{$slick-arrow-color}, "#", "%23")}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none' fill-rule='evenodd' /%3E%3C/svg%3E");
 $slick-dot-color:               stencilColor("carousel-dot-color");
 $slick-dot-color-active:        stencilColor("carousel-dot-color-active");
 $slick-dot-bgColor:             rgba(stencilColor("carousel-dot-bgColor"), 0.9);

diff --git a/config.json b/config.json
@@ -173,7 +173,8 @@
     "carousel-dot-color": "#333333",
     "carousel-dot-color-active": "#757575",
     "carousel-dot-bgColor": "#ffffff",
-    "carousel-arrow-color": "#999999",
+    "carousel-arrow-color": "#8f8f8f",
+    "carousel-arrow-color--hover": "#474747",
     "carousel-arrow-bgColor": "#ffffff",
     "carousel-arrow-borderColor": "#ffffff",
     "card-title-color": "#333333",
@@ -462,7 +463,8 @@
         "carousel-dot-color": "#999999",
         "carousel-dot-color-active": "#f08383",
         "carousel-dot-bgColor": "#ffffff",
-        "carousel-arrow-color": "#999999",
+        "carousel-arrow-color": "#8F8F8F",
+        "carousel-arrow-color--hover": "#474747",
         "carousel-arrow-bgColor": "#ffffff",
         "carousel-arrow-borderColor": "#ffffff",
         "card-title-color": "#ff957f",
@@ -665,7 +667,8 @@
         "carousel-dot-color": "#e6a15c",
         "carousel-dot-color-active": "#e6a15c",
         "carousel-dot-bgColor": "#4f3f2f",
-        "carousel-arrow-color": "#e6a15c",
+        "carousel-arrow-color": "#D47A21",
+        "carousel-arrow-color--hover": "#765B42",
         "carousel-arrow-bgColor": "#ffffff",
         "carousel-arrow-borderColor": "#ffffff",
         "card-title-color": "#bd5b00",