Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

v0.6.4 #246

Merged
merged 10 commits into from
Jan 16, 2018
Merged

v0.6.4 #246

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
2d881e6
[fix] resolve #231
Jan 11, 2018
4876a8b
[fix] resolve #215
Jan 11, 2018
0cbfc7b
fix #233
Jan 12, 2018
c27bccb
[polish] add titles to structure the content
Jan 12, 2018
bef8f86
Merge branch 'staging' of github.com:FirefoxUX/photon into staging
Jan 12, 2018
ff52bf3
Update voice tone assets
TLHuang Jan 16, 2018
8330bed
Merge branch 'staging' of https://github.com/FirefoxUX/photon into st…
Jan 16, 2018
9919379
Update typography line lenghth
TLHuang Jan 16, 2018
03bcac4
Merge pull request #243 from FirefoxUX/Update-voice-and-tone-assets
aminalhazwani Jan 16, 2018
03d86d1
[edit] bump up version
Jan 16, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand Down
2 changes: 1 addition & 1 deletion contents/includes/copy/tone-do.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
2 changes: 1 addition & 1 deletion contents/includes/copy/tone-do2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
2 changes: 1 addition & 1 deletion contents/includes/copy/tone-dont.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
2 changes: 1 addition & 1 deletion contents/includes/copy/tone-dont2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
26 changes: 22 additions & 4 deletions contents/includes/typography/typography-table-overview.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
28 changes: 14 additions & 14 deletions contents/resources/colors.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
8 changes: 5 additions & 3 deletions contents/visuals/typography.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion images/copy/tone-voice/tone-1.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion images/copy/tone-voice/tone-2.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions images/copy/tone-voice/voice-and-tone-do-1.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions images/copy/tone-voice/voice-and-tone-do-2.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions images/copy/tone-voice/voice-and-tone-dont-1.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions images/copy/tone-voice/voice-and-tone-dont-2.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion images/resources/css.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 3 additions & 2 deletions images/resources/js.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading