@faststore/ui 2.0.2-alpha.0 → 2.0.4-alpha.0

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.4-alpha.0](https://github.com/vtex/faststore/compare/v2.0.3-alpha.0...v2.0.4-alpha.0) (2022-12-07)
+
+
+### Chores
+
+* config faststore ui ([#1495](https://github.com/vtex/faststore/issues/1495)) ([ed5aa8f](https://github.com/vtex/faststore/commit/ed5aa8f83ab3d929dd47f30b1e171240e1c3c459))
+
+
+
+## 2.0.3-alpha.0 (2022-11-30)
+
+
+### Chores
+
+* Change from `patch` to `prepatch` release (alpha) ([#1523](https://github.com/vtex/faststore/issues/1523)) ([2f2c5b7](https://github.com/vtex/faststore/commit/2f2c5b77d2d71f887dad64a9488fabc4e6a29e07))
+
+
+
 ## [1.12.23](https://github.com/vtex/faststore/compare/v1.12.22...v1.12.23) (2022-11-04)
 
 

package/dist/assets/ShoppingCart.d.ts

@@ -1,3 +1,3 @@
-import type { FC } from 'react';
-declare const ShoppingCart: FC;
+/// <reference types="react" />
+declare const ShoppingCart: () => JSX.Element;
 export default ShoppingCart;

package/dist/assets/ShoppingCart.js.map

@@ -1 +1 @@
-{"version":3,"file":"ShoppingCart.js","sourceRoot":"","sources":["../../src/assets/ShoppingCart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,2BAA2B;AAC3B,MAAM,YAAY,GAAO,GAAG,EAAE,CAAC,CAC7B,6BACE,EAAE,EAAC,cAAc,EACjB,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,cAAc,EACnB,OAAO,EAAC,aAAa,EACrB,WAAW,EAAC,IAAI,EAChB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE;IAEV,8BAAM,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,GAAQ;IAClD,8BACE,CAAC,EAAC,8DAA8D,EAChE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GAChB;IACR,gCACE,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,KAAK,EACR,CAAC,EAAC,IAAI,EACN,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACd;IACV,gCACE,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,KAAK,EACR,CAAC,EAAC,IAAI,EACN,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACd;IACV,8BACE,CAAC,EAAC,iEAAiE,EACnE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GAChB,CACJ,CACP,CAAA;AAED,eAAe,YAAY,CAAA"}
+{"version":3,"file":"ShoppingCart.js","sourceRoot":"","sources":["../../src/assets/ShoppingCart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,2BAA2B;AAC3B,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,CACzB,6BACE,EAAE,EAAC,cAAc,EACjB,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,cAAc,EACnB,OAAO,EAAC,aAAa,EACrB,WAAW,EAAC,IAAI,EAChB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE;IAEV,8BAAM,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,GAAQ;IAClD,8BACE,CAAC,EAAC,8DAA8D,EAChE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GAChB;IACR,gCACE,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,KAAK,EACR,CAAC,EAAC,IAAI,EACN,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACd;IACV,gCACE,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,KAAK,EACR,CAAC,EAAC,IAAI,EACN,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACd;IACV,8BACE,CAAC,EAAC,iEAAiE,EACnE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GAChB,CACJ,CACP,CAAA;AAED,eAAe,YAAY,CAAA"}

package/dist/assets/X.d.ts

@@ -1,3 +1,3 @@
-import type { FC } from 'react';
-declare const X: FC;
+/// <reference types="react" />
+declare const X: () => JSX.Element;
 export default X;

package/dist/assets/X.js.map

@@ -1 +1 @@
-{"version":3,"file":"X.js","sourceRoot":"","sources":["../../src/assets/X.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,2BAA2B;AAC3B,MAAM,CAAC,GAAO,GAAG,EAAE,CAAC,CAClB,6BACE,EAAE,EAAC,GAAG,EACN,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,cAAc,EACnB,OAAO,EAAC,aAAa,EACrB,WAAW,EAAC,IAAI,EAChB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE;IAEV,8BAAM,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,GAAQ;IAClD,8BACE,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,KAAK,EACR,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GAChB;IACR,8BACE,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GAChB,CACJ,CACP,CAAA;AAED,eAAe,CAAC,CAAA"}
+{"version":3,"file":"X.js","sourceRoot":"","sources":["../../src/assets/X.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,2BAA2B;AAC3B,MAAM,CAAC,GAAG,GAAG,EAAE,CAAC,CACd,6BACE,EAAE,EAAC,GAAG,EACN,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,cAAc,EACnB,OAAO,EAAC,aAAa,EACrB,WAAW,EAAC,IAAI,EAChB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE;IAEV,8BAAM,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,GAAQ;IAClD,8BACE,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,KAAK,EACR,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GAChB;IACR,8BACE,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GAChB,CACJ,CACP,CAAA;AAED,eAAe,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/ui",
-  "version": "2.0.2-alpha.0",
+  "version": "2.0.4-alpha.0",
   "description": "A lightweight, framework agnostic component library for React",
   "author": "emersonlaurentino",
   "license": "MIT",
@@ -24,21 +24,10 @@
     "develop": "tsc --watch",
     "build": "tsc",
     "lint": "eslint src/**/*.{ts,tsx}",
-    "test": "tsdx test --passWithNoTests",
-    "storybook": "start-storybook -p 6006 --no-manager-cache",
+    "storybook": "start-storybook -p 6006",
     "size": "size-limit",
-    "analyze": "size-limit --why"
-  },
-  "jest": {
-    "collectCoverageFrom": [
-      "src/**/*.{ts,tsx}"
-    ],
-    "setupFilesAfterEnv": [
-      "<rootDir>/src/setupTests.ts"
-    ],
-    "modulePaths": [
-      "<rootDir>/src"
-    ]
+    "analyze": "size-limit --why",
+    "build-storybook": "build-storybook"
   },
   "size-limit": [
     {
@@ -47,8 +36,10 @@
     }
   ],
   "dependencies": {
+    "@faststore/components": "*",
     "@reach/popover": "^0.16.0",
-    "@storybook/addon-a11y": "^6.4.4",
+    "include-media": "^1.4.10",
+    "modern-normalize": "^1.1.0",
     "react-swipeable": "^7.0.0",
     "tabbable": "^5.2.1"
   },
@@ -57,33 +48,35 @@
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@faststore/shared": "^2.0.2-alpha.0",
-    "@faststore/styles": "^2.0.2-alpha.0",
+    "@babel/core": "^7.19.6",
+    "@faststore/shared": "^2.0.3-alpha.0",
+    "@faststore/styles": "^2.0.4-alpha.0",
     "@size-limit/preset-small-lib": "^7.0.8",
-    "@storybook/addon-actions": "^6.4.4",
-    "@storybook/addon-docs": "^6.4.4",
-    "@storybook/addon-essentials": "^6.4.4",
-    "@storybook/addon-links": "^6.4.4",
-    "@storybook/addons": "^6.4.4",
-    "@storybook/react": "^6.4.4",
-    "@testing-library/jest-dom": "^5.12.0",
-    "@testing-library/react": "^11.2.6",
-    "@testing-library/react-hooks": "^7.0.2",
-    "@testing-library/user-event": "^13.1.8",
-    "@types/axe-core": "^2.0.7",
-    "@types/jest-axe": "^3.5.3",
+    "@storybook/addon-a11y": "^6.5.13",
+    "@storybook/addon-actions": "^6.5.13",
+    "@storybook/addon-essentials": "^6.5.13",
+    "@storybook/addon-interactions": "^6.5.13",
+    "@storybook/addon-links": "^6.5.13",
+    "@storybook/builder-webpack5": "^6.5.13",
+    "@storybook/manager-webpack5": "^6.5.13",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/react": "^6.5.13",
+    "@storybook/testing-library": "^0.0.13",
     "@types/tabbable": "^3.1.1",
-    "@types/testing-library__jest-dom": "^5.9.5",
-    "chalk": "^5.0.0",
-    "jest-axe": "^5.0.1",
-    "jest-matcher-utils": "^27.4.2",
+    "babel-loader": "^8.2.5",
+    "css-loader": "^6.7.1",
     "react": "^17.0.2",
-    "react-docgen-typescript-loader": "^3.7.2",
     "react-dom": "^17.0.2",
+    "sass": "^1.55.0",
+    "sass-loader": "^13.1.0",
     "size-limit": "^7.0.8",
     "storybook-addon-themes": "^6.1.0",
-    "tsdx": "^0.14.1",
+    "style-loader": "^3.3.1",
     "typescript": "^4.2.4"
   },
-  "gitHead": "cd0461ed88fced9b8eb49fcff9edc320b0a6ccf5"
+  "volta": {
+    "node": "16.18.0",
+    "yarn": "1.19.1"
+  },
+  "gitHead": "e15f55dc806232292a13e286bf91fe527fcc3a32"
 }

package/src/assets/ShoppingCart.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+
+// Icon from Phosphor Icons
+const ShoppingCart = () => (
+  <svg
+    id="ShoppingCart"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    viewBox="0 0 256 256"
+    strokeWidth="16"
+    width={24}
+    height={24}
+  >
+    <rect width="256" height="256" fill="none"></rect>
+    <path
+      d="M184,184H69.81818L41.92162,30.56892A8,8,0,0,0,34.05066,24H16"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    ></path>
+    <circle
+      cx="80"
+      cy="204"
+      r="20"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    ></circle>
+    <circle
+      cx="184"
+      cy="204"
+      r="20"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    ></circle>
+    <path
+      d="M62.54543,144H188.10132a16,16,0,0,0,15.74192-13.13783L216,64H48"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    ></path>
+  </svg>
+)
+
+export default ShoppingCart

package/src/assets/X.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+
+// Icon from Phosphor Icons
+const X = () => (
+  <svg
+    id="X"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    viewBox="0 0 256 256"
+    strokeWidth="16"
+    width={24}
+    height={24}
+  >
+    <rect width="256" height="256" fill="none"></rect>
+    <line
+      x1="200"
+      y1="56"
+      x2="56"
+      y2="200"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    ></line>
+    <line
+      x1="200"
+      y1="200"
+      x2="56"
+      y2="56"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    ></line>
+  </svg>
+)
+
+export default X

package/src/base/layout.scss

@@ -0,0 +1,78 @@
+// ----------------------------------------------------------
+// STORE STYLES
+// Layout
+// ----------------------------------------------------------
+
+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/base/tokens.scss

@@ -0,0 +1,274 @@
+// ----------------------------------------------------------
+// STORE TOKENS
+// Base Store Theme
+// ----------------------------------------------------------
+
+body {
+  // --------------------------------------------------------
+  // Colors (Branding Core)
+  // --------------------------------------------------------
+
+  // PALETTE
+  // Tone values must range from lightest to darkest.
+  // `0` is more suitable for backgrounds, and `4` for texts.
+  --fs-color-main-0                    : #f1f2f3;
+  --fs-color-main-1                    : #dbdbdb;
+  --fs-color-main-2                    : #00419e;
+  --fs-color-main-3                    : #002c71;
+  --fs-color-main-4                    : #002155;
+
+  --fs-color-accent-0                  : #e3e6e8;
+  --fs-color-accent-1                  : #e3e6e8;
+  --fs-color-accent-2                  : #74808b;
+  --fs-color-accent-3                  : #5d666f;
+  --fs-color-accent-4                  : #171a1c;
+
+  --fs-color-neutral-0                 : #ffffff;
+  --fs-color-neutral-1                 : #f1f2f3;
+  --fs-color-neutral-2                 : #e3e6e8;
+  --fs-color-neutral-3                 : #c7ccd1;
+  --fs-color-neutral-4                 : #9099a2;
+  --fs-color-neutral-5                 : #74808b;
+  --fs-color-neutral-6                 : #5d666f;
+  --fs-color-neutral-7                 : #171a1c;
+
+  // HIERARCHY
+  --fs-color-primary-text              : var(--fs-color-text-inverse);
+  --fs-color-primary-bkg               : var(--fs-color-main-2);
+  --fs-color-primary-bkg-hover         : var(--fs-color-main-3);
+  --fs-color-primary-bkg-active        : var(--fs-color-main-4);
+  --fs-color-primary-bkg-light         : var(--fs-color-main-0);
+  --fs-color-primary-bkg-light-active  : var(--fs-color-main-1);
+
+  --fs-color-secondary-text            : var(--fs-color-primary-bkg);
+  --fs-color-secondary-bkg             : transparent;
+  --fs-color-secondary-bkg-hover       : var(--fs-color-primary-bkg);
+  --fs-color-secondary-bkg-active      : var(--fs-color-main-3);
+  --fs-color-secondary-bkg-light       : var(--fs-color-main-0);
+  --fs-color-secondary-bkg-light-active: var(--fs-color-secondary-bkg-light);
+
+  --fs-color-tertiary-text             : var(--fs-color-link);
+  --fs-color-tertiary-bkg              : transparent;
+  --fs-color-tertiary-bkg-hover        : var(--fs-color-main-0);
+  --fs-color-tertiary-bkg-active       : var(--fs-color-main-1);
+  --fs-color-tertiary-bkg-light        : var(--fs-color-neutral-0);
+  --fs-color-tertiary-bkg-light-active : var(--fs-color-tertiary-bkg-light);
+
+  // COMPONENTS & STATES
+  --fs-color-body-bkg                  : var(--fs-color-neutral-0);
+
+  --fs-color-action-text               : var(--fs-color-text-inverse);
+  --fs-color-action-bkg                : var(--fs-color-accent-4);
+  --fs-color-action-bkg-hover          : var(--fs-color-accent-3);
+  --fs-color-action-bkg-active         : var(--fs-color-accent-2);
+  --fs-color-action-bkg-light          : var(--fs-color-neutral-0);
+  --fs-color-action-bkg-light-active   : var(--fs-color-tertiary-bkg-light);
+
+  --fs-color-link                      : var(--fs-color-main-2);
+  --fs-color-link-hover                : var(--fs-color-main-2);
+  --fs-color-link-active               : var(--fs-color-main-4);
+  --fs-color-link-visited              : #6058ba;
+  --fs-color-link-inverse              : var(--fs-color-neutral-0);
+
+  --fs-color-text                      : var(--fs-color-neutral-7);
+  --fs-color-text-light                : var(--fs-color-neutral-6);
+  --fs-color-text-inverse              : var(--fs-color-neutral-0);
+  --fs-color-text-display              : var(--fs-color-neutral-7);
+
+  --fs-color-focus-ring                : #8db6fa;
+  --fs-color-focus-ring-outline        : #8db6fa80;
+  --fs-color-focus-ring-danger         : #e1adad;
+
+  // SITUATIONS
+  --fs-color-success-text              : #1e493b;
+  --fs-color-success-bkg               : #b3ebd5;
+  --fs-color-success-border            : var(--fs-color-success-text);
+
+  --fs-color-warning-text              : var(--fs-color-text);
+  --fs-color-warning-bkg               : #fdec8d;
+  --fs-color-warning-border            : var(--fs-color-warning-text);
+
+  --fs-color-danger-text               : #cb4242;
+  --fs-color-danger-bkg                : var(--fs-color-focus-ring-danger);
+  --fs-color-danger-border             : var(--fs-color-danger-text);
+
+  --fs-color-info-text                 : var(--fs-color-text);
+  --fs-color-info-bkg                  : var(--fs-color-main-1);
+
+  --fs-color-highlighted-text          : var(--fs-color-text-display);
+  --fs-color-highlighted-bkg           : var(--fs-color-accent-0);
+
+  --fs-color-neutral-text              : var(--fs-color-text);
+  --fs-color-neutral-bkg               : var(--fs-color-neutral-1);
+
+  --fs-color-disabled-text             : var(--fs-color-neutral-6);
+  --fs-color-disabled-bkg              : var(--fs-color-neutral-2);
+
+  // --------------------------------------------------------
+  // Typography (Branding Core)
+  // --------------------------------------------------------
+
+  // FACE
+  --fs-text-face-body                  : -apple-system, system-ui, BlinkMacSystemFont, sans-serif;
+  --fs-text-face-title                 : var(--fs-text-face-body);
+
+  // WEIGHT
+  --fs-text-weight-light               : 300;
+  --fs-text-weight-regular             : 400;
+  --fs-text-weight-bold                : 700;
+  --fs-text-weight-black               : 900;
+
+  // MAX LINES
+  --fs-text-max-lines                  : 2;
+
+  // 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.
+  --fs-text-scale-mobile               : 1.13;
+  --fs-text-scale-desktop              : 1.25;
+
+  --fs-scale                           : var(--fs-text-scale-mobile);
+
+  @include media(">=notebook") {
+    --fs-scale                         : var(--fs-text-scale-desktop);
+  }
+
+  // NUMERIC SCALE
+  --fs-text-size-base                  : 16px; // 1rem
+
+  --fs-text-size-0                     : 12px; // Smallest
+  --fs-text-size-1                     : 14px; // Smaller                               // Mobile    Desktop
+  --fs-text-size-2                     : var(--fs-text-size-base);                      // 16px      16px
+  --fs-text-size-3                     : calc(var(--fs-text-size-2) * var(--fs-scale)); // 18px      20px
+  --fs-text-size-4                     : calc(var(--fs-text-size-3) * var(--fs-scale)); // 20px      25px
+  --fs-text-size-5                     : calc(var(--fs-text-size-4) * var(--fs-scale)); // 23px      31px
+  --fs-text-size-6                     : calc(var(--fs-text-size-5) * var(--fs-scale)); // 26px      39px
+  --fs-text-size-7                     : calc(var(--fs-text-size-6) * var(--fs-scale)); // 29px      48px
+  --fs-text-size-8                     : calc(var(--fs-text-size-7) * var(--fs-scale)); // 33px      61px
+
+  // HIERARCHY SCALE
+  --fs-text-size-title-huge            : var(--fs-text-size-7);
+  --fs-text-size-title-page            : var(--fs-text-size-6);
+  --fs-text-size-title-product         : var(--fs-text-size-4);
+  --fs-text-size-title-section         : var(--fs-text-size-4);
+  --fs-text-size-title-subsection      : var(--fs-text-size-4);
+  --fs-text-size-title-mini            : var(--fs-text-size-4);
+  --fs-text-size-lead                  : var(--fs-text-size-3);
+  --fs-text-size-menu                  : var(--fs-text-size-base);
+  --fs-text-size-body                  : var(--fs-text-size-base);
+  --fs-text-size-legend                : var(--fs-text-size-1);
+  --fs-text-size-tiny                  : var(--fs-text-size-0);
+
+  // --------------------------------------------------------
+  // Spacing (UI Essentials)
+  // --------------------------------------------------------
+
+  // NUMERIC SCALE
+  --fs-spacing-0                       : .25rem; //  4px
+  --fs-spacing-1                       : .5rem;  //  8px
+  --fs-spacing-2                       : .75rem; // 12px
+  --fs-spacing-3                       : 1rem;   // 16px (--fs-text-size-base)
+  --fs-spacing-4                       : 1.5rem; // 24px
+  --fs-spacing-5                       : 2rem;   // 32px
+  --fs-spacing-6                       : 2.5rem; // 40px
+  --fs-spacing-7                       : 3rem;   // 48px
+  --fs-spacing-8                       : 3.5rem; // 56px
+  --fs-spacing-9                       : 4rem;   // 64px
+  --fs-spacing-10                      : 4.5rem; // 72px
+  --fs-spacing-11                      : 5rem;   // 80px
+  --fs-spacing-12                      : 5.5rem; // 88px
+  --fs-spacing-13                      : 6rem;   // 96px
+
+  // --------------------------------------------------------
+  // Grid & Layout (UI Essentials)
+  // --------------------------------------------------------
+
+  // PADDING
+  --fs-grid-padding                    : var(--fs-spacing-3);
+
+  @include media(">=tablet") {
+    --fs-grid-padding                  : var(--fs-spacing-4);
+  }
+
+  @include media(">=notebook") {
+    --fs-grid-padding                  : var(--fs-spacing-5);
+  }
+
+  // Z-INDEX
+  --fs-z-index-below                   : -1;
+  --fs-z-index-default                 : 0;
+  --fs-z-index-top                     : 1;
+  --fs-z-index-high                    : 2;
+  --fs-z-index-highest                 : 3;
+
+  // CONTAINER
+  --fs-grid-max-width                  : var(--fs-grid-breakpoint-notebook);
+
+  // GAPS
+  --fs-grid-gap-0                      : var(--fs-spacing-1);
+  --fs-grid-gap-1                      : var(--fs-spacing-2);
+  --fs-grid-gap-2                      : var(--fs-spacing-3);
+  --fs-grid-gap-3                      : var(--fs-spacing-4);
+  --fs-grid-gap-4                      : var(--fs-spacing-5);
+
+  // BREAKPOINTS
+  --fs-grid-breakpoint-phone           : #{map-get($breakpoints, "phone")};
+  --fs-grid-breakpoint-phonemid        : #{map-get($breakpoints, "phonemid")};
+  --fs-grid-breakpoint-tablet          : #{map-get($breakpoints, "tablet")};
+  --fs-grid-breakpoint-notebook        : #{map-get($breakpoints, "notebook")};
+  --fs-grid-breakpoint-desktop         : #{map-get($breakpoints, "desktop")};
+
+  // --------------------------------------------------------
+  // Interactive Controls (UI Essentials)
+  // --------------------------------------------------------
+
+  // TAP
+  --fs-control-tap-size                : var(--fs-spacing-7); // 3rem = 48px
+  --fs-control-tap-size-smallest       : calc(var(--fs-control-tap-size) / 2);
+  --fs-control-min-height              : var(--fs-control-tap-size);
+
+  @include media(">=notebook") {
+    --fs-control-tap-size              : var(--fs-spacing-7); // This value can be smaller on desktops
+  }
+
+  // STATES
+  --fs-control-bkg                     : var(--fs-color-neutral-0);
+  --fs-control-bkg-disabled            : var(--fs-color-disabled-bkg);
+
+  // --------------------------------------------------------
+  // Refinements
+  // --------------------------------------------------------
+
+  // TRANSITION
+  --fs-transition-timing               : .2s;
+  --fs-transition-property             : all;
+  --fs-transition-function             : ease-in-out;
+
+  // BORDERS
+  --fs-border-radius-small             : 1px;
+  --fs-border-radius                   : 2px;
+  --fs-border-radius-medium            : 8px;
+  --fs-border-radius-pill              : 100px;
+  --fs-border-radius-circle            : 100%;
+
+  --fs-border-width                    : 1px;
+  --fs-border-width-thick              : 2px;
+  --fs-border-width-thickest           : 3px;
+
+  --fs-border-color                    : var(--fs-color-neutral-4);
+  --fs-border-color-hover              : var(--fs-color-main-3);
+  --fs-border-color-active             : var(--fs-color-main-2);
+  --fs-border-color-disabled           : var(--fs-color-neutral-6);
+
+  --fs-border-color-light              : var(--fs-color-neutral-2);
+  --fs-border-color-light-hover        : var(--fs-color-neutral-3);
+  --fs-border-color-light-active       : var(--fs-color-neutral-3);
+  --fs-border-color-light-disabled     : var(--fs-color-neutral-5);
+
+  // SHADOW
+  --fs-shadow                          : none;
+  --fs-shadow-darker                   : 0 0 10px rgb(0 0 0 / 20%);
+  --fs-shadow-hover                    : 0 0 0 1px var(--fs-color-main-4);
+}

package/src/base/typography.scss

@@ -0,0 +1,64 @@
+// ----------------------------------------------------------
+// STORE STYLES
+// Typography (Text)
+// ----------------------------------------------------------
+
+body {
+  font-family: var(--fs-text-face-body);
+  font-size: var(--fs-text-size-base);
+  letter-spacing: .01em;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+h1, h2, h3, h4, h5, h6, p, ul {
+  padding: 0;
+  margin: 0;
+}
+
+.text__title-section {
+  font-size: var(--fs-text-size-4);
+  font-weight: var(--fs-text-weight-bold);
+  line-height: 1.16;
+
+  @include media(">=notebook") { font-size: var(--fs-text-size-5); }
+}
+
+.text__title-subsection {
+  font-size: var(--fs-text-size-3);
+  font-weight: var(--fs-text-weight-bold);
+  line-height: 1.2;
+}
+
+.text__title-mini {
+  font-size: var(--fs-text-size-2);
+  font-weight: var(--fs-text-weight-bold);
+  line-height: 1.25;
+}
+
+// TODO: Can we replace this with `.text__body`?
+.text__title-mini-alt {
+  font-size: var(--fs-text-size-2);
+  line-height: 1.25;
+}
+
+.text__lead {
+  font-size: var(--fs-text-size-4);
+  font-weight: var(--fs-text-weight-bold);
+  line-height: 1.12;
+}
+
+.text__body {
+  font-size: var(--fs-text-size-2);
+  line-height: 1.5;
+}
+
+.text__legend {
+  font-size: var(--fs-text-size-1);
+  line-height: 1.7;
+}
+
+.text__tiny {
+  font-size: var(--fs-text-size-0);
+  line-height: 1.5;
+}