Merge pull request #101 from Wikia/XW-2203

Damian Jóźwiak · web-flow · commit f9cc9f482dda · 2016-11-14T17:25:13.000+01:00
XW-2203 | extended definition for font-family set
diff --git a/app/styles/app.scss b/app/styles/app.scss
@@ -127,4 +127,11 @@ pre {
 	}
 }
 
+.warning-note {
+	background-color: rgba($wds-color-warning, .2);
+	border: 1px solid rgba($wds-color-warning, .9);
+	margin-top: 30px;
+	padding: 14px;
+}
+
 ////////////////////////////////////// END of Reusable Classes section //////////////////////////////////////
diff --git a/app/templates/base-styles/typography.hbs b/app/templates/base-styles/typography.hbs
@@ -14,7 +14,7 @@
 <section>
 	<h2 id="font-family">Font Family</h2>
 	<p>For highest browser compatibility we decided to follow direction described in <a href="https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/">Using System UI Fonts In Web Design: A Quick Practical Guide</a>. It provides a list of font-families for browsers to fallback. We listed font-families supported by major operating systems and finally we fall back to <code>sans-serif</code>. This way we can avoid web-font delivery process which would hit page performance.</p>
-	<code><span class="format-code">$wds-font-family</span>: 'San Francisco', 'Helvetica Neue', 'Roboto', 'Segoe UI', 'Ubuntu', 'Droid Sans', sans-serif;</code>
+	<code><span class="format-code">$wds-font-family</span>: 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Hiragino Sans GB', 冬青黑体, 'Microsoft YaHei', 微软雅黑体, sans-serif;</code>
 </section>
 
 <section>
diff --git a/app/templates/route-components/buttons.hbs b/app/templates/route-components/buttons.hbs
@@ -64,6 +64,20 @@
 		{{#wds-button class='wds-is-secondary wds-is-squished'}}Secondary{{/wds-button}}
 		{{#wds-button class='wds-is-text wds-is-squished'}}Text{{/wds-button}}
 	{{/component-demo}}
+	<p class="warning-note">
+		<strong>Important note:</strong> for readability purposes we use different styling for squished button in Global Navigation for Chinese - the font is larger and has bold removed.
+		This is why in <code class="format-code">/scss/wds-components/_global-navigation.scss</code> you will find the following piece of code:
+		{{#code-sample language='scss'}}
+html[lang^='zh'] &__start-a-wiki-button {
+	font-size: 12px;
+	font-weight: 400;
+	padding: 9px 12px 8px;
+}
+		{{/code-sample}}
+
+		Please remember, that this solution is only single-use and temporary. It is not recommended to apply it as a common solution in other places/components.
+		If it becomes a broader issue, more versatile and maintainable solution must be implemented.
+	</p>
 </section>
 
 <section>
diff --git a/dist/scss/wds-variables/_typography.scss b/dist/scss/wds-variables/_typography.scss
@@ -1,5 +1,5 @@
 // Font family - see https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
-$wds-font-family: 'San Francisco', 'Helvetica Neue', 'Roboto', 'Segoe UI', 'Ubuntu', 'Droid Sans', sans-serif;
+$wds-font-family: 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Hiragino Sans GB', 冬青黑体, 'Microsoft YaHei', 微软雅黑体, sans-serif;
 
 // Line height
 $wds-line-height: 1.5em;
diff --git a/docs/assets/design-system.css b/docs/assets/design-system.css
diff --git a/docs/assets/design-system.js b/docs/assets/design-system.js
diff --git a/docs/index.html b/docs/index.html
@@ -8,7 +8,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     
-<meta name="design-system/config/environment" content="%7B%22modulePrefix%22%3A%22design-system%22%2C%22environment%22%3A%22production%22%2C%22rootURL%22%3A%22/%22%2C%22locationType%22%3A%22hash%22%2C%22EmberENV%22%3A%7B%22FEATURES%22%3A%7B%7D%7D%2C%22APP%22%3A%7B%22name%22%3A%22design-system%22%2C%22version%22%3A%222.1.1+8bb55ce0%22%7D%2C%22exportApplicationGlobal%22%3Afalse%7D" />
+<meta name="design-system/config/environment" content="%7B%22modulePrefix%22%3A%22design-system%22%2C%22environment%22%3A%22production%22%2C%22rootURL%22%3A%22/%22%2C%22locationType%22%3A%22hash%22%2C%22EmberENV%22%3A%7B%22FEATURES%22%3A%7B%7D%7D%2C%22APP%22%3A%7B%22name%22%3A%22design-system%22%2C%22version%22%3A%223.0.0+9d066901%22%7D%2C%22exportApplicationGlobal%22%3Afalse%7D" />
 
     <link rel="stylesheet" href="/assets/vendor.css">
     <link rel="stylesheet" href="/assets/design-system.css">
diff --git a/style-guide/styles/wds-variables/_typography.scss b/style-guide/styles/wds-variables/_typography.scss
@@ -1,5 +1,5 @@
 // Font family - see https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
-$wds-font-family: 'San Francisco', 'Helvetica Neue', 'Roboto', 'Segoe UI', 'Ubuntu', 'Droid Sans', sans-serif;
+$wds-font-family: 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Hiragino Sans GB', 冬青黑体, 'Microsoft YaHei', 微软雅黑体, sans-serif;
 
 // Line height
 $wds-line-height: 1.5em;

Original file line number	Diff line number	Diff line change
`@@ -127,4 +127,11 @@ pre {`
`127`	`127`	`}`
`128`	`128`	`}`
`129`	`129`
	`130`	`+.warning-note {`
	`131`	`+ background-color: rgba($wds-color-warning, .2);`
	`132`	`+ border: 1px solid rgba($wds-color-warning, .9);`
	`133`	`+ margin-top: 30px;`
	`134`	`+ padding: 14px;`
	`135`	`+}`
	`136`	`+`
`130`	`137`	`////////////////////////////////////// END of Reusable Classes section //////////////////////////////////////`