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

package/src/css/primitives/text/text.style.ts

@@ -1,64 +0,0 @@
-import {FONT_TEXT_SIZE} from '@sanity/ui/theme'
-
-import {_responsiveRule} from '../../_responsiveRule'
-import {Style, StyleRules} from '../../types'
-import {vars} from '../../vars'
-
-const primitive: StyleRules = {
-  '.text': {
-    '--font-weight-regular': `var(--font-text-weight-regular)`,
-    '--font-weight-medium': `var(--font-text-weight-medium)`,
-    '--font-weight-semibold': `var(--font-text-weight-semibold)`,
-    '--font-weight-bold': `var(--font-text-weight-bold)`,
-
-    '--font-family': `var(--font-text-family)`,
-    '--font-feature-settings': `var(--font-text-feature-settings)`,
-
-    'color': 'var(--color-fg)',
-
-    '@nest': {
-      '& a': {
-        color: 'var(--color-link-fg)',
-        textDecoration: 'none',
-      },
-
-      '& a:hover': {
-        color: 'var(--color-fg)',
-      },
-
-      '& code': {
-        fontFamily: vars.font.code.family,
-        color: 'var(--color-code-fg)',
-        backgroundColor: 'var(--color-muted-bg)',
-        borderRadius: vars.radius[2],
-      },
-
-      '& svg': {
-        color: 'var(--color-muted-fg)',
-      },
-    },
-  },
-
-  // 'text-accent': {
-  //   '--color-fg': 'var(--color-accent-fg)',
-  // },
-
-  '.text-muted': {
-    color: 'var(--color-muted-fg)',
-    // '--color-fg': 'var(--color-tinted-default-fg-4)',
-  },
-}
-
-for (const size of FONT_TEXT_SIZE) {
-  _responsiveRule(primitive, `text-${size}`, {
-    '--font-size': `var(--font-text-${size}-size)`,
-    '--font-line-height': `var(--font-text-${size}-line-height)`,
-    '--font-letter-spacing': `var(--font-text-${size}-letter-spacing)`,
-    '--font-icon-size': `var(--font-text-${size}-icon-size)`,
-    '--font-ascender-height': `var(--font-text-${size}-ascender-height)`,
-    '--font-descender-height': `var(--font-text-${size}-descender-height)`,
-    // '--font-cap-height': `var(--font-text-${size}-cap-height)`,
-  })
-}
-
-export const textStyle: Style = {layers: {primitive}}

package/src/css/primitives/textArea/textArea.style.ts

@@ -1,9 +0,0 @@
-import {Style, StyleRules} from '../../types'
-
-const primitive: StyleRules = {
-  '.text-area': {
-    // todo
-  },
-}
-
-export const textAreaStyle: Style = {layers: {primitive}}

package/src/css/primitives/textInput/textInput.style.ts

@@ -1,167 +0,0 @@
-import {Style, StyleRules} from '../../types'
-import {vars} from '../../vars'
-
-const primitive: StyleRules = {
-  '.text-input': {
-    '--font-family': vars.font.text.family,
-
-    '@nest': {
-      '& > span': {
-        borderRadius: 'inherit',
-      },
-    },
-  },
-
-  '.text-input-prefix': {
-    'borderTop': '1px solid var(--color-border)',
-    'borderLeft': '1px solid var(--color-border)',
-    'borderBottom': '1px solid var(--color-border)',
-    'borderTopRightRadius': '0 !important',
-    'borderBottomRightRadius': '0 !important',
-
-    '@nest': {
-      '& > span': {
-        display: 'block',
-        margin: '-1px',
-      },
-    },
-  },
-
-  '.text-input-suffix': {
-    'borderTop': '1px solid var(--color-border)',
-    'borderRight': '1px solid var(--color-border)',
-    'borderBottom': '1px solid var(--color-border)',
-    'borderTopLeftRadius': '0 !important',
-    'borderBottomLeftRadius': '0 !important',
-
-    '@nest': {
-      '& > span': {
-        display: 'block',
-        margin: '-1px',
-      },
-    },
-  },
-
-  '.text-input-presentation': {
-    // position: 'absolute',
-    // top: 0,
-    // left: 0,
-    // right: 0,
-    // bottom: 0,
-    // display: 'block',
-    // pointerEvents: 'none',
-    // zIndex: 0,
-    // backgroundColor: 'var(--input-bg-color)',
-    // 'boxShadow': 'var(--input-box-shadow)',
-    // '--input-border-color': 'var(--color-input-default-enabled-border)',
-    // '--input-border-color': 'var(--color-tinted-default-border-1)',
-    // '--input-box-shadow': 'inset 0 0 0 1px var(--input-border-color)',
-    // border-top-left-radius: ${$hasPrefix ? 0 : undefined};
-    // border-bottom-left-radius: ${$hasPrefix ? 0 : undefined};
-    // border-top-right-radius: ${$hasSuffix ? 0 : undefined};
-    // border-bottom-right-radius: ${$hasSuffix ? 0 : undefined};
-    // '@nest': {
-    //   'input:hover + &': {
-    //     '--input-border-color': 'var(--color-tinted-default-border-2)',
-    //   },
-    //   'input:focus + &': {
-    //     '--input-border-color': 'var(--color-tinted-default-border-2)',
-    //   },
-    // },
-    // &[data-scheme='${$scheme}'][data-tone='${$tone}'] {
-    //   --card-bg-color: ${color.input.default.enabled.bg};
-    //   --card-fg-color: ${color.input.default.enabled.fg};
-    //   /* enabled */
-    //   *:not(:disabled) + &[data-border] {
-    //     --input-box-shadow: ${focusRingBorderStyle({
-    //       color: color.input.default.enabled.border,
-    //       width: input.border.width,
-    //     })};
-    //   }
-    //   /* invalid */
-    //   *:not(:disabled):invalid + & {
-    //     --card-bg-color: ${color.input.invalid.enabled.bg};
-    //     --card-fg-color: ${color.input.invalid.enabled.fg};
-    //     &[data-border] {
-    //       --input-box-shadow: ${focusRingBorderStyle({
-    //         color: color.input.invalid.enabled.border,
-    //         width: input.border.width,
-    //       })};
-    //     }
-    //   }
-    //   /* focused */
-    //   *:not(:disabled):focus + & {
-    //     &[data-border] {
-    //       --input-box-shadow: ${$unstableDisableFocusRing
-    //         ? undefined
-    //         : focusRingStyle({
-    //             border: {color: color.input.default.enabled.border, width: input.border.width},
-    //             focusRing: input.text.focusRing,
-    //           })};
-    //     }
-    //     &:not([data-border]) {
-    //       --input-box-shadow: ${$unstableDisableFocusRing
-    //         ? undefined
-    //         : focusRingStyle({focusRing: input.text.focusRing})};
-    //     }
-    //   }
-    //   /* disabled */
-    //   *:not(:invalid):disabled + & {
-    //     --card-bg-color: ${color.input.default.disabled.bg} !important;
-    //     --card-fg-color: ${color.input.default.disabled.fg} !important;
-    //     --card-icon-color: ${color.input.default.disabled.fg} !important;
-    //     &[data-border] {
-    //       --input-box-shadow: ${focusRingBorderStyle({
-    //         color: color.input.default.disabled.border,
-    //         width: input.border.width,
-    //       })};
-    //     }
-    //   }
-    //   *:invalid:disabled + & {
-    //     --card-bg-color: ${color.input.invalid.disabled.bg} !important;
-    //     --card-fg-color: ${color.input.invalid.disabled.fg} !important;
-    //     --card-icon-color: ${color.input.invalid.disabled.fg} !important;
-    //     &[data-border] {
-    //       --input-box-shadow: ${focusRingBorderStyle({
-    //         color: color.input.invalid.disabled.border,
-    //         width: input.border.width,
-    //       })};
-    //     }
-    //   }
-    //   /* readOnly */
-    //   *:not(:invalid):read-only + & {
-    //     --card-bg-color: ${color.input.default.readOnly.bg} !important;
-    //     --card-fg-color: ${color.input.default.readOnly.fg} !important;
-    //   }
-    //   *:invalid:read-only + & {
-    //     --card-bg-color: ${color.input.invalid.readOnly.bg} !important;
-    //     --card-fg-color: ${color.input.invalid.readOnly.fg} !important;
-    //   }
-    //   /* hovered */
-    //   @media (hover: hover) {
-    //     *:not(:disabled):not(:read-only):not(:invalid):hover + & {
-    //       --card-bg-color: ${color.input.default.hovered.bg};
-    //       --card-fg-color: ${color.input.default.hovered.fg};
-    //     }
-    //     *:invalid:not(:disabled):not(:read-only):hover + & {
-    //       --card-bg-color: ${color.input.invalid.hovered.bg};
-    //       --card-fg-color: ${color.input.invalid.hovered.fg};
-    //     }
-    //     *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + &[data-border] {
-    //       --input-box-shadow: ${focusRingBorderStyle({
-    //         color: color.input.default.hovered.border,
-    //         width: input.border.width,
-    //       })};
-    //     }
-    //     *:invalid:not(:disabled):not(:read-only):not(:focus):hover + &[data-border] {
-    //       --input-box-shadow: ${focusRingBorderStyle({
-    //         color: color.input.invalid.hovered.border,
-    //         width: input.border.width,
-    //       })};
-    //     }
-    //   }
-    // }
-  },
-}
-
-export const textInputStyle: Style = {layers: {primitive}}

package/src/css/primitives/token/token.style.ts

@@ -1,49 +0,0 @@
-import {Style, StyleRules} from '../../types'
-
-const primitive: StyleRules = {
-  '.token': {
-    '_prefix': false,
-
-    '@nest': {
-      '&.atrule': {color: 'var(--color-token-atrule)'},
-      '&.attr-name': {color: 'var(--color-token-attr-name)'},
-      '&.attr-value': {color: 'var(--color-token-attr-value)'},
-      '&.attribute': {color: 'var(--color-token-attribute)'},
-      '&.boolean': {color: 'var(--color-token-boolean)'},
-      '&.builtin': {color: 'var(--color-token-builtin)'},
-      '&.cdata': {color: 'var(--color-token-cdata)'},
-      '&.char': {color: 'var(--color-token-char)'},
-      '&.class': {color: 'var(--color-token-class)'},
-      '&.class-name': {color: 'var(--color-token-class-name)'},
-      '&.comment': {color: 'var(--color-token-comment)'},
-      '&.constant': {color: 'var(--color-token-constant)'},
-      '&.deleted': {color: 'var(--color-token-deleted)'},
-      '&.doctype': {color: 'var(--color-token-doctype)'},
-      '&.entity': {color: 'var(--color-token-entity)'},
-      '&.function': {color: 'var(--color-token-function)'},
-      '&.hexcode': {color: 'var(--color-token-hexcode)'},
-      '&.id': {color: 'var(--color-token-id)'},
-      '&.important': {color: 'var(--color-token-important)'},
-      '&.inserted': {color: 'var(--color-token-inserted)'},
-      '&.keyword': {color: 'var(--color-token-keyword)'},
-      '&.number': {color: 'var(--color-token-number)'},
-      '&.operator': {color: 'var(--color-token-operator)'},
-      '&.prolog': {color: 'var(--color-token-prolog)'},
-      '&.property': {color: 'var(--color-token-property)'},
-      '&.pseudo-class': {color: 'var(--color-token-pseudo-class)'},
-      '&.pseudo-element': {color: 'var(--color-token-pseudo-element)'},
-      '&.punctuation': {color: 'var(--color-token-punctuation)'},
-      '&.attr-value &:not(.attr-equals).punctuation': {color: 'inherit'},
-      '&.regex': {color: 'var(--color-token-regex)'},
-      '&.selector': {color: 'var(--color-token-selector)'},
-      '&.string': {color: 'var(--color-token-string)'},
-      '&.symbol': {color: 'var(--color-token-symbol)'},
-      '&.tag': {color: 'var(--color-token-tag)'},
-      '&.unit': {color: 'var(--color-token-unit)'},
-      '&.url': {color: 'var(--color-token-url)'},
-      '&.variable': {color: 'var(--color-token-variable)'},
-    },
-  },
-}
-
-export const tokenStyle: Style = {layers: {primitive}}

package/src/css/primitives/tooltip/tooltip.style.ts

@@ -1,21 +0,0 @@
-import {Style, StyleRules} from '../../types'
-
-const primitive: StyleRules = {
-  '.tooltip': {
-    pointerEvents: 'none',
-  },
-
-  '.tooltip-card': {
-    'willChange': 'transform',
-
-    '@nest': {
-      '&[data-animate] > *': {
-        // opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
-        opacity: `var(--motion-content-opacity, 1)`,
-        willChange: 'opacity',
-      },
-    },
-  },
-}
-
-export const tooltipStyle: Style = {layers: {primitive}}

package/src/css/scopeClassName.ts

@@ -1,6 +0,0 @@
-import {PREFIX} from './constants'
-
-export function scopeClassName(className: string | undefined) {
-  if (className === undefined) return undefined
-  return `${PREFIX}${className.trim()}`
-}

package/src/css/system.style.ts

@@ -1,158 +0,0 @@
-import {_mergeStyles} from './_mergeStyles'
-import {borderStyle} from './aspects/border/border.style'
-import {displayStyle} from './aspects/display/display.style'
-import {flexAlignStyle} from './aspects/flex/flexAlign.style'
-import {flexDirectionStyle} from './aspects/flex/flexDirection.style'
-import {flexJustifyStyle} from './aspects/flex/flexJustify.style'
-import {flexWrapStyle} from './aspects/flex/flexWrap.style'
-import {flexStyle} from './aspects/flexItem/flex.style'
-import {fontStyle} from './aspects/font/font.style'
-import {gapStyle} from './aspects/gap/gap.style'
-import {gridAutoColumnsStyle} from './aspects/grid/gridAutoColumns.style'
-import {gridAutoFlowStyle} from './aspects/grid/gridAutoFlow.style'
-import {gridAutoRowsStyle} from './aspects/grid/gridAutoRows.style'
-import {gridColumnsStyle} from './aspects/grid/gridColumns.style'
-import {gridRowsStyle} from './aspects/grid/gridRows.style'
-import {gridColumnStyle} from './aspects/gridItem/gridColumn.style'
-import {gridColumnEndStyle} from './aspects/gridItem/gridColumnEnd.style'
-import {gridColumnStartStyle} from './aspects/gridItem/gridColumnStart.style'
-import {gridRowStyle} from './aspects/gridItem/gridRow.style'
-import {gridRowEndStyle} from './aspects/gridItem/gridRowEnd.style'
-import {gridRowStartStyle} from './aspects/gridItem/gridRowStart.style'
-import {heightStyle} from './aspects/height/height.style'
-import {insetStyle} from './aspects/inset/inset.style'
-import {marginStyle} from './aspects/margin/margin.style'
-import {maxWidthStyle} from './aspects/maxWidth/maxWidth.style'
-import {minWidthStyle} from './aspects/minWidth/minWidth.style'
-import {outlineStyle} from './aspects/outline/outline.style'
-import {overflowStyle} from './aspects/overflow/overflow.style'
-import {paddingStyle} from './aspects/padding/padding.style'
-import {pointerEventsStyle} from './aspects/pointerEvents/pointerEvents.style'
-import {positionStyle} from './aspects/position/position.style'
-import {radiusStyle} from './aspects/radius/radius.style'
-import {shadowStyle} from './aspects/shadow/shadow.style'
-import {textOverflowStyle} from './aspects/textOverflow/textOverflow.style'
-import {widthStyle} from './aspects/width/width.style'
-import {breadcrumbsStyle} from './components/breadcrumbs/breadcrumbs.style'
-import {dialogStyle} from './components/dialog/dialog.style'
-import {menuStyle} from './components/menu/menu.style'
-import {skeletonStyle} from './components/skeleton/skeleton.style'
-import {toastStyle} from './components/toast/toast.style'
-import {treeStyle} from './components/tree/tree.style'
-import {_arrowStyle} from './primitives/_arrow/_arrow.style'
-import {_inputStyle} from './primitives/_input/_input.style'
-import {_selectableStyle} from './primitives/_selectable/_selectable.style'
-import {avatarStyle} from './primitives/avatar/avatar.style'
-import {badgeStyle} from './primitives/badge/badge.style'
-import {boxStyle} from './primitives/box/box.style'
-import {buttonStyle} from './primitives/button/button.style'
-import {cardStyle} from './primitives/card/card.style'
-import {checkboxStyle} from './primitives/checkbox/checkbox.style'
-import {codeStyle} from './primitives/code/code.style'
-import {containerStyle} from './primitives/container/container.style'
-import {headingStyle} from './primitives/heading/heading.style'
-import {kbdStyle} from './primitives/kbd/kbd.style'
-import {labelStyle} from './primitives/label/label.style'
-import {popoverStyle} from './primitives/popover/popover.style'
-import {radioStyle} from './primitives/radio/radio.style'
-import {selectStyle} from './primitives/select/select.style'
-import {spinnerStyle} from './primitives/spinner/spinner.style'
-import {stackStyle} from './primitives/stack/stack.style'
-import {switchStyle} from './primitives/switch/switch.style'
-import {textStyle} from './primitives/text/text.style'
-import {textAreaStyle} from './primitives/textArea/textArea.style'
-import {textInputStyle} from './primitives/textInput/textInput.style'
-import {tokenStyle} from './primitives/token/token.style'
-import {tooltipStyle} from './primitives/tooltip/tooltip.style'
-import {type Style} from './types'
-import {srOnlyStyle} from './utils/srOnly/srOnly.style'
-
-export const systemStyle: Style = _mergeStyles([
-  // NOTE: order matters in CSS
-
-  {
-    // define order of layers
-    layers: {
-      theme: {},
-      base: {},
-      util: {},
-      primitive: {},
-    },
-  },
-
-  // aspects
-  borderStyle,
-  displayStyle,
-  flexStyle,
-  flexAlignStyle,
-  flexDirectionStyle,
-  flexJustifyStyle,
-  flexWrapStyle,
-  fontStyle,
-  gapStyle,
-  gridAutoColumnsStyle,
-  gridAutoFlowStyle,
-  gridAutoRowsStyle,
-  gridColumnsStyle,
-  gridRowsStyle,
-  gridColumnStyle,
-  gridColumnStartStyle,
-  gridColumnEndStyle,
-  gridRowStyle,
-  gridRowStartStyle,
-  gridRowEndStyle,
-  heightStyle,
-  insetStyle,
-  marginStyle,
-  maxWidthStyle,
-  minWidthStyle,
-  outlineStyle,
-  overflowStyle,
-  paddingStyle,
-  pointerEventsStyle,
-  positionStyle,
-  radiusStyle,
-  shadowStyle,
-  textOverflowStyle,
-  widthStyle,
-
-  // utils
-  srOnlyStyle,
-
-  // primitives
-  _arrowStyle,
-  _inputStyle,
-  _selectableStyle,
-  avatarStyle,
-  badgeStyle,
-  boxStyle,
-  buttonStyle,
-  cardStyle,
-  checkboxStyle,
-  codeStyle,
-  containerStyle,
-  headingStyle,
-  kbdStyle,
-  labelStyle,
-  maxWidthStyle,
-  popoverStyle,
-  radioStyle,
-  selectStyle,
-  spinnerStyle,
-  stackStyle,
-  switchStyle,
-  textAreaStyle,
-  textInputStyle,
-  textOverflowStyle,
-  textStyle,
-  tokenStyle,
-  tooltipStyle,
-
-  // components
-  breadcrumbsStyle,
-  dialogStyle,
-  menuStyle,
-  skeletonStyle,
-  toastStyle,
-  treeStyle,
-])

package/src/css/utils/srOnly/srOnly.style.ts

@@ -1,14 +0,0 @@
-import {Style, StyleRules} from '../../types'
-
-const primitive: StyleRules = {
-  '.sr-only': {
-    display: 'block',
-    width: 0,
-    height: 0,
-    position: 'absolute',
-    // @ts-expect-error - TODO: fix this
-    overflow: ['hidden', 'clip'],
-  },
-}
-
-export const srOnlyStyle: Style = {layers: {primitive}}

package/src/ui/_compat/theme/themeContext.ts

@@ -1,10 +0,0 @@
-import {Context} from 'react'
-
-import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
-import {ThemeContextValue} from './types'
-
-/**
- * @internal
- */
-export const ThemeContext: Context<ThemeContextValue | null> =
-  createGlobalScopedContext<ThemeContextValue | null>('@sanity/ui/context/theme', null)

package/src/ui/hooks/useMatchMedia.ts

@@ -1,28 +0,0 @@
-import {useCallback, useDebugValue, useSyncExternalStore} from 'react'
-
-/**
- * Efficiently subscribes to `window.matchMedia` queries
- *
- * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Required if the hook is called during SSR (https://dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
- *
- * @public
- */
-export function useMatchMedia(
-  mediaQueryString: `(${string})`,
-  getServerSnapshot?: () => boolean,
-): boolean {
-  useDebugValue(mediaQueryString)
-
-  return useSyncExternalStore(
-    useCallback(
-      (onStoreChange) => {
-        const media = window.matchMedia(mediaQueryString)
-        media.addEventListener('change', onStoreChange)
-        return () => media.removeEventListener('change', onStoreChange)
-      },
-      [mediaQueryString],
-    ),
-    () => window.matchMedia(mediaQueryString).matches,
-    getServerSnapshot,
-  )
-}

package/src/ui/primitives/card/cardContext.ts

@@ -1,10 +0,0 @@
-import {Context} from 'react'
-
-import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
-import {CardContextValue} from './types'
-
-/**
- * @internal
- */
-export const CardContext: Context<CardContextValue | null> =
-  createGlobalScopedContext<CardContextValue | null>('@sanity/ui/context/card', null)

package/src/ui/primitives/card/cardProvider.tsx

@@ -1,19 +0,0 @@
-import {ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
-import {ReactNode, useMemo} from 'react'
-
-import {CardContext} from './cardContext'
-import {CardCompatProviderComponent} from './types'
-
-export function CardProvider(props: {
-  compat_provider?: CardCompatProviderComponent
-  children?: ReactNode
-  rendered?: boolean
-  tone: ThemeColorCardToneKey
-  scheme: ThemeColorSchemeKey
-}) {
-  const {children, rendered = false, tone, scheme} = props
-
-  const context = useMemo(() => ({rendered, tone, scheme}), [rendered, tone, scheme])
-
-  return <CardContext.Provider value={context}>{children}</CardContext.Provider>
-}

package/src/ui/primitives/card/index.ts

@@ -1,4 +0,0 @@
-export * from './card'
-export * from './cardProvider'
-export * from './types'
-export * from './useCard'

package/src/ui/primitives/card/types.ts

@@ -1,27 +0,0 @@
-import {ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
-import {ComponentType, ReactNode} from 'react'
-
-/**
- * @internal
- * @deprecated Use `CardStyleProps` from `@sanity/ui/css` instead.
- */
-export interface CardStyleProps {
-  $checkered: boolean
-  $focusRing: boolean
-  $muted: boolean
-  $tone: ThemeColorCardToneKey
-}
-
-export type CardCompatProviderComponent = ComponentType<{
-  children?: ReactNode
-  tone: ThemeColorCardToneKey
-  scheme: ThemeColorSchemeKey
-}>
-
-/** @internal */
-export interface CardContextValue {
-  compat_provider?: CardCompatProviderComponent
-  rendered: boolean
-  tone: ThemeColorCardToneKey
-  scheme: ThemeColorSchemeKey
-}

package/src/ui/primitives/card/useCard.ts

@@ -1,7 +0,0 @@
-import {useContext} from 'react'
-
-import {CardContext} from './cardContext'
-
-export function useCard() {
-  return useContext(CardContext)
-}

package/src/ui/primitives/stack/index.ts

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