diff --git a/Gruntfile.js b/Gruntfile.js
index 3a3244f..591de7a 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -4,7 +4,7 @@ module.exports = function (grunt) {
config.pkg = grunt.file.readJSON('package.json');
config.watch = {
- files: ['styles/mixins/**/*.less', 'styles/variables/**/*.less', 'icons/dashboard/**/*.svg', 'icons/player/**/*.svg'],
+ files: ['styles/mixins/**/*.less', 'styles/**/*.less', 'icons/dashboard/**/*.svg', 'icons/player/**/*.svg'],
tasks: ['default']
};
diff --git a/icons/dashboard/copy.svg b/icons/dashboard/copy.svg
new file mode 100644
index 0000000..f834070
--- /dev/null
+++ b/icons/dashboard/copy.svg
@@ -0,0 +1 @@
+
diff --git a/icons/sprites/icons-dashboard.svg b/icons/sprites/icons-dashboard.svg
index 8894ee1..9cc8724 100644
--- a/icons/sprites/icons-dashboard.svg
+++ b/icons/sprites/icons-dashboard.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/styles/components/icons.less b/styles/components/icons.less
index c5d24a7..28df026 100644
--- a/styles/components/icons.less
+++ b/styles/components/icons.less
@@ -1,9 +1,12 @@
.ds-icon {
.ds-square(16px);
vertical-align: middle;
- &.ds-icon-xs {
+ &.ds-icon-xxs {
.ds-square(8px);
}
+ &.ds-icon-xs {
+ .ds-square(12px);
+ }
&.ds-icon-sm {
.ds-square(16px);
}
@@ -23,4 +26,4 @@
width: 24px;
height: 25px;
}
-}
\ No newline at end of file
+}
diff --git a/styles/hook.css b/styles/hook.css
index df36379..513502c 100644
--- a/styles/hook.css
+++ b/styles/hook.css
@@ -2,11 +2,7 @@
/* Sizes */
/* Weights - Custom */
/* Weights - Data */
-/* Basics */
/* Primary Colors */
-/* Hover for Primary Colors */
-/* Secondary Colors */
-/* Blends */
/* Data Color Patterns
/* Palette A */
@@ -29,10 +25,14 @@
height: 16px;
vertical-align: middle;
}
-.ds-icon.ds-icon-xs {
+.ds-icon.ds-icon-xxs {
width: 8px;
height: 8px;
}
+.ds-icon.ds-icon-xs {
+ width: 12px;
+ height: 12px;
+}
.ds-icon.ds-icon-sm {
width: 16px;
height: 16px;
diff --git a/styles/hook.min.css b/styles/hook.min.css
index 2483a11..d3f2907 100644
--- a/styles/hook.min.css
+++ b/styles/hook.min.css
@@ -1 +1 @@
-.ds-icon{width:16px;height:16px;vertical-align:middle}.ds-icon.ds-icon-xs{width:8px;height:8px}.ds-icon.ds-icon-sm{width:16px;height:16px}.ds-icon.ds-icon-med{width:24px;height:24px}.ds-icon.ds-icon-lg{width:32px;height:32px}.ds-logo-full{width:104px;height:38px}.ds-logo-mark{width:24px;height:25px}
\ No newline at end of file
+.ds-icon{width:16px;height:16px;vertical-align:middle}.ds-icon.ds-icon-xxs{width:8px;height:8px}.ds-icon.ds-icon-xs{width:12px;height:12px}.ds-icon.ds-icon-sm{width:16px;height:16px}.ds-icon.ds-icon-med{width:24px;height:24px}.ds-icon.ds-icon-lg{width:32px;height:32px}.ds-logo-full{width:104px;height:38px}.ds-logo-mark{width:24px;height:25px}
\ No newline at end of file
diff --git a/styles/variables/brand-colors.less b/styles/variables/brand-colors.less
index 6211ae6..2441fbe 100644
--- a/styles/variables/brand-colors.less
+++ b/styles/variables/brand-colors.less
@@ -1,34 +1,28 @@
-/* Basics */
-@ds-black: #000000;
-@ds-white: #FFFFFF;
-
/* Primary Colors */
-@ds-charcoal: #252525;
-@ds-red: #FF0046;
-@ds-blue: #0B7EF4;
-@ds-midnight: #475470;
-@ds-slate: #AAB4C8;
-@ds-gray: #D9DDE6;
-@ds-light-gray: #ECEEF2;
+@ds-dahlia: #EC0041;
+@ds-dahlia-fade: mix(@ds-dahlia, @ds-white, 20%);
+@ds-dahlia-dark-1: mix(@ds-dahlia, @ds-black, 80%);
+@ds-dahlia-dark-2: mix(@ds-dahlia, @ds-black, 70%);
-/* Hover for Primary Colors */
-@ds-blue-hover: darken(@ds-blue, 8%);
-@ds-red-hover: darken(@ds-red, 8%);
-@ds-slate-hover: darken(@ds-slate, 8%);
+@ds-fog: #D8DDE6;
+@ds-fog-fade: mix(@ds-fog, @ds-white, 30%);
+@ds-fog-dark-1: darken(@ds-fog, 18%);
+@ds-fog-dark-2: darken(@ds-fog, 26%);
-/* Secondary Colors */
-@ds-pink: #FF4664;
-@ds-teal: #2BBECF;
-@ds-violet: #9000BE;
-@ds-purple: #7864FF;
-@ds-gold: #FF9400;
-@ds-sun: #FFD700;
-@ds-grassgreen: #00C669;
-@ds-springgreen: #00F096;
+@ds-midnight: #475470;
+@ds-midnight-fade: mix(@ds-midnight, @ds-white, 20%);
+@ds-midnight-dark-1: mix(@ds-midnight, @ds-black, 80%);
+@ds-midnight-dark-2: mix(@ds-midnight, @ds-black, 70%);
+
+@ds-abyss: #2F3542;
+@ds-abyss-fade: mix(@ds-abyss, @ds-white, 20%);
+@ds-abyss-dark-1: mix(@ds-abyss, @ds-black, 80%);
+@ds-abyss-dark-2: mix(@ds-abyss, @ds-black, 70%);
-/* Blends */
-@ds-midnight-charcoal: mix(@ds-charcoal, @ds-midnight); // #363D4B;
-@ds-slate-gray: mix(@ds-slate, @ds-gray); // #C2C9D7;
-@ds-midnight-gray: mix(@ds-midnight, @ds-gray); // #9099AB;
-@ds-midnight-slate: mix(@ds-midnight, @ds-slate); // #79849C;
-@ds-blue-white: mix(@ds-blue, @ds-white, 5%); // #E6EFF9;
+// Supportive System Colors
+@ds-black: #000000;
+@ds-white: #FFFFFF;
+@ds-blue: #0A75E3;
+@ds-red: #FF0000; // destructive - high risk
+@ds-orange: #FFBA43; // medium risk
+@ds-green: #0AAC29; // affirmative
diff --git a/styles/variables/code-snippet-colors.less b/styles/variables/code-snippet-colors.less
index 18f9d53..4cde36f 100644
--- a/styles/variables/code-snippet-colors.less
+++ b/styles/variables/code-snippet-colors.less
@@ -1,8 +1,10 @@
-@ds-code-background: @ds-midnight-charcoal;
+@ds-code-background: @ds-abyss;
@ds-code-text: @ds-white;
-@ds-code-pink: mix(@ds-pink, #fff, 80%);
-@ds-code-gold: mix(@ds-gold, #fff, 70%);
-@ds-code-teal: #66d9ef;
+@ds-code-green: #98c379;
+@ds-code-purple: #c678dd;
+@ds-code-blue: #61afef;
+@ds-code-pink: #e06c75;
+@ds-code-orange: #d19a66;
-@ds-inline-code-background: @ds-light-gray;
-@ds-inline-code-text: @ds-charcoal;
+@ds-inline-code-background: @ds-fog;
+@ds-inline-code-text: @ds-abyss;