@faststore/core 22.42.6

package/src/styles/global/tokens.scss

@@ -0,0 +1,276 @@
+// ----------------------------------------------------------
+// GLOBAL TOKENS
+// Base Store Theme
+// ----------------------------------------------------------
+
+@import "../vendors/include-media";
+
+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/styles/global/typography.scss

@@ -0,0 +1,66 @@
+// ----------------------------------------------------------
+// GLOBAL STYLES
+// Typography (Text)
+// ----------------------------------------------------------
+
+@import "src/styles/scaffold";
+
+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;
+}

package/src/styles/global/utilities.scss

@@ -0,0 +1,69 @@
+// ----------------------------------------------------------
+// GLOBAL STYLES
+// Utilities
+// ----------------------------------------------------------
+
+/* SQ-DISABLE */
+@use "sass:math";
+
+/* SQ-ENABLE */
+
+// Px to rem.
+$base: 16px !default;
+
+@function rem($size) {
+  $rem: math.div($size, $base);
+
+  @return #{$rem}rem;
+}
+
+@mixin input-focus-ring($outline: #{var(--fs-color-focus-ring)}, $border: #{var(--fs-border-color-active)}) {
+  @media not all and (min-resolution: .001dpcm) { // Target only Safari browsers
+    @supports (-webkit-appearance:none) {         // Use `focus` instead of `focus-visible`
+      &:hover:focus,                              // due to Safari's lack of support
+      &:focus {
+        border-color: $border;
+        outline: none;
+        box-shadow:
+          0 0 0 1px var(--fs-color-body-bkg),
+          0 0 0 var(--fs-border-width-thickest) $outline,
+          inset 0 0 0 var(--fs-border-width) $border;
+      }
+    }
+  }
+
+  &:focus-visible,
+  &:hover:focus-visible {
+    border-color: $border;
+    outline: none;
+    box-shadow:
+      0 0 0 1px var(--fs-color-body-bkg),
+      0 0 0 var(--fs-border-width-thickest) $outline,
+      inset 0 0 0 var(--fs-border-width) $border;
+  }
+}
+
+@mixin focus-ring {
+  outline: none;
+  box-shadow: 0 0 0 1px var(--fs-color-body-bkg), 0 0 0 var(--fs-border-width-thickest) var(--fs-color-focus-ring);
+}
+
+@mixin focus-ring-visible {
+  @media not all and (min-resolution: .001dpcm) { // Target only Safari browsers
+    @supports (-webkit-appearance:none) {         // Use `focus` instead of `focus-visible`
+      &:focus { @include focus-ring; }            // due to Safari's lack of support
+    }
+  }
+  &:focus-visible { @include focus-ring; }
+}
+
+@mixin truncate-title($max-lines: var(--fs-text-max-lines)) {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -moz-box-orient: vertical;
+  -webkit-line-clamp: $max-lines;
+  line-clamp: $max-lines;
+  text-overflow: -o-ellipsis-lastline;
+  text-overflow: ellipsis;
+}

package/src/styles/scaffold.scss

@@ -0,0 +1,7 @@
+// Scaffold  //////////////////////////
+
+// Vendors
+@import "vendors/include-media";
+
+// Output functions & mixins
+@import "global/utilities";

package/src/styles/themes/custom-theme.scss

@@ -0,0 +1,36 @@
+// ----------------------------------------------------------
+// GLOBAL TOKENS
+// Custom Theme
+// ----------------------------------------------------------
+
+@import "../vendors/include-media";
+
+.custom-theme {
+  // --------------------------------------------------------
+  // Colors (Branding Core)
+  // --------------------------------------------------------
+
+  // --------------------------------------------------------
+  // Typography (Branding Core)
+  // --------------------------------------------------------
+
+  // --------------------------------------------------------
+  // Spacing (UI Essentials)
+  // --------------------------------------------------------
+
+  // --------------------------------------------------------
+  // Grid & Layout (UI Essentials)
+  // --------------------------------------------------------
+
+  // --------------------------------------------------------
+  // Interactive Controls (UI Essentials)
+  // --------------------------------------------------------
+
+  // --------------------------------------------------------
+  // Refinements
+  // --------------------------------------------------------
+
+  // --------------------------------------------------------
+  // Components
+  // --------------------------------------------------------
+}

package/src/styles/themes/midnight.scss

@@ -0,0 +1,123 @@
+// ----------------------------------------------------------
+// GLOBAL TOKENS
+// Theme Midnight
+// ----------------------------------------------------------
+
+@import "../vendors/include-media";
+
+.midnight {
+  // --------------------------------------------------------
+  // Colors (Branding Core)
+  // --------------------------------------------------------
+
+  // PALETTE
+  --fs-color-main-0                    : #0b0022;
+  --fs-color-main-1                    : #13013e;
+  --fs-color-main-2                    : #190054;
+  --fs-color-main-3                    : #41208d;
+  --fs-color-main-4                    : #6535d6;
+
+  --fs-color-accent-0                  : #25046d;
+  --fs-color-accent-1                  : #001082;
+  --fs-color-accent-2                  : #0017b9;
+  --fs-color-accent-3                  : #1930d3;
+  --fs-color-accent-4                  : #4d62ff;
+
+  --fs-color-neutral-0                 : #110035;
+  --fs-color-neutral-1                 : #260f5a;
+  --fs-color-neutral-2                 : #74808b;
+  --fs-color-neutral-3                 : #9099a2;
+  --fs-color-neutral-4                 : #c7ccd1;
+  --fs-color-neutral-5                 : #e3e6e8;
+  --fs-color-neutral-6                 : #816ba9;
+  --fs-color-neutral-7                 : #dfd2fc;
+
+  // HIERARCHY
+  --fs-color-primary-bkg               : var(--fs-color-main-3);
+  --fs-color-primary-bkg-light         : var(--fs-color-main-2);
+  --fs-color-primary-text              : var(--fs-color-neutral-7);
+
+  --fs-color-secondary-text            : var(--fs-color-neutral-7);
+
+  --fs-color-tertiary-bkg-hover        : var(--fs-color-main-2);
+  --fs-color-tertiary-bkg-active       : var(--fs-color-main-3);
+
+  // // COMPONENTS & STATES
+  --fs-color-body-bkg                  : var(--fs-color-main-0);
+
+  --fs-color-text-display              : var(--fs-color-neutral-7);
+
+  --fs-color-link                      : var(--fs-color-neutral-7);
+
+  // SITUATIONS
+  --fs-color-success-text              : #50b191;
+  --fs-color-success-bkg               : #007043;
+  --fs-color-warning-bkg               : #b17000;
+
+  // --------------------------------------------------------
+  // Typography (Branding Core)
+  // --------------------------------------------------------
+
+  // FACE
+  --fs-text-face-body                  : "Raleway", sans-serif;
+
+  // NUMERIC SCALE
+  --fs-text-size-base                  : 18px; // 1rem
+  --fs-text-size-0                     : 14px; // Smallest
+  --fs-text-size-1                     : 16px; // Smaller
+
+  // --------------------------------------------------------
+  // Refinements
+  // --------------------------------------------------------
+
+  // BORDERS
+  --fs-border-radius                   : 20px;
+
+  --fs-border-width                    : 2px;
+
+  --fs-border-color-light              : var(--fs-color-main-3);
+  --fs-border-color                    : var(--fs-color-main-3);
+  --fs-border-color-hover              : var(--fs-color-main-2);
+  --fs-border-color-active             : var(--fs-color-main-3);
+
+  // SHADOW
+  --fs-shadow-hover                    : 0 0 10px rgb(40 21 132 / 30%), 0 0 0 10px var(--fs-color-main-1);
+
+  // --------------------------------------------------------
+  // Components
+  // --------------------------------------------------------
+
+  --fs-body-bkg                                   : linear-gradient(0deg, var(--fs-color-main-0) 0%, var(--fs-color-main-2) 20%, var(--fs-color-main-0) 100%);
+
+  [data-fs-hero] {
+    --fs-hero-img-border-radius                   : 130px 0 0 130px;
+    --fs-hero-main-bkg-color                      : var(--fs-color-main-1);
+  }
+
+  [data-fs-button] {
+    --fs-button-border-radius                     : var(--fs-border-radius-pill);
+
+    --fs-button-primary-inverse-text-color        : var(--fs-color-neutral-0);
+    --fs-button-primary-inverse-text-color-hover  : var(--fs-color-text);
+    --fs-button-primary-inverse-text-color-active : var(--fs-color-neutral-7);
+
+    --fs-button-primary-border-color              : var(--fs-color-neutral-7);
+
+    --fs-button-tertiary-text-color-active        : var(--fs-color-text);
+  }
+
+  [data-fs-product-card] {
+    --fs-product-card-padding                     : var(--fs-spacing-2) var(--fs-spacing-2) var(--fs-spacing-4) var(--fs-spacing-2);
+    --fs-product-card-bkg-color                   : var(--fs-color-main-0);
+    --fs-product-card-img-scale-hover             : 1.05;
+  }
+
+  [data-fs-logo] {
+    --fs-logo-img                                 : url("~/public/brandless-negative.png");
+    --fs-logo-width                               : 8rem;
+  }
+
+  [data-fs-footer] {
+    --fs-footer-bkg-color                         : var(--fs-color-main-0);
+  }
+}

package/src/styles/themes/soft-blue.scss

@@ -0,0 +1,79 @@
+// ----------------------------------------------------------
+// GLOBAL TOKENS
+// Theme Soft Blue
+// ----------------------------------------------------------
+
+@import "../vendors/include-media";
+
+.soft-blue {
+  // --------------------------------------------------------
+  // Colors (Branding Core)
+  // --------------------------------------------------------
+
+  // PALETTE
+  --fs-color-main-0                    : #ecf0ff;
+  --fs-color-main-1                    : #d8e2ff;
+  --fs-color-main-2                    : #00419e;
+  --fs-color-main-3                    : #002c71;
+  --fs-color-main-4                    : #001947;
+
+  --fs-color-accent-0                  : #ebdcff;
+  --fs-color-accent-1                  : #8d50fd;
+  --fs-color-accent-2                  : #732fe2;
+  --fs-color-accent-3                  : #5900c8;
+  --fs-color-accent-4                  : #4700a0;
+
+  // HIERARCHY
+  --fs-color-primary-bkg               : var(--fs-color-main-4);
+  --fs-color-primary-bkg-active        : var(--fs-color-main-2);
+  --fs-color-primary-bkg-light         : var(--fs-color-main-0);
+  --fs-color-primary-bkg-light-active  : var(--fs-color-main-1);
+
+  // SITUATIONS
+  --fs-color-success-bkg               : #cee8de;
+  --fs-color-warning-bkg               : #f6e0ba;
+
+  // COMPONENTS & STATES
+  --fs-color-text-display              : var(--fs-color-main-4);
+
+  --fs-color-action-bkg                : var(--fs-color-accent-3);
+  --fs-color-action-bkg-hover          : var(--fs-color-accent-2);
+  --fs-color-action-bkg-active         : var(--fs-color-accent-1);
+
+  // --------------------------------------------------------
+  // Typography (Branding Core)
+  // --------------------------------------------------------
+
+  // FACE
+  --fs-text-face-body                  : "Lato", -apple-system, system-ui, BlinkMacSystemFont, sans-serif;
+
+  // --------------------------------------------------------
+  // Refinements
+  // --------------------------------------------------------
+
+  // BORDERS
+  --fs-border-radius                   : .25rem;
+
+  // SHADOW
+  --fs-shadow                          : none;
+  --fs-shadow-darker                   : 0 0 10px rgb(0 0 0 / 20%);
+  --fs-shadow-hover                    : 0 1px 4px rgb(0 0 0 / 10%), 0 6px 8px rgb(0 0 0 / 10%);
+
+  // --------------------------------------------------------
+  // Components
+  // --------------------------------------------------------
+
+  [data-fs-product-card] {
+    --fs-product-card-border-color       : transparent;
+    --fs-product-card-border-color-hover : var(--fs-border-color-light);
+
+    &[data-fs-product-card-bordered="true"] {
+      --fs-product-card-border-color     : var(--fs-border-color-light);
+    }
+  }
+
+  [data-fs-logo] {
+    --fs-logo-img                        : url("~/public/brandless-positive.png");
+    --fs-logo-width                      : 8rem;
+  }
+}

package/src/styles/vendors/include-media.scss

@@ -0,0 +1,4 @@
+// Include Media //////////////////////////
+
+@import "../../../node_modules/include-media/dist/include-media";
+@import "include-media_overwrite";

package/src/styles/vendors/include-media_overwrite.scss

@@ -0,0 +1,9 @@
+// Include Media Overwrites //////////////////////////
+
+$breakpoints: (
+  "phone":         320px,
+  "phonemid":      375px,
+  "tablet":        768px,
+  "notebook":      1280px,
+  "desktop":       1440px,
+);