From 17a3aa9453b1e5b74cd3c7f0c659c297b7ccb843 Mon Sep 17 00:00:00 2001 From: Yu Long Date: Mon, 6 Jan 2025 15:55:46 +0100 Subject: [PATCH 1/3] style: use `rem` for font size unit --- packages/lib/.storybook/main.css | 2 +- .../Giftcard/components/GiftcardResult.scss | 4 ++-- packages/lib/src/styles/overrides.scss | 8 ++++++++ packages/lib/src/styles/variable-generator.scss | 15 +++++++++++++-- 4 files changed, 24 insertions(+), 5 deletions(-) create mode 100644 packages/lib/src/styles/overrides.scss diff --git a/packages/lib/.storybook/main.css b/packages/lib/.storybook/main.css index 7118c11811..6077a0f7e1 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; 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/styles/overrides.scss b/packages/lib/src/styles/overrides.scss new file mode 100644 index 0000000000..a39b6ce201 --- /dev/null +++ b/packages/lib/src/styles/overrides.scss @@ -0,0 +1,8 @@ +// Override the Bento font sizes +$text-overrides: ( + 'text-caption-font-size': 0.75rem, + 'text-body-font-size': 0.875rem, + 'text-subtitle-font-size': 1rem, + 'text-title-font-size': 1rem, + 'text-title-l-font-size': 1.5rem +); 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}'); From d717a60b4eb8218ce6a98683fd5222f53c5565c3 Mon Sep 17 00:00:00 2001 From: Yu Long Date: Tue, 7 Jan 2025 13:34:27 +0100 Subject: [PATCH 2/3] refactor: some improvements and fix the validation icon position --- .changeset/swift-bears-kiss.md | 5 +++ packages/lib/.storybook/main.css | 2 +- .../lib/src/components/PayPal/Paypal.scss | 2 +- .../components/CtPCards/CtPCards.scss | 2 +- .../CtPCards/CtPSingleCard/CtPSingleCard.scss | 2 +- .../CtPInfo/CtPInfoModal/CtPInfoModal.scss | 4 +- .../components/CtPLoader/CtPLoader.scss | 38 ++++++++++++------- .../CtPOneTimePasswordInput.scss | 6 +-- .../components/CtPSection/CtPSection.scss | 12 +++--- .../internal/FormFields/FormFields.scss | 4 ++ .../components/internal/Voucher/Voucher.scss | 2 +- packages/lib/src/styles/overrides.scss | 11 +++++- 12 files changed, 60 insertions(+), 30 deletions(-) create mode 100644 .changeset/swift-bears-kiss.md 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 6077a0f7e1..35eb8026cb 100644 --- a/packages/lib/.storybook/main.css +++ b/packages/lib/.storybook/main.css @@ -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/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..1f83293058 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-l-mobile-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 index a39b6ce201..40d1f4157f 100644 --- 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 ); From 8bd4f4198d53330fc093a380eddf7b0469f753fa Mon Sep 17 00:00:00 2001 From: Yu Long Date: Wed, 8 Jan 2025 17:13:10 +0100 Subject: [PATCH 3/3] refactor: use `text-title-m-font-size` --- .../components/CtPInfo/CtPInfoModal/CtPInfoModal.scss | 2 +- packages/lib/src/styles/overrides.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) 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 1f83293058..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(text-title-l-mobile-font-size); + font-size: token(text-title-m-font-size); line-height: token(spacer-090); padding: 0; margin: 0 0 token(spacer-060); diff --git a/packages/lib/src/styles/overrides.scss b/packages/lib/src/styles/overrides.scss index 40d1f4157f..f7f2d14af6 100644 --- a/packages/lib/src/styles/overrides.scss +++ b/packages/lib/src/styles/overrides.scss @@ -11,5 +11,5 @@ $text-overrides: ( // 24px 'text-title-l-font-size': 1.5rem, // 20px - 'text-title-l-mobile-font-size': 1.25rem + 'text-title-m-font-size': 1.25rem );