fix: use rem for the font size unit (#3067)

longyulongyu · web-flow · commit b644cc6c92f2 · 2025-01-20T11:50:43.000+01:00
* style: use `rem` for font size unit

* refactor: some improvements and fix the validation icon position

* refactor: use `text-title-m-font-size`
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
@@ -1,7 +1,7 @@
 html,
 body {
     font:
-        16px/1.21 -apple-system,
+        1rem/1.21 -apple-system,
         BlinkMacSystemFont,
         sans-serif;
     font-weight: 400;
@@ -18,4 +18,4 @@ button {
     max-width: 600px;
     padding: 24px;
     margin: auto;
-}
+}
diff --git a/packages/lib/src/components/Giftcard/components/GiftcardResult.scss b/packages/lib/src/components/Giftcard/components/GiftcardResult.scss
@@ -4,7 +4,7 @@
     align-items: center;
     display: flex;
     flex-wrap: nowrap;
-    font-size: 1em;
+    font-size: token(text-title-font-size);
     font-weight: token(text-body-font-weight);
     justify-content: space-between;
     position: relative;
@@ -47,7 +47,7 @@
 }
 
 .adyen-checkout__giftcard-result__remaining-balance {
-    font-size: 13px;
+    font-size: token(text-body-font-size);
     line-height: token(text-caption-line-height);
     text-align: center;
     color: token(color-label-secondary);
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/packages/lib/src/components/internal/ClickToPay/components/CtPCards/CtPSingleCard/CtPSingleCard.scss b/packages/lib/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/packages/lib/src/components/internal/ClickToPay/components/CtPInfo/CtPInfoModal/CtPInfoModal.scss b/packages/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-m-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/packages/lib/src/components/internal/ClickToPay/components/CtPOneTimePassword/CtPOneTimePasswordInput/CtPOneTimePasswordInput.scss b/packages/lib/src/components/internal/ClickToPay/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
@@ -0,0 +1,15 @@
+// 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,
+    // 24px
+    'text-title-l-font-size': 1.5rem,
+    // 20px
+    'text-title-m-font-size': 1.25rem
+);
diff --git a/packages/lib/src/styles/variable-generator.scss b/packages/lib/src/styles/variable-generator.scss
@@ -1,6 +1,7 @@
 @import '~@adyen/bento-design-tokens/dist/scss-map/bento/aliases';
 @import '~@adyen/bento-design-tokens/dist/scss-map/bento/definitions';
 @import '~@adyen/bento-design-tokens/dist/scss-map/bento/components';
+@import 'overrides';
 
 @function adyen-sdk-generate-css-variables($maps...) {
     $adyen-output-map: ();
@@ -18,9 +19,19 @@
     $adyen-tokens-map: ();
 
     @if $generate-css-var {
-        $adyen-tokens-map: adyen-sdk-generate-css-variables($color, $text, $focus-ring, $border, $spacer, $shadow, $animation, $toggle);
+        $adyen-tokens-map: adyen-sdk-generate-css-variables(
+            $color,
+            $text,
+            $focus-ring,
+            $border,
+            $spacer,
+            $shadow,
+            $animation,
+            $toggle,
+            $text-overrides
+        );
     } @else {
-        $adyen-tokens-map: map-merge($color, $text, $focus-ring, $border, $spacer, $shadow, $animation, $toggle);
+        $adyen-tokens-map: map-merge($color, $text, $focus-ring, $border, $spacer, $shadow, $animation, $toggle, $text-overrides);
     }
 
     @return map-get($adyen-tokens-map, '#{$token}');

Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,7 @@`
`23`	`23`	`&--processing {`
`24`	`24`	`align-items: center;`
`25`	`25`	`display: flex;`
`26`		`- font-size: 13px;`
	`26`	`+ font-size: token(text-body-font-size);`
`27`	`27`	`justify-content: center;`
`28`	`28`	`padding: token(spacer-090) 0;`
`29`	`29`	`}`
Original file line number	Diff line number	Diff line change
`@@ -153,6 +153,10 @@ span.adyen-checkout__input {`
`153`	`153`	`[dir='rtl'] & {`
`154`	`154`	`margin-left: token(spacer-060);`
`155`	`155`	`}`
	`156`	`+`
	`157`	`+ > .adyen-checkout__icon {`
	`158`	`+ display: block;`
	`159`	`+ }`
`156`	`160`	`}`
`157`	`161`
`158`	`162`	`.adyen-checkout-input__inline-validation--valid {`
Original file line number	Diff line number	Diff line change
`@@ -120,7 +120,7 @@`
`120`	`120`	`}`
`121`	`121`
`122`	`122`	`.adyen-checkout__voucher-result__code__label__text {`
`123`		`- font-size: 13px;`
	`123`	`+ font-size: token(text-body-font-size);`
`124`	`124`	`color: token(color-label-primary);`
`125`	`125`	`background: token(color-background-primary);`
`126`	`126`	`padding: 0 token(spacer-040);`