From a24ee69827a81bbbae7b07676a23fc7496892527 Mon Sep 17 00:00:00 2001
From: Filipe Quintanilha <feliipequintanilha@gmail.com>
Date: Fri, 23 Dec 2022 14:29:49 -0300
Subject: [PATCH] =?UTF-8?q?docs:=20Substitui=20os=20numeros=20hexadecimais?=
 =?UTF-8?q?=20por=20vari=C3=A1veis?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../sass/checkout/_checkout-autenticacao.scss | 66 +++++++++----------
 .../sass/checkout/_checkout-carrinho.scss     | 28 ++++----
 .../sass/checkout/_checkout-vazio.scss        |  4 +-
 .../src/arquivos/sass/checkout/_checkout.scss |  2 +-
 .../arquivos/sass/partials/_prateleira.scss   |  4 +-
 .../src/arquivos/sass/partials/_tablet.scss   |  7 +-
 .../src/arquivos/sass/utils/_variaveis.scss   |  1 +
 7 files changed, 52 insertions(+), 60 deletions(-)

diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
index 09defa6..6f7530d 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
@@ -65,7 +65,7 @@
                     line-height: 23px;
                     text-align: center;
                     text-transform: uppercase;
-                    color: #000000;
+                    color: $color-black2;
 
                     @include mq(sm, max) {
                         font-size: 12px !important;
@@ -91,7 +91,7 @@
                     line-height: 23px;
                     text-align: center;
                     text-transform: uppercase;
-                    color: #000000;
+                    color: $color-black2;
                     padding: 0;
 
                     @include mq(sm, max) {
@@ -127,10 +127,10 @@
             }
 
             input {
-                border: 1px solid #000000;
+                border: 1px solid $color-black2;
                 border-radius: 5px 0px 0px 5px;
                 box-shadow: none;
-                color: #000000;
+                color: $color-black2;
                 font-family: $font-family;
                 padding: 0 16px;
                 box-sizing: border-box;
@@ -162,7 +162,7 @@
             button {
                 min-width: fit-content;
                 background: #00c8ff;
-                color: #000000;
+                color: $color-black2;
                 font-weight: 700;
                 border-radius: 0px 8px 8px 0px;
                 border: none;
@@ -225,7 +225,7 @@
             margin-top: 47px;
             padding: 16px;
             background-color: $color-white;
-            border: 1px solid #000000;
+            border: 1px solid $color-black2;
             border-radius: 5px;
 
             @include mq(md, max) {
@@ -246,7 +246,7 @@
             }
 
             h3 {
-                color: #000000;
+                color: $color-black2;
                 margin: 0 0 9px 0;
                 font-weight: 700;
 
@@ -269,7 +269,7 @@
                         font-weight: 700;
                         font-size: 12px;
                         line-height: 16px;
-                        color: #000000;
+                        color: $color-black2;
 
                         @include mq(xl, min) {
                             font-size: 24px;
@@ -334,7 +334,7 @@
         }
 
         .accordion-group {
-            border: 1px solid #f0f0f0;
+            border: 1px solid $color-gray3;
             border-radius: 8px;
             font-family: $font-family;
             padding: 24px 17px;
@@ -378,7 +378,7 @@
                     font-weight: 400;
                     font-size: 16px;
                     line-height: 19px;
-                    color: #292929;
+                    color: $color-black;
 
                     i::before {
                         fill: #303030;
@@ -421,7 +421,7 @@
                         font-weight: 400;
                         font-size: 14px;
                         line-height: 19px;
-                        color: #7d7d7d;
+                        color: $color-gray2;
 
                         @include mq(xl, min) {
                             font-size: 28px;
@@ -566,7 +566,7 @@
 
                         label {
                             box-shadow: none;
-                            color: #7d7d7d;
+                            color: $color-gray2;
                             padding: 8px 12px;
 
                             @include mq(xl, min) {
@@ -592,7 +592,7 @@
                             background: #f2f2f2;
                         }
                         .vtex-omnishipping-1-x-leanShippingTextLabel {
-                            color: #7d7d7d;
+                            color: $color-gray2;
                             font-family: $font-family;
                             font-weight: 400;
                             font-size: 12px;
@@ -613,7 +613,7 @@
                     font-size: 12px;
                     line-height: 16px;
                     letter-spacing: 0.05em;
-                    color: #7d7d7d;
+                    color: $color-gray2;
                     margin-bottom: 11px;
 
                     @include mq(xl, min) {
@@ -679,7 +679,7 @@
                     font-weight: 400;
                     font-size: 12px;
                     line-height: 16px;
-                    color: #7d7d7d;
+                    color: $color-gray2;
 
                     background: none;
                     border: 0px;
@@ -821,7 +821,7 @@
                 }
 
                 .vtex-omnishipping-1-x-deliveryOptionActive {
-                    color: #292929;
+                    color: $color-black;
                 }
 
                 .vtex-omnishipping-1-x-deliveryOptionInactive {
@@ -853,7 +853,7 @@
                             font-weight: 700;
                             font-size: 0;
                             line-height: 16px;
-                            color: #7d7d7d;
+                            color: $color-gray2;
                         }
 
                         label::after {
@@ -898,7 +898,7 @@
                         font-weight: 700;
                         font-size: 14px;
                         line-height: 19px;
-                        color: #7d7d7d;
+                        color: $color-gray2;
 
                         @include mq(sm, max) {
                             margin-bottom: 11px;
@@ -1159,9 +1159,9 @@
         justify-content: center;
         align-items: center;
 
-        background: #f0f0f0;
+        background: $color-gray3;
         mix-blend-mode: normal;
-        border: 1px solid #000000;
+        border: 1px solid $color-black2;
         border-radius: 6px;
         margin: 0;
         color: #58595b;
@@ -1306,7 +1306,7 @@ div#payments-title {
                 font-size: 14px;
                 line-height: 24px;
                 letter-spacing: -0.01em;
-                color: #7d7d7d;
+                color: $color-gray2;
                 position: absolute;
                 top: 27px;
                 left: 0px;
@@ -1343,7 +1343,7 @@ div.cart-template.mini-cart.span4 {
     .cart-fixed {
         height: auto !important;
         h2 {
-            border: 1px solid #e5e5e5;
+            border: 1px solid $color-gray5;
             border-radius: 8px 8px 0 0;
             border-bottom: none;
             text-align: left;
@@ -1365,8 +1365,8 @@ div.cart-template.mini-cart.span4 {
 
                 border: none;
 
-                border-right: 1px solid #e5e5e5;
-                border-left: 1px solid #e5e5e5;
+                border-right: 1px solid $color-gray5;
+                border-left: 1px solid $color-gray5;
                 border-radius: 0;
                 padding: 0 17px 19px 17px;
                 margin: 0;
@@ -1391,7 +1391,7 @@ div.cart-template.mini-cart.span4 {
                     font-weight: 400;
                     font-size: 12px;
                     line-height: 14px;
-                    color: #000000;
+                    color: $color-black2;
 
                     @include mq(sm, max) {
                         max-width: 120px;
@@ -1427,7 +1427,7 @@ div.cart-template.mini-cart.span4 {
                     font-weight: 400;
                     font-size: 12px;
                     line-height: 16px;
-                    color: #292929;
+                    color: $color-black;
 
                     @include mq(xl, min) {
                         font-size: 24px;
@@ -1438,7 +1438,7 @@ div.cart-template.mini-cart.span4 {
         }
 
         .summary {
-            border: 1px solid #e5e5e5;
+            border: 1px solid $color-gray5;
             border-radius: 0 0 8px 8px;
             border-top: none;
             width: 99.4%;
@@ -1457,7 +1457,7 @@ div.cart-template.mini-cart.span4 {
             line-height: 16px;
             text-align: right;
             text-decoration-line: underline;
-            color: #000000;
+            color: $color-black2;
             padding: 0 17px 0 0;
 
             @include mq(xl, min) {
@@ -1484,7 +1484,7 @@ div.cart-template.mini-cart.span4 {
                 font-weight: 400;
                 font-size: 14px;
                 line-height: 19px;
-                color: #7d7d7d;
+                color: $color-gray2;
 
                 @include mq(xl, min) {
                     font-size: 28px;
@@ -1498,7 +1498,7 @@ div.cart-template.mini-cart.span4 {
                 font-weight: 400;
                 font-size: 14px;
                 line-height: 19px;
-                color: #7d7d7d;
+                color: $color-gray2;
 
                 @include mq(xl, min) {
                     font-size: 28px;
@@ -1509,7 +1509,7 @@ div.cart-template.mini-cart.span4 {
 
         tfoot {
             border: none;
-            border-top: 1px solid #e5e5e5;
+            border-top: 1px solid $color-gray5;
 
             td.info {
                 padding: 30px 0 22px 17px;
@@ -1769,7 +1769,3 @@ p.client-email.input.text.required {
 .card-flags {
     display: block;
 }
-
-p.PaymentCardHolderDocument.input.text.required.mask {
-    display: none;
-}
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
index dbbbaf6..f3bc97e 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
@@ -73,7 +73,7 @@
 
                 .shipping-date,
                 .price {
-                    color: #7d7d7d;
+                    color: $color-gray2;
                 }
             }
         }
@@ -243,7 +243,7 @@
             }
 
             a {
-                color: #000000;
+                color: $color-black2;
                 font-style: normal;
                 font-weight: 400;
                 font-size: 12px;
@@ -362,7 +362,7 @@
 
         td.quantity {
             align-items: center;
-            border: 1px solid #f0f0f0;
+            border: 1px solid $color-gray3;
             border-radius: 8px;
             box-sizing: border-box;
             display: flex;
@@ -721,12 +721,12 @@
                     }
 
                     .blue {
-                        color: #000000;
+                        color: $color-black2;
                     }
                 }
 
                 &__current {
-                    border: 1px solid #000000;
+                    border: 1px solid $color-black2;
                     border-radius: 100px;
                 }
 
@@ -734,7 +734,7 @@
                     width: 50%;
 
                     &:active {
-                        background-color: #f0f0f0;
+                        background-color: $color-gray3;
                     }
                 }
             }
@@ -837,7 +837,7 @@
                         font-weight: normal;
                         font-size: 10px;
                         line-height: 12px;
-                        color: #000000;
+                        color: $color-black2;
                         margin-top: 4px;
                         text-decoration: underline;
 
@@ -903,11 +903,11 @@
                         }
 
                         &__sla {
-                            color: #7d7d7d;
+                            color: $color-gray2;
                         }
 
                         &__price {
-                            color: #7d7d7d;
+                            color: $color-gray2;
                             font-weight: 500;
                         }
 
@@ -949,7 +949,7 @@
                     font-weight: normal;
                     font-size: 12px;
                     line-height: 14px;
-                    color: #000000;
+                    color: $color-black2;
                     text-decoration: none;
 
                     @include mq(xl, min) {
@@ -1044,7 +1044,7 @@
                         border: none;
                         border-radius: 8px;
                         font-family: $font-family;
-                        color: #000000;
+                        color: $color-black2;
                         font-weight: 400;
                         font-size: 14px;
                         line-height: 19px;
@@ -1181,7 +1181,7 @@
                 font-weight: normal;
                 font-size: 12px;
                 line-height: 14px;
-                color: #000000;
+                color: $color-black2;
 
                 @include mq(xl, min) {
                     font-size: 24px;
@@ -1214,7 +1214,7 @@
                     font-weight: 700;
                     font-size: 14px;
                     letter-spacing: 0.05em;
-                    color: #000000;
+                    color: $color-black2;
                     text-transform: uppercase;
                     vertical-align: middle;
                     line-height: 19px;
@@ -1261,7 +1261,7 @@
 
         &__delivery,
         &__pickup {
-            color: #000000;
+            color: $color-black2;
 
             @include mq(xl, min) {
                 font-size: 28px;
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
index 6b511c3..3e0f00c 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
@@ -35,7 +35,7 @@
         }
         .link-choose-products {
             background-color: #ffffff;
-            border: 1px solid #000000;
+            border: 1px solid $color-black2;
             border-radius: 0px;
             outline: none;
             font-family: $font-family-secundary;
@@ -44,7 +44,7 @@
             font-size: 0px;
             line-height: 16px;
             text-align: center;
-            color: #000000;
+            color: $color-black2;
             text-transform: uppercase;
             width: 28.1%;
             margin: 0;
diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss
index 86b319e..dc486d5 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout.scss
@@ -92,7 +92,7 @@ body {
     font-weight: 700;
     font-size: 24px;
     line-height: 33px;
-    color: #000000;
+    color: $color-black2;
     font-family: $font-family;
     text-transform: uppercase;
     margin: 0 0 32px 0;
diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss
index 777ee22..0eab7be 100644
--- a/checkout/src/arquivos/sass/partials/_prateleira.scss
+++ b/checkout/src/arquivos/sass/partials/_prateleira.scss
@@ -12,7 +12,7 @@
         font-size: 24px;
         line-height: 38px;
         align-self: center;
-        color: #000000;
+        color: $color-black2;
 
         @include mq(sm, max) {
             font-size: 14px;
@@ -116,7 +116,7 @@
             font-size: 13px;
             line-height: 18px;
             text-align: center;
-            color: #000000;
+            color: $color-black2;
 
             @include mq(xl, min) {
                 font-size: 26px;
diff --git a/checkout/src/arquivos/sass/partials/_tablet.scss b/checkout/src/arquivos/sass/partials/_tablet.scss
index 7a3802f..ae71208 100644
--- a/checkout/src/arquivos/sass/partials/_tablet.scss
+++ b/checkout/src/arquivos/sass/partials/_tablet.scss
@@ -161,18 +161,13 @@
         width: 98%;
     }
 
-    .card-flags {
-        display: flex !important;
-        justify-content: center !important;
-    }
-
     #creditCardpayment-card-0Brand {
         width: 90%;
     }
 
     #go-to-cart-button {
         width: 99.8%;
-        border: 1px solid #e5e5e5;
+        border: 1px solid $color-gray5;
         border-top: none;
         border-bottom: none;
 
diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss
index 15b4ca2..ce1c4bd 100644
--- a/checkout/src/arquivos/sass/utils/_variaveis.scss
+++ b/checkout/src/arquivos/sass/utils/_variaveis.scss
@@ -6,6 +6,7 @@ $font-family-secundary: "Tenor Sans", sans-serif;
 
 /* Colors */
 $color-black: #292929;
+$color-black2: #000000;
 
 $color-white: #fff;