workarea-one_theme 1.3.0

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

@@ -0,0 +1,26 @@
+/*------------------------------------*\
+    #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: 16px !default;
+$swatch-facet-width:  16px !default;
+
+.swatch-facet {
+    display: inline-block;
+    margin: ($spacing-unit / 2) $spacing-unit ($spacing-unit / 2) 0;
+    width: $swatch-facet-width;
+    height: $swatch-facet-height;
+    text-decoration: none;
+    vertical-align: middle;
+    border: 1px solid $border-color;
+}
+
+.swatch-facet--hex {}
+.swatch-facet--image {}
+.swatch-facet--empty {}

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

@@ -0,0 +1,55 @@
+/*------------------------------------*\
+    #SWATCH-OPTIONS
+\*------------------------------------*/
+
+$swatch-options-outline: 1px solid $light-gray !default;
+$swatch-options-selected-outline:  1px solid $highlight-color !default;
+
+.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:  44px;
+            height: 44px;
+            outline: $swatch-options-outline;
+            overflow: hidden;
+
+            & + & {
+                margin-left: $spacing-unit;
+            }
+
+            .swatch-options--small & {
+                margin-top:    $spacing-unit;
+                margin-bottom: 0;
+                width:  22px;
+                height: 22px;
+            }
+        }
+
+        .swatch-options__swatch--selected {
+            outline: $swatch-options-selected-outline;
+        }
+
+            .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;
+            }
+
+            .swatch-options__swatch-name {}

data/app/assets/stylesheets/workarea/storefront/theme_config/_midnight_color_scheme.scss

@@ -0,0 +1,110 @@
+/*------------------------------------*\
+    #MIDNIGHT-COLOR-SCHEME
+\*------------------------------------*/
+/**
+ * Color Variables
+ *
+ * These variables should always be aliased as Functional Variables at
+ * the bottom of this file.
+ */
+
+$blue:                              #3366cc !default;
+$yellow:                            #fdcc5d !default;
+$red:                               #ee283b !default;
+$green:                             #19c06a !default;
+
+$white:                             #ffffff !default;
+$gray:                              #666666 !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;
+
+/**
+ * Theme colors
+ */
+
+$mustard: #fdd74c !default;
+$gray: #cfcccb !default;
+$lightest-gray: #f7f7f7 !default;
+$light-gray: #e0e0e0 !default;
+$dark-gray: #9b9b9b !default;
+$off-black: #081c18 !default;
+$denim: #223540 !default;
+$lightest-denim: #71b2cc !default;
+$light-denim: #385b66 !default;
+$dark-denim: #152026 !default;
+
+// TODO: Figure out a better way to handle this. Preferred breaking BEM to doing more gross scss.erb dynamic imports
+.color-box__swatch--mustard { background: $mustard; }
+.color-box__swatch--gray { background: $gray; }
+.color-box__swatch--lightest-gray { background: $lightest-gray; }
+.color-box__swatch--light-gray { background: $light-gray; }
+.color-box__swatch--dark-gray { background: $dark-gray; }
+.color-box__swatch--off-black { background: $off-black; }
+.color-box__swatch--denim { background: $denim; }
+.color-box__swatch--lightest-denim { background: $lightest-denim; }
+.color-box__swatch--light-denim { background: $light-denim; }
+.color-box__swatch--dark-denim { background: $dark-denim; }
+
+
+/**
+ * Global Functional Color Variables
+ * These variables should be used at the top of the Component SCSS that they
+ * belong to.
+ *
+ * This method helps aid the quick reskinning of Components.
+ */
+
+$primary-color: $mustard !default;
+$primary-color-light: lighten($primary-color, 15%) !default;
+$primary-color-dark: darken($primary-color, 15%) !default;
+
+$background-color: $dark-denim !default;
+$background-color-component: $denim !default;
+$background-secondary-color: $denim !default;
+
+$border-color: $light-denim !default;
+$highlight-color: $background-color !default;
+
+$font-color: $lightest-gray !default;
+$heading-color: $lightest-gray !default;
+$heading-color-secondary: $lightest-gray !default;
+$product-name-color: $lightest-gray !default;
+
+$header-icon-color: $lightest-gray !default;
+$header-icon-color-hover: $primary-color !default;
+$utility-nav-background-color: $light-denim !default;
+
+$primary-nav-background-color: $background-secondary-color !default;
+$primary-nav-border-color: $border-color !default;
+$primary-nav-links: $lightest-gray !default;
+$primary-nav-dropdown-links: $lightest-gray !default;
+$mobile-nav-links: $lightest-gray !default;
+
+$footer-text: $lightest-gray !default;
+
+$link-color: $primary-color !default;
+$link-color-hover: $primary-color-dark !default;
+$link-secondary-color: $primary-nav-links !default;
+$link-secondary-color-hover: $lightest-denim !default;
+$button-text-color: $off-black !default;
+
+$label-color: $lightest-gray !default;
+$input-color: $off-black !default;
+$input-background-color: $lightest-gray !default;
+$input-hover-border-color: lighten($border-color, 35%) !default;
+$input-secondary-color: $off-black !default;
+$input-secondary-bg-color: $lightest-gray !default;
+$input-invalid-color: $red !default;
+$input-required-color: $red !default;
+
+$overlay-shadow-color: rgba($black, 0.1) !default;
+
+$focus-ring-color: $blue !default;
+
+$ui-dialog-titlebar-bg-color: $background-secondary-color !default;

data/app/assets/stylesheets/workarea/storefront/theme_config/_one_color_scheme.scss

@@ -0,0 +1,104 @@
+/*------------------------------------*\
+    #ONE-COLOR-SCHEME
+\*------------------------------------*/
+/**
+ * Color Variables
+ *
+ * These variables should always be aliased as Functional Variables at
+ * the bottom of this file.
+ */
+
+$blue:                              #3366cc !default;
+$yellow:                            #fdcc5d !default;
+$red:                               #ee283b !default;
+$green:                             #19c06a !default;
+
+$white:                             #ffffff !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;
+
+/**
+ * Theme colors
+ */
+
+$dark-gray: #213236 !default;
+$gray: #425154 !default;
+$light-gray: #e7e7e7 !default;
+$off-blackish-blue: #2b4146 !default;
+$off-black: #1a1a1a !default;
+$off-white: #f7f7f7 !default;
+$burnt-orange: #c04f1d !default;
+$dark-burnt-orange: #7e3413 !default;
+
+// TODO: Figure out a better way to handle this. Preferred breaking BEM to doing more gross scss.erb dynamic imports
+.color-box__swatch--dark-gray { background: $dark-gray; }
+.color-box__swatch--gray { background: $gray; }
+.color-box__swatch--light-gray { background: $light-gray; }
+.color-box__swatch--off-black { background: $off-black; }
+.color-box__swatch--off-white { background: $off-white; }
+.color-box__swatch--burnt-orange { background: $burnt-orange; }
+.color-box__swatch--dark-burnt-orange { background: $dark-burnt-orange; }
+
+
+/**
+ * Global Functional Color Variables
+ * These variables should be used at the top of the Component SCSS that they
+ * belong to.
+ *
+ * This method helps aid the quick reskinning of Components.
+ */
+
+$primary-color: $burnt-orange !default;
+$primary-color-light: lighten($burnt-orange, 35%) !default;
+$primary-color-dark: $dark-burnt-orange !default;
+
+$background-color: $off-white !default;
+$background-color-component: $white !default;
+$background-secondary-color: $dark-gray !default;
+
+$border-color: $light-gray !default;
+$highlight-color: $off-white !default;
+
+$font-color: $black !default;
+$heading-color: $off-black !default;
+$heading-color-secondary: $white !default;
+$product-name-color: $heading-color !default;
+
+$header-icon-color: $white !default;
+$header-icon-color-hover: $primary-color !default;
+$utility-nav-background-color: $gray !default;
+
+$primary-nav-background-color: $background-secondary-color !default;
+$primary-nav-border-color: $off-blackish-blue !default;
+$primary-nav-links: $white !default;
+$primary-nav-dropdown-links: $dark-gray !default;
+$mobile-nav-links: $dark-gray !default;
+
+$footer-text: $white !default;
+
+$link-color: $primary-color !default;
+$link-color-hover: $dark-burnt-orange !default;
+$link-secondary-color: $white !default;
+$link-secondary-color-hover: $white !default;
+$button-text-color: $white !default;
+
+$label-color: $dark-gray !default;
+$input-color: $dark-gray !default;
+$input-background-color: $white !default;
+$input-hover-border-color: darken($border-color, 35%) !default;
+$input-secondary-color: $white !default;
+$input-secondary-bg-color: $gray !default;
+$input-invalid-color: $red !default;
+$input-required-color: $red !default;
+
+$overlay-shadow-color: rgba($black, 0.1) !default;
+
+$focus-ring-color: $blue !default;
+
+$ui-dialog-titlebar-bg-color: $background-secondary-color !default;

data/app/assets/stylesheets/workarea/storefront/theme_config/_workarea_color_scheme.scss

@@ -0,0 +1,105 @@
+/*------------------------------------*\
+    #WORKAREA-COLOR-SCHEME
+\*------------------------------------*/
+/**
+ * Color Variables
+ *
+ * These variables should always be aliased as Functional Variables at
+ * the bottom of this file.
+ */
+
+$blue:                              #3366cc !default;
+$yellow:                            #fdcc5d !default;
+$red:                               #ee283b !default;
+$green:                             #19c06a !default;
+
+$white:                             #ffffff !default;
+$gray:                              #666666 !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;
+
+/**
+ * Theme colors
+ */
+
+$off-black: #30354a !default;
+$blue: #0060ff !default;
+$alt-blue: #011eff !default;
+$lighter-gray: #f6f6f6 !default;
+$light-gray: #c5c5c5 !default;
+$gray: #999999 !default;
+$dark-gray: #666666 !default;
+
+// TODO: Figure out a better way to handle this. Preferred breaking BEM to doing more gross scss.erb dynamic imports
+.color-box__swatch--off-black { background: $off-black; }
+.color-box__swatch--blue { background: $blue; }
+.color-box__swatch--alt-blue { background: $alt-blue; }
+.color-box__swatch--gray { background: $gray; }
+.color-box__swatch--light-gray { background: $light-gray; }
+.color-box__swatch--dark-gray { background: $dark-gray; }
+.color-box__swatch--lighter-gray { background: $lighter-gray; }
+
+
+/**
+ * Global Functional Color Variables
+ * These variables should be used at the top of the Component SCSS that they
+ * belong to.
+ *
+ * This method helps aid the quick reskinning of Components.
+ */
+
+$primary-color: $blue !default;
+$primary-color-light: lighten($primary-color, 15%) !default;
+$primary-color-dark: darken($primary-color, 15%) !default;
+
+$background-color: $lighter-gray !default;
+$background-color-component: $white !default;
+$background-secondary-color: $white !default;
+
+$border-color: $light-gray !default;
+$primary-nav-border-color: $border-color !default;
+$highlight-color: $background-color !default;
+
+$font-color: $off-black !default;
+$heading-color: $off-black !default;
+$heading-color-secondary: $off-black !default;
+$product-name-color: $off-black !default;
+
+$header-icon-color: $dark-gray !default;
+$header-icon-color-hover: $primary-color !default;
+$utility-nav-background-color: $white !default;
+
+$primary-nav-background-color: $background-secondary-color !default;
+$primary-nav-border-color: $off-black-light !default;
+$primary-nav-links: $off-black !default;
+$primary-nav-dropdown-links: $off-black !default;
+$mobile-nav-links: $black !default;
+
+$footer-text: $off-black !default;
+
+$link-color: $primary-color !default;
+$link-color-hover: $primary-color-dark !default;
+$link-secondary-color: $primary-nav-links !default;
+$link-secondary-color-hover: $primary-nav-links !default;
+$button-text-color: $white !default;
+
+$label-color: $dark-gray !default;
+$input-color: $dark-gray !default;
+$input-background-color: $white !default;
+$input-hover-border-color: darken($border-color, 35%) !default;
+$input-secondary-color: $off-black !default;
+$input-secondary-bg-color: $lighter-gray !default;
+$input-invalid-color: $red !default;
+$input-required-color: $red !default;
+
+$overlay-shadow-color: rgba($black, 0.1) !default;
+
+$focus-ring-color: $blue !default;
+
+$ui-dialog-titlebar-bg-color: $light-gray !default;

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

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

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

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