Add Theming's global tokens

CHANGELOG.md

@@ -23,8 +23,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - `Suggestions` component.
 - `SearchHistory` component.
 - `Badge` interactive variation.
+- New folder `styles/global` containing all global styles.
 
 ### Changed
+
 - Move inline styles to external stylesheet to improve TBT
 - Changed ProductGallery and EmptyGallery styles to make the search results page
 - Moved all icons to use Icon component
@@ -47,6 +49,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - `Badge` variants names
 - `Tiles` and `Tile` to use semantic list elements.
 - `postalCode` from storage to Session context.
+- Updates all tokens naming and simplifies the global styles.
+- Changes `theme.scss` file to `global/tokens.scss`.
 
 ### Deprecated
 

README.md

@@ -4,10 +4,10 @@
   </a>
 </p>
 <h1 align="center">
-  A starter powered by Faststore and Gatsby
+  A starter powered by FastStore and Gatsby
 </h1>
 
-Kickoff your store with this boilerplate. This starter ships with the main Faststore configuration files you might need to get up and running blazing fast with the blazing-fast store for React.
+Kickoff your store with this boilerplate. This starter ships with the main FastStore configuration files you might need to get up and running blazing fast with the blazing-fast store for React.
 
 ## ⚠️ Before you start
 
@@ -160,7 +160,7 @@ A quick look at the top-level files and directories you'll see in a Gatsby proje
 
 22. **`pull_request_template.md`**: Template used when creating your Pull Requests
 
-23. **`renovate.json`**: Renovate configuration file to keep your store always fresh with Faststore's latest versions
+23. **`renovate.json`**: Renovate configuration file to keep your store always fresh with FastStore's latest versions
 
 24. **`.prettierignore`**: Ignore listed files when applying prettier rules
 
@@ -215,7 +215,7 @@ function Button(props: Props) {
 export default Button
 ```
 
-And, that's it! Now you have a working button that you can use anywhere on your project. Faststore, however, brings a handy library called `@faststore/ui` with built-in components to help you speed up your development. To use it, just change `Button.tsx` to:
+And, that's it! Now you have a working button that you can use anywhere on your project. FastStore, however, brings a handy library called `@faststore/ui` with built-in components to help you speed up your development. To use it, just change `Button.tsx` to:
 
 ```tsx
 import React from 'react'
@@ -388,7 +388,7 @@ This project uses SVGs from [Phosphor icons](https://phosphoricons.com/).
 
 Our customized themes are based on [Design Tokens](https://css-tricks.com/what-are-design-tokens/) using [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) or a CSS class for each token. Today, we have the following files in the `src/styles` folder:
 
-### `theme.scss`
+### `tokens.scss`
 
 Here you'll find the basic structure to build your theme (font base, color palette, spacing, color-text, body background color...), feel free to update it with your brand guidelines.
 
@@ -398,36 +398,36 @@ We suggest using a color palette of 3 colors and its gradation: `primary`, `seco
 
 We also listed a couple of customizable tokens so you can easily change your body background, for example.
 
-If you feel the need to edit some of the color decisions, you can enter `colors.scss` and update the semantical tokens. E.g.:
+If you feel the need to edit some of the color decisions, you can enter `tokens.scss` and update the semantical tokens. E.g.:
 
 ```scss
---color-border-input: var(--color-neutral-4); // Current
---color-border-input: var(--color-neutral-5); // Updated
+--fs-border-color-default: var(--fs-color-neutral-4); // Current
+--fs-border-color-default: var(--fs-color-neutral-5); // Updated
 ```
 
 #### <b>Typography</b>
 
-We use the [Modular Scale](https://www.modularscale.com/) setting to create our text-sizes. If you want to change it, just set the `base-font-size` and the `scale` ratio.
+We use the [Modular Scale](https://www.modularscale.com/) setting to create our text-sizes. If you want to change it, just set the `--fs-text-size-base` and the `scale` ratio.
 
 #### <b>Spacing</b>
 
-The spacing scale is based on `rem` sizes, so it will remain consistent if you change the `base-font-size`.
+The spacing scale is based on `rem` sizes, so it will remain consistent if you change the `--fs-text-size-base`.
 
-### `grid.scss`
+### `layout.scss`
 
 List of classes used to create default page grid.
 
 ```scss
-.grid-content-full // Should be used for sections that are side to side, generally with a colored background.
-.grid-content // Should be used for sections that fit centered on the grid.
-.grid-section // This class only adds default vertical margins for page sections.
+.layout__content-full // Should be used for sections that are side to side, generally with a colored background.
+.layout__content // Should be used for sections that fit centered on the grid.
+.layout__section // This class only adds default vertical margins for page sections.
 ```
 
 ![grid-example-image](https://user-images.githubusercontent.com/3356699/150801221-4027dc6a-1cc4-40a7-a323-8be7a148458d.png)
 
 ### `typography.scss`
 
-For the typography-related tokens, we decided to use classes to add extra stylings like `font-weight` and `line-height`. In this file, you'll see all the classes for titles, paragraphs, and default settings on the body. You can create new ones here if needed.
+For the typography-related styles, we decided to use classes to add extra stylings like `font-weight` and `line-height`. In this file, you'll see all the classes for titles, paragraphs, and default settings on the body. You can create new ones here if needed.
 
 ## 🍒 Adding queries
 
@@ -450,7 +450,7 @@ That's it! you have just regenerated all graphql queries/fragments for your appl
 
 ## 🎓 Learning the Frameworks
 
-Looking for more guidance? Full documentation for Faststore lives [on this GitHub repository](https://github.com/vtex/faststore). Also, for learning Gatsby, take a look at the [Gatsby Website](https://www.gatsbyjs.com/), they have plenty of tutorials and examples in there.
+Looking for more guidance? Full documentation for FastStore lives [on this GitHub repository](https://github.com/vtex/faststore). Also, for learning Gatsby, take a look at the [Gatsby Website](https://www.gatsbyjs.com/), they have plenty of tutorials and examples in there.
 
 ## ⚡ Performance & QA
 

gatsby-browser.js

@@ -1,6 +1,10 @@
+import './src/styles/global/resets.scss'
+
+import './src/styles/global/tokens.scss'
+import './src/styles/global/layout.scss'
+import './src/styles/global/typography.scss'
+
 import './src/styles/fonts.css'
-import './src/styles/theme.scss'
-import './src/styles/layout.scss'
 
 import { CartProvider, SessionProvider, UIProvider } from '@faststore/sdk'
 import React from 'react'

src/components/cart/CartItem/CartItem.tsx

@@ -45,7 +45,7 @@ function CartItem({ item }: Props) {
           />
         </CardImage>
         <div data-cart-item-summary>
-          <p className="text-body" data-cart-item-title>
+          <p className="text__body" data-cart-item-title>
             {item.itemOffered.isVariantOf.name}
           </p>
           <span data-cart-item-prices>
@@ -55,7 +55,7 @@ function CartItem({ item }: Props) {
               testId="list-price"
               data-value={item.listPrice}
               variant="listing"
-              classes="text-body-small"
+              classes="text__legend"
               SRText="Original price:"
             />
             <Price
@@ -64,7 +64,7 @@ function CartItem({ item }: Props) {
               testId="price"
               data-value={item.price}
               variant="spot"
-              classes="title-subsection"
+              classes="text__title-subsection"
               SRText="Price:"
             />
           </span>

src/components/cart/CartItem/cart-item.scss

@@ -1,22 +1,22 @@
 @import "src/styles/scaffold";
 
 .cart-item {
-  padding: var(--space-3);
-  background-color: var(--bg-neutral-lightest);
-  border: var(--border-width-0) solid var(--color-border-display);
-  border-radius: var(--border-radius-default);
+  padding: var(--fs-spacing-3);
+  background-color: var(--fs-color-neutral-0);
+  border: var(--fs-border-width-default) solid var(--fs-border-color-light);
+  border-radius: var(--fs-border-radius-default);
 
   [data-card-content] {
     display: grid;
     grid-template-columns: rem(72px) repeat(4, 1fr);
     align-items: center;
-    column-gap: var(--grid-gap-0);
+    column-gap: var(--fs-grid-gap-0);
   }
 
   [data-gatsby-image-wrapper] {
     flex-shrink: 0;
     margin-bottom: auto;
-    border-radius: var(--border-radius-default);
+    border-radius: var(--fs-border-radius-default);
   }
 
   [data-cart-item-summary] {
@@ -25,7 +25,7 @@
   }
 
   [data-cart-item-title] {
-    margin-bottom: var(--space-0);
+    margin-bottom: var(--fs-spacing-0);
     color: inherit;
     line-height: 1.2;
     text-decoration: none;
@@ -42,6 +42,6 @@
   [data-card-actions] {
     display: flex;
     justify-content: space-between;
-    margin-top: var(--space-3);
+    margin-top: var(--fs-spacing-3);
   }
 }

src/components/cart/CartSidebar/CartSidebar.tsx

@@ -39,7 +39,7 @@ function CartSidebar() {
     >
       <header data-testid="cart-sidebar">
         <div className="cart-sidebar__title">
-          <p className="title-display">Your Cart</p>
+          <p className="text__lead">Your Cart</p>
           <Badge variant="info" small>
             {totalItems}
           </Badge>

src/components/cart/CartSidebar/cart-sidebar.scss

@@ -3,18 +3,18 @@
   flex-direction: column;
   height: 100%;
   overflow: auto;
-  background-color: var(--bg-neutral-light);
+  background-color: var(--fs-color-neutral-bkg);
 
   > header {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: var(--space-2) var(--page-padding-phone) var(--space-2);
-    background-color: var(--bg-neutral-lightest);
+    padding: var(--fs-spacing-2) var(--fs-spacing-3) var(--fs-spacing-2);
+    background-color: var(--fs-color-neutral-0);
 
     > [data-store-icon-button] {
       &:last-of-type {
-        margin-right: calc(-1 * var(--space-1));
+        margin-right: calc(-1 * var(--fs-spacing-1));
       }
     }
   }
@@ -24,22 +24,22 @@
     align-items: center;
 
     p {
-      margin-right: var(--space-2);
+      margin-right: var(--fs-spacing-2);
       line-height: 1.35;
     }
   }
 
   > [data-store-list] {
     display: flex;
     flex-direction: column;
-    padding: var(--page-padding-phone);
+    padding: var(--fs-spacing-3);
     overflow: auto;
-    row-gap: var(--space-2);
+    row-gap: var(--fs-spacing-2);
   }
 
   > footer {
     margin-top: auto;
-    background-color: var(--bg-neutral-lightest);
+    background-color: var(--fs-color-neutral-0);
     box-shadow: 0 0 6px rgb(0 0 0 / 20%);
 
     [data-store-button] {

src/components/cart/CartToggle/cart-toggle.scss

@@ -4,7 +4,7 @@
   position: relative;
 
   &::after {
-    --cart-toggle-size: var(--space-3);
+    --cart-toggle-size: var(--fs-spacing-3);
 
     position: absolute;
     top: rem(6px);
@@ -14,12 +14,12 @@
     justify-content: center;
     min-width: var(--cart-toggle-size);
     height: var(--cart-toggle-size);
-    padding: var(--space-0);
-    color: var(--color-text-inverse);
-    font-weight: var(--text-weight-bold);
-    font-size: var(--text-size-0);
-    background: var(--bg-secondary-default);
-    border-radius: var(--border-radius-pill);
+    padding: var(--fs-spacing-0);
+    color: var(--fs-color-text-inverse);
+    font-weight: var(--fs-text-weight-bold);
+    font-size: var(--fs-text-size-0);
+    background: var(--fs-color-primary-bkg);
+    border-radius: var(--fs-border-radius-pill);
     content: attr(data-items);
   }
 }

src/components/cart/OrderSummary/OrderSummary.tsx

@@ -33,7 +33,7 @@ function OrderSummary({
           <span>-{formattedDiscount}</span>
         </li>
       )}
-      <li className="title-subsection">
+      <li className="text__title-subsection">
         <span>Total</span>
         <span>{useFormattedPrice(total)}</span>
       </li>

src/components/cart/OrderSummary/order-summary.scss

@@ -1,15 +1,15 @@
 .order-summary[data-order-summary] {
-  padding: var(--space-3);
+  padding: var(--fs-spacing-3);
 
   li {
     display: flex;
     justify-content: space-between;
     line-height: 1.5;
 
-    &[data-order-summary-discount] { color: var(--color-text-success); }
+    &[data-order-summary-discount] { color: var(--fs-color-success-text); }
 
     &:last-of-type {
-      margin-bottom: var(--space-2);
+      margin-bottom: var(--fs-spacing-2);
     }
   }
 }

src/components/common/Footer/Footer.tsx

@@ -16,14 +16,14 @@ import './footer.scss'
 
 function Footer() {
   return (
-    <footer className="footer / grid-content-full">
+    <footer className="footer layout__content-full">
       <IncentivesFooter />
 
-      <div className="footer__section / grid-content">
+      <div className="footer__section layout__content">
         <FooterLinks />
 
         <section className="footer__social">
-          <p className="title-sub-subsection">Follow us</p>
+          <p className="text__title-mini">Follow us</p>
           <UIList variant="unordered">
             <li>
               <Link
@@ -87,7 +87,7 @@ function Footer() {
         </section>
       </div>
 
-      <div className="footer__note / grid-content">
+      <div className="footer__note layout__content">
         <UIIcon
           component={
             <img
@@ -101,7 +101,7 @@ function Footer() {
         />
 
         <UIPaymentMethods>
-          <p className="title-sub-subsection">Payment Methods</p>
+          <p className="text__title-mini">Payment Methods</p>
           <UIList>
             <li>
               <Icon width="34px" height="24px" name="Visa" />
@@ -138,7 +138,7 @@ function Footer() {
           </UIList>
         </UIPaymentMethods>
 
-        <div className="footer__copyright / text-body-small">
+        <div className="footer__copyright / text__legend">
           <p>This website uses VTEX technology</p>
           <p>
             In-store price may vary. Prices and offers are subject to change.

src/components/common/Footer/FooterLinks.tsx

@@ -139,7 +139,7 @@ function FooterLinks() {
         <div className="footer__links-columns">
           {links.map((section) => (
             <nav key={section.title}>
-              <p className="title-sub-subsection">{section.title}</p>
+              <p className="text__title-mini">{section.title}</p>
               <LinksList items={section.items} />
             </nav>
           ))}