Revert "Adds color guideline documentation"

next/components/mdx/components.tsx

@@ -20,13 +20,6 @@ const sourceCodePro = Source_Code_Pro({
     subsets: ['latin'],
 });
 
-// TODO: apply atomicClasses to other headers once
-// type definition error is resolved (see H2)
-interface HeadingElement
-    extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement> {
-    atomicClasses?: string;
-}
-
 const HashAnchor = ({ children, id }: { children: React.ReactNode; id: string }): JSX.Element => (
     <div className={styles.hashAnchor}>
         <a href={`#${id}`} aria-hidden="true" className={styles.hashAnchorLink}>
@@ -44,12 +37,17 @@ const HashAnchor = ({ children, id }: { children: React.ReactNode; id: string })
     </div>
 );
 
-export function H2({ children, atomicClasses, ...rest }: HeadingElement): JSX.Element {
+export function H2({
+    children,
+    ...rest
+}: React.DetailedHTMLProps<
+    React.HTMLAttributes<HTMLHeadingElement>,
+    HTMLHeadingElement
+>): JSX.Element {
     const id = generateSlug({ level: 'section', children });
-    const classes = classnames({ [`${atomicClasses}`]: atomicClasses, 'mt6 mb3': !atomicClasses });
 
     const contents = (
-        <Title {...rest} id={id} size={3} headingLevel={2} className={classes}>
+        <Title {...rest} id={id} size={3} headingLevel={2} className="mt6 mb3">
             {children}
         </Title>
     );