@sanity/ui 3.0.0-static.20 → 3.0.0-static.21

package/src/css/_responsiveClassName.ts

@@ -0,0 +1,45 @@
+// 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> | undefined,
+  options?: {
+    valueWhenTrue: T
+  },
+) {
+  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

@@ -0,0 +1,34 @@
+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]: {
+            '@media': {
+              [`screen and (min-width: ${bp}px)`]: rule,
+            },
+          },
+        },
+      })
+    }
+  }
+
+  return rules as ResponsiveRules
+}

package/src/css/_style.css.ts

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

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

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

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

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

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

@@ -0,0 +1,81 @@
+import {keyframes} from '@vanilla-extract/css'
+
+import {_style} from '../../_style.css'
+import {layers} from '../../layers.css'
+import {vars} from '../../vars.css'
+
+const zoomIn = keyframes({
+  // '@layer': {
+  //   [layers.components]: {
+  from: {
+    opacity: 0,
+    transform: 'scale(0.95)',
+  },
+  to: {
+    opacity: 1,
+    transform: 'scale(1)',
+  },
+  //   },
+  // },
+})
+
+const fadeIn = keyframes({
+  // '@layer': {
+  //   [layers.components]: {
+  from: {
+    opacity: 0,
+  },
+  to: {
+    opacity: 1,
+  },
+  //   },
+  // },
+})
+
+export const root = _style(layers.components, {
+  alignItems: 'center',
+  justifyContent: 'center',
+  outline: 'none',
+
+  background: vars.color.backdrop,
+
+  selectors: {
+    '&[data-animate]': {
+      animation: `${fadeIn} 200ms ease-out`,
+    },
+  },
+})
+
+export const card = _style(layers.components, {
+  width: '100%',
+  maxHeight: '100%',
+  overflow: ['hidden', 'clip'],
+
+  selectors: {
+    '[data-animate] > &': {
+      animation: `${zoomIn} 200ms ease-out`,
+    },
+  },
+})
+
+export const container = _style(layers.components, {
+  width: '100%',
+  height: '100%',
+})
+
+export const layout = _style(layers.components, {
+  width: '100%',
+})
+
+export const header = _style(layers.components, {
+  zIndex: 2,
+})
+
+export const content = _style(layers.components, {
+  zIndex: 1,
+  outline: 'none',
+})
+
+export const footer = _style(layers.components, {
+  zIndex: 3,
+})

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

@@ -1,38 +1,38 @@
 import {_composeClassNames} from '../../_composeClassNames'
-import {_scopeClassNames} from '../../_scopeClassNames'
-import {inset} from '../../aspects'
+import {inset} from '../../props'
+import {card, container, content, footer, header, layout, root} from './dialog.css'
 
 /** @public */
-export function dialog(): string | undefined {
-  return _composeClassNames(_scopeClassNames('dialog'), inset({inset: 0}))
+export function dialog(props: {className?: string}): string | undefined {
+  return _composeClassNames(props.className, root, inset({inset: 0}))
 }
 
 /** @public */
-export function dialogContainer(): string | undefined {
-  return _scopeClassNames('dialog-container')
+export function dialogCard(): string | undefined {
+  return card
 }
 
 /** @public */
-export function dialogCardRoot(): string | undefined {
-  return _scopeClassNames('dialog-card-root')
+export function dialogContainer(): string | undefined {
+  return container
 }
 
 /** @public */
 export function dialogLayout(): string | undefined {
-  return _scopeClassNames('dialog-layout')
+  return layout
 }
 
 /** @public */
 export function dialogHeader(): string | undefined {
-  return _scopeClassNames('dialog-header')
+  return header
 }
 
 /** @public */
 export function dialogContent(): string | undefined {
-  return _scopeClassNames('dialog-content')
+  return content
 }
 
 /** @public */
 export function dialogFooter(): string | undefined {
-  return _scopeClassNames('dialog-footer')
+  return footer
 }

package/src/css/components/index.ts

@@ -0,0 +1,6 @@
+export * from './breadcrumbs'
+export * from './dialog'
+export * from './menu'
+export * from './skeleton'
+export * from './toast'
+export * from './tree'

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

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

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

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

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

@@ -0,0 +1,132 @@
+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({
+  // '@layer': {
+  //   [layers.components]: {
+  '0%': {
+    backgroundPosition: '100%',
+  },
+  '100%': {
+    backgroundPosition: '-100%',
+  },
+  //   },
+  // },
+})
+
+export const root = _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 = _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,7 +1,7 @@
 import {_composeClassNames} from '../../_composeClassNames'
-import {_resp} from '../../_resp'
-import {_scopeClassNames} from '../../_scopeClassNames'
-import {radius} from '../../aspects/radius'
+import {_responsiveClassName} from '../../_responsiveClassName'
+import {radius} from '../../props/radius'
+import {codeScale, font, headingScale, labelScale, root, textScale} from './skeleton.css'
 import type {
   CodeSkeletonStyleProps,
   HeadingSkeletonStyleProps,
@@ -12,25 +12,25 @@ import type {
 
 /** @beta */
 export function skeleton(props: SkeletonStyleProps): string | undefined {
-  return _composeClassNames(_scopeClassNames('skeleton'), radius(props))
+  return _composeClassNames(props.className, root, radius(props))
 }
 
 /** @beta */
 export function codeSkeleton(props: CodeSkeletonStyleProps): string | undefined {
-  return _scopeClassNames('font-skeleton', _resp('code-skeleton', props.size))
+  return _composeClassNames(props.className, font, _responsiveClassName(codeScale, props.size))
 }
 
 /** @beta */
 export function headingSkeleton(props: HeadingSkeletonStyleProps): string | undefined {
-  return _scopeClassNames('font-skeleton', _resp('heading-skeleton', props.size))
+  return _composeClassNames(props.className, font, _responsiveClassName(headingScale, props.size))
 }
 
 /** @beta */
 export function labelSkeleton(props: LabelSkeletonStyleProps): string | undefined {
-  return _scopeClassNames('font-skeleton', _resp('label-skeleton', props.size))
+  return _composeClassNames(props.className, font, _responsiveClassName(labelScale, props.size))
 }
 
 /** @beta */
 export function textSkeleton(props: TextSkeletonStyleProps): string | undefined {
-  return _scopeClassNames('font-skeleton', _resp('text-skeleton', props.size))
+  return _composeClassNames(props.className, font, _responsiveClassName(textScale, props.size))
 }

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

@@ -1,28 +1,34 @@
 import type {FontCodeSize, FontHeadingSize, FontLabelSize, FontTextSize} from '@sanity/ui/theme'
 
-import type {RadiusStyleProps} from '../../aspects/radius'
+import type {RadiusStyleProps} from '../../props/radius'
 import type {ResponsiveProp} from '../../types'
 
 /** @beta */
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export interface SkeletonStyleProps extends RadiusStyleProps {}
+
+export interface SkeletonStyleProps extends 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

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

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

@@ -1,26 +1,11 @@
-import {_scopeClassNames} from '../../_scopeClassNames'
+import {layer, root} from './toast.css'
 
 /** @public */
 export function toastLayer() {
-  return _scopeClassNames('toast-layer')
+  return layer
 }
 
 /** @public */
 export function toast() {
-  return _scopeClassNames('toast')
-}
-
-/** @public */
-export function toastLoadingBar() {
-  return _scopeClassNames('toast-loading-bar')
-}
-
-/** @public */
-export function toastLoadingBarProgress() {
-  return _scopeClassNames('toast-loading-bar-progress')
-}
-
-/** @public */
-export function toastLoadingBarMask() {
-  return _scopeClassNames('toast-loading-bar-mask')
+  return root
 }

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

@@ -0,0 +1,65 @@
+import {globalStyle} from '@vanilla-extract/css'
+
+import {_style} from '../../_style.css'
+import {layers} from '../../layers.css'
+import {vars} from '../../vars.css'
+
+export const item = _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,6 +1,7 @@
-import {_scopeClassNames} from '../../_scopeClassNames'
+import {_composeClassNames} from '../../_composeClassNames'
+import {item} from './tree.css'
 
 /** @beta */
-export function treeItem(): string | undefined {
-  return _scopeClassNames('tree-item')
+export function treeItem(props: {className?: string}) {
+  return _composeClassNames(props.className, item)
 }