diff --git a/CHANGELOG.md b/CHANGELOG.md index d2f557558..2d5e82e79 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/README.md b/README.md index e76f95a9b..8b3d7c9f0 100644 --- a/README.md +++ b/README.md @@ -4,10 +4,10 @@

- A starter powered by Faststore and Gatsby + A starter powered by FastStore and Gatsby

-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 ``` #### Typography -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. #### Spacing -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 diff --git a/gatsby-browser.js b/gatsby-browser.js index aaebd43f1..a34f723f6 100644 --- a/gatsby-browser.js +++ b/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' diff --git a/src/components/cart/CartItem/CartItem.tsx b/src/components/cart/CartItem/CartItem.tsx index ed636769a..fe75b3e1b 100644 --- a/src/components/cart/CartItem/CartItem.tsx +++ b/src/components/cart/CartItem/CartItem.tsx @@ -45,7 +45,7 @@ function CartItem({ item }: Props) { />
-

+

{item.itemOffered.isVariantOf.name}

@@ -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:" /> diff --git a/src/components/cart/CartItem/cart-item.scss b/src/components/cart/CartItem/cart-item.scss index 166c97079..fe3837a5d 100644 --- a/src/components/cart/CartItem/cart-item.scss +++ b/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); } } diff --git a/src/components/cart/CartSidebar/CartSidebar.tsx b/src/components/cart/CartSidebar/CartSidebar.tsx index 82d12aea1..5e65a2486 100644 --- a/src/components/cart/CartSidebar/CartSidebar.tsx +++ b/src/components/cart/CartSidebar/CartSidebar.tsx @@ -39,7 +39,7 @@ function CartSidebar() { >
-

Your Cart

+

Your Cart

{totalItems} diff --git a/src/components/cart/CartSidebar/cart-sidebar.scss b/src/components/cart/CartSidebar/cart-sidebar.scss index 15ebee057..2457b3330 100644 --- a/src/components/cart/CartSidebar/cart-sidebar.scss +++ b/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,7 +24,7 @@ align-items: center; p { - margin-right: var(--space-2); + margin-right: var(--fs-spacing-2); line-height: 1.35; } } @@ -32,14 +32,14 @@ > [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] { diff --git a/src/components/cart/CartToggle/cart-toggle.scss b/src/components/cart/CartToggle/cart-toggle.scss index bbc3f6051..1cca1d7ba 100644 --- a/src/components/cart/CartToggle/cart-toggle.scss +++ b/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); } } diff --git a/src/components/cart/OrderSummary/OrderSummary.tsx b/src/components/cart/OrderSummary/OrderSummary.tsx index 7a82bffae..035970f85 100644 --- a/src/components/cart/OrderSummary/OrderSummary.tsx +++ b/src/components/cart/OrderSummary/OrderSummary.tsx @@ -33,7 +33,7 @@ function OrderSummary({ -{formattedDiscount} )} -
  • +
  • Total {useFormattedPrice(total)}
    • diff --git a/src/components/cart/OrderSummary/order-summary.scss b/src/components/cart/OrderSummary/order-summary.scss index b8fd831f1..f88ce7064 100644 --- a/src/components/cart/OrderSummary/order-summary.scss +++ b/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); } } } diff --git a/src/components/common/Footer/Footer.tsx b/src/components/common/Footer/Footer.tsx index 3157b079b..c9b1ac059 100644 --- a/src/components/common/Footer/Footer.tsx +++ b/src/components/common/Footer/Footer.tsx @@ -16,14 +16,14 @@ import './footer.scss' function Footer() { return ( -