Merge pull request #164 from Wikia/FAN-2423

FAN-2423 | Add fandom 2.0 colors to design system

Author: vforge

app/templates/base-styles/colors.hbs

@@ -1,23 +1,32 @@
 <h1>Colors</h1>
 <p>
-	The Fandom palette stems from three vertical colors — Games, Movies and TV — pulled forward from the Wikia brand.
+	Lead and Secondary colors. A FANDOM rainbow, if you will.
 </p>
 <p>
 	To use one of below colors, instead of color's hex representation apply suitable SCSS variable.
 	It's recommended to use available color variables to keep consistency.
 </p>
 
 <section>
-	<h2 id="fandom-corporate-colors">Fandom Corporate Colors</h2>
+	<h2 id="fandom-2-colors">Fandom 2.0</h2>
 	<div class="colors-wrapper">
-		{{color-box hex='#94d11f' name='Games' variable='$wds-color-games'}}
-		{{color-box hex='#09d3bf' name='Movies' variable='$wds-color-movies'}}
-		{{color-box hex='#00b7e0' name='TV' variable='$wds-color-tv'}}
-		{{color-box hex='#39424d' name='Dark Blue Gray' variable='$wds-color-dark-blue-gray'}}
-		{{color-box hex='#656e78' name='Slate Gray' variable='$wds-color-slate-gray'}}
-		{{color-box hex='#c5ced9' name='Blue Gray' variable='$wds-color-blue-gray'}}
-		{{color-box hex='#f6f6f6' name='Off-White 96%' variable='$wds-color-off-white'}}
-		{{color-box hex='#00b7e0' name='Link' variable='$wds-color-link'}}
+		{{color-box hex='#00d6d6' name='Aqua' variable='$wds-fandom-color-aqua'}}
+		{{color-box hex='#1a1a1a' name='Black' variable='$wds-fandom-color-black'}}
+		{{color-box hex='#ff6a64' name='Coral' variable='$wds-fandom-color-coral'}}
+		{{color-box hex='#5f7a7b' name='Dark Gray' variable='$wds-fandom-color-dark-gray'}}
+		{{color-box hex='#f2f5f5' name='Light Gray' variable='$wds-fandom-color-light-gray'}}
+		{{color-box hex='#00acac' name='Link' variable='$wds-fandom-color-link'}}
+		{{color-box hex='#008989' name='Link Hover' variable='$wds-fandom-color-link-hover'}}
+		{{color-box hex='#dee7e5' name='Mid Light Gray' variable='$wds-fandom-color-mid-light-gray'}}
+		{{color-box hex='#bed1cf' name='Middle Gray' variable='$wds-fandom-color-middle-gray'}}
+		{{color-box hex='#5df2ae' name='Mint' variable='$wds-fandom-color-mint'}}
+		{{color-box hex='#002a32' name='Navy' variable='$wds-fandom-color-navy'}}
+		{{color-box hex='#006661' name='Pine' variable='$wds-fandom-color-pine'}}
+		{{color-box hex='#833c58' name='Plum' variable='$wds-fandom-color-plum'}}
+		{{color-box hex='#460084' name='Purple' variable='$wds-fandom-color-purple'}}
+		{{color-box hex='#ee1a41' name='Red' variable='$wds-fandom-color-red'}}
+		{{color-box hex='#eeecdc' name='Warm Gray' variable='$wds-fandom-color-warm-gray'}}
+		{{color-box hex='#dfec24' name='Yellow' variable='$wds-fandom-color-yellow'}}
 	</div>
 </section>
 
@@ -35,19 +44,6 @@
 	</div>
 </section>
 
-<section>
-	<h2 id="verticals-colors">Verticals Colors</h2>
-	<div class="colors-wrapper">
-		{{color-box hex='#ff5400' name='Comics' variable='$wds-color-comics'}}
-		{{color-box hex='#94d11f' name='Games' variable='$wds-color-games'}}
-		{{color-box hex='#ff7f26' name='Books' variable='$wds-color-books'}}
-		{{color-box hex='#09d3bf' name='Movies' variable='$wds-color-movies'}}
-		{{color-box hex='#ffd000' name='Lifestyle' variable='$wds-color-lifestyle'}}
-		{{color-box hex='#c819ad' name='Music' variable='$wds-color-music'}}
-		{{color-box hex='#00b7e0' name='TV' variable='$wds-color-tv'}}
-	</div>
-</section>
-
 <section>
 	<h2 id="light-theme">Light Theme</h2>
 	<div class="colors-wrapper">
@@ -79,10 +75,10 @@
 <section>
 	<h2 id="alerts">Alerts</h2>
 	<div class="colors-wrapper">
-		{{color-box hex='#ed1c24' name='Alert/Delete' variable='$wds-color-alert'}}
-		{{color-box hex='#f08a24' name='Warning/Reported' variable='$wds-color-warning'}}
-		{{color-box hex='#5ba200' name='Success/Approve' variable='$wds-color-success'}}
-		{{color-box hex='#1a5eb8' name='Message' variable='$wds-color-message'}}
+		{{color-box hex='#d71035' name='Alert/Delete' variable='$wds-color-alert'}}
+		{{color-box hex='#dfec24' name='Warning/Reported' variable='$wds-color-warning'}}
+		{{color-box hex='#4cda9a' name='Success/Approve' variable='$wds-color-success'}}
+		{{color-box hex='#460084' name='Message' variable='$wds-color-message'}}
 	</div>
 </section>
 

app/templates/base-styles/typography.hbs

@@ -15,6 +15,13 @@
 	<h2 id="font-family">Font Family</h2>
 	<p>For highest browser compatibility we decided to follow direction described in <a href="https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/">Using System UI Fonts In Web Design: A Quick Practical Guide</a>. It provides a list of font-families for browsers to fallback. We listed font-families supported by major operating systems and finally we fall back to <code>sans-serif</code>. This way we can avoid web-font delivery process which would hit page performance.</p>
 	<code><span class="format-code">$wds-font-family</span>: 'Helvetica Neue', Helvetica, Arial, sans-serif;</code>
+
+</section>
+
+<section>
+	<h2 id='news-stories-font'>News and stories font family</h2>
+	<p> News and Stories uses Rubik as it's primary font.</p>
+	<code><span class="format-code">$wds-fandom-font-family</span>: Rubik, Helvetica, Arial, sans-serif;</code>
 </section>
 
 <section>

dist/css/styles.css

@@ -19,10 +19,10 @@ $wds-color-music: #c819ad;
 $wds-color-tv: #00b7e0;
 
 // ## Alerts
-$wds-color-alert: #ed1c24;
-$wds-color-message: #1a5eb8;
-$wds-color-success: #5ba200;
-$wds-color-warning: #f08a24;
+$wds-color-alert: #d71035;
+$wds-color-message: #460084;
+$wds-color-success: #4cda9a;
+$wds-color-warning: #dfec24;
 
 // ## Fandom Corporate Colors
 $wds-color-link: #00b7e0;
@@ -58,6 +58,27 @@ $wds-color-night-sky: #262626;
 $wds-color-off-white: #f6f6f6;
 $wds-color-white: #fff;
 
+/////////////////////////
+// # Fandom 2.0 Colors
+// ## Color Names
+$wds-fandom-color-aqua: #00d6d6;
+$wds-fandom-color-black: #1a1a1a;
+$wds-fandom-color-coral: #ff6a64;
+$wds-fandom-color-dark-gray: #5f7a7b;
+$wds-fandom-color-light-gray: #f2f5f5;
+$wds-fandom-color-link: #00acac;
+$wds-fandom-color-link-hover: #008989;
+$wds-fandom-color-mid-light-gray: #dee7e5;
+$wds-fandom-color-middle-gray: #bed1cf;
+$wds-fandom-color-mint: #5df2ae;
+$wds-fandom-color-navy: #002a32;
+$wds-fandom-color-pine: #006661;
+$wds-fandom-color-plum: #833c58;
+$wds-fandom-color-purple: #460084;
+$wds-fandom-color-red: #ee1a41;
+$wds-fandom-color-warm-gray: #eeecdc;
+$wds-fandom-color-yellow: #dfec24;
+
 // ## Light Theme
 $wds-color-light-c1: $wds-color-white;
 $wds-color-light-c2: $wds-color-off-white;

dist/scss/wds-variables/_colors.scss

@@ -1,6 +1,8 @@
 // Font family - see https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
 $wds-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 
+$wds-fandom-font-family: Rubik, Helvetica, Arial, sans-serif;
+
 // Line height
 $wds-line-height: 1.5em;
 

dist/scss/wds-variables/_typography.scss

@@ -8,7 +8,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
 
-<meta name="design-system/config/environment" content="%7B%22modulePrefix%22%3A%22design-system%22%2C%22environment%22%3A%22production%22%2C%22rootURL%22%3A%22/%22%2C%22locationType%22%3A%22hash%22%2C%22EmberENV%22%3A%7B%22FEATURES%22%3A%7B%7D%7D%2C%22APP%22%3A%7B%22name%22%3A%22design-system%22%2C%22version%22%3A%228.3.0+416400a0%22%7D%2C%22exportApplicationGlobal%22%3Afalse%7D" />
+<meta name="design-system/config/environment" content="%7B%22modulePrefix%22%3A%22design-system%22%2C%22environment%22%3A%22production%22%2C%22rootURL%22%3A%22/%22%2C%22locationType%22%3A%22hash%22%2C%22EmberENV%22%3A%7B%22FEATURES%22%3A%7B%7D%7D%2C%22APP%22%3A%7B%22name%22%3A%22design-system%22%2C%22version%22%3A%228.3.0+59dd20fc%22%7D%2C%22exportApplicationGlobal%22%3Afalse%7D" />
 
     <link rel="stylesheet" href="/assets/vendor.css">
     <link rel="stylesheet" href="/assets/design-system.css">

docs/assets/design-system.css

@@ -19,10 +19,10 @@ $wds-color-music: #c819ad;
 $wds-color-tv: #00b7e0;
 
 // ## Alerts
-$wds-color-alert: #ed1c24;
-$wds-color-message: #1a5eb8;
-$wds-color-success: #5ba200;
-$wds-color-warning: #f08a24;
+$wds-color-alert: #d71035;
+$wds-color-message: #460084;
+$wds-color-success: #4cda9a;
+$wds-color-warning: #dfec24;
 
 // ## Fandom Corporate Colors
 $wds-color-link: #00b7e0;
@@ -58,6 +58,27 @@ $wds-color-night-sky: #262626;
 $wds-color-off-white: #f6f6f6;
 $wds-color-white: #fff;
 
+/////////////////////////
+// # Fandom 2.0 Colors
+// ## Color Names
+$wds-fandom-color-aqua: #00d6d6;
+$wds-fandom-color-black: #1a1a1a;
+$wds-fandom-color-coral: #ff6a64;
+$wds-fandom-color-dark-gray: #5f7a7b;
+$wds-fandom-color-light-gray: #f2f5f5;
+$wds-fandom-color-link: #00acac;
+$wds-fandom-color-link-hover: #008989;
+$wds-fandom-color-mid-light-gray: #dee7e5;
+$wds-fandom-color-middle-gray: #bed1cf;
+$wds-fandom-color-mint: #5df2ae;
+$wds-fandom-color-navy: #002a32;
+$wds-fandom-color-pine: #006661;
+$wds-fandom-color-plum: #833c58;
+$wds-fandom-color-purple: #460084;
+$wds-fandom-color-red: #ee1a41;
+$wds-fandom-color-warm-gray: #eeecdc;
+$wds-fandom-color-yellow: #dfec24;
+
 // ## Light Theme
 $wds-color-light-c1: $wds-color-white;
 $wds-color-light-c2: $wds-color-off-white;