Add general link styles

package.json

@@ -23,7 +23,7 @@
   "devDependencies": {
     "@cloudfour/gulp-tasks": "^2.0.1",
     "@cloudfour/hbs-helpers": "^0.9.0",
-    "@mozilla-protocol/colors": "^2.0.4",
+    "@mozilla-protocol/colors": "^2.1.0",
     "bower": "^1.8.4",
     "doctoc": "^1.1.1",
     "drizzle-builder": "0.0.10",

src/assets/sass/demos/link-styles.scss

@@ -0,0 +1,59 @@
+// Link styles demo
+
+@import '../protocol/includes/lib';
+@import '../protocol/protocol';
+
+
+span[class^='link'],
+span[class^='visited'] {
+    cursor: pointer;
+}
+
+.link {
+    color: $color-link;
+    text-decoration: underline;
+
+    &:hover {
+        color: $color-link-hover;
+    }
+
+    &:active {
+        background-color: $color-gray-lighter;
+    }
+}
+
+.visited {
+    color: $color-link-visited;
+    text-decoration: underline;
+
+    &:hover {
+        color: $color-link-visited-hover;
+    }
+}
+
+.link-hover {
+    color: $color-link-hover;
+    text-decoration: underline;
+}
+
+.link-active {
+    color: $color-link;
+    background-color: rgba(0, 0, 0, .05);
+    text-decoration: underline;
+}
+
+.visited {
+    color: $color-link-visited;
+    text-decoration: underline;
+}
+
+.visited-hover {
+    color: $color-link-visited-hover;
+    text-decoration: underline;
+}
+
+.visited-active {
+    background-color: rgba(0, 0, 0, .05);
+    color: $color-link-visited;
+    text-decoration: underline;
+}

src/assets/sass/docs/site.scss

@@ -29,6 +29,10 @@
             color: #eee;
             text-decoration: underline;
         }
+
+        &:active {
+            background-color: transparent;
+        }
     }
 
     @media #{$mq-tablet} {
@@ -243,9 +247,19 @@
     @include text-display-level4;
 }
 
+.protosite-pattern-extra ul {
+    list-style: disc;
+    margin-left: 32px;
+
+    li {
+        margin-bottom: .5em;
+    }
+}
+
 .protosite-pattern-anchor {
     color: $color-primary;
     text-decoration: none;
+    border: 0;
     cursor: default;
 
     &:hover,

src/assets/sass/protocol/base/elements/_links.scss

@@ -4,22 +4,23 @@
 
 @import '../../includes/lib';
 
-
-a {
+:link {
     color: $color-link;
     text-decoration: underline;
 
-    &:hover,
-    &:focus,
-    &:active,
-    &:visited:hover,
-    &:visited:focus,
-    &:visited:active {
-        color: darken($color-link, 10%);
-        text-decoration: underline;
+    &:hover {
+        color: $color-link-hover;
+    }
+
+    &:active {
+        background-color: rgba(0, 0, 0, .05);
     }
+}
+
+:visited {
+    color: $color-link-visited;
 
-    &:visited {
-        color: lighten(desaturate($color-link, 50%), 20%);
+    &:hover {
+        color: $color-link-visited-hover;
     }
 }

src/data/colors.json

@@ -69,16 +69,28 @@
     ],
     "Interface colors": [
         {
-            "color": "Link blue",
-            "hex": "#00a7e0",
-            "rgb": "rgb(0, 167, 224)",
+            "color": "Link",
+            "hex": "#0060df",
+            "rgb": "rgb(0, 96, 223)",
             "token": "$color-link"
         },
         {
-            "color": "Link blue, hover",
-            "hex": "#0081ad",
-            "rgb": "rgb(0, 129, 173)",
-            "token": "darken($color-link, 10%)"
+            "color": "Link hover",
+            "hex": "#003eaa",
+            "rgb": "rgb(0, 62, 170)",
+            "token": "$color-link-hover"
+        },
+        {
+            "color": "Visited link",
+            "hex": "#8000d7",
+            "rgb": "rgb(128, 0, 215)",
+            "token": "$color-link-visited"
+        },
+        {
+            "color": "Visited link hover",
+            "hex": "#6200a4",
+            "rgb": "rgb(98, 0, 164)",
+            "token": "$color-link-visited-hover"
         },
         {
             "color": "Off-black",

src/pages/demos/link-styles.hbs

@@ -0,0 +1,26 @@
+---
+title: Link Styles
+notes: Demonstrating different link styles that are hard to show without special CSS tricks.
+styles:
+  - link-styles
+---
+
+<p>This page shows visual examples of the different link states.
+  This is purely for looks, not intended to serve as a usable code example.
+  See the <a href="{{@root.baseurl}}/patterns/atoms/links.html">Links atom</a>
+  for more detail.</p>
+
+<ul>
+  <li><p><span class="link">Unvisited link</span></p></li>
+  <li><p><span class="link-hover">Unvisited link, hover</span></p></li>
+  <li><p><span class="link-active">Unvisited link, active</span></p></li>
+  <li><p><span class="visited">Visited link</span></p></li>
+  <li><p><span class="visited-hover">Visited link, hover</span></p></li>
+  <li><p><span class="visited-active">Visited link, active</span></p></li>
+</ul>
+
+<p>This is a longer paragraph of text, made up of <a href="http://generator.lorem-ipsum.info/">numerous and varied words</a>.
+  Some of these words act as hyperlinks to connect this page to <a href="https://developer.mozilla.org/docs/Web/HTML/Element/a">other pages or resources</a>.
+  The humble link is the very lynchpin of the <a href="http://info.cern.ch/">World Wide Web</a>. Links make the web <a href="https://i.imgur.com/glHwVi8.gif">what it is</a>.
+  A <a href="https://facebook.com">web without links</a> wouldn’t really be <a href="https://i.imgur.com/SQYbMTF.gif">a web at all</a>.
+  Seriously, <a href="https://html5zombo.com">links are the best</a>. Try one today!</p>

src/patterns/atoms/links/text.hbs

@@ -0,0 +1,19 @@
+---
+name: Text link
+labels:
+  - inprogress
+description: |
+  Just your standard inline text link with no modifiers. Font family, size, weight, etc are inherited from the parent.
+order: -1
+notes: |
+  Links can appear in a number of states: unvisited, visited, hovered, active, and focused. It’s hard to display these states visually while keeping this component accurate to reality, so we’ve set up [a separate demo page](/demos/link-styles.html) to show all the link states in one place.
+tips: |
+  - Keep link text short, just a few words.
+  - The text in a link should be descriptive of the destination or offer some clear indication of where the link leads.
+nonos: |
+  - Don’t use “click here” as link text.
+  - Don‘t use text links (the `a` element) to trigger scripted actions unless the link also has a real destination in case JavaScript isn’t available. The `href` attribute should have a real URL, not `#` or `javascript:void(0)`. For script-only actions use a `button` element. Buttons do things; links go places.
+---
+
+
+A sentence of text with <a href="https://example.com">an example link</a> in the middle.

src/templates/drizzle/item.hbs

@@ -45,21 +45,21 @@
 
     {{!-- Notes --}}
     {{#if data.notes}}
-      <div class="protosite-pattern-notes">
+      <div class="protosite-pattern-extra protosite-pattern-extra-notes">
         <h3>Notes</h3>
         {{{data.notes}}}
       </div>
     {{/if}}
 
     {{#if data.tips}}
-    <section class="protosite-pattern-tips">
+    <section class="protosite-pattern-extra protosite-pattern-extra-tips">
       <h3>Tips</h3>
       {{{data.tips}}}
     </section>
     {{/if}}
 
     {{#if data.nonos}}
-    <section class="protosite-pattern-nonos">
+    <section class="protosite-pattern-extra protosite-pattern-extra-nonos">
       <h3>No-nos</h3>
       {{{data.nonos}}}
     </section>