refactor: updating theme colors to csf3 and mdx updated

Author: georgewrmarshall

docs/ThemeColors.mdx

@@ -1,29 +1,26 @@
-import { Meta, Canvas, Story } from '@storybook/addon-docs';
+import { Meta, Canvas } from '@storybook/addon-docs/blocks';
+import * as ThemeColorStories from './ThemeColors.stories';
 
-<Meta title="Design Tokens/Theme Colors" />
+<Meta title="Design Tokens/Theme Colors" of={ThemeColorStories.default} />
 
-# Theme Colors (second tier)
+# Theme Colors (Second Tier)
 
-Theme colors take the first tier [**Brand Colors**](/docs/colors-brandcolors--default-story) and start applying them to high-level applications within the UI. They are considered second tier tokens and can be used in the code directly. Theme colors should be used liberally throughout the codebase and create theme compatibility in your components.
+Theme colors are derived from the first-tier [**brand colors**](/docs/colors-brandcolors--docs). They are applied to high-level applications within the UI and are considered second-tier tokens. These colors can be used directly in the code and should be used liberally throughout the codebase to ensure theme compatibility and accessibility in your components.
 
 - [Light Theme Colors](#light-theme-colors)
 - [Dark Theme Colors](#dark-theme-colors)
 
 ## Light Theme Colors
 
-Light theme colors to be used in the styles for MetaMask UI.
+The light theme colors are designed to be used in the styles for MetaMask UI when the light theme is active
 
-<Canvas>
-  <Story id="colors-themecolors--light-theme-colors" />
-</Canvas>
+<Canvas of={ThemeColorStories.LightThemeColors} />
 
 ## Dark Theme Colors
 
-Dark theme colors for MetaMask UI. They have the same name as Light Theme Colors but different values. If you are using the Light Theme Colors for their intended purpose your UI will be dark theme compatible.
+The dark theme colors are designed for MetaMask UI when the dark theme is active. They have the same names as the light theme colors but different values. If you are using the light theme colors for their intended purpose, your UI will automatically be compatible with the dark theme.
 
-<Canvas>
-  <Story id="colors-themecolors--dark-theme-colors" />
-</Canvas>
+<Canvas of={ThemeColorStories.DarkThemeColors} />
 
 ## References
 

docs/ThemeColors.stories.tsx

@@ -1,11 +1,8 @@
 import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-
+import tokens from '../src/figma/tokens.json';
 import { ColorSwatchGroup } from './components';
 import README from './ThemeColors.mdx';
 
-import tokens from '../src/figma/tokens.json';
-
 export default {
   title: 'Colors/ThemeColors',
   component: ColorSwatchGroup,
@@ -14,53 +11,42 @@ export default {
       page: README,
     },
   },
-} as Meta<typeof ColorSwatchGroup>;
-
-const Template: StoryFn<typeof ColorSwatchGroup> = (args) => {
-  return (
-    <>
-      <ColorSwatchGroup {...args} />
-    </>
-  );
-};
-
-export const LightThemeColors = Template.bind({});
-
-LightThemeColors.args = {
-  swatchData: tokens.light.colors,
-  borderColor: tokens.light.colors.border.muted.value,
-  textBackgroundColor: tokens.light.colors.background.default.value,
-  textColor: tokens.light.colors.text.default.value,
 };
 
-export const DarkThemeColors = Template.bind({});
-
-DarkThemeColors.args = {
-  swatchData: tokens.dark.colors,
-  borderColor: tokens.dark.colors.border.muted.value,
-  textBackgroundColor: tokens.dark.colors.background.default.value,
-  textColor: tokens.dark.colors.text.default.value,
-};
-
-DarkThemeColors.parameters = {
-  backgrounds: {
-    default: 'dark',
-    values: [
-      { name: 'dark', value: tokens.dark.colors.background.default.value },
-    ],
+export const LightThemeColors = {
+  render: () => <ColorSwatchGroup {...LightThemeColors.args} />,
+  args: {
+    swatchData: tokens.light.colors,
+    borderColor: tokens.light.colors.border.muted.value,
+    textBackgroundColor: tokens.light.colors.background.default.value,
+    textColor: tokens.light.colors.text.default.value,
   },
 };
 
-DarkThemeColors.decorators = [
-  (Story) => (
+export const DarkThemeColors = {
+  render: () => (
     <div
       style={{
         backgroundColor: tokens.dark.colors.background.default.value,
         margin: '-1rem',
         padding: '1rem',
       }}
     >
-      <Story />
+      <ColorSwatchGroup {...DarkThemeColors.args} />
     </div>
   ),
-];
+  args: {
+    swatchData: tokens.dark.colors,
+    borderColor: tokens.dark.colors.border.muted.value,
+    textBackgroundColor: tokens.dark.colors.background.default.value,
+    textColor: tokens.dark.colors.text.default.value,
+  },
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+      values: [
+        { name: 'dark', value: tokens.dark.colors.background.default.value },
+      ],
+    },
+  },
+};