Add Brand Guide to repo

.eleventy.js

@@ -3,6 +3,7 @@ const fs = require('fs');
 const pluginRss = require('@11ty/eleventy-plugin-rss');
 const pluginNavigation = require('@11ty/eleventy-navigation');
 const markdownIt = require('markdown-it');
+const markdownItAttrs = require('markdown-it-attrs');
 const markdownItAnchor = require('markdown-it-anchor');
 const { headingLinks } = require("./config/headingLinks");
 const yaml = require("js-yaml");
@@ -23,10 +24,14 @@ module.exports = function (config) {
 
   // Specific scripts to guides
   config.addPassthroughCopy("./assets/_common/js/*");
-  //
+
   config.addPassthroughCopy({'./assets/_common/_img/favicons/favicon.ico': './favicon.ico' });
   config.addPassthroughCopy({'./assets/_common/_img/favicons': './img/favicons' });
 
+  // Download folders
+  // TODO: Is this the right way to configure it?
+  config.addPassthroughCopy("./assets/**/dist/*");
+
   // Add plugins
   config.addPlugin(pluginRss);
   config.addPlugin(pluginNavigation);
@@ -51,6 +56,55 @@ module.exports = function (config) {
   // Allow yaml to be used in the _data dir
   config.addDataExtension("yaml", contents => yaml.load(contents));
 
+  config.addFilter('contrastRatio', function(color1, color2) {
+    return contrastRatio(color1, color2);
+  });
+
+  // TODO: Where can we organize these functions so they're not in the main eleventy.js file?
+  function contrastRatio(hex1, hex2) {
+    lum1 = luminance(hex1)
+    lum2 = luminance(hex2)
+    if (lum1 >= lum2) {
+      lighter = lum1;
+      darker = lum2;
+    } else {
+      darker = lum1;
+      lighter = lum2;
+    }
+    return (lighter + 0.05) / (darker + 0.05)
+  }
+
+  function luminance(hex) {
+    const [r8, g8, b8] = hexToRgb(hex)
+    const [r, g, b] = [r8, g8, b8].map((component) => {
+      const value = component / 255;
+      return value <= 0.03928 ? value / 12.92 : Math.pow((value + 0.055) / 1.055, 2.4);
+    });
+    return r * 0.2126 + g * 0.7152 + b * 0.0722;
+  };
+
+  function hexToRgb(hex) {
+    hex = hex.slice(1);
+    const value = parseInt(hex, 16);
+    const r = (value >> 16) & 255;
+    const g = (value >> 8) & 255;
+    const b = value & 255;
+
+    return [r, g, b];
+  };
+
+  config.addFilter('humanReadableContrastRatio', function(ratio) {
+    // SMELL: I can't stand how this is coded.
+    if (ratio < 4) {
+      digits = 1
+    } else if (ratio < 5) {
+      digits = 2
+    } else {
+      digits = 0
+    }
+    `${ratio.toFixed(digits)}:1`
+  });
+
   config.addFilter('readableDate', (dateObj) => {
     return DateTime.fromJSDate(dateObj, { zone: 'utc' }).toFormat(
       'dd LLL yyyy'
@@ -105,7 +159,7 @@ module.exports = function (config) {
   }).use(markdownItAnchor, {
     permalink: headingLinks,
     slugify: config.getFilter('slug'),
-  });
+  }).use(markdownItAttrs);
   config.setLibrary('md', markdownLibrary);
 
   // Override Browsersync defaults (used only with --serve)

_data/navigation.yaml

@@ -13,6 +13,26 @@ agile:
   - name: More 18F guides
     url: https://18f.gsa.gov/guides/
 
+brand:
+  - name: Introduction
+    url: /brand/
+  - name: Logo
+    url: /brand/logo/
+  - name: Color palette
+    url: /brand/color-palette/
+  - name: Typography
+    url: /brand/typography/
+  - name: Icons
+    url: /brand/icons/
+  - name: Templates
+    url: /brand/templates/
+  - name: Images
+    url: /brand/images/
+  - name: Principles
+    url: /brand/principles/
+  - name: More 18F guides
+    url: https://18f.gsa.gov/guides/
+
 content-guide:
   - name: About this guide
     url: /content-guide/

_data/titles_roots.yaml

@@ -2,15 +2,18 @@
 default: 
   title: 18F Approaches
   root: /
-accessibility: 
+accessibility:
   title: Accessibility
   root: /accessibility/
-agile: 
+agile:
   title: Agile
   root: /agile/
-content-guide: 
+brand:
+  title: Brand
+  root: /brand/
+content-guide:
   title: Content Guide
   root: /content-guide/
-derisking: 
+derisking:
   title: De-risking Guide
   root: /derisking/

_includes/guidelist.html

@@ -3,22 +3,29 @@
   <h2> Some approaches and stuff</h2>
     <div class="grid-row grid-gap"> 
 
-      <div class="tablet:grid-col-3"> 
-        <a href="{{'/accessibility/' | url }}"> 
+      <div class="tablet:grid-col-3">
+        <a href="{{'/accessibility/' | url }}">
           {% image_with_class "assets/_common/_img/accessibility.svg" "maxw-6" "" %}
           <p>So accessibiliity</p>
         </a>
       </div>
 
-      <div class="tablet:grid-col-3"> 
-        <a href="{{'/agile/' | url }}"> 
+      <div class="tablet:grid-col-3">
+        <a href="{{'/agile/' | url }}">
           {% image_with_class "assets/_common/_img/agile.svg" "maxw-6" "" %}
           <p>So agile</p>
         </a>
       </div>
 
-      <div class="tablet:grid-col-3"> 
-        <a href="{{'/content-guide/' | url }}"> 
+      <div class="tablet:grid-col-3">
+        <a href="{{'/brand/' | url }}">
+          {% image_with_class "assets/_common/_img/agile.svg" "maxw-6" "" %}
+          <p>Such brand</p>
+        </a>
+      </div>
+
+      <div class="tablet:grid-col-3">
+        <a href="{{'/content-guide/' | url }}">
           {% image_with_class "assets/_common/_img/content.svg" "maxw-6" "" %}
           <p>Very content-guide </p>
         </a>

assets/_common/styles/_uswds-theme-settings.scss

@@ -15,7 +15,7 @@ $brand-color-dark: #1C304A;
   $theme-font-path: '../../../node_modules/@uswds/uswds/dist/fonts',
   $theme-image-path: '../../../node_modules/@uswds/uswds/dist/img',
 
-  // TODO: remove 
+  // TODO: remove
   $theme-hero-image: '../_img/hero.png',
 
 
@@ -39,7 +39,7 @@ $brand-color-dark: #1C304A;
 
   /*------------------------------------------------
   ## Primary color
-  -------------------------------------------------*/ 
+  -------------------------------------------------*/
   $theme-color-primary-darkest: 'blue-90',
   $theme-color-primary-darker: $brand-color-dark,
   $theme-color-primary-dark: 'blue-70v',
@@ -50,14 +50,13 @@ $brand-color-dark: #1C304A;
 
   /*------------------------------------------------
   ## Accent color
-  -------------------------------------------------*/ 
+  -------------------------------------------------*/
   $theme-color-accent-cool-dark: 'cyan-50v',
   $theme-color-accent-cool: $brand-color-bright,
   $theme-color-accent-cool-light: 'cyan-20v',
 
   /*------------------------------------------------
   ## Error color
-  -------------------------------------------------*/ 
+  -------------------------------------------------*/
    $theme-color-error-lighter: 'red-warm-5v',
 );
-

assets/_common/styles/styles.scss

@@ -15,4 +15,3 @@ Custom styling
 
 // TODO: Delete
 // @forward "overrides/_hero.scss";
-