Skip to content

Commit

Permalink
Merge pull request #8 from jwplayer/wip.DES-700.namespacing
Browse files Browse the repository at this point in the history
Added font-smoothing mixins and removed jw- namespacing
  • Loading branch information
monibons authored Nov 14, 2018
2 parents 4824be0 + 28f3194 commit 0170deb
Show file tree
Hide file tree
Showing 6 changed files with 146 additions and 136 deletions.
50 changes: 25 additions & 25 deletions styles/brand-colors.less
Original file line number Diff line number Diff line change
@@ -1,34 +1,34 @@
/* Basics */
@jw-black: #000000;
@jw-white: #FFFFFF;
@ds-black: #000000;
@ds-white: #FFFFFF;

/* Primary Colors */
@jw-charcoal: #252525;
@jw-red: #FF0046;
@jw-blue: #0B7EF4;
@jw-midnight: #475470;
@jw-slate: #AAB4C8;
@jw-gray: #D9DDE6;
@jw-light-gray: #ECEEF2;
@ds-charcoal: #252525;
@ds-red: #FF0046;
@ds-blue: #0B7EF4;
@ds-midnight: #475470;
@ds-slate: #AAB4C8;
@ds-gray: #D9DDE6;
@ds-light-gray: #ECEEF2;

/* Hover for Primary Colors */
@jw-blue-hover: darken(@jw-blue, 8%);
@jw-red-hover: darken(@jw-red, 8%);
@jw-slate-hover: darken(@jw-slate, 8%);
@ds-blue-hover: darken(@ds-blue, 8%);
@ds-red-hover: darken(@ds-red, 8%);
@ds-slate-hover: darken(@ds-slate, 8%);

/* Secondary Colors */
@jw-pink: #FF4664;
@jw-teal: #2BBECF;
@jw-violet: #9000BE;
@jw-purple: #7864FF;
@jw-gold: #FF9400;
@jw-sun: #FFD700;
@jw-grassgreen: #00C669;
@jw-springgreen: #00F096;
@ds-pink: #FF4664;
@ds-teal: #2BBECF;
@ds-violet: #9000BE;
@ds-purple: #7864FF;
@ds-gold: #FF9400;
@ds-sun: #FFD700;
@ds-grassgreen: #00C669;
@ds-springgreen: #00F096;

/* Blends */
@jw-midnight-charcoal: mix(@jw-charcoal, @jw-midnight); // #363D4B;
@jw-slate-gray: mix(@jw-slate, @jw-gray); // #C2C9D7;
@jw-midnight-gray: mix(@jw-midnight, @jw-gray); // #9099AB;
@jw-midnight-slate: mix(@jw-midnight, @jw-slate); // #79849C;
@jw-blue-white: mix(@jw-blue, @jw-white, 5%); // #E6EFF9;
@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;
14 changes: 7 additions & 7 deletions styles/code-snippet-colors.less
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
@jw-code-background: @jw-midnight-charcoal;
@jw-code-text: @jw-white;
@jw-code-pink: mix(@jw-pink, #fff, 80%);
@jw-code-gold: mix(@jw-gold, #fff, 70%);
@jw-code-teal: #66d9ef;
@ds-code-background: @ds-midnight-charcoal;
@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;

@jw-inline-code-background: @jw-light-gray;
@jw-inline-code-text: @jw-charcoal;
@ds-inline-code-background: @ds-light-gray;
@ds-inline-code-text: @ds-charcoal;
120 changes: 60 additions & 60 deletions styles/data-colors.less
Original file line number Diff line number Diff line change
@@ -1,88 +1,88 @@
/* Data Color Patterns
/* Palette A */
@jw-palette-a: @jw-palette-a1, @jw-palette-a2, @jw-palette-a3, @jw-palette-a4, @jw-palette-a5, @jw-palette-a6;
@ds-palette-a: @ds-palette-a1, @ds-palette-a2, @ds-palette-a3, @ds-palette-a4, @ds-palette-a5, @ds-palette-a6;

@jw-palette-a1: #f7bdad;
@jw-palette-a2: #e3949d;
@jw-palette-a3: #ca7396;
@jw-palette-a4: #a85895;
@jw-palette-a5: #784496;
@jw-palette-a6: #263995;
@ds-palette-a1: #f7bdad;
@ds-palette-a2: #e3949d;
@ds-palette-a3: #ca7396;
@ds-palette-a4: #a85895;
@ds-palette-a5: #784496;
@ds-palette-a6: #263995;

/* Palette B */
@jw-palette-b: @jw-palette-b1, @jw-palette-b2, @jw-palette-b3, @jw-palette-b4, @jw-palette-b5, @jw-palette-b6;
@ds-palette-b: @ds-palette-b1, @ds-palette-b2, @ds-palette-b3, @ds-palette-b4, @ds-palette-b5, @ds-palette-b6;

@jw-palette-b1: #a3ee87;
@jw-palette-b2: #00cb9a;
@jw-palette-b3: #00a3ac;
@jw-palette-b4: #0077ac;
@jw-palette-b5: #004a93;
@jw-palette-b6: #131b60;
@ds-palette-b1: #a3ee87;
@ds-palette-b2: #00cb9a;
@ds-palette-b3: #00a3ac;
@ds-palette-b4: #0077ac;
@ds-palette-b5: #004a93;
@ds-palette-b6: #131b60;

/* Palette C */
@jw-palette-c: @jw-palette-c1, @jw-palette-c2, @jw-palette-c3, @jw-palette-c4, @jw-palette-c5, @jw-palette-c6;
@ds-palette-c: @ds-palette-c1, @ds-palette-c2, @ds-palette-c3, @ds-palette-c4, @ds-palette-c5, @ds-palette-c6;

@jw-palette-c1: #f7c966;
@jw-palette-c2: #f69958;
@jw-palette-c3: #e86a5c;
@jw-palette-c4: #cb3e69;
@jw-palette-c5: #9d2076;
@jw-palette-c6: #5a1d7e;
@ds-palette-c1: #f7c966;
@ds-palette-c2: #f69958;
@ds-palette-c3: #e86a5c;
@ds-palette-c4: #cb3e69;
@ds-palette-c5: #9d2076;
@ds-palette-c6: #5a1d7e;

/* Single Hue - A */
@jw-single-hue-a: @jw-single-hue-a1, @jw-single-hue-a2, @jw-single-hue-a3, @jw-single-hue-a4, @jw-single-hue-a5, @jw-single-hue-a6;
@ds-single-hue-a: @ds-single-hue-a1, @ds-single-hue-a2, @ds-single-hue-a3, @ds-single-hue-a4, @ds-single-hue-a5, @ds-single-hue-a6;

@jw-single-hue-a1: #cd3138;
@jw-single-hue-a2: #da5550;
@jw-single-hue-a3: #e57369;
@jw-single-hue-a4: #ef8f84;
@jw-single-hue-a5: #f8aba0;
@jw-single-hue-a6: #ffc6bd;
@ds-single-hue-a1: #cd3138;
@ds-single-hue-a2: #da5550;
@ds-single-hue-a3: #e57369;
@ds-single-hue-a4: #ef8f84;
@ds-single-hue-a5: #f8aba0;
@ds-single-hue-a6: #ffc6bd;

/* Single Hue - B */
@jw-single-hue-b: @jw-single-hue-b1, @jw-single-hue-b2, @jw-single-hue-b3, @jw-single-hue-b4, @jw-single-hue-b5, @jw-single-hue-b6;
@ds-single-hue-b: @ds-single-hue-b1, @ds-single-hue-b2, @ds-single-hue-b3, @ds-single-hue-b4, @ds-single-hue-b5, @ds-single-hue-b6;

@jw-single-hue-b1: #459036;
@jw-single-hue-b2: #64a652;
@jw-single-hue-b3: #82bb6f;
@jw-single-hue-b4: #9fd28c;
@jw-single-hue-b5: #bce8aa;
@jw-single-hue-b6: #daffc9;
@ds-single-hue-b1: #459036;
@ds-single-hue-b2: #64a652;
@ds-single-hue-b3: #82bb6f;
@ds-single-hue-b4: #9fd28c;
@ds-single-hue-b5: #bce8aa;
@ds-single-hue-b6: #daffc9;

/* Single Hue - C */
@jw-single-hue-c: @jw-single-hue-c1, @jw-single-hue-c2, @jw-single-hue-c3, @jw-single-hue-c4, @jw-single-hue-c5, @jw-single-hue-c6;
@ds-single-hue-c: @ds-single-hue-c1, @ds-single-hue-c2, @ds-single-hue-c3, @ds-single-hue-c4, @ds-single-hue-c5, @ds-single-hue-c6;

@jw-single-hue-c1: #0073b3;
@jw-single-hue-c2: #2e8dc3;
@jw-single-hue-c3: #51a7d2;
@jw-single-hue-c4: #74c1e0;
@jw-single-hue-c5: #98dbef;
@jw-single-hue-c6: #bef5ff;
@ds-single-hue-c1: #0073b3;
@ds-single-hue-c2: #2e8dc3;
@ds-single-hue-c3: #51a7d2;
@ds-single-hue-c4: #74c1e0;
@ds-single-hue-c5: #98dbef;
@ds-single-hue-c6: #bef5ff;

/* Color Scale - A */
@jw-color-scale-a: @jw-color-scale-a1, @jw-color-scale-a2, @jw-color-scale-a3, @jw-color-scale-a4, @jw-color-scale-a5;
@ds-color-scale-a: @ds-color-scale-a1, @ds-color-scale-a2, @ds-color-scale-a3, @ds-color-scale-a4, @ds-color-scale-a5;

@jw-color-scale-a1: #dc6428;
@jw-color-scale-a2: #e7b657;
@jw-color-scale-a3: #f1feaf;
@jw-color-scale-a4: #81b987;
@jw-color-scale-a5: #1c7464;
@ds-color-scale-a1: #dc6428;
@ds-color-scale-a2: #e7b657;
@ds-color-scale-a3: #f1feaf;
@ds-color-scale-a4: #81b987;
@ds-color-scale-a5: #1c7464;

/* Color Scale - B */
@jw-color-scale-b: @jw-color-scale-b1, @jw-color-scale-b2, @jw-color-scale-b3, @jw-color-scale-b4, @jw-color-scale-b5;
@ds-color-scale-b: @ds-color-scale-b1, @ds-color-scale-b2, @ds-color-scale-b3, @ds-color-scale-b4, @ds-color-scale-b5;

@jw-color-scale-b1: #a40444;
@jw-color-scale-b2: #d584ac;
@jw-color-scale-b3: #ffe8ff;
@jw-color-scale-b4: #9a85b9;
@jw-color-scale-b5: #04367c;
@ds-color-scale-b1: #a40444;
@ds-color-scale-b2: #d584ac;
@ds-color-scale-b3: #ffe8ff;
@ds-color-scale-b4: #9a85b9;
@ds-color-scale-b5: #04367c;

/* Color Scale - C */
@jw-color-scale-c: @jw-color-scale-c1, @jw-color-scale-c2, @jw-color-scale-c3, @jw-color-scale-c4, @jw-color-scale-c5;
@ds-color-scale-c: @ds-color-scale-c1, @ds-color-scale-c2, @ds-color-scale-c3, @ds-color-scale-c4, @ds-color-scale-c5;

@jw-color-scale-c1: #d49c44;
@jw-color-scale-c2: #ecc188;
@jw-color-scale-c3: #ffead0;
@jw-color-scale-c4: #e7a491;
@jw-color-scale-c5: #c56077;
@ds-color-scale-c1: #d49c44;
@ds-color-scale-c2: #ecc188;
@ds-color-scale-c3: #ffead0;
@ds-color-scale-c4: #e7a491;
@ds-color-scale-c5: #c56077;
16 changes: 8 additions & 8 deletions styles/fonts.less
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
@import (css) url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700');

/* Typefaces */
@jw-font-custom: 'Open Sans', sans-serif;
@jw-font-system: Arial, sans-serif;
@jw-font-code: Monaco, 'Lucida Sans Typewriter', Consolas, 'Lucida Console', 'Courier New', monospace;
@ds-font-custom: 'Open Sans', sans-serif;
@ds-font-system: Arial, sans-serif;
@ds-font-code: Monaco, 'Lucida Sans Typewriter', Consolas, 'Lucida Console', 'Courier New', monospace;

/* Sizes */
@jw-font-size-base: 15px;
@ds-font-size-base: 15px;

/* Weights */
@jw-font-custom-light: 300;
@jw-font-custom-regular: 400;
@jw-font-custom-semibold: 600;
@jw-font-custom-bold: 700;
@ds-font-custom-light: 300;
@ds-font-custom-regular: 400;
@ds-font-custom-semibold: 600;
@ds-font-custom-bold: 700;
1 change: 1 addition & 0 deletions styles/hook.css
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@
width: 24px;
height: 25px;
}
/* Font Smoothing Support */
/* Data Patterns - Palettes */
.data-palette-a1 {
fill: #f7bdad;
Expand Down
Loading

0 comments on commit 0170deb

Please sign in to comment.