@appdirect/sfb-theme-plaza 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,29 @@
+# CHANGELOG
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
+and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
+
+## [0.0.44] - (2021-07-30)
+
+#### Added
+- Added menus support [126](https://github.com/AppDirect/sfb-theme-mp2/pull/126)
+
+#### Added
+- Added cross-selling page under profile, for cross-selling domains with products [124](https://github.com/AppDirect/sfb-theme-mp2/pull/124)
+
+
+#### Fixed
+- Fixed issue with cart label overlapping wit the cart icon [122](https://github.com/AppDirect/sfb-theme-mp2/pull/122)
+- Cart icon will show below 1280px, instead of cart label [122](https://github.com/AppDirect/sfb-theme-mp2/pull/122)
+- Fixed issue with the search bar not having enough space/width to be usable for smaller screens [122](https://github.com/AppDirect/sfb-theme-mp2/pull/122)
+
+#### Added
+- Added noIndex meta tag to prevent getting indexed by search engine [123](https://github.com/AppDirect/sfb-theme-mp2/pull/123)
+
+#### Added
+- Added scroll to top button to Home and Product profile page [121](https://github.com/AppDirect/sfb-theme-mp2/pull/121)
+
+## [0.0.43] - (2021-04-12)
+#### Fixed
+- Added missing localized strings for light and dark logos [120](https://github.com/AppDirect/sfb-theme-mp2/pull/120)

package/README.md

@@ -0,0 +1,3 @@
+# Plaza theme
+
+A modern theme built with react components that can be customized with Storefront Builder.

package/assets/css/platform-global/global-index.scss

@@ -0,0 +1 @@
+.test {display:block;}

package/assets/css/theme/components/_sticky-button-page-scroll.scss

@@ -0,0 +1,15 @@
+@import '../../theme/mixins/scroll-button';
+
+.stickyButtonPageScroll {
+    &_wrapper {
+        // Have higher z-index than cms toolbar on the right side
+        z-index: 100000;
+        
+
+        .buttonPageScroll {
+            &_button {
+                @include scroll-button-offset-position;
+            }
+        }
+    }
+}

package/assets/css/theme/definitions/_accessibility.scss

@@ -0,0 +1,42 @@
+// Only display content to screen readers
+//
+// See: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
+// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
+
+@mixin sr-only() {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px; // Fix for https://github.com/twbs/bootstrap/issues/25686
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+
+// Use in conjunction with .sr-only to only display content when it's focused.
+//
+// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
+//
+// Credit: HTML5 Boilerplate
+
+@mixin sr-only-focusable() {
+    &:active,
+    &:focus {
+        position: static;
+        width: auto;
+        height: auto;
+        overflow: visible;
+        clip: auto;
+        white-space: normal;
+    }
+}
+
+.sr-only {
+  @include sr-only();
+}
+
+.sr-only-focusable {
+  @include sr-only-focusable();
+}

package/assets/css/theme/definitions/_colors.scss

@@ -0,0 +1,58 @@
+@import 'functions';
+
+// general colors
+
+$deep-gray: #474747;
+$dark-gray: #707070;
+$gray: #CACACA;
+$mid-gray: #EAEAEA;
+$light-gray: #F4F4F4;
+$faint-gray: #F8F8F8;
+$faint-light-gray: #F9F9F9;
+
+$white: #ffffff;
+
+// button colors
+
+$btn-primary-color: #FFFFFF;
+$btn-primary-bg: #009DDB;
+$btn-primary-border: #0084BC;
+
+$btn-secondary-color: #474747;
+$btn-secondary-bg: #F1F1F1;
+$btn-secondary-border: #CDCDCD;
+
+$btn-emphasis-color: #FFFFFF;
+$btn-emphasis-bg: #35A800;
+$btn-emphasis-border: #278F00;
+
+$btn-emphasisAlt-color: #FFFFFF;
+$btn-emphasisAlt-bg: #FB641B;
+$btn-emphasisAlt-border: #D75500;
+
+$btn-box-shadow: 0 2px 2px 0 rgba(112,112,112,0.3);
+
+/*
+ __mixins
+ */
+@mixin button-colors-active($bg, $border) {
+    background-color: shade($bg, $shader-step);
+    border-color: shade($border, $shader-step);
+}
+@mixin button-colors-hover($bg, $border) {
+    background-color: tint($bg, $shader-step);
+    border-color: tint($border, $shader-step);
+    box-shadow: $btn-box-shadow;
+}
+@mixin button-colors($bg, $border) {
+    background-color: $bg;
+    border: 1px solid $border;
+
+    &:active {
+        @include button-colors-active($bg, $border);
+    }
+    &:hover {
+        @include button-colors-hover($bg, $border);
+    }
+}
+

package/assets/css/theme/definitions/_functions.scss

@@ -0,0 +1,11 @@
+$shader-step: 15%;
+
+/// Add percentage of black to a color
+@function shade($color, $percent) {
+    @return mix(#000000, $color, $percent);
+}
+
+/// Add percentage of white to a color
+@function tint($color, $percent) {
+    @return mix(#ffffff, $color, $percent);
+}

package/assets/css/theme/definitions/_mixins.scss

@@ -0,0 +1,111 @@
+@import 'colors';
+@import 'typography';
+@import 'variables';
+@import 'accessibility';
+
+@mixin html {
+    @include default($genericFontSize);
+    color: var(--bodyText, $deep-gray);
+    background-color: var(--pageBackground, $white);
+    scroll-behavior: smooth;
+}
+
+@mixin title-xxLarge { @include title($headingFontSizeXXLarge); }
+@mixin title-xLarge { @include title($headingFontSizeXLarge); }
+@mixin title-large { @include title($headingFontSizeLarge); }
+@mixin title-1 { @include title($headingFontSize1); }
+@mixin title-2 { @include title($headingFontSize2); }
+@mixin title-3 { @include title($headingFontSize3); }
+@mixin title-4 { @include title($headingFontSize4); }
+@mixin title-5 { @include title($headingFontSize5); }
+@mixin title-6 { @include title($headingFontSize6); }
+
+@mixin text-1 { @include text($bodyFontSize1); }
+@mixin text-2 { @include text($bodyFontSize2); }
+@mixin text-3 { @include text($bodyFontSize3); }
+@mixin text-4 { @include text($bodyFontSize4); }
+@mixin text-5 { @include text($bodyFontSize5); }
+@mixin text-6 { @include text($bodyFontSize6); }
+@mixin text-lower {
+    text-transform: lowercase;
+}
+
+@mixin paragraph {
+    @include text($bodyFontSize4);
+    margin: 1em 0;
+    &:first-child {
+        margin-top: 0;
+    }
+    &:last-child {
+        margin-bottom: 0;
+    }
+}
+
+@mixin blockquote {
+    @include paragraph;
+    padding-left: 20px;
+    border-left: 4px solid $gray;
+}
+
+@mixin color-deepGray { color: $deep-gray; }
+@mixin color-darkGray { color: $dark-gray; }
+@mixin color-gray { color: $gray; }
+@mixin color-midGray { color: $mid-gray; }
+@mixin color-lightGray { color: $light-gray; }
+@mixin color-faintGray { color: $faint-gray; }
+@mixin color-white { color: $white; }
+
+@mixin background-deepGray { background-color: $deep-gray; }
+@mixin background-darkGray { background-color: $dark-gray; }
+@mixin background-gray { background-color: $gray; }
+@mixin background-midGray { background-color: $mid-gray; }
+@mixin background-lightGray { background-color: $light-gray; }
+@mixin background-faintGray { background-color: $faint-gray; }
+@mixin background-faintLightGray { background-color: $faint-light-gray; }
+@mixin background-white { background-color: $white; }
+
+@mixin border-deepGray { border: 1px solid $deep-gray; }
+@mixin border-darkGray { border: 1px solid $dark-gray; }
+@mixin border-gray { border: 1px solid $gray; }
+@mixin border-midGray { border: 1px solid $mid-gray; }
+@mixin border-lightGray { border: 1px solid $light-gray; }
+@mixin border-faintGray { border: 1px solid $faint-gray; }
+@mixin border-white { border: 1px solid $white; }
+
+@mixin radius-2 { border-radius: 2px; }
+@mixin radius-3 { border-radius: 3px; }
+
+@mixin button-primary {
+    @include button-colors($btn-primary-bg, $btn-primary-border);
+    color: $btn-primary-color;
+}
+@mixin button-primary-active {
+    @include button-colors-active($btn-primary-bg, $btn-primary-border);
+}
+@mixin button-secondary {
+    @include button-colors($btn-secondary-bg, $btn-secondary-border);
+    color: $btn-secondary-color;
+}
+@mixin button-secondary-active {
+    @include button-colors-active($btn-secondary-bg, $btn-secondary-border);
+}
+@mixin button-emphasis {
+    @include button-colors($btn-emphasis-bg, $btn-emphasis-border);
+    color: $btn-emphasis-color;
+}
+@mixin button-emphasis-active {
+    @include button-colors-active($btn-emphasis-bg, $btn-emphasis-border);
+}
+@mixin button-emphasisAlt {
+    @include button-colors($btn-emphasisAlt-bg, $btn-emphasisAlt-border);
+    color: $btn-emphasisAlt-color;
+}
+@mixin button-emphasisAlt-active {
+    @include button-colors-active($btn-emphasisAlt-bg, $btn-emphasisAlt-border);
+}
+
+@mixin button-disabled {
+    opacity: 0.5;
+    pointer-events: none;
+    cursor: default;
+}

package/assets/css/theme/definitions/_typography.scss

@@ -0,0 +1,48 @@
+/*
+ __variable definitions
+ */
+
+$generic-fontFace: "Helvetica Neue", Helvetica, Arial, sans-serif;
+
+$genericFontSize: 16px;
+
+$body-fontFace: var(--bodyFont, "Helvetica Neue", Helvetica, Arial, sans-serif);
+$header-fontFace: var(--headingFont, "Helvetica Neue", Helvetica, Arial, sans-serif);
+
+$headingFontSizeXXLarge: calc(var(--headingBaseSize, 16px) + 26px);
+$headingFontSizeXLarge: calc(var(--headingBaseSize, 16px) + 20px);
+$headingFontSizeLarge: calc(var(--headingBaseSize, 16px) + 14px);
+$headingFontSize1: calc(var(--headingBaseSize, 16px) + 8px);
+$headingFontSize2: calc(var(--headingBaseSize, 16px) + 4px);
+$headingFontSize3: calc(var(--headingBaseSize, 16px) + 2px);
+$headingFontSize4: var(--headingBaseSize, 16px);
+$headingFontSize5: calc(var(--headingBaseSize, 16px) + -2px);
+$headingFontSize6: calc(var(--headingBaseSize, 16px) + -4px);
+
+$bodyFontSize1: calc(var(--bodyBaseSize, 16px) + 8px);
+$bodyFontSize2: calc(var(--bodyBaseSize, 16px) + 4px);
+$bodyFontSize3: calc(var(--bodyBaseSize, 16px) + 2px);
+$bodyFontSize4: var(--bodyBaseSize, 16px);
+$bodyFontSize5: calc(var(--bodyBaseSize, 16px) + -2px);
+$bodyFontSize6: calc(var(--bodyBaseSize, 16px) + -4px);
+$bodyFontSize7: calc(var(--headingBaseSize, 16px) + -5px);
+
+/*
+ __mixin definitions
+ */
+
+@mixin default($size) {
+    font: #{$size}/1.4em $generic-fontFace;
+}
+
+@mixin text($size) {
+    font: #{$size}/1.4em $generic-fontFace;
+    font-family: $body-fontFace;
+}
+
+@mixin title($size) {
+    @include text($size);
+    font-family: $header-fontFace;
+    font-weight: bold;
+    margin-bottom: 0.375em;
+}

package/assets/css/theme/definitions/_variables.scss

@@ -0,0 +1,7 @@
+//Global
+$page-spacing-top: 25px;
+$page-spacing-top-mobile: 15px;
+
+// Components
+$product-tabs-spacing-top: 48px;
+$product-tabs-spacing-bottom: 40px;

package/assets/css/theme/generic/_default.scss

@@ -0,0 +1,126 @@
+@import '../definitions/mixins';
+
+html {
+    @include html;
+}
+
+.ad-uniheader {
+    height: 52px;
+    background: #2d2a27;
+}
+
+p {
+    @include paragraph;
+}
+
+body {
+    position: relative;
+    min-height: 100vh;
+    @include text-4;
+}
+
+.page-wrapper {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+
+    .main-footer {
+        margin-top: auto;
+    }
+}
+
+blockquote {
+    @include blockquote;
+}
+.title {
+    &--xxLarge { @include title-xxLarge; }
+    &--xLarge { @include title-xLarge; }
+    &--large { @include title-large; }
+    &--1 { @include title-1; }
+    &--2 { @include title-2; }
+    &--3 { @include title-3; }
+    &--4 { @include title-4; }
+    &--5 { @include title-5; }
+    &--6 { @include title-6; }
+}
+.text {
+    &--1 { @include text-1; }
+    &--2 { @include text-2; }
+    &--3 { @include text-3; }
+    &--4 { @include text-4; }
+    &--5 { @include text-5; }
+    &--6 { @include text-6; }
+    &--lower { @include text-lower; }
+}
+.paragraph { @include paragraph; }
+.blockquote { @include blockquote; }
+
+.color {
+    &--deepGray { @include color-deepGray }
+    &--darkGray { @include color-darkGray }
+    &--gray { @include color-gray }
+    &--midGray { @include color-midGray }
+    &--lightGray { @include color-lightGray }
+    &--faintGray { @include color-faintGray }
+}
+.background {
+    &--deepGray { @include background-deepGray }
+    &--darkGray { @include background-darkGray }
+    &--gray { @include background-gray }
+    &--midGray { @include background-midGray }
+    &--lightGray { @include background-lightGray }
+    &--faintGray { @include background-faintGray }
+    &--white { @include background-white }
+    &--faintLightGray { @include background-faintLightGray }
+}
+.border {
+    &--deepGray { @include border-deepGray }
+    &--darkGray { @include border-darkGray }
+    &--gray { @include border-gray }
+    &--midGray { @include border-midGray }
+    &--lightGray { @include border-lightGray }
+    &--faintGray { @include border-faintGray }
+}
+.radius {
+    &--2 { @include radius-2; }
+    &--3 { @include radius-3; }
+}
+
+.global-background-section {
+    background: $light-gray;
+}
+
+.global-component-spacer {
+    padding: 30px 0;
+}
+.global-component-spacer-top {
+    padding-top: 30px;
+}
+.global-component-spacer-bottom {
+    padding-bottom: 30px;
+}
+
+.global-component-nospacer {
+    margin-top: -30px;
+}
+
+.hidden {
+    display: none !important;
+}
+
+.skip-to-content {
+    position: absolute;
+    left: 0;
+    top: 0;
+
+    .skip-link {
+        &:focus {
+            position: relative;
+            padding: 5px 10px;
+            background-color: #fff;
+            color: #000;
+            border: 1px solid #000;
+            z-index: 9999;
+        }
+    }
+}