From 1c2a610aa365a84cfaa26ff8f3df183127ca8489 Mon Sep 17 00:00:00 2001 From: Vince Picone Date: Mon, 20 May 2019 15:33:40 -0500 Subject: [PATCH] feat: switch font-loading to prefetch. Add font weight option --- packages/gatsby-theme-carbon/gatsby-config.js | 15 +++ packages/gatsby-theme-carbon/package.json | 1 + .../src/components/Homepage/homepage.scss | 4 + .../gatsby-theme-carbon/src/styles/index.scss | 20 ++-- yarn.lock | 93 +++++++++++++++++-- 5 files changed, 114 insertions(+), 19 deletions(-) diff --git a/packages/gatsby-theme-carbon/gatsby-config.js b/packages/gatsby-theme-carbon/gatsby-config.js index 8d3a1c871..22c762133 100644 --- a/packages/gatsby-theme-carbon/gatsby-config.js +++ b/packages/gatsby-theme-carbon/gatsby-config.js @@ -9,6 +9,7 @@ module.exports = themeOptions => { backgroundColor = colors.uiBackground, themeColor = colors.interactive01, display = 'browser', + fontWeights = ['300', '400', '600'], favicon = require.resolve('./src/images/light.png'), } = themeOptions; @@ -20,6 +21,20 @@ module.exports = themeOptions => { plugins: [ `gatsby-plugin-sharp`, `gatsby-transformer-yaml`, + { + resolve: `gatsby-plugin-prefetch-google-fonts`, + options: { + fonts: [ + { + family: `IBM Plex Sans`, + variants: fontWeights, + }, + { + 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 fc233e2ce..26aa47043 100644 --- a/packages/gatsby-theme-carbon/package.json +++ b/packages/gatsby-theme-carbon/package.json @@ -40,6 +40,7 @@ "gatsby-plugin-compile-es6-packages": "^1.1.0", "gatsby-plugin-emotion": "^4.0.6", "gatsby-plugin-manifest": "^2.1.1", + "gatsby-plugin-prefetch-google-fonts": "^1.4.2", "gatsby-plugin-react-helmet": "^3.0.12", "gatsby-plugin-sass": "^2.0.11", "gatsby-plugin-sharp": "^2.0.36", diff --git a/packages/gatsby-theme-carbon/src/components/Homepage/homepage.scss b/packages/gatsby-theme-carbon/src/components/Homepage/homepage.scss index 758541659..91cea4992 100644 --- a/packages/gatsby-theme-carbon/src/components/Homepage/homepage.scss +++ b/packages/gatsby-theme-carbon/src/components/Homepage/homepage.scss @@ -87,3 +87,7 @@ padding-left: 400px; } } + +.container--homepage .#{$prefix}--col-no-gutter { + padding: 0; +} diff --git a/packages/gatsby-theme-carbon/src/styles/index.scss b/packages/gatsby-theme-carbon/src/styles/index.scss index ffaefdbed..9677a127b 100644 --- a/packages/gatsby-theme-carbon/src/styles/index.scss +++ b/packages/gatsby-theme-carbon/src/styles/index.scss @@ -5,19 +5,17 @@ @import '~@carbon/elements/scss/layout/breakpoint'; @import '~@carbon/elements/scss/layout/layout'; @import '~@carbon/elements/scss/grid/grid'; +@import '~@carbon/elements/scss/colors/colors'; -@import '~@carbon/elements/scss/type/type'; -@import '~@carbon/elements/scss/type/font-face/sans'; -@import '~@carbon/elements/scss/type/font-face/serif'; -@import '~@carbon/elements/scss/type/font-face/mono'; @import '~@carbon/elements/scss/type/classes'; +@import '~@carbon/elements/scss/type/reset'; +@include carbon--type-reset(); -@import '~@carbon/elements/scss/colors/colors'; +@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans&text=%E2%86%B3'); // ↳ special character -@include carbon--type-reset(); -@include carbon--font-face-mono(); -@include carbon--font-face-sans(); -@include carbon--font-face-serif(); +$font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; +$font-family-mono: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', + 'Bitstream Vera Sans Mono', Courier, monospace; $feature-flags: ( ui-shell: true, @@ -37,10 +35,6 @@ $prefix: 'bx'; @import '~@carbon/addons-website/scss/components/website-side-nav'; @import '~@carbon/addons-website/scss/components/website-back-to-top-btn'; -$font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; -$font-family-mono: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', - 'Bitstream Vera Sans Mono', Courier, monospace; - //--------------------------------------- // Page styles //--------------------------------------- diff --git a/yarn.lock b/yarn.lock index 7518f0fef..717ff3eb4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -710,7 +710,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.4.2": +"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.2.0", "@babel/runtime@^7.4.2": version "7.4.4" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.4.tgz#dc2e34982eb236803aa27a07fea6857af1b9171d" integrity sha512-w0+uT71b6Yi7i5SE0co4NioIpSYS6lLiXvCzWzGSKvpK5vdQtCbICHMj+gbAKAOtxiV6HsVh/MBdaF9EQ6faSg== @@ -2439,6 +2439,14 @@ 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.0" + resolved "https://registry.yarnpkg.com/axios/-/axios-0.18.0.tgz#32d53e4851efdc0a11993b6cd000789d70c05102" + integrity sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI= + dependencies: + follow-redirects "^1.3.0" + is-buffer "^1.1.5" + axobject-query@^2.0.2: version "2.0.2" resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.0.2.tgz#ea187abe5b9002b377f925d8bf7d1c561adf38f9" @@ -3462,6 +3470,13 @@ 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" @@ -4322,7 +4337,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.1.0: +cssnano@^4.0.5, cssnano@^4.1.0: version "4.1.10" resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-4.1.10.tgz#0ac41f0b13d13d465487e111b778d42da631b8b2" integrity sha512-5wny+F6H4/8RgNlaqab4ktc3e0/blKutmq8yNlBFXA//nSFFAqAngjNVRzUvCgYROULmZZUoosL/KSoZo5aUaQ== @@ -5983,7 +5998,7 @@ focus-trap@^4.0.2: tabbable "^3.1.2" xtend "^4.0.1" -follow-redirects@^1.0.0: +follow-redirects@^1.0.0, follow-redirects@^1.3.0: version "1.7.0" resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.7.0.tgz#489ebc198dc0e7f64167bd23b03c4c19b5784c76" integrity sha512-m/pZQy4Gj287eNy94nivy5wchN3Kp+Q5WgUPNy5lJSZ3sgkVKSYV/ZChMAQVIgx1SqfZ2zBZtPA2YlXIWxxJOQ== @@ -6261,6 +6276,20 @@ gatsby-plugin-page-creator@^2.0.12: parse-filepath "^1.0.1" slash "^1.0.0" +gatsby-plugin-prefetch-google-fonts@^1.4.2: + version "1.4.2" + resolved "https://registry.yarnpkg.com/gatsby-plugin-prefetch-google-fonts/-/gatsby-plugin-prefetch-google-fonts-1.4.2.tgz#a9a4291bec9e0ddf34a0112ec969afc5b2d60902" + integrity sha512-aeeWsXAZtgvj3SfFa22tVFbki12W9df4xVWaQ/SEV2FKGve9sMaInWIRtUBgJZ7kPl8JBuhzcNz69XitxC0WqQ== + 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: version "3.0.12" resolved "https://registry.yarnpkg.com/gatsby-plugin-react-helmet/-/gatsby-plugin-react-helmet-3.0.12.tgz#805252b54ea4044d286d2158991429aa4f60aa02" @@ -6631,6 +6660,14 @@ get-stream@^4.0.0, get-stream@^4.1.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" @@ -6809,6 +6846,17 @@ 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" @@ -9494,6 +9542,11 @@ neo-async@^2.5.0, neo-async@^2.6.0: resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.0.tgz#b9d15e4d71c6762908654b5183ed38b753340835" integrity sha512-MFh0d/Wa7vkKO3Y3LlacqAEeHK0mckVqzDieUKTT+KGxi+zIpeVsFxymkIiRpbpDziHc290Xr9A1O4Om7otoRA== +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" @@ -9873,7 +9926,7 @@ object-copy@^0.1.0: define-property "^0.2.5" kind-of "^3.0.3" -object-hash@^1.1.4: +object-hash@^1.1.4, object-hash@^1.3.0: version "1.3.1" resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-1.3.1.tgz#fde452098a951cb145f039bb7d455449ddc126df" integrity sha512-OSuu/pU4ENM9kmREg0BdNrUDIl1heYa4mBZacJc+vVWz4GtAwu7jO8s4AIt2aGRUTqxykpWzI3Oqnsm13tTMDA== @@ -10558,6 +10611,14 @@ path-type@^3.0.0: dependencies: pify "^3.0.0" +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" @@ -11128,7 +11189,7 @@ process-nextick-args@~2.0.0: resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.0.tgz#a37d732f4271b4ab1ad070d35508e8290788ffaa" integrity sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw== -process@^0.11.10: +process@^0.11.1, process@^0.11.10: version "0.11.10" resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182" integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI= @@ -12752,7 +12813,7 @@ source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, sour resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc" integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w= -source-map@^0.6.0, source-map@^0.6.1, 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: version "0.6.1" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263" integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g== @@ -13429,6 +13490,11 @@ 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" @@ -13984,6 +14050,14 @@ url-regex@^3.0.0: dependencies: ip-regex "^1.0.1" +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" @@ -14027,6 +14101,13 @@ 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"