gatsby-theme-carbon 2.1.4 → 2.3.0

package/gatsby-config.js

@@ -34,6 +34,7 @@ module.exports = (themeOptions) => {
     gatsbyPluginSharpOptions = {},
     isServiceWorkerEnabled = false,
     isSwitcherEnabled = true,
+    extraLayouts = {},
   } = themeOptions;
 
   const theme = { ...defaultTheme, ...themeOption };
@@ -121,6 +122,7 @@ module.exports = (themeOptions) => {
           defaultLayouts: {
             default: require.resolve('./src/templates/Default.js'),
             home: require.resolve('./src/templates/Homepage.js'),
+            ...extraLayouts,
           },
         },
       },

package/gatsby-ssr.js

@@ -32,7 +32,7 @@ export const onRenderBody = ({ setHeadComponents, setBodyAttributes }) => {
     <link
       key="sans"
       rel="preload"
-      href="https://gatsby-theme-carbon.now.sh/fonts/IBMPlexSansLatin-VF.woff2"
+      href="https://gatsby.carbondesignsystem.com/fonts/IBMPlexSansLatin-VF.woff2"
       as="font"
       type="font/woff2"
       crossOrigin=""

package/index.js

@@ -16,5 +16,7 @@ export { default as ImageCard } from './src/components/ImageCard';
 export { default as SquareCard } from './src/components/SquareCard';
 export { Tabs, Tab } from './src/components/Tabs';
 export { default as InlineNotification } from './src/components/InlineNotification';
+export { default as ExpressiveListContainer } from './src/components/ExpressiveListContainer';
+export { default as ExpressiveList } from './src/components/ExpressiveList';
 // Homepage Template Components
 export { HomepageCallout, HomepageBanner } from './src/components/Homepage';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-theme-carbon",
-  "version": "2.1.4",
+  "version": "2.3.0",
   "main": "index.js",
   "author": "vpicone <vp@vincepic.one> (@vpicone)",
   "repository": {

package/src/components/ArticleCard/ArticleCard.js

@@ -45,9 +45,10 @@ export default class ArticleCard extends React.Component {
       [`${prefix}--aspect-ratio--2x1`]
     );
 
-    const carbonTileclassNames = cx(
+    const cardContentClassNames = cx(
       [`${prefix}--tile`],
-      [`${prefix}--tile--clickable`]
+      [`${prefix}--tile--clickable`],
+      [`${prefix}--article-card_content`]
     );
 
     const cardContent = (
@@ -101,16 +102,18 @@ export default class ArticleCard extends React.Component {
 
     let cardContainer;
     if (disabled === true) {
-      cardContainer = <div className={carbonTileclassNames}>{cardContent}</div>;
+      cardContainer = (
+        <div className={cardContentClassNames}>{cardContent}</div>
+      );
     } else if (isLink === true) {
       cardContainer = (
-        <Link to={href} className={carbonTileclassNames} {...rest}>
+        <Link to={href} className={cardContentClassNames} {...rest}>
           {cardContent}
         </Link>
       );
     } else {
       cardContainer = (
-        <a href={href} className={carbonTileclassNames} {...rest}>
+        <a href={href} className={cardContentClassNames} {...rest}>
           {cardContent}
         </a>
       );

package/src/components/ArticleCard/article-card.scss

@@ -10,7 +10,7 @@
   }
 }
 
-.#{$prefix}--article-card:hover .#{$prefix}--tile {
+.#{$prefix}--article-card:hover .#{$prefix}--article-card__tile {
   background: $hover-ui;
 }
 
@@ -43,6 +43,13 @@
   @include carbon--type-style('caption-01');
 }
 
+// At the moment, we force 16:9 for medium posts, this
+// is how we would force 16:9 for all article cards
+//
+// .#{$prefix}--article-card__img {
+//   aspect-ratio: 16 / 9;
+// }
+
 .#{$prefix}--article-card__img .gatsby-resp-image-wrapper {
   margin-bottom: 0;
 }
@@ -60,11 +67,11 @@
 }
 
 // Dark
-.#{$prefix}--article-card--dark .#{$prefix}--tile {
+.#{$prefix}--article-card--dark .#{$prefix}--article-card__tile {
   background: $carbon--gray-90; //$ui-background for gray 90 theme
 }
 
-.#{$prefix}--article-card--dark:hover .#{$prefix}--tile {
+.#{$prefix}--article-card--dark:hover .#{$prefix}--article-card__tile {
   background: $carbon--gray-80; //$hover-ui for gray 90 theme
 }
 
@@ -86,7 +93,7 @@
   cursor: not-allowed;
 }
 
-.#{$prefix}--article-card--disabled .#{$prefix}--tile:hover {
+.#{$prefix}--article-card--disabled .#{$prefix}--article-card__tile:hover {
   background: $ui-01;
   cursor: not-allowed;
 }
@@ -105,7 +112,7 @@
 
 // Disabled dark
 .#{$prefix}--article-card--disabled.#{$prefix}--article-card--dark
-  .#{$prefix}--tile:hover {
+  .#{$prefix}--article-card__tile:hover {
   background: $carbon--gray-90; //$ui-background for gray 90 theme
 }
 

package/src/components/Code/Code.module.scss

@@ -36,7 +36,7 @@
   @include carbon--type-style('code-02');
   width: calc(100% + 2rem);
   @include carbon--breakpoint('lg') {
-    width: calc(67% + 1rem);
+    width: calc(67% + 1.15rem);
   }
 }
 

package/src/components/DoDontExample/DoDontExample.js

@@ -23,18 +23,25 @@ export default class DoDontExample extends React.Component {
   };
 
   render() {
-    const {
-      children,
-      caption,
-      captionTitle,
-      text,
-      aspectRatio,
-      color,
-      type,
-    } = this.props;
+    const { children, caption, captionTitle, text, aspectRatio, color, type } =
+      this.props;
 
     const wrapperClassNames = cx(`${prefix}--example`, {
-      [`${prefix}--example--square`]: aspectRatio === '1:1',
+      [`${prefix}--example--ratio`]:
+        aspectRatio === '1:1' ||
+        aspectRatio === '2:1' ||
+        aspectRatio === '1:2' ||
+        aspectRatio === '4:3' ||
+        aspectRatio === '3:4' ||
+        aspectRatio === '9:16' ||
+        aspectRatio === '16:9',
+      [`${prefix}--example--1x1`]: aspectRatio === '1:1',
+      [`${prefix}--example--2x1`]: aspectRatio === '2:1',
+      [`${prefix}--example--1x2`]: aspectRatio === '1:2',
+      [`${prefix}--example--4x3`]: aspectRatio === '4:3',
+      [`${prefix}--example--3x4`]: aspectRatio === '3:4',
+      [`${prefix}--example--9x16`]: aspectRatio === '9:16',
+      [`${prefix}--example--16x9`]: aspectRatio === '16:9',
       [`${prefix}--example--correct`]: type === 'do',
       [`${prefix}--example--incorrect`]: type !== 'do',
       [`${prefix}--example--dark`]: color === 'dark',

package/src/components/DoDontExample/do-dont-example.scss

@@ -34,11 +34,37 @@
   position: relative;
 }
 
-.#{$prefix}--example--square .#{$prefix}--example-card {
+// Aspect Ratio
+
+.#{$prefix}--example--1x1 .#{$prefix}--example-card {
   padding-top: 100%;
 }
 
-.#{$prefix}--example--square .#{$prefix}--example-card__content {
+.#{$prefix}--example--4x3 .#{$prefix}--example-card {
+  padding-top: 75%;
+}
+
+.#{$prefix}--example--3x4 .#{$prefix}--example-card {
+  padding-top: 133.3333333333%;
+}
+
+.#{$prefix}--example--2x1 .#{$prefix}--example-card {
+  padding-top: 50%;
+}
+
+.#{$prefix}--example--1x2 .#{$prefix}--example-card {
+  padding-top: 150%;
+}
+
+.#{$prefix}--example--9x16 .#{$prefix}--example-card {
+  padding-top: 177.7777777778%;
+}
+
+.#{$prefix}--example--16x9 .#{$prefix}--example-card {
+  padding-top: 56.25%;
+}
+
+.#{$prefix}--example--ratio .#{$prefix}--example-card__content {
   position: absolute;
   top: 0;
   left: 0;
@@ -74,7 +100,7 @@
 }
 
 .#{$prefix}--example--correct .#{$prefix}--example-card::before {
-  background: $support-02;
+  background: $carbon--green-50;
 }
 
 .#{$prefix}--example--incorrect .#{$prefix}--example-card::before {
@@ -92,7 +118,7 @@
 }
 
 .#{$prefix}--example__icon--correct {
-  fill: $support-02;
+  fill: $carbon--green-50;
 }
 
 .#{$prefix}--example__icon--incorrect {

package/src/components/DoDontRow/DoDont.js

@@ -38,8 +38,22 @@ export default class DoDont extends React.Component {
     const wrapperClassNames = cx(className, styles.example, {
       [styles.correct]: type === 'do',
       [styles.incorrect]: type === 'dont',
-      [styles.square]: aspectRatio === '1:1',
       [styles.dark]: color === 'dark',
+      [styles.ratio]:
+        aspectRatio === '1:1' ||
+        aspectRatio === '2:1' ||
+        aspectRatio === '1:2' ||
+        aspectRatio === '4:3' ||
+        aspectRatio === '3:4' ||
+        aspectRatio === '9:16' ||
+        aspectRatio === '16:9',
+      [styles.ratio1x1]: aspectRatio === '1:1',
+      [styles.ratio2x1]: aspectRatio === '2:1',
+      [styles.ratio1x2]: aspectRatio === '1:2',
+      [styles.ratio4x3]: aspectRatio === '4:3',
+      [styles.ratio3x4]: aspectRatio === '3:4',
+      [styles.ratio9x16]: aspectRatio === '9:16',
+      [styles.ratio16x9]: aspectRatio === '16:9',
     });
 
     return (

package/src/components/DoDontRow/DoDontRow.module.scss

@@ -103,10 +103,34 @@
   color: $carbon--white-0;
 }
 
-.square .card {
+.ratio1x1 .card {
   padding-top: 100%;
 }
 
+.ratio4x3 .card {
+  padding-top: 75%;
+}
+
+.ratio3x4 .card {
+  padding-top: 133.3333333333%;
+}
+
+.ratio2x1 .card {
+  padding-top: 50%;
+}
+
+.ratio1x2 .card {
+  padding-top: 150%;
+}
+
+.ratio9x16 .card {
+  padding-top: 177.7777777778%;
+}
+
+.ratio16x9 .card {
+  padding-top: 56.25%;
+}
+
 .card::before {
   content: '';
   position: absolute;
@@ -145,7 +169,7 @@
   position: relative;
 }
 
-.square .card-content {
+.ratio .card-content {
   position: absolute;
   top: 0;
   left: 0;

package/src/components/ExpressiveList/ExpressiveList.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import propTypes from 'prop-types';
+import cx from 'classnames';
+import { settings } from 'carbon-components';
+import { Row, Column } from '../Grid';
+import * as styles from './ExpressiveList.module.scss';
+
+const { prefix } = settings;
+
+const ExpressiveList = ({
+  children,
+  className,
+  pictogram,
+  title,
+  titleType,
+}) => {
+  const ExpressiveListTitleClassNames = cx(styles.title, {
+    [styles.expressive_04]: titleType === 'expressive-04',
+    [styles.expressive_02]: titleType === 'expressive-02',
+  });
+
+  if (!pictogram) {
+    return (
+      <Row className={(cx(className), styles.listRow)}>
+        <Column colMd={2} colLg={4} noGutterLgLeft>
+          <h3 className={ExpressiveListTitleClassNames}>{title}</h3>
+        </Column>
+        <Column colMd={6} colLg={8}>
+          <p className={styles.content}>{children}</p>
+        </Column>
+      </Row>
+    );
+  }
+  return (
+    <Row className={(cx(className), styles.listRow)}>
+      <Column colMd={2} colLg={1} noGutterLgLeft>
+        {pictogram}
+      </Column>
+      <Column colMd={6} colLg={7} className={styles.pictogramContent}>
+        <h3 className={ExpressiveListTitleClassNames}>{title}</h3>
+        <p className={styles.content}>{children}</p>
+      </Column>
+    </Row>
+  );
+};
+
+ExpressiveList.propTypes = {
+  children: propTypes.string,
+  className: propTypes.string,
+  pictogram: propTypes.node,
+  title: propTypes.string,
+  titleType: propTypes.string,
+};
+
+export default ExpressiveList;

package/src/components/ExpressiveList/ExpressiveList.module.scss

@@ -0,0 +1,44 @@
+.listRow {
+  background: $ui-01;
+  padding: 1rem;
+  padding-bottom: 4rem;
+  border-bottom: 1px solid $ui-03;
+}
+
+.listRow:not(:first-child) {
+  margin-top: 0;
+}
+
+.listRow:last-child {
+  border-bottom: none;
+}
+
+.title {
+  @include carbon--type-style('expressive-heading-03', true);
+
+  padding-right: 2rem;
+}
+
+.expressive_04 {
+  @include carbon--type-style('expressive-heading-04', true);
+
+  @include carbon--breakpoint-down('lg') {
+    padding: 1rem;
+  }
+
+  @include carbon--breakpoint-down('md') {
+    @include carbon--type-style('expressive-heading-03', true);
+  }
+}
+
+.expressive_02 {
+  @include carbon--type-style('expressive-heading-02', true);
+}
+
+.content {
+  @include carbon--type-style('body-long-02');
+}
+
+.pictogramContent {
+  padding-right: 2rem;
+}

package/src/components/ExpressiveList/index.js

@@ -0,0 +1,3 @@
+import ExpressiveList from './ExpressiveList';
+
+export default ExpressiveList;

package/src/components/ExpressiveListContainer/ExpressiveListContainer.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import propTypes from 'prop-types';
+import cx from 'classnames';
+import { settings } from 'carbon-components';
+import { Row, Column } from '../Grid';
+import * as styles from './ExpressiveListContainer.module.scss';
+
+const { prefix } = settings;
+
+const ExpressiveListContainer = ({
+  contentClassName,
+  children,
+  className,
+  text,
+  title,
+  titleType,
+}) => {
+  const ExpressiveContainerClassNames = cx(className, styles.container);
+
+  const TitleClassNames = cx(styles.title, {
+    [styles.expressive_04]: titleType === 'expressive-04',
+    [styles.expressive_02]: titleType === 'expressive-02',
+  });
+
+  const ContentClassNames = cx(contentClassName, styles.content);
+
+  return (
+    <Row className={ExpressiveContainerClassNames}>
+      <Column colMd={2} colLg={4} noGutterLgLeft>
+        <h3 className={TitleClassNames}>{title}</h3>
+      </Column>
+      <Column colMd={6} colLg={8} noGutterLgRight className={ContentClassNames}>
+        <p className={styles.text}>{text}</p>
+        {children}
+      </Column>
+    </Row>
+  );
+};
+
+ExpressiveListContainer.propTypes = {
+  contentClassName: propTypes.string,
+  children: propTypes.node,
+  className: propTypes.string,
+  title: propTypes.string,
+  titleType: propTypes.string,
+};
+
+export default ExpressiveListContainer;

package/src/components/ExpressiveListContainer/ExpressiveListContainer.module.scss

@@ -0,0 +1,35 @@
+.container {
+  border-top: 1px solid $ui-04;
+  margin-top: 3rem;
+  padding-top: 1.5rem;
+}
+
+.title {
+  @include carbon--type-style('expressive-heading-03', true);
+
+  padding-right: 2rem;
+}
+
+.expressive_04 {
+  @include carbon--type-style('expressive-heading-04', true);
+
+  @include carbon--breakpoint-down('lg') {
+    padding: 1rem;
+  }
+
+  @include carbon--breakpoint-down('md') {
+    @include carbon--type-style('expressive-heading-03', true);
+  }
+}
+
+.expressive_02 {
+  @include carbon--type-style('expressive-heading-02', true);
+}
+
+.content {
+  @include carbon--type-style('body-long-02');
+}
+
+.text {
+  padding-right: 2rem;
+}

package/src/components/ExpressiveListContainer/index.js

@@ -0,0 +1,3 @@
+import ExpressiveListContainer from './ExpressiveListContainer';
+
+export default ExpressiveListContainer;

package/src/components/FeatureCard/feature-card.scss

@@ -17,10 +17,6 @@
       100% + 2rem
     ); //needed to make the row the same width as other rows with the negative margins
   }
-
-  @include carbon--breakpoint('max') {
-    width: calc(100% + 1rem);
-  }
 }
 
 .#{$prefix}--feature-card__img {

package/src/components/FourOhFour/FourOhFour.module.scss

@@ -16,6 +16,10 @@
   animation: gradient 2s ease infinite;
 }
 
+:global(.container--dark) .link {
+  color: $carbon--gray-10;
+}
+
 .list .link {
   @include carbon--type-style('body-short-02');
   margin-bottom: $spacing-03;
@@ -43,10 +47,6 @@
   }
 }
 
-:global(.container--dark) .link {
-  color: $carbon--gray-10;
-}
-
 .paragraph {
   @include carbon--type-style('body-long-01');
   font-size: 1.25rem;
@@ -75,7 +75,7 @@
   }
 
   @include carbon--breakpoint('max') {
-    padding-left: 400px;
+    padding-left: 424px;
   }
 }
 

package/src/components/Homepage/Banner.js

@@ -6,6 +6,7 @@ const HomepageBanner = ({ image, position, renderText }) => (
   <Grid
     style={{
       maxWidth: '100%',
+      overflow: 'hidden',
       backgroundImage: `url(${image})`,
       backgroundPosition: position || 'center',
     }}

package/src/components/Homepage/Callout.module.scss

@@ -11,7 +11,7 @@
 .row {
   padding-top: $layout-05;
   padding-bottom: $layout-05;
-  max-width: 74.25rem;
+  max-width: 1152px;
 }
 
 .row code {

package/src/components/Homepage/homepage.scss

@@ -72,13 +72,12 @@
   margin: 0;
 
   @include carbon--breakpoint('lg') {
-    padding-left: calc(
-      25% + 2rem
-    ); //2rem to account for 2rem left padding default on grid
+    padding-left: calc(25% + 1.5rem);
   }
 
   @include carbon--breakpoint('max') {
-    padding-left: 400px;
+    padding-left: 424px;
+    padding-right: 0;
   }
 }
 

package/src/components/MDXProvider/defaultComponents.js

@@ -31,6 +31,8 @@ import { MiniCard, CardGroup } from '../MiniCard';
 import Sup from '../markdown/Sup';
 import Abbr from '../markdown/Abbr';
 import SquareCard from '../SquareCard';
+import ExpressiveListContainer from '../ExpressiveListContainer';
+import ExpressiveList from '../ExpressiveList';
 
 const components = {
   wrapper: function Wrapper({ children, ...props }) {
@@ -83,6 +85,8 @@ const components = {
   MiniCard,
   CardGroup,
   SquareCard,
+  ExpressiveListContainer,
+  ExpressiveList,
 };
 
 export default components;

package/src/components/MediumPosts/MediumPosts.module.scss

@@ -1,11 +1,7 @@
 // Fixes the gutter of the article cards on the homepage
 .card-container {
-  padding-right: 0;
-  padding-left: 0;
-  @include carbon--breakpoint('md') {
-    padding-right: 1rem;
-    padding-left: 1rem;
-  }
+  padding-right: 1rem;
+  padding-left: 1rem;
 }
 
 // Fixs the breaking type
@@ -40,18 +36,5 @@
 
 .image {
   object-fit: cover;
-  width: 100%;
-
-  @include carbon--breakpoint('sm') {
-    height: 315px;
-  }
-  @include carbon--breakpoint('md') {
-    height: 290px;
-  }
-  @include carbon--breakpoint('lg') {
-    height: 165px;
-  }
-  @include carbon--breakpoint('xlg') {
-    height: 215px;
-  }
+  aspect-ratio: 16 / 9;
 }

package/src/components/Switcher/Switcher.js

@@ -96,6 +96,9 @@ const DefaultChildren = () => (
     <SwitcherLink href="https://www.carbondesignsystem.com/">
       Carbon Design System
     </SwitcherLink>
+    <SwitcherLink href="http://ibm.biz/carbon4ibmproducts" isInternal>
+      Carbon for IBM Products
+    </SwitcherLink>
     <SwitcherLink href="https://www.ibm.com/standards/carbon/">
       Carbon for IBM.com
     </SwitcherLink>
@@ -118,13 +121,10 @@ const DefaultChildren = () => (
     <SwitcherLink href="https://www.ibm.com/design/research/">
       IBM Design Research
     </SwitcherLink>
-    <SwitcherLink href="https://www.ibm.com/services/ibmix/">
-      IBM iX
-    </SwitcherLink>
     <SwitcherLink
       isInternal
-      href="https://w3.ibm.com/design/universal-experiences/">
-      IBM Universal Experiences
+      href="https://w3.ibm.com/design/experience-standards/">
+      IBM Experience Standards
     </SwitcherLink>
     <SwitcherDivider>Community</SwitcherDivider>
     <SwitcherLink href="https://w3.ibm.com/design/" isInternal>

package/src/styles/internal/_page.scss

@@ -19,8 +19,9 @@
   }
 
   @include carbon--breakpoint('max') {
-    padding-left: 400px;
-    padding-right: 2rem;
+    max-width: rem(1544px);
+    padding-left: 424px;
+    padding-right: 0;
   }
 }
 
@@ -28,11 +29,6 @@
   padding: 0;
 }
 
-// Grids on the homepage should be full width
-.container:not(.container--homepage) .#{$prefix}--grid {
-  max-width: rem(1584px);
-}
-
 //---------------------------------------
 // Header styles
 //---------------------------------------

package/src/styles/internal/_plex.scss

@@ -7,9 +7,9 @@
   font-family: 'IBM Plex Sans VF';
   unicode-range: U+0020-00FF;
   font-display: swap;
-  src: url('https://gatsby-theme-carbon.now.sh/fonts/IBMPlexSansLatin-VF.woff2')
+  src: url('https://gatsby.carbondesignsystem.com/fonts/IBMPlexSansLatin-VF.woff2')
       format('woff2-variations'),
-    url('https://gatsby-theme-carbon.now.sh/fonts/IBMPlexSansLatin-VF.woff2')
+    url('https://gatsby.carbondesignsystem.com/fonts/IBMPlexSansLatin-VF.woff2')
       format('woff2');
   font-weight: 100 900;
   font-style: normal;
@@ -19,9 +19,9 @@
   font-family: 'IBM Plex Sans VF';
   unicode-range: U+0100-1EF9;
   font-display: swap;
-  src: url('https://gatsby-theme-carbon.now.sh/fonts/IBMPlexSansLatinExt-VF.woff2')
+  src: url('https://gatsby.carbondesignsystem.com/fonts/IBMPlexSansLatinExt-VF.woff2')
       format('woff2-variations'),
-    url('https://gatsby-theme-carbon.now.sh/fonts/IBMPlexSansLatinExt-VF.woff2')
+    url('https://gatsby.carbondesignsystem.com/fonts/IBMPlexSansLatinExt-VF.woff2')
       format('woff2');
   font-weight: 100 900;
   font-style: normal;
@@ -31,9 +31,9 @@
   font-family: 'IBM Plex Sans VF';
   unicode-range: U+2000-FB02;
   font-display: swap;
-  src: url('https://gatsby-theme-carbon.now.sh/fonts/IBMPlexSansOther-VF.woff2')
+  src: url('https://gatsby.carbondesignsystem.com/fonts/IBMPlexSansOther-VF.woff2')
       format('woff2-variations'),
-    url('https://gatsby-theme-carbon.now.sh/fonts/IBMPlexSansOther-VF.woff2')
+    url('https://gatsby.carbondesignsystem.com/fonts/IBMPlexSansOther-VF.woff2')
       format('woff2');
   font-weight: 100 900;
   font-style: normal;
@@ -44,9 +44,9 @@
   font-family: 'IBM Plex Sans VF';
   unicode-range: U+0020-00FF;
   font-display: swap;
-  src: url('https://gatsby-theme-carbon.now.sh/fonts/IBMPlexSansLatin-Italic-VF.woff2')
+  src: url('https://gatsby.carbondesignsystem.com/fonts/IBMPlexSansLatin-Italic-VF.woff2')
       format('woff2-variations'),
-    url('https://gatsby-theme-carbon.now.sh/fonts/IBMPlexSansLatin-Italic-VF.woff2')
+    url('https://gatsby.carbondesignsystem.com/fonts/IBMPlexSansLatin-Italic-VF.woff2')
       format('woff2');
   font-weight: 100 900;
   font-style: italic;
@@ -56,9 +56,9 @@
   font-family: 'IBM Plex Sans VF';
   unicode-range: U+0100-1EF9;
   font-display: swap;
-  src: url('https://gatsby-theme-carbon.now.sh/fonts/IBMPlexSansLatinExt-Italic-VF.woff2')
+  src: url('https://gatsby.carbondesignsystem.com/fonts/IBMPlexSansLatinExt-Italic-VF.woff2')
       format('woff2-variations'),
-    url('https://gatsby-theme-carbon.now.sh/fonts/IBMPlexSansLatinExt-Italic-VF.woff2')
+    url('https://gatsby.carbondesignsystem.com/fonts/IBMPlexSansLatinExt-Italic-VF.woff2')
       format('woff2');
   font-weight: 100 900;
   font-style: italic;
@@ -68,9 +68,9 @@
   font-family: 'IBM Plex Sans VF';
   unicode-range: U+2000-FB02;
   font-display: swap;
-  src: url('https://gatsby-theme-carbon.now.sh/fonts/IBMPlexSansOther-Italic-VF.woff2')
+  src: url('https://gatsby.carbondesignsystem.com/fonts/IBMPlexSansOther-Italic-VF.woff2')
       format('woff2-variations'),
-    url('https://gatsby-theme-carbon.now.sh/fonts/IBMPlexSansOther-Italic-VF.woff2')
+    url('https://gatsby.carbondesignsystem.com/fonts/IBMPlexSansOther-Italic-VF.woff2')
       format('woff2');
   font-weight: 100 900;
   font-style: italic;
@@ -82,7 +82,7 @@
   font-style: normal;
   font-weight: 400;
   src: local('IBM Plex Mono'), local('IBMPlexMono'),
-    url('https://gatsby-theme-carbon.now.sh/fonts/mono/IBMPlexMono-Regular-Latin1.woff2')
+    url('https://gatsby.carbondesignsystem.com/fonts/mono/IBMPlexMono-Regular-Latin1.woff2')
       format('woff2');
   unicode-range: 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,
@@ -95,7 +95,7 @@
   font-style: normal;
   font-weight: 400;
   src: local('IBM Plex Mono'), local('IBMPlexMono'),
-    url('https://gatsby-theme-carbon.now.sh/fonts/mono/IBMPlexMono-Regular-Latin2.woff2')
+    url('https://gatsby.carbondesignsystem.com/fonts/mono/IBMPlexMono-Regular-Latin2.woff2')
       format('woff2');
   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF,
     U+2C60-2C7F, U+A720-A7FF, U+FB01-FB02;
@@ -106,7 +106,7 @@
   font-style: normal;
   font-weight: 400;
   src: local('IBM Plex Mono'), local('IBMPlexMono'),
-    url('https://gatsby-theme-carbon.now.sh/fonts/mono/IBMPlexMono-Regular-Latin3.woff2')
+    url('https://gatsby.carbondesignsystem.com/fonts/mono/IBMPlexMono-Regular-Latin3.woff2')
       format('woff2');
   unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
 }
@@ -116,7 +116,7 @@
   font-style: normal;
   font-weight: 400;
   src: local('IBM Plex Mono'), local('IBMPlexMono'),
-    url('https://gatsby-theme-carbon.now.sh/fonts/mono/IBMPlexMono-Regular-Pi.woff2')
+    url('https://gatsby.carbondesignsystem.com/fonts/mono/IBMPlexMono-Regular-Pi.woff2')
       format('woff2');
   unicode-range: U+0E3F, U+2032-2033, U+2070, U+2075-2079, U+2080-2081, U+2083,
     U+2085-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E,
@@ -131,7 +131,7 @@
   font-style: normal;
   font-weight: 400;
   src: local('IBM Plex Mono'), local('IBMPlexMono'),
-    url('https://gatsby-theme-carbon.now.sh/fonts/mono/IBMPlexMono-Regular-Cyrillic.woff2')
+    url('https://gatsby.carbondesignsystem.com/fonts/mono/IBMPlexMono-Regular-Cyrillic.woff2')
       format('woff2');
   unicode-range: U+0400-045F, U+0472-0473, U+0490-049D, U+04A0-04A5, U+04AA-04AB,
     U+04AE-04B3, U+04B6-04BB, U+04C0-04C2, U+04CF-04D9, U+04DC-04DF, U+04E2-04E9,
@@ -160,7 +160,7 @@ body {
 }
 
 @supports (font-variation-settings: normal) {
-  // This rule includes both html and body to outgun the carbon--type-reset mixin 
+  // This rule includes both html and body to outgun the carbon--type-reset mixin
   // carbon--type-reset is being called inadvertantly when sites invoke the carbon--type-style mixin
   // Without it both html and body, the font-family gets overridden with `IBM Plex Sans` (not the variable font)
   html body {