docs: docs component default themes not respecting theme change

INSTUI-4497

Author: HerrTopi

packages/__docs__/src/ComponentTheme/index.tsx

@@ -45,10 +45,7 @@ class ComponentTheme extends Component<ComponentThemeProps> {
     colorPrimitives: object
   ) {
     if (!value) {
-      return <code>$aposundefined$apos</code>
-    }
-    if (typeof value === 'object') {
-      return <code>{JSON.stringify(value)}</code>
+      return <code>ERROR - possible bug</code>
     }
     if (typeof value === 'object') {
       return <code>{JSON.stringify(value)}</code>

packages/__docs__/src/Document/index.tsx

@@ -90,8 +90,11 @@ class Document extends Component<DocumentProps, DocumentState> {
     }
   }
 
-  componentDidUpdate() {
+  componentDidUpdate(prevProps: typeof this.props) {
     this.props.makeStyles?.()
+    if (this.props.themeVariables?.key !== prevProps.themeVariables?.key) {
+      this.fetchGenerateComponentTheme()
+    }
   }
 
   handleDetailsTabChange: TabsProps['onRequestTabChange'] = (

packages/__docs__/src/Document/props.ts

@@ -36,7 +36,7 @@ type DocDataType = DocData & { legacyGitBranch?: string }
 type DocumentOwnProps = {
   doc: DocDataType
   description: string
-  themeVariables?: BaseThemeVariables
+  themeVariables?: BaseThemeVariables & { key: string }
   repository?: string
   layout?: 'small' | 'medium' | 'large' | 'x-large'
 }