Merge pull request #17 from jwplayer/release.DES-862.feature-updates

Design System Updates to Brand Colors

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']
   };
 

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;
   }
-}
+}

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;

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

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;