@paypal/checkout-components 5.0.412-alpha-84b7728.0 → 5.0.413

package/src/ui/buttons/props.test.js

@@ -11,6 +11,7 @@ import {
   getColorForABTest,
   getDefaultColorForFundingSource,
   throwErrorForInvalidButtonColor,
+  hasInvalidScriptOptionsForFullRedesign,
   determineRandomButtonColor,
   getColorABTestFromStorage,
 } from "./props";
@@ -127,6 +128,47 @@ describe("determineRandomButtonColor", () => {
   });
 });
 
+describe("hasInvalidScriptOptionsForFullRedesign", () => {
+  const validFundingSources = [
+    FUNDING.PAYPAL,
+    FUNDING.PAYLATER,
+    FUNDING.CREDIT,
+    FUNDING.CARD,
+    FUNDING.VENMO,
+  ];
+  const invalidFundingSources = [FUNDING.APPLEPAY, FUNDING.IDEAL];
+
+  // Test valid funding sources
+  validFundingSources.forEach((fundingSource) => {
+    it(`should return false for fundingSource: ${fundingSource}`, () => {
+      const result = hasInvalidScriptOptionsForFullRedesign({
+        fundingSource,
+      });
+
+      expect(result).toBe(false);
+    });
+  });
+
+  // Test invalid funding sources
+  invalidFundingSources.forEach((fundingSource) => {
+    it(`should return true for fundingSource: ${fundingSource}`, () => {
+      const result = hasInvalidScriptOptionsForFullRedesign({
+        fundingSource,
+      });
+
+      expect(result).toBe(true);
+    });
+  });
+
+  it("should return true when funding source is null", () => {
+    const result = hasInvalidScriptOptionsForFullRedesign({
+      fundingSource: null,
+    });
+
+    expect(result).toBe(true);
+  });
+});
+
 describe("throwErrorForInvalidButtonColor", () => {
   it("should throw error with appropriate message for invalid color", () => {
     expect(() => {

package/src/ui/buttons/styles/button.js

@@ -4,10 +4,6 @@ import { ENV } from "@paypal/sdk-constants/src";
 import { LOGO_CLASS } from "@paypal/sdk-logos/src";
 
 import { CLASS } from "../../../constants";
-import {
-  REBRAND_LABEL_HEIGHT_RATIO,
-  REBRAND_LOGO_TRANSLATE_Y,
-} from "../config";
 
 const MIN_VAULT_BUTTON_WIDTH = 250;
 
@@ -108,8 +104,8 @@ export const buttonStyle = `
 
     .${CLASS.BUTTON} .${CLASS.SPINNER} {
         position: absolute;
-        height: 50%;
-        aspect-ratio: 1;
+        height: 40px;
+        width: 40px;
         top: 50%;
         left: 50%;
         transform: translateX(-50%) translateY(-50%);
@@ -175,7 +171,7 @@ export const buttonRebrandStyle = `
         align-items: center;
         justify-content: center;
         flex-wrap: nowrap;
-        height: ${REBRAND_LABEL_HEIGHT_RATIO * 100}%;
+        height: 76%;
         min-width: 0px;
         position: relative;
     }
@@ -204,19 +200,6 @@ export const buttonRebrandStyle = `
         height: 100%;
     }
 
-    .${CLASS.BUTTON_REBRAND} .${CLASS.BUTTON_LABEL} > .${CLASS.LOGO_REBRAND} {
-        // transform: translateY(${REBRAND_LOGO_TRANSLATE_Y}%);
-        transform: translateY(10%); //update me!!
-    }
-
-    .${CLASS.BUTTON_REBRAND}[data-funding-source=wechatpay] .${CLASS.TEXT},
-    .${CLASS.BUTTON_REBRAND}[data-funding-source=satispay] .${CLASS.TEXT},
-    .${CLASS.BUTTON_REBRAND}[data-funding-source=giropay] .${CLASS.TEXT},
-    .${CLASS.BUTTON_REBRAND}[data-funding-source=paidy] .${CLASS.TEXT},
-    .${CLASS.BUTTON_REBRAND}[data-funding-source=trustly] .${CLASS.TEXT} {
-        transform: translateY(-1px);
-    }
-
     .${CLASS.BUTTON_REBRAND} .${CLASS.TAGLINE} {
         max-width: 100%;
         font-size: initial;
@@ -224,6 +207,5 @@ export const buttonRebrandStyle = `
         display: block;
         text-align: center;
         width: auto;
-        margin-top: 8px;
     }
 `;

package/src/ui/buttons/styles/color.js

@@ -151,7 +151,7 @@ export const buttonColorStyle = `
     .${CLASS.BUTTON_REBRAND}:focus {
         outline: none;
     }
-
+    
     .${CLASS.BUTTON_REBRAND}:focus::after {
         content: '';
         position: absolute;
@@ -160,7 +160,7 @@ export const buttonColorStyle = `
         bottom: 3px;
         left: 3px;
         border: 0.125rem solid #FFFFFF;
-        border-radius: max(0px, calc(var(--btn-radius, 4px) - 3px));
+        border-radius: inherit;
         box-shadow: 0 0 0 0.2rem #0066F5;
         pointer-events: none;
     }
@@ -249,14 +249,6 @@ export const buttonColorStyle = `
         background: #E62601;
     }
 
-    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.ITAU}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT} {
-        background: #003087;
-    }
-
-    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.SEPA}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT} {
-        background: #eee;
-    }
-
     /* APM button hover actions */
     .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BANCONTACT}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:hover,
     .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BLIK}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:hover,
@@ -275,62 +267,52 @@ export const buttonColorStyle = `
     .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.PAYU}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:hover,
     .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.SATISPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:hover,
     .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.PAIDY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:hover,
-    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.WECHATPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:hover,
-    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.ITAU}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:hover {
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.WECHATPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:hover {
         filter: brightness(1.2);
         overflow: inherit;
     }
 
-    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.SEPA}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:hover {
-        filter: brightness(0.95);
-        overflow: inherit;
-    }
-
-    /* APM button on focus actions (legacy only) */
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BLIK}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BANCONTACT}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BOLETO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BOLETOBANCARIO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.EPS}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.GIROPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.IDEAL}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MERCADOPAGO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MULTIBANCO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MYBANK}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.OXXO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.P24}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.SOFORT}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.TRUSTLY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.PAYU}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.SATISPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.PAIDY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.WECHATPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.ITAU}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.SEPA}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus {
+    /* APM button on focus actions */
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BLIK}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BANCONTACT}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BOLETO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BOLETOBANCARIO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.EPS}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.GIROPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.IDEAL}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MERCADOPAGO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MULTIBANCO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MYBANK}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.OXXO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.P24}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.SOFORT}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.TRUSTLY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.PAYU}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.SATISPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.PAIDY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.WECHATPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus {
         outline: none;
     }
 
-    /* APM button after focus actions (legacy only) */
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BLIK}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BANCONTACT}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BOLETO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BOLETOBANCARIO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.EPS}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.GIROPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.IDEAL}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MERCADOPAGO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MULTIBANCO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MYBANK}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.OXXO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.P24}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.SOFORT}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.TRUSTLY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.PAYU}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.SATISPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.PAIDY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.WECHATPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.ITAU}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.SEPA}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after {
+    /* APM button after focus actions */
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BLIK}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BANCONTACT}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BOLETO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BOLETOBANCARIO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.EPS}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.GIROPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.IDEAL}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MERCADOPAGO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MULTIBANCO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MYBANK}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.OXXO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.P24}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.SOFORT}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.TRUSTLY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.PAYU}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.SATISPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.PAIDY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.WECHATPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after {
         content: '';
         position: absolute;
         top: 5px;

package/src/ui/buttons/styles/labels.js

@@ -72,7 +72,6 @@ export const labelStyle = `
   CLASS.BUTTON_LABEL
 } {
         font-family: PayPal Pro Book, system-ui, -apple-system, Roboto, "Segoe UI", Helvetica-Neue, Helvetica, Arial, sans-serif;
-        font-weight: 500;
     }
 
     .${CLASS.BUTTON_REBRAND}[data-funding-source=venmo] .${CLASS.BUTTON_LABEL} {

package/src/ui/buttons/styles/responsive.js

@@ -18,8 +18,6 @@ import {
   BUTTON_RELATIVE_STYLE,
   BUTTON_DISABLE_MAX_HEIGHT_STYLE,
   BUTTON_REDESIGN_STYLE,
-  BUTTON_REDESIGN_DISABLEMAXHEIGHT_STYLE,
-  REBRAND_LABEL_HEIGHT_RATIO,
 } from "../config";
 import { isBorderRadiusNumber } from "../util";
 
@@ -181,23 +179,20 @@ const generateButtonSizeStyles = ({
                 .${CLASS.BUTTON}.${CLASS.BORDER_RADIUS} {
                   ${
                     borderRadius && isBorderRadiusNumber(borderRadius)
-                      ? `--btn-radius: ${borderRadius}px; border-radius: ${borderRadius}px`
+                      ? `border-radius: ${borderRadius}px`
                       : ""
                   }
                 }
 
                 .${CLASS.BUTTON}.${CLASS.SHAPE}-${BUTTON_SHAPE.SHARP} {
-                  --btn-radius: 0px;
                   border-radius: 0px;
                 }
 
                 .${CLASS.BUTTON}.${CLASS.SHAPE}-${BUTTON_SHAPE.RECT} {
-                    --btn-radius: 4px;
                     border-radius: 4px;
                 }
 
                 .${CLASS.BUTTON}.${CLASS.SHAPE}-${BUTTON_SHAPE.PILL} {
-                    --btn-radius: ${pillBorderRadius}px;
                     border-radius: ${pillBorderRadius}px;
                 }
 
@@ -404,7 +399,7 @@ const generateDisableMaxHeightStyles = ({
       const { minHeight, maxHeight } = disableHeightStyle;
 
       return `
-            @container (min-height: ${minHeight}px) and (max-height: ${maxHeight}px) {
+            @media (min-height: ${minHeight}px) and (max-height: ${maxHeight}px) {
               .${CLASS.BUTTON_LABEL} {
                 gap: ${gap}px;
               }
@@ -459,11 +454,10 @@ const generateDisableMaxHeightStyles = ({
               }
 
               .${CLASS.BUTTON}.${CLASS.SHAPE}-${BUTTON_SHAPE.PILL} {
-                --btn-radius: ${pillBorderRadius}px;
                 border-radius: ${pillBorderRadius}px;
               }
 
-              .${CLASS.BUTTON_ROW}.${CLASS.SHAPE}-${BUTTON_SHAPE.PILL}
+              .${CLASS.BUTTON_ROW}.${CLASS.SHAPE}-${BUTTON_SHAPE.PILL} 
               .menu-button {
                 border-top-right-radius: ${pillBorderRadius}px;
                 border-bottom-right-radius: ${pillBorderRadius}px;
@@ -488,26 +482,21 @@ const generateDisableMaxHeightStyles = ({
 };
 
 const generateRebrandedDisableMaxHeightStyles = (): string => {
-  const sizeKeys = Object.keys(BUTTON_REDESIGN_DISABLEMAXHEIGHT_STYLE);
-  return sizeKeys
-    .map((redesignSize, sizeIndex) => {
-      const isLastSizeBucket = sizeIndex === sizeKeys.length - 1;
-      const style = BUTTON_REDESIGN_DISABLEMAXHEIGHT_STYLE[redesignSize];
-      const { gap, fontSize, minHeight, maxHeight } = style;
-      const maxHeightQuery = isLastSizeBucket
-        ? ""
-        : `and (max-height: ${maxHeight}px)`;
+  return Object.keys(BUTTON_REDESIGN_STYLE)
+    .map((redesign_size) => {
+      const { gap, fontSize, minHeight, maxHeight } =
+        getResponsiveRebrandedStyleVariables({
+          redesign_size,
+        });
 
       return `
-        @container (min-height: ${minHeight}px) ${maxHeightQuery} {
+        @media (min-height: ${minHeight}px) and (max-height: ${maxHeight}px) {
           .${CLASS.BUTTON_REBRAND} > .${CLASS.BUTTON_LABEL} {
             gap: ${gap}px;
           }
-          .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.BUTTON_REBRAND} .${CLASS.TEXT},
-          .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.BUTTON_REBRAND} .${CLASS.SPACE} {
+          .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.TEXT},
+          .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.SPACE} {
             font-size: ${fontSize}px;
-            line-height: 1.2;
-            margin: 0;
           }
         }
       `;
@@ -528,10 +517,8 @@ const generateRebrandedButtonSizeStyles = ({
   borderRadius?: ?number,
   shouldApplyRebrandedStyles?: boolean,
 |}): string => {
-  const redesignSizeKeys = Object.keys(BUTTON_REDESIGN_STYLE);
-  return redesignSizeKeys
-    .map((redesignSize, sizeIndex) => {
-      const isLastSizeBucket = sizeIndex === redesignSizeKeys.length - 1;
+  return Object.keys(BUTTON_REDESIGN_STYLE)
+    .map((redesign_size) => {
       const {
         buttonHeight,
         pillBorderRadius,
@@ -545,13 +532,9 @@ const generateRebrandedButtonSizeStyles = ({
         minDualWidth,
       } = getResponsiveRebrandedStyleVariables({
         height,
-        redesignSize,
+        redesign_size,
       });
 
-      const maxWidthQuery = isLastSizeBucket
-        ? ""
-        : `and (max-width: ${maxWidth}px)`;
-
       const widthBasedStyles = `
         @media only screen and (min-width: ${minWidth}px) {
           .${CLASS.CONTAINER} {
@@ -573,9 +556,7 @@ const generateRebrandedButtonSizeStyles = ({
           .${CLASS.BUTTON_REBRAND} > .${CLASS.BUTTON_LABEL} {
               margin: 0px 4vw;
               box-sizing: border-box;
-              height: ${Math.round(
-                buttonHeight * REBRAND_LABEL_HEIGHT_RATIO
-              )}px;
+              height: ${buttonHeight * 0.76}px;
           }
 
           .${CLASS.BUTTON_REBRAND}.${CLASS.NUMBER}-${BUTTON_NUMBER.MULTIPLE} .${
@@ -584,8 +565,20 @@ const generateRebrandedButtonSizeStyles = ({
               gap: ${gap}px;
           }
 
-          .${CLASS.TAGLINE} .${CLASS.TEXT} {
-              font-size: ${minWidth >= 500 ? 14 : 12}px;
+          .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW}.${CLASS.NUMBER}-${
+        BUTTON_NUMBER.MULTIPLE
+      } .${CLASS.TEXT}, 
+          .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW}.${CLASS.NUMBER}-${
+        BUTTON_NUMBER.MULTIPLE
+      } .${CLASS.SPACE} {
+              font-size: ${fontSize}px;
+          }
+
+          .${CLASS.BUTTON_ROW}.${CLASS.NUMBER}-${BUTTON_NUMBER.MULTIPLE} .${
+        CLASS.BUTTON_REBRAND
+      } .${CLASS.TEXT} {
+              line-height: 1.2;
+              margin: 0;
           }
 
           .${CLASS.BUTTON_ROW}.${CLASS.LAYOUT}-${BUTTON_LAYOUT.VERTICAL}.${
@@ -604,20 +597,7 @@ const generateRebrandedButtonSizeStyles = ({
               margin-bottom: 0;
           }
         }
-
-        @media only screen and (min-width: ${minWidth}px) ${maxWidthQuery} {
-          .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.BUTTON_REBRAND} .${
-        CLASS.TEXT
-      },
-          .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.BUTTON_REBRAND} .${
-        CLASS.SPACE
-      } {
-              font-size: ${fontSize}px;
-              line-height: 1.2;
-              margin: 0;
-          }
-        }
-
+      
         @media only screen and (min-width: ${minWidth}px) and (max-width: ${minDualWidth}px) {
           .${CLASS.BUTTON_ROW}.${CLASS.LAYOUT}-${BUTTON_LAYOUT.HORIZONTAL}.${
         CLASS.NUMBER
@@ -692,18 +672,17 @@ const generateRebrandedButtonSizeStyles = ({
        `;
 
       const heightBasedStyles = `
-        @container (min-height: ${minHeight}px) and (max-height: ${maxHeight}px) {
+        @media only screen and (min-height: ${minHeight}px) and (max-height: ${maxHeight}px) {
           .${CLASS.BUTTON_REBRAND} > .${CLASS.BUTTON_LABEL} {
               gap: ${gap}px;
           }
 
-          .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.BUTTON_REBRAND}.${
-        CLASS.BUTTON_REBRAND
-      } .${CLASS.TEXT},
-          .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.BUTTON_REBRAND}.${
-        CLASS.BUTTON_REBRAND
-      } .${CLASS.SPACE} {
+          .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.TEXT}, 
+          .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.SPACE} {
               font-size: ${fontSize}px;
+          }
+
+          .${CLASS.BUTTON_ROW} .${CLASS.BUTTON_REBRAND} .${CLASS.TEXT} {
               line-height: 1.2;
               margin: 0;
           }
@@ -758,23 +737,20 @@ const generateRebrandedButtonSizeStyles = ({
           .${CLASS.BUTTON}.${CLASS.BORDER_RADIUS} {
             ${
               borderRadius && isBorderRadiusNumber(borderRadius)
-                ? `--btn-radius: ${borderRadius}px; border-radius: ${borderRadius}px`
+                ? `border-radius: ${borderRadius}px`
                 : ""
             }
           }
 
           .${CLASS.BUTTON}.${CLASS.SHAPE}-${BUTTON_SHAPE.SHARP} {
-            --btn-radius: 0px;
             border-radius: 0px;
           }
 
           .${CLASS.BUTTON}.${CLASS.SHAPE}-${BUTTON_SHAPE.RECT} {
-              --btn-radius: 4px;
               border-radius: 4px;
           }
 
           .${CLASS.BUTTON}.${CLASS.SHAPE}-${BUTTON_SHAPE.PILL} {
-              --btn-radius: ${pillBorderRadius}px;
               border-radius: ${pillBorderRadius}px;
           }
 
@@ -893,16 +869,14 @@ export function buttonResponsiveStyle({
     .${CLASS.BUTTON}.${CLASS.BORDER_RADIUS} {
       ${
         borderRadius && isBorderRadiusNumber(borderRadius)
-          ? `--btn-radius: ${borderRadius}px; border-radius: ${borderRadius}px`
+          ? `border-radius: ${borderRadius}px`
           : ""
       };
     }
     .${CLASS.BUTTON}.${CLASS.SHAPE}-${BUTTON_SHAPE.SHARP} {
-        --btn-radius: 0px;
         border-radius: 0px;
     }
     .${CLASS.BUTTON}.${CLASS.SHAPE}-${BUTTON_SHAPE.RECT} {
-        --btn-radius: 4px;
         border-radius: 4px;
     }
 
@@ -928,10 +902,6 @@ export function buttonResponsiveStyle({
     .${CLASS.CARD} {
         display: inline-block;
         height: 100%;
-    }
-
-    .${CLASS.BUTTON_ROW} {
-        container-type: size;
     }`;
 
   const rebrandedStyles = shouldApplyRebrandedStyles

package/src/ui/buttons/styles/styleUtils.js

@@ -7,7 +7,6 @@ import {
   BUTTON_DISABLE_MAX_HEIGHT_STYLE,
   BUTTON_SIZE_STYLE,
   BUTTON_REDESIGN_STYLE,
-  REBRAND_LABEL_HEIGHT_RATIO,
 } from "../config";
 import {
   BUTTON_SIZE,
@@ -33,7 +32,7 @@ function getLabelHeight({
   let labelHeight = max(roundUp(perc(height, labelPercPercentage) + 5, 2), 12);
 
   if (shouldApplyRebrandedStyles) {
-    labelHeight = roundUp(perc(height, REBRAND_LABEL_HEIGHT_RATIO * 100), 1);
+    labelHeight = roundUp(perc(height, 76), 1);
   }
 
   return parseInt(labelHeight, 10);
@@ -142,10 +141,7 @@ export function getResponsiveStyleVariables({
   const pillBorderRadius = Math.ceil(buttonHeight / 2);
 
   if (shouldApplyRebrandedStyles) {
-    labelHeight = roundUp(
-      perc(buttonHeight, REBRAND_LABEL_HEIGHT_RATIO * 100),
-      1
-    );
+    labelHeight = roundUp(perc(buttonHeight, 76), 1);
     // smallerLabelHeight gets triggered at widths < 320px
     // We will need to investigate why the labels need to get significantly smaller at this breakpoint
     smallerLabelHeight = labelHeight;
@@ -169,12 +165,12 @@ export function getResponsiveStyleVariables({
 
 export function getResponsiveRebrandedStyleVariables({
   height,
-  redesignSize,
+  redesign_size,
 }: {|
   height?: ?number,
-  redesignSize: $Values<typeof BUTTON_REDESIGN_SIZE>,
+  redesign_size: $Values<typeof BUTTON_REDESIGN_SIZE>,
 |}): Object {
-  const style = BUTTON_REDESIGN_STYLE[redesignSize];
+  const style = BUTTON_REDESIGN_STYLE[redesign_size];
   const {
     minHeight,
     maxHeight,