@faststore/core 22.42.6

package/src/stories/soft-blue.stories.mdx

@@ -0,0 +1,56 @@
+import { Description, Meta } from '@storybook/addon-docs'
+
+import { SectionList, SectionItem } from 'src/../.storybook/components'
+
+<Meta
+  title="Theming/Themes/Soft Blue"
+  parameters={{ options: { showToolbar: false } }}
+/>
+
+<header>
+
+# Soft Blue
+
+A basic theme created for testing purposes.
+
+</header>
+
+<section className="sbdocs-section-theme">
+ <div className="sbdocs-section-theme-img">
+   <img
+    src="https://vtexhelp.vtexassets.com/assets/docs/src/soft-blue___b51efd8dd7623f9493efd77180ffc618.png"
+  />
+ </div>
+
+  <article>
+
+## Use `soft-blue` as your theme
+
+1. Import `soft-blue.scss` file on `src/pages/_app.tsx`
+
+```jsx
+import '../styles/themes/soft-blue.scss'
+```
+
+2. Go to `store.config.js` and change the `theme` to your file's name:
+
+```js
+// Theming
+theme: 'soft-blue',
+```
+
+3. Add the [Lato](https://fonts.google.com/specimen/Lato?query=lato) font on `src/fonts/WebFonts.tsx`
+
+```tsx
+function WebFonts() {
+  return (
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap"
+    />
+  )
+}
+```
+
+  </article>
+</section>

package/src/stories/spacing.stories.mdx

@@ -0,0 +1,38 @@
+import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs'
+import '/.storybook/storybook.css'
+
+import {
+  TokenTable,
+  TokenRow,
+  TokenDivider,
+} from 'src/../.storybook/components'
+
+<Meta
+  title="Global Tokens/Spacing"
+  parameters={{ options: { showToolbar: false } }}
+/>
+
+<header>
+
+# Spacing
+
+All tokens used for spacings on the store: `padding`, `margins` and `sizes`. It's also used as base for grid tokens.
+
+</header>
+
+<TokenTable title="Global Token" description="Value">
+  <TokenRow token="--fs-spacing-0" value=".25rem" />
+  <TokenRow token="--fs-spacing-1" value=".5rem" />
+  <TokenRow token="--fs-spacing-2" value=".75rem" />
+  <TokenRow token="--fs-spacing-3" value="1rem" />
+  <TokenRow token="--fs-spacing-4" value="1.5rem" />
+  <TokenRow token="--fs-spacing-5" value="2rem" />
+  <TokenRow token="--fs-spacing-6" value="2.5rem" />
+  <TokenRow token="--fs-spacing-7" value="3rem" />
+  <TokenRow token="--fs-spacing-8" value="3.5rem" />
+  <TokenRow token="--fs-spacing-9" value="4rem" />
+  <TokenRow token="--fs-spacing-10" value="4.5rem" />
+  <TokenRow token="--fs-spacing-11" value="5rem" />
+  <TokenRow token="--fs-spacing-12" value="5.5rem" />
+  <TokenRow token="--fs-spacing-13" value="6rem" />
+</TokenTable>

package/src/stories/typography.stories.mdx

@@ -0,0 +1,224 @@
+import { Canvas, Meta, Typeset } from '@storybook/addon-docs'
+
+import {
+  TokenTable,
+  TokenRow,
+  TokenDivider,
+} from 'src/../.storybook/components'
+
+<Meta
+  title="Global Tokens/Typography"
+  parameters={{ options: { showToolbar: false } }}
+/>
+
+export const typography = {
+  type: {
+    primary: '-apple-system, system-ui, BlinkMacSystemFont, sans-serif',
+  },
+  weight: {
+    regular: '400',
+    bold: '700',
+    extrabold: '800',
+    black: '900',
+  },
+  sizeMob: {
+    s1: 12,
+    s2: 14,
+    s3: 16,
+    m1: 18,
+    m2: 20,
+    m3: 23,
+    l1: 26,
+    l2: 29,
+    l3: 33,
+  },
+  sizeDesk: {
+    s1: 12,
+    s2: 14,
+    s3: 16,
+    m1: 20,
+    m2: 25,
+    m3: 31,
+    l1: 39,
+    l2: 48,
+    l3: 61,
+  },
+}
+
+export const SampleText =
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
+
+<header className="sbdocs-typography">
+
+# Typography
+
+A standard scale and basic definitions for your text: `font family`,`weight` and `sizes`.
+
+</header>
+
+## Add a custom font
+
+To set up a new font, follow the steps:
+
+1. Go to `src/fonts/WebFonts` and replace its content with the `<link>` of your font-family of choice
+
+```tsx
+function WebFonts() {
+  return (
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;700&display=swap"
+    />
+  )
+}
+```
+
+2. Overwrite the token `--fs-text-face-body` on your `new-theme.scss` theme file
+
+```scss
+--fs-text-face-body: 'Raleway', sans-serif;
+```
+
+We recommend the usage of [GoogleFonts](https://fonts.google.com/).
+
+---
+
+## Font Family
+
+<TokenTable title="Global Token" description="Value">
+  <TokenRow
+    token="--fs-text-face-body"
+    value="-apple-system, system-ui, BlinkMacSystemFont, sans-serif"
+  />
+  <TokenRow token="--fs-text-face-title" value="var(--fs-text-face-body)" />
+</TokenTable>
+
+---
+
+## Weights
+
+<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-bold" value="700" />
+  <TokenRow token="--fs-text-weight-black" value="900" />
+</TokenTable>
+
+---
+
+## Typography Scale
+
+Use a type scale to add rhythm to your typography and ensure consistency throughout the project.
+
+Access https://type-scale.com and pick a scale that suits the store's branding.
+
+<section className="sbdocs-section-text-scale">
+  <div>
+    <h3 className="sbdocs sbdocs-h3">Desktop Scale</h3>
+    <Typeset
+      fontSizes={[
+        Number(typography.sizeDesk.s1),
+        Number(typography.sizeDesk.s2),
+        Number(typography.sizeDesk.s3),
+        Number(typography.sizeDesk.m1),
+        Number(typography.sizeDesk.m2),
+        Number(typography.sizeDesk.m3),
+        Number(typography.sizeDesk.l1),
+        Number(typography.sizeDesk.l2),
+        Number(typography.sizeDesk.l3),
+      ]}
+      fontWeight={typography.weight.regular}
+      sampleText={SampleText}
+      fontFamily={typography.type.primary}
+    />
+  </div>
+  <div>
+    <h3 className="sbdocs sbdocs-h3">Mobile Scale</h3>
+    <Typeset
+      fontSizes={[
+        Number(typography.sizeMob.s1),
+        Number(typography.sizeMob.s2),
+        Number(typography.sizeMob.s3),
+        Number(typography.sizeMob.m1),
+        Number(typography.sizeMob.m2),
+        Number(typography.sizeMob.m3),
+        Number(typography.sizeMob.l1),
+        Number(typography.sizeMob.l2),
+        Number(typography.sizeMob.l3),
+      ]}
+      fontWeight={typography.weight.regular}
+      sampleText={SampleText}
+      fontFamily={typography.type.primary}
+    />
+  </div>
+</section>
+
+<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" />
+  <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))"
+  />
+  <TokenRow
+    token="--fs-text-size-4"
+    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))"
+  />
+  <TokenRow
+    token="--fs-text-size-6"
+    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))"
+  />
+  <TokenRow
+    token="--fs-text-size-8"
+    value="calc(var(--fs-text-size-7) * var(--fs-scale))"
+  />
+</TokenTable>
+
+---
+
+## Semantical tokens
+
+### 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-product"
+    value="var(--fs-text-size-4)"
+  />
+  <TokenRow
+    token="--fs-text-size-title-section"
+    value="var(--fs-text-size-4)"
+  />
+  <TokenRow
+    token="--fs-text-size-title-subsection"
+    value="var(--fs-text-size-4)"
+  />
+  <TokenRow token="--fs-text-size-title-mini" value="var(--fs-text-size-4)" />
+  <TokenDivider />
+  <TokenRow token="--fs-text-size-lead" value="var(--fs-text-size-3)" />
+  <TokenRow token="--fs-text-size-menu" value="var(--fs-text-size-base)" />
+  <TokenRow token="--fs-text-size-body" value="var(--fs-text-size-base)" />
+  <TokenRow token="--fs-text-size-legend" value="var(--fs-text-size-1)" />
+  <TokenRow token="--fs-text-size-tiny" value="var(--fs-text-size-0)" />
+</TokenTable>
+
+### Max Lines
+
+<TokenTable title="Global Token" description="Value">
+  <TokenRow token="--fs-text-max-lines" value="2" />
+</TokenTable>

package/src/styles/global/components.scss

@@ -0,0 +1,5 @@
+// Sections
+@import "src/components/sections/Section/section.scss";
+
+// UI
+@import "src/components/ui/SlideOver/overlay.scss";

package/src/styles/global/layout.scss

@@ -0,0 +1,80 @@
+// ----------------------------------------------------------
+// GLOBAL STYLES
+// Layout
+// ----------------------------------------------------------
+
+@import "src/styles/scaffold";
+
+body {
+  --fs-body-bkg: var(--fs-color-body-bkg);
+
+  min-height: 100vh;
+  color: var(--fs-color-text);
+  background: var(--fs-body-bkg);
+}
+
+main,
+.layout__main {
+  display: flex;
+  flex-wrap: wrap;
+  background: var(--fs-body-bkg);
+}
+
+.layout__section {
+  padding-bottom: var(--fs-spacing-4);
+  margin-top: var(--fs-spacing-4);
+
+  @include media(">=notebook") {
+    padding-bottom: var(--fs-grid-padding);
+    margin-top: var(--fs-grid-padding);
+  }
+}
+
+.layout__content-full {
+  width: 100%;
+  padding-top: var(--fs-spacing-4);
+  padding-bottom: var(--fs-spacing-4);
+
+  @include media(">=notebook") {
+    padding-top: var(--fs-grid-padding);
+    padding-bottom: var(--fs-grid-padding);
+  }
+}
+
+.layout__content {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: var(--fs-grid-breakpoint-notebook);
+  padding-right: var(--fs-grid-padding);
+  padding-left: var(--fs-grid-padding);
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.no-scroll {
+  overflow: hidden;
+  touch-action: none;
+}
+
+// Helper class
+.display-mobile {
+  @include media(">=notebook") {
+    display: none;
+    visibility: hidden;
+  }
+}
+
+// Helper class
+.hidden-mobile {
+  @include media("<notebook") {
+    display: none;
+    visibility: hidden;
+  }
+}
+
+// Image
+[data-fs-image] {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}

package/src/styles/global/resets.scss

@@ -0,0 +1,48 @@
+// ----------------------------------------------------------
+// GLOBAL STYLES
+// Resets
+// ----------------------------------------------------------
+
+@import "../vendors/modern-normalize.css";
+
+// Reset default styles
+body {
+  padding: 0;
+  margin: 0;
+}
+
+// Remove all of the default margins
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+// Remove heading elements default style
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+// Remove list elements default style
+ol,
+ul {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}

package/src/styles/global/storybook-components.scss

@@ -0,0 +1,5 @@
+// Sections
+@import "src/components/sections/Section/section.scss";
+
+// UI
+@import "src/components/ui/SlideOver/overlay.scss";