Merge pull request #185 from FirefoxUX/staging

Version v0.6.1
FirefoxUX · Nov 20, 2017 · 4b0c40a · 4b0c40a
2 parents a205a80 + 88dc1bb
commit 4b0c40a
Show file tree

Hide file tree

Showing 34 changed files with 445 additions and 73 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,9 +1,27 @@
 # Photon Design System Releases
 
+## [[0.6.1] - 2017-11-20](https://github.com/firefoxux/photon/releases/tag/v0.6.1)
+
+### Add
+- Visuals: Grid spacing visual asset
+- Resources: Colors page
+
+### Fix
+- [#150](https://github.com/FirefoxUX/photon/issues/150)  Visual: Update Grid asset and add new one for spacing
+- [#166](https://github.com/FirefoxUX/photon/issues/166) Fix link (it pointed to a local server) 
+- [#169](https://github.com/FirefoxUX/photon/pull/169) [fix] swapped text, bad grammar, invalid HTML in Errors
+- [#172](https://github.com/FirefoxUX/photon/issues/172) Visual: Color assets 
+- [#174](https://github.com/FirefoxUX/photon/issues/174) Add missing 'alt' attributes to improve accessibility
+
+### Change
+- Visuals: grid baseline grid visual asset
+- Visuals: typography visual assets
+- Visuals: colors visual assets
+
 ## [[0.6.0] - 2017-11-14](https://github.com/firefoxux/photon/releases/tag/v0.6.0)
 
 ### Add
-- Components: Checkboxes draft page
+- Components: Checkboxes
 - Components: Doorhangers draft page
 
 ### Fix

diff --git a/contents/components/input-fields.html b/contents/components/input-fields.html
@@ -1,5 +1,5 @@
 <header>
-  <h1>Input Field</h1>
+  <h1>Input Fields</h1>
   <p>
     Input fields allow users to add text within a defined area.
   </p>

diff --git a/contents/components/link.html → contents/components/links.html b/contents/components/link.html → contents/components/links.html
@@ -1,5 +1,5 @@
 <header>
-  <h1>Link</h1>
+  <h1>Links</h1>
   <p>
     Link is text that users can select to access websites or subsequent pages.
   </p>

diff --git a/contents/copy/voice-and-tone.html b/contents/copy/voice-and-tone.html
@@ -21,11 +21,11 @@ <h2>Appropriate Tone</h2>
   <p>Our personal vocal tone varies with the situation — what we’re discussing, who we’re talking with, whether we’re calm or irritated. The Firefox tone works the same way, adjusting to align with a user’s need or state of mind. One way to look at tone is as a set of ranges along a continuum.</p>
   <p>For areas where supporting the user is critical, like error messages or preference pages, our tone ranges might appear like: </p>
   <figure>
-    <img src="../images/copy/tone-voice/tone-1.svg" alt="">
+    <img src="../images/copy/tone-voice/tone-1.svg" alt="Graph that displays what tone to use on error pages or preference pages">
   </figure>
   <p>For areas where we aim to direct and motivate users — like snippets, onboarding, and sync sign-up — our tone ranges might appear like: </p>
   <figure>
-    <img src="../images/copy/tone-voice/tone-2.svg" alt="">
+    <img src="../images/copy/tone-voice/tone-2.svg" alt="Graph that displays what tone to use to motivate and direct users">
   </figure>
   <% include ../includes/copy/tone-dont.html %>
   <% include ../includes/copy/tone-do.html %>

diff --git a/contents/includes/color/color-icons.html b/contents/includes/color/color-icons.html
@@ -3,12 +3,12 @@
     <p>Use Grey 90 fill with 80% opacity on light background for primary icons. Use 60% opacity for secondary icons.</p>
   </div>
   <div class="fl w-50-ns ph3 mb3">
-    <img src="../images/color/color-icons-light.png" alt="Icons on the toolbar with a light theme">
+    <img src="../images/color/color-icon-light.svg" alt="Icons in the toolbar with a light theme">
   </div>
   <div class="fl w-50-ns ph3 mb3">
     <p>Use Grey 10 fill with 80% opacity on dark background for primary icons. 60% opacity for secondary icons.</p>
   </div>
   <div class="fl w-50-ns ph3 mb3">
-    <img src="../images/color/color-icons-dark.png" alt="Icons on the toolbar with a dark theme">
+    <img src="../images/color/color-icon-dark.svg" alt="Icons in the toolbar with a dark theme">
   </div>
 </div>
diff --git a/contents/includes/color/color-theme-dark.html b/contents/includes/color/color-theme-dark.html
@@ -1,12 +1,12 @@
 <div class="cf nr2 nl2">
   <div class="fl-ns w-50-ns ph2 mb3">
-    <img src="../images/color/color-theme-dark.png" alt="">
+    <img src="../images/color/color-theme-dark.svg" alt="Dark theme color palette applied to the chrome">
   </div>
   <div class="fl-ns w-50-ns ph2 mb3">
-    <div class="bg-grey-50">
+    <div class="bg-grey-60">
       <div class="cf pa3">
-        <p class="fl ma0 w-50 white font-smoothing">Grey 50</p>
-        <p class="fl ma0 w-50 tr"><code>#737373</code></p>
+        <p class="fl ma0 w-50 white font-smoothing">Grey 60</p>
+        <p class="fl ma0 w-50 tr"><code>#4a4a4f</code></p>
       </div>
     </div>
     <div class="bg-grey-70">

diff --git a/contents/includes/color/color-theme-light.html b/contents/includes/color/color-theme-light.html
@@ -1,6 +1,6 @@
 <div class="cf nr2 nl2">
   <div class="fl-ns w-50-ns ph2 mb3">
-    <img src="../images/color/color-theme-light.png" alt="">
+    <img src="../images/color/color-theme-light.svg" alt="Light theme color palette applied to the chrome">
   </div>
   <div class="fl-ns w-50-ns ph2 mb3">
     <div class="bg-white">

diff --git a/contents/includes/iconography/icons-icon-color-examples.html b/contents/includes/iconography/icons-icon-color-examples.html
@@ -43,7 +43,7 @@
 <div class="cf nr2 nl2">
   <div class="fl w-50-ns ph2">
     <figure>
-      <img src="../images/warnings/error-generic-example_2.png" >
+      <img src="../images/warnings/error-generic-example_2.png" alt="Example of yellow color applied to a warning icon">
       <figcaption>Warning message before entering about:config.</figcaption>
     </figure>
   </div>

diff --git a/contents/includes/iconography/icons-icon-shape.html b/contents/includes/iconography/icons-icon-shape.html
@@ -1,11 +1,11 @@
 <div class="cf nr2 nl2">
   <div class="fl-ns w-third-ns ph2 mb3">
-    <img class="db w-100-ns mb0" src="../images/icons/icon-shape-stroke-1.svg" alt="">
+    <img class="db w-100-ns mb0" src="../images/icons/icon-shape-stroke-1.svg" alt="Highlight of rounded corners in icons">
   </div>
   <div class="fl-ns w-third-ns ph2 mb3">
-    <img class="db w-100-ns mb0" src="../images/icons/icon-shape-stroke-2.svg" alt="">
+    <img class="db w-100-ns mb0" src="../images/icons/icon-shape-stroke-2.svg" alt="Highlight of one and two pixels stroke in icons">
   </div>
   <div class="fl-ns w-third-ns ph2 mb3">
-    <img class="db w-100-ns mb0" src="../images/icons/icon-shape-stroke-3.svg" alt="">
+    <img class="db w-100-ns mb0" src="../images/icons/icon-shape-stroke-3.svg" alt="Highlight of two pixels stroke in icons">
   </div>
 </div>
diff --git a/contents/includes/patterns/errors/system-errors.html b/contents/includes/patterns/errors/system-errors.html
@@ -1,21 +1,20 @@
 <div class="cf nr2 nl2">
   <div class="fl-ns w-50-ns ph2">
     <p>
-      User input error occurs when Firefox doesn't understand user inputs.
+      System errors occur when Firefox fails for some reason most likely not related to the user.
     </p>
-    <p>The most common cases are:
-      <ul>
+    <p>The most common cases are:</p>
+    <ul>
       <li>
-          Misspelled errors
-        </li>
-        <li>
-          Connettivity issues
-        </li>
-        <li>
-          Failure to load
-        </li>
-      </ul>
-    </p>
+        Misspelled errors
+      </li>
+      <li>
+        Connectivity issues
+      </li>
+      <li>
+        Failure to load
+      </li>
+    </ul>
   </div>
   <div class="fl-ns w-50-ns ph2">
     <figure>

diff --git a/contents/includes/patterns/errors/user-input-errors.html b/contents/includes/patterns/errors/user-input-errors.html
@@ -1,7 +1,7 @@
 <div class="cf nr2 nl2">
   <div class="fl-ns w-50-ns ph2">
     <p>
-      System errors occurs when Firefox fails for some reasons most likely not related to the user.
+      User input errors occur when Firefox doesn’t understand user inputs.
     </p>
     <p>The most common cases are:</p>
     <ul>

diff --git a/contents/index.json b/contents/index.json
@@ -97,14 +97,17 @@
       {"title": "Input Fields",
         "file": "input-fields.html"},
       {"title": "Link",
-        "file": "link.html"},
+        "file": "links.html"},
       {"title": "Message Bars",
         "file": "message-bars.html"}
     ]
   },
   {"title": "Resources",
     "directory": "resources",
     "pages": [
+      {"title": "Colors",
+        "file": "colors.html"
+      },
       {"title": "Icons",
         "file": "icons.html"
       },

diff --git a/contents/motion/duration-and-easing.html b/contents/motion/duration-and-easing.html
@@ -37,6 +37,6 @@ <h2>Easing</h2>
     </tbody>
   </table>
   <figure>
-    <img src="../images/motion/curve.jpg" alt="">
+    <img src="../images/motion/curve.jpg" alt="Graph that displayes the easing curve">
   </figure>
 </section>
diff --git a/contents/resources/colors.html b/contents/resources/colors.html
@@ -0,0 +1,64 @@
+<header>
+  <h1>Colors</h1>
+  <p>
+    The standard set of Photon colors.
+  </p>
+</header>
+
+<section>
+  <h2>For Development</h2>
+  <ul>
+    <li>
+      <p>
+        <a href="https://raw.githubusercontent.com/FirefoxUX/design-tokens/master/colors/colors.css" download>CSS variables</a>
+      </p>
+    </li>
+    <li>
+      <p>
+        <a href="https://raw.githubusercontent.com/FirefoxUX/design-tokens/master/colors/colors.scss" download>SCSS variables</a>
+      </p>
+    </li>
+    <li>
+      <p>
+        <a href="https://raw.githubusercontent.com/FirefoxUX/design-tokens/master/colors/colors.less" download>LESS variables</a>
+      </p>
+    </li>
+    <li>
+      <p>
+        <a href="https://raw.githubusercontent.com/FirefoxUX/design-tokens/master/colors/colors.js" download>JS variables</a>
+      </p>
+    </li>
+    <li>
+      <p>
+        <a href="https://www.npmjs.com/package/photon-colors">NPM package</a>
+      </p>
+    </li>
+  </ul>
+</section>
+
+<section>
+  <h2>For Apps</h2>
+    <ul>
+    <li>
+      <p>
+        <a href="https://raw.githubusercontent.com/FirefoxUX/design-tokens/master/colors/colors.gpl" download>GIMP</a>
+      </p>
+    </li>
+    <li>
+      <p>
+        <a href="https://raw.githubusercontent.com/FirefoxUX/design-tokens/master/colors/colors.soc" download>Libre Office</a>
+      </p>
+    </li>
+    <li>
+      <p>
+        <a href="#!" disabled>Sketch</a> used together with the <a href="https://github.com/andrewfiorillo/sketch-palettes/">Sketch Palettes</a> plugin (coming soon-ish)
+      </p>
+    </li>
+  </ul>
+</section>
+
+<section>
+  <p>
+    Learn more about <a href="../visuals/color.html">color</a>.
+  </p>
+</section>
diff --git a/contents/resources/design-tokens.html b/contents/resources/design-tokens.html
@@ -1,20 +1,12 @@
 <header>
   <h1>Design Tokens</h1>
   <p>
-    Design tokens are named entity that store a visual design attribute. They are language application agnostic and future friendly.
+    A design token is an abstraction of a visual property such as color, font, width, animation, etc. These raw values are language application agnostic and once transformed and formatted can be used on any platform.
   </p>
 </header>
 
 <section>
-  <h2>NPM Modules</h2>
-  <ul>
-    <li>
-      <p>
-        <a href="https://www.npmjs.com/package/photon-colors">Photon Colors</a>. This package lets you use the Photon colors in your web project.
-      </p>
-    </li>
-  </ul>
   <p>
-    Learn more about <a href="../visuals/color.html">Color</a>.
+    Learn more about <a href="https://github.com/FirefoxUX/design-tokens">design tokens</a>.
   </p>
 </section>
diff --git a/contents/resources/fonts.html b/contents/resources/fonts.html
@@ -1,7 +1,7 @@
 <header>
   <h1>Fonts</h1>
   <p>
-    Firefox native products use system fonts when possible. Web products use Fira Sans. Here's a list of direct download links.
+    The standard set of Photon fonts.
   </p>
 </header>
 
@@ -35,6 +35,6 @@ <h2>Typefaces</h2>
     </li>
   </ul>
   <p>
-    Learn more about <a href="../visuals/typography.html">Typography</a>.
+    Learn more about <a href="../visuals/typography.html">typography</a>.
   </p>
 </section>
diff --git a/contents/resources/icons.html b/contents/resources/icons.html
@@ -1,7 +1,7 @@
 <header>
   <h1>Icons</h1>
   <p>
-    You can download Photon icons from the Icons Library or if you don't find what you need grab the Icons Template, design a new Photon icon, and submit it to the Design System.
+    The standard set of Photon icons.
   </p>
 </header>
 
@@ -11,19 +11,19 @@ <h2>Icons Library</h2>
     <img src="../images/resources/library.png" alt="Icon Library Screenshot">
   </figure>
   <p>
-    The <a href="http://design.firefox.com/icons/">Icons Library</a> provides downloadable Photon icons for desktop, iOS, Android and web.
+    The <a href="http://design.firefox.com/icons/">icons library</a> provides downloadable Photon icons for desktop, iOS, Android and web.
   </p>
   <p>
-    Learn more about <a href="../visuals/iconography.html">Iconography</a>.
+    Learn more about <a href="../visuals/iconography.html">iconography</a>.
   </p>
 </section>
 
 <section>
   <h2>Icons Template</h2>
   <figure>
-    <img src="../images/resources/template.png" alt="Icon Templates screenshot">
+    <img src="../images/resources/template.png" alt="Icon templates screenshot">
   </figure>
   <p>
-    The <a href="https://drive.google.com/file/d/0BxuJhuqlnYhKNUZOeUNNTmxkZkk/view?usp=sharing">Icons Template</a> provides guidance on designing icons within the defined <a href="../visuals/iconography.html#grid">grid</a> for desktop, iOS, Android and web.
+    The <a href="https://drive.google.com/file/d/0BxuJhuqlnYhKNUZOeUNNTmxkZkk/view?usp=sharing">icons template</a> provides guidance on designing icons within the defined <a href="../visuals/iconography.html#grid">grid</a> for desktop, iOS, Android and web.
   </p>
 </section>