@sanity/ui 2.0.0-alpha.26 → 2.0.0-alpha.28

package/src/{theme → core/theme}/__workshop__/canvas.tsx

@@ -6,24 +6,27 @@ import {
   Grid,
   Stack,
   Text,
+  ThemeColorProvider,
+  useRootTheme,
+} from '@sanity/ui'
+import {
   ThemeColor,
+  ThemeColorBase,
   ThemeColorButton,
   ThemeColorButtonState,
   ThemeColorButtonStates,
   ThemeColorButtonTones,
-  ThemeColorMuted,
-  ThemeColorMutedTone,
-  ThemeColorProvider,
+  ThemeColorCard,
   ThemeColorScheme,
   ThemeColorSelectable,
   ThemeColorSelectableStates,
-  ThemeColorSolid,
-  ThemeColorSolidTone,
-  useRootTheme,
-} from '@sanity/ui'
+  getContrastRatio,
+  mix,
+  parseColor,
+  rgbToHex,
+} from '@sanity/ui/theme'
 import {useBoolean} from '@sanity/ui-workshop'
 import {createContext, useContext} from 'react'
-import {ThemeColorCard} from '../lib/theme'
 
 interface Features {
   light: boolean
@@ -33,9 +36,7 @@ interface Features {
   button: boolean
   card: boolean
   input: boolean
-  muted: boolean
   selectable: boolean
-  solid: boolean
   spot: boolean
 }
 
@@ -47,9 +48,7 @@ const defaultFeatures: Features = {
   button: false,
   card: false,
   input: false,
-  muted: true,
   selectable: false,
-  solid: false,
   spot: false,
 }
 
@@ -69,11 +68,11 @@ export default function CanvasStory() {
     button: useBoolean('Button', defaultFeatures.button, 'Props') ?? defaultFeatures.button,
     card: useBoolean('Card', defaultFeatures.card, 'Props') ?? defaultFeatures.card,
     input: useBoolean('Input', defaultFeatures.input, 'Props') ?? defaultFeatures.input,
-    muted: useBoolean('Muted', defaultFeatures.muted, 'Props') ?? defaultFeatures.muted,
+    // muted: useBoolean('Muted', defaultFeatures.muted, 'Props') ?? defaultFeatures.muted,
     selectable:
       useBoolean('Selectable', defaultFeatures.selectable, 'Props') ?? defaultFeatures.selectable,
-    solid: useBoolean('Solid', defaultFeatures.solid, 'Props') ?? defaultFeatures.solid,
-    spot: useBoolean('Spot', defaultFeatures.spot, 'Props') ?? defaultFeatures.spot,
+    // solid: useBoolean('Solid', defaultFeatures.solid, 'Props') ?? defaultFeatures.solid,
+    spot: useBoolean('Avatar', defaultFeatures.spot, 'Props') ?? defaultFeatures.spot,
   }
 
   return (
@@ -120,32 +119,7 @@ function Color(props: {color: ThemeColor; tone: CardTone}) {
         space={[3, 4]}
         // style={{outline: '1px solid #ccc'}}
       >
-        {features.base && (
-          <Stack
-            padding={3}
-            space={2}
-            style={{
-              borderRadius: 3,
-              boxShadow: `inset 0 0 0 1px ${color.base.border}`,
-            }}
-          >
-            <Text>Text</Text>
-            <Text muted>Muted</Text>
-            <Text accent>Accent</Text>
-            <Text>
-              <a href="#">Link</a>
-            </Text>
-            <Text>
-              <code>Code</code>
-            </Text>
-            <div
-              style={{
-                height: 9,
-                background: `linear-gradient(to right, ${color.base.skeleton?.from}, ${color.base.skeleton?.to})`,
-              }}
-            />
-          </Stack>
-        )}
+        {features.base && <ColorBase color={color.base} />}
 
         {features.button && <ColorButton color={color.button} />}
 
@@ -157,23 +131,35 @@ function Color(props: {color: ThemeColor; tone: CardTone}) {
           </Box>
         )}
 
-        {features.muted && <ColorMuted color={color.muted} />}
+        {/* {features.muted && <ColorMuted color={color.muted} />} */}
 
         {/* @todo: remove use of `muted` here */}
         {features.selectable && <ColorSelectable color={color.selectable || color.muted} />}
 
-        {features.solid && <ColorSolid color={color.solid} />}
+        {/* {features.solid && <ColorSolid color={color.solid} />} */}
 
         {features.spot && (
           <Flex gap={1}>
-            <Box flex={1} style={{backgroundColor: color.spot.blue, width: 25, height: 25}} />
-            <Box flex={1} style={{backgroundColor: color.spot.purple, width: 25, height: 25}} />
-            <Box flex={1} style={{backgroundColor: color.spot.magenta, width: 25, height: 25}} />
-            <Box flex={1} style={{backgroundColor: color.spot.red, width: 25, height: 25}} />
-            <Box flex={1} style={{backgroundColor: color.spot.yellow, width: 25, height: 25}} />
-            <Box flex={1} style={{backgroundColor: color.spot.green, width: 25, height: 25}} />
-            <Box flex={1} style={{backgroundColor: color.spot.cyan, width: 25, height: 25}} />
-            <Box flex={1} style={{backgroundColor: color.spot.gray, width: 25, height: 25}} />
+            <Box flex={1} style={{backgroundColor: color.avatar?.blue.bg, width: 25, height: 25}} />
+            <Box
+              flex={1}
+              style={{backgroundColor: color.avatar?.purple.bg, width: 25, height: 25}}
+            />
+            <Box
+              flex={1}
+              style={{backgroundColor: color.avatar?.magenta.bg, width: 25, height: 25}}
+            />
+            <Box flex={1} style={{backgroundColor: color.avatar?.red.bg, width: 25, height: 25}} />
+            <Box
+              flex={1}
+              style={{backgroundColor: color.avatar?.yellow.bg, width: 25, height: 25}}
+            />
+            <Box
+              flex={1}
+              style={{backgroundColor: color.avatar?.green.bg, width: 25, height: 25}}
+            />
+            <Box flex={1} style={{backgroundColor: color.avatar?.cyan.bg, width: 25, height: 25}} />
+            <Box flex={1} style={{backgroundColor: color.avatar?.gray.bg, width: 25, height: 25}} />
           </Flex>
         )}
       </Stack>
@@ -181,6 +167,38 @@ function Color(props: {color: ThemeColor; tone: CardTone}) {
   )
 }
 
+function ColorBase(props: {color: ThemeColorBase}) {
+  const {color} = props
+
+  return (
+    <Stack
+      padding={3}
+      space={2}
+      style={{
+        borderRadius: 3,
+        boxShadow: `inset 0 0 0 1px ${color.border}`,
+      }}
+    >
+      <Text>Text</Text>
+      <Text muted>Muted</Text>
+
+      <Text accent>Accent</Text>
+      <Text>
+        <a href="#">Link</a>
+      </Text>
+      <Text>
+        <code>Code</code>
+      </Text>
+      <div
+        style={{
+          height: 9,
+          background: `linear-gradient(to right, ${color.skeleton?.from}, ${color.skeleton?.to})`,
+        }}
+      />
+    </Stack>
+  )
+}
+
 function ColorCard(props: {color: ThemeColorCard}) {
   const {color} = props
 
@@ -258,6 +276,17 @@ function ColorGenericStates(props: {color: ThemeColorButtonStates}) {
   )
 }
 
+function _contrast(baseBg: string, bg: string, fg: string) {
+  const baseBgRgb = parseColor(baseBg)
+  let bgRgb = parseColor(bg)
+
+  if (typeof bgRgb.a === 'number') {
+    bgRgb = mix(baseBgRgb, bgRgb, bgRgb.a)
+  }
+
+  return getContrastRatio(rgbToHex(bgRgb), fg)
+}
+
 function ColorGenericState(props: {color: ThemeColorButtonState}) {
   const {color} = props
 
@@ -285,20 +314,21 @@ function ColorGenericState(props: {color: ThemeColorButtonState}) {
         </Box>
       </Flex>
 
-      <Text align="center" style={{color: 'inherit'}}>
-        Text
+      <Text align="center" size={1} style={{color: 'inherit'}}>
+        Text &ndash; {_contrast(color.bg, color.bg, color.fg).toFixed(2)}
       </Text>
       <Text align="center" size={1} style={{color: color.muted.fg}}>
-        Muted
+        Muted &ndash; {_contrast(color.bg, color.bg, color.muted.fg).toFixed(2)}
       </Text>
       <Text align="center" size={1} style={{color: color.link.fg}}>
-        Link
+        Link &ndash; {_contrast(color.bg, color.bg, color.link.fg).toFixed(2)}
       </Text>
       <Text align="center" size={1} style={{color: color.accent.fg}}>
-        Accent
+        Accent &ndash; {_contrast(color.bg, color.bg, color.accent.fg).toFixed(2)}
       </Text>
       <Text align="center" size={1} style={{color: color.code.fg}}>
-        <span style={{backgroundColor: color.code.bg}}>Code</span>
+        <span style={{backgroundColor: color.code.bg}}>Code</span> &ndash;{' '}
+        {_contrast(color.bg, color.code.bg, color.code.fg).toFixed(2)}
       </Text>
       <div
         style={{
@@ -310,62 +340,6 @@ function ColorGenericState(props: {color: ThemeColorButtonState}) {
   )
 }
 
-function ColorMuted(props: {color: ThemeColorMuted}) {
-  const {color} = props
-
-  return (
-    <Stack space={1}>
-      <ColorMutedTone color={color.default} />
-      <ColorMutedTone color={color.primary} />
-      <ColorMutedTone color={color.positive} />
-      <ColorMutedTone color={color.caution} />
-      <ColorMutedTone color={color.critical} />
-    </Stack>
-  )
-}
-
-function ColorMutedTone(props: {color: ThemeColorMutedTone}) {
-  const {color} = props
-
-  return (
-    <Grid columns={5} gap={1}>
-      <ColorGenericState color={color.enabled} />
-      <ColorGenericState color={color.hovered} />
-      <ColorGenericState color={color.pressed} />
-      <ColorGenericState color={color.selected} />
-      <ColorGenericState color={color.disabled} />
-    </Grid>
-  )
-}
-
-function ColorSolid(props: {color: ThemeColorSolid}) {
-  const {color} = props
-
-  return (
-    <Stack space={1}>
-      <ColorSolidTone color={color.default} />
-      <ColorSolidTone color={color.primary} />
-      <ColorSolidTone color={color.positive} />
-      <ColorSolidTone color={color.caution} />
-      <ColorSolidTone color={color.critical} />
-    </Stack>
-  )
-}
-
-function ColorSolidTone(props: {color: ThemeColorSolidTone}) {
-  const {color} = props
-
-  return (
-    <Grid columns={5} gap={1}>
-      <ColorGenericState color={color.enabled} />
-      <ColorGenericState color={color.hovered} />
-      <ColorGenericState color={color.pressed} />
-      <ColorGenericState color={color.selected} />
-      <ColorGenericState color={color.disabled} />
-    </Grid>
-  )
-}
-
 function ColorSelectable(props: {color: ThemeColorSelectable}) {
   const {color} = props
 

package/src/{theme → core/theme}/__workshop__/color.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import {Box, Card, Tree, TreeItem, useRootTheme} from '@sanity/ui'
 
 export default function ColorStory() {
@@ -11,11 +10,9 @@ export default function ColorStory() {
   return (
     <Box padding={[4, 5, 6]}>
       <Tree space={1}>
-        {Object.entries(theme.color)
-          // .filter((v) => v[0] !== 'dark')
-          .map(([key, value]) => (
-            <ColorGroup key={key} name={key} value={value as any} />
-          ))}
+        {Object.entries(theme.color).map(([key, value]) => (
+          <ColorGroup key={key} name={key} value={value} />
+        ))}
       </Tree>
     </Box>
   )

package/src/{theme → core/theme}/__workshop__/index.ts

@@ -5,6 +5,11 @@ export default defineScope({
   name: 'theme',
   title: 'Theme',
   stories: [
+    {
+      name: 'build',
+      title: 'Build theme',
+      component: lazy(() => import('./build/story')),
+    },
     {
       name: 'canvas',
       title: 'Canvas',

package/src/{theme → core/theme}/defaults.ts

@@ -1,4 +1,4 @@
-import {ThemeLayer} from './lib/theme/layer'
+import {ThemeLayer} from '@sanity/ui/theme'
 
 export const DEFAULT_THEME_LAYER: ThemeLayer = {
   dialog: {zOffset: 600},

package/src/core/theme/index.ts

@@ -0,0 +1,5 @@
+export * from './themeColorProvider'
+export * from './themeProvider'
+export * from './useRootTheme'
+export * from './useTheme'
+export * from './types'

package/src/{theme → core/theme}/theme.test.tsx

@@ -1,8 +1,8 @@
 /** @jest-environment jsdom */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import {render} from '../../test'
-import {studioTheme} from './studioTheme'
+import {studioTheme} from '@sanity/ui/theme'
+import {render} from '../../../test'
 import {ThemeContext} from './themeContext'
 import {ThemeContextValue} from './types'
 import {useRootTheme} from './useRootTheme'

package/src/{theme → core/theme}/themeColorProvider.tsx

@@ -1,4 +1,4 @@
-import {ThemeColorName, ThemeColorSchemeKey} from './lib/theme'
+import {ThemeColorBaseToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {ThemeProvider} from './themeProvider'
 import {useRootTheme} from './useRootTheme'
 
@@ -8,7 +8,7 @@ import {useRootTheme} from './useRootTheme'
 export interface ThemeColorProviderProps {
   children?: React.ReactNode
   scheme?: ThemeColorSchemeKey
-  tone?: ThemeColorName
+  tone?: ThemeColorBaseToneKey
 }
 
 /**

package/src/{theme → core/theme}/themeProvider.tsx

@@ -1,9 +1,9 @@
+import {RootTheme, Theme, ThemeColorBaseToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {useContext, useMemo} from 'react'
 import {ThemeProvider as StyledThemeProvider} from 'styled-components'
 import {DEFAULT_THEME_LAYER} from './defaults'
-import {ThemeColorSchemeKey, ThemeColorName} from './lib/theme'
 import {ThemeContext} from './themeContext'
-import {RootTheme, Theme, ThemeContextValue} from './types'
+import {ThemeContextValue} from './types'
 
 /**
  * @public
@@ -12,7 +12,7 @@ export interface ThemeProviderProps {
   children?: React.ReactNode
   scheme?: ThemeColorSchemeKey
   theme?: RootTheme
-  tone?: ThemeColorName
+  tone?: ThemeColorBaseToneKey
 }
 
 /**

package/src/core/theme/types.ts

@@ -0,0 +1,11 @@
+import {RootTheme, ThemeColorBaseToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
+
+/**
+ * @public
+ */
+export interface ThemeContextValue {
+  version: 0.0
+  scheme: ThemeColorSchemeKey
+  theme: RootTheme
+  tone: ThemeColorBaseToneKey
+}

package/src/{theme → core/theme}/useRootTheme.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import {useContext} from 'react'
 import {isRecord} from '../lib/isRecord'
 import {ThemeContext} from './themeContext'
@@ -21,5 +20,5 @@ export function useRootTheme(): ThemeContextValue {
     throw new Error('useRootTheme(): the context value is not compatible')
   }
 
-  return value as any as ThemeContextValue
+  return value as unknown as ThemeContextValue
 }

package/src/{theme → core/theme}/useTheme.ts

@@ -1,7 +1,6 @@
+import {Theme} from '@sanity/ui/theme'
 import {useTheme as useStyledTheme} from 'styled-components'
 
-import {Theme} from './types'
-
 /**
  * @public
  */

package/src/core/types/badge.ts

@@ -0,0 +1,12 @@
+import {ThemeColorStateToneKey} from '@sanity/ui/theme'
+
+/**
+ * @public
+ * @deprecated No longer used
+ */
+export type BadgeMode = 'default' | 'outline'
+
+/**
+ * @public
+ */
+export type BadgeTone = ThemeColorStateToneKey

package/src/core/types/button.ts

@@ -0,0 +1,22 @@
+import {ThemeColorStateToneKey} from '@sanity/ui/theme'
+import {ThemeColorButtonModeKey} from '../_compat'
+
+/**
+ * @public
+ */
+export type ButtonMode = ThemeColorButtonModeKey
+
+/**
+ * @public
+ */
+export type ButtonTextAlign = 'left' | 'right' | 'center'
+
+/**
+ * @public
+ */
+export type ButtonTone = ThemeColorStateToneKey
+
+/**
+ * @public
+ */
+export type ButtonWidth = 'fill'

package/src/core/types/card.ts

@@ -0,0 +1,6 @@
+import {ThemeColorBaseToneKey} from '@sanity/ui/theme'
+
+/**
+ * @public
+ */
+export type CardTone = ThemeColorBaseToneKey | 'inherit'

package/src/{types → core/types}/index.ts

@@ -11,5 +11,4 @@ export * from './placement'
 export * from './popover'
 export * from './radius'
 export * from './selectable'
-export * from './styled'
 export * from './text'

package/src/core/types/selectable.ts

@@ -0,0 +1,6 @@
+import {ThemeColorStateToneKey} from '@sanity/ui/theme'
+
+/**
+ * @public
+ */
+export type SelectableTone = ThemeColorStateToneKey

package/src/core/utils/arrow/arrow.tsx

@@ -0,0 +1,121 @@
+import {ForwardedRef, HTMLProps, ReactElement, forwardRef} from 'react'
+import styled, {css} from 'styled-components'
+import {useTheme} from '../../theme'
+import {Point, compileCommands, getRoundedCommands} from './cmds'
+
+const Root = styled.div<{$w: number}>(
+  ({$w: w}) => css`
+    position: absolute;
+    width: ${w}px;
+    height: ${w}px;
+
+    :empty + & {
+      display: none;
+    }
+
+    & > svg {
+      display: block;
+      line-height: 0;
+      transform-origin: ${w / 2}px ${w / 2}px;
+    }
+
+    [data-placement^='top'] > & {
+      bottom: -${w}px;
+
+      & > svg {
+        transform: rotate(0);
+      }
+    }
+
+    [data-placement^='right'] > & {
+      left: -${w}px;
+
+      & > svg {
+        transform: rotate(90deg);
+      }
+    }
+
+    [data-placement^='left'] > & {
+      right: -${w}px;
+
+      & > svg {
+        transform: rotate(-90deg);
+      }
+    }
+
+    [data-placement^='bottom'] > & {
+      top: -${w}px;
+
+      & > svg {
+        transform: rotate(180deg);
+      }
+    }
+  `,
+)
+
+const StrokePath = styled.path`
+  stroke: var(--card-shadow-outline-color);
+`
+
+const ShapePath = styled.path`
+  fill: var(--card-bg-color);
+`
+
+/** @internal */
+export const Arrow = forwardRef(function Arrow(
+  props: {width: number; height: number; radius?: number} & Omit<
+    HTMLProps<HTMLDivElement>,
+    'width' | 'height'
+  >,
+  ref: ForwardedRef<HTMLDivElement>,
+): ReactElement {
+  const {width: w, height: h, radius = 0, ...restProps} = props
+  const theme = useTheme()
+  const strokeWidth = theme.sanity.card.shadow.outline
+
+  const center = w / 2
+
+  const points: Point[] = [
+    {
+      x: 0,
+      y: 0,
+    },
+    {
+      x: radius,
+      y: 0,
+      radius,
+    },
+    {
+      x: center,
+      y: h - 1,
+      radius,
+    },
+    {
+      x: w - radius,
+      y: 0,
+      radius,
+    },
+    {
+      x: w,
+      y: 0,
+    },
+  ]
+
+  const cmds = getRoundedCommands(points)
+  const path = compileCommands(cmds)
+
+  const strokePath = `${path}`
+  const fillPath = `${path} M ${w} -1 M 0 -1 Z`
+
+  return (
+    <Root {...restProps} $w={w} ref={ref}>
+      <svg width={w} height={w} viewBox={`0 0 ${w} ${w}`}>
+        <mask id="stroke-mask">
+          <rect x={0} y={strokeWidth} width={w} height={w} fill="white" />
+        </mask>
+        <StrokePath d={strokePath} mask="url(#stroke-mask)" strokeWidth={strokeWidth * 2} />
+        <ShapePath d={fillPath} />
+      </svg>
+    </Root>
+  )
+})