diff --git a/.changeset/swift-bears-kiss.md b/.changeset/swift-bears-kiss.md
new file mode 100644
index 0000000000..cb1def24ce
--- /dev/null
+++ 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
index 7118c11811..35eb8026cb 100644
--- 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;
-}
+}
\ No newline at end of file
diff --git a/packages/lib/src/components/Giftcard/components/GiftcardResult.scss b/packages/lib/src/components/Giftcard/components/GiftcardResult.scss
index ba9b39dca3..8e65163e0d 100644
--- 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
index 1172878c88..3f2c90fa15 100644
--- 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
index 0a3a7880f0..a203704ddf 100644
--- 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
index 88f50bcb3e..d72233d962 100644
--- 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
index 0205f61994..4709a99dba 100644
--- 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,7 +8,7 @@
&-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);
@@ -16,7 +16,7 @@
&-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
index 876f2450e6..c0c97e211a 100644
--- a/packages/lib/src/components/internal/ClickToPay/components/CtPLoader/CtPLoader.scss
+++ b/packages/lib/src/components/internal/ClickToPay/components/CtPLoader/CtPLoader.scss
@@ -127,47 +127,59 @@
.adyen-checkout-ctp__card-animation {
position: relative;
max-width: 100%;
- aspect-ratio: 1/0.4380;
+ aspect-ratio: 1/0.438;
filter: grayscale(1);
width: 140px;
margin: 40px auto 50px;
}
-.adyen-checkout-ctp__card-animation >.adyen-checkout-ctp__card-animation-layer {
+.adyen-checkout-ctp__card-animation > .adyen-checkout-ctp__card-animation-layer {
opacity: 0;
width: 100%;
height: 100%;
position: absolute;
- background-size: contain!important;
+ background-size: contain !important;
}
-.adyen-checkout-ctp__card-animation >.adyen-checkout-ctp__card-animation-layer:nth-of-type(1) {
+.adyen-checkout-ctp__card-animation > .adyen-checkout-ctp__card-animation-layer:nth-of-type(1) {
z-index: 3;
opacity: 1;
- background: url('data:image/svg+xml,') left top no-repeat,url('data:image/svg+xml,') left top no-repeat;
- animation: card-bounce 2060ms linear infinite both, card-fade-100 2060ms linear infinite both;
+ background:
+ url('data:image/svg+xml,')
+ left top no-repeat,
+ url('data:image/svg+xml,')
+ left top no-repeat;
+ animation:
+ card-bounce 2060ms linear infinite both,
+ card-fade-100 2060ms linear infinite both;
animation-delay: 100ms;
}
-.adyen-checkout-ctp__card-animation >.adyen-checkout-ctp__card-animation-layer:nth-of-type(2) {
+.adyen-checkout-ctp__card-animation > .adyen-checkout-ctp__card-animation-layer:nth-of-type(2) {
z-index: 2;
opacity: 0.6;
transform: translateY(25%);
- background: url('data:image/svg+xml,') left top no-repeat;
- animation: card-bounce 2060ms linear infinite both, card-fade-60 2060ms linear infinite both;
+ background: url('data:image/svg+xml,')
+ left top no-repeat;
+ animation:
+ card-bounce 2060ms linear infinite both,
+ card-fade-60 2060ms linear infinite both;
animation-delay: 50ms;
}
-.adyen-checkout-ctp__card-animation >.adyen-checkout-ctp__card-animation-layer:nth-of-type(3) {
+.adyen-checkout-ctp__card-animation > .adyen-checkout-ctp__card-animation-layer:nth-of-type(3) {
z-index: 1;
opacity: 0.2;
transform: translateY(50%);
- background: url('data:image/svg+xml,') left top no-repeat;
- animation: card-bounce 2060ms linear infinite both, card-fade-20 2060ms linear infinite both;
+ background: url('data:image/svg+xml,')
+ left top no-repeat;
+ animation:
+ card-bounce 2060ms linear infinite both,
+ card-fade-20 2060ms linear infinite both;
}
.adyen-checkout-ctp__loading-subtitle {
- font-size: token(spacer-070);
+ font-size: token(text-subtitle-font-size);
line-height: token(text-caption-line-height);
max-width: 280px;
text-align: center;
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
index 1a52bd798e..7de601aa63 100644
--- 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;
-}
\ No newline at end of file
+}
diff --git a/packages/lib/src/components/internal/ClickToPay/components/CtPSection/CtPSection.scss b/packages/lib/src/components/internal/ClickToPay/components/CtPSection/CtPSection.scss
index 16ad25d5f6..c0ff47cb14 100644
--- 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,7 +30,7 @@
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;
@@ -36,7 +38,7 @@
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
index 4c880c6d90..f5dad93429 100644
--- 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
index 0ff472a366..8da2fc9797 100644
--- 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
new file mode 100644
index 0000000000..f7f2d14af6
--- /dev/null
+++ 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
index 4da537eec7..6cc84289ee 100644
--- 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}');