Feat: Design System Unification (2) (#2390)

> Commits migrated from #2120 to fix unwanted merge ## What's the purpose of this pull request? This PR updates the Brandless to the new design foundations from VTEX. I also made a small improvement on Payment Methods icons by fixing existed ones and adding new methods. **Major changes:** - [x] Updates type scale **Minor changes:** - [x] Fix `InputField` label centered vertical position for inputs with custom height - [x] Fix payment methods icons - [x] Fix `ProductCard` Out-of-stock styles - [x] Fix `QuantitySelector` border-radius declaration - [x] Update all "Lato" font declaration to "Inter" - [x] Add missing `ProductPrice` style import on `ProductGallery` |Before|After| |-|-| |<img width="937" alt="Screenshot 2023-11-21 at 10 11 13" src="https://github.com/vtex/faststore/assets/11613011/190f6580-c292-4d84-86f6-8c04e1723eb4">|<img width="937" alt="Screenshot 2023-11-21 at 10 10 48" src="https://github.com/vtex/faststore/assets/11613011/fdf8b937-78b6-4e28-9b6e-b780769dee39">| |<img width="242" alt="image" src="https://github.com/vtex/faststore/assets/11613011/35641092-13d1-484b-8855-38bfba7349b1">|<img width="242" alt="image" src="https://github.com/vtex/faststore/assets/11613011/c2cf1e7f-a228-4092-982a-2af6360a8229">| ## How to test it? You should see changes on typography, colors and icons. https://starter-git-feat-design-system-unification-faststore.vercel.app/ ## Starter PR vtex-sites/starter.store#501
vtex · Jul 29, 2024 · 6cbf76a · 6cbf76a
1 parent 31a958b
commit 6cbf76a
Show file tree

Hide file tree

Showing 20 changed files with 282 additions and 124 deletions.
diff --git a/apps/site/pages/components/molecules/input-field.mdx b/apps/site/pages/components/molecules/input-field.mdx
@@ -205,13 +205,19 @@ export const propsInputField = [
 #### Label
 
 <TokenTable>
-  <TokenRow token="--fs-input-label-padding" value="0 var(--fs-spacing-2)" />
+  <TokenRow token="--fs-input-field-label-padding" value="0 var(--fs-spacing-2)" />
   <TokenRow
-    token="--fs-input-label-color"
+    token="--fs-input-field-label-color"
     value="var(--fs-color-text-light)"
     isColor
   />
-  <TokenRow token="--fs-input-label-size" value="var(--fs-text-size-tiny)" />
+  <TokenRow token="--fs-input-field-label-size" value="var(--fs-text-size-tiny)" />
+</TokenTable>
+
+#### Button
+
+<TokenTable>
+  <TokenRow token="--fs-input-field-button-height" value="var(--fs-control-tap-size)" />
 </TokenTable>
 
 ### Variants

diff --git a/apps/site/pages/components/molecules/order-summary.mdx b/apps/site/pages/components/molecules/order-summary.mdx
@@ -114,6 +114,10 @@ Follow the instructions in the [Importing FastStore UI component styles](/docs/c
     token="--fs-order-summary-margin-bottom"
     value="var(--fs-spacing-2)"
   />
+  <TokenRow
+    token="--fs-order-summary-row-gap"
+    value="0"
+  />
   <TokenDivider />
   <TokenRow
     token="--fs-order-summary-discount-text-color"

diff --git a/apps/site/pages/components/molecules/product-card.mdx b/apps/site/pages/components/molecules/product-card.mdx
@@ -551,6 +551,11 @@ export const outOfStock =
     value="var(--fs-color-disabled-bkg)"
     isColor
   />
+  <TokenRow
+    token="--fs-product-card-out-of-stock-border-color"
+    value="var(--fs-color-neutral-1)"
+    isColor
+  />
   <TokenRow token="--fs-product-card-out-of-stock-img-opacity" value=".5" />
 </TokenTable>
 

diff --git a/apps/site/pages/components/molecules/toast.mdx b/apps/site/pages/components/molecules/toast.mdx
@@ -315,7 +315,7 @@ export const propsToast = [
     token="--fs-toast-title-weight"
     value="var(--fs-text-weight-bold)"
   />
-  <TokenRow token="--fs-toast-title-line-height" value="var(--fs-scale)" />
+  <TokenRow token="--fs-toast-title-line-height" value="1.2" />
   <TokenRow token="--fs-toast-title-margin-left" value="var(--fs-spacing-3)" />
 </TokenTable>
 

diff --git a/apps/site/pages/components/organisms/payment-methods.mdx b/apps/site/pages/components/organisms/payment-methods.mdx
@@ -84,14 +84,16 @@ Follow the instructions in the [Importing FastStore UI component styles](/docs/c
   <Tab>
     ```tsx
     export const flags = [
-      { icon: { icon: 'Visa' }, alt: 'Visa' },
+      { icon: { icon: 'Amex' }, alt: 'Amex' },
+      { icon: { icon: 'ApplePay' }, alt: 'ApplePay' },
+      { icon: { icon: 'EloCard' }, alt: 'Elo Card' },
       { icon: { icon: 'Diners' }, alt: 'Diners Club' },
+      { icon: { icon: 'GooglePay' }, alt: 'GooglePay' },
       { icon: { icon: 'Mastercard' }, alt: 'Mastercard' },
-      { icon: { icon: 'EloCard' }, alt: 'Elo Card' },
       { icon: { icon: 'PayPal' }, alt: 'PayPal' },
+      { icon: { icon: 'Pix' }, alt: 'Pix' },
       { icon: { icon: 'Stripe' }, alt: 'Stripe' },
-      { icon: { icon: 'GooglePay' }, alt: 'GooglePay' },
-      { icon: { icon: 'ApplePay' }, alt: 'ApplePay' },
+      { icon: { icon: 'Visa' }, alt: 'Visa' },
     ]
 
     <PaymentMethods title={<h3>Payment Methods</h3>} flagList={flags} />
@@ -101,14 +103,16 @@ Follow the instructions in the [Importing FastStore UI component styles](/docs/c
 </Tabs>
 
 export const flags = [
-  { icon: { icon: 'Visa' }, alt: 'Visa' },
+  { icon: { icon: 'Amex' }, alt: 'Amex' },
+  { icon: { icon: 'ApplePay' }, alt: 'ApplePay' },
+  { icon: { icon: 'EloCard' }, alt: 'Elo Card' },
   { icon: { icon: 'Diners' }, alt: 'Diners Club' },
+  { icon: { icon: 'GooglePay' }, alt: 'GooglePay' },
   { icon: { icon: 'Mastercard' }, alt: 'Mastercard' },
-  { icon: { icon: 'EloCard' }, alt: 'Elo Card' },
   { icon: { icon: 'PayPal' }, alt: 'PayPal' },
+  { icon: { icon: 'Pix' }, alt: 'Pix' },
   { icon: { icon: 'Stripe' }, alt: 'Stripe' },
-  { icon: { icon: 'GooglePay' }, alt: 'GooglePay' },
-  { icon: { icon: 'ApplePay' }, alt: 'ApplePay' },
+  { icon: { icon: 'Visa' }, alt: 'Visa' },
 ]
 
 ---
@@ -177,6 +181,11 @@ export const propsFlag = [
     token="--fs-payment-methods-flag-height"
     value="var(--fs-spacing-4)"
   />
+  <TokenRow
+    token="--fs-payment-methods-flag-bkg-color"
+    value="var(--fs-color-neutral-0)"
+    isColor
+  />
   <TokenRow
     token="--fs-payment-methods-flag-border-width"
     value="var(--fs-border-width)"

diff --git a/apps/site/pages/docs/global-tokens/typography.mdx b/apps/site/pages/docs/global-tokens/typography.mdx
@@ -30,6 +30,8 @@ A standard scale and basic definitions for your text: `font family`,`weight` and
 <TokenTable title="Global Token" description="Value">
   <TokenRow token="--fs-text-weight-light" value="300" />
   <TokenRow token="--fs-text-weight-regular" value="400" />
+  <TokenRow token="--fs-text-weight-medium" value="500" />
+  <TokenRow token="--fs-text-weight-semibold" value="600" />
   <TokenRow token="--fs-text-weight-bold" value="700" />
   <TokenRow token="--fs-text-weight-black" value="900" />
 </TokenTable>
@@ -45,41 +47,25 @@ export const desktopList = [
   { size: 14, token: 'var(--fs-text-size-1)' },
   { size: 16, token: 'var(--fs-text-size-2)' },
   { size: 20, token: 'var(--fs-text-size-3)' },
-  { size: 25, token: 'var(--fs-text-size-4)' },
-  { size: 31, token: 'var(--fs-text-size-5)' },
-  { size: 39, token: 'var(--fs-text-size-6)' },
-  { size: 48, token: 'var(--fs-text-size-7)' },
-  { size: 61, token: 'var(--fs-text-size-8)' },
+  { size: 24, token: 'var(--fs-text-size-4)' },
+  { size: 28, token: 'var(--fs-text-size-5)' },
+  { size: 32, token: 'var(--fs-text-size-6)' },
+  { size: 40, token: 'var(--fs-text-size-7)' },
+  { size: 48, token: 'var(--fs-text-size-8)' },
+  { size: 56, token: 'var(--fs-text-size-9)' },
 ]
 
 export const mobileList = [
   { size: 12, token: 'var(--fs-text-size-0)' },
   { size: 14, token: 'var(--fs-text-size-1)' },
   { size: 16, token: 'var(--fs-text-size-2)' },
-  {
-    size: 18,
-    token: 'var(--fs-text-size-3)',
-  },
-  {
-    size: 20,
-    token: 'var(--fs-text-size-4)',
-  },
-  {
-    size: 23,
-    token: 'var(--fs-text-size-5)',
-  },
-  {
-    size: 26,
-    token: 'var(--fs-text-size-6)',
-  },
-  {
-    size: 29,
-    token: 'var(--fs-text-size-7)',
-  },
-  {
-    size: 33,
-    token: 'var(--fs-text-size-8)',
-  },
+  { size: 18, token: 'var(--fs-text-size-3)' },
+  { size: 20, token: 'var(--fs-text-size-4)' },
+  { size: 22, token: 'var(--fs-text-size-5)' },
+  { size: 24, token: 'var(--fs-text-size-6)' },
+  { size: 28, token: 'var(--fs-text-size-7)' },
+  { size: 32, token: 'var(--fs-text-size-8)' },
+  { size: 36, token: 'var(--fs-text-size-9)' },
 ]
 
 ### Mobile Scale
@@ -92,35 +78,39 @@ export const mobileList = [
 
 <TokenTable title="Global Token" description="Value">
   <TokenRow token="--fs-text-size-base" value="16px" />
-  <TokenRow token="--fs-text-scale-desktop" value="1.25" />
-  <TokenRow token="--fs-text-scale-mobile" value="1.13" />
+  <TokenRow token="--fs-text-scale-desktop" value="4px" />
+  <TokenRow token="--fs-text-scale-mobile" value="2px" />
   <TokenDivider />
   <TokenRow token="--fs-text-size-0" value="12px" />
   <TokenRow token="--fs-text-size-1" value="14px" />
   <TokenRow token="--fs-text-size-2" value="var(--fs-text-size-base)" />
   <TokenRow
     token="--fs-text-size-3"
-    value="calc(var(--fs-text-size-2) * var(--fs-scale))"
+    value="calc(var(--fs-text-size-2) + var(--fs-scale))"
   />
   <TokenRow
     token="--fs-text-size-4"
-    value="calc(var(--fs-text-size-3) * var(--fs-scale))"
+    value="calc(var(--fs-text-size-3) + var(--fs-scale))"
   />
   <TokenRow
     token="--fs-text-size-5"
-    value="calc(var(--fs-text-size-4) * var(--fs-scale))"
+    value="calc(var(--fs-text-size-4) + var(--fs-scale))"
   />
   <TokenRow
     token="--fs-text-size-6"
-    value="calc(var(--fs-text-size-5) * var(--fs-scale))"
+    value="calc(var(--fs-text-size-5) + var(--fs-scale))"
   />
   <TokenRow
     token="--fs-text-size-7"
-    value="calc(var(--fs-text-size-6) * var(--fs-scale))"
+    value="calc(var(--fs-text-size-6) + (var(--fs-scale) * 2))"
   />
   <TokenRow
     token="--fs-text-size-8"
-    value="calc(var(--fs-text-size-7) * var(--fs-scale))"
+    value="calc(var(--fs-text-size-7) + (var(--fs-scale) * 2))"
+  />
+  <TokenRow
+    token="--fs-text-size-9"
+    value="calc(var(--fs-text-size-8) + (var(--fs-scale) * 2))"
   />
 </TokenTable>
 
@@ -131,8 +121,8 @@ export const mobileList = [
 ### Sizes
 
 <TokenTable title="Global Token" description="Value">
-  <TokenRow token="--fs-text-size-title-huge" value="var(--fs-text-size-7)" />
-  <TokenRow token="--fs-text-size-title-page" value="var(--fs-text-size-6)" />
+  <TokenRow token="--fs-text-size-title-huge" value="var(--fs-text-size-8)" />
+  <TokenRow token="--fs-text-size-title-page" value="var(--fs-text-size-7)" />
   <TokenRow
     token="--fs-text-size-title-product"
     value="var(--fs-text-size-4)"
@@ -164,7 +154,7 @@ export const mobileList = [
 
 ## Adding a custom font
 
-Using a custom font helps to keep a cohesive brand across your store. 
+Using a custom font helps to keep a cohesive brand across your store.
 To maintain readability in your store, choose an easily readable font and the appropriate color and text size.
 Follow the steps below to add a custom font to your store.
 
@@ -180,7 +170,7 @@ function WebFonts() {
       {/* Add a <link> tag for your font-family of choice */}
       <link
         rel="stylesheet"
-        href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap"
+        href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap"
       />
     </>
   );
@@ -202,7 +192,7 @@ export default WebFonts;
     // --------------------------------------------------------
     // Typography (Branding Core)
     // --------------------------------------------------------
-      --fs-text-face-body: 'Lato', -apple-system, system-ui, BlinkMacSystemFont, sans-serif;
+      --fs-text-face-body: 'Inter', -apple-system, system-ui, BlinkMacSystemFont, sans-serif;
   }
 }
 ```

diff --git a/apps/site/pages/docs/icons.mdx b/apps/site/pages/docs/icons.mdx
@@ -85,14 +85,16 @@ You can find more details about the `Icon` component [here](/components/atoms/ic
 ### Payment Flags
 
 <IconList>
-  <IconComponent icon={<Icon name="Visa" />} name="Visa" />
+  <IconComponent icon={<Icon name="Amex" />} name="Amex" />
+  <IconComponent icon={<Icon name="ApplePay" />} name="ApplePay" />
+  <IconComponent icon={<Icon name="EloCard" />} name="EloCard" />
   <IconComponent icon={<Icon name="Diners" />} name="Diners" />
+  <IconComponent icon={<Icon name="GooglePay" />} name="GooglePay" />
   <IconComponent icon={<Icon name="Mastercard" />} name="Mastercard" />
-  <IconComponent icon={<Icon name="EloCard" />} name="EloCard" />
   <IconComponent icon={<Icon name="PayPal" />} name="PayPal" />
+  <IconComponent icon={<Icon name="Pix" />} name="Pix" />
   <IconComponent icon={<Icon name="Stripe" />} name="Stripe" />
-  <IconComponent icon={<Icon name="GooglePay" />} name="GooglePay" />
-  <IconComponent icon={<Icon name="ApplePay" />} name="ApplePay" />
+  <IconComponent icon={<Icon name="Visa" />} name="Visa" />
 </IconList>
 
 ### Social