diff --git a/apps/site/pages/components/molecules/input-field.mdx b/apps/site/pages/components/molecules/input-field.mdx
index a9c8cf8e3e..12c4b4f187 100644
--- 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
-
+
-
+
+
+
+#### Button
+
+
+
### Variants
diff --git a/apps/site/pages/components/molecules/order-summary.mdx b/apps/site/pages/components/molecules/order-summary.mdx
index 9bc0e655ef..bb0c831ba9 100644
--- 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)"
/>
+
+
diff --git a/apps/site/pages/components/molecules/toast.mdx b/apps/site/pages/components/molecules/toast.mdx
index 1480bd4efd..11624dcc69 100644
--- 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)"
/>
-
+
diff --git a/apps/site/pages/components/organisms/payment-methods.mdx b/apps/site/pages/components/organisms/payment-methods.mdx
index 14c552e8b1..c94eb2c530 100644
--- 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
```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' },
]
Payment Methods} flagList={flags} />
@@ -101,14 +103,16 @@ Follow the instructions in the [Importing FastStore UI component styles](/docs/c
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)"
/>
+
+
+
@@ -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 = [
-
-
+
+
+
@@ -131,8 +121,8 @@ export const mobileList = [
### Sizes
-
-
+
+
tag for your font-family of choice */}
);
@@ -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
index 119fe89457..854ab681d5 100644
--- 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
- } name="Visa" />
+ } name="Amex" />
+ } name="ApplePay" />
+ } name="EloCard" />
} name="Diners" />
+ } name="GooglePay" />
} name="Mastercard" />
- } name="EloCard" />
} name="PayPal" />
+ } name="Pix" />
} name="Stripe" />
- } name="GooglePay" />
- } name="ApplePay" />
+ } name="Visa" />
### Social
diff --git a/apps/site/public/icons.svg b/apps/site/public/icons.svg
index 14ae64a260..50a10851c5 100644
--- a/apps/site/public/icons.svg
+++ b/apps/site/public/icons.svg
@@ -1,65 +1,129 @@
diff --git a/packages/components/src/organisms/PaymentMethods/PaymentMethods.tsx b/packages/components/src/organisms/PaymentMethods/PaymentMethods.tsx
index f7d2ed8510..5f5977b631 100644
--- a/packages/components/src/organisms/PaymentMethods/PaymentMethods.tsx
+++ b/packages/components/src/organisms/PaymentMethods/PaymentMethods.tsx
@@ -60,7 +60,7 @@ const PaymentMethods = forwardRef(
data-fs-payment-methods-flag
key={`fs-payment-method-${index}-${text}`}
>
-
+
{text && }
))}
diff --git a/packages/core/public/icons.svg b/packages/core/public/icons.svg
index a05940cd63..f0c616e74d 100644
--- a/packages/core/public/icons.svg
+++ b/packages/core/public/icons.svg
@@ -1,64 +1,128 @@
diff --git a/packages/core/src/components/sections/ProductGallery/section.module.scss b/packages/core/src/components/sections/ProductGallery/section.module.scss
index a01aae0397..10300eff45 100644
--- a/packages/core/src/components/sections/ProductGallery/section.module.scss
+++ b/packages/core/src/components/sections/ProductGallery/section.module.scss
@@ -30,6 +30,7 @@
@import "@faststore/ui/src/components/molecules/LinkButton/styles.scss";
@import "@faststore/ui/src/components/molecules/ProductCard/styles.scss";
@import "@faststore/ui/src/components/molecules/ProductCardSkeleton/styles";
+ @import "@faststore/ui/src/components/molecules/ProductPrice/styles.scss";
@import "@faststore/ui/src/components/molecules/SelectField/styles.scss";
@import "@faststore/ui/src/components/organisms/EmptyState/styles.scss";
@import "@faststore/ui/src/components/organisms/Filter/styles.scss";
diff --git a/packages/core/src/fonts/WebFonts.tsx b/packages/core/src/fonts/WebFonts.tsx
index 4fdff57f81..f4bc0d041c 100644
--- a/packages/core/src/fonts/WebFonts.tsx
+++ b/packages/core/src/fonts/WebFonts.tsx
@@ -6,7 +6,7 @@ function WebFonts() {
{/* Add a tag for your font-family of choice */}
{/* */}
)
diff --git a/packages/ui/src/components/molecules/InputField/styles.scss b/packages/ui/src/components/molecules/InputField/styles.scss
index a3940a08dd..a0f5b90efa 100644
--- a/packages/ui/src/components/molecules/InputField/styles.scss
+++ b/packages/ui/src/components/molecules/InputField/styles.scss
@@ -18,6 +18,9 @@
--fs-input-field-label-color : var(--fs-color-text-light);
--fs-input-field-label-size : var(--fs-text-size-tiny);
+ // Button
+ --fs-input-field-button-height : var(--fs-control-tap-size);
+
// Error
--fs-input-field-error-message-size : var(--fs-text-size-legend);
--fs-input-field-error-message-line-height : 1.1;
@@ -41,17 +44,18 @@
display: flex;
flex-flow: column;
- input,
- label {
+ [data-fs-input],
+ [data-fs-label] {
transition: var(--fs-input-field-transition-property) var(--fs-input-field-transition-timing) var(--fs-input-field-transition-function);
}
- input {
+ [data-fs-input] {
+ --fs-input-padding: var(--fs-input-field-padding);
padding: var(--fs-input-field-padding);
color: var(--fs-input-field-color);
&:placeholder-shown + label {
- top: calc(1.5 * (var(--fs-input-field-size) / 2));
+ top: calc(50% - (var(--fs-input-field-size) / 2));
overflow: hidden;
}
@@ -76,11 +80,11 @@
}
}
- label {
+ [data-fs-label] {
position: absolute;
padding: var(--fs-input-field-label-padding);
font-size: var(--fs-input-field-size);
- line-height: 1.5;
+ line-height: var(--fs-input-field-size);
color: var(--fs-input-field-label-color);
}
@@ -89,11 +93,12 @@
// --------------------------------------------------------
&[data-fs-input-field-error="true"] {
- input {
+ [data-fs-input] {
border-color: var(--fs-input-field-error-border-color);
-
- @include input-focus-ring($outline: #{var(--fs-input-field-error-focus-ring)},
- $border: #{var(--fs-input-field-error-border-color)});
+ @include input-focus-ring(
+ $outline: #{var(--fs-input-field-error-focus-ring)},
+ $border: #{var(--fs-input-field-error-border-color)}
+ );
&:hover:not(:disabled):not(:focus-visible):not(:focus) {
border-color: var(--fs-input-field-error-border-color);
@@ -112,14 +117,13 @@
&[data-fs-input-field-actionable="true"] {
min-width: rem(250px);
- input {
- padding-right: var(--fs-spacing-13);
- }
+ [data-fs-input] { padding-right: var(--fs-spacing-13); }
[data-fs-button] {
position: absolute;
top: 0;
right: 0;
+ height: var(--fs-input-field-button-height);
[data-fs-button-wrapper]::before {
position: absolute;
diff --git a/packages/ui/src/components/molecules/OrderSummary/styles.scss b/packages/ui/src/components/molecules/OrderSummary/styles.scss
index 618f4635cf..1e04684a9c 100644
--- a/packages/ui/src/components/molecules/OrderSummary/styles.scss
+++ b/packages/ui/src/components/molecules/OrderSummary/styles.scss
@@ -6,6 +6,7 @@
// Default properties
--fs-order-summary-padding : var(--fs-spacing-3);
--fs-order-summary-margin-bottom : var(--fs-spacing-2);
+ --fs-order-summary-row-gap : 0;
--fs-order-summary-discount-text-color : var(--fs-color-success-text);
@@ -20,7 +21,10 @@
// --------------------------------------------------------
// Structural Styles
// --------------------------------------------------------
+ display: flex;
+ flex-direction: column;
padding: var(--fs-order-summary-padding);
+ row-gap: var(--fs-order-summary-row-gap);
li {
display: flex;
diff --git a/packages/ui/src/components/molecules/ProductCard/styles.scss b/packages/ui/src/components/molecules/ProductCard/styles.scss
index c194b643d3..e968b01be2 100644
--- a/packages/ui/src/components/molecules/ProductCard/styles.scss
+++ b/packages/ui/src/components/molecules/ProductCard/styles.scss
@@ -39,7 +39,8 @@
--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-border-color: var(--fs-color-neutral-1);
--fs-product-card-out-of-stock-img-opacity : .5;
// Taxes label
@@ -168,7 +169,8 @@
// --------------------------------------------------------
&[data-fs-product-card="out-of-stock"] {
- --fs-product-card-bkg-color : var(--fs-product-card-out-of-stock-bkg-color);
+ --fs-product-card-bkg-color : var(--fs-product-card-out-of-stock-bkg-color);
+ --fs-product-card-border-color : var(--fs-product-card-out-of-stock-border-color);
[data-fs-product-card-image] { opacity: var(--fs-product-card-out-of-stock-img-opacity); }
diff --git a/packages/ui/src/components/molecules/QuantitySelector/styles.scss b/packages/ui/src/components/molecules/QuantitySelector/styles.scss
index 49a8c87033..55dc72e09c 100644
--- 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] {
diff --git a/packages/ui/src/components/molecules/Toast/styles.scss b/packages/ui/src/components/molecules/Toast/styles.scss
index 96703c233d..2dd22bfe19 100644
--- a/packages/ui/src/components/molecules/Toast/styles.scss
+++ b/packages/ui/src/components/molecules/Toast/styles.scss
@@ -32,7 +32,7 @@
// Title
--fs-toast-title-size : var(--fs-text-size-body);
--fs-toast-title-weight : var(--fs-text-weight-bold);
- --fs-toast-title-line-height : var(--fs-scale);
+ --fs-toast-title-line-height : 1.2;
--fs-toast-title-margin-left : var(--fs-spacing-3);
// Message
diff --git a/packages/ui/src/components/organisms/PaymentMethods/styles.scss b/packages/ui/src/components/organisms/PaymentMethods/styles.scss
index 2aa787e578..a5376d0ea1 100644
--- a/packages/ui/src/components/organisms/PaymentMethods/styles.scss
+++ b/packages/ui/src/components/organisms/PaymentMethods/styles.scss
@@ -13,6 +13,7 @@
// Flag
--fs-payment-methods-flag-width : var(--fs-spacing-5);
--fs-payment-methods-flag-height : var(--fs-spacing-4);
+ --fs-payment-methods-flag-bkg-color : var(--fs-color-neutral-0);
--fs-payment-methods-flag-border-width : var(--fs-border-width);
--fs-payment-methods-flag-border-color : var(--fs-color-neutral-3);
--fs-payment-methods-flag-border-radius : var(--fs-border-radius-small);
@@ -44,21 +45,20 @@
justify-content: space-between;
margin-top: var(--fs-payment-methods-flags-margin-top);
- li {
- display: flex;
- place-content: center;
- }
-
@include media("