blackbaud · Blackbaud-SteveBrush · Aug 24, 2018 · Aug 21, 2018 · Aug 22, 2018 · Aug 22, 2018
diff --git a/.gitignore b/.gitignore
@@ -52,6 +52,7 @@ package-lock.json
 /src/*/dist/
 /dist/**
 .webpack.json
+.skypageslocales
 
 # Doc #
 /doc/

diff --git a/config/utils/compile-sass.js b/config/utils/compile-sass.js
@@ -1,13 +1,7 @@
-var sass = require('node-sass'),
-  fs = require('fs-extra'),
-  path = require('path'),
-  tildeImporter = require('node-sass-tilde-importer');
+const fs = require('fs-extra');
+const path = require('path');
 
-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);
+fs.copySync(
+  path.resolve(__dirname, '../../node_modules/@skyux/theme/css/sky.css'),
+  path.resolve(__dirname, '../../dist/css/sky.css')
+);
diff --git a/config/utils/sky-style-loader.js b/config/utils/sky-style-loader.js
diff --git a/config/utils/spec-styles.js b/config/utils/spec-styles.js
@@ -1,4 +1,4 @@
-var styleLoader = require('./sky-style-loader');
+const styleLoader = require('@skyux/theme/utils/node-js/style-loader');
 
 // A race condition exists in Firefox where tests can begin before styles are loaded.
 // This will ensure that styles are loaded before tests run by ensuring the style rule

diff --git a/package.json b/package.json
@@ -40,6 +40,7 @@
     "wdio": "wdio"
   },
   "dependencies": {
+    "@skyux/theme": "3.0.0-alpha.10",
     "dragula": "3.7.2",
     "intl": "1.2.5",
     "microedge-rxstate": "2.0.2",
@@ -55,8 +56,7 @@
     "@angular/platform-browser-dynamic": "4.3.6",
     "@angular/router": "4.3.6",
     "@blackbaud/skyux": "latest",
-    "@blackbaud/skyux-builder": "1.13.0",
-    "@blackbaud/skyux-design-tokens": "0.0.8",
+    "@blackbaud/skyux-builder": "1.19.3",
     "@types/core-js": "0.9.41",
     "@types/jasmine": "2.5.47",
     "@types/node": "7.0.18",
@@ -90,9 +90,6 @@
     "karma-webpack-grep": "1.0.1",
     "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",
     "raw-loader": "0.5.1",
     "remap-istanbul": "0.9.5",
     "rimraf": "2.6.1",

diff --git a/skyuxconfig.json b/skyuxconfig.json
@@ -1,6 +1,5 @@
 {
   "name": "skyux2",
   "mode": "easy",
-  "compileMode": "aot",
-  "cssPath": "./src/scss/sky.scss"
+  "compileMode": "aot"
 }
diff --git a/src/app/app-extras.module.ts b/src/app/app-extras.module.ts
@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
 
 import { SkyDemoModule } from '../demo';
 
-require('style-loader!./styles.scss');
+require('style-loader!@skyux/theme/css/sky.css');
 
 @NgModule({
   entryComponents: [],

diff --git a/src/app/styles.scss b/src/app/styles.scss
diff --git a/src/demos/autocomplete/autocomplete-demo.component.scss b/src/demos/autocomplete/autocomplete-demo.component.scss
@@ -1,4 +1,4 @@
-@import '~@blackbaud/skyux-design-tokens/scss/mixins';
+@import "~@skyux/theme/scss/mixins";
 
 .autocomplete-demo-form {
   ::ng-deep .sky-form-group {

diff --git a/src/demos/lookup/lookup-demo.component.scss b/src/demos/lookup/lookup-demo.component.scss
@@ -1,4 +1,4 @@
-@import '~@blackbaud/skyux-design-tokens/scss/mixins';
+@import "~@skyux/theme/scss/mixins";
 
 .lookup-demo-form {
   ::ng-deep .sky-form-group {
@@ -23,4 +23,4 @@
   pre {
     margin: 0;
   }
-}
+}
diff --git a/src/demos/select-field/select-field-demo.component.scss b/src/demos/select-field/select-field-demo.component.scss
@@ -1,4 +1,4 @@
-@import '~@blackbaud/skyux-design-tokens/scss/mixins';
+@import "~@skyux/theme/scss/mixins";
 
 .select-field-demo-alert {
   padding: 10px;

diff --git a/src/modules/action-button/action-button-container.component.scss b/src/modules/action-button/action-button-container.component.scss
@@ -1,4 +1,5 @@
-@import '../../scss/mixins';
+@import "~@skyux/theme/scss/mixins";
+@import "~@skyux/theme/scss/_compat/mixins";
 
 @media (min-width: $sky-screen-sm-min) {
   .sky-action-button-container {

diff --git a/src/modules/action-button/action-button-header.component.html b/src/modules/action-button/action-button-header.component.html
@@ -1,3 +1,3 @@
-<div class="sky-action-button-header">
+<div class="sky-action-button-header sky-section-heading">
   <ng-content></ng-content>
 </div>
diff --git a/src/modules/action-button/action-button-header.component.scss b/src/modules/action-button/action-button-header.component.scss
@@ -1,8 +1,8 @@
-@import '../../scss/mixins';
+@import "~@skyux/theme/scss/mixins";
+@import "~@skyux/theme/scss/_compat/mixins";
 
 .sky-action-button-header {
   display: inline-block;
-  @include sky-section-heading();
 }
 
 @media (max-width: $sky-screen-xs-max) {

diff --git a/src/modules/action-button/action-button-icon.component.scss b/src/modules/action-button/action-button-icon.component.scss
@@ -1,4 +1,5 @@
-@import '../../scss/mixins';
+@import "~@skyux/theme/scss/mixins";
+@import "~@skyux/theme/scss/_compat/mixins";
 
 .sky-action-button-icon-container {
   display: inline-block;

diff --git a/src/modules/action-button/action-button.component.scss b/src/modules/action-button/action-button.component.scss
@@ -1,4 +1,5 @@
-@import '../../scss/mixins';
+@import "~@skyux/theme/scss/mixins";
+@import "~@skyux/theme/scss/_compat/mixins";
 
 .sky-action-button {
   @include sky-border(dark, top, bottom, left, right);

diff --git a/src/modules/alert/alert.component.scss b/src/modules/alert/alert.component.scss
@@ -1,4 +1,5 @@
-@import "../../scss/variables";
+@import "~@skyux/theme/scss/mixins";
+@import "~@skyux/theme/scss/_compat/mixins";
 
 .sky-alert {
   padding: 0 $sky-padding;
@@ -13,7 +14,7 @@
     padding-top: $sky-padding;
     padding-bottom: $sky-padding;
     width: 100%;
-		
+
 		::ng-deep a {
 			color: change-color($sky-text-color-default, $alpha: 0.8);
 			text-decoration: underline;
@@ -24,7 +25,7 @@
 		}
   }
 
-  
+
 
   button {
     margin-left: auto;

diff --git a/src/modules/avatar/avatar.component.scss b/src/modules/avatar/avatar.component.scss
@@ -1,4 +1,5 @@
-@import '../../scss/mixins';
+@import "~@skyux/theme/scss/mixins";
+@import "~@skyux/theme/scss/_compat/mixins";
 
 .sky-avatar {
   /deep/ .sky-file-drop-accept {

diff --git a/src/modules/avatar/avatar.inner.component.scss b/src/modules/avatar/avatar.inner.component.scss
@@ -1,4 +1,5 @@
-@import '../../scss/mixins';
+@import "~@skyux/theme/scss/mixins";
+@import "~@skyux/theme/scss/_compat/mixins";
 
 .sky-avatar-wrapper {
   height: $sky-avatar-height + ($sky-avatar-border-width * 2);

diff --git a/src/modules/card/card-actions.component.scss b/src/modules/card/card-actions.component.scss
@@ -1,4 +1,5 @@
-@import "../../scss/mixins";
+@import "~@skyux/theme/scss/mixins";
+@import "~@skyux/theme/scss/_compat/mixins";
 
 :host {
   display: block;

diff --git a/src/modules/card/card.component.html b/src/modules/card/card.component.html
@@ -10,7 +10,7 @@
 
     <div (click)="contentClick()" class="sky-card-header" *ngIf="selectable || showTitle">
       <div class="sky-card-heading-middle">
-        <h1 class="sky-card-title" *ngIf="showTitle">
+        <h1 class="sky-card-title sky-section-heading" *ngIf="showTitle">
           <ng-content select="sky-card-title"></ng-content>
         </h1>
       </div>
@@ -24,7 +24,7 @@ <h1 class="sky-card-title" *ngIf="showTitle">
       </div>
     </div>
   </header>
-  <div class="sky-card-content" (click)="contentClick()">
+  <div class="sky-card-content sky-padding-even-default" (click)="contentClick()">
     <ng-content select="sky-card-content"></ng-content>
   </div>
   <div class="sky-card-actions" [hidden]="actionsEl.children.length === 0" #actionsEl>

diff --git a/src/modules/card/card.component.scss b/src/modules/card/card.component.scss
@@ -1,4 +1,5 @@
-@import "../../scss/mixins";
+@import "~@skyux/theme/scss/mixins";
+@import "~@skyux/theme/scss/_compat/mixins";
 
 .sky-card {
     background-color: #fff;
@@ -44,7 +45,6 @@
 
 .sky-card-heading-left,
 .sky-card-heading-right {
-    //@include ellipsis();
     font-weight: normal;
     max-width: 34px;
 }
@@ -64,7 +64,6 @@
 }
 
 .sky-card-title {
-    @include sky-section-heading();
     margin: 0;
     line-height: $sky-line-height-base;
 }
@@ -82,7 +81,6 @@
     flex-grow: 1;
     font-weight: normal;
     margin: 0;
-    padding: $sky-padding;
     overflow: hidden;
 }
 

diff --git a/src/modules/chevron/chevron.component.scss b/src/modules/chevron/chevron.component.scss
@@ -1,4 +1,5 @@
-@import "../../scss/variables";
+@import "~@skyux/theme/scss/mixins";
+@import "~@skyux/theme/scss/_compat/mixins";
 
 .sky-chevron {
     border: none;
@@ -10,7 +11,7 @@
     padding: 0;
     width: $sky-context-menu-size;
     cursor: pointer;
-  
+
   &:hover .sky-chevron-part {
     border-color: darken($sky-text-color-icon-borderless, 20%);
   }

diff --git a/src/modules/colorpicker/colorpicker.component.html b/src/modules/colorpicker/colorpicker.component.html
@@ -23,16 +23,16 @@
             <div
               [style.left.px]="slider.saturation"
               [style.top.px]="slider.value"
-              class="cursor">
+              class="cursor sky-rounded-circle">
             </div>
           </div>
           <div class="box">
             <div class="left">
-              <div class="selected-color-background">
+              <div class="selected-color-background sky-rounded-circle">
               </div>
               <div
                 [style.background-color]="selectedColor?.rgbaText"
-                class="selected-color">
+                class="selected-color sky-rounded-circle">
               </div>
             </div>
             <div class="right">
@@ -44,7 +44,7 @@
                 #hueSlider>
                 <div
                   [style.left.px]="slider.hue"
-                  class="cursor">
+                  class="cursor sky-rounded-circle">
                 </div>
               </div>
               <div
@@ -56,7 +56,7 @@
                 #alphaSlider>
                 <div
                   [style.left.px]="slider.alpha"
-                  class="cursor">
+                  class="cursor sky-rounded-circle">
                 </div>
               </div>
             </div>
@@ -153,7 +153,7 @@
           </div>
         </div>
 
-        <div class="sky-colorpicker-container sky-colorpicker-footer">
+        <div class="sky-colorpicker-container sky-colorpicker-footer sky-padding-even-large">
           <section class="sky-colorpicker-column">
             <button
               class="sky-btn sky-btn-primary sky-btn-colorpicker-apply"