re fe testing cleanup

package.json

@@ -61,7 +61,7 @@
     "@angular/router": "4.2.5",
     "@blackbaud/skyux": ">=2.0.0-rc.0 <2.0.0",
     "@blackbaud/skyux-builder": "1.0.0-rc.15",
-    "@blackbaud/skyux-design-tokens": "0.0.7",
+    "@blackbaud/skyux-design-tokens": "0.0.8",
     "@blackbaud/stache": "2.0.0-rc.2",
     "@types/core-js": "0.9.41",
     "@types/jasmine": "2.5.47",

src/app/components/wizard/wizard-demo-form.component.html

@@ -36,7 +36,7 @@
     <sky-tabset-nav-button buttonType="next" [tabset]="wizardDemo"></sky-tabset-nav-button>
     <button
       type="button"
-      class="sky-btn sky-btn-primary"
+      class="sky-btn sky-btn-default"
       (click)="instance.close()"
     >
       Save and close

src/app/design/color/index.html

@@ -91,6 +91,26 @@ <h2 class="sky-section-heading">Text</h2>
       </div>
     </div>
   </div>
+
+  <div class="definition-table definition-table-wide">
+    <div class="definition-item">
+      <div class="swatch" style="background-color: #007ca6;"></div>
+    </div>
+    <div class="definition-props">
+      <div class="definition-usage">
+        <div class="sky-field-label">Usage</div>
+        <div>Borderless icon buttons such as the expand/collapse chevron</div>
+      </div>
+      <div class="definition-code">
+        <div class="sky-field-label">Code</div>
+        <code>$sky-text-color-icon-borderless</code>
+      </div>
+      <div class="definition-styling">
+        <div class="sky-field-label">Styling</div>
+        <div>#cdcfd2</div>
+      </div>
+    </div>
+  </div>
 
   <h2 class="sky-section-heading">Backgrounds</h2>
 
@@ -194,6 +214,26 @@ <h2 class="sky-section-heading">Backgrounds</h2>
     </div>
   </div>
 
+  <div class="definition-table definition-table-wide">
+    <div class="definition-item">
+      <div class="swatch" style="background-color: #c1e8fb"></div>
+    </div>
+    <div class="definition-props">
+      <div class="definition-usage">
+        <div class="sky-field-label">Usage</div>
+        <div>Background for less important elements conveying an "information" status, such as applied filter bubbles</div>
+      </div>
+      <div class="definition-code">
+        <div class="sky-field-label">Code</div>
+        <code>$sky-background-color-info-light</code>
+      </div>
+      <div class="definition-styling">
+        <div class="sky-field-label">Styling</div>
+        <div>#c1e8fb</div>
+      </div>
+    </div>
+  </div>
+
   <div class="definition-table definition-table-wide">
     <div class="definition-item">
       <div class="swatch" style="background-color: #b7da9b"></div>

src/app/design/typography/index.html

@@ -172,6 +172,27 @@ <h2 class="sky-section-heading" id="section-heading">Section heading</h2>
     </div>
   </div>
 
+  <div class="definition-table definition-table-wide">
+    <div class="definition-item">
+      <div class="sky-control-label">Form control label</div>
+    </div>
+    <div class="definition-props">
+      <div class="definition-usage">
+        <div class="sky-field-label">Usage</div>
+        <div>This class formats labels for form input fields.</div>
+      </div>
+      <div class="definition-code">
+        <div class="sky-field-label">Code</div>
+        <code>&lt;label class=&quot;sky-control-label&quot;&gt;Form control label&lt;/label&gt;</code>
+      </div>
+      <div class="definition-styling">
+        <div class="sky-field-label">Styling</div>
+        <div>Blackbaud Sans 15px #282b31</div>
+        <div>margin-bottom: 5px</div>
+      </div>
+    </div>
+  </div>
+
   <div class="definition-table definition-table-wide">
     <div class="definition-item">
       <div class="sky-text-success">Success</div>

src/modules/action-button/action-button.component.scss

@@ -1,7 +1,7 @@
 @import '../../scss/mixins';
 
 .sky-action-button {
-  @include sky-border(light, top, bottom, left, right);
+  @include sky-border(dark, top, bottom, left, right);
   max-width: 236px;
   border-radius: 3px;
   cursor: pointer;

src/modules/chevron/chevron.component.scss

@@ -9,10 +9,15 @@
     overflow: hidden;
     padding: 0;
     width: $sky-context-menu-size;
+    cursor: pointer;
+
+  &:hover .sky-chevron-part {
+    border-color: darken($sky-text-color-icon-borderless, 20%);
+  }
 }
 
 .sky-chevron-part {
-    border-color: #d1dade;
+    border-color: $sky-text-color-icon-borderless;
     border-style: solid;
     border-width: 3px 0 0 0;
     display: inline-block;

src/modules/colorpicker/colorpicker.component.scss

@@ -121,7 +121,6 @@
     .sky-preset-color:hover {
       cursor: pointer;
       border: $sky-color-white solid 2px;
-      outline: 1px solid $sky-border-color-neutral-light;
       margin: 4px;
       width: 34px;
       height: 34px;

src/modules/datepicker/datepicker.component.scss

@@ -1,9 +1,11 @@
+@import "../../scss/mixins";
+
 .sky-input-group-datepicker-btn /deep/ .sky-dropdown-button.sky-btn {
   border-radius: 0;
-}
-
-.sky-input-group /deep/ .sky-form-control:not(.ng-invalid) {
-  border-right: none;
+  border-left: none;
+  &:hover{
+    @include sky-border(dark, left);
+  }
 }
 
 .sky-input-group-datepicker-btn /deep/ .sky-dropdown-menu {

src/modules/fileattachments/file-drop.component.scss

@@ -22,15 +22,15 @@
 }
 
 .sky-file-drop-contents {
-  @include sky-border(light, top, bottom, left, right);
+  @include sky-border(dark, top, bottom, left, right);
   background-color: $sky-background-color-neutral-light;
   padding: $sky-padding;
+  height: 100%;
 }
 
 .sky-file-drop-contents {
   color: $sky-text-color-default;
   cursor: pointer;
-  height: 120px;
   width: 100%;
   text-align: center;
 
@@ -93,7 +93,7 @@
 }
 
 .sky-file-drop-text-header {
-  font-size: 17px;
+  @include sky-headline;
   margin: 0;
 }
 
@@ -104,9 +104,6 @@
 }
 
 .sky-file-drop-text, .sky-file-drop-text-header {
-  font-style: italic;
-  color: $sky-text-color-deemphasized;
-  font-weight: 600;
   line-height: 1.1;
   display: block;
 }

src/modules/filter/filter-summary-item.component.scss

@@ -2,7 +2,7 @@
 
 .sky-filter-summary-item {
   display: inline-block;
-  background-color: $sky-background-color-info;
+  background-color: $sky-background-color-info-light;
   border: 1px solid $sky-highlight-color-info;
   border-radius: 4px;
   padding: 3px;

src/modules/search/search.component.scss

@@ -101,8 +101,7 @@
 
 .sky-input-group.sky-search-input-container.sky-search-input-focused {
 
-    border: 1px solid $sky-focus-border-color;
-    box-shadow: 0 0 8px $sky-focus-shadow-color;
+    @include sky-field-status(active);
     border-radius: 6px;
 
     .sky-input-group-btn {

src/modules/tiles/tile/tile.component.scss

@@ -57,7 +57,7 @@
 }
 
 .sky-tile-settings {
-    color: #D1DADE;
+    @include sky-icon-button-borderless;
     height: $sky-context-menu-size;
     margin: 12px ($sky-tile-header-tool-padding - 6) 12px 0;
     padding: 0;
@@ -67,7 +67,7 @@
 }
 
 .sky-tile-grab-handle {
-    color: #E7EAEC;
+    @include sky-icon-button-borderless;
     cursor: move;
     cursor: -webkit-grab;
     cursor: -moz-grab;

src/modules/timepicker/timepicker.component.scss

@@ -1,12 +1,12 @@
 @import "../../scss/variables";
 @import "../../scss/mixins";
 
-.sky-input-group-timepicker-btn /deep/ .sky-btn {
+input + .sky-input-group-timepicker-btn /deep/ .sky-btn {
   border-radius: 0;
-}
-
-.sky-input-group /deep/ .sky-form-control {
-  border-right: none;
+  border-left: none;
+  &:hover{
+    @include sky-border(dark, left);
+  }
 }
 
 .sky-input-group-timepicker-btn /deep/ .sky-dropdown-menu {

src/scss/_buttons.scss

@@ -3,7 +3,7 @@
 
 .sky-btn {
   background-color: transparent;
-  @include sky-border(light, top, bottom, left, right);
+  @include sky-border(dark, top, bottom, left, right);
   border-radius: 3px;
   color: $sky-text-color-default;
   cursor: pointer;
@@ -28,7 +28,7 @@
 }
 
 .sky-btn-default {
-  @include sky-button-variant($sky-text-color-default, $sky-color-white, $sky-border-color-neutral-light, $sky-background-color-neutral-light);
+  @include sky-button-variant($sky-text-color-default, $sky-color-white, $sky-border-color-neutral-medium, $sky-background-color-neutral-light);
 }
 
 .sky-btn-primary {
@@ -93,7 +93,7 @@
 }
 
 .sky-tab-header-count {
-    @include sky-emphasized();
+    font-weight: 400;
     color: $sky-text-color-action-primary;
     margin-left: $sky-margin-half;
 }

src/scss/_forms.scss

@@ -3,9 +3,13 @@
 .sky-form-control {
   width: 100%;
   padding: 6px 12px;
-  @include sky-border(light, top, bottom, left, right);
+  @include sky-border(dark, top, bottom, left, right);
   line-height: $sky-line-height-base;
   font-size: $sky-font-size-base;
+
+  &:focus {
+    @include sky-field-status(active);
+  }
 }
 
 .sky-form-group {
@@ -14,7 +18,7 @@
 
 input.ng-invalid.ng-touched,
 select.ng-invalid.submitted {
-  @include sky-field-invalid;
+  @include sky-field-status(invalid);
 }
 
 .sky-error-label {

src/scss/_mixins.scss

@@ -61,10 +61,22 @@
   font-size: $sky-font-size-base;
 }
 
-@mixin sky-field-invalid {
-  box-shadow: 0 0 8px rgba(237, 85, 101, 0.6);
-  border: 1px solid #ed5565;
-  outline: none;
+@mixin sky-field-status($status) {
+  @if($status == "active") {
+    box-shadow: 0 0 8px rgba($sky-highlight-color-info, 0.6);
+    border: 1px solid $sky-highlight-color-info;
+    outline: none;
+  }
+  @if($status == "invalid") {
+    box-shadow: 0 0 8px rgba($sky-highlight-color-danger, 0.6);
+    border: 1px solid $sky-highlight-color-danger;
+    outline: none;
+  }
+  @if($status == "success") {
+    box-shadow: 0 0 8px rgba($sky-highlight-color-success, 0.6);
+    border: 1px solid $sky-highlight-color-success;
+    outline: none;
+  }
 }
 
 @mixin sky-btn-tab {
@@ -124,6 +136,15 @@
   );
 }
 
+@mixin sky-icon-button-borderless {
+    color: $sky-text-color-icon-borderless;
+    cursor: pointer;
+
+    &:hover, &:focus {
+        color: darken($sky-text-color-icon-borderless, 20%);
+    }
+}
+
 @mixin sky-button-variant($color, $background, $border, $hoverbackground:darken($background, 10%)) {
   color: $color;
   background-color: $background;
@@ -136,7 +157,7 @@
   &.sky-btn-active {
     color: $color;
     background-color: $hoverbackground;
-    border-color: darken($border, 12%);
+    border-color: darken($border, 10%);
   }
   &:active,
   &.sky-btn-active {

src/scss/_theme.scss

@@ -136,19 +136,22 @@ mark.sky-highlight-mark {
 
 /* Placeholder Text */
 ::-webkit-input-placeholder {
-    @include sky-deemphasized();
+    @include sky-deemphasized;
+    opacity: 1;
 }
 
 ::-moz-placeholder { /* Firefox 19+ */
-    @include sky-deemphasized();
-    opacity: 1; // See https://github.com/twbs/bootstrap/pull/11526
+    @include sky-deemphasized;
+    opacity: 1;
 }
 
 input:-moz-placeholder { /* Firefox 18- */
-    @include sky-deemphasized();
+    @include sky-deemphasized;
+    opacity: 1;
 }
 
 :-ms-input-placeholder { /* IE */
-    @include sky-deemphasized();
+    @include sky-deemphasized;
+    opacity: 1;
 }
 /* End Placeholder Text */

src/scss/_variables.scss

@@ -1,6 +1,6 @@
 @import '~@blackbaud/skyux-design-tokens/scss/variables.scss';
 
-$sky-font-family: "Blackbaud Sans", Helvetica, Arial, sans-serif !default;
+$sky-font-family: "Blackbaud Sans", "Helvetica Neue", Arial, sans-serif !default;
 $sky-font-family-condensed: "Blackbaud Sans Condensed", "Helvetica Neue Condensed", "Arial Narrow" !default;
 
 $sky-padding: 10px !default;
@@ -51,11 +51,6 @@ $sky-screen-xs-max: $sky-screen-sm-min - 1;
 $sky-screen-sm-max: $sky-screen-md-min - 1;
 $sky-screen-md-max: $sky-screen-lg-min - 1;
 
-// begin focus
-$sky-focus-border-color: #1f90d8 !default;
-$sky-focus-shadow-color: rgba(28, 132, 198, 0.6) !default;
-// end focus
-
 // begin color palette
 $sky-palette-multi: (
   scale-color($sky-color-blue-50, $lightness: 8%),