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

Font fallbacks #248

Merged
merged 4 commits into from
Aug 22, 2019
Merged

Font fallbacks #248

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
aa5dce6
Add Adobe Clean UX support, closes #189
lazd Aug 19, 2019
7bd714a
Fix fallback fonts for ar, he, ja, zh-Hans, zh-Hant, and ko, closes #232
lazd Aug 19, 2019
a6af303
Change zhhant fallbacks per @tappily
lazd Aug 22, 2019
a279f89
Fix JhengHei font refs
lazd Aug 22, 2019
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
26 changes: 13 additions & 13 deletions components/commons/fonts.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,31 +11,31 @@ governing permissions and limitations under the License.
*/

:root {
--spectrum-font-fallbacks-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--spectrum-font-fallbacks-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

/* Not used
--spectrum-font-fallbacks-serif: serif;
--spectrum-font-fallbacks-mono: monospace;
--spectrum-font-family-article: adobe-clean-serif, "Source Serif", var(--spectrum-font-fallbacks-serif);
--spectrum-font-family-article: adobe-clean-serif, 'Source Serif', var(--spectrum-font-fallbacks-serif);
--spectrum-font-family-article-ar: adobe-arabic, var(--spectrum-font-fallbacks-serif);
--spectrum-font-family-article-he: adobe-hebrew, var(--spectrum-font-fallbacks-serif);
--spectrum-font-family-article-ja: source-han-serif-japanese, var(--spectrum-font-fallbacks-serif);
--spectrum-font-family-article-ko: source-han-serif-korean, var(--spectrum-font-fallbacks-serif);
--spectrum-font-family-article-zh-hans: source-han-serif-sc, var(--spectrum-font-fallbacks-serif);
--spectrum-font-family-article-zh-hant: source-han-serif-tc, var(--spectrum-font-fallbacks-serif);
--spectrum-font-family-code: source-code-pro, "Source Code Pro", var(--spectrum-font-fallbacks-mono);
--spectrum-font-family-article-zh-hant: source-han-serif-tc, 'MingLiu', var(--spectrum-font-fallbacks-serif);
--spectrum-font-family-code: source-code-pro, 'Source Code Pro', var(--spectrum-font-fallbacks-mono);
--spectrum-font-family-condensed: adobe-clean-condensed, var(--spectrum-font-family-base);
*/

--spectrum-font-family-base: adobe-clean, "Source Sans Pro", var(--spectrum-font-fallbacks-sans);
--spectrum-font-family-han: adobe-clean-han-japanese, var(--spectrum-font-fallbacks-sans);
--spectrum-font-family-ar: myriad-arabic, var(--spectrum-font-fallbacks-sans);
--spectrum-font-family-he: var(--spectrum-font-fallbacks-sans);
--spectrum-font-family-zh: var(--spectrum-font-family-han);
--spectrum-font-family-zhhans: var(--spectrum-font-family-han);
--spectrum-font-family-ko: var(--spectrum-font-family-han);
--spectrum-font-family-ja: var(--spectrum-font-family-han);

--spectrum-font-family-base: 'adobe-clean-ux', 'adobe-clean', 'Source Sans Pro', var(--spectrum-font-fallbacks-sans);
--spectrum-font-family-han: 'adobe-clean-han-japanese', var(--spectrum-font-fallbacks-sans);
--spectrum-font-family-ar: 'adobe-arabic', 'myriad-arabic', var(--spectrum-font-fallbacks-sans);
--spectrum-font-family-he: 'adobe-hebrew', var(--spectrum-font-fallbacks-sans);
--spectrum-font-family-zhhans: 'adobe-clean-han-simplified-c', 'SimSun', 'Heiti SC Light', var(--spectrum-font-fallbacks-sans);
--spectrum-font-family-zh: var(--spectrum-font-family-zhhans);
--spectrum-font-family-zhhant: 'adobe-clean-han-traditional', 'Microsoft JhengHei UI', 'Microsoft JhengHei', 'Heiti TC Light', var(--spectrum-font-fallbacks-sans);
--spectrum-font-family-ko: 'adobe-clean-han-korean', 'Malgun Gothic', 'Apple Gothic', var(--spectrum-font-fallbacks-sans);
--spectrum-font-family-ja: 'adobe-clean-han-japanese', 'Yu Gothic', '\30E1 \30A4 \30EA \30AA', '\30D2 \30E9 \30AE \30CE \89D2 \30B4 Pro W3', 'Hiragino Kaku Gothic Pro W3', 'Osaka', '\FF2D \FF33 \FF30 \30B4 \30B7 \30C3 \30AF', 'MS PGothic', var(--spectrum-font-fallbacks-sans);
--spectrum-text-size: var(--spectrum-alias-font-size-default);
--spectrum-text-body-line-height: var(--spectrum-alias-line-height-medium);
--spectrum-text-size-text-label: var(--spectrum-label-text-size);
Expand Down
44 changes: 43 additions & 1 deletion components/typography/docs/typography-international.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ components:

<div class="spectrum" lang="ja">
<p class="spectrum-Heading1">見出し1 <em>見出し1 重点</em> <strong>見出し1 強い強調</strong>.</p>
<p class="spectrum-Heading2">見出し2 <em>見出し2 重点</em> <strong>見出し2 強い強調</strong>.</p>
<p class="spectrum-Heading2">見出し2 <em>見出し2 重点</em> <strong>見出し2 強い強調</strong>.</p>
<p class="spectrum-Heading3">見出し3 <em>見出し3 重点</em> <strong>見出し3 強い強調</strong>.</p>
<p class="spectrum-Heading4">見出し4 <em>見出し4 重点</em> <strong>見出し4 強い強調</strong>.</p>
<p class="spectrum-Heading5">見出し5 <em>見出し5 重点</em> <strong>見出し5 強い強調</strong>.</p>
Expand All @@ -84,6 +84,14 @@ components:
<p class="spectrum-Heading5">القسم 5 <em>القسم 5 تشديد</em> <strong>القسم 5 تأكيد قو</strong>.</p>
</div>

<div class="spectrum" lang="he">
<p class="spectrum-Heading1">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
<p class="spectrum-Heading2">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
<p class="spectrum-Heading3">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
<p class="spectrum-Heading4">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
<p class="spectrum-Heading5">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
</div>

heading-strong:
id: heading-1
name: Heading (Strong)
Expand All @@ -110,6 +118,11 @@ components:
<p class="spectrum-Heading2--strong">القسم <em>القسم 1 تشديد</em> <strong>القسم 2 تأكيد قو</strong>.</p>
</div>

<div class="spectrum" lang="he">
<p class="spectrum-Heading1--strong">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
<p class="spectrum-Heading2--strong">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
</div>

heading-quiet:
id: heading-1
name: Heading (Quiet)
Expand All @@ -136,6 +149,11 @@ components:
<p class="spectrum-Heading2--quiet">القسم <em>القسم 1 تشديد</em> <strong>القسم 2 تأكيد قو</strong>.</p>
</div>

<div class="spectrum" lang="he">
<p class="spectrum-Heading1--quiet">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
<p class="spectrum-Heading2--quiet">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
</div>

display-1:
id: heading-1
name: Display
Expand All @@ -162,6 +180,11 @@ components:
<p class="spectrum-Heading2--display">القسم <em>القسم 1 تشديد</em> <strong>القسم 2 تأكيد قو</strong>.</p>
</div>

<div class="spectrum" lang="he">
<p class="spectrum-Heading1--display">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
<p class="spectrum-Heading2--display">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
</div>

display-strong:
id: heading-1
name: Display (Strong)
Expand All @@ -183,6 +206,12 @@ components:
<p class="spectrum-Heading2--display spectrum-Heading2--strong">القسم <em>القسم 1 تشديد</em> <strong>القسم 2 تأكيد قو</strong>.</p>
</div>

<div class="spectrum" lang="he">
<p class="spectrum-Heading1--display spectrum-Heading1--strong">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
<p class="spectrum-Heading2--display spectrum-Heading2--strong">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
</div>


display-quiet:
id: heading-1
name: Display (Quiet)
Expand All @@ -209,6 +238,11 @@ components:
<p class="spectrum-Heading2--display spectrum-Heading2--quiet">القسم <em>القسم 1 تشديد</em> <strong>القسم 2 تأكيد قو</strong>.</p>
</div>

<div class="spectrum" lang="he">
<p class="spectrum-Heading1--display spectrum-Heading1--quiet">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
<p class="spectrum-Heading2--display spectrum-Heading2--quiet">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
</div>

body-1:
id: heading-1
name: Body
Expand Down Expand Up @@ -247,6 +281,14 @@ components:
<p class="spectrum-Body5">القسم 5 <em>القسم 5 تشديد</em> <strong>القسم 5 تأكيد قو</strong>.</p>
</div>

<div class="spectrum" lang="he">
<p class="spectrum-Body1">טקסט גוף הדגשות <em>גוף חזק</em> <strong>גוף חזק</strong>.</p>
<p class="spectrum-Body2">טקסט גוף הדגשות <em>גוף חזק</em> <strong>גוף חזק</strong>.</p>
<p class="spectrum-Body3">טקסט גוף הדגשות <em>גוף חזק</em> <strong>גוף חזק</strong>.</p>
<p class="spectrum-Body4">טקסט גוף הדגשות <em>גוף חזק</em> <strong>גוף חזק</strong>.</p>
<p class="spectrum-Body5">טקסט גוף הדגשות <em>גוף חזק</em> <strong>גוף חזק</strong>.</p>
</div>

body-han-1:
id: heading-1
name: Han
Expand Down
4 changes: 4 additions & 0 deletions components/typography/font.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,10 @@ governing permissions and limitations under the License.
font-family: var(--spectrum-font-family-zhhans);
}

&:lang(zh-Hant) {
font-family: var(--spectrum-font-family-zhhant);
}

&:lang(zh) {
font-family: var(--spectrum-font-family-zh);
}
Expand Down