From 0db78dbe4b72919681ad1f1a6840ceebe3824e39 Mon Sep 17 00:00:00 2001 From: Alex Saiannyi <67792608+bc-alexsaiannyi@users.noreply.github.com> Date: Fri, 2 Oct 2020 15:04:11 +0300 Subject: [PATCH] feat(storefront):bctheme-173: add color for carousel arrows AA standard (#1814) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> --- CHANGELOG.md | 1 + assets/scss/components/vendor/slick/_slick.scss | 8 ++++---- assets/scss/components/vendor/slick/_tools.scss | 12 ++++++++++++ assets/scss/settings/vendor/slick/_settings.scss | 3 +-- config.json | 9 ++++++--- 5 files changed, 24 insertions(+), 9 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f7228f519c..58b414ca98 100644 --- 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 index c33ce60d8c..44b5f6028b 100644 --- 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 index b2359b0b0a..9de07de279 100644 --- 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 index f75f67f560..04fef7707f 100644 --- 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 index 6d0919bdf0..0069a5c20e 100644 --- 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",