fix: dark-mode checkerboard for images

sanity-io · Sep 14, 2022 · dc8a1c8 · dc8a1c8
1 parent 90c2bb9
commit dc8a1c8
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 24 deletions.
diff --git a/packages/sanity/src/form/components/Checkerboard.tsx b/packages/sanity/src/form/components/Checkerboard.tsx
diff --git a/packages/sanity/src/form/inputs/files/ImageToolInput/ImageToolInput.tsx b/packages/sanity/src/form/inputs/files/ImageToolInput/ImageToolInput.tsx
@@ -5,8 +5,6 @@ import styled from 'styled-components'
 import {ChangeIndicator} from '../../../../components/changeIndicators'
 import {FormField} from '../../../components/formField'
 import {set} from '../../../patch'
-import {Checkerboard} from '../../../components/Checkerboard'
-import {withFocusRing} from '../../../components/withFocusRing'
 import {RatioBox} from '../common/RatioBox'
 import {EMPTY_ARRAY} from '../../../utils/empty'
 import type {ObjectInputProps} from '../../../types'
@@ -33,8 +31,6 @@ const DEFAULT_VALUE: Partial<Image> = {
   hotspot: DEFAULT_HOTSPOT,
 }
 
-const CheckerboardWithFocusRing = withFocusRing(Checkerboard)
-
 const Placeholder = styled.div`
   min-height: 6em;
 `
@@ -120,7 +116,13 @@ export function ImageToolInput(props: ImageToolInputProps) {
       __unstable_presence={presence}
     >
       <div>
-        <CheckerboardWithFocusRing tabIndex={0} ref={elementProps.ref} onFocus={handleFocus}>
+        <Card
+          __unstable_checkered
+          __unstable_focusRing
+          tabIndex={0}
+          ref={elementProps.ref}
+          onFocus={handleFocus}
+        >
           <ChangeIndicator
             path={path.concat(HOTSPOT_PATH)}
             hasFocus={focusPath[0] === 'hotspot'}
@@ -152,7 +154,7 @@ export function ImageToolInput(props: ImageToolInputProps) {
               )}
             </RatioBox>
           </ChangeIndicator>
-        </CheckerboardWithFocusRing>
+        </Card>
         <Box marginTop={3}>
           <Grid columns={PREVIEW_ASPECT_RATIOS.length} gap={1}>
             {PREVIEW_ASPECT_RATIOS.map(([title, ratio]) => (
@@ -162,7 +164,7 @@ export function ImageToolInput(props: ImageToolInputProps) {
                 </Heading>
                 <Box marginTop={2}>
                   <RatioBox ratio={ratio}>
-                    <Checkerboard>
+                    <Card __unstable_checkered>
                       {!isImageLoading && image ? (
                         <HotspotImage
                           aspectRatio={ratio}
@@ -174,7 +176,7 @@ export function ImageToolInput(props: ImageToolInputProps) {
                       ) : (
                         <Placeholder />
                       )}
-                    </Checkerboard>
+                    </Card>
                   </RatioBox>
                 </Box>
               </div>

diff --git a/packages/sanity/src/form/studio/DefaultAssetSource/AssetThumb.tsx b/packages/sanity/src/form/studio/DefaultAssetSource/AssetThumb.tsx
@@ -1,11 +1,10 @@
 import type {Subscription} from 'rxjs'
 import React, {useState, useEffect, useRef, useCallback, useMemo} from 'react'
 import styled from 'styled-components'
-import {Button, useToast} from '@sanity/ui'
+import {Button, Card, useToast} from '@sanity/ui'
 import {Asset as AssetType} from '@sanity/types'
 import {useClient} from '../../../hooks'
 import {FullscreenSpinner} from '../../components/FullscreenSpinner'
-import {Checkerboard} from '../../components/Checkerboard'
 import {AssetUsageDialog} from './AssetUsageDialog'
 import {AssetMenu} from './AssetMenu'
 import {AssetMenuAction} from './types'
@@ -35,7 +34,7 @@ const Image = styled.img`
   object-fit: contain;
 `
 
-const Container = styled(Checkerboard)`
+const Container = styled(Card)`
   position: relative;
   z-index: 1;
   padding-bottom: 100%;
@@ -163,7 +162,7 @@ export const AssetThumb = React.memo(function AssetThumb(props: AssetProps) {
         padding={0}
         style={{padding: 2}}
       >
-        <Container>
+        <Container __unstable_checkered>
           <Image alt={originalFilename} src={imageUrl} onClick={onClick} data-id={_id} />
           {isDeleting && <FullscreenSpinner />}
         </Container>