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.

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

Dp 20050 font switch #1193

Merged
merged 64 commits into from
Oct 15, 2020
Merged
Show file tree
Hide file tree
Changes from 44 commits
Commits
Show all changes
64 commits
Select commit Hold shift + click to select a range
b826668
noto inside fonts
clairesunstudio May 11, 2020
37a4641
wip
clairesunstudio May 11, 2020
792038e
adjust body line height
clairesunstudio Aug 12, 2020
d60a09e
import fonts
clairesunstudio May 18, 2020
139a218
map font sizes
clairesunstudio May 19, 2020
87a59d2
fine tune weights
clairesunstudio May 19, 2020
cd43dd4
move fonts into static folder
clairesunstudio May 19, 2020
cb55d7b
map font styles classes
clairesunstudio May 19, 2020
d7b7f12
fix variable mapping
clairesunstudio Sep 28, 2020
d17260c
cleanup
clairesunstudio May 19, 2020
718ebf5
cleanup
clairesunstudio May 19, 2020
6fd5822
adjust root fontsize
clairesunstudio Sep 28, 2020
02189f5
resolve typography conflicts
clairesunstudio Sep 30, 2020
7b6a16e
typography story wip;
clairesunstudio Oct 1, 2020
16212b1
hide preview control columns
clairesunstudio Oct 1, 2020
66c812f
fix
clairesunstudio Oct 1, 2020
2ada5d2
remove knobs addon
clairesunstudio Oct 2, 2020
458c45f
wip
clairesunstudio Oct 2, 2020
efe5d46
clean up
clairesunstudio Oct 2, 2020
62d247c
fix empty canvas tag bug by setting default
clairesunstudio Oct 5, 2020
e0c118d
edit
clairesunstudio Oct 5, 2020
906184e
remove texta
clairesunstudio Oct 5, 2020
1abe002
remove texta
clairesunstudio Oct 5, 2020
e437c25
compile for multilingual scripts
clairesunstudio Oct 6, 2020
a27b5d6
simplify vf check
clairesunstudio Oct 6, 2020
6993fda
wip
clairesunstudio Oct 6, 2020
bc171e9
add langs code
clairesunstudio Oct 6, 2020
a19f2a3
add language samples
clairesunstudio Oct 6, 2020
5ea093f
import arabic and hebrew variable fonts and fix direction and alignment
clairesunstudio Oct 6, 2020
c162e6d
remove textAlign in story
clairesunstudio Oct 6, 2020
4279045
restructure font files
clairesunstudio Oct 6, 2020
bce69d4
git change folder name casing
clairesunstudio Oct 6, 2020
6d6f78a
clean up
clairesunstudio Oct 6, 2020
183a31e
use system vars
clairesunstudio Oct 6, 2020
018ba24
add myanmar support
clairesunstudio Oct 6, 2020
427526d
cleanup
clairesunstudio Oct 7, 2020
b63fe5a
add variable to control rtl directions
clairesunstudio Oct 7, 2020
820c55d
fix and render fonts in noto sans in docs
clairesunstudio Oct 7, 2020
523796a
render RichText in noto sans, enable RichText to inherit other attrib…
clairesunstudio Oct 7, 2020
1f08588
add simplified chinese
clairesunstudio Oct 7, 2020
4d092cb
Revert "add simplified chinese"
clairesunstudio Oct 7, 2020
e806b41
fix richtext in story
clairesunstudio Oct 7, 2020
c035730
edit
clairesunstudio Oct 7, 2020
bed6ccd
add changelog
clairesunstudio Oct 7, 2020
0abba6a
remove forward
clairesunstudio Oct 8, 2020
c72b219
add default in react
clairesunstudio Oct 8, 2020
b574cdb
separate out fontface mixin
clairesunstudio Oct 8, 2020
edeee0b
refactor fonts scss
clairesunstudio Oct 8, 2020
01bfd8f
separate out vars and mixins
clairesunstudio Oct 8, 2020
49593c6
move global variables into variables.scss
clairesunstudio Oct 8, 2020
110efb0
add notes and cleanup
clairesunstudio Oct 8, 2020
bfb84ae
add condition for language support set fonts and fix patternlab
clairesunstudio Oct 8, 2020
1d29f84
update comments
clairesunstudio Oct 8, 2020
75f9719
update docs and changelog
clairesunstudio Oct 8, 2020
bba689c
address comment to separate mixin files
clairesunstudio Oct 8, 2020
2a125f4
update docs
clairesunstudio Oct 8, 2020
8e0c520
Fixes merge conflicts.
smurrayatwork Oct 13, 2020
cad250f
DP-20050: Fixes circleci build for gatsby site.
smurrayatwork Oct 14, 2020
83ec718
DP-20050: Fixes circleci build for gatsby site.
smurrayatwork Oct 14, 2020
fa9a007
DP-20050: Fixes lint errors.
smurrayatwork Oct 14, 2020
d85c256
approve react backstop
clairesunstudio Oct 14, 2020
1e7ec2c
DP-20050: Updates backstop reference images.
smurrayatwork Oct 14, 2020
6fc7df5
Revert "DP-20050: Updates backstop reference images."
smurrayatwork Oct 15, 2020
6a13304
approve screenshots
clairesunstudio Oct 15, 2020
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
2 changes: 2 additions & 0 deletions assets/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
**/*.css
**/*.css.map
19 changes: 2 additions & 17 deletions assets/scss/00-base/_elements.scss
Original file line number Diff line number Diff line change
Expand Up @@ -20,40 +20,25 @@

@use "mixins" as *;


* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

html {
font-family: $fonts;

&:lang(km) {
font-family: $fonts-khmer, $fonts;
font-size: 14px;
}

&:lang(vi) {
font-family: $fonts-vietnamese, sans-serif;
font-size: 14px;
}

font-size: $fonts-base-mobile;

@media ($bp-small-min) {
font-size: $fonts-base;
}


// .translated-rtl & {
// direction: rtl;
// }
}

body {
margin: 0;
font-size: $fonts-medium;
line-height: 1.5;
line-height: 1.6;
color: $c-font-base;
font-family: $fonts;
font-weight: $fonts-light;
Expand Down
10 changes: 0 additions & 10 deletions assets/scss/00-base/_fonts-fallback.scss

This file was deleted.

152 changes: 152 additions & 0 deletions assets/scss/00-base/_fonts-langs-import.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,152 @@
@forward "paths";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
@forward "paths";

@forward "variables";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
@forward "variables";


@use "paths" as *;
@use "variables" as *;
// Variable sans fonts
$adlam: U+1E900-1E95F, U+2E41; // Uses reversed comma
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make sure to not use any of these variables globally in your @use statement (do not use as *).

$arabic: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+1EE00-1EEFF; // Arabic, supplement, extended A, presentation forms A and B, alphabetic mathematical symbols
$armenian: U+0530-058F;
$balinese: U+1B00-1B7F;
$bamum: U+A6A0-A6FF, U+16800-16A3F; // Bamum and supplement
$bengali: U+0980-09FF;
$brahmi: U+11000-1107F;
$buginese: U+1A00-1A1F;
$buhid: U+1740-175F, U+1735;
$c-aboriginal: U+1400-167F, U+18B0-18FF; // UCAS and extended
$cham: U+AA00-AA5F;
$cherokee: U+????; // U+13A0-13FF;
$chinese: U+4E00-9FFF, U+31C0-31EF, U+3300-33FF, U+3000-303F, U+2E80-2EFF, U+FE30-FE4F, U+2F00-2FDF, U+FF0C;
$cyrillic: U+0400-04FF, U+0500-052F, U+1C80-1C8F;
$devanagari: U+0900-097F, U+A8E0-A8FF; // Devanagari and extended
$elemaic: U+10FE0-10FFF;
$ethiopic: U+1200-137F, U+1380-139F, U+2D80-2DDF; // Ethiopic, extended, and supplement
$grantha: U+11300-1137F;
$georgian: U+10A0-10FF, U+1C90-1CBF, U+2D00-2D2F; // Georgian, extended, and supplement
$greek: U+0370-03FF, U+1F00-1FFF; // Greek and coptic, greek extended
$gujarati: U+0A80-0AFF;
$gurmukhi: U+0A00-0A7F;
$hangul: U+1100-11FF, U+3130-318F, U+AC00-D7AF, U+A960-A97F, U+D7B0-D7FF; // With compatibility jamo
$hanifi-rohingya: U+10D00-10D3F;
$hanunoo: U+1720-173F;
$hebrew: U+0590-05FF, U+FB1D-FB4F;
$japanese: U+A5, U+4E00-9FFF, U+30??, U+FF00-FF9F; // Kanji, Hiragana, Katakana, Yen symbol.
$kannada: U+0C80-0CFF;
$kayah: U+A900-A92F;
$khmer: U+1780-17FF, U+19E0-19FF; // Khmer and symbols
$lao: U+0E80-0EFF;
$latin: U+????;
$limbu: U+1900-194F;
$lisu: U+A4D0-A4FF;
$malayalam: U+0D00-0D7F;
$myanmar: U+1000-109F, U+AA60-AA7F, U+A9E0-A9FF;
$mongolian: U+1800-18AF, U+11660-1167F;
$nko: U+07C0-07FF;
$nushu: U+1B170-1B2FF;
$oriya: U+0B00-0B7F;
$olchiki: U+1C50-1C7F;
$rashi-hebrew: U+0590-05FF;
$sinhala: U+0D80-0DFF;
$sora-sompeng: U+110D0-110FF;
$tai-le: U+1950-197F;
$tai-tham: U+1A20-1AAF;
$tai-viet: U+AA80-AADF;
$takri: U+11680-116CF;
$tamil: U+0B80-0BFF, U+11FC0-11FFF; // Tamil and supplement
$telugu: U+0C00-0C7F;
$tagalog: U+1700-171F, U+1735;
$thaana: U+0780-07BF;
$thai: U+0E00-0E7F;
$tibetan: U+0F00-0FFF;
$warang-citi: U+118A0-118FF;
$zanabazar: U+11A00-11A4F;
$lgc: U+0000-00FF, U+0100-017F, U+0180-024F, U+0370-03FF, U+0259-03C0, U+1E00-1EFF, U+2000-FB02, U+1F00-1FFF, U+0400-04FF, U+0500-052F, U+1C80-1C8F;


$oneSpace: ' ';
$oneDash: '-';
$global-font-display: 'swap';

@mixin font-face ($family: "Noto", $type: "Sans", $script: "Cyrillic", $suffix: "UI", $weight: "VF", $subset: "-subset", $fontWeight: "100 900", $fontStyle: "normal", $fontDisplay: "swap", $unicodeRange: "cyrillic", $space: $oneSpace, $dash: $oneDash) {
clairesunstudio marked this conversation as resolved.
Show resolved Hide resolved
@if $weight == "VF" {
font-family: '#{$family} #{$type} #{$script}#{$space}#{$suffix} VF';
} @else {
font-family: '#{$family} #{$type} #{$script}#{$space}#{$suffix}';
}
src: url('#{$assets-path}#{$fonts-path}#{$script}/#{$family}#{$type}#{$script}#{$dash}#{$suffix}#{$oneDash}#{$weight}#{$subset}.woff2') format('woff2'),
url('#{$assets-path}#{$fonts-path}#{$script}/#{$family}#{$type}#{$script}#{$dash}#{$suffix}#{$oneDash}#{$weight}#{$subset}.woff') format('woff'),
// url('#{$assets-path}#{$fonts-path}#{$script}/#{$family}#{$type}#{$script}#{$dash}#{$suffix}#{$weight}#{$subset}.eot?#iefix') format('embedded-opentype'),
// url('#{$assets-path}#{$fonts-path}#{$script}/#{$family}#{$type}#{$script}#{$dash}#{$suffix}#{$weight}#{$subset}.svg') format('svg'),
;
font-weight: $fontWeight;
font-style: $fontStyle;
font-display: $fontDisplay;
unicode-range: $unicodeRange;
}

// Variable sans fonts

// Arabic
@supports ( font-variation-settings: normal ) {
@font-face { @include font-face(Noto, Sans, Arabic, null, VF, -subset, 100 900, normal, $global-font-display, $arabic, null, null); }
}
@font-face { @include font-face(Noto, Sans, Arabic, null, Bold, -subset, $fonts-bold, normal, $global-font-display, $arabic, null, null); }
@font-face { @include font-face(Noto, Sans, Arabic, null, Regular, -subset, $fonts-normal, normal, $global-font-display, $arabic, null, null); }

// Hebrew
@supports ( font-variation-settings: normal ) {
@font-face { @include font-face(Noto, Sans, Hebrew, null, VF, -subset, 100 900, normal, $global-font-display, $hebrew, null, null); }
}
@font-face { @include font-face(Noto, Sans, Hebrew, null, Bold, -subset, $fonts-bold, normal, $global-font-display, $hebrew, null, null); }
@font-face { @include font-face(Noto, Sans, Hebrew, null, Regular, -subset, $fonts-normal, normal, $global-font-display, $hebrew, null, null); }

// Khmer
@supports ( font-variation-settings: normal ) {
@font-face { @include font-face(Noto, Sans, Khmer, null, VF, -subset, 100 900, normal, $global-font-display, $khmer, null, null); }
}
@font-face { @include font-face(Noto, Sans, Khmer, null, Bold, -subset, $fonts-bold, normal, $global-font-display, $khmer, null, null); }
@font-face { @include font-face(Noto, Sans, Khmer, null, Regular, -subset, $fonts-normal, normal, $global-font-display, $khmer, null, null); }

// Myanmar
@supports ( font-variation-settings: normal ) {
@font-face { @include font-face(Noto, Sans, Myanmar, null, VF, -subset, 100 900, normal, $global-font-display, $myanmar, null, null); }
}
@font-face { @include font-face(Noto, Sans, Myanmar, null, Bold, -subset, $fonts-bold, normal, $global-font-display, $myanmar, null, null); }
@font-face { @include font-face(Noto, Sans, Myanmar, null, Regular, -subset, $fonts-normal, normal, $global-font-display, $myanmar, null, null); }


// // Lao
// @font-face { @include font-face(Noto, Sans, Lao, null, VF, -subset, 100 900, normal, $global-font-display, $lao, null, null); }
//
// // Malayalam
// @font-face { @include font-face(Noto, Sans, Malayalam, null, VF, -subset, 100 900, normal, $global-font-display, $malayalam, null, null); }
////
// // Tai Le
// @font-face { @include font-face(Noto, Sans, Tai, Le, VF, -subset, 100 900, normal, $global-font-display, $tai-le, $oneSpace, null); }
//
// // Tai Tham
// @font-face { @include font-face(Noto, Sans, Tai, Tham, VF, -subset, 100 900, normal, $global-font-display, $tai-tham, $oneSpace, null); }
//
// // Tai Viet
// @font-face { @include font-face(Noto, Sans, Tai, Viet, VF, -subset, 100 900, normal, $global-font-display, $tai-viet, $oneSpace, null); }
//
// // Thaana
// @font-face { @include font-face(Noto, Sans, Thaana, null, VF, -subset, 100 900, normal, $global-font-display, $thaana, null, null); }
//
// // Thai
// @font-face { @include font-face(Noto, Sans, Thai, null, VF, -subset, 100 900, normal, $global-font-display, $thai, null, null); }
//
// // Takri
// @font-face { @include font-face(Noto, Sans, Takri, null, VF, -subset, 100 900, normal, $global-font-display, $takri, null, null); }
//
// // Telugu
// @font-face { @include font-face(Noto, Sans, Telugu, null, VF, -subset, 100 900, normal, $global-font-display, $telugu, null, null); }
//
// // Tamil
// @font-face { @include font-face(Noto, Sans, Tamil, null, VF, -subset, 100 900, normal, $global-font-display, $tamil, null, null); }
//
// // Warang Citi
// @font-face { @include font-face(Noto, Sans, Warang, Citi, VF, -subset, 100 900, normal, $global-font-display, $warang-citi, $oneSpace, null); }
//
// // Zanabazar Square
// @font-face { @include font-face(Noto, Sans, Zanabazar, Square, VF, -subset, 100 900, normal, $global-font-display, $zanabazar, $oneSpace, null); }
Loading