diff --git a/package.json b/package.json
index 1bf6b794..9ede2d4b 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
"test": "faststore test"
},
"dependencies": {
- "@faststore/core": "^3.0.22",
+ "@faststore/core": "https://pkg.csb.dev/vtex/faststore/commit/ad406fa5/@faststore/core",
"next": "^13.5.6",
"react": "^18.2.0",
"react-dom": "^18.2.0"
diff --git a/src/fonts/WebFonts.tsx b/src/fonts/WebFonts.tsx
new file mode 100644
index 00000000..8b742f2b
--- /dev/null
+++ b/src/fonts/WebFonts.tsx
@@ -0,0 +1,14 @@
+/* eslint-disable @next/next/no-page-custom-font */
+
+function WebFonts() {
+ return (
+ <>
+
+
+ )
+}
+
+export default WebFonts
diff --git a/src/themes/custom-theme.scss b/src/themes/custom-theme.scss
index 6c616e46..c0a26797 100644
--- a/src/themes/custom-theme.scss
+++ b/src/themes/custom-theme.scss
@@ -3,35 +3,334 @@
// Custom Theme
// ----------------------------------------------------------
-@layer theme {
- .theme {
- // --------------------------------------------------------
- // Colors (Branding Core)
- // --------------------------------------------------------
- --fs-color-main-0: #f1f2f3;
- // --------------------------------------------------------
- // Typography (Branding Core)
- // --------------------------------------------------------
-
- // --------------------------------------------------------
- // Spacing (UI Essentials)
- // --------------------------------------------------------
-
- // --------------------------------------------------------
- // Grid & Layout (UI Essentials)
- // --------------------------------------------------------
-
- // --------------------------------------------------------
- // Interactive Controls (UI Essentials)
- // --------------------------------------------------------
-
- // --------------------------------------------------------
- // Refinements
- // --------------------------------------------------------
-
- // --------------------------------------------------------
- // FS UI Components
- // --------------------------------------------------------
- // Add here the customizations for FastStore UI components.
+.theme {
+ // --------------------------------------------------------
+ // Colors (Branding Core)
+ // --------------------------------------------------------
+ --fs-color-main-2 : #0366dd;
+ --fs-color-main-3 : #0155b7;
+ --fs-color-main-4 : #014592;
+
+ --fs-color-success-bkg : #e9fce3;
+ --fs-color-warning-bkg : #e9fce3;
+ --fs-color-danger-bkg : #f7d1d1;
+
+ --fs-color-primary-bkg-light : var(--fs-color-neutral-0);
+
+ // --------------------------------------------------------
+ // Typography (Branding Core)
+ // --------------------------------------------------------
+
+ // WEIGHT
+ --fs-text-weight-bold : 600;
+ --fs-text-weight-black : 700;
+
+ // FACE
+ --fs-text-face-body : "Inter", -apple-system, system-ui, BlinkMacSystemFont, sans-serif;
+
+ // HIERARCHY SCALE
+ --fs-text-size-title-huge : var(--fs-text-size-9);
+
+ // --------------------------------------------------------
+ // Spacing (UI Essentials)
+ // --------------------------------------------------------
+
+ // --------------------------------------------------------
+ // Grid & Layout (UI Essentials)
+ // --------------------------------------------------------
+
+ // PADDING
+
+ @include media(">=notebook") {
+ --fs-grid-padding : var(--fs-spacing-6);
+ }
+
+ // CONTAINER
+ --fs-grid-max-width : 1320px;
+
+ // --------------------------------------------------------
+ // Interactive Controls (UI Essentials)
+ // --------------------------------------------------------
+
+ // --------------------------------------------------------
+ // Refinements
+ // --------------------------------------------------------
+
+ // BORDERS
+ --fs-border-color : var(--fs-color-neutral-2);
+
+ --fs-border-radius : 4px;
+
+ // --------------------------------------------------------
+ // FS UI Components
+ // --------------------------------------------------------
+
+ .section {
+ ////////////////////
+ // Global
+ ////////////////////
+
+ [data-fs-button] {
+ --fs-button-padding : calc(var(--fs-spacing-1) - (var(--fs-button-border-width) * 2)) var(--fs-spacing-4);
+
+ --fs-button-border-radius : var(--fs-border-radius-pill);
+ --fs-button-border-width : var(--fs-border-width);
+
+ --fs-buy-button-bkg-color : var(--fs-button-primary-bkg-color);
+ --fs-buy-button-bkg-color-hover : var(--fs-button-primary-bkg-color-hover);
+ --fs-buy-button-bkg-color-active : var(--fs-button-primary-bkg-color-active);
+
+ --fs-button-secondary-text-color-hover : var(--fs-color-secondary-text);
+ --fs-button-secondary-bkg-color-hover : var(--fs-color-neutral-1);
+ --fs-button-secondary-bkg-color-active : var(--fs-color-neutral-2);
+ --fs-button-secondary-border-color : var(--fs-border-color);
+
+ --fs-button-secondary-inverse-text-color : var(--fs-color-text-inverse);
+ --fs-button-secondary-inverse-text-color-hover : var(--fs-button-secondary-inverse-text-color);
+
+ --fs-button-secondary-inverse-bkg-color-hover : #ffffff50;
+ --fs-button-secondary-inverse-bkg-color-active : #ffffff60;
+
+ --fs-button-secondary-inverse-border-color : var(--fs-button-secondary-inverse-bkg-color-hover);
+ --fs-button-secondary-inverse-border-color-hover : transparent;
+ --fs-button-secondary-inverse-border-color-active : transparent;
+ }
+
+ [data-fs-input] {
+ --fs-input-height : 56px;
+ --fs-input-border-radius : var(--fs-border-radius);
+
+ [data-fs-button] { min-width: var(--fs-input-height); }
+ }
+
+ [data-fs-input-field] {
+ --fs-input-field-padding : var(--fs-spacing-2) var(--fs-spacing-2) 0;
+ --fs-input-field-label-padding : 0 var(--fs-spacing-2);
+
+ input:not(:placeholder-shown) + label, &:focus + label { top: rem(9px); }
+ }
+
+ [data-fs-quantity-selector] {
+ --fs-qty-selector-border-radius : var(--fs-border-radius-pill);
+ }
+
+ [data-fs-navbar-header] {
+ [data-fs-button-wrapper], [data-fs-button-icon] {
+ color: var(--fs-color-text-display);
+ }
+ }
+
+ [data-fs-carousel] {
+ --fs-carousel-controls-box-shadow : none;
+ --fs-carousel-controls-bkg-color : var(--fs-color-neutral-7);
+ --fs-carousel-controls-icon-color : var(--fs-color-text-inverse);
+ --fs-carousel-bullet-bkg-color-selected : var(--fs-color-neutral-7);
+ --fs-carousel-item-margin-right : var(--fs-spacing-5);
+
+ [data-fs-button]:disabled [data-fs-button-wrapper] { background-color: var(--fs-color-neutral-1); }
+ }
+
+ [data-fs-alert] {
+ --fs-alert-bkg-color : var(--fs-color-neutral-7);
+ --fs-alert-text-color : var(--fs-color-text-inverse);
+ }
+
+ [data-fs-incentives] {
+ [data-fs-list] {
+ padding: 0 var(--fs-grid-padding);
+ }
+
+ @include media(">=notebook") {
+ --fs-incentives-gap : var(--fs-spacing-6);
+ }
+ }
+
+ [data-fs-product-card] {
+ --fs-product-card-wide-content-padding : 0;
+ --fs-product-card-border-width : 0;
+ --fs-product-card-title-weight : var(--fs-text-weight-semibold);
+ --fs-product-card-wide-bkg-color : transparent;
+ --fs-product-card-padding : 0 0 var(--fs-spacing-2) 0;
+
+ --fs-product-card-shadow-hover : none;
+
+ @media (hover: hover) {
+ &:hover {
+ [data-fs-product-card-image] img { opacity: .8; }
+ }
+ }
+ }
+
+ [data-fs-product-card-variant="wide"] {
+ --fs-product-card-title-size : var(--fs-text-size-title-product);
+ [data-fs-image] { border-radius: var(--fs-border-radius); }
+ [data-fs-product-card-title] { letter-spacing: -1.1px; }
+ }
+
+ ////////////////////
+ // HOMEPAGE
+ ////////////////////
+
+ [data-fs-hero] {
+ @include layout-content;
+
+ &[data-fs-hero-variant="primary"] [data-fs-hero-heading] {
+ @include media(">=notebook") {
+ padding: var(--fs-spacing-13) var(--fs-spacing-5);
+ }
+ }
+ }
+
+ [data-fs-tiles] {
+ --fs-tiles-gap-notebook : var(--fs-grid-gap-4);
+ }
+
+ ////////////////////
+ // PDP
+ ////////////////////
+
+ [data-fs-product-title] {
+ --fs-product-title-text-size : var(--fs-text-size-6);
+ --fs-product-title-text-weight : var(--fs-text-weight-semibold);
+ }
+
+ [data-fs-product-details-title] {
+ padding-top: 0;
+ border-top: none;
+ }
+
+ [data-fs-product-details] {
+ --fs-product-details-vertical-spacing : var(--fs-spacing-5);
+ --fs-product-details-horizontal-spacing : var(--fs-spacing-6);
+
+ [data-fs-product-details-section] {
+ padding-right: 0;
+ padding-left: 0;
+ border-right: none;
+ border-left: none;
+ }
+ }
+
+ [data-fs-sku-selector] {
+ --fs-sku-selector-image-border-radius : var(--fs-border-radius-circle);
+ --fs-sku-selector-option-border-radius : var(--fs-border-radius-circle);
+ --fs-sku-selector-option-border-color : var(--fs-border-color);
+ }
+
+ [data-fs-image-gallery] > [data-fs-image] {
+ object-fit: cover;
+
+ @include media("=notebook") {
+ --fs-cart-sidebar-list-padding : var(--fs-spacing-3) var(--fs-spacing-7);
+ --fs-slide-over-header-padding : var(--fs-spacing-2) var(--fs-spacing-7);
+ }
+
+ [data-fs-empty-state] {
+ --fs-empty-state-bkg-color-default : var(--fs-color-neutral-0);
+ }
+
+ [data-fs-slide-over-header] [data-fs-button-wrapper] {
+ color: var(--fs-color-text);
+ }
+ }
+
+ [data-fs-cart-sidebar-footer] {
+ @include media(">=notebook") {
+ padding: 0 var(--fs-spacing-7) var(--fs-spacing-4);
+ }
+
+ [data-fs-order-summary] {
+ --fs-order-summary-row-gap : var(--fs-grid-gap-0);
+
+ padding-top: var(--fs-spacing-4);
+ margin-bottom: var(--fs-spacing-3);
+ border-top: var(--fs-border-width) solid var(--fs-border-color);
+ }
+ }
+
+ [data-fs-cart-item] {
+ --fs-cart-item-border-width : 0;
+
+ [data-fs-cart-item-content] {
+ padding-bottom: var(--fs-spacing-4);
+ padding-left: 0;
+ }
+
+ [data-quantity-selector-input] {
+ border-color: var(--fs-border-color);
+ border-top-left-radius: var(--fs-border-radius-pill);
+ border-top-right-radius: var(--fs-border-radius-pill);
+ }
+ }
+
+ [data-fs-cart-sidebar-list] li {
+ padding-bottom: var(--fs-spacing-4);
+ &:not(:only-child) { border-bottom: var(--fs-border-width) solid var(--fs-border-color); }
+ }
+
+ ///////////////////
+
+ .text__title-section {
+ font-size: var(--fs-text-size-6);
+ font-weight: var(--fs-text-weight-semibold);
+ letter-spacing: -1.2px;
+ }
}
}
diff --git a/yarn.lock b/yarn.lock
index 17348b4f..1eb3b96c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -950,10 +950,9 @@
resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz#786c5f41f043b07afb1af37683d7c33668858f6d"
integrity sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==
-"@faststore/api@^3.0.21":
- version "3.0.21"
- resolved "https://registry.yarnpkg.com/@faststore/api/-/api-3.0.21.tgz#90635401c7eb03f025ddac2dc8b6faaaa9698449"
- integrity sha512-tqplu+FimX0tGbCWL8sEOHDkQdibmZKYwpDguoI5sGiv/j3+UrGBxRLQMuFVRunOD2mmT64CW6PPtahwliQjYA==
+"@faststore/api@https://pkg.csb.dev/vtex/faststore/commit/ad406fa5/@faststore/api":
+ version "3.0.23"
+ resolved "https://pkg.csb.dev/vtex/faststore/commit/ad406fa5/@faststore/api#78f9002d298e49e94c37580e0a61ca15f10ec6cf"
dependencies:
"@envelop/on-resolve" "^2.0.6"
"@graphql-tools/load-files" "^7.0.0"
@@ -982,26 +981,25 @@
fs-extra "^10.1.0"
path "^0.12.7"
-"@faststore/components@^3.0.7":
- version "3.0.7"
- resolved "https://registry.yarnpkg.com/@faststore/components/-/components-3.0.7.tgz#371cb819cca59e764ae05c0dc7602f0550b848da"
- integrity sha512-vWhYfZWJaK8h4J4qlGXa+duWUFbbD0iQAfw4uBLqEqfffV0BBnUQGGyyFwsowshx0rJnrEQQXvFH5bIHvm6bKw==
+"@faststore/components@https://pkg.csb.dev/vtex/faststore/commit/ad406fa5/@faststore/components":
+ version "3.0.23"
+ uid "0143ee0c051589bab3d6267250ef8e698ed2f7e6"
+ resolved "https://pkg.csb.dev/vtex/faststore/commit/ad406fa5/@faststore/components#0143ee0c051589bab3d6267250ef8e698ed2f7e6"
-"@faststore/core@^3.0.22":
- version "3.0.22"
- resolved "https://registry.yarnpkg.com/@faststore/core/-/core-3.0.22.tgz#9f3ecd94c45e48412bbb2253c50cc312d94d24a2"
- integrity sha512-ZfPyIYWfyRkUke5G2W1qfzgpq6RGLAvNAVt78Pew2kqUcM6AqFPhzHfBuTk3k83k5vOpAczbgH52wVcq7fYe1Q==
+"@faststore/core@https://pkg.csb.dev/vtex/faststore/commit/ad406fa5/@faststore/core":
+ version "3.0.23"
+ resolved "https://pkg.csb.dev/vtex/faststore/commit/ad406fa5/@faststore/core#e64e86129464dd3898d5d71db299e99334c8377c"
dependencies:
"@builder.io/partytown" "^0.6.1"
"@envelop/core" "^1.2.0"
"@envelop/graphql-jit" "^1.1.1"
"@envelop/parser-cache" "^2.2.0"
"@envelop/validation-cache" "^2.2.0"
- "@faststore/api" "^3.0.21"
- "@faststore/components" "^3.0.7"
- "@faststore/graphql-utils" "^3.0.13"
- "@faststore/sdk" "^3.0.7"
- "@faststore/ui" "^3.0.7"
+ "@faststore/api" "https://pkg.csb.dev/vtex/faststore/commit/ad406fa5/@faststore/api"
+ "@faststore/components" "https://pkg.csb.dev/vtex/faststore/commit/ad406fa5/@faststore/components"
+ "@faststore/graphql-utils" "https://pkg.csb.dev/vtex/faststore/commit/ad406fa5/@faststore/graphql-utils"
+ "@faststore/sdk" "https://pkg.csb.dev/vtex/faststore/commit/ad406fa5/@faststore/sdk"
+ "@faststore/ui" "https://pkg.csb.dev/vtex/faststore/commit/ad406fa5/@faststore/ui"
"@graphql-codegen/cli" "^3.3.1"
"@graphql-codegen/client-preset" "^4.1.0"
"@graphql-codegen/typescript" "^3.0.4"
@@ -1038,29 +1036,26 @@
tsx "^4.6.2"
typescript "4.7.3"
-"@faststore/graphql-utils@^3.0.13":
+"@faststore/graphql-utils@https://pkg.csb.dev/vtex/faststore/commit/ad406fa5/@faststore/graphql-utils":
version "3.0.13"
- resolved "https://registry.yarnpkg.com/@faststore/graphql-utils/-/graphql-utils-3.0.13.tgz#b4c13cd265bd7fc13c4fa2c65e240d0b84a4c4eb"
- integrity sha512-oR1PqgbbDdw1zTNFDD8pq28IQ/m1HqTSnrwE1T4Vq0BQcCPn9hyXVlNAThPnMAQXcDvG9OL68xu03thndZnCyA==
+ resolved "https://pkg.csb.dev/vtex/faststore/commit/ad406fa5/@faststore/graphql-utils#0bf8bc1b805e4346d10a88b188eaebe519a1195b"
"@faststore/lighthouse@^3.0.7":
version "3.0.7"
resolved "https://registry.yarnpkg.com/@faststore/lighthouse/-/lighthouse-3.0.7.tgz#428e4ee7b7dd1dbca98539a9d52bc77f12508a33"
integrity sha512-W1Kgdjk1MP0GmtiWPilcwnJdglWTy/uoMEVPZav2LDtcRdrbGzE6uKYdV2+XebLokNWKr+cg6DbKopSL8aU/xQ==
-"@faststore/sdk@^3.0.7":
+"@faststore/sdk@https://pkg.csb.dev/vtex/faststore/commit/ad406fa5/@faststore/sdk":
version "3.0.7"
- resolved "https://registry.yarnpkg.com/@faststore/sdk/-/sdk-3.0.7.tgz#9da1546d684643c75478b38c7bd8f7bc3533cf4b"
- integrity sha512-t0VkHuCFKF6cSj2/WBpdEWKJ4O0Cxpkp+RjgqLgL7exWnGwkocVeFQV8Yr0xO+kSzgjG7Lq1KVegkak/FFxlXA==
+ resolved "https://pkg.csb.dev/vtex/faststore/commit/ad406fa5/@faststore/sdk#94ba652ca8a7ecbf67328159164d6772cc443344"
dependencies:
idb-keyval "^5.1.3"
-"@faststore/ui@^3.0.7":
- version "3.0.7"
- resolved "https://registry.yarnpkg.com/@faststore/ui/-/ui-3.0.7.tgz#516d5e4806c49521b87e5840655a8d7ede72e381"
- integrity sha512-NA0S9Mu5K17dP/cJ2RSI1ukn4e/0PyLZDGbmjovNnNTTXNU5pAEza599M7pCLLHXQnz1Y2vc4xZ4Sm+E5iuZEw==
+"@faststore/ui@https://pkg.csb.dev/vtex/faststore/commit/ad406fa5/@faststore/ui":
+ version "3.0.23"
+ resolved "https://pkg.csb.dev/vtex/faststore/commit/ad406fa5/@faststore/ui#5a019d9be848f60a0d5a00163cf08a7fb25314fc"
dependencies:
- "@faststore/components" "^3.0.7"
+ "@faststore/components" "https://pkg.csb.dev/vtex/faststore/commit/ad406fa5/@faststore/components"
include-media "^1.4.10"
modern-normalize "^1.1.0"
react-swipeable "^7.0.0"