Theme designer: minor fixes (microsoft#23741)

* export to codesandbox opens new page

* update defaults

* extracting string constants from render

* add debouncing to keycolor

* extend debounce to all entries in the form

* remove slider value

* Update ExportLink.tsx

packages/react-components/theme-designer/src/components/AccessibilityChecker/AccessibilityChecker.stories.tsx

@@ -1,9 +1,9 @@
 import { AccessibilityChecker } from './AccessibilityChecker';
 import { getBrandTokensFromPalette } from '../../utils/getBrandTokensFromPalette';
-import { createDarkTheme } from '@fluentui/react-components';
+import { createLightTheme } from '@fluentui/react-components';
 export default { component: AccessibilityChecker };
 
 const brand = getBrandTokensFromPalette('#006bc7');
-const lightTheme = createDarkTheme(brand);
+const lightTheme = createLightTheme(brand);
 
 export const Default = { args: { theme: lightTheme } };

packages/react-components/theme-designer/src/components/ColorTokens/ColorTokens.stories.tsx

@@ -1,9 +1,7 @@
 import { ColorTokens } from './ColorTokens';
 import { getBrandTokensFromPalette } from '../../utils/getBrandTokensFromPalette';
-import { createDarkTheme } from '@fluentui/react-components';
 export default { component: ColorTokens };
 
 const brand = getBrandTokensFromPalette('#006bc7');
-const lightTheme = createDarkTheme(brand);
 
-export const Default = { args: { theme: lightTheme } };
+export const Default = { args: { brand: brand, isDark: false } };

packages/react-components/theme-designer/src/components/Content/Content.stories.tsx

@@ -1,10 +1,9 @@
 import { Content } from './Content';
 import { getBrandTokensFromPalette } from '../../utils/getBrandTokensFromPalette';
-import { createLightTheme, createDarkTheme } from '@fluentui/react-components';
+import { createLightTheme } from '@fluentui/react-components';
 export default { component: Content };
 
 const brand = getBrandTokensFromPalette('#006BC7');
 const lightTheme = createLightTheme(brand);
-const darkTheme = createDarkTheme(brand);
 
-export const Default = { args: { brand: brand, darkTheme: darkTheme, lightTheme: lightTheme } };
+export const Default = { args: { brand: brand, theme: lightTheme, isDark: false } };