sanity-plugin-media 2.2.1 → 2.2.2

package/src/styled/react-select/creatable.tsx

@@ -1,101 +1,98 @@
-import {black, hues, white} from '@sanity/color'
 import {AddIcon, ChevronDownIcon, CloseIcon} from '@sanity/icons'
-import {Box, Card, Flex, studioTheme, Text} from '@sanity/ui'
+import {Box, Card, Flex, rem, studioTheme, Text, ThemeColorSchemeKey} from '@sanity/ui'
 import React from 'react'
 import {components, StylesConfig} from 'react-select'
 import {Virtuoso} from 'react-virtuoso'
+import {getSchemeColor} from '../../utils/getSchemeColor'
 
-const themeDarkPrimaryBlue = studioTheme?.color?.dark?.primary?.spot?.blue
-const themeDarkPrimaryGray = studioTheme?.color?.dark?.primary?.spot?.gray
-const themeRadius = studioTheme?.radius
-const themeSpace = studioTheme?.space
+const {radius: themeRadius, space: themeSpace} = studioTheme
 
-export const reactSelectStyles: StylesConfig<
-  {
-    label: string
-    value: string
-  },
-  true
-> = {
-  control: (styles, {isDisabled, isFocused}) => {
-    let boxShadow = `inset 0 0 0 1px ${hues.gray[900].hex}`
-    if (isFocused) {
-      boxShadow = `inset 0 0 0 1px ${hues.gray[900].hex}, 0 0 0 1px var(--card-bg-color), 0 0 0 3px var(--card-focus-ring-color) !important`
-    }
+export const reactSelectStyles = (scheme: ThemeColorSchemeKey): StylesConfig => {
+  return {
+    control: (styles, {isFocused}) => {
+      let boxShadow = `inset 0 0 0 1px var(--card-border-color)`
+      if (isFocused) {
+        boxShadow = `inset 0 0 0 1px ${getSchemeColor(scheme, 'inputEnabledBorder')},
+        0 0 0 1px var(--card-bg-color),
+        0 0 0 3px var(--card-focus-ring-color) !important`
+      }
 
-    return {
+      return {
+        ...styles,
+        backgroundColor: 'var(--card-bg-color)',
+        color: 'inherit',
+        border: 'none',
+        borderRadius: themeRadius[1],
+        boxShadow,
+        margin: 0,
+        minHeight: '35px',
+        outline: 'none',
+        padding: rem(themeSpace[1]),
+        transition: 'none',
+        '&:hover': {
+          boxShadow: `inset 0 0 0 1px ${getSchemeColor(scheme, 'inputHoveredBorder')}`
+        }
+      }
+    },
+    indicatorsContainer: (styles, {isDisabled}) => ({
+      ...styles,
+      opacity: isDisabled ? 0.25 : 1
+    }),
+    input: styles => ({
+      ...styles,
+      color: 'var(--card-fg-color)',
+      fontFamily: studioTheme.fonts.text.family,
+      marginLeft: rem(themeSpace[2])
+    }),
+    menuList: styles => ({
+      ...styles
+    }),
+    multiValue: (styles, {isDisabled}) => ({
+      ...styles,
+      backgroundColor: getSchemeColor(scheme, 'mutedHoveredBg'),
+      borderRadius: themeRadius[2],
+      opacity: isDisabled ? 0.5 : 1
+    }),
+    multiValueLabel: () => ({
+      color: getSchemeColor(scheme, 'mutedHoveredFg'),
+      fontSize: 'inherit',
+      padding: 0
+    }),
+    multiValueRemove: styles => ({
+      ...styles,
+      borderTopLeftRadius: 0,
+      borderBottomLeftRadius: 0,
+      svg: {color: getSchemeColor(scheme, 'mutedHoveredFg')},
+      '&:hover': {
+        backgroundColor: getSchemeColor(scheme, 'mutedSelectedBg')
+      }
+    }),
+    noOptionsMessage: styles => ({
+      ...styles,
+      fontFamily: studioTheme.fonts.text.family,
+      lineHeight: '1em'
+    }),
+    option: (styles, {isFocused}) => ({
       ...styles,
-      background: isDisabled
-        ? studioTheme.color.dark.default.input.default.disabled.bg
-        : 'transparent',
-      color: white.hex,
-      border: 'none',
-      borderRadius: themeRadius[1],
-      boxShadow,
-      minHeight: '35px',
-      outline: 'none',
-      transition: 'none',
+      backgroundColor: isFocused ? getSchemeColor(scheme, 'spotBlue') : 'transparent',
+      borderRadius: themeRadius[2],
+      color: isFocused ? getSchemeColor(scheme, 'bg') : 'inherit',
+      padding: `${rem(themeSpace[1])} ${rem(themeSpace[2])}`,
       '&:hover': {
-        boxShadow: `inset 0 0 0 1px ${studioTheme.color.dark.default.input.default.hovered.border}`
+        backgroundColor: getSchemeColor(scheme, 'spotBlue'),
+        color: getSchemeColor(scheme, 'bg')
       }
-    }
-  },
-  indicatorsContainer: (styles, {isDisabled}) => ({
-    ...styles,
-    opacity: isDisabled ? 0.25 : 1
-  }),
-  input: styles => ({
-    ...styles,
-    color: white.hex,
-    fontFamily: studioTheme.fonts.text.family,
-    marginLeft: themeSpace[2]
-  }),
-  menuList: styles => ({
-    ...styles
-  }),
-  multiValue: (styles, {isDisabled}) => ({
-    ...styles,
-    backgroundColor: themeDarkPrimaryGray,
-    borderRadius: themeRadius[2],
-    opacity: isDisabled ? 0.5 : 1
-  }),
-  multiValueRemove: styles => ({
-    ...styles,
-    paddingLeft: 0,
-    '&:hover': {
-      background: 'transparent',
-      color: 'inherit'
-    }
-  }),
-  noOptionsMessage: styles => ({
-    ...styles,
-    fontFamily: studioTheme.fonts.text.family,
-    lineHeight: '1em'
-  }),
-  option: (styles, {isFocused}) => ({
-    ...styles,
-    backgroundColor: isFocused ? themeDarkPrimaryBlue : 'transparent',
-    borderRadius: themeRadius[2],
-    color: isFocused ? black.hex : 'inherit',
-    fontFamily: studioTheme.fonts.text.family,
-    padding: '4px 8px', // TODO: use theme value
-    '&:hover': {
-      backgroundColor: themeDarkPrimaryBlue,
-      color: black.hex
-    }
-  }),
-  placeholder: styles => ({
-    ...styles,
-    fontFamily: studioTheme.fonts.text.family,
-    marginLeft: themeSpace[2]
-  }),
-  valueContainer: styles => ({
-    ...styles,
-    marginBottom: themeSpace[0],
-    marginLeft: themeSpace[1],
-    marginTop: themeSpace[0],
-    padding: 0
-  })
+    }),
+    placeholder: styles => ({
+      ...styles,
+      marginLeft: rem(themeSpace[2])
+    }),
+    valueContainer: styles => ({
+      ...styles,
+      margin: 0,
+      padding: 0
+    })
+  }
 }
 
 const DropdownIndicator = (props: any) => {
@@ -147,8 +144,8 @@ const MenuList = (props: any) => {
 
 const MultiValueLabel = (props: any) => {
   return (
-    <Box paddingLeft={1} paddingRight={0} paddingY={1}>
-      <Text size={2} weight="medium">
+    <Box padding={2} paddingRight={1}>
+      <Text size={1} weight="medium">
         <components.MultiValueLabel {...props} />
       </Text>
     </Box>

package/src/styled/react-select/single.tsx

@@ -1,92 +1,95 @@
-import {black, hues, white} from '@sanity/color'
 import {CloseIcon} from '@sanity/icons'
-import {Box, Card, studioTheme, Text} from '@sanity/ui'
+import {Box, Card, rem, studioTheme, Text, ThemeColorSchemeKey} from '@sanity/ui'
 import React from 'react'
 import {components, StylesConfig} from 'react-select'
 import {Virtuoso} from 'react-virtuoso'
+import {getSchemeColor} from '../../utils/getSchemeColor'
 
-const themeDarkPrimaryBlue = studioTheme?.color?.dark?.primary?.spot?.blue
-const themeDarkDefaultBaseBg = studioTheme?.color?.dark?.default?.base?.bg
-const themeRadius = studioTheme?.radius
-const themeSpace = studioTheme?.space
-const themeTextSizes = studioTheme?.fonts?.text?.sizes
-
-export const reactSelectStyles: StylesConfig<
-  {
-    label: string
-    value: string
+const {
+  fonts: {
+    text: {sizes: themeTextSizes}
   },
-  false
-> = {
-  control: (styles, {isDisabled, isFocused}) => {
-    let boxShadow = `inset 0 0 0 1px ${hues.gray[900].hex}`
-    if (isFocused) {
-      boxShadow = `inset 0 0 0 1px ${hues.gray[900].hex}, 0 0 0 1px var(--card-bg-color), 0 0 0 3px var(--card-focus-ring-color) !important`
-    }
+  radius: themeRadius,
+  space: themeSpace
+} = studioTheme
+
+export const reactSelectStyles = (scheme: ThemeColorSchemeKey): StylesConfig => {
+  return {
+    control: (styles, {isDisabled, isFocused}) => {
+      let boxShadow = `inset 0 0 0 1px var(--card-border-color)`
+      if (isFocused) {
+        boxShadow = `inset 0 0 0 1px ${getSchemeColor(scheme, 'inputEnabledBorder')},
+        0 0 0 1px ${getSchemeColor(scheme, 'bg2')},
+        0 0 0 3px var(--card-focus-ring-color) !important`
+      }
 
-    return {
+      return {
+        ...styles,
+        backgroundColor: 'var(--card-bg-color)',
+        color: 'inherit',
+        border: 'none',
+        borderRadius: themeRadius[2],
+        boxShadow,
+        fontSize: themeTextSizes[1].fontSize,
+        minHeight: '25px',
+        opacity: isDisabled ? 0.5 : 'inherit',
+        outline: 'none',
+        transition: 'none',
+        '&:hover': {
+          boxShadow: `inset 0 0 0 1px ${getSchemeColor(scheme, 'inputHoveredBorder')}`
+        }
+      }
+    },
+    input: styles => ({
+      ...styles,
+      color: 'var(--card-fg-color)',
+      fontFamily: studioTheme.fonts.text.family,
+      fontSize: themeTextSizes[1].fontSize,
+      marginLeft: rem(themeSpace[2])
+    }),
+    menuList: styles => ({
+      ...styles,
+      padding: 0
+    }),
+    noOptionsMessage: styles => ({
+      ...styles,
+      fontFamily: studioTheme.fonts.text.family,
+      fontSize: themeTextSizes[1].fontSize,
+      lineHeight: '1em'
+    }),
+    option: (styles, {isFocused}) => ({
       ...styles,
-      backgroundColor: themeDarkDefaultBaseBg,
-      color: white.hex,
-      border: 'none',
+      backgroundColor: isFocused ? getSchemeColor(scheme, 'spotBlue') : 'transparent',
       borderRadius: themeRadius[2],
-      boxShadow,
+      color: isFocused ? getSchemeColor(scheme, 'bg') : 'inherit',
       fontSize: themeTextSizes[1].fontSize,
-      minHeight: '25px',
-      opacity: isDisabled ? 0.5 : 'inherit',
-      outline: 'none',
-      transition: 'none',
+      lineHeight: '1em',
+      margin: 0,
+      padding: rem(themeSpace[1]),
       '&:hover': {
-        boxShadow: `inset 0 0 0 1px ${studioTheme.color.dark.default.input.default.hovered.border}`
+        backgroundColor: getSchemeColor(scheme, 'spotBlue'),
+        color: getSchemeColor(scheme, 'bg')
       }
-    }
-  },
-  input: styles => ({
-    ...styles,
-    color: white.hex,
-    fontFamily: studioTheme.fonts.text.family,
-    marginLeft: themeSpace[2]
-  }),
-  menuList: styles => ({
-    ...styles,
-    padding: 0
-  }),
-  noOptionsMessage: styles => ({
-    ...styles,
-    fontFamily: studioTheme.fonts.text.family,
-    fontSize: themeTextSizes[1].fontSize,
-    lineHeight: '1em'
-  }),
-  option: (styles, {isFocused}) => ({
-    ...styles,
-    backgroundColor: isFocused ? themeDarkPrimaryBlue : 'transparent',
-    borderRadius: themeRadius[2],
-    color: isFocused ? black.hex : 'inherit',
-    fontSize: themeTextSizes[1].fontSize,
-    lineHeight: '1em',
-    padding: '4px 6px', // TODO: use theme value
-    '&:hover': {
-      backgroundColor: themeDarkPrimaryBlue,
-      color: black.hex
-    }
-  }),
-  placeholder: styles => ({
-    ...styles,
-    fontFamily: studioTheme.fonts.text.family,
-    marginLeft: themeSpace[2],
-    paddingBottom: '2px'
-  }),
-  singleValue: styles => ({
-    ...styles,
-    color: white.hex,
-    lineHeight: '1em',
-    paddingBottom: '1px'
-  }),
-  valueContainer: styles => ({
-    ...styles,
-    margin: 0,
-    padding: 0
-  })
+    }),
+    placeholder: styles => ({
+      ...styles,
+      fontSize: themeTextSizes[1].fontSize,
+      marginLeft: rem(themeSpace[2]),
+      paddingLeft: 0
+    }),
+    singleValue: styles => ({
+      ...styles,
+      alignItems: 'center',
+      display: 'inline-flex',
+      height: '100%',
+      marginLeft: rem(themeSpace[2])
+    }),
+    valueContainer: styles => ({
+      ...styles,
+      margin: 0,
+      padding: 0
+    })
+  }
 }
 
 const ClearIndicator = (props: any) => {
@@ -162,18 +165,9 @@ const Option = (props: any) => {
 const SingleValue = (props: any) => {
   return (
     <components.SingleValue {...props}>
-      <Box paddingLeft={2}>
-        <Text
-          size={1}
-          style={{
-            color: 'inherit',
-            lineHeight: '2em' // HACK: prevent text descenders from cropping
-          }}
-          textOverflow="ellipsis"
-        >
-          {props.children}
-        </Text>
-      </Box>
+      <Text size={1} textOverflow="ellipsis">
+        {props.children}
+      </Text>
     </components.SingleValue>
   )
 }

package/src/utils/getSchemeColor.ts

@@ -0,0 +1,43 @@
+import {hues} from '@sanity/color'
+import {ThemeColorSchemeKey, studioTheme} from '@sanity/ui'
+
+const SCHEME_COLORS = {
+  bg: {
+    dark: hues.gray[950].hex,
+    light: hues.gray[50].hex
+  },
+  bg2: {
+    dark: hues.gray[900].hex,
+    light: hues.gray[100].hex
+  },
+  inputEnabledBorder: {
+    dark: studioTheme.color.dark.default.input.default.enabled.border,
+    light: studioTheme.color.light.default.input.default.enabled.border
+  },
+  inputHoveredBorder: {
+    dark: studioTheme.color.dark.default.input.default.hovered.border,
+    light: studioTheme.color.light.default.input.default.hovered.border
+  },
+  mutedHoveredBg: {
+    dark: studioTheme.color.dark.primary.muted.primary.hovered.bg,
+    light: studioTheme.color.light.primary.muted.primary.hovered.bg
+  },
+  mutedHoveredFg: {
+    dark: studioTheme.color.dark.primary.muted.primary.hovered.fg,
+    light: studioTheme.color.light.primary.muted.primary.hovered.fg
+  },
+  mutedSelectedBg: {
+    dark: studioTheme.color.dark.primary.muted.primary.selected.bg,
+    light: studioTheme.color.light.primary.muted.primary.selected.bg
+  },
+  spotBlue: {
+    dark: studioTheme.color.dark.primary.spot.blue,
+    light: studioTheme.color.light.primary.spot.blue
+  }
+}
+
+type SchemeColorKey = keyof typeof SCHEME_COLORS
+
+export function getSchemeColor(scheme: ThemeColorSchemeKey, colorKey: SchemeColorKey): string {
+  return SCHEME_COLORS[colorKey]?.[scheme]
+}