fix(sanity): support future UI tones (#7916)

sanity-io · Nov 29, 2024 · f5e85ae · f5e85ae
1 parent 481febd
commit f5e85ae
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 26 deletions.
diff --git a/packages/sanity/src/core/components/StatusButton.tsx b/packages/sanity/src/core/components/StatusButton.tsx
@@ -1,4 +1,3 @@
-import {useTheme} from '@sanity/ui'
 import {type ForwardedRef, forwardRef, type HTMLProps, type ReactNode, useMemo} from 'react'
 import {styled} from 'styled-components'
 
@@ -46,9 +45,8 @@ export const StatusButton = forwardRef(function StatusButton(
     tone,
     ...restProps
   } = props
-  const theme = useTheme()
-  const toneColor = tone && theme.sanity.color.solid[tone]
-  const dotStyle = useMemo(() => ({backgroundColor: toneColor?.enabled.bg}), [toneColor])
+
+  const dotStyle = useMemo(() => ({backgroundColor: `var(--card-badge-${tone}-dot-color)`}), [tone])
   const disabled = Boolean(disabledProp)
 
   return (

diff --git a/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.styled.tsx b/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.styled.tsx
@@ -1,6 +1,5 @@
-import {Card, type CardTone, Flex, rgba, studioTheme} from '@sanity/ui'
-import {useColorSchemeValue} from 'sanity'
-import {css, styled} from 'styled-components'
+import {Card, Flex} from '@sanity/ui'
+import {styled} from 'styled-components'
 
 export const RatioBox = styled(Card)`
   position: relative;
@@ -18,24 +17,17 @@ export const RatioBox = styled(Card)`
   }
 `
 
-export const Overlay = styled(Flex)<{
-  $tone: Exclude<CardTone, 'inherit'>
-}>(({$tone}) => {
-  const colorScheme = useColorSchemeValue()
-  const textColor = studioTheme.color[colorScheme][$tone].card.enabled.fg
-  const backgroundColor = rgba(studioTheme.color[colorScheme][$tone].card.enabled.bg, 0.8)
-
-  return css`
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    backdrop-filter: blur(10px);
-    color: ${$tone ? textColor : ''};
-    background-color: ${backgroundColor};
-  `
-})
+export const Overlay = styled(Card)`
+  display: flex;
+  justify-content: flex-end;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  backdrop-filter: blur(10px);
+  background-color: color-mix(in srgb, transparent, var(--card-bg-color) 80%);
+`
 
 export const FlexOverlay = styled(Flex)`
   position: absolute;

diff --git a/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.tsx b/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.tsx
@@ -94,7 +94,7 @@ function OverlayComponent({
   content: ReactNode
 }) {
   return (
-    <Overlay justify="flex-end" padding={3} $tone={cardTone}>
+    <Overlay padding={3} tone={cardTone}>
       <FlexOverlay direction="column" align="center" justify="center">
         {content}
       </FlexOverlay>