5 :
Colors


5.1 :
Global Colors

Globally shared colors across all SHC sites.

5.1.1 :
Font Colors

Global font colors. #666 should not be used on text smaller than 16px.

  • @font-color-primary:
    #333
  • @font-color-secondary:
    #666
  • @font-color-savings:
    #D01833
<ul class="list-colors secondary">
  <li>
    <div class="swatch" style="background:#333;"></div>
    @font-color-primary:<br />
    #333
  </li>
  <li>
    <div class="swatch" style="background:#666;"></div>
    @font-color-secondary:<br />
    #666
  </li>
  <li>
    <div class="swatch" style="background:#D01833;"></div>
    @font-color-savings:<br />
    #D01833
  </li>
</ul>

5.1.2 :
Button Colors

The following are for global button colors. The primary button color will vary by site, and those hex values are in the Site-Specific area of this styleguide as a result.

  • @button-color-secondary:
    #EEE
  • @button-color-secondary-border:
    #D0D0D0
  • @button-color-secondary-hover:
    #E3E3E3
  • @button-color-tertiary:
    #FFF
  • @button-color-tertiary-border:
    #AAA
  • @button-color-tertiary-hover:
    #E3E3E3
<ul class="list-colors">
  <li>
    <div class="swatch" style="background:#EEE"></div>
    @button-color-secondary:<br />
    #EEE
  </li>
  <li>
    <div class="swatch" style="background:#D0D0D0"></div>
    @button-color-secondary-border:<br />
    #D0D0D0
  </li>
  <li>
    <div class="swatch" style="background:#E3E3E3"></div>
    @button-color-secondary-hover:<br />
    #E3E3E3
  </li>
</ul>
<ul class="list-colors">
  <li>
    <div class="swatch" style="background:#FFF"></div>
    @button-color-tertiary:<br />
    #FFF
  </li>
  <li>
    <div class="swatch" style="background:#AAA"></div>
    @button-color-tertiary-border:<br />
    #AAA
  </li>
  <li>
    <div class="swatch" style="background:#E3E3E3"></div>
    @button-color-tertiary-hover:<br />
    #E3E3E3
  </li>
</ul>

5.1.3 :
Form Feedback Colors

Form feedback comes in a few different flavors, from specific form labels and inputs getting recolored to special .feedback-message elements for more lengthy feedback messages for the form in general.

  • Border Colors:
  • @feedback-color-success:
    #347814
  • @feedback-color-alert:
    #FEC70B
  • @feedback-color-error:
    #D01833
  • Background Colors:
  • @feedback-color-success-background:
    #D6E4D0 or 20% of #347814
  • @feedback-color-alert-background:
    #FEF3CE or 20% of #FEC70B
  • @feedback-color-error-background:
    #F5D0D6 or 20% of #D01833
  • Font Colors:
  • @feedback-color-success:
    #347814
  • @font-color-primary:
    #333
  • @feedback-color-error:
    #D01833
<ul class="list-colors">
  <li class="title">Border Colors:</li>
  <li>
    <div class="swatch" style="background:#347814;"></div>
    @feedback-color-success:
    <br />#347814
  </li>
  <li>
    <div class="swatch" style="background:#FEC70B;"></div>
    @feedback-color-alert:
    <br />#FEC70B
  </li>
  <li>
    <div class="swatch" style="background:#D01833;"></div>
    @feedback-color-error:
    <br />#D01833
  </li>
</ul>
<ul class="list-colors">
  <li class="title">Background Colors:</li>
  <li>
    <div class="swatch feedback-bg-success" style="background:#D6E4D0"></div>
    @feedback-color-success-background:
    <br />#D6E4D0 or 20% of #347814
  </li>
  <li>
    <div class="swatch feedback-bg-alert" style="background:#FEF3CE"></div>
    @feedback-color-alert-background:
    <br />#FEF3CE or 20% of #FEC70B
  </li>
  <li>
    <div class="swatch feedback-bg-error" style="background:#F5D0D6"></div>
    @feedback-color-error-background:
    <br />#F5D0D6 or 20% of #D01833
  </li>
</ul>
<ul class="list-colors">
  <li class="title">Font Colors:</li>
  <li>
    <div class="swatch" style="background:#347814;"></div>
    @feedback-color-success:
    <br />#347814
  </li>
  <li>
    <div class="swatch" style="background:#333;"></div>
    @font-color-primary:
    <br />#333
  </li>
  <li>
    <div class="swatch" style="background:#D01833;"></div>
    @feedback-color-error:
    <br />#D01833
  </li>
</ul>

5.1.4 :
Background Colors

Enterprise has two default global background colors. Primary is to be used on most content, whereas Secondary should be reserved for content that is in some way personalized.

  • @content-color-background-primary:
    #FFF
  • @content-color-background-secondary:
    #EEE
<ul class="list-colors">
  <li>
    <div class="swatch" style="background:#FFF"></div>
    @content-color-background-primary:<br>
    #FFF
  </li>
  <li>
    <div class="swatch" style="background:#EEE"></div>
    @content-color-background-secondary:<br>
    #EEE
  </li>
</ul>

5.1.4.1 :
Mobile Background Colors

Enterprise has two default global background colors. Primary is to be used on most content, whereas Secondary should be reserved for content that is in some way personalized.

  • @content-color-background-primary:
    #FFF
  • @content-color-background-secondary:
    #EDEBEB
<ul class="list-colors">
  <li>
    <div class="swatch" style="background:#FFF"></div>
    @content-color-background-primary:<br>
    #FFF
  </li>
  <li>
    <div class="swatch" style="background:#EDEBEB"></div>
    @content-color-background-secondary:<br>
    #EDEBEB
  </li>
</ul>

5.1.5 :
Border Colors

Any element requiring a border should pull from this set of global colors.

  • @content-color-border-light:
    #E3E3E3
  • @content-color-border-medium:
    #D0D0D0
  • @content-color-border-dark:
    #AAA
  • @content-color-border-hover:
    #333
  • @content-color-border-hover (Sears only):
    #001733

<ul class="list-colors">
  <li>
    <div class="swatch" style="background:#E3E3E3;"></div>
    @content-color-border-light:<br />
    #E3E3E3
  </li>
  <li>
    <div class="swatch" style="background:#D0D0D0;"></div>
    @content-color-border-medium:<br />
    #D0D0D0
  </li>
  <li>
    <div class="swatch" style="background:#AAA;"></div>
    @content-color-border-dark:<br />
    #AAA
  </li>
</ul>
<ul class="list-colors">
  <li>
    <div class="swatch" style="background:#333;"></div>
    @content-color-border-hover:<br />
    #333
  </li>
  <li>
    <div class="swatch" style="background:#001733;"></div>
    @content-color-border-hover (Sears only):<br />
    #001733
  </li> 
</ul>

5.1.6 :
Brand Colors

These colors are made available in the event that a specific brand's color needs to be used on another site (eg. Craftsman red is needed on sears.com).

  • @brand-color-sears: #003980
  • @brand-color-kmart: #d12727
  • @brand-color-craftsman: #CC0033
  • @brand-color-kenmore: #111
  • @brand-color-syw: #F17F21
<ul class="list-colors">  
  <li>
    <div class="swatch" style="background:#003980;"></div>
    @brand-color-sears: #003980
  </li>
  <li>
    <div class="swatch" style="background:#d12727;"></div>
    @brand-color-kmart: #d12727
  </li>
</ul>
<ul class="list-colors">
  <li>
    <div class="swatch" style="background:#CC0033;"></div>
    @brand-color-craftsman: #CC0033
  </li>
  <li>
    <div class="swatch" style="background:#111;"></div>
    @brand-color-kenmore: #111
  </li>
</ul>
<ul class="list-colors">
  <li>
    <div class="swatch" style="background:#F17F21;"></div>
    @brand-color-syw: #F17F21
  </li>
</ul>

5.2 :
Site-Specific Colors

Colors defined by a site-specific mixin file included after mixin.less. The values found here are failsafes and reflect Sears' colors.

These colors only pertain to values that change site-to-site. Global element colors (secondary buttons, most border colors, et al) can be found above in the global section.

Sears Site Kmart Site Craftsman Site Kenmore Site
  • Content Colors
  • @content-color-brand:
    #003980
  • @content-color-action:
    #005CCC
  • Font Colors
  • @font-color-primary:
    #001733
  • @font-color-brand:
    #003980
  • @font-color-action:
    #005CCC
  • Primary Button Colors
  • @button-color-primary:
    #ff4800
  • @button-color-primary-border:
    #FF4800 #FF4800 #C23700
  • @button-color-primary-hover:
    #FF6326
  • Content Colors
  • @content-color-brand:
    #D12727
  • @content-color-action:
    #B10017
  • Font Colors
  • @font-color-brand:
    #D12727
  • @font-color-action:
    #B10017
  • Primary Button Colors
  • @button-color-primary:
    #C6281E
  • @button-color-primary-border:
    #C6281E #C6281E #831A14
  • @button-color-primary-hover:
    #CE483F
  • Content Colors
  • @content-color-brand:
    #CC0033
  • @content-color-action:
    #C13D3A
  • Font Colors
  • @font-color-brand:
    #CC0033
  • @font-color-action:
    #C13D3A
  • Primary Button Colors
  • @button-color-primary:
    #CC0033
  • @button-color-primary-border:
    #CC0033 #CC0033 #8E0801
  • @button-color-primary-hover:
    #DA5858
  • Content Colors
  • @content-color-brand:
    #111
  • @content-color-action:
    #096FBD
  • Font Colors
  • @font-color-brand:
    #111
  • @font-color-action:
    #096FBD
  • Primary Button Colors
  • @button-color-primary:
    #096FBD
  • @button-color-primary-border:
    #096FBD #096FBD #064474
  • @button-color-primary-hover:
    #368FD3
<p>
    These colors only pertain to values that change site-to-site. Global element colors (secondary buttons, most border colors, et al) can be found above in the global section.
</p>
<div class="has-tabs">
  <span data-tab="colortab1" class="tab active">Sears Site</span>
  <span data-tab="colortab2" class="tab">Kmart Site</span>
  <span data-tab="colortab3" class="tab">Craftsman Site</span>
  <span data-tab="colortab4" class="tab">Kenmore Site</span>
</div>
<div class="has-tab-content secondary clearfix">
  <div data-tab="colortab1" class="tab-content active sears">
    <ul class="list-colors">
      <li class="title-4">Content Colors</li>
      <li>
        <div class="swatch" style="background:#003980"></div>
        @content-color-brand:<br>
        #003980
      </li>
      <li>
        <div class="swatch" style="background:#005CCC"></div>
        @content-color-action:<br>
        #005CCC
      </li>
      <li class="title-4">Font Colors</li>
      <li>
        <div class="swatch" style="background:#001733;"></div>
        @font-color-primary:<br>
        #001733
      </li>
      <li>
        <div class="swatch" style="background:#003980"></div>
        @font-color-brand:<br>
        #003980
      </li>
      <li>
        <div class="swatch" style="background:#005CCC"></div>
        @font-color-action:<br>
        #005CCC
      </li>
    </ul>
    <ul class="list-colors">
      <li class="title-4">Primary Button Colors</li>
      <li>
        <div class="swatch" style="background:#ff4800"></div>
        @button-color-primary:<br>
        #ff4800
      </li>
      <li>
        <div class="swatch" style="background:#C23700"></div>
        @button-color-primary-border:<br>
        #FF4800 #FF4800 #C23700
      </li>
      <li>
        <div class="swatch" style="background:#FF6326"></div>
        @button-color-primary-hover:<br>
        #FF6326
      </li>
    </ul>
  </div>
  <div data-tab="colortab2" class="tab-content kmart">
    <ul class="list-colors">
      <li class="title-4">Content Colors</li>
      <li>
        <div class="swatch" style="background:#d12727"></div>
        @content-color-brand:<br>
        #D12727
      </li>
      <li>
        <div class="swatch" style="background:#B10017"></div>
        @content-color-action:<br>
        #B10017
      </li>
      <li class="title-4">Font Colors</li>
      <li>
        <div class="swatch" style="background:#d12727"></div>
        @font-color-brand:<br>
        #D12727
      </li>
      <li>
        <div class="swatch" style="background:#B10017"></div>
        @font-color-action:<br>
        #B10017
      </li>
    </ul>
    <ul class="list-colors">
      <li class="title-4">Primary Button Colors</li>
      <li>
        <div class="swatch" style="background:#C6281E"></div>
        @button-color-primary:<br>
        #C6281E
      </li>
      <li>
        <div class="swatch" style="background:#831A14"></div>
        @button-color-primary-border:<br>
        #C6281E #C6281E #831A14
      </li>
      <li>
        <div class="swatch" style="background:#CE483F"></div>
        @button-color-primary-hover:<br>
        #CE483F
      </li>
    </ul>
  </div>
  <div data-tab="colortab3" class="tab-content craftsman">
    <ul class="list-colors">
      <li class="title-4">Content Colors</li>
      <li>
        <div class="swatch" style="background:#CC0033"></div>
        @content-color-brand:<br>
        #CC0033
      </li>            
      <li>
        <div class="swatch" style="background:#C13D3A"></div>
        @content-color-action:<br>
        #C13D3A
      </li>
      <li class="title-4">Font Colors</li>
      <li>
        <div class="swatch" style="background:#CC0033"></div>
        @font-color-brand:<br>
        #CC0033
      </li>
      <li>
        <div class="swatch" style="background:#C13D3A"></div>
        @font-color-action:<br>
        #C13D3A
      </li>
    </ul>
    <ul class="list-colors">
      <li class="title-4">Primary Button Colors</li>
      <li>
        <div class="swatch" style="background:#CC0033"></div>
        @button-color-primary:<br>
        #CC0033
      </li>
      <li>
        <div class="swatch" style="background:#8E0801"></div>
        @button-color-primary-border:<br>
        #CC0033 #CC0033 #8E0801
      </li>
      <li>
        <div class="swatch" style="background:#DA5858"></div>
        @button-color-primary-hover:<br>
        #DA5858
      </li>
    </ul>
  </div>
  <div data-tab="colortab4" class="tab-content kenmore">
    <ul class="list-colors">
      <li class="title-4">Content Colors</li>
      <li>
        <div class="swatch" style="background:#111"></div>
        @content-color-brand:<br>
        #111
      </li>
      <li>
        <div class="swatch" style="background:#096FBD"></div>
        @content-color-action:<br>
        #096FBD
      </li>
      <li class="title-4">Font Colors</li>
      <li>
        <div class="swatch" style="background:#111"></div>
        @font-color-brand:<br>
        #111
      </li>
      <li>
        <div class="swatch" style="background:#096FBD"></div>
        @font-color-action:<br>
        #096FBD
      </li>
    </ul>
    <ul class="list-colors">
      <li class="title-4">Primary Button Colors</li>
      <li>
        <div class="swatch" style="background:#096FBD"></div>
        @button-color-primary:<br>
        #096FBD
      </li>
      <li>
        <div class="swatch" style="background:#064474"></div>
        @button-color-primary-border:<br>
        #096FBD #096FBD #064474
      </li>
      <li>
        <div class="swatch" style="background:#368FD3"></div>
        @button-color-primary-hover:<br>
        #368FD3
      </li>
    </ul>
  </div>
</div>