@sanity/ui 2.0.0-alpha.8 → 2.0.0-beta.1

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_v2} 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 {card} = useTheme_v2()
+  const strokeWidth = 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>
+  )
+})

package/src/core/utils/arrow/cmds.ts

@@ -0,0 +1,91 @@
+export interface PointCmd {
+  type: 'point'
+  x: number
+  y: number
+  radius?: number
+}
+
+export interface CurveCmd {
+  type: 'curve'
+  startControl: Point
+  endControl: Point
+  curveEnd: Point
+}
+
+export type Cmd = PointCmd | CurveCmd
+
+export interface Point {
+  x: number
+  y: number
+  radius?: number
+}
+
+function moveTowardsLength(movingPoint: Point, targetPoint: Point, amount: number) {
+  const width = targetPoint.x - movingPoint.x
+  const height = targetPoint.y - movingPoint.y
+
+  const distance = Math.sqrt(width * width + height * height)
+
+  return moveTowardsFractional(movingPoint, targetPoint, Math.min(1, amount / distance))
+}
+
+function moveTowardsFractional(movingPoint: Point, targetPoint: Point, fraction: number): Point {
+  return {
+    x: movingPoint.x + (targetPoint.x - movingPoint.x) * fraction,
+    y: movingPoint.y + (targetPoint.y - movingPoint.y) * fraction,
+  }
+}
+
+export function getRoundedCommands(points: Point[]): Cmd[] {
+  const len = points.length
+
+  const cmds: Cmd[] = []
+
+  for (let i = 0; i < len; i += 1) {
+    const point = points[i]
+    const prevPoint = points[i - 1]
+    const nextPoint = points[i + 1]
+
+    if (prevPoint && point.radius) {
+      const curveStart = moveTowardsLength(point, prevPoint, point.radius)
+      const curveEnd = moveTowardsLength(point, nextPoint, point.radius)
+      const startControl = moveTowardsFractional(curveStart, point, 0.5)
+      const endControl = moveTowardsFractional(point, curveEnd, 0.5)
+
+      cmds.push({
+        type: 'point',
+        ...curveStart,
+      })
+
+      cmds.push({
+        type: 'curve',
+        curveEnd,
+        startControl,
+        endControl,
+      })
+    } else {
+      cmds.push({
+        type: 'point',
+        ...point,
+      })
+    }
+  }
+
+  return cmds
+}
+
+export function compileCommands(cmds: Cmd[]): string {
+  return cmds
+    .map((n, idx) => {
+      if (n.type === 'point') {
+        return `${idx === 0 ? 'M' : 'L'} ${n.x} ${n.y}`
+      }
+
+      if (n.type === 'curve') {
+        return `C ${n.startControl.x} ${n.startControl.y} ${n.endControl.x} ${n.endControl.y} ${n.curveEnd.x} ${n.curveEnd.y}`
+      }
+
+      return ``
+    })
+    .join(' ')
+}

package/src/core/utils/arrow/index.ts

@@ -0,0 +1 @@
+export * from './arrow'

package/src/{utils → core/utils}/boundaryElement/__workshop__/plain.tsx

@@ -1,4 +1,4 @@
-import {Box, BoundaryElementProvider, Button, Card, Text, Tooltip} from '@sanity/ui'
+import {BoundaryElementProvider, Button, Card, Text, Tooltip} from '@sanity/ui'
 import {useState} from 'react'
 
 export default function PlainStory() {
@@ -8,11 +8,7 @@ export default function PlainStory() {
     <Card padding={7} ref={setBoundaryElement}>
       <BoundaryElementProvider element={boundaryElement}>
         <Tooltip
-          content={
-            <Box padding={2}>
-              <Text>Test aldsakm alkdmal dmalskdm alkdmlakds</Text>
-            </Box>
-          }
+          content={<Text size={1}>Test aldsakm alkdmal dmalskdm alkdmlakds</Text>}
           placement="top"
         >
           <Button text={<>Hover me</>} />

package/src/{utils → core/utils}/boundaryElement/boundaryElement.test.tsx

@@ -1,7 +1,7 @@
 /** @jest-environment jsdom */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import {render} from '../../../test'
+import {render} from '../../../../test'
 import {BoundaryElementContext} from './boundaryElementContext'
 import {BoundaryElementContextValue} from './types'
 import {useBoundaryElement} from './useBoundaryElement'

package/src/{utils → core/utils}/elementQuery/__workshop__/customMedia.tsx

@@ -1,16 +1,15 @@
 import {Box, Card, ElementQuery, Text} from '@sanity/ui'
 import styled from 'styled-components'
-import {mutableCardVariables} from '../../../theme/lib/theme/color/cssVariables/cardVariables'
 
 const TestCard = styled(Card)`
-  ${mutableCardVariables['fg-color']}: orange;
+  --card-fg-color: orange;
 
   [data-eq-min~='0'] > & {
-    ${mutableCardVariables['fg-color']}: green;
+    --card-fg-color: green;
   }
 
   [data-eq-min~='1'] > & {
-    ${mutableCardVariables['fg-color']}: blue;
+    --card-fg-color: blue;
   }
 `
 

package/src/{utils → core/utils}/elementQuery/elementQuery.tsx

@@ -1,6 +1,6 @@
 import {forwardRef, useCallback, useMemo, useState} from 'react'
 import {useElementSize, useForwardedRef} from '../../hooks'
-import {useTheme} from '../../theme'
+import {useTheme_v2} from '../../theme'
 import {findMaxBreakpoints, findMinBreakpoints} from './helpers'
 
 /**
@@ -20,8 +20,8 @@ export const ElementQuery = forwardRef(function ElementQuery(
   props: MediaQueryProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'media'>,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
-  const theme = useTheme()
-  const {children, media = theme.sanity.media, ...restProps} = props
+  const theme = useTheme_v2()
+  const {children, media = theme.media, ...restProps} = props
 
   const forwardedRef = useForwardedRef(ref)
   const [element, setElement] = useState<HTMLDivElement | null>(null)

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

@@ -1,3 +1,4 @@
+export * from './arrow'
 export * from './boundaryElement'
 export * from './elementQuery'
 export * from './errorBoundary'

package/src/{utils → core/utils}/layer/__workshop__/_debug.tsx

@@ -5,7 +5,7 @@ export function LayerDebugInfo(props: {id?: string}) {
   const layer = useLayer()
 
   return (
-    <Code id={id}>
+    <Code id={id} size={1}>
       {[
         //
         `isTopLayer=${layer.isTopLayer}`,

package/src/{utils → core/utils}/layer/layer.test.tsx

@@ -1,7 +1,7 @@
 /** @jest-environment jsdom */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import {render} from '../../../test'
+import {render} from '../../../../test'
 import {LayerContext} from './layerContext'
 import {LayerContextValue} from './types'
 import {useLayer} from './useLayer'

package/src/{utils → core/utils}/portal/__workshop__/named.tsx

@@ -17,7 +17,7 @@ export default function NamedStory() {
       <Container width={1}>
         <Card height="fill" padding={4}>
           <Stack space={2}>
-            <Text size={1} weight="semibold">
+            <Text size={1} weight="medium">
               Portal 1
             </Text>
             <Card border padding={3} ref={setPortal1Element} />
@@ -25,7 +25,7 @@ export default function NamedStory() {
         </Card>
         <Card height="fill" padding={4}>
           <Stack space={2}>
-            <Text size={1} weight="semibold">
+            <Text size={1} weight="medium">
               Portal 2
             </Text>
             <Card border padding={3} ref={setPortal2Element} />
@@ -33,7 +33,7 @@ export default function NamedStory() {
         </Card>
         <Card height="fill" padding={4}>
           <Stack space={2}>
-            <Text size={1} weight="semibold">
+            <Text size={1} weight="medium">
               Portal 3
             </Text>
             <Card border padding={3} ref={setPortal3Element} />

package/src/{utils → core/utils}/portal/portal.test.tsx

@@ -1,7 +1,7 @@
 /** @jest-environment jsdom */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import {render} from '../../../test'
+import {render} from '../../../../test'
 import {PortalContext} from './portalContext'
 import {PortalContextValue} from './types'
 import {usePortal} from './usePortal'

package/src/{utils → core/utils}/virtualList/virtualList.tsx

@@ -5,7 +5,7 @@ import {_isScrollable} from '../../helpers'
 import {useForwardedRef} from '../../hooks'
 import {_ResizeObserver} from '../../observers'
 import {StackProps} from '../../primitives'
-import {useTheme} from '../../theme'
+import {useTheme_v2} from '../../theme'
 
 /**
  * @beta
@@ -51,7 +51,7 @@ export const VirtualList = forwardRef(function VirtualList(
   ref: React.ForwardedRef<HTMLDivElement>,
 ): React.ReactElement {
   const {as = 'div', gap = 0, getItemKey, items = [], onChange, renderItem, ...restProps} = props
-  const {space} = useTheme().sanity
+  const {space} = useTheme_v2()
   const forwardedRef = useForwardedRef(ref)
   const wrapperRef = useRef<HTMLDivElement | null>(null)
   const [scrollTop, setScrollTop] = useState(0)

package/src/theme/build/_deprecated/color/_selectable/createSelectableTones.ts

@@ -0,0 +1,76 @@
+import {
+  ThemeColorBase,
+  ThemeColorMuted,
+  ThemeColorSelectable,
+  ThemeColorSelectableStates,
+  ThemeColorSolid,
+} from '../../../../system'
+import {ThemeColorBuilderOpts} from '../factory'
+
+export function createSelectableTones(
+  opts: ThemeColorBuilderOpts,
+  base: ThemeColorBase,
+  dark: boolean,
+  solid: ThemeColorSolid,
+  muted: ThemeColorMuted,
+): ThemeColorSelectable {
+  return {
+    default: _createSelectableStates(opts, base, dark, solid, muted, 'default'),
+    primary: _createSelectableStates(opts, base, dark, solid, muted, 'primary'),
+    positive: _createSelectableStates(opts, base, dark, solid, muted, 'positive'),
+    caution: _createSelectableStates(opts, base, dark, solid, muted, 'caution'),
+    critical: _createSelectableStates(opts, base, dark, solid, muted, 'critical'),
+  }
+}
+
+function _createSelectableStates(
+  opts: ThemeColorBuilderOpts,
+  base: ThemeColorBase,
+  dark: boolean,
+  solid: ThemeColorSolid,
+  muted: ThemeColorMuted,
+  tone: 'default' | 'primary' | 'positive' | 'caution' | 'critical',
+): ThemeColorSelectableStates {
+  return {
+    enabled: opts.selectable({
+      base,
+      dark,
+      solid,
+      muted,
+      state: 'enabled',
+      tone,
+    }),
+    hovered: opts.selectable({
+      base,
+      dark,
+      solid,
+      muted,
+      state: 'hovered',
+      tone,
+    }),
+    pressed: opts.selectable({
+      base,
+      dark,
+      solid,
+      muted,
+      state: 'pressed',
+      tone,
+    }),
+    selected: opts.selectable({
+      base,
+      dark,
+      solid,
+      muted,
+      state: 'selected',
+      tone,
+    }),
+    disabled: opts.selectable({
+      base,
+      dark,
+      solid,
+      muted,
+      state: 'disabled',
+      tone,
+    }),
+  }
+}

package/src/theme/build/_deprecated/color/_solid/createSolidTones.ts

@@ -0,0 +1,54 @@
+import {ThemeColorBase, ThemeColorSolid, ThemeColorName} from '../../../../system'
+import {ThemeColorBuilderOpts} from '../factory'
+
+export function createSolidTones(
+  opts: ThemeColorBuilderOpts,
+  base: ThemeColorBase,
+  dark: boolean,
+  name: ThemeColorName,
+): ThemeColorSolid {
+  return {
+    default: {
+      enabled: opts.solid({base, dark, tone: 'default', name, state: 'enabled'}),
+      disabled: opts.solid({base, dark, tone: 'default', name, state: 'disabled'}),
+      hovered: opts.solid({base, dark, tone: 'default', name, state: 'hovered'}),
+      pressed: opts.solid({base, dark, tone: 'default', name, state: 'pressed'}),
+      selected: opts.solid({base, dark, tone: 'default', name, state: 'selected'}),
+    },
+    transparent: {
+      enabled: opts.solid({base, dark, tone: 'transparent', name, state: 'enabled'}),
+      disabled: opts.solid({base, dark, tone: 'transparent', name, state: 'disabled'}),
+      hovered: opts.solid({base, dark, tone: 'transparent', name, state: 'hovered'}),
+      pressed: opts.solid({base, dark, tone: 'transparent', name, state: 'pressed'}),
+      selected: opts.solid({base, dark, tone: 'transparent', name, state: 'selected'}),
+    },
+    primary: {
+      enabled: opts.solid({base, dark, tone: 'primary', name, state: 'enabled'}),
+      disabled: opts.solid({base, dark, tone: 'primary', name, state: 'disabled'}),
+      hovered: opts.solid({base, dark, tone: 'primary', name, state: 'hovered'}),
+      pressed: opts.solid({base, dark, tone: 'primary', name, state: 'pressed'}),
+      selected: opts.solid({base, dark, tone: 'primary', name, state: 'selected'}),
+    },
+    positive: {
+      enabled: opts.solid({base, dark, tone: 'positive', name, state: 'enabled'}),
+      disabled: opts.solid({base, dark, tone: 'positive', name, state: 'disabled'}),
+      hovered: opts.solid({base, dark, tone: 'positive', name, state: 'hovered'}),
+      pressed: opts.solid({base, dark, tone: 'positive', name, state: 'pressed'}),
+      selected: opts.solid({base, dark, tone: 'positive', name, state: 'selected'}),
+    },
+    caution: {
+      enabled: opts.solid({base, dark, tone: 'caution', name, state: 'enabled'}),
+      disabled: opts.solid({base, dark, tone: 'caution', name, state: 'disabled'}),
+      hovered: opts.solid({base, dark, tone: 'caution', name, state: 'hovered'}),
+      pressed: opts.solid({base, dark, tone: 'caution', name, state: 'pressed'}),
+      selected: opts.solid({base, dark, tone: 'caution', name, state: 'selected'}),
+    },
+    critical: {
+      enabled: opts.solid({base, dark, tone: 'critical', name, state: 'enabled'}),
+      disabled: opts.solid({base, dark, tone: 'critical', name, state: 'disabled'}),
+      hovered: opts.solid({base, dark, tone: 'critical', name, state: 'hovered'}),
+      pressed: opts.solid({base, dark, tone: 'critical', name, state: 'pressed'}),
+      selected: opts.solid({base, dark, tone: 'critical', name, state: 'selected'}),
+    },
+  }
+}

package/src/theme/build/_deprecated/color/button/createButtonModes.ts

@@ -0,0 +1,22 @@
+import {
+  ThemeColorBase,
+  ThemeColorButton,
+  ThemeColorMuted,
+  ThemeColorSolid,
+} from '../../../../system'
+import {ThemeColorBuilderOpts} from '../factory'
+import {createButtonTones} from './createButtonTones'
+
+export function createButtonModes(
+  opts: ThemeColorBuilderOpts,
+  base: ThemeColorBase,
+  dark: boolean,
+  solid: ThemeColorSolid,
+  muted: ThemeColorMuted,
+): ThemeColorButton {
+  return {
+    default: createButtonTones(opts, base, dark, solid, muted, 'default'),
+    ghost: createButtonTones(opts, base, dark, solid, muted, 'ghost'),
+    bleed: createButtonTones(opts, base, dark, solid, muted, 'bleed'),
+  }
+}

package/src/theme/build/_deprecated/color/button/createButtonTones.ts

@@ -0,0 +1,55 @@
+import {
+  ThemeColorBase,
+  ThemeColorButtonModeKey,
+  ThemeColorButtonTones,
+  ThemeColorMuted,
+  ThemeColorSolid,
+} from '../../../../system'
+import {ThemeColorBuilderOpts} from '../factory'
+
+export function createButtonTones(
+  opts: ThemeColorBuilderOpts,
+  base: ThemeColorBase,
+  dark: boolean,
+  solid: ThemeColorSolid,
+  muted: ThemeColorMuted,
+  mode: ThemeColorButtonModeKey,
+): ThemeColorButtonTones {
+  return {
+    default: opts.button({
+      base,
+      dark,
+      solid: solid.default,
+      muted: muted.default,
+      mode,
+    }),
+    primary: opts.button({
+      base,
+      dark,
+      solid: solid.primary,
+      muted: muted.primary,
+      mode,
+    }),
+    positive: opts.button({
+      base,
+      dark,
+      solid: solid.positive,
+      muted: muted.positive,
+      mode,
+    }),
+    caution: opts.button({
+      base,
+      dark,
+      solid: solid.caution,
+      muted: muted.caution,
+      mode,
+    }),
+    critical: opts.button({
+      base,
+      dark,
+      solid: solid.critical,
+      muted: muted.critical,
+      mode,
+    }),
+  }
+}

package/src/theme/build/_deprecated/color/card/createCardStates.ts

@@ -0,0 +1,60 @@
+import {
+  ThemeColorBase,
+  ThemeColorCard,
+  ThemeColorMuted,
+  ThemeColorSolid,
+  ThemeColorName,
+} from '../../../../system'
+import {ThemeColorBuilderOpts} from '../factory'
+
+export function createCardStates(
+  opts: ThemeColorBuilderOpts,
+  base: ThemeColorBase,
+  dark: boolean,
+  name: ThemeColorName,
+  solid: ThemeColorSolid,
+  muted: ThemeColorMuted,
+): ThemeColorCard {
+  return {
+    enabled: opts.card({
+      base,
+      dark,
+      name,
+      state: 'enabled',
+      solid,
+      muted,
+    }),
+    disabled: opts.card({
+      base,
+      dark,
+      name,
+      state: 'disabled',
+      solid,
+      muted,
+    }),
+    hovered: opts.card({
+      base,
+      dark,
+      name,
+      state: 'hovered',
+      solid,
+      muted,
+    }),
+    pressed: opts.card({
+      base,
+      dark,
+      name,
+      state: 'pressed',
+      solid,
+      muted,
+    }),
+    selected: opts.card({
+      base,
+      dark,
+      name,
+      state: 'selected',
+      solid,
+      muted,
+    }),
+  }
+}