fix(market-sans): fix line-height for new font version (#2586)

Author: ArtBlue

.changeset/tame-kings-dream.md

@@ -0,0 +1,5 @@
+---
+"@ebay/skin": patch
+---
+
+fix(market-sans): fix line-height for new font version

.storybook/custom-styles.css

@@ -0,0 +1,5 @@
+/* Custom Classes for Storybook */
+.font-large {
+    font-size: 200%;
+    /* line-height: var(--typography-body-line-height); */
+}

.storybook/preview.js

@@ -1 +1,2 @@
 import "../src/sass/bundles/skin-full.scss";
+import "./custom-styles.css";

.storybook/theme.js

@@ -9,7 +9,7 @@ export default create({
     appBg: "#EEF8FF",
 
     // Brand assets
-    brandTitle: "eBayUI Core",
+    brandTitle: "Skin CSS Framework",
     brandUrl: "/",
     brandImage:
         "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/EBay_logo.svg/1280px-EBay_logo.svg.png",

dist/global/global.css

@@ -6,6 +6,7 @@ body {
         Arial,
         sans-serif;
     font-size: var(--font-size-default);
+    line-height: var(--font-line-height-default);
     -webkit-text-size-adjust: 100%;
 }
 

dist/tokens/evo-core.css

@@ -181,6 +181,11 @@
     --font-size-giant-2: var(--font-size-36);
     --font-size-giant-3: var(--font-size-46);
     --font-size-giant-4: var(--font-size-64);
+    /* 
+    Ratio of 20px (base line height) / 14px (body font) 
+    This needs to be unitless for optimal scaling
+    */
+    --font-line-height-250: 1.4286;
     --font-weight-regular: 500;
     --font-weight-bold: 700;
     --spacing-25: 2px;

dist/tokens/evo-light.css

@@ -219,4 +219,6 @@
     --motion-duration-long-1: 667ms;
     --motion-duration-long-2: 883ms;
     --motion-duration-long-3: 1000ms;
+    /* Typography */
+    --font-line-height-default: var(--font-line-height-250);
 }

docs/custom-styles.html

@@ -1,5 +1,9 @@
 <style>
-
+/* @TODO - these style should be copied to .storybook/custom-styles.css 
+    and this file should be removed. This file requires a storybook server
+    restart for style changes to take effect. Custom styles within ./storybook
+    will take effect immediately.
+*/
     .carousel__list--default-demo li {
         background-color: grey;
         font-size: 24px;

src/sass/global/global.scss

@@ -7,6 +7,7 @@ body {
 
     font-family: $font-family-default;
     font-size: var(--font-size-default);
+    line-height: var(--font-line-height-default);
     /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
     -webkit-text-size-adjust: 100%;
 }

src/sass/snackbar-dialog/stories/font-size.stories.js

@@ -1,7 +1,7 @@
 export default { title: "Skin/Snackbar Dialog/Font-Size" };
 
 export const noAction = () => `
-    <div style="font-size: 200%">
+    <div class="font-large">
         <aside aria-label="Notification" aria-live="polite" aria-modal="false" class="snackbar-dialog" role="dialog">
             <div class="snackbar-dialog__window">
                 <div class="snackbar-dialog__main">
@@ -13,7 +13,7 @@ export const noAction = () => `
 `;
 
 export const action = () => `
-    <div style="font-size: 200%">
+    <div class="font-large">
         <aside aria-label="Notification" aria-live="polite" aria-modal="false" class="snackbar-dialog" role="dialog">
             <div class="snackbar-dialog__window">
                 <div class="snackbar-dialog__main">
@@ -28,7 +28,7 @@ export const action = () => `
 `;
 
 export const actionAndDismiss = () => `
-    <div style="font-size: 200%">
+    <div class="font-large">
         <aside aria-label="Notification" aria-live="polite" aria-modal="false" class="snackbar-dialog" role="dialog">
             <div class="snackbar-dialog__window">
                 <div class="snackbar-dialog__main">
@@ -44,7 +44,7 @@ export const actionAndDismiss = () => `
 `;
 
 export const actionsStacked = () => `
-    <div style="font-size: 200%">
+    <div class="font-large">
         <aside aria-label="Notification" aria-live="polite" aria-modal="false" class="snackbar-dialog" role="dialog">
             <div class="snackbar-dialog__window snackbar-dialog__window--column">
                 <div class="snackbar-dialog__main">