feat: Creates new theme for VTEX Way

vtex · Mar 15, 2024 · b093ba3 · b093ba3
1 parent 36abd0c
commit b093ba3
Show file tree

Hide file tree

Showing 3 changed files with 154 additions and 3 deletions.
diff --git a/packages/core/src/customizations/src/themes/index.scss b/packages/core/src/customizations/src/themes/index.scss
@@ -1,3 +1,154 @@
 // ----------------------------------------------------------
-// Stores' custom themes will override this file
+// GLOBAL TOKENS
+// Custom Theme
 // ----------------------------------------------------------
+
+.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)
+  // --------------------------------------------------------
+
+  --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)
+  // --------------------------------------------------------
+
+  // --------------------------------------------------------
+  // Interactive Controls (UI Essentials)
+  // --------------------------------------------------------
+
+  // --------------------------------------------------------
+  // Refinements
+  // --------------------------------------------------------
+
+  // BORDERS
+  --fs-border-color                                     : var(--fs-color-neutral-2);
+
+  --fs-border-radius                                    : 4px;
+
+  // --------------------------------------------------------
+  // FS UI Components
+  // --------------------------------------------------------
+  .section {
+    // Add here the customizations for FastStore UI components
+
+    [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-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);
+    }
+
+    [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);
+
+      [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] {
+      --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;
+    }
+
+    [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-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);
+
+      [data-fs-product-details-section] {
+        padding-right: 0;
+        padding-left: 0;
+        border-right: none;
+        border-left: none;
+      }
+    }
+    .text__title-section { font-size: var(--fs-text-size-6); }
+  }
+}
diff --git a/packages/ui/src/components/molecules/ProductCard/styles.scss b/packages/ui/src/components/molecules/ProductCard/styles.scss
@@ -39,7 +39,7 @@
   --fs-product-card-price-size               : var(--fs-text-size-base);
 
   // Out Of Stock
-  --fs-product-card-out-of-stock-bkg-color   : var(--fs-color-disabled-bkg);
+  --fs-product-card-out-of-stock-bkg-color   : transparent;
   --fs-product-card-out-of-stock-img-opacity : .5;
 
   // Wide

diff --git a/packages/ui/src/components/molecules/QuantitySelector/styles.scss b/packages/ui/src/components/molecules/QuantitySelector/styles.scss
@@ -42,7 +42,6 @@
   justify-content: center;
   width: var(--fs-qty-selector-width);
   height: var(--fs-qty-selector-height);
-  border-radius: var(--fs-qty-selector-border-radius);
   box-shadow: var(--fs-qty-selector-shadow);
 
   [data-quantity-selector-input] {
@@ -53,6 +52,7 @@
     color: var(--fs-qty-selector-text-color);
     text-align: center;
     border: var(--fs-qty-selector-border-width) solid var(--fs-qty-selector-border-color);
+    border-radius: var(--fs-qty-selector-border-radius);
   }
 
   [data-quantity-selector-button] {