@sanity/ui 4.0.0-v4.1 → 4.0.0

package/src/css/_responsiveClassName.ts

@@ -1,45 +0,0 @@
-// import {MEDIA} from './constants'
-import {BREAKPOINTS} from './constants'
-import type {ResponsiveProp, ResponsiveRuleOptions} from './types'
-
-export function _responsiveClassName<T extends string | number>(
-  rules: ResponsiveRuleOptions<T>,
-  _value: ResponsiveProp<T | boolean> | T | undefined,
-  options?: {
-    valueWhenTrue: T
-  },
-): string | undefined {
-  let value = _value
-
-  if (value === undefined) {
-    return undefined
-  }
-
-  if (typeof value === 'boolean') {
-    if (value && options?.valueWhenTrue) {
-      value = options.valueWhenTrue
-    } else {
-      return undefined
-    }
-  }
-
-  if (typeof value === 'string' || typeof value === 'number') {
-    return rules[value]?.[0]
-  }
-
-  const classNames: string[] = []
-
-  for (const _index of Object.keys(BREAKPOINTS)) {
-    const index = Number(_index) as keyof typeof BREAKPOINTS
-
-    const valueAtIndex = value[index]
-
-    if (valueAtIndex !== undefined && valueAtIndex !== null && typeof valueAtIndex !== 'boolean') {
-      const rule = rules[valueAtIndex]
-
-      classNames.push(rule[index])
-    }
-  }
-
-  return classNames.join(' ') || undefined
-}

package/src/css/_responsiveStyle.css.ts

@@ -1,34 +0,0 @@
-import {style, type StyleRule} from '@vanilla-extract/css'
-
-import {BREAKPOINTS} from './constants'
-import type {ResponsiveRules} from './types'
-
-export function _responsiveStyle(layer: string, rule: StyleRule): ResponsiveRules {
-  const rules: Partial<ResponsiveRules> = {}
-
-  for (const _index of Object.keys(BREAKPOINTS)) {
-    const index = Number(_index) as keyof typeof BREAKPOINTS
-
-    const bp = BREAKPOINTS[index]
-
-    if (bp === 0) {
-      rules[index] = style({
-        '@layer': {
-          [layer]: rule,
-        },
-      })
-    } else {
-      rules[index] = style({
-        '@layer': {
-          [layer]: {
-            '@container': {
-              [`(min-width: ${bp}px)`]: rule,
-            },
-          },
-        },
-      })
-    }
-  }
-
-  return rules as ResponsiveRules
-}

package/src/css/_style.css.ts

@@ -1,9 +0,0 @@
-import {style, type StyleRule} from '@vanilla-extract/css'
-
-export function _style(layer: string, rule: StyleRule): string {
-  return style({
-    '@layer': {
-      [layer]: rule,
-    },
-  })
-}

package/src/css/components/breadcrumbs/breadcrumbs.css.ts

@@ -1,6 +0,0 @@
-import {_style} from '../../_style.css'
-import {layers} from '../../layers.css'
-
-export const root: string = _style(layers.components, {
-  lineHeight: 0,
-})

package/src/css/components/breadcrumbs/breadcrumbs.ts

@@ -1,7 +0,0 @@
-import {_composeClassNames} from '../../_composeClassNames'
-import {root} from './breadcrumbs.css'
-
-/** @public */
-export function breadcrumbs(props: {className?: string}): string | undefined {
-  return _composeClassNames(props.className, root)
-}

package/src/css/components/dialog/dialog.css.ts

@@ -1,98 +0,0 @@
-import {keyframes} from '@vanilla-extract/css'
-
-import {_style} from '../../_style.css'
-import {layers} from '../../layers.css'
-import {vars} from '../../vars.css'
-
-const zoomIn = keyframes({
-  from: {
-    opacity: 0,
-    transform: 'scale(0.95)',
-  },
-  to: {
-    opacity: 1,
-    transform: 'scale(1)',
-  },
-})
-
-const fadeIn = keyframes({
-  from: {
-    opacity: 0,
-  },
-  to: {
-    opacity: 1,
-  },
-})
-
-export const root: string = _style(layers.components, {
-  alignItems: 'center',
-  justifyContent: 'center',
-  outline: 'none',
-
-  background: vars.color.backdrop,
-
-  selectors: {
-    '&[data-animate]': {
-      animation: `${fadeIn} 200ms ease-out`,
-    },
-  },
-})
-
-export const card: string = _style(layers.components, {
-  width: '100%',
-  maxHeight: '100%',
-  overflow: ['hidden', 'clip'],
-
-  selectors: {
-    '[data-animate] > &': {
-      animation: `${zoomIn} 200ms ease-out`,
-    },
-  },
-})
-
-export const container: string = _style(layers.components, {
-  width: '100%',
-  height: '100%',
-})
-
-export const scroller: string = _style(layers.components, {
-  width: '100%',
-  height: '100%',
-  // overflow: 'auto',
-  outline: 'none',
-})
-
-export const scrollerShadowTop: string = _style(layers.components, {
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  right: 0,
-  height: 4,
-  background: `linear-gradient(to top, color-mix(in srgb,transparent, ${vars.color.shadow.penumbra} 0%) 0%, color-mix(in srgb, ${vars.color.shadow.umbra} 100%, transparent 100%) 100%)`,
-  boxShadow: `inset 0 0.5px 0 color-mix(in srgb, transparent, ${vars.color.shadow.outline} 50%)`,
-  pointerEvents: 'none',
-})
-
-export const scrollerShadowBottom: string = _style(layers.components, {
-  position: 'absolute',
-  bottom: 0,
-  left: 0,
-  right: 0,
-  height: 4,
-  background: `linear-gradient(to bottom, color-mix(in srgb,transparent, ${vars.color.shadow.penumbra} 0%) 0%, color-mix(in srgb, ${vars.color.shadow.umbra} 100%, transparent 100%) 100%)`,
-  boxShadow: `inset 0 -0.5px 0 color-mix(in srgb, transparent, ${vars.color.shadow.outline} 50%)`,
-  pointerEvents: 'none',
-})
-
-export const header: string = _style(layers.components, {
-  zIndex: 2,
-})
-
-export const content: string = _style(layers.components, {
-  zIndex: 1,
-  outline: 'none',
-})
-
-export const footer: string = _style(layers.components, {
-  zIndex: 3,
-})

package/src/css/components/dialog/dialog.ts

@@ -1,58 +0,0 @@
-import {_composeClassNames} from '../../_composeClassNames'
-import {inset} from '../../props/inset/inset'
-import {
-  card,
-  container,
-  content,
-  footer,
-  header,
-  root,
-  scroller,
-  scrollerShadowBottom,
-  scrollerShadowTop,
-} from './dialog.css'
-
-/** @public */
-export function dialog(props: {className?: string}): string | undefined {
-  return _composeClassNames(props.className, root, inset({inset: 0}))
-}
-
-/** @public */
-export function dialogCard(): string | undefined {
-  return card
-}
-
-/** @public */
-export function dialogContainer(): string | undefined {
-  return container
-}
-
-/** @public */
-export function dialogHeader(): string | undefined {
-  return header
-}
-
-/** @public */
-export function dialogContent(): string | undefined {
-  return content
-}
-
-/** @public */
-export function dialogScroller(): string | undefined {
-  return scroller
-}
-
-/** @public */
-export function dialogScrollerShadowTop(): string | undefined {
-  return scrollerShadowTop
-}
-
-/** @public */
-export function dialogScrollerShadowBottom(): string | undefined {
-  return scrollerShadowBottom
-}
-
-/** @public */
-export function dialogFooter(): string | undefined {
-  return footer
-}

package/src/css/components/menu/menu.css.ts

@@ -1,14 +0,0 @@
-import {_style} from '../../_style.css'
-import {layers} from '../../layers.css'
-import {vars} from '../../vars.css'
-
-export const root: string = _style(layers.components, {
-  outline: 'none',
-})
-
-export const divider: string = _style(layers.components, {
-  height: vars.card.border.width,
-  border: 0,
-  backgroundColor: vars.color.border,
-  margin: 0,
-})

package/src/css/components/menu/menu.ts

@@ -1,12 +0,0 @@
-import {_composeClassNames} from '../../_composeClassNames'
-import {divider, root} from './menu.css'
-
-/** @public */
-export function menu(props: {className?: string}): string | undefined {
-  return _composeClassNames(props.className, root)
-}
-
-/** @public */
-export function menuDivider(props: {className?: string}): string | undefined {
-  return _composeClassNames(props.className, divider)
-}

package/src/css/components/skeleton/skeleton.css.ts

@@ -1,128 +0,0 @@
-import {
-  FONT_CODE_SIZE,
-  FONT_HEADING_SIZE,
-  FONT_LABEL_SIZE,
-  FONT_TEXT_SIZE,
-  type FontCodeSize,
-  type FontHeadingSize,
-  type FontLabelSize,
-  type FontTextSize,
-} from '@sanity/ui/theme'
-import {keyframes} from '@vanilla-extract/css'
-
-import {_fromEntries} from '../../_fromEntries'
-import {_responsiveStyle} from '../../_responsiveStyle.css'
-import {_style} from '../../_style.css'
-import {layers} from '../../layers.css'
-import type {ResponsiveRuleOptions} from '../../types'
-import {vars} from '../../vars.css'
-
-const pulse = keyframes({
-  '0%': {
-    backgroundPosition: '100%',
-  },
-  '100%': {
-    backgroundPosition: '-100%',
-  },
-})
-
-export const root: string = _style(layers.components, {
-  'backgroundColor': vars.color.skeleton.from,
-  'backgroundPosition': '100%',
-  'backgroundSize': '200% 100%',
-  'backgroundAttachment': 'fixed',
-  'opacity': 0,
-  'transition': 'opacity 200ms ease-in',
-
-  'selectors': {
-    '&[data-animated]': {
-      backgroundImage: [
-        `linear-gradient(to right,`,
-        `${vars.color.skeleton.from},`,
-        `${vars.color.skeleton.to},`,
-        `${vars.color.skeleton.from},`,
-        `${vars.color.skeleton.from},`,
-        `${vars.color.skeleton.from}`,
-        `)`,
-      ].join(''),
-      animationName: pulse,
-      animationTimingFunction: 'ease-in-out',
-      animationIterationCount: 'infinite',
-      animationDuration: '2000ms',
-    },
-
-    '&[data-visible]': {
-      opacity: 1,
-    },
-  },
-
-  '@media': {
-    'screen and (prefers-reduced-motion: no-preference)': {
-      backgroundColor: vars.color.skeleton.from,
-    },
-  },
-})
-
-export const font: string = _style(layers.components, {
-  height: `calc(${vars.font.skeleton.lineHeight} - ${vars.font.skeleton.ascenderHeight} - ${vars.font.skeleton.descenderHeight})`,
-})
-
-export const codeScale: ResponsiveRuleOptions<FontCodeSize> = {
-  ..._fromEntries(
-    FONT_CODE_SIZE.map((s) => [
-      s,
-      _responsiveStyle(layers.components, {
-        vars: {
-          [vars.font.skeleton.lineHeight]: vars.font.code.scale[s].lineHeight,
-          [vars.font.skeleton.ascenderHeight]: vars.font.code.scale[s].ascenderHeight,
-          [vars.font.skeleton.descenderHeight]: vars.font.code.scale[s].descenderHeight,
-        },
-      }),
-    ]),
-  ),
-}
-
-export const headingScale: ResponsiveRuleOptions<FontHeadingSize> = {
-  ..._fromEntries(
-    FONT_HEADING_SIZE.map((s) => [
-      s,
-      _responsiveStyle(layers.components, {
-        vars: {
-          [vars.font.skeleton.lineHeight]: vars.font.heading.scale[s].lineHeight,
-          [vars.font.skeleton.ascenderHeight]: vars.font.heading.scale[s].ascenderHeight,
-          [vars.font.skeleton.descenderHeight]: vars.font.heading.scale[s].descenderHeight,
-        },
-      }),
-    ]),
-  ),
-}
-
-export const labelScale: ResponsiveRuleOptions<FontLabelSize> = {
-  ..._fromEntries(
-    FONT_LABEL_SIZE.map((s) => [
-      s,
-      _responsiveStyle(layers.components, {
-        vars: {
-          [vars.font.skeleton.lineHeight]: vars.font.label.scale[s].lineHeight,
-          [vars.font.skeleton.ascenderHeight]: vars.font.label.scale[s].ascenderHeight,
-          [vars.font.skeleton.descenderHeight]: vars.font.label.scale[s].descenderHeight,
-        },
-      }),
-    ]),
-  ),
-}
-
-export const textScale: ResponsiveRuleOptions<FontTextSize> = {
-  ..._fromEntries(
-    FONT_TEXT_SIZE.map((s) => [
-      s,
-      _responsiveStyle(layers.components, {
-        vars: {
-          [vars.font.skeleton.lineHeight]: vars.font.text.scale[s].lineHeight,
-          [vars.font.skeleton.ascenderHeight]: vars.font.text.scale[s].ascenderHeight,
-          [vars.font.skeleton.descenderHeight]: vars.font.text.scale[s].descenderHeight,
-        },
-      }),
-    ]),
-  ),
-}

package/src/css/components/skeleton/skeleton.ts

@@ -1,38 +0,0 @@
-import {_composeClassNames} from '../../_composeClassNames'
-import {_responsiveClassName} from '../../_responsiveClassName'
-import {flex} from '../../props/flex/flex'
-import {margin} from '../../props/margin/margin'
-import {radius} from '../../props/radius/radius'
-import {codeScale, font, headingScale, labelScale, root, textScale} from './skeleton.css'
-import type {
-  CodeSkeletonStyleProps,
-  HeadingSkeletonStyleProps,
-  LabelSkeletonStyleProps,
-  SkeletonStyleProps,
-  TextSkeletonStyleProps,
-} from './types'
-
-/** @beta */
-export function skeleton(props: SkeletonStyleProps): string | undefined {
-  return _composeClassNames(props.className, root, flex(props), radius(props), margin(props))
-}
-
-/** @beta */
-export function codeSkeleton(props: CodeSkeletonStyleProps): string | undefined {
-  return _composeClassNames(props.className, font, _responsiveClassName(codeScale, props.size))
-}
-
-/** @beta */
-export function headingSkeleton(props: HeadingSkeletonStyleProps): string | undefined {
-  return _composeClassNames(props.className, font, _responsiveClassName(headingScale, props.size))
-}
-
-/** @beta */
-export function labelSkeleton(props: LabelSkeletonStyleProps): string | undefined {
-  return _composeClassNames(props.className, font, _responsiveClassName(labelScale, props.size))
-}
-
-/** @beta */
-export function textSkeleton(props: TextSkeletonStyleProps): string | undefined {
-  return _composeClassNames(props.className, font, _responsiveClassName(textScale, props.size))
-}

package/src/css/components/skeleton/types.ts

@@ -1,36 +0,0 @@
-import type {FontCodeSize, FontHeadingSize, FontLabelSize, FontTextSize} from '@sanity/ui/theme'
-
-import type {FlexStyleProps} from '../../props/flex/types'
-import type {MarginStyleProps} from '../../props/margin/types'
-import type {RadiusStyleProps} from '../../props/radius/types'
-import type {ResponsiveProp} from '../../types'
-
-/** @beta */
-
-export interface SkeletonStyleProps extends FlexStyleProps, MarginStyleProps, RadiusStyleProps {
-  className?: string
-}
-
-/** @beta */
-export interface CodeSkeletonStyleProps {
-  className?: string
-  size?: ResponsiveProp<FontCodeSize>
-}
-
-/** @beta */
-export interface HeadingSkeletonStyleProps {
-  className?: string
-  size?: ResponsiveProp<FontHeadingSize>
-}
-
-/** @beta */
-export interface LabelSkeletonStyleProps {
-  className?: string
-  size?: ResponsiveProp<FontLabelSize>
-}
-
-/** @beta */
-export interface TextSkeletonStyleProps {
-  className?: string
-  size?: ResponsiveProp<FontTextSize>
-}

package/src/css/components/toast/toast.css.ts

@@ -1,17 +0,0 @@
-import {_style} from '../../_style.css'
-import {layers} from '../../layers.css'
-
-export const layer: string = _style(layers.components, {
-  position: 'absolute',
-  right: 0,
-  bottom: 0,
-  pointerEvents: 'none',
-  // minWidth: `${320 / 16}rem`, // 320px
-  maxWidth: `${420 / 16}rem`, // 420px
-  width: '100%',
-})
-
-export const root: string = _style(layers.components, {
-  pointerEvents: 'all',
-  overflow: ['hidden', 'clip'],
-})

package/src/css/components/toast/toast.ts

@@ -1,11 +0,0 @@
-import {layer, root} from './toast.css'
-
-/** @public */
-export function toastLayer(): string {
-  return layer
-}
-
-/** @public */
-export function toast(): string {
-  return root
-}

package/src/css/components/tree/tree.css.ts

@@ -1,65 +0,0 @@
-import {globalStyle} from '@vanilla-extract/css'
-
-import {_style} from '../../_style.css'
-import {layers} from '../../layers.css'
-import {vars} from '../../vars.css'
-
-export const item: string = _style(layers.components, {
-  selectors: {
-    '&[role="treeitem"]': {
-      outline: 'none',
-    },
-  },
-})
-
-globalStyle(`${item}[role="none"] > [role="treeitem"]`, {
-  '@layer': {
-    [layers.components]: {
-      outline: 'none',
-      cursor: 'default',
-      borderRadius: '3px',
-
-      backgroundColor: vars.color.bg,
-      color: vars.color.fg,
-    },
-  },
-})
-
-globalStyle(`${item}[role="none"] > [role="treeitem"]:focus`, {
-  '@layer': {
-    [layers.components]: {
-      position: 'relative',
-    },
-  },
-})
-
-globalStyle(`${item}[role="treeitem"] > div`, {
-  '@layer': {
-    [layers.components]: {
-      cursor: 'default',
-      borderRadius: '3px',
-
-      backgroundColor: vars.color.bg,
-      color: vars.color.fg,
-    },
-  },
-})
-
-globalStyle(`${item}[role="treeitem"] > div`, {
-  '@layer': {
-    [layers.components]: {
-      cursor: 'default',
-      borderRadius: '3px',
-      backgroundColor: vars.color.bg,
-      color: vars.color.fg,
-    },
-  },
-})
-
-globalStyle(`${item}[role="treeitem"]:focus > div`, {
-  '@layer': {
-    [layers.components]: {
-      position: 'relative',
-    },
-  },
-})

package/src/css/components/tree/tree.ts

@@ -1,7 +0,0 @@
-import {_composeClassNames} from '../../_composeClassNames'
-import {item} from './tree.css'
-
-/** @beta */
-export function treeItem(props: {className?: string}): string | undefined {
-  return _composeClassNames(props.className, item)
-}

package/src/css/constants.ts

@@ -1,10 +0,0 @@
-/** @public */
-export const BREAKPOINTS = {
-  0: 0,
-  1: 360,
-  2: 600,
-  3: 900,
-  4: 1200,
-  5: 1800,
-  6: 2400,
-}

package/src/css/getVarName.ts

@@ -1,27 +0,0 @@
-import type {CSSVarFunction, CSSVarName} from './types'
-
-const RE_CSS_VAR = /^var\((.*)\)$/
-
-/**
- * Extract the name of a CSS variable.
- *
- * @example
- * ```ts
- * getVarName('var(--color-primary)') // '--color-primary'
- * ```
- *
- * @public
- */
-export function getVarName(variable: CSSVarFunction): CSSVarName {
-  const matches = variable.match(RE_CSS_VAR)
-
-  if (matches) {
-    return matches[1] as CSSVarName
-  }
-
-  // NOTE: This code path should not occur when using TypeScript,
-  // and is a potential source of bugs.
-
-  // If the variable is not a CSS variable, return it as is.
-  return variable as CSSVarName
-}