From c4bad24717dc8d10a69cf6b0faebb1cf40d22ef7 Mon Sep 17 00:00:00 2001
From: Jon McClure <jon.r.mcclure@gmail.com>
Date: Tue, 19 Sep 2023 12:49:44 +0100
Subject: [PATCH] adds copytable to themebuilder

---
 .../CSSVariables/VariableTable.jsx            | 21 +++++++++++++++++++
 .../ThemeBuilder/NewTheme/NewTheme.jsx        |  2 ++
 2 files changed, 23 insertions(+)
 create mode 100644 src/docs/docs-components/ThemeBuilder/CSSVariables/VariableTable.jsx

diff --git a/src/docs/docs-components/ThemeBuilder/CSSVariables/VariableTable.jsx b/src/docs/docs-components/ThemeBuilder/CSSVariables/VariableTable.jsx
new file mode 100644
index 00000000..6aad1a09
--- /dev/null
+++ b/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;
diff --git a/src/docs/docs-components/ThemeBuilder/NewTheme/NewTheme.jsx b/src/docs/docs-components/ThemeBuilder/NewTheme/NewTheme.jsx
index 4e2fca0e..efb5bd46 100644
--- a/src/docs/docs-components/ThemeBuilder/NewTheme/NewTheme.jsx
+++ b/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>
   );
 }