fixs for storybook (#1382)

Author: lukasoppermann

docs/storybook/stories/Motion/Functional.stories.tsx

@@ -87,7 +87,7 @@ export const Functional = () => {
               <CubicBezier bezier={item.value} />
               <p>[{item.value.join(', ')}]</p>
               <InlineCode value={item.name} cssVar={true} copyClipboard />
-              <p style={{fontSize: 12, textAlign: 'center', color: '#666'}}>{item.description}</p>
+              <p style={{fontSize: 12, textAlign: 'center', color: 'var(--fgColor-muted)'}}>{item.description}</p>
             </Card>
           ))}
       </div>

docs/storybook/stories/StorybookComponents/CSSTokenSwatch/CSSTokenShadowSwatch.tsx

@@ -11,15 +11,27 @@ export const CSSTokenShadowSwatch = ({color, shadow, borderColor}: CSSTokenSwatc
   const ref = React.useRef<HTMLDivElement | null>(null)
   const [value, setValue] = React.useState<string | null>(null)
 
-  React.useEffect(() => {
+  const recalculate = React.useCallback(() => {
     if (ref.current === null) {
       return
     }
-
     const style = getComputedStyle(ref.current)
     const rgb = style.getPropertyValue('box-shadow')
     setValue(rgb)
-  }, [shadow])
+  }, [])
+
+  React.useEffect(() => {
+    recalculate()
+  }, [shadow, recalculate])
+
+  React.useEffect(() => {
+    const observer = new MutationObserver(recalculate)
+    observer.observe(document.body, {
+      attributes: true,
+      attributeFilter: ['data-color-mode', 'data-light-theme', 'data-dark-theme'],
+    })
+    return () => observer.disconnect()
+  }, [recalculate])
 
   if (shadow === undefined) {
     return null

docs/storybook/stories/StorybookComponents/CSSTokenSwatch/CSSTokenSwatch.tsx

@@ -30,15 +30,27 @@ export const CSSTokenSwatch = ({color, prevColor, shadow}: CSSTokenSwatchProps)
   const ref = React.useRef<HTMLDivElement | null>(null)
   const [hex, setHex] = React.useState<string | null>(null)
 
-  React.useEffect(() => {
+  const recalculate = React.useCallback(() => {
     if (ref.current === null) {
       return
     }
-
     const style = getComputedStyle(ref.current)
     const rgb = style.getPropertyValue('background-color')
     setHex(rgb && rgb !== '' ? toHex(rgb) : null)
-  }, [color])
+  }, [])
+
+  React.useEffect(() => {
+    recalculate()
+  }, [color, recalculate])
+
+  React.useEffect(() => {
+    const observer = new MutationObserver(recalculate)
+    observer.observe(document.body, {
+      attributes: true,
+      attributeFilter: ['data-color-mode', 'data-light-theme', 'data-dark-theme'],
+    })
+    return () => observer.disconnect()
+  }, [recalculate])
 
   if (color === undefined || color === '') {
     return null

docs/storybook/stories/StorybookComponents/ColorScale/ColorScale.tsx

@@ -12,7 +12,7 @@ export const ColorScale = ({color, border}: ColorScaleProps) => {
   const [hex, setHex] = React.useState<string | null>(null)
   const [textColor, setTextColor] = React.useState<string>('currentColor')
 
-  React.useEffect(() => {
+  const recalculate = React.useCallback(() => {
     setTimeout(() => {
       if (ref.current === null) {
         return
@@ -23,7 +23,20 @@ export const ColorScale = ({color, border}: ColorScaleProps) => {
       setHex(asHex)
       setTextColor(asHex ? readableColor(asHex) : 'currentColor')
     }, 0)
-  }, [color])
+  }, [])
+
+  React.useEffect(() => {
+    recalculate()
+  }, [color, recalculate])
+
+  React.useEffect(() => {
+    const observer = new MutationObserver(recalculate)
+    observer.observe(document.body, {
+      attributes: true,
+      attributeFilter: ['data-color-mode', 'data-light-theme', 'data-dark-theme'],
+    })
+    return () => observer.disconnect()
+  }, [recalculate])
 
   return (
     <div

docs/storybook/stories/StorybookComponents/ColorScale/ColorScaleByName.tsx

@@ -12,7 +12,7 @@ const ColorBlock = ({color}: {color: string}) => {
   const [hex, setHex] = React.useState<string | null>(null)
   const [textColor, setTextColor] = React.useState<string>('currentColor')
 
-  React.useEffect(() => {
+  const recalculate = React.useCallback(() => {
     setTimeout(() => {
       if (ref.current === null) {
         return
@@ -23,7 +23,20 @@ const ColorBlock = ({color}: {color: string}) => {
       setHex(asHex)
       setTextColor(asHex ? readableColor(asHex) : 'currentColor')
     }, 0)
-  }, [color])
+  }, [])
+
+  React.useEffect(() => {
+    recalculate()
+  }, [color, recalculate])
+
+  React.useEffect(() => {
+    const observer = new MutationObserver(recalculate)
+    observer.observe(document.body, {
+      attributes: true,
+      attributeFilter: ['data-color-mode', 'data-light-theme', 'data-dark-theme'],
+    })
+    return () => observer.disconnect()
+  }, [recalculate])
 
   return (
     <div

docs/storybook/stories/VisualRegressionTesting/AllColorsTable.stories.tsx

@@ -45,7 +45,7 @@ export const AllThemesInOneTable = () => {
       </Stack>
       <Stack>
         {data.map(({id}) => (
-          <Stack direction="horizontal">
+          <Stack key={id} direction="horizontal">
             <Stack.Item className={styles.name}>
               <InlineCode value={id} />
             </Stack.Item>