diff --git a/packages/gatsby-theme-carbon/gatsby-config.js b/packages/gatsby-theme-carbon/gatsby-config.js index a6a320925..7ee1a4b8d 100644 --- a/packages/gatsby-theme-carbon/gatsby-config.js +++ b/packages/gatsby-theme-carbon/gatsby-config.js @@ -4,7 +4,6 @@ const remarkSlug = require('remark-slug'); module.exports = themeOptions => { const { - additionalFontWeights = [], isSearchEnabled = false, withWebp = false, iconPath, @@ -29,28 +28,6 @@ module.exports = themeOptions => { `gatsby-plugin-sharp`, `gatsby-transformer-yaml`, `gatsby-plugin-catch-links`, - { - resolve: `gatsby-plugin-prefetch-google-fonts`, - options: { - fonts: [ - { - family: `IBM Plex Sans`, - variants: [ - 300, - '300i', - 400, - '400i', - 600, - '600i', - ...additionalFontWeights, - ], - }, - { - family: `IBM Plex Mono`, - }, - ], - }, - }, { resolve: `gatsby-source-filesystem`, name: `Nav`, diff --git a/packages/gatsby-theme-carbon/package.json b/packages/gatsby-theme-carbon/package.json index bbbedad3c..a6218e1ac 100644 --- a/packages/gatsby-theme-carbon/package.json +++ b/packages/gatsby-theme-carbon/package.json @@ -37,7 +37,6 @@ "gatsby-plugin-emotion": "^4.0.7", "gatsby-plugin-manifest": "^2.1.1", "gatsby-plugin-mdx": "^1.0.11", - "gatsby-plugin-prefetch-google-fonts": "^1.4.2", "gatsby-plugin-react-helmet": "^3.0.12", "gatsby-plugin-sass": "^2.0.11", "gatsby-plugin-sass-resources": "^2.0.0", diff --git a/packages/gatsby-theme-carbon/src/components/BackToTopBtn/BackToTopBtn.module.scss b/packages/gatsby-theme-carbon/src/components/BackToTopBtn/BackToTopBtn.module.scss index 0e4f95cb5..02388e92c 100644 --- a/packages/gatsby-theme-carbon/src/components/BackToTopBtn/BackToTopBtn.module.scss +++ b/packages/gatsby-theme-carbon/src/components/BackToTopBtn/BackToTopBtn.module.scss @@ -1,14 +1,14 @@ -@import '~carbon-components/scss/globals/scss/helper-mixins'; - .button { - width: rem(48px); - height: rem(48px); - border-radius: rem(24px); + width: $spacing-09; + height: $spacing-09; + border-radius: 50%; background: $carbon--gray-30; border-color: transparent; position: fixed; - bottom: rem(50px); - right: rem(30px); + bottom: $spacing-09; + right: $spacing-07; + transition: all $transition--base; + cursor: pointer; z-index: 9999; padding-top: 0.325rem; diff --git a/packages/gatsby-theme-carbon/src/styles/fonts/IBMPlexSans-Italic-VF.woff2 b/packages/gatsby-theme-carbon/src/styles/fonts/IBMPlexSans-Italic-VF.woff2 new file mode 100644 index 000000000..0a8e1b923 Binary files /dev/null and b/packages/gatsby-theme-carbon/src/styles/fonts/IBMPlexSans-Italic-VF.woff2 differ diff --git a/packages/gatsby-theme-carbon/src/styles/fonts/IBMPlexSans-SemiBold.woff b/packages/gatsby-theme-carbon/src/styles/fonts/IBMPlexSans-SemiBold.woff new file mode 100644 index 000000000..4cef182ee Binary files /dev/null and b/packages/gatsby-theme-carbon/src/styles/fonts/IBMPlexSans-SemiBold.woff differ diff --git a/packages/gatsby-theme-carbon/src/styles/fonts/IBMPlexSans-VF.woff2 b/packages/gatsby-theme-carbon/src/styles/fonts/IBMPlexSans-VF.woff2 new file mode 100644 index 000000000..a48f77eff Binary files /dev/null and b/packages/gatsby-theme-carbon/src/styles/fonts/IBMPlexSans-VF.woff2 differ diff --git a/packages/gatsby-theme-carbon/src/styles/fonts/IBMPlexSans.woff b/packages/gatsby-theme-carbon/src/styles/fonts/IBMPlexSans.woff new file mode 100644 index 000000000..aa4daa24a Binary files /dev/null and b/packages/gatsby-theme-carbon/src/styles/fonts/IBMPlexSans.woff differ diff --git a/packages/gatsby-theme-carbon/src/styles/internal/_global.scss b/packages/gatsby-theme-carbon/src/styles/internal/_global.scss index d6748940c..6a6f3846c 100644 --- a/packages/gatsby-theme-carbon/src/styles/internal/_global.scss +++ b/packages/gatsby-theme-carbon/src/styles/internal/_global.scss @@ -19,9 +19,7 @@ $feature-flags: ( // Typography @include carbon--type-reset(); @import '~@carbon/elements/scss/type/classes'; - -// special characters (arrows) -@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans&text=←→↑↓↔↕↖↗↘↙↚↛↮⟵⟶⟷↰↱↲↳⬐⬎⬑⬏↴↵'); +@import 'plex'; $font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; $font-family-mono: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', diff --git a/packages/gatsby-theme-carbon/src/styles/internal/_plex.scss b/packages/gatsby-theme-carbon/src/styles/internal/_plex.scss new file mode 100644 index 000000000..a38527b00 --- /dev/null +++ b/packages/gatsby-theme-carbon/src/styles/internal/_plex.scss @@ -0,0 +1,42 @@ +@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono&display=swap'); + +@font-face { + font-family: 'IBM Plex Sans VF'; + font-display: fallback; + src: url('./fonts/IBMPlexSans-VF.woff2') format('woff2-variations'), + url('./fonts/IBMPlexSans-VF.woff2') format('woff2'); + font-weight: 100 900; + font-style: normal; +} + +@font-face { + font-family: 'IBM Plex Sans VF'; + font-display: fallback; + src: url('./fonts/IBMPlexSans-Italic-VF.woff2') format('woff2-variations'), + url('./fonts/IBMPlexSans-Italic-VF.woff2') format('woff2'); + font-weight: 100 900; + font-style: italic; +} + +@font-face { + font-family: 'IBM Plex Sans'; + font-display: fallback; + src: url('./fonts/IBMPlexSans.woff') format('woff'); +} + +@font-face { + font-family: 'IBM Plex Sans'; + font-display: fallback; + src: url('./fonts/IBMPlexSans-SemiBold.woff'); + font-weight: 600; +} + +body { + font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; +} + +@supports (font-variation-settings: normal) { + body { + font-family: 'IBM Plex Sans VF', 'Helvetica Neue', Arial, sans-serif; + } +} diff --git a/scripts/IBMPlexSans-Italic-VF.ttf b/scripts/IBMPlexSans-Italic-VF.ttf new file mode 100755 index 000000000..473e284c3 Binary files /dev/null and b/scripts/IBMPlexSans-Italic-VF.ttf differ diff --git a/scripts/IBMPlexSans-VF.ttf b/scripts/IBMPlexSans-VF.ttf new file mode 100755 index 000000000..44e2c2291 Binary files /dev/null and b/scripts/IBMPlexSans-VF.ttf differ diff --git a/scripts/subset.sh b/scripts/subset.sh new file mode 100644 index 000000000..7f3a43193 --- /dev/null +++ b/scripts/subset.sh @@ -0,0 +1,5 @@ +LATIN1="U+0000,U+000D,U+0020-007E,U+00A0-00A3,U+00A4-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+2074,U+20AC,U+2122,U+2212,U+FB01-FB02" +ARROWS="U2191-21c6" + +pyftsubset IBMPlexSans-Italic-VF.ttf --unicodes=$LATIN1 --flavor="woff2" --output-file=IBMPlexSans-Italic-VF.woff2; +pyftsubset IBMPlexSans-VF.ttf --unicodes=$LATIN1,$ARROWS --flavor="woff2" --output-file=IBMPlexSans-VF.woff2; \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 427b66f0c..fa125c07f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -723,7 +723,7 @@ "@babel/plugin-transform-react-jsx-self" "^7.0.0" "@babel/plugin-transform-react-jsx-source" "^7.0.0" -"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.3", "@babel/runtime@^7.4.5": +"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.3", "@babel/runtime@^7.4.5": version "7.5.5" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.5.5.tgz#74fba56d35efbeca444091c7850ccd494fd2f132" integrity sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ== @@ -3101,14 +3101,6 @@ aws4@^1.8.0: resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f" integrity sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ== -axios@^0.18.0: - version "0.18.1" - resolved "https://registry.yarnpkg.com/axios/-/axios-0.18.1.tgz#ff3f0de2e7b5d180e757ad98000f1081b87bcea3" - integrity sha512-0BfJq4NSfQXd+SkFdrvFbG7addhYSBA2mQwISr46pD6E5iqkWg02RAs8vyTT/j0RTnoYmeXauBuSv1qKwR179g== - dependencies: - follow-redirects "1.5.10" - is-buffer "^2.0.2" - axios@^0.19.0: version "0.19.0" resolved "https://registry.yarnpkg.com/axios/-/axios-0.19.0.tgz#8e09bff3d9122e133f7b8101c8fbdd00ed3d2ab8" @@ -4182,13 +4174,6 @@ classnames@2.2.6, classnames@^2.2.6: resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce" integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q== -clean-css@^4.2.1: - version "4.2.1" - resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.1.tgz#2d411ef76b8569b6d0c84068dabe85b0aa5e5c17" - integrity sha512-4ZxI6dy4lrY6FHzfiy1aEOXgu4LIsW2MhwG0VBKdcoGoH/XLFgaHSdLTGr4O8Be6A8r3MOphEiI8Gc1n0ecf3g== - dependencies: - source-map "~0.6.0" - cli-boxes@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-1.0.0.tgz#4fa917c3e59c94a004cd61f8ee509da651687143" @@ -5051,7 +5036,7 @@ cssnano-util-same-parent@^4.0.0: resolved "https://registry.yarnpkg.com/cssnano-util-same-parent/-/cssnano-util-same-parent-4.0.1.tgz#574082fb2859d2db433855835d9a8456ea18bbf3" integrity sha512-WcKx5OY+KoSIAxBW6UBBRay1U6vkYheCdjyVNDm85zt5K9mHoGOfsOsqIszfAqrQQFIIKgjh2+FDgIj/zsl21Q== -cssnano@^4.0.5, cssnano@^4.1.10: +cssnano@^4.1.10: version "4.1.10" resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-4.1.10.tgz#0ac41f0b13d13d465487e111b778d42da631b8b2" integrity sha512-5wny+F6H4/8RgNlaqab4ktc3e0/blKutmq8yNlBFXA//nSFFAqAngjNVRzUvCgYROULmZZUoosL/KSoZo5aUaQ== @@ -7184,20 +7169,6 @@ gatsby-plugin-page-creator@^2.1.7: lodash "^4.17.14" micromatch "^3.1.10" -gatsby-plugin-prefetch-google-fonts@^1.4.2: - version "1.4.3" - resolved "https://registry.yarnpkg.com/gatsby-plugin-prefetch-google-fonts/-/gatsby-plugin-prefetch-google-fonts-1.4.3.tgz#0557879c7ba0085e4d53107699a8c1073bd52d0e" - integrity sha512-rrNGpdLkSEQWksM1A1cJnL/wuu9GLfAl8oPQgpn3cmpKd4jnXk+nbLyQOwKQlRYSrzpju59dY8oyf4UfSFbqPg== - dependencies: - "@babel/runtime" "^7.2.0" - clean-css "^4.2.1" - download "^7.1.0" - fs-extra "^7.0.0" - get-urls "^8.0.0" - globby "^8.0.1" - google-fonts-plugin "2.0.2" - object-hash "^1.3.0" - gatsby-plugin-react-helmet@^3.0.12, gatsby-plugin-react-helmet@^3.1.0: version "3.1.4" resolved "https://registry.yarnpkg.com/gatsby-plugin-react-helmet/-/gatsby-plugin-react-helmet-3.1.4.tgz#cea67aa21721c82e6066c04f71aa0cecfebec0ce" @@ -7642,14 +7613,6 @@ get-stream@^5.0.0: dependencies: pump "^3.0.0" -get-urls@^8.0.0: - version "8.0.0" - resolved "https://registry.yarnpkg.com/get-urls/-/get-urls-8.0.0.tgz#62a0225cf96e2336b57e5041781f015141f81511" - integrity sha512-9c6aVD6HqnpFjqWSoRzSGNo69hNnSa8EevNFVeIRSLYqYlIJNvtHgrqiQ1sUjHwbZPBY5gO1FMlVjmElfdneqw== - dependencies: - normalize-url "^3.3.0" - url-regex "^4.0.0" - get-value@^2.0.3, get-value@^2.0.6: version "2.0.6" resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28" @@ -7899,17 +7862,6 @@ good-listener@^1.2.2: dependencies: delegate "^3.1.2" -google-fonts-plugin@2.0.2: - version "2.0.2" - resolved "https://registry.yarnpkg.com/google-fonts-plugin/-/google-fonts-plugin-2.0.2.tgz#a9ed816239bd92a3605915c8cfce6acf023d70b9" - integrity sha512-pWYFe6zoLA6uIUpSr/pkakf3DwA2fYgpStfe54AmkiKTHMCUILvtqihHaS2f4SqbTpdpEUYVTMMgvs2ur1ge8g== - dependencies: - axios "^0.18.0" - cssnano "^4.0.5" - mkdirp "^0.5.1" - neon-js "^1.1.2" - path "^0.12.7" - got@8.0.0: version "8.0.0" resolved "https://registry.yarnpkg.com/got/-/got-8.0.0.tgz#57a11f841edc58e3f3eba4b3ac220faf5133770f" @@ -8850,11 +8802,6 @@ invert-kv@^2.0.0: resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-2.0.0.tgz#7393f5afa59ec9ff5f67a27620d11c226e3eec02" integrity sha512-wPVv/y/QQ/Uiirj/vh3oP+1Ww+AWehmi1g5fFWGPF6IpCBCDVrhgHRMvrLfdYcwDh3QJbGXDW4JAuzxElLSqKA== -ip-regex@^1.0.1: - version "1.0.3" - resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-1.0.3.tgz#dc589076f659f419c222039a33316f1c7387effd" - integrity sha1-3FiQdvZZ9BnCIgOaMzFvHHOH7/0= - ip-regex@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-2.1.0.tgz#fa78bf5d2e6913c911ce9f819ee5146bb6d844e9" @@ -10882,11 +10829,6 @@ neo-async@^2.5.0, neo-async@^2.6.0, neo-async@^2.6.1: resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c" integrity sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw== -neon-js@^1.1.2: - version "1.1.2" - resolved "https://registry.yarnpkg.com/neon-js/-/neon-js-1.1.2.tgz#af85d8e2bb8099cfc7f6fe256a896a5464b00623" - integrity sha1-r4XY4ruAmc/H9v4laolqVGSwBiM= - next-tick@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c" @@ -11283,7 +11225,7 @@ object-copy@^0.1.0: define-property "^0.2.5" kind-of "^3.0.3" -object-hash@^1.1.4, object-hash@^1.3.0: +object-hash@^1.1.4: version "1.3.1" resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-1.3.1.tgz#fde452098a951cb145f039bb7d455449ddc126df" integrity sha512-OSuu/pU4ENM9kmREg0BdNrUDIl1heYa4mBZacJc+vVWz4GtAwu7jO8s4AIt2aGRUTqxykpWzI3Oqnsm13tTMDA== @@ -11989,14 +11931,6 @@ path-type@^4.0.0: resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b" integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw== -path@^0.12.7: - version "0.12.7" - resolved "https://registry.yarnpkg.com/path/-/path-0.12.7.tgz#d4dc2a506c4ce2197eb481ebfcd5b36c0140b10f" - integrity sha1-1NwqUGxM4hl+tIHr/NWzbAFAsQ8= - dependencies: - process "^0.11.1" - util "^0.10.3" - pbkdf2@^3.0.3: version "3.0.17" resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.17.tgz#976c206530617b14ebb32114239f7b09336e93a6" @@ -12681,7 +12615,7 @@ process-nextick-args@~2.0.0: resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2" integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag== -process@^0.11.1, process@^0.11.10: +process@^0.11.10: version "0.11.10" resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182" integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI= @@ -14446,7 +14380,7 @@ source-map@^0.4.2: dependencies: amdefine ">=0.0.4" -source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1: +source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1: version "0.6.1" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263" integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g== @@ -15294,11 +15228,6 @@ title-case@^2.1.0: no-case "^2.2.0" upper-case "^1.0.3" -tlds@^1.187.0: - version "1.203.1" - resolved "https://registry.yarnpkg.com/tlds/-/tlds-1.203.1.tgz#4dc9b02f53de3315bc98b80665e13de3edfc1dfc" - integrity sha512-7MUlYyGJ6rSitEZ3r1Q1QNV8uSIzapS8SmmhSusBuIc7uIxPPwsKllEP0GRp1NS6Ik6F+fRZvnjDWm3ecv2hDw== - tmp@^0.0.31: version "0.0.31" resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.31.tgz#8f38ab9438e17315e5dbd8b3657e8bfb277ae4a7" @@ -15909,14 +15838,6 @@ url-parse@^1.1.8, url-parse@^1.4.3: querystringify "^2.1.1" requires-port "^1.0.0" -url-regex@^4.0.0: - version "4.1.1" - resolved "https://registry.yarnpkg.com/url-regex/-/url-regex-4.1.1.tgz#a5617b22e15e26dac57ce74c3f52088bcdfec995" - integrity sha512-ViSDgDPNKkrQHI81GLCjdDN+Rsk3tAW/uLXlBOJxtcHzWZjta58Z0APXhfXzS89YszsheMnEvXeDXsWUB53wwA== - dependencies: - ip-regex "^1.0.1" - tlds "^1.187.0" - url-template@^2.0.8: version "2.0.8" resolved "https://registry.yarnpkg.com/url-template/-/url-template-2.0.8.tgz#fc565a3cccbff7730c775f5641f9555791439f21" @@ -15979,13 +15900,6 @@ util@0.10.3: dependencies: inherits "2.0.1" -util@^0.10.3: - version "0.10.4" - resolved "https://registry.yarnpkg.com/util/-/util-0.10.4.tgz#3aa0125bfe668a4672de58857d3ace27ecb76901" - integrity sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A== - dependencies: - inherits "2.0.3" - util@^0.11.0: version "0.11.1" resolved "https://registry.yarnpkg.com/util/-/util-0.11.1.tgz#3236733720ec64bb27f6e26f421aaa2e1b588d61"