@sanity/ui 3.0.0-static.1 → 3.0.0-static.2

package/src/core/__workshop__/constants.ts

@@ -1,305 +0,0 @@
-import {icons, IconSymbol} from '@sanity/icons'
-import {
-  AvatarSize,
-  BadgeMode,
-  BadgeTone,
-  ButtonMode,
-  ButtonTextAlign,
-  ButtonTone,
-  CardTone,
-  DialogPosition,
-  FlexAlign,
-  FlexDirection,
-  FlexJustify,
-  Placement,
-  TextAlign,
-  TextInputType,
-} from '@sanity/ui'
-import {
-  ContainerWidth,
-  FontHeadingSize,
-  Space,
-  ThemeColorSpotKey,
-  ThemeColorToneKey,
-  ThemeFontWeightKey,
-} from '@sanity/ui/theme'
-
-export const WORKSHOP_AVATAR_SIZE_OPTIONS: {[key: string]: AvatarSize} = {
-  '0': 0,
-  '1 (default)': 1,
-  '2': 2,
-  '3': 3,
-}
-
-export const WORKSHOP_BADGE_MODE_OPTIONS: {[key: string]: BadgeMode} = {
-  Default: 'default',
-  Outline: 'outline',
-}
-
-export const WORKSHOP_BADGE_TONE_OPTIONS: {[key: string]: BadgeTone} = {
-  Default: 'default',
-  Primary: 'primary',
-  Positive: 'positive',
-  Caution: 'caution',
-  Critical: 'critical',
-}
-
-export const WORKSHOP_BUTTON_MODE_OPTIONS: {[key: string]: ButtonMode} = {
-  Default: 'default',
-  Ghost: 'ghost',
-  Bleed: 'bleed',
-}
-
-export const WORKSHOP_BUTTON_TEXT_ALIGN_OPTIONS: {[key: string]: ButtonTextAlign | ''} = {
-  '(none)': '',
-  'Left': 'left',
-  'Right': 'right',
-  'Center': 'center',
-}
-
-export const WORKSHOP_BUTTON_TONE_OPTIONS: {[key: string]: ButtonTone} = {
-  Default: 'default',
-  Primary: 'primary',
-  Positive: 'positive',
-  Caution: 'caution',
-  Critical: 'critical',
-}
-
-export const WORKSHOP_CARD_AS_OPTIONS: {
-  [key: string]: 'div' | 'button' | 'span' | 'ol' | 'pre' | 'ul'
-} = {
-  'DIV (default)': 'div',
-  'BUTTON': 'button',
-  'SPAN': 'span',
-  'OL': 'ol',
-  'PRE': 'pre',
-  'UL': 'ul',
-}
-
-export const WORKSHOP_CARD_TONE_OPTIONS: {[key: string]: CardTone} = {
-  Default: 'default',
-  Inherit: 'inherit',
-  Transparent: 'transparent',
-  Primary: 'primary',
-  Positive: 'positive',
-  Caution: 'caution',
-  Critical: 'critical',
-}
-
-export const WORKSHOP_CODE_LANGUAGE_OPTIONS = {
-  JavaScript: 'javascript',
-  JSON: 'json',
-  JSX: 'jsx',
-  TypeScript: 'typescript',
-}
-
-export const WORKSHOP_CONTAINER_WIDTH_OPTIONS: {[key: string]: ContainerWidth} = {
-  '0': 0,
-  '1': 1,
-  '2': 2,
-  '3': 3,
-  '4': 4,
-  '5': 5,
-  'auto': 'auto',
-}
-
-export const WORKSHOP_DIALOG_POSITION_OPTIONS: {[key: string]: DialogPosition} = {
-  Fixed: 'fixed',
-  Absolute: 'absolute',
-}
-
-export const WORKSHOP_FLEX_DIRECTION_OPTIONS: {[key: string]: FlexDirection} = {
-  Row: 'row',
-  Column: 'column',
-}
-
-export const WORKSHOP_FLEX_ALIGN_OPTIONS: Record<FlexAlign, FlexAlign> = {
-  'baseline': 'baseline',
-  'center': 'center',
-  'flex-end': 'flex-end',
-  'flex-start': 'flex-start',
-  'stretch': 'stretch',
-}
-
-export const WORKSHOP_FLEX_JUSTIFY_OPTIONS: Record<FlexJustify, FlexJustify> = {
-  'center': 'center',
-  'flex-end': 'flex-end',
-  'flex-start': 'flex-start',
-  'space-around': 'space-around',
-  'space-between': 'space-between',
-  'space-evenly': 'space-evenly',
-}
-
-export const WORKSHOP_FONT_WEIGHT_OPTIONS: {[key: string]: ThemeFontWeightKey} = {
-  Regular: 'regular',
-  Medium: 'medium',
-  Semibold: 'semibold',
-  Bold: 'bold',
-}
-
-export const WORKSHOP_HEADING_FONT_SIZE_OPTIONS: Record<string, FontHeadingSize> = {
-  '0': 0,
-  '1': 1,
-  '2 (default)': 2,
-  '3': 3,
-  '4': 4,
-  '5': 5,
-}
-
-export const WORKSHOP_ICON_SYMBOL_OPTIONS: {[key: string]: IconSymbol | ''} = Object.keys(
-  icons,
-).reduce(
-  (acc: {[key: string]: IconSymbol | ''}, key) => {
-    acc[key] = key as IconSymbol
-
-    return acc
-  },
-  {'(none)': ''},
-)
-
-export const WORKSHOP_LABEL_FONT_SIZE_OPTIONS = {
-  '0': 0,
-  '1': 1,
-  '2': 2,
-  '3': 3,
-  '4': 4,
-}
-
-export const WORKSHOP_PLACEMENT_OPTIONS: Record<Placement, Placement> = {
-  'top': 'top',
-  'top-start': 'top-start',
-  'top-end': 'top-end',
-  'right': 'right',
-  'right-start': 'right-start',
-  'right-end': 'right-end',
-  'left': 'left',
-  'left-start': 'left-start',
-  'left-end': 'left-end',
-  'bottom': 'bottom',
-  'bottom-start': 'bottom-start',
-  'bottom-end': 'bottom-end',
-}
-
-export const WORKSHOP_RADIUS_OPTIONS = {
-  '0': 0,
-  '1': 1,
-  '2': 2,
-  '3': 3,
-  '4': 4,
-  '5': 5,
-  '6': 6,
-}
-
-export const WORKSHOP_SHADOW_OPTIONS = {
-  '0': 0,
-  '1': 1,
-  '2': 2,
-  '3': 3,
-  '4': 4,
-  '5': 5,
-}
-
-export const WORKSHOP_SPACE_OPTIONS: Record<string, Space> = {
-  '0': 0,
-  '1': 1,
-  '2': 2,
-  '3': 3,
-  '4': 4,
-  '5': 5,
-  '6': 6,
-  '7': 7,
-  '8': 8,
-  '9': 9,
-}
-
-export const WORKSHOP_SPOT_COLOR_OPTIONS: {[key: string]: ThemeColorSpotKey} = {
-  Gray: 'gray',
-  Blue: 'blue',
-  Purple: 'purple',
-  Magenta: 'magenta',
-  Red: 'red',
-  Orange: 'orange',
-  Yellow: 'yellow',
-  Green: 'green',
-  Cyan: 'cyan',
-}
-
-export const WORKSHOP_TEXT_ALIGN_OPTIONS: {[key: string]: TextAlign | ''} = {
-  '(none)': '',
-  'Initial': 'initial',
-  'Left': 'left',
-  'Right': 'right',
-  'Center': 'center',
-  'Justify': 'justify',
-}
-
-export const WORKSHOP_TEXT_FONT_SIZE_OPTIONS = {
-  '0': 0,
-  '1': 1,
-  '2': 2,
-  '3': 3,
-  '4': 4,
-}
-
-export const WORKSHOP_TEXT_INPUT_TYPE_OPTIONS: {[key: string]: TextInputType} = {
-  'date': 'date',
-  'datetime-local': 'datetime-local',
-  'email': 'email',
-  'month': 'month',
-  'number': 'number',
-  'password': 'password',
-  'tel': 'tel',
-  'time': 'time',
-  'text': 'text',
-  'week': 'week',
-  'color': 'color',
-}
-
-export const WORKSHOP_TEXT_OVERFLOW_OPTIONS: {[key: string]: 'ellipsis' | ''} = {
-  None: '',
-  Ellipsis: 'ellipsis',
-}
-
-export const WORKSHOP_TEXT_SIZE_OPTIONS = {
-  '0': 0,
-  '1': 1,
-  '2 (default)': 2,
-  '3': 3,
-  '4': 4,
-}
-
-export const WORKSHOP_TEXT_WEIGHT_OPTIONS: {[key: string]: ThemeFontWeightKey | ''} = {
-  'Regular (default)': '',
-  'Medium': 'medium',
-  'Semibold': 'semibold',
-  'Bold': 'bold',
-}
-
-export const WORKSHOP_THEME_COLOR_TONE_OPTIONS: {[key: string]: ThemeColorToneKey} = {
-  Default: 'default',
-  Transparent: 'transparent',
-  Primary: 'primary',
-  Positive: 'positive',
-  Caution: 'caution',
-  Critical: 'critical',
-}
-
-export const WORKSHOP_TOAST_STATUS_OPTIONS: {
-  [key: string]: 'error' | 'success' | 'warning' | 'info' | ''
-} = {
-  None: '',
-  Info: 'info',
-  Success: 'success',
-  Warning: 'warning',
-  Error: 'error',
-}
-
-export const WORKSHOP_WIDTH_OPTIONS: {[key: string]: ContainerWidth} = {
-  'Auto': 'auto',
-  '0': 0,
-  '1': 1,
-  '2': 2,
-  '3': 3,
-  '4': 4,
-  '5': 5,
-}

package/src/core/__workshop__/fontsPlugin.tsx

@@ -1,76 +0,0 @@
-import {WorkshopPlugin} from '@sanity/ui-workshop'
-import {createGlobalStyle} from 'styled-components'
-
-const GlobalStyle = createGlobalStyle`
-  @font-face {
-    font-family: Inter;
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-    src: url('https://studio-static.sanity.io/Inter-Regular.woff2') format('woff2');
-  }
-  @font-face {
-    font-family: Inter;
-    font-style: italic;
-    font-weight: 400;
-    font-display: swap;
-    src: url('https://studio-static.sanity.io/Inter-Italic.woff2') format('woff2');
-  }
-  @font-face {
-    font-family: Inter;
-    font-style: normal;
-    font-weight: 500;
-    font-display: swap;
-    src: url('https://studio-static.sanity.io/Inter-Medium.woff2') format('woff2');
-  }
-  @font-face {
-    font-family: Inter;
-    font-style: italic;
-    font-weight: 500;
-    font-display: swap;
-    src: url('https://studio-static.sanity.io/Inter-MediumItalic.woff2') format('woff2');
-  }
-  @font-face {
-    font-family: Inter;
-    font-style: normal;
-    font-weight: 600;
-    font-display: swap;
-    src: url('https://studio-static.sanity.io/Inter-SemiBold.woff2') format('woff2');
-  }
-  @font-face {
-    font-family: Inter;
-    font-style: italic;
-    font-weight: 600;
-    font-display: swap;
-    src: url('https://studio-static.sanity.io/Inter-SemiBoldItalic.woff2') format('woff2');
-  }
-  @font-face {
-    font-family: Inter;
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: url('https://studio-static.sanity.io/Inter-Bold.woff2') format('woff2');
-  }
-  @font-face {
-    font-family: Inter;
-    font-style: italic;
-    font-weight: 700;
-    font-display: swap;
-    src: url('https://studio-static.sanity.io/Inter-BoldItalic.woff2') format('woff2');
-  }
-`
-
-export function fontsPlugin(): WorkshopPlugin {
-  return {
-    name: 'fonts',
-    title: 'Fonts',
-    provider: function FontsProvider({children}) {
-      return (
-        <>
-          <GlobalStyle />
-          {children}
-        </>
-      )
-    },
-  }
-}

package/src/core/_compat/styles/border/borderStyle.ts

@@ -1,61 +0,0 @@
-import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
-import {_responsive} from '../helpers'
-import {ThemeProps} from '../types'
-import {ResponsiveBorderStyleProps} from './types'
-
-/** @deprecated */
-export function responsiveBorderStyle(): Array<
-  (props: ResponsiveBorderStyleProps & ThemeProps) => CSSObject[]
-> {
-  return [border, borderTop, borderRight, borderBottom, borderLeft]
-}
-
-/** @deprecated */
-function border(props: ResponsiveBorderStyleProps & ThemeProps) {
-  const {card, media} = getTheme_v2(props.theme)
-  const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`
-
-  return _responsive(media, props.$border, (value) =>
-    value ? {'&&': {border: borderStyle}} : {'&&': {border: 0}},
-  )
-}
-
-/** @deprecated */
-function borderTop(props: ResponsiveBorderStyleProps & ThemeProps) {
-  const {card, media} = getTheme_v2(props.theme)
-  const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`
-
-  return _responsive(media, props.$borderTop, (value) =>
-    value ? {'&&': {borderTop: borderStyle}} : {'&&': {borderTop: 0}},
-  )
-}
-
-/** @deprecated */
-function borderRight(props: ResponsiveBorderStyleProps & ThemeProps) {
-  const {card, media} = getTheme_v2(props.theme)
-  const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`
-
-  return _responsive(media, props.$borderRight, (value) =>
-    value ? {'&&': {borderRight: borderStyle}} : {'&&': {borderRight: 0}},
-  )
-}
-
-/** @deprecated */
-function borderBottom(props: ResponsiveBorderStyleProps & ThemeProps) {
-  const {card, media} = getTheme_v2(props.theme)
-  const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`
-
-  return _responsive(media, props.$borderBottom, (value) =>
-    value ? {'&&': {borderBottom: borderStyle}} : {'&&': {borderBottom: 0}},
-  )
-}
-
-/** @deprecated */
-function borderLeft(props: ResponsiveBorderStyleProps & ThemeProps) {
-  const {card, media} = getTheme_v2(props.theme)
-  const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`
-
-  return _responsive(media, props.$borderLeft, (value) =>
-    value ? {'&&': {borderLeft: borderStyle}} : {'&&': {borderLeft: 0}},
-  )
-}

package/src/core/_compat/styles/border/index.ts

@@ -1,2 +0,0 @@
-export * from './borderStyle'
-export * from './types'

package/src/core/_compat/styles/border/types.ts

@@ -1,11 +0,0 @@
-/**
- * @internal
- * @deprecated
- */
-export interface ResponsiveBorderStyleProps {
-  $border: boolean[]
-  $borderTop: boolean[]
-  $borderRight: boolean[]
-  $borderBottom: boolean[]
-  $borderLeft: boolean[]
-}

package/src/core/_compat/styles/box/boxStyle.ts

@@ -1,74 +0,0 @@
-import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
-import {Property} from 'csstype'
-import {_responsive} from '../helpers'
-import {ThemeProps} from '../types'
-import {ResponsiveBoxStyleProps} from './types'
-
-const BASE_STYLE: CSSObject = {
-  '&[data-as="ul"],&[data-as="ol"]': {
-    listStyle: 'none',
-  },
-}
-
-const BOX_SIZING: {[key: string]: Property.BoxSizing} = {
-  content: 'content-box',
-  border: 'border-box',
-}
-
-const BOX_HEIGHT = {
-  stretch: 'stretch',
-  fill: '100%',
-} as const
-
-/** @deprecated */
-export function boxStyle(): CSSObject {
-  return BASE_STYLE
-}
-
-/** @deprecated */
-export function responsiveBoxStyle(): Array<
-  (props: ResponsiveBoxStyleProps & ThemeProps) => CSSObject[]
-> {
-  return [
-    responsiveBoxSizingStyle,
-    responsiveBoxHeightStyle,
-    responsiveBoxOverflowStyle,
-    responsiveBoxDisplayStyle,
-  ]
-}
-
-/** @deprecated */
-function responsiveBoxDisplayStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
-  const {media} = getTheme_v2(props.theme)
-
-  return _responsive(media, props.$display, (display) => ({
-    '&:not([hidden])': {display},
-  }))
-}
-
-/** @deprecated */
-function responsiveBoxSizingStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
-  const {media} = getTheme_v2(props.theme)
-
-  return _responsive(media, props.$sizing, (sizing) => ({
-    boxSizing: BOX_SIZING[sizing],
-  }))
-}
-
-/** @deprecated */
-function responsiveBoxHeightStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
-  const {media} = getTheme_v2(props.theme)
-
-  return _responsive(media, props.$height, (height) => ({
-    height: BOX_HEIGHT[height],
-  }))
-}
-
-/** @deprecated */
-function responsiveBoxOverflowStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
-  const {media} = getTheme_v2(props.theme)
-
-  return _responsive(media, props.$overflow, (overflow) => ({
-    overflow,
-  }))
-}

package/src/core/_compat/styles/box/index.ts

@@ -1,2 +0,0 @@
-export * from './boxStyle'
-export * from './types'

package/src/core/_compat/styles/box/types.ts

@@ -1,11 +0,0 @@
-import {BoxDisplay, BoxHeight, BoxOverflow, BoxSizing} from '../../../types'
-
-/**
- * @internal
- */
-export interface ResponsiveBoxStyleProps {
-  $display: BoxDisplay[]
-  $height: BoxHeight[]
-  $overflow: BoxOverflow[]
-  $sizing: BoxSizing[]
-}

package/src/core/_compat/styles/card/_cardColorStyle.ts

@@ -1,101 +0,0 @@
-import {ThemeColorState_v2, ThemeColorCard_v2} from '@sanity/ui/theme'
-import {CSSObject} from '@sanity/ui/theme'
-
-/**
- * @internal
- */
-export function _cardColorStyle(
-  base: ThemeColorCard_v2,
-  color: ThemeColorState_v2,
-  checkered = false,
-): CSSObject {
-  return {
-    // from base
-
-    '--card-backdrop-color': base.backdrop,
-
-    '--card-focus-ring-color': base.focusRing,
-
-    '--card-shadow-outline-color': base.shadow.outline,
-    '--card-shadow-umbra-color': base.shadow.umbra,
-    '--card-shadow-penumbra-color': base.shadow.penumbra,
-    '--card-shadow-ambient-color': base.shadow.ambient,
-
-    // from state
-
-    '--card-accent-fg-color': color.accent.fg,
-
-    '--card-avatar-gray-bg-color': color.avatar.gray.bg,
-    '--card-avatar-gray-fg-color': color.avatar.gray.fg,
-    '--card-avatar-blue-bg-color': color.avatar.blue.bg,
-    '--card-avatar-blue-fg-color': color.avatar.blue.fg,
-    '--card-avatar-purple-bg-color': color.avatar.purple.bg,
-    '--card-avatar-purple-fg-color': color.avatar.purple.fg,
-    '--card-avatar-magenta-bg-color': color.avatar.magenta.bg,
-    '--card-avatar-magenta-fg-color': color.avatar.magenta.fg,
-    '--card-avatar-red-bg-color': color.avatar.red.bg,
-    '--card-avatar-red-fg-color': color.avatar.red.fg,
-    '--card-avatar-orange-bg-color': color.avatar.orange.bg,
-    '--card-avatar-orange-fg-color': color.avatar.orange.fg,
-    '--card-avatar-yellow-bg-color': color.avatar.yellow.bg,
-    '--card-avatar-yellow-fg-color': color.avatar.yellow.fg,
-    '--card-avatar-green-bg-color': color.avatar.green.bg,
-    '--card-avatar-green-fg-color': color.avatar.green.fg,
-    '--card-avatar-cyan-bg-color': color.avatar.cyan.bg,
-    '--card-avatar-cyan-fg-color': color.avatar.cyan.fg,
-
-    '--card-bg-color': color.bg,
-    '--card-bg-image': checkered
-      ? `repeating-conic-gradient(${color.bg} 0% 25%, ${color.muted.bg} 0% 50%)`
-      : undefined,
-
-    '--card-border-color': color.border,
-
-    '--card-badge-default-bg-color': color.badge.default.bg,
-    '--card-badge-default-dot-color': color.badge.default.dot,
-    '--card-badge-default-fg-color': color.badge.default.fg,
-    '--card-badge-default-icon-color': color.badge.default.icon,
-    '--card-badge-primary-bg-color': color.badge.primary.bg,
-    '--card-badge-primary-dot-color': color.badge.primary.dot,
-    '--card-badge-primary-fg-color': color.badge.primary.fg,
-    '--card-badge-primary-icon-color': color.badge.primary.icon,
-    '--card-badge-positive-bg-color': color.badge.positive.bg,
-    '--card-badge-positive-dot-color': color.badge.positive.dot,
-    '--card-badge-positive-fg-color': color.badge.positive.fg,
-    '--card-badge-positive-icon-color': color.badge.positive.icon,
-    '--card-badge-caution-bg-color': color.badge.caution.bg,
-    '--card-badge-caution-dot-color': color.badge.caution.dot,
-    '--card-badge-caution-fg-color': color.badge.caution.fg,
-    '--card-badge-caution-icon-color': color.badge.caution.icon,
-    '--card-badge-critical-bg-color': color.badge.critical.bg,
-    '--card-badge-critical-dot-color': color.badge.critical.dot,
-    '--card-badge-critical-fg-color': color.badge.critical.fg,
-    '--card-badge-critical-icon-color': color.badge.critical.icon,
-
-    '--card-code-bg-color': color.code.bg,
-    '--card-code-fg-color': color.code.fg,
-
-    '--card-fg-color': color.fg,
-
-    '--card-icon-color': color.icon,
-
-    '--card-kbd-bg-color': color.kbd.bg,
-    '--card-kbd-border-color': color.kbd.border,
-    '--card-kbd-fg-color': color.kbd.fg,
-
-    '--card-link-fg-color': color.link.fg,
-
-    '--card-muted-bg-color': color.muted.bg,
-    '--card-muted-fg-color': color.muted.fg,
-
-    '--card-skeleton-from-color': color.skeleton.from,
-    '--card-skeleton-to-color': color.skeleton.to,
-
-    // deprecated variables (kept for legacy)
-
-    '--card-bg2-color': color.muted.bg,
-    '--card-link-color': color.link.fg,
-    '--card-hairline-soft-color': color.border,
-    '--card-hairline-hard-color': color.border,
-  }
-}

package/src/core/_compat/styles/card/index.ts

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

package/src/core/_compat/styles/flex/flexItemStyle.ts

@@ -1,26 +0,0 @@
-import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
-import {EMPTY_ARRAY} from '../../../constants'
-import {_responsive} from '../helpers'
-import {ThemeProps} from '../types'
-import {ResponsiveFlexItemStyleProps} from './types'
-
-const BASE_STYLE: CSSObject = {
-  minWidth: 0,
-  minHeight: 0,
-}
-
-export function flexItemStyle(): Array<
-  CSSObject | ((props: ResponsiveFlexItemStyleProps & ThemeProps) => CSSObject[])
-> {
-  return [BASE_STYLE, responsiveFlexItemStyle]
-}
-
-export function responsiveFlexItemStyle(
-  props: ResponsiveFlexItemStyleProps & ThemeProps,
-): CSSObject[] {
-  const {media} = getTheme_v2(props.theme)
-
-  if (!props.$flex) return EMPTY_ARRAY
-
-  return _responsive(media, props.$flex, (flex) => ({flex}))
-}