@sanity/ui 3.0.2 → 4.0.0-static.2

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): string {
+  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: string = _style(layers.components, {
+  lineHeight: 0,
+})

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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,98 @@
+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

@@ -0,0 +1,58 @@
+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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,128 @@
+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

@@ -0,0 +1,38 @@
+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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,11 @@
+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

@@ -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: 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

@@ -0,0 +1,7 @@
+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

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

package/src/css/getVarName.ts

@@ -0,0 +1,27 @@
+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
+}