Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat: Design System Unification (2) #2390

Merged
merged 18 commits into from
Jul 29, 2024
Merged

Feat: Design System Unification (2) #2390

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
fcc1fbb
feat: Add new font weights
renatamottam Sep 27, 2023
913c3a7
feat: Adds new typography scale
renatamottam Sep 28, 2023
a827cdf
feat: Add `Inter` as proposed font family
renatamottam Sep 28, 2023
b238701
chore: Organizes icons files
renatamottam Oct 2, 2023
2583ebb
fix: Updates payment methods icons
renatamottam Oct 2, 2023
3169bca
fix: Updates payment methods icons order
renatamottam Oct 2, 2023
3500c2b
fix: Adds new payment methods icons
renatamottam Oct 2, 2023
10138a5
fix: removes extra empty line
renatamottam Nov 21, 2023
9d2a814
fix: Payment Methods sizing
renatamottam Nov 21, 2023
80661f9
feat: Creates new theme for VTEX Way
renatamottam Mar 15, 2024
51edea6
fix: `InputField` label position
renatamottam Mar 19, 2024
bd17d0b
fix: `ProductCard` OutOfStock styles
renatamottam Mar 19, 2024
62b764a
fix: Removes new theme
renatamottam Mar 19, 2024
9152972
fix: `RegionModal` input margin
renatamottam Mar 20, 2024
ac4407b
feat: Improve `OrderSummary` to use row gap
renatamottam Mar 20, 2024
654425a
fix: `InputField` button
renatamottam Apr 26, 2024
4051e7f
feat: Adds missing bkg color on `PaymentMethod` flag
renatamottam Jul 22, 2024
eddf31b
fix: adds missing style import on `ProductGallery`
renatamottam Jul 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 9 additions & 3 deletions apps/site/pages/components/molecules/input-field.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,13 +205,19 @@ export const propsInputField = [
#### Label

<TokenTable>
<TokenRow token="--fs-input-label-padding" value="0 var(--fs-spacing-2)" />
<TokenRow token="--fs-input-field-label-padding" value="0 var(--fs-spacing-2)" />
<TokenRow
token="--fs-input-label-color"
token="--fs-input-field-label-color"
value="var(--fs-color-text-light)"
isColor
/>
<TokenRow token="--fs-input-label-size" value="var(--fs-text-size-tiny)" />
<TokenRow token="--fs-input-field-label-size" value="var(--fs-text-size-tiny)" />
</TokenTable>

#### Button

<TokenTable>
<TokenRow token="--fs-input-field-button-height" value="var(--fs-control-tap-size)" />
</TokenTable>

### Variants
Expand Down
4 changes: 4 additions & 0 deletions apps/site/pages/components/molecules/order-summary.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)"
/>
<TokenRow
token="--fs-order-summary-row-gap"
value="0"
/>
<TokenDivider />
<TokenRow
token="--fs-order-summary-discount-text-color"
Expand Down
5 changes: 5 additions & 0 deletions apps/site/pages/components/molecules/product-card.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -551,6 +551,11 @@ export const outOfStock =
value="var(--fs-color-disabled-bkg)"
isColor
/>
<TokenRow
token="--fs-product-card-out-of-stock-border-color"
value="var(--fs-color-neutral-1)"
isColor
/>
<TokenRow token="--fs-product-card-out-of-stock-img-opacity" value=".5" />
</TokenTable>

Expand Down
2 changes: 1 addition & 1 deletion apps/site/pages/components/molecules/toast.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -315,7 +315,7 @@ export const propsToast = [
token="--fs-toast-title-weight"
value="var(--fs-text-weight-bold)"
/>
<TokenRow token="--fs-toast-title-line-height" value="var(--fs-scale)" />
<TokenRow token="--fs-toast-title-line-height" value="1.2" />
<TokenRow token="--fs-toast-title-margin-left" value="var(--fs-spacing-3)" />
</TokenTable>

Expand Down
25 changes: 17 additions & 8 deletions apps/site/pages/components/organisms/payment-methods.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,14 +84,16 @@ Follow the instructions in the [Importing FastStore UI component styles](/docs/c
<Tab>
```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' },
]

<PaymentMethods title={<h3>Payment Methods</h3>} flagList={flags} />
Expand All @@ -101,14 +103,16 @@ Follow the instructions in the [Importing FastStore UI component styles](/docs/c
</Tabs>

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' },
]

---
Expand Down Expand Up @@ -177,6 +181,11 @@ export const propsFlag = [
token="--fs-payment-methods-flag-height"
value="var(--fs-spacing-4)"
/>
<TokenRow
token="--fs-payment-methods-flag-bkg-color"
value="var(--fs-color-neutral-0)"
isColor
/>
<TokenRow
token="--fs-payment-methods-flag-border-width"
value="var(--fs-border-width)"
Expand Down
74 changes: 32 additions & 42 deletions apps/site/pages/docs/global-tokens/typography.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,8 @@ A standard scale and basic definitions for your text: `font family`,`weight` and
<TokenTable title="Global Token" description="Value">
<TokenRow token="--fs-text-weight-light" value="300" />
<TokenRow token="--fs-text-weight-regular" value="400" />
<TokenRow token="--fs-text-weight-medium" value="500" />
<TokenRow token="--fs-text-weight-semibold" value="600" />
<TokenRow token="--fs-text-weight-bold" value="700" />
<TokenRow token="--fs-text-weight-black" value="900" />
</TokenTable>
Expand All @@ -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
Expand All @@ -92,35 +78,39 @@ export const mobileList = [

<TokenTable title="Global Token" description="Value">
<TokenRow token="--fs-text-size-base" value="16px" />
<TokenRow token="--fs-text-scale-desktop" value="1.25" />
<TokenRow token="--fs-text-scale-mobile" value="1.13" />
<TokenRow token="--fs-text-scale-desktop" value="4px" />
<TokenRow token="--fs-text-scale-mobile" value="2px" />
<TokenDivider />
<TokenRow token="--fs-text-size-0" value="12px" />
<TokenRow token="--fs-text-size-1" value="14px" />
<TokenRow token="--fs-text-size-2" value="var(--fs-text-size-base)" />
<TokenRow
token="--fs-text-size-3"
value="calc(var(--fs-text-size-2) * var(--fs-scale))"
value="calc(var(--fs-text-size-2) + var(--fs-scale))"
/>
<TokenRow
token="--fs-text-size-4"
value="calc(var(--fs-text-size-3) * var(--fs-scale))"
value="calc(var(--fs-text-size-3) + var(--fs-scale))"
/>
<TokenRow
token="--fs-text-size-5"
value="calc(var(--fs-text-size-4) * var(--fs-scale))"
value="calc(var(--fs-text-size-4) + var(--fs-scale))"
/>
<TokenRow
token="--fs-text-size-6"
value="calc(var(--fs-text-size-5) * var(--fs-scale))"
value="calc(var(--fs-text-size-5) + var(--fs-scale))"
/>
<TokenRow
token="--fs-text-size-7"
value="calc(var(--fs-text-size-6) * var(--fs-scale))"
value="calc(var(--fs-text-size-6) + (var(--fs-scale) * 2))"
/>
<TokenRow
token="--fs-text-size-8"
value="calc(var(--fs-text-size-7) * var(--fs-scale))"
value="calc(var(--fs-text-size-7) + (var(--fs-scale) * 2))"
/>
<TokenRow
token="--fs-text-size-9"
value="calc(var(--fs-text-size-8) + (var(--fs-scale) * 2))"
/>
</TokenTable>

Expand All @@ -131,8 +121,8 @@ export const mobileList = [
### Sizes

<TokenTable title="Global Token" description="Value">
<TokenRow token="--fs-text-size-title-huge" value="var(--fs-text-size-7)" />
<TokenRow token="--fs-text-size-title-page" value="var(--fs-text-size-6)" />
<TokenRow token="--fs-text-size-title-huge" value="var(--fs-text-size-8)" />
<TokenRow token="--fs-text-size-title-page" value="var(--fs-text-size-7)" />
<TokenRow
token="--fs-text-size-title-product"
value="var(--fs-text-size-4)"
Expand Down Expand Up @@ -164,7 +154,7 @@ export const mobileList = [

## Adding a custom font

Using a custom font helps to keep a cohesive brand across your store.
Using a custom font helps to keep a cohesive brand across your store.
To maintain readability in your store, choose an easily readable font and the appropriate color and text size.
Follow the steps below to add a custom font to your store.

Expand All @@ -180,7 +170,7 @@ function WebFonts() {
{/* Add a <link> tag for your font-family of choice */}
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap"
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap"
/>
</>
);
Expand All @@ -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;
}
}
```
Expand Down
10 changes: 6 additions & 4 deletions apps/site/pages/docs/icons.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,14 +85,16 @@ You can find more details about the `Icon` component [here](/components/atoms/ic
### Payment Flags

<IconList>
<IconComponent icon={<Icon name="Visa" />} name="Visa" />
<IconComponent icon={<Icon name="Amex" />} name="Amex" />
<IconComponent icon={<Icon name="ApplePay" />} name="ApplePay" />
<IconComponent icon={<Icon name="EloCard" />} name="EloCard" />
<IconComponent icon={<Icon name="Diners" />} name="Diners" />
<IconComponent icon={<Icon name="GooglePay" />} name="GooglePay" />
<IconComponent icon={<Icon name="Mastercard" />} name="Mastercard" />
<IconComponent icon={<Icon name="EloCard" />} name="EloCard" />
<IconComponent icon={<Icon name="PayPal" />} name="PayPal" />
<IconComponent icon={<Icon name="Pix" />} name="Pix" />
<IconComponent icon={<Icon name="Stripe" />} name="Stripe" />
<IconComponent icon={<Icon name="GooglePay" />} name="GooglePay" />
<IconComponent icon={<Icon name="ApplePay" />} name="ApplePay" />
<IconComponent icon={<Icon name="Visa" />} name="Visa" />
</IconList>

### Social
Expand Down
Loading
Loading