refactor: some improvements and fix the validation icon position

Adyen · Jan 7, 2025 · d717a60 · d717a60
1 parent 17a3aa9
commit d717a60
Show file tree

Hide file tree

Showing 12 changed files with 60 additions and 30 deletions.
diff --git a/.changeset/swift-bears-kiss.md b/.changeset/swift-bears-kiss.md
@@ -0,0 +1,5 @@
+---
+'@adyen/adyen-web': minor
+---
+
+Use `rem` for the font size unit, and fixed some style issues due to the font scaling.
diff --git a/packages/lib/.storybook/main.css b/packages/lib/.storybook/main.css
@@ -18,4 +18,4 @@ button {
     max-width: 600px;
     padding: 24px;
     margin: auto;
-}
+}
diff --git a/packages/lib/src/components/PayPal/Paypal.scss b/packages/lib/src/components/PayPal/Paypal.scss
@@ -23,7 +23,7 @@
         &--processing {
             align-items: center;
             display: flex;
-            font-size: 13px;
+            font-size: token(text-body-font-size);
             justify-content: center;
             padding: token(spacer-090) 0;
         }

diff --git a/packages/lib/src/components/internal/ClickToPay/components/CtPCards/CtPCards.scss b/packages/lib/src/components/internal/ClickToPay/components/CtPCards/CtPCards.scss
@@ -19,7 +19,7 @@
     height: token(spacer-110);
     display: flex;
     align-items: center;
-    font-size: 13px;
+    font-size: token(text-body-font-size);
     font-weight: token(text-body-font-weight);
     line-height: token(text-caption-line-height);
     padding: token(spacer-060) token(spacer-070);

diff --git a/...b/src/components/internal/ClickToPay/components/CtPCards/CtPSingleCard/CtPSingleCard.scss b/...b/src/components/internal/ClickToPay/components/CtPCards/CtPSingleCard/CtPSingleCard.scss
@@ -7,7 +7,7 @@
     padding: token(spacer-060);
     display: flex;
     align-items: center;
-    font-size: 13px;
+    font-size: token(text-body-font-size);
     font-weight: token(text-body-font-weight);
     line-height: token(text-caption-line-height);
 

diff --git a/.../lib/src/components/internal/ClickToPay/components/CtPInfo/CtPInfoModal/CtPInfoModal.scss b/.../lib/src/components/internal/ClickToPay/components/CtPInfo/CtPInfoModal/CtPInfoModal.scss
@@ -8,15 +8,15 @@
 
     &-title {
         font-weight: 700;
-        font-size: token(spacer-080);
+        font-size: token(text-title-l-mobile-font-size);
         line-height: token(spacer-090);
         padding: 0;
         margin: 0 0 token(spacer-060);
     }
 
     &-text {
         font-weight: token(text-body-font-weight);
-        font-size: 13px;
+        font-size: token(text-body-font-size);
         line-height: token(text-caption-line-height);
         margin-bottom: token(spacer-070);
     }

diff --git a/packages/lib/src/components/internal/ClickToPay/components/CtPLoader/CtPLoader.scss b/packages/lib/src/components/internal/ClickToPay/components/CtPLoader/CtPLoader.scss
diff --git a/...kToPay/components/CtPOneTimePassword/CtPOneTimePasswordInput/CtPOneTimePasswordInput.scss b/...kToPay/components/CtPOneTimePassword/CtPOneTimePasswordInput/CtPOneTimePasswordInput.scss
@@ -11,7 +11,7 @@
 .adyen-checkout-ctp__otp-resend-code--disabled,
 .adyen-checkout-ctp__otp-resend-code--confirmation {
     pointer-events: none;
-    font-size: 13px;
+    font-size: token(text-body-font-size);
     font-weight: token(text-body-font-weight);
     margin-left: auto;
     color: token(color-label-tertiary);
@@ -28,7 +28,7 @@
 }
 
 .adyen-checkout-ctp__otp-resend-code-counter {
-    font-size: 13px;
+    font-size: token(text-body-font-size);
     font-weight: token(text-body-font-weight);
     margin-left: auto;
     cursor: default;
@@ -43,4 +43,4 @@
 
 .adyen-checkout-ctp__otp-field-wrapper {
     position: relative;
-}
+}
diff --git a/packages/lib/src/components/internal/ClickToPay/components/CtPSection/CtPSection.scss b/packages/lib/src/components/internal/ClickToPay/components/CtPSection/CtPSection.scss
@@ -3,7 +3,9 @@
 .adyen-checkout-ctp__section {
     position: relative;
     background-color: white;
-    box-shadow: 0 6px 12px rgb(0 17 44 / 8%), 0 2px 4px rgb(0 17 44 / 4%);
+    box-shadow:
+        0 6px 12px rgb(0 17 44 / 8%),
+        0 2px 4px rgb(0 17 44 / 4%);
     border-radius: token(spacer-060);
     padding: token(spacer-070);
 
@@ -28,15 +30,15 @@
     align-items: center;
 
     &-title {
-        font-size: 17px;
+        font-size: token(text-title-font-size);
         font-weight: token(text-title-font-weight);
         line-height: 22px;
         padding: 0;
         margin: 0;
         width: auto;
 
         @media screen and (max-width: 400px) {
-            font-size: 15px;
+            font-size: token(text-body-font-size);
         }
     }
 
@@ -46,7 +48,7 @@
 }
 
 .adyen-checkout-ctp__section-text {
-    font-size: 13px;
+    font-size: token(text-body-font-size);
     font-weight: token(text-body-font-weight);
     line-height: token(text-caption-line-height);
     color: token(color-label-tertiary);
@@ -55,6 +57,6 @@
 
 .adyen-checkout-ctp__separator {
     color: token(color-label-primary);
-    font-size: 13px;
+    font-size: token(text-body-font-size);
     font-weight: token(text-body-font-weight);
 }
diff --git a/packages/lib/src/components/internal/FormFields/FormFields.scss b/packages/lib/src/components/internal/FormFields/FormFields.scss
@@ -153,6 +153,10 @@ span.adyen-checkout__input {
     [dir='rtl'] & {
         margin-left: token(spacer-060);
     }
+
+    > .adyen-checkout__icon {
+        display: block;
+    }
 }
 
 .adyen-checkout-input__inline-validation--valid {

diff --git a/packages/lib/src/components/internal/Voucher/Voucher.scss b/packages/lib/src/components/internal/Voucher/Voucher.scss
@@ -120,7 +120,7 @@
 }
 
 .adyen-checkout__voucher-result__code__label__text {
-    font-size: 13px;
+    font-size: token(text-body-font-size);
     color: token(color-label-primary);
     background: token(color-background-primary);
     padding: 0 token(spacer-040);

diff --git a/packages/lib/src/styles/overrides.scss b/packages/lib/src/styles/overrides.scss
@@ -1,8 +1,15 @@
-// Override the Bento font sizes
+// Override the Bento font sizes. Calculation is based on a root font-size of 16 pixel.
 $text-overrides: (
+    // 12px
     'text-caption-font-size': 0.75rem,
+    // 14px
     'text-body-font-size': 0.875rem,
+    // 16px
     'text-subtitle-font-size': 1rem,
+    // 16px
     'text-title-font-size': 1rem,
-    'text-title-l-font-size': 1.5rem
+    // 24px
+    'text-title-l-font-size': 1.5rem,
+    // 20px
+    'text-title-l-mobile-font-size': 1.25rem
 );