Merge pull request #219 from texastribune/ad-colors

Establish ad colors and incorporate some data visuals colors
texastribune · Jul 2, 2020 · 9a0b914 · 9a0b914
2 parents b340f40 + 4ccb697
commit 9a0b914
Show file tree

Hide file tree

Showing 3 changed files with 140 additions and 34 deletions.
diff --git a/assets/scss/1-settings/_colors.scss b/assets/scss/1-settings/_colors.scss
@@ -1,32 +1,30 @@
-// Colors - Branding
+// Core
 //
 // Colors specific to our brand.
 //
 // Colors:
 // $color-yellow-tribune: #ffc200 - Primary branding
 // $color-blue-light: #a1d2df - Blue Light
-// $color-blue-dark: #223136 - Used for the blast
 // $color-teal-gray: #348094 - Teal Gray
-// $color-red: #e12931 - Red
-// $color-sand: #f2ede2 - Sand
+// $color-black-off: #222 - A little bit darker now
+// $color-white-off: #f3f3f3 - Off-white
 //
 //
 // Styleguide 1.1.1
 //
 $color-yellow-tribune: #ffc200;
 $color-blue-light: #a1d2df;
-$color-blue-dark: #223136;
 $color-teal-gray: #348094;
-$color-red: #e12931;
-$color-sand: #f2ede2;
+// $color-black-off and $color-white-off are below
 
-// Colors - Grays
+// Grayscale
 //
 // In search of that perfect gray.
 //
 // Colors:
 // $color-white-pure: #fff - White
-// $color-white-off: #f3f3f3 - Kinda white
+// $color-white-off-light: #fbfbfb - Off-white (light)
+// $color-white-off: #f3f3f3 - Off-white
 // $color-gray-light: #d0d0d0 - Gray light
 // $color-gray-medium: #797979 - A little bit darker now
 // $color-gray-dark: #4a4a4a - A little bit darker now
@@ -37,46 +35,149 @@ $color-sand: #f2ede2;
 // Styleguide 1.1.2
 //
 $color-white-pure: #fff;
+$color-white-off-light: #fbfbfb;
 $color-white-off: #f3f3f3;
 $color-gray-light: #d0d0d0;
 $color-gray-medium: #797979;
 $color-gray-dark: #4a4a4a;
 $color-black-off: #222;
 $color-black-pure: #000;
 
-// Colors - Social
-//
-// Used for social sites branding consistency.
-//
-// Colors:
-// $color-facebook: #2d60c4 - Facebook
-// $color-twitter: #55acee - Twitter
-//
-// Styleguide 1.1.3
-//
-$color-facebook: #2d60c4;
-$color-twitter: #55acee;
 
-// Colors - States and promos
+// Site elements
 //
 // These are special variables assigned to specific elements and states.
 //
 // Colors:
 // $color-link-underline: #a1d2df - Link underline color
 // $color-link-underline-hover: #348094 - Link underline color on hover
+// $color-ad-text: #347d90 - Darkened version of `$color-teal-dark` helpful for contrast
 // $color-error: #e12931 - Error
 // $color-success: #11A06B - Success
-// $color-fmd-blue-dark: #323a44 - Fall membership drive 1
-// $color-fmd-blue-light: #6c99c1 - Fall membership drive 2
-// $color-sponsor: #3366cc - Sponsored content signifier
 //
 //
 // Styleguide 1.1.4
 //
 $color-link-underline: $color-blue-light;
 $color-link-underline-hover: $color-teal-gray;
+$color-ad-text: #347d90;
+$color-red: #e12931;
 $color-error: $color-red;
 $color-success: #11A06B;
+
+
+// Social and promos
+//
+// These are special variables assigned to specific elements and states.
+//
+// Colors:
+// $color-sponsor: #3366cc - Sponsored content signifier
+// $color-facebook: #2d60c4 - Facebook
+// $color-twitter: #55acee - Twitter
+// $color-blue-dark: #223136 - Used for the blast
+// $color-sand: #f2ede2 - Sand
+//
+//
+// Styleguide 1.1.4
+//
+$color-facebook: #2d60c4;
+$color-twitter: #55acee;
+$color-sponsor: #3366cc;
+$color-blue-dark: #223136;
+$color-blue-dark: #223136;
 $color-fmd-blue-dark: #323a44;
 $color-fmd-blue-light: #6c99c1;
-$color-sponsor: #3366cc;
+$color-sand: #f2ede2;
+
+
+// Elections
+//
+// These are used for data visuals.
+//
+// Colors:
+// $color-elections-republican: #f2593b - TK
+// $color-elections-democrat: #1755c5 - TK
+// $color-elections-yellow: #ffc200 - TK
+// $color-elections-green: #3cc687 - TK
+// $color-elections-gray: #99a0af - TK
+// $color-elections-offwhite: #f7f7f7 - TK
+// $color-elections-navy: #1a2b4b - TK
+// $color-elections-pink: #fcc2b6 - TK
+//
+//
+// Styleguide 1.1.4
+//
+$color-elections-republican: #f2593b;
+$color-elections-democrat: #1755c5;
+$color-elections-yellow: #ffc200;
+$color-elections-green: #3cc687;
+$color-elections-gray: #99a0af;
+$color-elections-offwhite: #f7f7f7;
+$color-elections-navy: #1a2b4b;
+$color-elections-pink: #fcc2b6;
+
+
+// Political parties
+//
+// These are used for data visuals.
+//
+// Colors:
+// $color-republican: hsl(1, 64%, 56%) - TK
+// $color-republican-subset: hsl(1, 34%, 56%) - TK
+// $color-democrat: hsl(203, 77%, 39%) - TK
+// $color-democrat-subset: hsl(203, 47%, 39%) - TK
+// $color-green: hsl(135, 23%, 40%) - TK
+// $color-libertarian: hsl(47, 71%, 53%) - TK
+// $color-independent: hsl(311, 43%, 42%) - TK
+//
+//
+// Styleguide 1.1.4
+//
+$color-republican: hsl(1, 64%, 56%);
+$color-republican-subset: hsl(1, 34%, 56%);
+$color-democrat: hsl(203, 77%, 39%);
+$color-democrat-subset: hsl(203, 47%, 39%);
+$color-green: hsl(135, 23%, 40%);
+$color-libertarian: hsl(47, 71%, 53%);
+$color-independent: hsl(311, 43%, 42%);
+
+// Ratings
+//
+// These are used for data visuals.
+//
+// Colors:
+// $color-positive: hsl(171, 44%, 44%) - good/bad
+// $color-neutral: hsl(33, 91%, 50%) - approval/disapproval
+// $color-negative: hsl(7, 77%, 54%) - positive/negative
+//
+//
+// Styleguide 1.1.4
+//
+$color-positive: hsl(171, 44%, 44%);
+$color-neutral: hsl(33, 91%, 50%);
+$color-negative: hsl(7, 77%, 54%);
+// $color-no-data: $color-grey;
+
+// Graphics
+//
+// These are used for data visuals.
+//
+// Colors:
+// $color-chart-purple: hsl(267, 42%, 51%) - TK
+// $color-chart-blue: hsl(200, 56%, 40%) - TK
+// $color-chart-sea-green: hsl(170, 30%, 37%) - TK
+// $color-men: hsl(171, 44%, 44%) - TK
+// $color-women: hsl(46, 100%, 50%) - TK
+// $color-national: hsl(171, 44%, 44%) - TK
+// $color-state: hsl(7, 77%, 54%) - TK
+//
+//
+// Styleguide 1.1.4
+//
+$color-chart-purple: hsl(267, 42%, 51%);
+$color-chart-blue: hsl(200, 56%, 40%);
+$color-chart-sea-green: hsl(170, 30%, 37%);
+$color-men: hsl(171, 44%, 44%);
+$color-women: hsl(46, 100%, 50%);
+$color-national: hsl(171, 44%, 44%);
+$color-state: hsl(7, 77%, 54%);
diff --git a/docs/src/colors.njk b/docs/src/colors.njk
@@ -11,12 +11,17 @@ layout: base.njk
 <h1 class="is-size-2 q-bottom-spacer">Colors</h1>
 
 {% from "./macros/color-swatch.njk" import colorSwatch %}
-<div class="q-tiles q-spacer">
-  {% for item in styles.all %}
+
+{% for item in styles.all %}
   {% if item.colors.length > 1 %}
-      {% for color in item.colors %}
-        {{ colorSwatch(color) }}
-      {% endfor %}
+    <div class="q-spacer">
+      <h2 id="{{ item.prettyName | slug }}" class="is-size-4 q-bottom-spacer">{{ item.prettyName }}</h2>
+      <div class="q-tiles">
+        {% for color in item.colors %}
+          {{ colorSwatch(color) }}
+        {% endfor %}
+      </div>
+    </div>
   {% endif %}
-  {% endfor %}
-</div>
+{% endfor %}
+
diff --git a/docs/src/scss/queso-docs.scss b/docs/src/scss/queso-docs.scss
@@ -47,7 +47,7 @@ code {
 .q-tiles {
   gap: 1rem;
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
 }