adds copytable to themebuilder

src/docs/docs-components/ThemeBuilder/CSSVariables/VariableTable.jsx

@@ -0,0 +1,21 @@
+import CopyTable from '../../CopyTable/Table';
+import React from 'react';
+import flatten from '../../../../components/Theme/utils/flatten.js';
+
+const VariableTable = (props) => {
+  const { theme } = props;
+  const flatTheme = flatten(theme);
+  const themeArray = Object.keys(flatTheme).map((key) => [`--theme-${key}`]);
+
+  return (
+    <CopyTable
+      title=""
+      header={['CSS variable']}
+      note="You can also use the following CSS variables to reference values from your theme in SCSS"
+      body={themeArray}
+      copyable={[(v) => `var(${v})`]}
+    />
+  );
+}
+
+export default VariableTable;

src/docs/docs-components/ThemeBuilder/NewTheme/NewTheme.jsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 
 import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { Unstyled } from '@storybook/blocks';
+import VariableTable from '../CSSVariables/VariableTable';
 import classes from './styles.module.scss';
 import darkTheme from '../../../../components/Theme/themes/dark';
 import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs';
@@ -40,6 +41,7 @@ body {
 }`}
       </SyntaxHighlighter>
     )}
+      <VariableTable theme={theme} />
     </div>
   );
 }