workarea-nvy_theme 1.1.2

data/app/assets/stylesheets/workarea/storefront/settings/_colors.scss.erb

@@ -0,0 +1,17 @@
+/*------------------------------------*\
+    #COLORS
+\*------------------------------------*/
+
+/**
+ * Color Variables
+ *
+ * These variables are loaded in from the theme's color scheme configurations
+ *
+ * To customize colors in this theme you can add your own color scheme
+ * file to the storefront/theme_config directory and reference
+ * it by name below.
+ */
+
+<% path = "\'workarea/storefront/theme_config/color_schemes/#{Workarea.config.theme[:color_scheme].downcase}_color_scheme\';" %>
+
+<%= "@import #{path}" %>

data/app/assets/stylesheets/workarea/storefront/settings/_font_families.scss.erb

@@ -0,0 +1,6 @@
+/*------------------------------------*\
+    #FONT-FAMILIES
+\*------------------------------------*/
+
+<%= "$font-family: #{Workarea.config.theme[:font_stacks][Workarea.config.theme[:primary_font_family].to_sym]} !default;" %>
+<%= "$secondary-font-family: #{Workarea.config.theme[:font_stacks][Workarea.config.theme[:secondary_font_family].to_sym]} !default;" %>

data/app/assets/stylesheets/workarea/storefront/settings/_global.scss

@@ -0,0 +1,35 @@
+/*------------------------------------*\
+    #GLOBAL
+\*------------------------------------*/
+
+/**
+ * Default global spacing units
+ */
+$spacing-unit:  8px !default;
+
+$vertical-margin:    $spacing-unit * 2 !default;
+$horizontal-margin:  $spacing-unit * 2 !default;
+
+
+/**
+ * These dialog dimensions allow for certain components to know their maximum
+ * possible width when being displayed within a dialog.
+ */
+$dialog-content-min-width:  300px !default;
+$dialog-content-max-width:  700px !default;
+
+
+/**
+ * Heights
+ */
+$global-admin-toolbar-height: 64px !default;
+
+/**
+ * Transitions
+ */
+$transition-time: 0.15s !default;
+
+/**
+ * Product images
+ */
+ $product-image-ratio: 2 / 3 !default;

data/app/assets/stylesheets/workarea/storefront/settings/_grid.scss

@@ -0,0 +1,37 @@
+/*------------------------------------*\
+    #GRID
+\*------------------------------------*/
+
+/**
+ * We use the Avalanche CSS grid system to achieve layout. These settings
+ * override the default settings of the library. A list of all configurable
+ * settings can be found here: https://github.com/colourgarden/avalanche
+ */
+
+$av-gutter:  $spacing-unit;
+$av-widths:  (2, 3, 4, 5, 6);
+
+$av-breakpoint-class-chain:  '-at-';
+$av-width-class-style:       'percent';
+$av-width-class-namespace:   'grid__cell--';
+
+$av-enable-grid-right:   true;
+$av-enable-grid-flush:   true;
+$av-enable-grid-middle:  true;
+$av-enable-grid-auto:    true;
+$av-enable-grid-rev:     true;
+$av-enable-grid-center:  true;
+$av-enable-grid-large:   true;
+$av-enable-grid-huge:    true;
+$av-enable-grid-bottom:  true;
+
+
+/**
+ * The following is required to ensure the grid's breakpoints stay up to date
+ * when changed in the project.
+ */
+$av-breakpoints: (
+    'medium':  "screen and (min-width: #{$medium-breakpoint})",
+    'wide':    "screen and (min-width: #{$wide-breakpoint})",
+    'x-wide':  "screen and (min-width: #{$x-wide-breakpoint})",
+);

data/app/assets/stylesheets/workarea/storefront/settings/_typography.scss

@@ -0,0 +1,17 @@
+/*------------------------------------*\
+    #FONTS
+\*------------------------------------*/
+
+
+/**
+ * Text sizes
+ */
+
+$font-size: 14px !default;
+$form-control-font-size: 16px !default;
+$form-supplementary-font-size: 12px !default;
+$line-height: 1.5 !default;
+
+$letter-spacing: 1px !default;
+$letter-spacing-large: 2px !default;
+$letter-spacing-extra-large: 4px !default;

data/app/assets/stylesheets/workarea/storefront/settings/_z_indexes.scss

@@ -0,0 +1,32 @@
+/*------------------------------------*\
+        #Z-INDEXES
+\*------------------------------------*/
+
+/**
+ * z-index values ordered pertaining to their container.
+ *
+ * $components is the base level. Other containers require a position
+ * other than 'static'
+ *
+ * Based upon this article in Smashing Magazine
+ * https://www.smashingmagazine.com/2014/06/sassy-z-index-management-for-complex-layouts/
+ */
+
+$components: (
+    page-container,
+    back-to-top-button,
+    header-main,
+    account-menu,
+    ui-autocomplete,
+    overlay,
+    ui-dialog,
+    admin-toolbar,
+    page-messages,
+    mobile-nav,
+    mobile-filters-nav
+) !default;
+
+    $page-container: (
+        page-content,
+        page-header
+    ) !default;

data/app/assets/stylesheets/workarea/storefront/share/components/_share_buttons.scss

@@ -0,0 +1,30 @@
+/*------------------------------------*\
+    #SHARE-BUTTONS
+\*------------------------------------*/
+
+$share-buttons-icon-size: 20px !default;
+$share-buttons-icon-color: $share-icon-color !default;
+$share-buttons-icon-color-hover: $share-icon-color-hover !default;
+
+
+.share-buttons {
+    @extend %inline-list;
+    margin: 0 0 ($spacing-unit * 2);
+}
+
+    .share-buttons__item {
+        margin: 0 ($spacing-unit * 2);
+        vertical-align: middle;
+    }
+
+        .share-buttons__button {}
+
+            .share-buttons__icon {
+                width: $share-buttons-icon-size;
+                height: $share-buttons-icon-size;
+                fill: $share-buttons-icon-color;
+
+                .share-buttons__button:hover & {
+                    fill: $share-buttons-icon-color-hover;
+                }
+            }

data/app/assets/stylesheets/workarea/storefront/slick_slider/components/_slick_slider.scss

@@ -0,0 +1,137 @@
+/*------------------------------------*\
+    #SLICK-SLIDER
+\*------------------------------------*/
+
+$slick-slider-elements: (
+    slick-list,
+    slick-slider__nav,
+    slick-slider__dots
+) !default;
+
+$slick-slider-dots-width: 8px !default;
+$slick-slider-dots-bg-color: $slider-dot-color !default;
+$slick-slider-dots-selected-bg-color: $slider-dot-selected-color !default;
+$slick-slider-dots-border-width: 2px !default;
+$slick-slider-dots-border-color: $slider-dot-border-color !default;
+$slick-slider-dots-selected-border-color: $slider-dot-selected-border-color !default;
+$slick-slider-dots-spacing: 0 ($spacing-unit / 2) !default;
+
+$slick-slider-nav-color: $slider-arrow-color !default;
+$slick-slider-nav-bg-color: $transparent !default;
+$slick-slider-arrow-size: 24px !default;
+$slick-slider-arrows-offset: 0 !default;
+$slick-slider-arrows-vertical-offset: $spacing-unit * -1 !default;
+
+
+.slick-slider {}
+
+.slick-slider--waiting-for-images {
+    opacity: 0;
+}
+
+.slick-slider--images-loaded {
+    opacity: 1;
+    transition: opacity 0.15s ease-in;
+}
+
+        .slick-slider__image-wrapper {}
+
+            .slick-slider__image {}
+
+    .slick-slider__nav {
+        @extend %button-reset;
+        @include center('vertical');
+        z-index: index($slick-slider-elements, slick-slider__nav);
+        background: $slick-slider-nav-bg-color;
+        cursor: pointer;
+    }
+
+    .slick-slider__nav--prev {
+        left: $slick-slider-arrows-offset;
+
+        .slick-vertical & {
+            top: $slick-slider-arrows-vertical-offset;
+            right: 50%;
+            left: auto;
+            transform: translateX(50%) rotate(90deg);
+        }
+    }
+
+    .slick-slider__nav--next {
+        right: $slick-slider-arrows-offset;
+
+        .slick-vertical & {
+            top: auto;
+            right: 50%;
+            bottom: $slick-slider-arrows-vertical-offset;
+            transform: translateX(50%) rotate(90deg);
+        }
+    }
+
+        .slick-slider__nav-icon {
+            width: $slick-slider-arrow-size;
+            height: $slick-slider-arrow-size;
+            fill: $slick-slider-nav-color;
+        }
+
+        .slick-slider__nav-icon--left  {}
+        .slick-slider__nav-icon--right {}
+
+
+    .slick-slider__dots {
+        @extend %inline-list;
+        position: absolute;
+        right: $spacing-unit * 2;
+        bottom: $spacing-unit * 2;
+        z-index: index($slick-slider-elements, slick-slider__dots);
+        text-align: center;
+
+        .slick-vertical & {
+            @include center($to: vertical);
+            left: -100%;
+        }
+
+        li {
+            margin: $slick-slider-dots-spacing;
+
+            .slick-vertical & {
+                display: block;
+            }
+        }
+
+        button {
+            display: block;
+            padding: 0;
+            width:  $slick-slider-dots-width;
+            height: $slick-slider-dots-width;
+            font-size: 0;
+            background: $slick-slider-dots-bg-color;
+            border: $slick-slider-dots-border-width solid $slick-slider-dots-border-color;
+            cursor: pointer;
+            outline: 0;
+
+            &:hover,
+            &:focus {
+                outline: 0;
+            }
+        }
+    }
+
+
+/*------------------------------------*\
+    #SLICK-LIST
+\*------------------------------------*/
+
+.slick-list { z-index: index($slick-slider-elements, slick-list); }
+
+
+/*------------------------------------*\
+    #SLICK-ACTIVE
+\*------------------------------------*/
+
+.slick-active {
+    button {
+        background: $slick-slider-dots-selected-bg-color;
+        border-color: $slick-slider-dots-selected-border-color;
+    }
+}

data/app/assets/stylesheets/workarea/storefront/swatches/components/_option_button.scss

@@ -0,0 +1,17 @@
+/*------------------------------------*\
+    #OPTION-BUTTON
+\*------------------------------------*/
+
+/**
+ * Extend the `.option-button` class from Workarea to include a swatch option.
+ *
+ * 1. These dimensions match the :small_thumb processor as configured out of the
+ *    box
+ */
+$option-button-swatch-height: 32px !default; /* [1] */
+$option-button-swatch-width: 32px !default; /* [1] */
+
+.option-button__swatch {
+    width: $option-button-swatch-width;
+    height: $option-button-swatch-height;
+}

data/app/assets/stylesheets/workarea/storefront/swatches/components/_swatch_facet.scss

@@ -0,0 +1,24 @@
+/*------------------------------------*\
+    #SWATCH-FACET
+\*------------------------------------*/
+
+/**
+ * Each `.swatch-facet` also receives an ID modifier class, in order to offer
+ * more granular control over the component, if needed. Since this is a
+ * dynamically generated value, they are not listed here.
+ */
+
+$swatch-facet-height: 20px !default;
+$swatch-facet-width:  20px !default;
+
+.swatch-facet {
+    display: inline-block;
+    width: $swatch-facet-width;
+    height: $swatch-facet-height;
+    text-decoration: none;
+    vertical-align: bottom;
+}
+
+.swatch-facet--hex {}
+.swatch-facet--image {}
+.swatch-facet--empty {}

data/app/assets/stylesheets/workarea/storefront/swatches/components/_swatch_options.scss

@@ -0,0 +1,63 @@
+/*------------------------------------*\
+    #SWATCH-OPTIONS
+\*------------------------------------*/
+
+$swatch-options-outline: 1px solid $light-gray !default;
+$swatch-options-selected-outline:  1px solid $product-swatch-selected-outline-color !default;
+$swatch-options-swatch-size: 36px !default;
+$swatch-options-small-swatch-size: 24px !default;
+
+
+/**
+* 1. Property not supported in IE11, progressive enhancement with fallback to no offset on outline for IE11.
+* 2. Do not allow swatch names to overflow the button when a swatch color is undefined.
+*/
+.swatch-options {}
+
+.swatch-options--small {}
+
+    .swatch-options__label {
+        margin: 0;
+    }
+
+    .swatch-options__group {
+        @extend %inline-list;
+    }
+
+        .swatch-options__swatch {
+            position: relative;
+            margin: 0 0 $spacing-unit;
+            width: $swatch-options-swatch-size;
+            height: $swatch-options-swatch-size;
+            outline: $swatch-options-outline;
+
+            & + & {
+                margin-left: $spacing-unit * 2;
+            }
+
+            .swatch-options--small & {
+                margin-top: $spacing-unit;
+                margin-bottom: 0;
+                width: $swatch-options-small-swatch-size;
+                height: $swatch-options-small-swatch-size;
+            }
+        }
+
+        .swatch-options__swatch--selected {
+            outline: $swatch-options-selected-outline;
+            outline-offset: 4px; /* [1] */
+        }
+
+            .swatch-options__swatch-button,
+            .swatch-options__swatch-button-image,
+            .swatch-options__swatch-button-text {
+                display: block;
+                position: absolute;
+                top:    0;
+                right:  0;
+                bottom: 0;
+                left:   0;
+                overflow: hidden; /* [2] */
+            }
+
+            .swatch-options__swatch-name {}

data/app/assets/stylesheets/workarea/storefront/theme_config/color_schemes/_neutral_color_scheme.scss

@@ -0,0 +1,195 @@
+/*------------------------------------*\
+    #NEUTRAL-COLOR-SCHEME
+\*------------------------------------*/
+/**
+ * Color Variables
+ *
+ * These variables should always be aliased as Functional Variables at
+ * the bottom of this file. Using color name variables outside of this file may
+ * cause errors when changing color scheme.
+ */
+
+$blue: #3366cc !default;
+$yellow: #fdcc5d !default;
+$red: #e52828 !default;
+$green: #19c06a !default;
+
+
+/**
+* Grey scale
+*/
+
+$white: #ffffff !default;
+$lightest-gray: #eff1ed !default;
+$light-gray: #ced0ce !default;
+$gray: #969a97 !default;
+$dark-gray: #3c474b !default;
+$black: #000000 !default;
+
+$black-alpha-15: rgba($black, 0.15) !default;
+$black-alpha-50: rgba($black, 0.50) !default;
+$white-alpha-50: rgba($white, 0.50) !default;
+$transparent: transparent !default;
+
+
+
+/**
+* Brand Color Variables
+*/
+
+$denim: #2c4251 !default;
+$denim-wash: #667783 !default;
+$cyan: #4f7cac !default;
+$muted-blue: #666a86 !default;
+
+// TODO: Figure out a better way to handle this. Preferred breaking BEM to doing more gross scss.erb dynamic imports
+.color-box__swatch--denim { background: $denim; }
+.color-box__swatch--denim-wash { background: $denim-wash; }
+.color-box__swatch--cyan { background: $cyan; }
+.color-box__swatch--muted-blue { background: $muted-blue; }
+// Greyscale
+.color-box__swatch--white { background: $white; }
+.color-box__swatch--lightest-gray { background: $lightest-gray; }
+.color-box__swatch--light-gray { background: $light-gray; }
+.color-box__swatch--gray { background: $gray; }
+.color-box__swatch--dark-gray { background: $dark-gray; }
+.color-box__swatch--black { background: $black; }
+
+
+
+/**
+ * FUNCTIONAL COLOR VARIABLES
+ */
+
+// Generic
+
+$primary-color: $cyan !default;
+$primary-color-dark: $denim-wash !default;
+
+$background-color: $white !default;
+$background-color-component: $lightest-gray !default;
+
+$font-color: $black !default;
+$link-color: $primary-color !default;
+$link-color-hover: $primary-color-dark !default;
+
+$border-color: $black !default;
+$highlight-color: $cyan !default;
+$overlay-shadow-color: $black-alpha-15 !default;
+
+// Buttons
+$button-color: $black !default;
+$button-background-color: $white !default;
+$button-border-color: $primary-color-dark !default;
+$button-border-color-hover: $primary-color !default;
+
+$button-filled-color: $white !default;
+$button-filled-background-color: $primary-color-dark !default;
+$button-filled-background-color-hover: $primary-color !default;
+
+$button-disabled-color: $light-gray !default;
+$button-disabled-background-color: $gray !default;
+
+// Forms
+$forms-color: $font-color !default;
+$forms-bg-color: $background-color !default;
+$forms-disabled-color: $gray !default;
+$forms-disabled-bg-color: $light-gray !default;
+$forms-placeholder-color: $gray !default;
+
+// Inputs
+$valid-color: $cyan !default;
+$invalid-color: $red !default;
+$input-border-color: $gray !default;
+$input-background-color: $transparent !default;
+$input-disabled-color: $light-gray !default;
+$input-disabled-background-color: $white !default;
+$input-disabled-border-color: $gray !default;
+$focus-ring-color: $primary-color-dark !default;
+$input-icon-color: $gray !default;
+
+$input-radio-color: $primary-color !default;
+$input-radio-border-color: $primary-color !default;
+$input-radio-fill-color: $white !default;
+$input-radio-background-color: $primary-color !default;
+
+$input-checkbox-color: $primary-color !default;
+$input-checkbox-border-color: $primary-color !default;
+$input-checkbox-fill-color: $white !default;
+
+// Tables
+$table-totals-border-color: $light-gray !default;
+$table-totals-total-border-color: $black !default;
+
+// Page Header
+$page-header-promo-color: $white !default;
+$page-header-promo-background-color: $primary-color-dark !default;
+$page-header-icon-color: $dark-gray !default;
+
+$cart-count-color: $white !default;
+$cart-count-background-color: $primary-color !default;
+
+$utility-nav-background-color: $white !default;
+$utility-nav-heading-color: $black !default;
+
+//Page Footer
+$page-footer-color: $denim !default;
+$page-footer-checkout-color: $denim !default;
+$page-footer-background-color: $lightest-gray !default;
+$page-footer-checkout-background-color: $white !default;
+$page-footer-link-color: $link-color !default;
+$page-footer-link-color-hover: $denim !default;
+$page-footer-heading-decoration-color: $denim !default;
+$page-footer-border-color: $gray !default;
+$page-footer-copyright-color: $gray !default;
+
+// Navigation
+$primary-navigation-background-color: $white !default;
+$primary-navigation-link-color: $primary-color !default;
+$primary-navigation-dropdown-background-color: $white !default;
+
+$mobile-navigation-background-color: $background-color-component !default;
+$mobile-navigation-link-color: $primary-navigation-link-color !default;
+$mobile-navigation-close-button-color: $black !default;
+$mobile-navigation-header-background-color: $lightest-gray !default;
+$mobile-navigation-header-border-color: $light-gray !default;
+
+// UI Dialog
+$dialog-header-bacground-color: $white !default;
+$dialog-overlay-color: $black-alpha-50 !default;
+
+// Product
+$product-name-color: $black !default;
+$product-id-color: $gray !default;
+$product-swatch-selected-outline-color: $black !default;
+$product-list-item-border-color: $light-gray !default;
+$product-recommendations-heading-decoration-color: $black !default;
+$product-price-decoration-color: $black !default;
+$product-review-border-color: $light-gray !default;
+
+// Slider
+$slider-arrow-color: $black-alpha-50 !default;
+$slider-dot-color: $gray !default;
+$slider-dot-border-color: $gray !default;
+$slider-dot-selected-color: $white !default;
+$slider-dot-selected-border-color: $black !default;
+
+// Filters
+$filter-selected-background-color: $lightest-gray !default;
+$filter-selected-border-color: $light-gray !default;
+$filter-remove-icon-color: $dark-gray !default;
+$aside-heading-color: $black !default;
+
+// Checkout Progress
+$checkout-progress-color: $gray !default;
+$checkout-progress-active-color: $primary-color !default;
+$checkout-progress-completed-color: $primary-color !default;
+$checkout-progress-step-number-color: $white !default;
+
+// Social Shares
+$share-icon-color: $primary-color-dark !default;
+$share-icon-color-hover: $primary-color !default;
+
+// Blog
+$blog-comment-border-color: $light-gray !default;
+$blog-summary-border-color: $light-gray !default;