fix: display color scheme-specific styles

sanity-io · Jul 26, 2023 · f6e58fe · f6e58fe
1 parent a86764c
commit f6e58fe
Show file tree

Hide file tree

Showing 29 changed files with 512 additions and 398 deletions.
diff --git a/src/components/AssetMetadata/index.tsx b/src/components/AssetMetadata/index.tsx
@@ -63,32 +63,40 @@ const AssetMetadata = (props: Props) => {
         </Stack>
       </Box>
       {/* EXIF */}
-      {exif && (
-        <>
-          {/* Divider */}
-          <Box
-            marginY={4}
-            style={{
-              background: '#222',
-              height: '1px',
-              width: '100%'
-            }}
-          />
-          <Box>
-            <Stack space={3}>
-              {exif.ISO && <Row label="ISO" value={exif.ISO} />}
-              {exif.FNumber && <Row label="Aperture" value={`ƒ/${exif.FNumber}`} />}
-              {exif.FocalLength && <Row label="Focal length" value={`${exif.FocalLength}mm`} />}
-              {exif.ExposureTime && (
-                <Row label="Exposure time" value={`1/${1 / exif.ExposureTime}`} />
-              )}
-              {exif.DateTimeOriginal && (
-                <Row label="Original date" value={format(new Date(exif.DateTimeOriginal), 'PPp')} />
-              )}
-            </Stack>
-          </Box>
-        </>
-      )}
+      {exif &&
+        (exif.DateTimeOriginal ||
+          exif.FNumber ||
+          exif.FocalLength ||
+          exif.ExposureTime ||
+          exif.ISO) && (
+          <>
+            {/* Divider */}
+            <Box
+              marginY={4}
+              style={{
+                background: 'var(--card-border-color)',
+                height: '1px',
+                width: '100%'
+              }}
+            />
+            <Box>
+              <Stack space={3}>
+                {exif.ISO && <Row label="ISO" value={exif.ISO} />}
+                {exif.FNumber && <Row label="Aperture" value={`ƒ/${exif.FNumber}`} />}
+                {exif.FocalLength && <Row label="Focal length" value={`${exif.FocalLength}mm`} />}
+                {exif.ExposureTime && (
+                  <Row label="Exposure time" value={`1/${1 / exif.ExposureTime}`} />
+                )}
+                {exif.DateTimeOriginal && (
+                  <Row
+                    label="Original date"
+                    value={format(new Date(exif.DateTimeOriginal), 'PPp')}
+                  />
+                )}
+              </Stack>
+            </Box>
+          </>
+        )}
 
       {/* Asset actions */}
       <Box marginTop={5}>

diff --git a/src/components/Browser/index.tsx b/src/components/Browser/index.tsx
@@ -4,7 +4,7 @@ import {Asset, Tag} from '@types'
 import groq from 'groq'
 import React, {useEffect, useState} from 'react'
 import {useDispatch} from 'react-redux'
-import type {AssetSourceComponentProps, SanityDocument} from 'sanity'
+import {useColorScheme, type AssetSourceComponentProps, type SanityDocument} from 'sanity'
 import {TAG_DOCUMENT_NAME} from '../../constants'
 import {AssetBrowserDispatchProvider} from '../../contexts/AssetSourceDispatchContext'
 import useVersionedClient from '../../hooks/useVersionedClient'
@@ -132,6 +132,7 @@ const BrowserContent = ({onClose}: {onClose?: AssetSourceComponentProps['onClose
 
 const Browser = (props: Props) => {
   const client = useVersionedClient()
+  const {scheme} = useColorScheme()
 
   return (
     <ReduxProvider
@@ -140,7 +141,7 @@ const Browser = (props: Props) => {
       document={props?.document}
       selectedAssets={props?.selectedAssets}
     >
-      <ThemeProvider scheme="dark" theme={studioTheme}>
+      <ThemeProvider scheme={scheme} theme={studioTheme}>
         <ToastProvider>
           <AssetBrowserDispatchProvider onSelect={props?.onSelect}>
             <GlobalStyle />

diff --git a/src/components/CardAsset/index.tsx b/src/components/CardAsset/index.tsx
@@ -1,8 +1,18 @@
-import {hues} from '@sanity/color'
 import {CheckmarkCircleIcon, EditIcon, WarningFilledIcon} from '@sanity/icons'
-import {Box, Checkbox, Container, Flex, Spinner, Text, Tooltip} from '@sanity/ui'
+import {
+  Box,
+  Checkbox,
+  Container,
+  Flex,
+  Spinner,
+  Text,
+  Theme,
+  ThemeColorSchemeKey,
+  Tooltip
+} from '@sanity/ui'
 import React, {memo, MouseEvent, RefObject} from 'react'
 import {useDispatch} from 'react-redux'
+import {useColorScheme} from 'sanity'
 import styled, {css} from 'styled-components'
 import {PANEL_HEIGHT} from '../../constants'
 import {useAssetSourceActions} from '../../contexts/AssetSourceDispatchContext'
@@ -14,6 +24,7 @@ import imageDprUrl from '../../utils/imageDprUrl'
 import {isFileAsset, isImageAsset} from '../../utils/typeGuards'
 import FileIcon from '../FileIcon'
 import Image from '../Image'
+import {getSchemeColor} from '../../utils/getSchemeColor'
 
 type Props = {
   id: string
@@ -24,47 +35,49 @@ const CardWrapper = styled(Flex)`
   box-sizing: border-box;
   height: 100%;
   overflow: hidden;
-  padding: 2px;
   position: relative;
   width: 100%;
 `
 
-const CardContainer = styled(Flex)<{picked?: boolean; updating?: boolean}>`
-  border: 1px solid transparent;
-  height: 100%;
-  pointer-events: ${props => (props.updating ? 'none' : 'auto')};
-  position: relative;
-  transition: all 300ms;
-  user-select: none;
-  width: 100%;
+const CardContainer = styled(Flex)<{picked?: boolean; theme: Theme; updating?: boolean}>(
+  ({picked, theme, updating}) => {
+    return css`
+      border: 1px solid transparent;
+      height: 100%;
+      pointer-events: ${updating ? 'none' : 'auto'};
+      position: relative;
+      transition: all 300ms;
+      user-select: none;
+      width: 100%;
 
-  border: ${props =>
-    props.picked
-      ? `1px solid ${props.theme.sanity.color.spot.orange} !important`
-      : '1px solid inherit'};
+      border: ${picked
+        ? `1px solid ${theme.sanity.color.spot.orange} !important`
+        : '1px solid inherit'};
 
-  ${props =>
-    !props.updating &&
-    css`
-      @media (hover: hover) and (pointer: fine) {
-        &:hover {
-          border: 1px solid ${hues.gray[500].hex};
+      ${!updating &&
+      css`
+        @media (hover: hover) and (pointer: fine) {
+          &:hover {
+            border: 1px solid var(--card-border-color);
+          }
         }
-      }
-    `}
-`
-
-const ContextActionContainer = styled(Flex)`
-  cursor: ${props => (props.selected ? 'default' : 'pointer')};
-  height: ${PANEL_HEIGHT}px;
-  transition: all 300ms;
+      `}
+    `
+  }
+)
 
-  @media (hover: hover) and (pointer: fine) {
-    &:hover {
-      background: ${hues.gray[950].hex};
+const ContextActionContainer = styled(Flex)(({scheme}: {scheme: ThemeColorSchemeKey}) => {
+  return css`
+    cursor: pointer;
+    height: ${PANEL_HEIGHT}px;
+    transition: all 300ms;
+    @media (hover: hover) and (pointer: fine) {
+      &:hover {
+        background: ${getSchemeColor(scheme, 'bg')};
+      }
     }
-  }
-`
+  `
+})
 
 const StyledWarningOutlineIcon = styled(WarningFilledIcon)(({theme}) => {
   return {
@@ -75,6 +88,8 @@ const StyledWarningOutlineIcon = styled(WarningFilledIcon)(({theme}) => {
 const CardAsset = (props: Props) => {
   const {id, selected} = props
 
+  const {scheme} = useColorScheme()
+
   // Refs
   const shiftPressed: RefObject<boolean> = useKeyPress('shift')
 
@@ -134,7 +149,7 @@ const CardAsset = (props: Props) => {
   const opacityPreview = selected || updating ? 0.25 : 1
 
   return (
-    <CardWrapper>
+    <CardWrapper padding={1}>
       <CardContainer direction="column" picked={picked} updating={item.updating}>
         {/* Image */}
         <Box
@@ -152,6 +167,7 @@ const CardAsset = (props: Props) => {
             {isImageAsset(asset) && (
               <Image
                 draggable={false}
+                scheme={scheme}
                 showCheckerboard={!isOpaque}
                 src={imageDprUrl(asset, {height: 250, width: 250})}
                 style={{
@@ -205,6 +221,7 @@ const CardAsset = (props: Props) => {
           align="center"
           onClick={handleContextActionClick}
           paddingX={1}
+          scheme={scheme}
           style={{opacity: opacityContainer}}
         >
           {onSelect ? (

diff --git a/src/components/CardUpload/index.tsx b/src/components/CardUpload/index.tsx
@@ -1,15 +1,16 @@
-import {hues} from '@sanity/color'
 import {CloseIcon} from '@sanity/icons'
 import {Box, Button, Flex, Text} from '@sanity/ui'
 import filesize from 'filesize'
 import React from 'react'
 import {useDispatch} from 'react-redux'
+import {useColorScheme} from 'sanity'
 import styled from 'styled-components'
 import {PANEL_HEIGHT} from '../../constants'
 import useTypedSelector from '../../hooks/useTypedSelector'
 import {selectUploadById, uploadsActions} from '../../modules/uploads'
 import FileIcon from '../FileIcon'
 import Image from '../Image'
+import {getSchemeColor} from '../../utils/getSchemeColor'
 
 type Props = {
   id: string
@@ -19,14 +20,15 @@ const CardWrapper = styled(Flex)`
   box-sizing: border-box;
   height: 100%;
   overflow: hidden;
-  padding: 2px;
   position: relative;
   width: 100%;
 `
 
 const CardUpload = (props: Props) => {
   const {id} = props
 
+  const {scheme} = useColorScheme()
+
   // Redux
   const dispatch = useDispatch()
   const item = useTypedSelector(state => selectUploadById(state, id))
@@ -59,12 +61,12 @@ const CardUpload = (props: Props) => {
   }
 
   return (
-    <CardWrapper>
+    <CardWrapper padding={1}>
       <Flex
         direction="column"
         flex={1}
         style={{
-          background: hues.gray[950].hex,
+          background: getSchemeColor(scheme, 'bg'),
           border: '1px solid transparent',
           height: '100%',
           position: 'relative'
@@ -73,7 +75,7 @@ const CardUpload = (props: Props) => {
         {/* Progress bar */}
         <div
           style={{
-            background: hues.gray[600].hex,
+            background: 'var(--card-fg-color)',
             bottom: 0,
             height: '1px',
             left: 0,
@@ -89,6 +91,7 @@ const CardUpload = (props: Props) => {
           {item.assetType === 'image' && item?.objectUrl && (
             <Image
               draggable={false}
+              scheme={scheme}
               src={item.objectUrl}
               style={{
                 opacity: 0.4

diff --git a/src/components/Controls/index.tsx b/src/components/Controls/index.tsx
@@ -1,4 +1,3 @@
-import {hues} from '@sanity/color'
 import {Box, Button, Flex, Inline, useMediaIndex} from '@sanity/ui'
 import React from 'react'
 import {useDispatch} from 'react-redux'
@@ -40,7 +39,7 @@ const Controls = () => {
     <Box
       paddingY={2}
       style={{
-        borderBottom: `1px solid ${hues.gray?.[900].hex}`,
+        borderBottom: '1px solid var(--card-border-color)',
         zIndex: 2
       }}
     >

diff --git a/src/components/DialogAssetEdit/index.tsx b/src/components/DialogAssetEdit/index.tsx
@@ -6,7 +6,7 @@ import groq from 'groq'
 import React, {ReactNode, useCallback, useEffect, useRef, useState} from 'react'
 import {SubmitHandler, useForm} from 'react-hook-form'
 import {useDispatch} from 'react-redux'
-import {WithReferringDocuments, useDocumentStore} from 'sanity'
+import {WithReferringDocuments, useColorScheme, useDocumentStore} from 'sanity'
 import {assetFormSchema} from '../../formSchema'
 import useTypedSelector from '../../hooks/useTypedSelector'
 import useVersionedClient from '../../hooks/useVersionedClient'
@@ -40,6 +40,7 @@ const DialogAssetEdit = (props: Props) => {
   } = props
 
   const client = useVersionedClient()
+  const {scheme} = useColorScheme()
 
   const documentStore = useDocumentStore()
 
@@ -338,7 +339,7 @@ const DialogAssetEdit = (props: Props) => {
                           error={errors?.description?.message}
                           label="Description"
                           name="description"
-                          rows={3}
+                          rows={5}
                           value={currentAsset?.description}
                         />
                       </Stack>
@@ -375,6 +376,7 @@ const DialogAssetEdit = (props: Props) => {
             {isImageAsset(currentAsset) && (
               <Image
                 draggable={false}
+                scheme={scheme}
                 showCheckerboard={!currentAsset?.metadata?.isOpaque}
                 src={imageDprUrl(currentAsset, {height: 600, width: 600})}
               />

diff --git a/src/components/FileIcon/index.tsx b/src/components/FileIcon/index.tsx
@@ -1,8 +1,8 @@
-import {Box, Flex} from '@sanity/ui'
+import {Box, Flex, Theme} from '@sanity/ui'
 import React, {MouseEvent} from 'react'
 import {defaultStyles, FileIcon as ReactFileIcon} from 'react-file-icon'
 import type {DefaultExtensionType} from 'react-file-icon'
-import styled from 'styled-components'
+import styled, {css} from 'styled-components'
 
 type Props = {
   extension?: string
@@ -11,13 +11,15 @@ type Props = {
 }
 
 // Force react-file-icon styles
-const Container = styled(Box)`
-  text {
-    font-family: ${props => props.theme.sanity.fonts.text.family} !important;
-    font-size: 8px !important;
-    font-weight: 500 !important;
-  }
-`
+const Container = styled(Box)(({theme}: {theme: Theme}) => {
+  return css`
+    text {
+      font-family: ${theme.sanity.fonts.text.family} !important;
+      font-size: 8px !important;
+      font-weight: 500 !important;
+    }
+  `
+})
 
 const FileIcon = (props: Props) => {
   const {extension, onClick, width} = props