@faststore/ui 2.0.3-alpha.0 → 2.0.5-alpha.0

package/dist/index.js

@@ -1,52 +1,45 @@
+export * from '@faststore/components';
 // Atoms
-export { default as Link } from './atoms/Link';
-export { default as Button } from './atoms/Button';
-export { default as Input } from './atoms/Input';
-export { default as Icon } from './atoms/Icon';
-export { default as Popover } from './atoms/Popover';
-export { default as Price } from './atoms/Price';
-export { default as TextArea } from './atoms/TextArea';
-export { default as Checkbox } from './atoms/Checkbox';
-export { default as Overlay } from './atoms/Overlay';
-export { default as Select } from './atoms/Select';
-export { default as Radio } from './atoms/Radio';
-export { default as Badge } from './atoms/Badge';
-export { default as Slider } from './atoms/Slider';
-export { default as List } from './atoms/List';
-export { default as Skeleton } from './atoms/Skeleton';
-export { default as Spinner } from './atoms/Spinner';
-export { default as Label } from './atoms/Label';
-export { default as Incentive } from './atoms/Incentive';
+export { default as Link } from './components/atoms/Link';
+export { default as Input } from './components/atoms/Input';
+export { default as Popover } from './components/atoms/Popover';
+export { default as Price } from './components/atoms/Price';
+export { default as TextArea } from './components/atoms/TextArea';
+export { default as Select } from './components/atoms/Select';
+export { default as Slider } from './components/atoms/Slider';
+export { default as List } from './components/atoms/List';
+export { default as Skeleton } from './components/atoms/Skeleton';
+export { default as Spinner } from './components/atoms/Spinner';
+export { default as Incentive } from './components/atoms/Incentive';
 // Molecules
-export { default as SkuSelector } from './molecules/SkuSelector';
-export { default as Gift, GiftContent, GiftImage } from './molecules/Gift';
-export { default as ProductTitle } from './molecules/ProductTitle';
-export { default as OrderSummary } from './molecules/OrderSummary';
-export { default as AggregateRating } from './molecules/AggregateRating';
-export { default as ProductCard, ProductCardImage, ProductCardContent, ProductCardActions, } from './molecules/ProductCard';
-export { default as Card, CardImage, CardContent, CardActions, } from './molecules/Card';
-export { default as CartItem, CartItemActions, CartItemContent, CartItemImage, CartItemPrices, CartItemSummary, CartItemTitle, } from './molecules/CartItem';
-export { default as Bullets } from './molecules/Bullets';
-export { default as SearchInput } from './molecules/SearchInput';
-export { default as Carousel } from './molecules/Carousel';
-export { default as IconButton } from './molecules/IconButton';
-export { default as Modal } from './molecules/Modal';
-export { default as Banner, BannerContent, BannerImage, BannerLink, } from './molecules/Banner';
-export { default as PaymentMethods } from './molecules/PaymentMethods';
-export { default as Breadcrumb } from './molecules/Breadcrumb';
-export { default as LoadingButton } from './molecules/LoadingButton';
-export { default as PriceRange } from './molecules/PriceRange';
-export { default as RadioGroup, RadioOption } from './molecules/RadioGroup';
-export { default as Accordion, AccordionItem, AccordionButton, AccordionPanel, } from './molecules/Accordion';
-export { Table, TableBody, TableCell, TableFooter, TableHead, TableRow, } from './molecules/Table';
-export { default as Form } from './molecules/Form';
-export { default as Alert } from './molecules/Alert';
-export { default as QuantitySelector } from './molecules/QuantitySelector';
-export { default as Dropdown, DropdownButton, DropdownItem, DropdownMenu, } from './molecules/Dropdown';
+export { default as SkuSelector } from './components/molecules/SkuSelector';
+export { default as Gift, GiftContent, GiftImage, } from './components/molecules/Gift';
+export { default as ProductTitle } from './components/molecules/ProductTitle';
+export { default as OrderSummary } from './components/molecules/OrderSummary';
+export { default as AggregateRating } from './components/molecules/AggregateRating';
+export { default as ProductCard, ProductCardImage, ProductCardContent, ProductCardActions, } from './components/molecules/ProductCard';
+export { default as Card, CardImage, CardContent, CardActions, } from './components/molecules/Card';
+export { default as CartItem, CartItemActions, CartItemContent, CartItemImage, CartItemPrices, CartItemSummary, CartItemTitle, } from './components/molecules/CartItem';
+export { default as Bullets } from './components/molecules/Bullets';
+export { default as SearchInput } from './components/molecules/SearchInput';
+export { default as Carousel } from './components/molecules/Carousel';
+export { default as Modal } from './components/molecules/Modal';
+export { default as Banner, BannerContent, BannerImage, BannerLink, } from './components/molecules/Banner';
+export { default as PaymentMethods } from './components/molecules/PaymentMethods';
+export { default as Breadcrumb } from './components/molecules/Breadcrumb';
+export { default as LoadingButton } from './components/molecules/LoadingButton';
+export { default as PriceRange } from './components/molecules/PriceRange';
+export { default as RadioGroup, RadioOption, } from './components/molecules/RadioGroup';
+export { default as Accordion, AccordionItem, AccordionButton, AccordionPanel, } from './components/molecules/Accordion';
+export { Table, TableBody, TableCell, TableFooter, TableHead, TableRow, } from './components/molecules/Table';
+export { default as Form } from './components/molecules/Form';
+export { default as Alert } from './components/molecules/Alert';
+export { default as QuantitySelector } from './components/molecules/QuantitySelector';
+export { default as Dropdown, DropdownButton, DropdownItem, DropdownMenu, } from './components/molecules/Dropdown';
 // Organisms
-export { default as OutOfStock, OutOfStockTitle, OutOfStockMessage, } from './organisms/OutOfStock';
-export { Tiles, Tile } from './organisms/Tiles';
-export { default as Hero, HeroHeading, HeroImage } from './organisms/Hero';
+export { default as OutOfStock, OutOfStockTitle, OutOfStockMessage, } from './components/organisms/OutOfStock';
+export { Tiles, Tile } from './components/organisms/Tiles';
+export { default as Hero, HeroHeading, HeroImage, } from './components/organisms/Hero';
 // Hooks
 export { default as useSlider } from './hooks/useSlider';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/ui",
-  "version": "2.0.3-alpha.0",
+  "version": "2.0.5-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": {
+    "@babel/core": "^7.19.6",
     "@faststore/shared": "^2.0.3-alpha.0",
-    "@faststore/styles": "^2.0.3-alpha.0",
+    "@faststore/styles": "^2.0.5-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": "6743690f41d38a7f6a1060f541775c8a6f82e2f5"
+  "volta": {
+    "node": "16.18.0",
+    "yarn": "1.19.1"
+  },
+  "gitHead": "7ac374bab91528184e27381e7dc3be8bf5524e76"
 }

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);
+}