Skip to content

Commit e9963bb

Browse files
brassy-brassy-
authored
Merge pull request #246 from FirefoxUX/staging
v0.6.4
2 parents 8c75f06 + 03d86d1 commit e9963bb

36 files changed

+79
-56
lines changed

‎CHANGELOG.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,15 @@
11
# Photon Design System Releases
22

3+
## [[0.6.4] - 2018-01-16](https://github.com/firefoxux/photon/releases/tag/v0.6.4)
4+
5+
### Fix
6+
7+
- [#215](https://github.com/FirefoxUX/photon/issues/215) B&W resource images feel disabled
8+
- [#232](https://github.com/FirefoxUX/photon/issues/232) Component card: build
9+
- [#233](https://github.com/FirefoxUX/photon/issues/233) Add more font scales to web typography
10+
- [#237](https://github.com/FirefoxUX/photon/issues/237) Visual: Voice and Tone assets
11+
- [#231](https://github.com/FirefoxUX/photon/issues/231) Broken links on Colors page
12+
313
## [[0.6.3] - 2018-01-08](https://github.com/firefoxux/photon/releases/tag/v0.6.3)
414

515
### Fix

‎contents/includes/copy/tone-do.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<div class="cf nr2 nl2 mb3">
22
<div class="fl-ns w-50-ns ph2">
33
<figure>
4-
<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">
4+
<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">
55
<% include ../global/do.html %>
66
</figure>
77
</div>

‎contents/includes/copy/tone-do2.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<div class="cf nr2 nl2 mb3">
22
<div class="fl-ns w-50-ns ph2">
33
<figure>
4-
<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">
4+
<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">
55
<% include ../global/do.html %>
66
</figure>
77
</div>

‎contents/includes/copy/tone-dont.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<div class="cf nr2 nl2 mb3">
22
<div class="fl-ns w-50-ns ph2">
33
<figure>
4-
<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">
4+
<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">
55
<% include ../global/dont.html %>
66
</figure>
77
</div>

‎contents/includes/copy/tone-dont2.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<div class="cf nr2 nl2 mb3">
22
<div class="fl-ns w-50-ns ph2">
33
<figure>
4-
<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">
4+
<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">
55
<% include ../global/dont.html %>
66
</figure>
77
</div>

‎contents/includes/typography/typography-table-overview.html‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
<tbody>
2424
<tr>
2525
<td><div class="background-image" style="background-image: url('../images/typography/win-Display20.png')" alt=""></td>
26-
<td><code>33px</code></td>
26+
<td><code>36px</code></td>
2727
<td>Light <code>200</code></td>
2828
<td>&#10005;</td>
2929
</tr>
@@ -88,7 +88,7 @@
8888
<tbody>
8989
<tr>
9090
<td><div class="background-image" style="background-image: url('../images/typography/mac-Display20.png')" alt=""></td>
91-
<td><code>33px</code></td>
91+
<td><code>36px</code></td>
9292
<td>Thin <code>100</code></td>
9393
<td>&#10005;</td>
9494
</tr>
@@ -153,7 +153,7 @@
153153
<tbody>
154154
<tr>
155155
<td><div class="background-image" style="background-image: url('../images/typography/u-Display20.png')" alt=""></td>
156-
<td><code>33px</code></td>
156+
<td><code>36px</code></td>
157157
<td>Light <code>300</code></td>
158158
<td>&#10005;</td>
159159
</tr>
@@ -218,11 +218,17 @@
218218
<tbody>
219219
<tr>
220220
<td><div class="background-image" style="background-image: url('../images/typography/web-Display20.png')" alt=""></td>
221-
<td><code>33px</code></td>
221+
<td><code>36px</code></td>
222222
<td>ExtraLight <code>200</code></td>
223223
<td>&#10005;</td>
224224
</tr>
225225
<tr>
226+
<td><div class="background-image" style="background-image: url('../images/typography/web-Title40.png')" alt=""></td>
227+
<td><code>28px</code></td>
228+
<td>Light <code>300</code></td>
229+
<td>&#10005;</td>
230+
</tr>
231+
<tr>
226232
<td><div class="background-image" style="background-image: url('../images/typography/web-Title30.png')" alt=""></td>
227233
<td><code>22px</code></td>
228234
<td>Light <code>300</code></td>
@@ -241,6 +247,12 @@
241247
<td>&#10005;</td>
242248
</tr>
243249
<tr>
250+
<td><div class="background-image" style="background-image: url('../images/typography/web-Body30.png')" alt=""></td>
251+
<td><code>17px</code></td>
252+
<td>Regular <code>400</code></td>
253+
<td>Bold <code>700</code></td>
254+
</tr>
255+
<tr>
244256
<td><div class="background-image" style="background-image: url('../images/typography/web-Body20.png')" alt=""></td>
245257
<td><code>15px</code></td>
246258
<td>Regular <code>400</code></td>
@@ -253,6 +265,12 @@
253265
<td>Bold <code>700</code></td>
254266
</tr>
255267
<tr>
268+
<td><div class="background-image" style="background-image: url('../images/typography/web-Caption30.png')" alt=""></td>
269+
<td><code>15px</code></td>
270+
<td>Regular <code>400</code></td>
271+
<td>Bold <code>700</code></td>
272+
</tr>
273+
<tr>
256274
<td><div class="background-image" style="background-image: url('../images/typography/web-Caption20.png')" alt=""></td>
257275
<td><code>13px</code></td>
258276
<td>Regular <code>400</code></td>

‎contents/resources/colors.html‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -10,41 +10,41 @@ <h2>For Development</h2>
1010
<div class="cf nr2 nl2">
1111
<div class="fl w-50 w-third-ns ph2 mb3">
1212
<figure>
13-
<a class="" href="http://design.firefox.com/design-tokens/photon-colors/photon-colors.css" download>
13+
<a class="" href="https://firefoxux.github.io/design-tokens/photon-colors/photon-colors.css" download>
1414
<img class="mb0" src="../images/resources/css.svg" alt="CSS logo">
1515
</a>
1616
<figcaption>
17-
<a class="" href="http://design.firefox.com/design-tokens/photon-colors/photon-colors.css" download>CSS variables</a>
17+
<a class="" href="https://firefoxux.github.io/design-tokens/photon-colors/photon-colors.css" download>CSS variables</a>
1818
</figcaption>
1919
</figure>
2020
</div>
2121
<div class="fl w-50 w-third-ns ph2 mb3">
2222
<figure>
23-
<a class="" href="http://design.firefox.com/design-tokens/photon-colors/photon-colors.scss" download>
23+
<a class="" href="https://firefoxux.github.io/design-tokens/photon-colors/photon-colors.scss" download>
2424
<img class="mb0" src="../images/resources/sass.svg" alt="Sass logo">
2525
</a>
2626
<figcaption>
27-
<a class="" href="http://design.firefox.com/design-tokens/photon-colors/photon-colors.scss" download>SCSS variables</a>
27+
<a class="" href="https://firefoxux.github.io/design-tokens/photon-colors/photon-colors.scss" download>SCSS variables</a>
2828
</figcaption>
2929
</figure>
3030
</div>
3131
<div class="fl w-50 w-third-ns ph2 mb3">
3232
<figure>
33-
<a class="" href="http://design.firefox.com/design-tokens/photon-colors/photon-colors.less" download>
33+
<a class="" href="https://firefoxux.github.io/design-tokens/photon-colors/photon-colors.less" download>
3434
<img class="mb0" src="../images/resources/less.svg" alt="Less logo">
3535
</a>
3636
<figcaption>
37-
<a class="" href="http://design.firefox.com/design-tokens/photon-colors/photon-colors.less" download>LESS variables</a>
37+
<a class="" href="https://firefoxux.github.io/design-tokens/photon-colors/photon-colors.less" download>LESS variables</a>
3838
</figcaption>
3939
</figure>
4040
</div>
4141
<div class="fl w-50 w-third-ns ph2 mb3">
4242
<figure>
43-
<a class="" href="http://design.firefox.com/design-tokens/photon-colors/photon-colors.js" download>
43+
<a class="" href="https://firefoxux.github.io/design-tokens/photon-colors/photon-colors.js" download>
4444
<img class="mb0" src="../images/resources/js.svg" alt="JavaScript logo">
4545
</a>
4646
<figcaption>
47-
<a class="" href="http://design.firefox.com/design-tokens/photon-colors/photon-colors.js" download>JS variables</a>
47+
<a class="" href="https://firefoxux.github.io/design-tokens/photon-colors/photon-colors.js" download>JS variables</a>
4848
</figcaption>
4949
</figure>
5050
</div>
@@ -66,31 +66,31 @@ <h2>For Apps</h2>
6666
<div class="cf nr2 nl2">
6767
<div class="fl w-50 w-third-ns ph2 mb3">
6868
<figure>
69-
<a class="" href="http://design.firefox.com/design-tokens/photon-colors/photon-colors.gpl" download>
69+
<a class="" href="https://firefoxux.github.io/design-tokens/photon-colors/photon-colors.gpl" download>
7070
<img class="mb0" src="../images/resources/gimp.svg" alt="Gimp logo">
7171
</a>
7272
<figcaption>
73-
<a class="" href="http://design.firefox.com/design-tokens/photon-colors/photon-colors.gpl" download>GIMP</a>
73+
<a class="" href="https://firefoxux.github.io/design-tokens/photon-colors/photon-colors.gpl" download>GIMP</a>
7474
</figcaption>
7575
</figure>
7676
</div>
7777
<div class="fl w-50 w-third-ns ph2 mb3">
7878
<figure>
79-
<a class="" href="http://design.firefox.com/design-tokens/photon-colors/photon-colors.soc" download>
79+
<a class="" href="https://firefoxux.github.io/design-tokens/photon-colors/photon-colors.soc" download>
8080
<img class="mb0" src="../images/resources/libre.svg" alt="Libre Office logo">
8181
</a>
8282
<figcaption>
83-
<a class="" href="http://design.firefox.com/design-tokens/photon-colors/photon-colors.soc" download>Libre Office</a>
83+
<a class="" href="https://firefoxux.github.io/design-tokens/photon-colors/photon-colors.soc" download>Libre Office</a>
8484
</figcaption>
8585
</figure>
8686
</div>
8787
<div class="fl w-50 w-third-ns ph2 mb3">
8888
<figure>
89-
<a class="" href="http://design.firefox.com/design-tokens/photon-colors/photon-colors.sketchpalette" download>
89+
<a class="" href="https://firefoxux.github.io/design-tokens/photon-colors/photon-colors.sketchpalette" download>
9090
<img class="mb0" src="../images/resources/sketch.svg" alt="Sketch logo">
9191
</a>
9292
<figcaption>
93-
<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.
93+
<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.
9494
</figcaption>
9595
</figure>
9696
</div>

‎contents/visuals/typography.html‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -100,10 +100,12 @@ <h2>Color</h2>
100100
<p>
101101
Choose a text color based on the content's purpose and priority.
102102
</p>
103+
<h3>Primary Color</h3>
103104
<p>
104105
Use a primary color for main titles and body text.
105106
</p>
106107
<% include ../includes/typography/typography-primary-color.html %>
108+
<h3>Secondary Color</h3>
107109
<p>
108110
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.
109111
</p>
@@ -156,9 +158,9 @@ <h2>Line Length</h2>
156158
<p>
157159
The number of characters per line influences readability. Studies indicate the following guidelines for English:
158160
<ul>
159-
<li><strong>Satisfactory</strong> 45-75 characters (desktop) or 35-40 characters (mobile) per line is widely regarded as a satisfactory line length.</li>
160-
<li><strong>Optimal</strong> Around 66 characters (desktop) or 39 characters (mobile) is optimal.</li>
161-
<li><strong>Too long</strong> More than 90 characters (desktop) or 50 characters (mobile) is likely too long for continuous reading.</li>
161+
<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>
162+
<li><strong>Optimal</strong> <br>Around 66 characters (desktop) or 39 characters (mobile) is optimal.</li>
163+
<li><strong>Too long</strong> <br>More than 90 characters (desktop) or 50 characters (mobile) is likely too long for continuous reading.</li>
162164
</ul>
163165
</p>
164166
<figure>

‎images/copy/tone-voice/tone-1.svg‎

Lines changed: 1 addition & 1 deletion
Loading

‎images/copy/tone-voice/tone-2.svg‎

Lines changed: 1 addition & 1 deletion
Loading

0 commit comments

Comments
 (0)