chore: add sup usage

packages/example/src/pages/test/spacing-audit.mdx

@@ -81,7 +81,7 @@ aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
 ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
 voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
 occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
-id est laborum.
+id est laborum<sup>2</sup>.
 
 ### Header 3
 

packages/gatsby-theme-carbon/src/components/MDXProvider/defaultComponents.js

@@ -28,6 +28,8 @@ import ArtDirection from '../ArtDirection';
 import MediumPosts from '../MediumPosts';
 import Title from '../Title';
 import { MiniCard, CardGroup } from '../MiniCard';
+import Sup from '../markdown/Sup';
+import Abbr from '../markdown/Abbr';
 
 const components = {
   wrapper: function Wrapper({ children, ...props }) {
@@ -48,6 +50,8 @@ const components = {
   code: Code,
   table: PageTable,
   a: Link,
+  sup: Sup,
+  abbr: Abbr,
   ArtDirection,
   PageDescription,
   Accordion,

packages/gatsby-theme-carbon/src/components/markdown/Abbr.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { TooltipDefinition } from 'carbon-components-react';
+import { abbr } from './Markdown.module.scss';
+
+// TODO add abbreviations remark plugin
+const Abbr = ({ title, children }) => (
+  <TooltipDefinition className={abbr} tooltipText={title}>
+    {children}
+  </TooltipDefinition>
+);
+
+export default Abbr;

packages/gatsby-theme-carbon/src/components/markdown/Markdown.module.scss

@@ -241,6 +241,14 @@ ul :global(.bx--list--unordered) {
   @include carbon--type-style('heading-01');
 }
 
+.sup {
+  font-feature-settings: 'sups' on;
+}
+
+.abbr:global(.bx--tooltip--definition) button {
+  font-size: 1em;
+  border-top: 1px solid transparent;
+}
 //---------------------------------------
 // Images
 //---------------------------------------

packages/gatsby-theme-carbon/src/components/markdown/Sup.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { sup } from './Markdown.module.scss';
+
+const Sup = ({ children, ...rest }) => (
+  <sup className={sup} {...rest}>
+    {children}
+  </sup>
+);
+
+export default Sup;

packages/gatsby-theme-carbon/src/templates/Homepage.js

@@ -5,7 +5,6 @@ import Carbon from '../images/carbon.jpg';
 import Main from '../components/Main';
 import Utils from '../components/Utils';
 
-import BackToTopBtn from '../components/BackToTopBtn';
 import NextPrevious from '../components/NextPrevious';
 
 const Homepage = ({