workarea-haven_theme 1.3.0

data/app/assets/stylesheets/workarea/storefront/theme_config/fonts/_hind.scss

@@ -0,0 +1,21 @@
+/*------------------------------------*\
+    #HIND
+\*------------------------------------*/
+
+// scss-lint:disable VariableForProperty
+
+@font-face {
+    font-family: 'Hind';
+    font-weight: normal;
+    font-style: normal;
+    src: font-url('workarea/storefront/hind/hind_regular_webfont.woff2') format('woff2'),
+         font-url('workarea/storefront/hind/hind_regular_webfont.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'Hind';
+    font-weight: bold;
+    font-style: normal;
+    src: font-url('workarea/storefront/hind/hind_bold_webfont.woff2') format('woff2'),
+         font-url('workarea/storefront/hind/hind_bold_webfont.woff') format('woff');
+}

data/app/assets/stylesheets/workarea/storefront/theme_config/fonts/_lora.scss

@@ -0,0 +1,37 @@
+/*------------------------------------*\
+    #LORA
+\*------------------------------------*/
+
+// scss-lint:disable VariableForProperty
+
+@font-face {
+    font-family: 'Lora';
+    font-weight: normal;
+    font-style: normal;
+    src: font-url('workarea/storefront/lora/lora_regular_webfont.woff2') format('woff2'),
+         font-url('workarea/storefront/lora/lora_regular_webfont.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'Lora';
+    font-weight: normal;
+    font-style: italic;
+    src: font-url('workarea/storefront/lora/lora_italic_webfont.woff2') format('woff2'),
+         font-url('workarea/storefront/lora/lora_italic_webfont.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'Lora';
+    font-weight: bold;
+    font-style: normal;
+    src: font-url('workarea/storefront/lora/lora_bold_webfont.woff2') format('woff2'),
+         font-url('workarea/storefront/lora/lora_bold_webfont.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'Lora';
+    font-weight: bold;
+    font-style: italic;
+    src: font-url('workarea/storefront/lora/lora_bolditalic_webfont.woff2') format('woff2'),
+         font-url('workarea/storefront/lora/lora_bolditalic_webfont.woff') format('woff');
+}

data/app/assets/stylesheets/workarea/storefront/theme_config/fonts/_muli.scss

@@ -0,0 +1,37 @@
+/*------------------------------------*\
+    #MULI
+\*------------------------------------*/
+
+// scss-lint:disable VariableForProperty
+
+@font-face {
+    font-family: 'Muli';
+    font-weight: normal;
+    font-style: normal;
+    src: font-url('workarea/storefront/muli/muli_regular_webfont.woff2') format('woff2'),
+         font-url('workarea/storefront/muli/muli_regular_webfont.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'Muli';
+    font-weight: normal;
+    font-style: italic;
+    src: font-url('workarea/storefront/muli/muli_italic_webfont.woff2') format('woff2'),
+         font-url('workarea/storefront/muli/muli_italic_webfont.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'Muli';
+    font-weight: bold;
+    font-style: normal;
+    src: font-url('workarea/storefront/muli/muli_bold_webfont.woff2') format('woff2'),
+         font-url('workarea/storefront/muli/muli_bold_webfont.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'Muli';
+    font-weight: bold;
+    font-style: italic;
+    src: font-url('workarea/storefront/muli/muli_bolditalic_webfont.woff2') format('woff2'),
+         font-url('workarea/storefront/muli/muli_bolditalic_webfont.woff') format('woff');
+}

data/app/assets/stylesheets/workarea/storefront/theme_config/fonts/_playfair_display.scss

@@ -0,0 +1,37 @@
+/*------------------------------------*\
+    #PLAYFAIR_DISPLAY
+\*------------------------------------*/
+
+// scss-lint:disable VariableForProperty
+
+@font-face {
+    font-family: 'Playfair Display';
+    font-weight: normal;
+    font-style: normal;
+    src: font-url('workarea/storefront/Playfair_Display/playfairdisplay_regular_webfont.woff2') format('woff2'),
+         font-url('workarea/storefront/Playfair_Display/playfairdisplay_regular_webfont.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'Playfair Display';
+    font-weight: normal;
+    font-style: italic;
+    src: font-url('workarea/storefront/Playfair_Display/playfairdisplay_italic_webfont.woff2') format('woff2'),
+         font-url('workarea/storefront/Playfair_Display/playfairdisplay_italic_webfont.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'Playfair Display';
+    font-weight: bold;
+    font-style: normal;
+    src: font-url('workarea/storefront/Playfair_Display/playfairdisplay_bold_webfont.woff2') format('woff2'),
+         font-url('workarea/storefront/Playfair_Display/playfairdisplay_bold_webfont.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'Playfair Display';
+    font-weight: bold;
+    font-style: italic;
+    src: font-url('workarea/storefront/Playfair_Display/playfairdisplay_bolditalic_webfont.woff2') format('woff2'),
+         font-url('workarea/storefront/Playfair_Display/playfairdisplay_bolditalic_webfont.woff') format('woff');
+}

data/app/assets/stylesheets/workarea/storefront/theme_config/fonts/_poppins.scss

@@ -0,0 +1,40 @@
+/*------------------------------------*\
+    #pOPPINS
+\*------------------------------------*/
+// scss-lint:disable VariableForProperty
+
+/* poppins-light (300) */
+@font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 300;
+    src: font-url('workarea/storefront/poppins/poppins_300.woff2') format('woff2'),
+        font-url('workarea/storefront/poppins/poppins_300.woff') format('woff');
+}
+
+/* poppins_regular (400) */
+@font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 400;
+    src: font-url('workarea/storefront/poppins/poppins_regular.woff2') format('woff2'),
+        font-url('workarea/storefront/poppins/poppins_regular.woff') format('woff');
+}
+
+/* poppins_medium (500) */
+@font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 500;
+    src: font-url('workarea/storefront/poppins/poppins_500.woff2') format('woff2'),
+        font-url('workarea/storefront/poppins/poppins_500.woff') format('woff');
+}
+
+/* poppins_bold (700) */
+@font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 700;
+    src: font-url('workarea/storefront/poppins/poppins_700.woff2') format('woff2'),
+        font-url('workarea/storefront/poppins/poppins_700.woff') format('woff');
+}

data/app/assets/stylesheets/workarea/storefront/theme_config/fonts/_pt_serif.scss

@@ -0,0 +1,22 @@
+/*------------------------------------*\
+    #PT-Serif
+\*------------------------------------*/
+// scss-lint:disable VariableForProperty
+
+/* pt-serif-regular (400) */
+@font-face {
+    font-family: 'PT Serif';
+    font-style: normal;
+    font-weight: 400;
+    src: font-url('workarea/storefront/pt_serif/pt_serif_regular.woff2') format('woff2'),
+         font-url('workarea/storefront/pt_serif/pt_serif_regular.woff') format('woff');
+}
+
+/* pt_serif_bold (700) */
+@font-face {
+    font-family: 'PT Serif';
+    font-style: normal;
+    font-weight: 700;
+    src: font-url('workarea/storefront/pt_serif/pt_serif_700.woff2') format('woff2'),
+         font-url('workarea/storefront/pt_serif/pt_serif_700.woff') format('woff');
+}

data/app/assets/stylesheets/workarea/storefront/theme_config/fonts/_roboto.scss

@@ -0,0 +1,29 @@
+/*------------------------------------*\
+    #ROBOTO
+\*------------------------------------*/
+
+// scss-lint:disable VariableForProperty
+
+@font-face {
+    font-family: 'Roboto';
+    font-weight: normal;
+    font-style: normal;
+    src: font-url('workarea/storefront/roboto/roboto_regular_webfont.woff2') format('woff2'),
+         font-url('workarea/storefront/roboto/roboto_regular_webfont.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'Roboto';
+    font-weight: bold;
+    font-style: normal;
+    src: font-url('workarea/storefront/roboto/roboto_bold_webfont.woff2') format('woff2'),
+         font-url('workarea/storefront/roboto/roboto_bold_webfont.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'Roboto';
+    font-weight: normal;
+    font-style: italic;
+    src: font-url('workarea/storefront/roboto/roboto_italic_webfont.woff2') format('woff2'),
+         font-url('workarea/storefront/roboto/roboto_italic_webfont.woff') format('woff');
+}

data/app/assets/stylesheets/workarea/storefront/theme_config/fonts/_source_serif_pro.scss

@@ -0,0 +1,21 @@
+/*------------------------------------*\
+    #SOURCE-SERIF-PRO
+\*------------------------------------*/
+
+// scss-lint:disable VariableForProperty
+
+@font-face {
+    font-family: 'Source Serif Pro';
+    font-weight: normal;
+    font-style: normal;
+    src: font-url('workarea/storefront/source_serif_pro/source_serif_pro_regular_webfont.woff2') format('woff2'),
+         font-url('workarea/storefront/source_serif_pro/source_serif_pro_regular_webfont.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'Source Serif Pro';
+    font-weight: bold;
+    font-style: normal;
+    src: font-url('workarea/storefront/source_serif_pro/source_serif_pro_bold_webfont.woff2') format('woff2'),
+         font-url('workarea/storefront/source_serif_pro/source_serif_pro_bold_webfont.woff') format('woff');
+}

data/app/assets/stylesheets/workarea/storefront/tools/_focus_ring.scss

@@ -0,0 +1,22 @@
+/*------------------------------------*\
+    #FOCUS-RING
+\*------------------------------------*/
+
+/// Provides a border and box-shadow for a focusable element. Useful when
+/// creating custom, non-standard form control UIs.
+///
+/// @param {Color} $color [$focus-ring-color] - the color of the applied border
+///
+/// @example scss - Focus Ring mixin
+///     $block-focus-border-color:  $blue;
+///
+///     .block {
+///         &:focus {
+///             @include focus-ring($block-focus-border-color);
+///         }
+///     }
+@mixin focus-ring($color: $focus-ring-color) {
+    border-color: $color;
+    outline: none;
+    transition: border 0.1s;
+}

data/app/assets/stylesheets/workarea/storefront/tools/_full_bleed_container.scss

@@ -0,0 +1,15 @@
+/**
+ * full-bleed-container
+ *
+ * Used to make content full bleed when it is wrapped by parent with a max-width
+ * https://css-tricks.com/full-width-containers-limited-width-parents/
+ */
+
+@mixin full-bleed-container {
+    position: relative;
+    right: 50%;
+    left: 50%;
+    margin-right: -50vw;
+    margin-left: -50vw;
+    width: 100vw;
+}

data/app/assets/stylesheets/workarea/storefront/typography/_headings.scss

@@ -0,0 +1,144 @@
+/*------------------------------------*\
+    #HEADING
+\*------------------------------------*/
+
+$heading-1-font-size-mobile:  32px !default;
+$heading-1-font-size:         40px !default;
+$heading-2-font-size-mobile:  32px !default;
+$heading-2-font-size:         40px !default;
+$heading-3-font-size-mobile:  26px !default;
+$heading-3-font-size:         30px !default;
+$heading-4-font-size-mobile:  18px !default;
+$heading-4-font-size:         22px !default;
+$heading-5-font-size-mobile:  16px !default;
+$heading-5-font-size:         20px !default;
+$heading-6-font-size-mobile:  14px !default;
+$heading-6-font-size:         16px !default;
+
+$heading-letter-spacing: 2px !default;
+$heading-letter-spacing-wide: 3px !default;
+$heading-letter-spacing-narrow: 1px !default;
+
+$heading-content-font-family: $secondary-font-family !default;
+$heading-content-font-family-footer: $font-family !default;
+
+/**
+ * Defines common heading element styles.
+ */
+h1, h2, h3, h4, h5, h6,
+%heading,
+.heading {
+    display: block;
+    margin-bottom: $spacing-unit * 2;
+    font-weight: $font-weight-medium;
+    letter-spacing: $heading-letter-spacing;
+
+    .content-block & {
+        font-family: $heading-content-font-family;
+    }
+
+    .page-footer,
+    .page-footer .content-block & {
+        font-family: $heading-content-font-family-footer;
+        text-transform: uppercase;
+    }
+}
+
+/**
+ * Define specific font styles for each heading.
+ */
+h1,
+%heading--1,
+.heading--1 {
+    font-size: $heading-1-font-size-mobile;
+    letter-spacing: $heading-letter-spacing-wide;
+
+    @include respond-to($medium-breakpoint) {
+        font-size: $heading-1-font-size;
+    }
+
+    .content-block & {
+        letter-spacing: $heading-letter-spacing;
+    }
+}
+
+h2,
+%heading--2,
+.heading--2 {
+    font-size: $heading-2-font-size-mobile;
+    font-weight: $font-weight-light;
+
+    @include respond-to($medium-breakpoint) {
+        font-size: $heading-2-font-size;
+    }
+}
+
+h3,
+%heading--3,
+.heading--3 {
+    font-size: $heading-3-font-size-mobile;
+
+    @include respond-to($medium-breakpoint) {
+        font-size: $heading-3-font-size;
+    }
+}
+
+h4,
+%heading--4,
+.heading--4 {
+    font-size: $heading-4-font-size-mobile;
+
+    @include respond-to($medium-breakpoint) {
+        font-size: $heading-4-font-size;
+    }
+
+    .content-block & {
+        letter-spacing: $heading-letter-spacing-narrow;
+    }
+}
+
+h5,
+%heading--5,
+.heading--5 {
+    font-size: $heading-5-font-size-mobile;
+    font-weight: $font-weight-regular;
+
+    @include respond-to($medium-breakpoint) {
+        font-size: $heading-5-font-size;
+    }
+
+    .content-block & {
+        letter-spacing: $heading-letter-spacing-narrow;
+    }
+}
+
+
+h6,
+%heading--6,
+.heading--6 {
+    font-size: $heading-6-font-size-mobile;
+    letter-spacing: $heading-letter-spacing-wide;
+
+    @include respond-to($medium-breakpoint) {
+        font-size: $heading-6-font-size;
+    }
+
+    .content-block & {
+        letter-spacing: $heading-letter-spacing-narrow;
+    }
+}
+
+%heading--content,
+.heading--content {
+    font-family: $heading-content-font-family;
+}
+
+%heading--no-margin,
+.heading--no-margin {
+    margin: 0;
+}
+
+%heading--upcase,
+.heading--upcase {
+    text-transform: uppercase;
+}

data/app/assets/stylesheets/workarea/storefront/typography/_links.scss

@@ -0,0 +1,47 @@
+/*------------------------------------*\
+    #LINKS
+\*------------------------------------*/
+
+$link-font-size: $font-size-small !default;
+$link-footer-font-size: $font-size !default;
+
+a,
+%link,
+.link {
+    color: $link-color;
+    font-size: $link-font-size;
+    font-weight: $font-weight-medium;
+    letter-spacing: $font-letter-spacing;
+    text-decoration: none;
+    cursor: pointer;
+
+    &:hover {
+        color: $link-color-hover;
+    }
+
+    .page-footer & {
+        color: $footer-link-color;
+        font-size: $link-footer-font-size;
+        line-height: 2;
+
+        &:hover {
+            color: $footer-link-color-hover;
+        }
+    }
+}
+
+%link--with-arrow,
+.link--with-arrow {
+    &:after {
+        padding: $spacing-unit;
+        opacity: 0;
+        visibility: hidden;
+        transition: opacity $transition-time ease-in;
+        content: '>';
+    }
+
+    &:hover:after {
+        opacity: 1;
+        visibility: visible;
+    }
+}