@sanity/ui 2.0.0-alpha.3 → 2.0.0-alpha.30

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}/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/theme/{lib/theme/color/selectable → build/_deprecated/color/_selectable}/createSelectableTones.ts

@@ -1,8 +1,11 @@
-import {ThemeColorBase} from '../base'
+import {
+  ThemeColorBase,
+  ThemeColorMuted,
+  ThemeColorSelectable,
+  ThemeColorSelectableStates,
+  ThemeColorSolid,
+} from '../../../../system'
 import {ThemeColorBuilderOpts} from '../factory'
-import {ThemeColorMuted} from '../muted'
-import {ThemeColorSolid} from '../solid'
-import {ThemeColorSelectable, ThemeColorSelectableStates} from './types'
 
 export function createSelectableTones(
   opts: ThemeColorBuilderOpts,

package/src/theme/{lib/theme/color/solid → build/_deprecated/color/_solid}/createSolidTones.ts

@@ -1,7 +1,5 @@
-import {ThemeColorBase} from '../base'
+import {ThemeColorBase, ThemeColorSolid, ThemeColorName} from '../../../../system'
 import {ThemeColorBuilderOpts} from '../factory'
-import {ThemeColorName} from '../types'
-import {ThemeColorSolid} from './types'
 
 export function createSolidTones(
   opts: ThemeColorBuilderOpts,

package/src/theme/{lib/theme → build/_deprecated}/color/button/createButtonModes.ts

@@ -1,9 +1,11 @@
-import {ThemeColorBase} from '../base'
+import {
+  ThemeColorBase,
+  ThemeColorButton,
+  ThemeColorMuted,
+  ThemeColorSolid,
+} from '../../../../system'
 import {ThemeColorBuilderOpts} from '../factory'
-import {ThemeColorMuted} from '../muted'
-import {ThemeColorSolid} from '../solid'
 import {createButtonTones} from './createButtonTones'
-import {ThemeColorButton} from './types'
 
 export function createButtonModes(
   opts: ThemeColorBuilderOpts,

package/src/theme/{lib/theme → build/_deprecated}/color/button/createButtonTones.ts

@@ -1,8 +1,11 @@
-import {ThemeColorBase} from '../base'
+import {
+  ThemeColorBase,
+  ThemeColorButtonModeKey,
+  ThemeColorButtonTones,
+  ThemeColorMuted,
+  ThemeColorSolid,
+} from '../../../../system'
 import {ThemeColorBuilderOpts} from '../factory'
-import {ThemeColorMuted} from '../muted'
-import {ThemeColorSolid} from '../solid'
-import {ThemeColorButtonModeKey, ThemeColorButtonTones} from './types'
 
 export function createButtonTones(
   opts: ThemeColorBuilderOpts,

package/src/theme/{lib/theme → build/_deprecated}/color/card/createCardStates.ts

@@ -1,9 +1,11 @@
-import {ThemeColorBase} from '../base'
+import {
+  ThemeColorBase,
+  ThemeColorCard,
+  ThemeColorMuted,
+  ThemeColorSolid,
+  ThemeColorName,
+} from '../../../../system'
 import {ThemeColorBuilderOpts} from '../factory'
-import {ThemeColorMuted} from '../muted'
-import {ThemeColorSolid} from '../solid'
-import {ThemeColorName} from '../types'
-import {ThemeColorCard} from './types'
 
 export function createCardStates(
   opts: ThemeColorBuilderOpts,

package/src/theme/{lib/theme → build/_deprecated}/color/color.test.ts

@@ -39,7 +39,7 @@ describe('color', () => {
         bg2: 'hsl(0, 0%, 95%)',
         border: 'hsl(0, 0%, 70%)',
         fg: 'hsl(0, 0%, 20%)',
-        iconColor: 'hsl(0, 0%, 20%)',
+        icon: 'hsl(0, 0%, 20%)',
         muted: {
           fg: 'hsl(0, 0%, 0%)',
         },

package/src/theme/{lib/theme → build/_deprecated}/color/defaults.ts

@@ -158,7 +158,7 @@ export const defaultOpts: ThemeColorBuilderOpts = {
         bg2: dark ? color.light : color.dark,
         border: dark ? color.lighter : color.darker,
         fg: dark ? color.darkest : color.lightest,
-        iconColor: dark ? color.darkest : color.lightest,
+        icon: dark ? color.darkest : color.lightest,
         muted: {
           fg: black,
         },
@@ -181,7 +181,7 @@ export const defaultOpts: ThemeColorBuilderOpts = {
       bg2: color.base,
       border: dark ? color.light : color.dark,
       fg: dark ? color.darkest : color.lightest,
-      iconColor: dark ? color.darkest : color.lightest,
+      icon: dark ? color.darkest : color.lightest,
       muted: {
         fg: black,
       },
@@ -208,7 +208,7 @@ export const defaultOpts: ThemeColorBuilderOpts = {
         bg2: dark ? color.darker : color.lighter,
         border: dark ? color.lighter : color.darker,
         fg: dark ? color.lightest : color.darkest,
-        iconColor: dark ? color.lightest : color.darkest,
+        icon: dark ? color.lightest : color.darkest,
         muted: {
           fg: black,
         },
@@ -231,7 +231,7 @@ export const defaultOpts: ThemeColorBuilderOpts = {
       bg2: dark ? color.darkest : color.lightest,
       border: dark ? color.darker : color.lighter,
       fg: dark ? color.lighter : color.darker,
-      iconColor: dark ? color.lighter : color.darker,
+      icon: dark ? color.lighter : color.darker,
       muted: {
         fg: black,
       },
@@ -257,7 +257,7 @@ export const defaultOpts: ThemeColorBuilderOpts = {
           bg: 'transparent',
           bg2: 'transparent',
           fg: muted.enabled.fg,
-          iconColor: muted.enabled.fg,
+          icon: muted.enabled.fg,
           border: 'transparent',
           muted: {
             fg: black,
@@ -278,7 +278,7 @@ export const defaultOpts: ThemeColorBuilderOpts = {
           bg: muted.enabled.bg,
           bg2: muted.enabled.bg,
           fg: muted.hovered.fg,
-          iconColor: muted.hovered.fg,
+          icon: muted.hovered.fg,
           border: 'transparent',
           muted: {
             fg: black,
@@ -312,7 +312,7 @@ export const defaultOpts: ThemeColorBuilderOpts = {
       bg: black,
       bg2: black,
       fg: black,
-      iconColor: black,
+      icon: black,
       border: black,
       muted: {
         fg: black,

package/src/theme/{lib/theme → build/_deprecated}/color/factory.ts

@@ -1,31 +1,33 @@
-import {ThemeColorGenericState} from './_generic'
-import {ThemeColorBase} from './base'
-import {ThemeColorButtonModeKey, ThemeColorButtonStates} from './button'
-import {createButtonModes} from './button/createButtonModes'
-import {ThemeColorCardState} from './card'
-import {createCardStates} from './card/createCardStates'
-import {defaultOpts} from './defaults'
-import {ThemeColorInputState} from './input'
-import {createInputModes} from './input/createInputModes'
-import {ThemeColorMuted, ThemeColorMutedTone} from './muted'
-import {createMutedTones} from './muted/createMuted'
-import {ThemeColorSelectableState} from './selectable'
-import {createSelectableTones} from './selectable/createSelectableTones'
-import {ThemeColorSolid, ThemeColorSolidTone} from './solid'
-import {createSolidTones} from './solid/createSolidTones'
-import {ThemeColorSpotKey} from './spot'
-import {createSpot} from './spot/createSpot'
-import {ThemeColorSyntax} from './syntax'
 import {
+  ThemeColorGenericState,
+  ThemeColorBase,
+  ThemeColorButtonModeKey,
+  ThemeColorButtonStates,
+  ThemeColorInputState,
+  ThemeColorMuted,
+  ThemeColorMutedTone,
+  ThemeColorSolid,
+  ThemeColorSolidTone,
+  ThemeColorSyntax,
   ThemeColorName,
   ThemeColorScheme,
   ThemeColorSchemes,
   ThemeColor,
   ThemeColorToneKey,
-} from './types'
+  ThemeColorSpotKey,
+} from '../../../system'
+import {createSelectableTones} from './_selectable/createSelectableTones'
+import {createSolidTones} from './_solid/createSolidTones'
+import {createButtonModes} from './button/createButtonModes'
+import {createCardStates} from './card/createCardStates'
+import {defaultOpts} from './defaults'
+import {createInputModes} from './input/createInputModes'
+import {createMutedTones} from './muted/createMuted'
+import {createSpot} from './spot/createSpot'
 
 /**
  * @public
+ * @deprecated
  */
 export interface ThemeColorBuilderOpts {
   base: (opts: {dark: boolean; name: ThemeColorName}) => ThemeColorBase
@@ -50,7 +52,7 @@ export interface ThemeColorBuilderOpts {
     name: ThemeColorName
     solid: ThemeColorSolid
     state: 'enabled' | 'disabled' | 'hovered' | 'pressed' | 'selected'
-  }) => ThemeColorCardState
+  }) => ThemeColorGenericState
   button: (opts: {
     dark: boolean
     mode: ThemeColorButtonModeKey
@@ -73,18 +75,20 @@ export interface ThemeColorBuilderOpts {
     muted: ThemeColorMuted
     state: 'enabled' | 'disabled' | 'hovered' | 'pressed' | 'selected'
     tone: 'default' | 'primary' | 'positive' | 'caution' | 'critical'
-  }) => ThemeColorSelectableState
+  }) => ThemeColorGenericState
   syntax: (opts: {base: ThemeColorBase; dark: boolean}) => ThemeColorSyntax
   spot: (opts: {base: ThemeColorBase; dark: boolean; key: ThemeColorSpotKey}) => string
 }
 
 /**
  * @public
+ * @deprecated
  */
 export type PartialThemeColorBuilderOpts = Partial<ThemeColorBuilderOpts>
 
 /**
  * @public
+ * @deprecated Use `buildTheme` instead
  */
 export function createColorTheme(
   partialOpts: PartialThemeColorBuilderOpts = {},

package/src/theme/build/_deprecated/color/index.ts

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

package/src/theme/{lib/theme → build/_deprecated}/color/input/createInputModes.ts

@@ -1,8 +1,5 @@
-import {ThemeColorBase} from '../base'
+import {ThemeColorBase, ThemeColorInput, ThemeColorMuted, ThemeColorSolid} from '../../../../system'
 import {ThemeColorBuilderOpts} from '../factory'
-import {ThemeColorMuted} from '../muted'
-import {ThemeColorSolid} from '../solid'
-import {ThemeColorInput} from './types'
 
 export function createInputModes(
   opts: ThemeColorBuilderOpts,

package/src/theme/{lib/theme → build/_deprecated}/color/muted/createMuted.ts

@@ -1,13 +1,11 @@
-import {ThemeColorBase} from '../base'
+import {ThemeColorBase, ThemeColorBaseToneKey, ThemeColorMuted} from '../../../../system'
 import {ThemeColorBuilderOpts} from '../factory'
-import {ThemeColorName} from '../types'
-import {ThemeColorMuted} from './types'
 
 export function createMutedTones(
   opts: ThemeColorBuilderOpts,
   base: ThemeColorBase,
   dark: boolean,
-  name: ThemeColorName,
+  name: ThemeColorBaseToneKey,
 ): ThemeColorMuted {
   return {
     default: {

package/src/theme/{lib/theme → build/_deprecated}/color/spot/createSpot.ts

@@ -1,6 +1,5 @@
-import {ThemeColorBase} from '../base'
+import {ThemeColorBase, ThemeColorSpot} from '../../../../system'
 import {ThemeColorBuilderOpts} from '../factory'
-import {ThemeColorSpot} from './types'
 
 export function createSpot(
   opts: ThemeColorBuilderOpts,

package/src/theme/build/buildColorTheme.test.ts

@@ -0,0 +1,184 @@
+import {ThemeColorTokens} from '../config'
+import {buildColorScheme, buildColorTheme} from './buildColorTheme'
+
+test('buildColorTheme: base', () => {
+  const {light, dark} = buildColorTheme({
+    color: {
+      base: {
+        '*': {
+          bg: ['50', '900'],
+          fg: ['800', '200'],
+        },
+        transparent: {
+          bg: ['50', 'black'],
+        },
+        default: {
+          bg: ['white', '950'],
+          fg: ['black', '200'],
+        },
+        primary: {
+          _hue: 'purple',
+        },
+        positive: {
+          _hue: 'cyan',
+        },
+        caution: {
+          _hue: 'yellow',
+        },
+        critical: {
+          _hue: 'red',
+        },
+      },
+    },
+  })
+
+  expect({
+    light: {
+      transparent: {
+        bg: light.transparent.base.bg,
+        fg: light.transparent.base.fg,
+      },
+      default: {
+        bg: light.default.base.bg,
+        fg: light.default.base.fg,
+      },
+      primary: {
+        bg: light.primary.base.bg,
+        fg: light.primary.base.fg,
+      },
+    },
+    dark: {
+      transparent: {
+        bg: dark.transparent.base.bg,
+        fg: dark.transparent.base.fg,
+      },
+      default: {
+        bg: dark.default.base.bg,
+        fg: dark.default.base.fg,
+      },
+      primary: {
+        bg: dark.primary.base.bg,
+        fg: dark.primary.base.fg,
+      },
+    },
+  }).toEqual({
+    light: {
+      transparent: {
+        bg: 'gray/50',
+        fg: 'gray/600',
+      },
+      default: {
+        bg: 'white',
+        fg: 'black',
+      },
+      primary: {
+        bg: 'purple/50',
+        fg: 'purple/800',
+      },
+    },
+    dark: {
+      transparent: {
+        bg: 'black',
+        fg: 'gray/400',
+      },
+      default: {
+        bg: 'gray/950',
+        fg: 'gray/200',
+      },
+      primary: {
+        bg: 'purple/900',
+        fg: 'purple/200',
+      },
+    },
+  })
+})
+
+test('buildColorTheme: button', () => {
+  const tokens: ThemeColorTokens = {
+    base: {
+      '*': {
+        bg: ['50', '900'],
+        fg: ['800', '200'],
+      },
+      transparent: {
+        bg: ['50', 'black'],
+      },
+      default: {
+        bg: ['white', '950'],
+        fg: ['black', '200'],
+      },
+      primary: {
+        _hue: 'purple',
+      },
+      positive: {
+        _hue: 'cyan',
+      },
+      caution: {
+        _hue: 'yellow',
+      },
+      critical: {
+        _hue: 'red',
+      },
+    },
+    button: {
+      default: {
+        '*': {
+          '*': {
+            bg: ['500', '400'],
+            fg: ['white', 'black'],
+          },
+          hovered: {
+            bg: ['600', '300'],
+          },
+        },
+      },
+    },
+  }
+
+  const light = buildColorScheme({scheme: 'light'}, {color: tokens})
+  const dark = buildColorScheme({scheme: 'dark'}, {color: tokens})
+
+  expect({
+    light: {
+      enabled: {
+        bg: light.default.button.default.primary.enabled.bg,
+        fg: light.default.button.default.primary.enabled.fg,
+      },
+      hovered: {
+        bg: light.default.button.default.primary.hovered.bg,
+        fg: light.default.button.default.primary.hovered.fg,
+      },
+    },
+    dark: {
+      enabled: {
+        bg: dark.default.button.default.primary.enabled.bg,
+        fg: dark.default.button.default.primary.enabled.fg,
+      },
+      hovered: {
+        bg: dark.default.button.default.primary.hovered.bg,
+        fg: dark.default.button.default.primary.hovered.fg,
+      },
+    },
+  }).toEqual({
+    light: {
+      enabled: {
+        bg: 'purple/500',
+        fg: 'white',
+      },
+      hovered: {
+        bg: 'purple/600',
+        fg: 'white',
+      },
+    },
+    dark: {
+      enabled: {
+        bg: 'purple/400',
+        fg: 'black',
+      },
+      hovered: {
+        bg: 'purple/300',
+        fg: 'black',
+      },
+    },
+  })
+})