refactor: docs app preview has dark background when the theme is set to rebrand-dark

packages/__docs__/src/App/index.tsx

@@ -81,6 +81,9 @@ import type { NewComponentTypes } from '@instructure/ui-themes'
 import { FocusRegion } from '@instructure/ui-a11y-utils'
 
 type AppContextType = {
+  /**
+   * The ID of the currently selected theme.
+   */
   themeKey: keyof MainDocsData['themes']
   themes: MainDocsData['themes']
   library?: LibraryOptions

packages/__docs__/src/Preview/props.ts

@@ -53,7 +53,6 @@ type PreviewProps = PreviewOwnProps & WithStyleProps<PreviewTheme, PreviewStyle>
 type PreviewTheme = {
   padding: Spacing['small']
   borderRadius: Border['radiusMedium']
-  backgroundColor: Colors['contrasts']['white1010']
   borderWidth: Border['widthSmall']
   borderColor: string
   fontFamilyError: 'Menlo, Consolas, Monaco, "Andale Mono", monospace'

packages/__docs__/src/Preview/styles.ts

@@ -37,8 +37,7 @@ const generateStyle = (
   componentTheme: PreviewTheme,
   props: PreviewProps
 ): PreviewStyle => {
-  const { fullscreen, frameless } = props
-
+  const { fullscreen, frameless, themeKey } = props
   const previewStyle = {
     boxSizing: 'border-box',
     margin: 0,
@@ -48,7 +47,7 @@ const generateStyle = (
     borderStyle: 'solid',
     borderColor: componentTheme.borderColor,
     borderRadius: componentTheme.borderRadius,
-    backgroundColor: componentTheme.backgroundColor,
+    backgroundColor: themeKey === 'rebrand-dark' ? '#000000' : '#FFFFFF',
     ...(fullscreen && {
       position: 'fixed',
       width: '100vw',

packages/__docs__/src/Preview/theme.ts

@@ -36,7 +36,6 @@ const generateComponentTheme = (theme: Theme): PreviewTheme => {
   return {
     padding: spacing?.small,
     borderRadius: borders?.radiusMedium,
-    backgroundColor: colors?.contrasts?.white1010,
     borderWidth: borders?.widthSmall,
     borderColor: '#aaaaaa',
     fontFamilyError: 'Menlo, Consolas, Monaco, "Andale Mono", monospace',