style: use rem for font size unit

Adyen · Jan 6, 2025 · 17a3aa9 · 17a3aa9
1 parent 0b5ebb7
commit 17a3aa9
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 5 deletions.
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;

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/styles/overrides.scss 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
@@ -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}');