Merge pull request #246 from FirefoxUX/staging

v0.6.4
FirefoxUX · Jan 16, 2018 · e9963bb · e9963bb
2 parents 8c75f06 + 03d86d1
commit e9963bb
Show file tree

Hide file tree

Showing 36 changed files with 79 additions and 56 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,15 @@
 # Photon Design System Releases
 
+## [[0.6.4] - 2018-01-16](https://github.com/firefoxux/photon/releases/tag/v0.6.4)
+
+### Fix
+
+- [#215](https://github.com/FirefoxUX/photon/issues/215) B&W resource images feel disabled
+- [#232](https://github.com/FirefoxUX/photon/issues/232) Component card: build
+- [#233](https://github.com/FirefoxUX/photon/issues/233) Add more font scales to web typography
+- [#237](https://github.com/FirefoxUX/photon/issues/237) Visual: Voice and Tone assets
+- [#231](https://github.com/FirefoxUX/photon/issues/231) Broken links on Colors page
+
 ## [[0.6.3] - 2018-01-08](https://github.com/firefoxux/photon/releases/tag/v0.6.3)
 
 ### Fix

diff --git a/contents/includes/copy/tone-do.html b/contents/includes/copy/tone-do.html
@@ -1,7 +1,7 @@
 <div class="cf nr2 nl2 mb3">
   <div class="fl-ns w-50-ns ph2">
     <figure>
-      <img class="db w-100-ns outline outline--black-01 outline-offset--1" src="../images/copy/tone-voice/restore-tabs-photon.jpg" alt="example from firefox55 of restore tabs">
+      <img class="db w-100-ns outline outline--black-01 outline-offset--1" src="../images/copy/tone-voice/voice-and-tone-do-1.svg" alt="example from firefox55 of restore tabs">
       <% include ../global/do.html %> 
     </figure>
   </div>

diff --git a/contents/includes/copy/tone-do2.html b/contents/includes/copy/tone-do2.html
@@ -1,7 +1,7 @@
 <div class="cf nr2 nl2 mb3">
   <div class="fl-ns w-50-ns ph2">
     <figure>
-      <img class="db w-100-ns outline outline--black-01 outline-offset--1" src="../images/copy/tone-voice/server-photon.jpg" alt="example from firefox55 of restore tabs">
+      <img class="db w-100-ns outline outline--black-01 outline-offset--1" src="../images/copy/tone-voice/voice-and-tone-do-2.svg" alt="example from firefox55 of restore tabs">
       <% include ../global/do.html %>
     </figure>
   </div>

diff --git a/contents/includes/copy/tone-dont.html b/contents/includes/copy/tone-dont.html
@@ -1,7 +1,7 @@
 <div class="cf nr2 nl2 mb3">
   <div class="fl-ns w-50-ns ph2">
     <figure>
-      <img class="db w-100-ns outline outline--black-01 outline-offset--1" src="../images/copy/tone-voice/restore-tabs-prephoton.jpg" alt="example from firefox55 of restore tabs">
+      <img class="db w-100-ns outline outline--black-01 outline-offset--1" src="../images/copy/tone-voice/voice-and-tone-dont-1.svg" alt="example from firefox55 of restore tabs">
       <% include ../global/dont.html %>
     </figure>
   </div>

diff --git a/contents/includes/copy/tone-dont2.html b/contents/includes/copy/tone-dont2.html
@@ -1,7 +1,7 @@
 <div class="cf nr2 nl2 mb3">
   <div class="fl-ns w-50-ns ph2">
     <figure>
-      <img class="db w-100-ns outline outline--black-01 outline-offset--1" src="../images/copy/tone-voice/server-prephoton.jpg" alt="example from firefox55 of server not found">
+      <img class="db w-100-ns outline outline--black-01 outline-offset--1" src="../images/copy/tone-voice/voice-and-tone-dont-2.svg" alt="example from firefox55 of server not found">
       <% include ../global/dont.html %>
     </figure>
   </div>

diff --git a/contents/includes/typography/typography-table-overview.html b/contents/includes/typography/typography-table-overview.html
@@ -23,7 +23,7 @@
       <tbody>
         <tr>
           <td><div class="background-image" style="background-image: url('../images/typography/win-Display20.png')" alt=""></td>
-          <td><code>33px</code></td>
+          <td><code>36px</code></td>
           <td>Light <code>200</code></td>
           <td>&#10005;</td>
         </tr>
@@ -88,7 +88,7 @@
       <tbody>
         <tr>
           <td><div class="background-image" style="background-image: url('../images/typography/mac-Display20.png')" alt=""></td>
-          <td><code>33px</code></td>
+          <td><code>36px</code></td>
           <td>Thin <code>100</code></td>
           <td>&#10005;</td>
         </tr>
@@ -153,7 +153,7 @@
       <tbody>
         <tr>
           <td><div class="background-image" style="background-image: url('../images/typography/u-Display20.png')" alt=""></td>
-          <td><code>33px</code></td>
+          <td><code>36px</code></td>
           <td>Light <code>300</code></td>
           <td>&#10005;</td>
         </tr>
@@ -218,11 +218,17 @@
       <tbody>
         <tr>
        <td><div class="background-image" style="background-image: url('../images/typography/web-Display20.png')" alt=""></td>
-          <td><code>33px</code></td>
+          <td><code>36px</code></td>
           <td>ExtraLight <code>200</code></td>
           <td>&#10005;</td>
         </tr>
         <tr>
+       <td><div class="background-image" style="background-image: url('../images/typography/web-Title40.png')" alt=""></td>
+          <td><code>28px</code></td>
+          <td>Light <code>300</code></td>
+          <td>&#10005;</td>
+        </tr>
+        <tr>
        <td><div class="background-image" style="background-image: url('../images/typography/web-Title30.png')" alt=""></td>
           <td><code>22px</code></td>
           <td>Light <code>300</code></td>
@@ -241,6 +247,12 @@
           <td>&#10005;</td>
         </tr>
         <tr>
+       <td><div class="background-image" style="background-image: url('../images/typography/web-Body30.png')" alt=""></td>
+          <td><code>17px</code></td>
+          <td>Regular <code>400</code></td>
+          <td>Bold <code>700</code></td>
+        </tr>
+        <tr>
        <td><div class="background-image" style="background-image: url('../images/typography/web-Body20.png')" alt=""></td>
           <td><code>15px</code></td>
           <td>Regular <code>400</code></td>
@@ -253,6 +265,12 @@
           <td>Bold <code>700</code></td>
         </tr>
         <tr>
+       <td><div class="background-image" style="background-image: url('../images/typography/web-Caption30.png')" alt=""></td>
+          <td><code>15px</code></td>
+          <td>Regular <code>400</code></td>
+          <td>Bold <code>700</code></td>
+      </tr>
+        <tr>
        <td><div class="background-image" style="background-image: url('../images/typography/web-Caption20.png')" alt=""></td>
           <td><code>13px</code></td>
           <td>Regular <code>400</code></td>

diff --git a/contents/resources/colors.html b/contents/resources/colors.html
@@ -10,41 +10,41 @@ <h2>For Development</h2>
   <div class="cf nr2 nl2">
     <div class="fl w-50 w-third-ns ph2 mb3">
       <figure>
-        <a class="" href="http://design.firefox.com/design-tokens/photon-colors/photon-colors.css" download>
+        <a class="" href="https://firefoxux.github.io/design-tokens/photon-colors/photon-colors.css" download>
           <img class="mb0" src="../images/resources/css.svg" alt="CSS logo">
         </a>
         <figcaption>
-          <a class="" href="http://design.firefox.com/design-tokens/photon-colors/photon-colors.css" download>CSS variables</a>
+          <a class="" href="https://firefoxux.github.io/design-tokens/photon-colors/photon-colors.css" download>CSS variables</a>
         </figcaption>
       </figure>
     </div>
     <div class="fl w-50 w-third-ns ph2 mb3">
       <figure>
-        <a class="" href="http://design.firefox.com/design-tokens/photon-colors/photon-colors.scss" download>
+        <a class="" href="https://firefoxux.github.io/design-tokens/photon-colors/photon-colors.scss" download>
           <img class="mb0" src="../images/resources/sass.svg" alt="Sass logo">
         </a>
         <figcaption>
-          <a class="" href="http://design.firefox.com/design-tokens/photon-colors/photon-colors.scss" download>SCSS variables</a>
+          <a class="" href="https://firefoxux.github.io/design-tokens/photon-colors/photon-colors.scss" download>SCSS variables</a>
         </figcaption>
       </figure>
     </div>
     <div class="fl w-50 w-third-ns ph2 mb3">
       <figure>
-        <a class="" href="http://design.firefox.com/design-tokens/photon-colors/photon-colors.less" download>
+        <a class="" href="https://firefoxux.github.io/design-tokens/photon-colors/photon-colors.less" download>
           <img class="mb0" src="../images/resources/less.svg" alt="Less logo">
         </a>
         <figcaption>
-          <a class="" href="http://design.firefox.com/design-tokens/photon-colors/photon-colors.less" download>LESS variables</a>
+          <a class="" href="https://firefoxux.github.io/design-tokens/photon-colors/photon-colors.less" download>LESS variables</a>
         </figcaption>
       </figure>
     </div>
     <div class="fl w-50 w-third-ns ph2 mb3">
       <figure>
-        <a class="" href="http://design.firefox.com/design-tokens/photon-colors/photon-colors.js" download>
+        <a class="" href="https://firefoxux.github.io/design-tokens/photon-colors/photon-colors.js" download>
           <img class="mb0" src="../images/resources/js.svg" alt="JavaScript logo">
         </a>
         <figcaption>
-          <a class="" href="http://design.firefox.com/design-tokens/photon-colors/photon-colors.js" download>JS variables</a>
+          <a class="" href="https://firefoxux.github.io/design-tokens/photon-colors/photon-colors.js" download>JS variables</a>
         </figcaption>
       </figure>
     </div>
@@ -66,31 +66,31 @@ <h2>For Apps</h2>
   <div class="cf nr2 nl2">
     <div class="fl w-50 w-third-ns ph2 mb3">
       <figure>
-        <a class="" href="http://design.firefox.com/design-tokens/photon-colors/photon-colors.gpl" download>
+        <a class="" href="https://firefoxux.github.io/design-tokens/photon-colors/photon-colors.gpl" download>
           <img class="mb0" src="../images/resources/gimp.svg" alt="Gimp logo">
         </a>
         <figcaption>
-          <a class="" href="http://design.firefox.com/design-tokens/photon-colors/photon-colors.gpl" download>GIMP</a>
+          <a class="" href="https://firefoxux.github.io/design-tokens/photon-colors/photon-colors.gpl" download>GIMP</a>
         </figcaption>
       </figure>
     </div>
     <div class="fl w-50 w-third-ns ph2 mb3">
       <figure>
-        <a class="" href="http://design.firefox.com/design-tokens/photon-colors/photon-colors.soc" download>
+        <a class="" href="https://firefoxux.github.io/design-tokens/photon-colors/photon-colors.soc" download>
           <img class="mb0" src="../images/resources/libre.svg" alt="Libre Office logo">
         </a>
         <figcaption>
-          <a class="" href="http://design.firefox.com/design-tokens/photon-colors/photon-colors.soc" download>Libre Office</a>
+          <a class="" href="https://firefoxux.github.io/design-tokens/photon-colors/photon-colors.soc" download>Libre Office</a>
         </figcaption>
       </figure>
     </div>
     <div class="fl w-50 w-third-ns ph2 mb3">
       <figure>
-        <a class="" href="http://design.firefox.com/design-tokens/photon-colors/photon-colors.sketchpalette" download>
+        <a class="" href="https://firefoxux.github.io/design-tokens/photon-colors/photon-colors.sketchpalette" download>
           <img class="mb0" src="../images/resources/sketch.svg" alt="Sketch logo">
         </a>
         <figcaption>
-          <a class="" href="http://design.firefox.com/design-tokens/photon-colors/photon-colors.sketchpalette" download>Sketch</a> used together with the <a class="" href="https://github.com/andrewfiorillo/sketch-palettes/">Sketch Palettes</a> plugin.
+          <a class="" href="https://firefoxux.github.io/design-tokens/photon-colors/photon-colors.sketchpalette" download>Sketch</a> used together with the <a class="" href="https://github.com/andrewfiorillo/sketch-palettes/">Sketch Palettes</a> plugin.
         </figcaption>
       </figure>
     </div>

diff --git a/contents/visuals/typography.html b/contents/visuals/typography.html
@@ -100,10 +100,12 @@ <h2>Color</h2>
   <p>
      Choose a text color based on the content's purpose and priority.
   </p>
+  <h3>Primary Color</h3>
   <p>
     Use a primary color for main titles and body text.
   </p>
   <% include ../includes/typography/typography-primary-color.html %>
+  <h3>Secondary Color</h3>
   <p>
     Use a secondary color for accompanying text that adds further information, details, or features to the primary content. Examples include caption text and menu subtitles.
   </p>
@@ -156,9 +158,9 @@ <h2>Line Length</h2>
   <p>
     The number of characters per line influences readability. Studies indicate the following guidelines for English: 
     <ul>
-      <li><strong>Satisfactory</strong> 45-75 characters (desktop) or 35-40 characters (mobile) per line is widely regarded as a satisfactory line length.</li>
-      <li><strong>Optimal</strong> Around 66 characters (desktop) or 39 characters (mobile) is optimal.</li>
-      <li><strong>Too long</strong> More than 90 characters (desktop) or 50 characters (mobile) is likely too long for continuous reading.</li>
+      <li><strong>Satisfactory</strong> <br>45-75 characters (desktop) or 35-40 characters (mobile) per line is widely regarded as a satisfactory line length.</li>
+      <li><strong>Optimal</strong> <br>Around 66 characters (desktop) or 39 characters (mobile) is optimal.</li>
+      <li><strong>Too long</strong> <br>More than 90 characters (desktop) or 50 characters (mobile) is likely too long for continuous reading.</li>
     </ul>
   </p>
   <figure>

diff --git a/images/copy/tone-voice/tone-1.svg b/images/copy/tone-voice/tone-1.svg
diff --git a/images/copy/tone-voice/tone-2.svg b/images/copy/tone-voice/tone-2.svg
diff --git a/images/copy/tone-voice/voice-and-tone-do-1.svg b/images/copy/tone-voice/voice-and-tone-do-1.svg
diff --git a/images/copy/tone-voice/voice-and-tone-do-2.svg b/images/copy/tone-voice/voice-and-tone-do-2.svg
diff --git a/images/copy/tone-voice/voice-and-tone-dont-1.svg b/images/copy/tone-voice/voice-and-tone-dont-1.svg
diff --git a/images/copy/tone-voice/voice-and-tone-dont-2.svg b/images/copy/tone-voice/voice-and-tone-dont-2.svg
diff --git a/images/resources/css.svg b/images/resources/css.svg
diff --git a/images/resources/js.svg b/images/resources/js.svg