Design tokens (#878)

* Ng4 upgrade (#799)

* Package upgrades

* Fixed tslint issues

TODO:
  - fix search and sort tests

* Update package.json

* Fix context replacement plugin

* Remove forkCheckerPlugin from webpack

* Fix contentBase error

* fix sort test add logging back to karma.conf

* Fix search tests

TODO:
  - fix code coverage gaps

* Fix lint errors

* ignore new istanbul quirks

* update rollup to include platform browser name

* Angular 4 Upgrade > Additional Edits (#702)

* Allow for proper nesting for getting data for lists and grids (#671)

* Changed the list helper getData function to set the result to null if the final part was undefined so that nesting works correctly.

* Added unit tests

* updates skyux2 docs to use stache2 (#681)

* home page and pulling in stache things

* removed need for title service

* components demo component using stache

* removed change to package json

* removed unecessary method

* updating learn page and removing overview folder

* spacing issue fixed

* Convert reference topics to Stache 2

* refactored all the tutorial section

* Doc tweaks for Stache 2.

* Final doc tweaks before merge

* versioned without vs

* Update builder version (#693)

* Update builder version

* Remove unneeded packages

* Update full page modal header sizes (#679)

* Update full page modal header sizes

* Update full screen modal screenshots

* Travis build 1313 pushed to skyux2 [ci skip]

* Update wait component z-index (#684)

* Travis build 1316 pushed to skyux2 [ci skip]

* Adjust padding for closeable tab (#685)

To account for built-in padding in the close button.

* Travis build 1318 pushed to skyux2 [ci skip]

* Handle styles for filedrop when links are not allowed (#686)

* Travis build 1325 pushed to skyux2 [ci skip]

* Add cancel button to wizard docs and update modal button spacing (#689)

* Added yarn lock

* Cleaned files based on lint rules

* Removed unused comments

* Updated excluded source maps

* Updated version of tslint

* Fixed linting errors

* Reverting version of browserstack-local

* Update to connect to browserstack properly

Use browserstack service instead of binary. Also fix error with axe.

* Fix variable name

* Bump tests

* Remove unit tests to test visual tests on their own

* Actually remove unit tests for ci to run visuals

* Use one parallel test

* Add error logs for wdio

* Add unit tests back

* Log build number for visual tests on ci

* Add logs to see what's going on

* Try to use travis browsersrtack addon

* try using travis browserstack again

* remove old browserstack stuff

* Use encrypted variables with travis browserstack

* Add more logging and use different travis encryption

* Add more logging

* Add more logging to webdriver

* Add more logging

* Tweak visual server settings

* try running visual test webpack dev server

* set noInfo to false

* update host for dev server

* use local browserstack wdio

* see what error occurs when using nonsense text

* Add env variables back

* Add more wdio configuration

* Use browserstack binary

* Remove extra options from visual-server

* Remove unneeded logging

* make log level silent

* Run entire test suite

Revert normalize-sass to original version

* use old wdio versions for testing

* Add connection retry settings

* whitespace bump

* Re update wdio packages

* Remove unneeded logging

* Remove parallel testing

* Use sudo required for builds

* remove reference to browserstack-local

* See how 25 parallel tests run

* Use 3 parallel visual tests and latest stable version of node

* Update visual-server.js

* Update travis-script.sh

* Updated formatting

* More adjustments

* Added console logs

* Added error checking

* Added logs

* Reduced number of instances

* Updated logs

* Updated log

* Updated logs

* Updates

* Removed console logs

* Changed styles for visual test

* Updated wait test

* Updates to private variables

* Updated list toolbar default

* Updated public variable

* Updating selenium version

* Fixed bugs with templates

* Cleaned up unnecessary changes

* Updated version of stache

* Upped max instances

* Up wait for timeout

* Add some waitForVisibles in alert and action button

* Added path resolves

* Builder visual (#791)

* Add start of visual tests

* continue working on skyux builder visual tests

* more work on getting builder visual tests to work

* More work around visual tests

* fix package name typo

* Update import paths for visual test spa

* Add normalize-scss to package.json

* Fix moment import to work with rollup

This way works also with copying the dist folder to node_modules

* fix tile strangeness

* start scripts for visual test setup

* Continue protractor work

* start of visual test command

* duplicate a bit of work to get protractor ready to go

* Get protractor to go to a page

* Add first pass at image comparison

TODO:
  - do not fail when image does not exist

* Continue pixdiff work

* Work on thresholds

* Screenshots working with alert visual test

TODO:
  - create compare screenshot wrapper function
  - get action button tests
  - get working with browserstack
  - get working with browserstack and TravisCI

* Add wrapper function for visual tests

TODO:
  - accessibility testing
  - more elegant way to change size
  - use browserstack
  - travis commands

* Add checkAccessibility

TODO:
  - browserstack configuration
  - get working in travis

* Break out local visual test conf file

* Add content for ci visual tests

TODO:
  - switch configuration file used based on argue
  - test using browserstack
  - add the rest of the tests
  - get TravisCI implementations working

* Allow visual tests to change config based on command line

* Browserstack tests working

* fix browserstack local visual tests

TODO:
  - get other tests moved over
  - test using browserstack
  - get TravisCI integration working
  - remove all traces of wdio and old tests

* Add avatar visual test

* Add button visual test

* Add visual tests for card, checkbox, and chevron

* Add datepicker, definition list, and dropdown visual tests

* Add error, file drop, and filter visual tests

* Add visual tests for grid, key-info, label, list-secondary-actions, list-view-checklist, and modals

* add visual tests for navbar

* Add page summary visual tests

* Add visual tests for paging, radio, repeater

* Add visual tests for search, sort, tabs

* Add visual tests for text-expand, text-expand-repeater, tiles

* Finsih visual tests

* Updated visual tests

* Update ci tests

* fix package.json conflict

* update other visual test scripts

* Tweak scripts

* Fix lint errors

* Attempt to add path for skyux/dist/core

* Updated stache version

* ignore temporary visual test files

* Update code coverage

* Remove some old visual tests

* Remove old visual test artifacts

* Remove other old visual test artifacts

* remove webdriver packages from package.json

* Update documentation for visual tests

* Finish documentation for new visual test methodology

* Fix visual test selector in new modal tests

* Updated version of Stache (#805)

* Updated version of stache

* Add tsconfig ignore for visual tests

* Hit release candidate branch

* Fix build errors

* Update baseline screenshots in travis scripts

* white space bump

* update travis scripts (#806)

* update travis scripts

* update visual baseline script

* Update visual baseline with logging (#807)

* Travis build 1644 pushed to skyux2 [ci skip]

* Changelog and package updates for rc.0 (#808)

* Merge 32 (#816)

* AppSettings and config files docs.

* appSettings and config files docs.

* Doc tweaks.

* Code sample cleanup

* Max height transition (#804)

* update builder version for skyux documentation

* pass string to expandmode

* Update container for component search

* Use class instead of inline styles

* work on text expand firefox bug

* continue work on firefox transitions

* Adjust text expand animation for firefox

* Update tests for new text expand animation

* Fix tslint errors

* Update master plunker to point to beta release (#812)

* List paging first page (#814)

* Only set page number on search when paging exists

* Add tests for search paging bug

* Updates for beta.32 (#815)

* Fix typo for iso8601

* Update dependencies for spa visual tests

* Updates for rc.1 (#817)

* Updates for rc.1

* Tweak changelog styles

* Update karma firefox (#818)

* Drop down primary (#819)

* added primary in html class

* testing for primary dropdown option

* lint errors fixed

* documentation fixes from john

* documentation changes

* changed isPrimary boolean property to buttonStyle string property

* fixed test errors

* Updated versions of Stache, Builder (#821)

* Updated version of stache

* Add tsconfig ignore for visual tests

* Hit release candidate branch

* Fix build errors

* Update baseline screenshots in travis scripts

* white space bump

* Update package.json

* Update package.json

* Update package.json

* Updated releases

* Updated version of stache

* Updated version of stache

* Added resolve for visual tests

* Updated version of stache

* Merging master branch, Release 2.0.0-beta.2 (#826)

* AppSettings and config files docs.

* appSettings and config files docs.

* Doc tweaks.

* Code sample cleanup

* Max height transition (#804)

* update builder version for skyux documentation

* pass string to expandmode

* Update container for component search

* Use class instead of inline styles

* work on text expand firefox bug

* continue work on firefox transitions

* Adjust text expand animation for firefox

* Update tests for new text expand animation

* Fix tslint errors

* Update master plunker to point to beta release (#812)

* List paging first page (#814)

* Only set page number on search when paging exists

* Add tests for search paging bug

* Updates for beta.32 (#815)

* Adding Autonumeric Pipe/Module (#792)

* Adding Autonumeric

* Fixed Test

* Changed name from SkyAutonumeric to  SkyNumeric

* Changing formatting

* Changes per comments, OptionsObject used

* Updated wording

* Email validation (#810)

* created email validation ts

* email validation scss

* email validation code and test start

* email validator testing files

* last lint error fixed

* component page summary

* error message/red halo doesn't show until lost focus

* Changes from Patrick

* Changes from Patrick (took care of errors)

* added form control for demo input box consistency

* Fixed lint errors

* Added sky-form-control to demo/removed onInit from module code

* Lint errors

* Add note about serving in Windows 10 with IE11 or Edge. (#820)

* Add note about serving in Windows 10 with IE11 or Edge.

* Rework note based on feedback from Bobby.

* Updates for beta.33 (#825)

* Fixed linting errors

* Update package.json

* Dont run skyux build for now

* Updated travis script

* Readded build

* Moved remove commands

* Updated version of builder

* Updated changelog and version

* Start importing skyux design tokens

* color cleanup

* more color changes

* alert checkbox radio cleanup

* alert content wrapper

to unbreak flexbox

* tone down label text

* wizard tab colors

* cleaning up borders

* action button hover

* Add style tweaks for inconsistencies

Also added commented out font-face so that we can later use the CDN to
grab Blackbaud fonts

* Use relative path for token variables to work with npm run build

* Add the token variables to scss folder in dist on build

* inline filter bg

* Update to add fonts

* file drop text styling

* Updated package.json with new deisgn tokens

* fix font urls

* Update to use lowercase font url

* Update to use the correct fontname

* Fix changelog merge

* Get rid of other merge error

* Update timepicker error labels

* font tweaks

* missed a comment

* Fix unit tests

* tone down headline

* Do a complete refresh for screenshot baselines

* Use tilde importer for variable imports

* cleaning up borders

* Add back the copy scss variables functionality to npm run build

* clean up border mixin

* remove default sides logic from border mixin

* misc cleanup

* Add mixins from design-tokens repo

* fixed issues from Tim

* Refresh screenshot for error modal long description

* navbar active item border fix

* alert link accessibility

* typography docs

* borders documentation

* color docs

* fixed border colors in doc

* Use latest design tokens version

* prelim font exploration

* tweaking components

* font size update

* color picker and misc fixes

* Added appropriate margin to timepicker

* color picker layout tweaks

* Fix class for checklist

* Update screenshots for single select and color picker for new tokens

* checkmark alignment

config/utils/compile-sass.js

@@ -0,0 +1,13 @@
+var sass = require('node-sass'),
+  fs = require('fs-extra'),
+  path = require('path'),
+  tildeImporter = require('node-sass-tilde-importer');
+
+var result = sass.renderSync({
+  file: path.resolve(__dirname, '../../src/scss/sky.scss'),
+  importer: tildeImporter,
+
+});
+
+fs.ensureFileSync(path.resolve(__dirname, '../../dist/css/sky.css'));
+fs.writeFileSync(path.resolve(__dirname, '../../dist/css/sky.css'), result.css);

config/utils/copy-design-tokens.js

@@ -0,0 +1,7 @@
+var fs = require('fs-extra');
+var path = require('path');
+
+fs.copySync(
+  path.resolve(__dirname, '../../node_modules/@blackbaud/skyux-design-tokens/scss'),
+  path.resolve(__dirname, '../../dist/scss')
+);

config/utils/sky-style-loader.js

@@ -9,8 +9,7 @@ var LOAD_TIMEOUT = 30000;
 module.exports = {
   loadStyles: function (callback) {
     var fontAwesome = new FontFaceObserver('FontAwesome'),
-      openSans = new FontFaceObserver('Open Sans'),
-      oswald = new FontFaceObserver('Oswald'),
+      blackbaudSans = new FontFaceObserver('Blackbaud Sans'),
       promise;
 
     promise = Promise.all(
@@ -19,8 +18,7 @@ module.exports = {
         // when the font is loaded unless a known character with a different width
         // than the default is not specified.
         fontAwesome.load('\uf0fc', LOAD_TIMEOUT),
-        openSans.load(null, LOAD_TIMEOUT),
-        oswald.load(null, LOAD_TIMEOUT)
+        blackbaudSans.load(null, LOAD_TIMEOUT)
       ]
     );
 

config/utils/stage-ts.js

@@ -4,6 +4,7 @@ var fs = require('fs-extra'),
   glob = require('glob'),
   path = require('path'),
   sass = require('node-sass'),
+  tildeImporter = require('node-sass-tilde-importer'),
   TEMP_PATH = './.srctemp';
 
 function deleteNonDistFiles() {
@@ -72,6 +73,8 @@ function escapeContents(contents) {
 function compileSass(file) {
   var contents = sass.renderSync({
     file: file,
+    importer: tildeImporter,
+
     outputStyle: 'compressed'
   }).css;
 

package.json

@@ -11,12 +11,13 @@
   ],
   "scripts": {
     "ci": "npm run lint && npm run test:ci && npm run build",
-    "build": "npm run clean:srctemp && node config/utils/stage-ts.js && cd .srctemp && ngc && cd ../ && npm run compile:sass && cd config/rollup && rollup -c rollup.config.js && rollup -c rollup.min.config.js && npm run clean:srctemp",
+    "build": "npm run clean:srctemp && node config/utils/stage-ts.js && cd .srctemp && ngc && cd ../ && npm run compile:sass && npm run copy:design-tokens && cd config/rollup && rollup -c rollup.config.js && rollup -c rollup.min.config.js && npm run clean:srctemp",
     "clean": "rimraf -- dist",
     "clean:full": "npm cache clean && rimraf -- node_modules doc coverage dist .srctemp webdriver-screenshotslocal webdriver-screenshotslocal-diffs skyux-spa-visual-tests/node_modules/ skyux-spa-visual-tests/dist/",
     "clean:releases": "rimraf -- releases",
     "clean:srctemp": "rimraf -- .srctemp",
-    "compile:sass": "node-sass src/scss/sky.scss dist/css/sky.css",
+    "compile:sass": "node config/utils/compile-sass.js",
+    "copy:design-tokens": "node config/utils/copy-design-tokens.js",
     "lint": "tslint 'src/**/*.ts'",
     "ngc": "ngc",
     "node-sass": "node-sass",
@@ -53,15 +54,13 @@
     "web-animations-js": "2.2.5"
   },
   "devDependencies": {
-    "@angular/common": "4.2.5",
-    "@angular/compiler": "4.2.5",
-    "@angular/compiler-cli": "4.2.5",
     "@angular/core": "4.2.5",
     "@angular/forms": "4.2.5",
     "@angular/platform-browser": "4.2.5",
     "@angular/platform-browser-dynamic": "4.2.5",
     "@angular/router": "4.2.5",
     "@blackbaud/skyux-builder": "1.0.0-rc.8",
+    "@blackbaud/skyux-design-tokens": "0.0.7",
     "@blackbaud/stache": "2.0.0-beta.9",
     "@types/core-js": "0.9.41",
     "@types/jasmine": "2.5.47",
@@ -89,15 +88,16 @@
     "karma": "1.7.0",
     "karma-browserstack-launcher": "1.2.0",
     "karma-chrome-launcher": "2.1.1",
-    "karma-firefox-launcher": "1.0.1",
     "karma-coverage": "1.1.1",
+    "karma-firefox-launcher": "1.0.1",
     "karma-jasmine": "1.1.0",
     "karma-mocha-reporter": "2.2.3",
     "karma-sourcemap-loader": "0.3.7",
     "karma-webpack": "2.0.3",
     "less": "2.7.2",
     "node-resemble-js": "0.2.0",
     "node-sass": "4.5.3",
+    "node-sass-tilde-importer": "1.0.0",
     "normalize-scss": "5.0.3",
     "prismjs": "1.6.0",
     "raw-loader": "0.5.1",

src/app/components/card/card-demo.component.html

@@ -5,8 +5,6 @@
     the default large size. If the content does not require this much space, you can
     set the card size to small. The type of content to display in the body of a card
     varies based on what the card represents and whether it prompts users to action.
-    The content can consist of some combination of a graph, trend, status, summary
-    information, and guidance text.
   </sky-card-content>
   <sky-card-actions *ngIf="showAction">
     <button class="sky-btn sky-btn-default">Click me</button>
@@ -16,8 +14,7 @@
   <sky-card-title *ngIf="showTitle">Small card</sky-card-title>
   <sky-card-content *ngIf="showContent">
     This card demonstrates the reduced amount of space that is available when you
-    set the card size to small. If the content requires additional space, you can
-    use the default card size of large.
+    set the card size to small.
   </sky-card-content>
   <sky-card-actions *ngIf="showAction">
     <sky-dropdown buttonType="context-menu">

src/app/components/datepicker/datepicker-demo.component.html

@@ -8,16 +8,16 @@
       #date="ngModel"/>
   </sky-datepicker>
   <div class="sky-error-label" *ngIf="date.errors && date.errors.skyDate && (date.dirty || date.touched)">
-    <div [hidden]="!date.errors.skyDate.invalid">
+    <span [hidden]="!date.errors.skyDate.invalid">
       Please enter a valid date.
-    </div>
-    <div [hidden]="!date.errors.skyDate.minDate">
+    </span>
+    <span [hidden]="!date.errors.skyDate.minDate">
       Date is prior to minimum date range.
-    </div>
+    </span>
 
-    <div [hidden]="!date.errors.skyDate.maxDate">
+    <span [hidden]="!date.errors.skyDate.maxDate">
       Date is after maximum date range.
-    </div>
+    </span>
   </div>
 </div>
 

src/app/components/email-validation/email-validation-demo.component.html

@@ -1,12 +1,12 @@
 <div style="max-width: 50%">
-    <input 
+    <input
         [(ngModel)]="emailValidator"
         class="sky-form-control"
         skyEmailValidation
         #email="ngModel"/>
     <div class="sky-error-label" *ngIf="email.errors && email.errors.skyEmail && (email.dirty && email.touched)">
-        <div [hidden]="!email.errors.skyEmail.invalid">
+        <span [hidden]="!email.errors.skyEmail.invalid">
             Please enter valid email with format joe@abc.com
-        </div>
+        </span>
     </div>
 </div>

src/app/components/shared/demo-button.component.scss

@@ -21,12 +21,12 @@
   color: #000;
   display: block;
   text-decoration: none;
-  border: solid 1px $sky-color-gray-lightest;
+  @include sky-border(light, top, bottom, left, right);
 
   h3 {
-    background-color: scale-color($color: $sky-color-gray-lightest, $lightness: 50%);
-    border-bottom: solid 1px $sky-color-gray-lightest;
-    font-size: $sky-font-size-lg;
+    background-color: scale-color($color: $sky-background-color-neutral-light, $lightness: 50%);
+    border-bottom: solid 1px $sky-border-color-neutral-light;
+    font-size: $sky-font-size-base;
     margin: 0;
     padding: $sky-padding;
   }
@@ -47,7 +47,7 @@
 }
 
 .sky-demo-button-icon {
-  color: $sky-color-gray;
+  color: $sky-text-color-deemphasized;
   display: block;
   flex-grow: 0;
   padding: $sky-padding-double;

src/app/components/shared/demo-page-code.component.scss

@@ -14,7 +14,7 @@
 }
 
 .sky-demo-page-code-sample {
-  border: solid 1px $sky-color-gray-lighter;
+  @include sky-border(light, top, bottom, left, right);
   border-top: none;
   overflow: auto;
   padding: $sky-padding;

src/app/components/timepicker/timepicker-demo.component.html

@@ -4,9 +4,9 @@ <h3>12-hour timepicker</h3>
     <input type="text" [skyTimepickerInput]="timePickerExample1" [timeFormat]="format12" [(ngModel)]="selectedTime1" #time="ngModel" />
   </sky-timepicker>
   <div class="sky-error-label" *ngIf="time.errors && time.errors.skyTime && (time.dirty || time.touched)">
-    <div [hidden]="!time.errors.skyTime.invalid" >
+    <span [hidden]="!time.errors.skyTime.invalid" >
       Please enter a valid time.
-    </div>
+    </span>
   </div>
 </div>
 <div>
@@ -20,9 +20,9 @@ <h3>24-hour timepicker.</h3>
     />
   </sky-timepicker>
   <div class="sky-error-label" *ngIf="time2.errors && time2.errors.skyTime && (time2.dirty || time2.touched)">
-    <div [hidden]="!time2.errors.skyTime.invalid">
+    <span [hidden]="!time2.errors.skyTime.invalid">
       Please enter a valid time.
-    </div>
+    </span>
   </div>
 </div>
 <div>
@@ -41,9 +41,9 @@ <h3>Custom timepicker.</h3>
       #time3="ngModel" />
   </sky-timepicker>
   <div class="sky-error-label" *ngIf="time3.errors && time3.errors.skyTime && (time3.dirty || time3.touched)">
-    <div [hidden]="!time.errors.skyTime.invalid">
+    <span [hidden]="!time.errors.skyTime.invalid">
       Please enter a valid time.
-    </div>
+    </span>
   </div>
   Selected time is {{selectedTime3?.local}}
 </div>