Fixing hard-coded colors and typefaces for the style guide; adding the action_buttons color variable

3 files changed, 37 insertions, 15 deletions

diff --git a/web-ui/app/scss/_colors.scss b/web-ui/app/scss/_colors.scss
index 97c883a5..903ecb94 100644
--- a/web-ui/app/scss/_colors.scss
+++ b/web-ui/app/scss/_colors.scss
@@ -11,3 +11,4 @@ $contrast: #F2F3ED;
 $top_pane: #EAEAEA;
 $secondary: #3E3A37;
 $primary_color: #EF4E2F;
+$action_buttons: #2ba6cb;
diff --git a/web-ui/app/scss/style-guide.scss b/web-ui/app/scss/style-guide.scss
index f1b31ddd..6d73b185 100644
--- a/web-ui/app/scss/style-guide.scss
+++ b/web-ui/app/scss/style-guide.scss
@@ -49,7 +49,7 @@ section.guide-section {
   padding: 66px 32px;
 }
 
-.color-swatch {
+.color-card {
   width: 160px;
   height: 230px;
   background-color: #344a5f;
@@ -77,3 +77,24 @@ section.guide-section {
   font-size: small;
 }
 
+/* Color Cards definition */
+
+.color-grid {
+  #primary-color-card { background-color: $primary_color; }
+  #secondary-color-card { background-color: $secondary;}
+  #top-pane-card { background-color: $top_pane;}
+  #contrast-card { background-color: $contrast;}
+  #action-buttons-card { background-color: $action_buttons; }
+  #success-card { background-color: $success;}
+  #attention-card { background-color: $attention; }
+  #warning-card { background-color: $warning; }
+  #error-card { background-color: $error; }
+  #search-highlight-card { background-color: $search_highlight; }
+  #count-background-card { background-color: $total_count_bg; }
+}
+/* Typeface cards definition*/
+ul.typography li h2 {
+  &.bold-header { font-weight: bold; }
+  &.extra-bold-header { font-weight: 800; }
+  &.lighter-header { font-weight: lighter; }
+}
\ No newline at end of file
diff --git a/web-ui/app/style-guide.html b/web-ui/app/style-guide.html
index 39a4cdfe..354d9307 100644
--- a/web-ui/app/style-guide.html
+++ b/web-ui/app/style-guide.html
@@ -48,31 +48,31 @@
 			<h2>Color Palette</h2>
 			</br>
 			<div class="color-grid">
-				<div class="color-swatch" style="background-color: #EF4E2F">
+				<div id="primary-color-card" class="color-card">
 					<p class="color-label">
 						<span class="color-name">PRIMARY COLOR</span>
 						<br>#EF4E2F
 					</p>
 				</div>
-				<div class="color-swatch" style="background-color: #3E3A37">
+				<div id="secondary-color-card" class="color-card">
 					<p class="color-label">
 						<span class="color-name">SECONDARY COLOR</span>
 						<br>#3E3A37
 					</p>
 				</div>
-				<div class="color-swatch" style="background-color: #EAEAEA">
+				<div id="top-pane-card" class="color-card">
 					<p class="color-label">
 						<span class="color-name">TOP PANE</span>
 						<br>#EAEAEA
 					</p>
 				</div>
-				<div class="color-swatch" style="background-color: #F2F3ED">
+				<div id="contrast-card" class="color-card">
 					<p class="color-label">
 						<span class="color-name">CONTRAST</span>
 						<br>#F2F3ED
 					</p>
 				</div>
-				<div class="color-swatch" style="background-color: #2ba6cb">
+				<div id="action-buttons-card" class="color-card">
 					<p class="color-label">
 						<span class="color-name">ACTION BUTTONS</span>
 						<br>#2ba6cb
@@ -82,37 +82,37 @@
 			<br>
 
 			<div class="color-grid">
-				<div class="color-swatch" style="background-color: #2DAB49">
+				<div id="success-card" class="color-card">
 					<p class="color-label">
 						<span class="color-name">SUCCESS</span>
 						<br>#2DAB49
 					</p>
 				</div>
-				<div class="color-swatch" style="background-color: #F6A40A">
+				<div id="attention-card" class="color-card">
 					<p class="color-label">
 						<span class="color-name">ATTENTION</span>
 						<br>#F6A40A
 					</p>
 				</div>
-				<div class="color-swatch" style="background-color: #F7E8AF">
+				<div id="warning-card" class="color-card">
 					<p class="color-label">
 						<span class="color-name">WARNING</span>
 						<br>#F7E8AF
 					</p>
 				</div>
-				<div class="color-swatch" style="background-color: #D72A25">
+				<div id="error-card" class="color-card">
 						<p class="color-label">
 							<span class="color-name">ERROR</span>
 							<br>#D72A25
 						</p>
 				</div>
-				<div class="color-swatch" style="background-color: #FFEF29">
+				<div id="search-highlight-card" class="color-card">
 					<p class="color-label">
 						<span class="color-name">SEARCH HIGHLIGHT</span>
 						<br>#FFEF29
 					</p>
 				</div>
-				<div class="color-swatch" style="background-color: #C0B9B9">
+				<div id="count-background-card" class="color-card">
 					<p class="color-label">
 						<span class="color-name">COUNT BACKGROUND</span>
 						<br>#C0B9B9
@@ -132,15 +132,15 @@
 					<span>Regular</span>
 				</li>
 				<li>
-					<h2 style="font-weight: bold;">Aa</h2>
+					<h2 class="bold-header">Aa</h2>
 					<span>Bold</span>
 				</li>
 				<li>
-					<h2 style="font-weight: 800;">Aa</h2>
+					<h2 class="extra-bold-header">Aa</h2>
 					<span>Extra Bold</span>
 				</li>
 				<li>
-					<h2 style="font-weight: lighter;">Aa</h2>
+					<h2 class="lighter-header">Aa</h2>
 					<span>Lighter</span>
 				</li>
 		</section>