@sanity/ui 4.0.0-v4.1 → 4.0.1

package/src/css/primitives/code/code.css.ts

@@ -1,272 +0,0 @@
-import {FONT_CODE_SIZE, type FontCodeSize} from '@sanity/ui/theme'
-import {globalStyle} 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'
-
-export const root: string = _style(layers.primitives, {
-  vars: {
-    [vars.font.family]: vars.font.code.family,
-    [vars.font.featureSettings]: vars.font.code.featureSettings,
-
-    [vars.font.weight.regular]: vars.font.code.weight.regular,
-    [vars.font.weight.medium]: vars.font.code.weight.medium,
-    [vars.font.weight.semibold]: vars.font.code.weight.semibold,
-    [vars.font.weight.bold]: vars.font.code.weight.bold,
-  },
-
-  color: vars.color.code.fg,
-})
-
-globalStyle(`${root} a`, {
-  '@layer': {
-    [layers.primitives]: {
-      color: vars.color.link.fg,
-      textDecoration: 'none',
-    },
-  },
-})
-
-globalStyle(`${root} a:hover`, {
-  '@layer': {
-    [layers.primitives]: {
-      color: vars.color.fg,
-    },
-  },
-})
-
-globalStyle(`${root} svg`, {
-  '@layer': {
-    [layers.primitives]: {
-      color: vars.color.muted.fg,
-    },
-  },
-})
-
-globalStyle(`${root} code`, {
-  '@layer': {
-    [layers.primitives]: {
-      fontFamily: 'inherit',
-    },
-  },
-})
-
-// globalStyle(`${root} .token`, {
-//   '@layer': {
-//     [layers.primitives]: {},
-//   },
-// })
-globalStyle(`${root} .token.atrule`, {
-  '@layer': {
-    [layers.primitives]: {color: vars.color.code.token.atrule},
-  },
-})
-globalStyle(`${root} .token.attr-name`, {
-  '@layer': {
-    [layers.primitives]: {color: vars.color.code.token.attrName},
-  },
-})
-globalStyle(`${root} .token.attr-value`, {
-  '@layer': {
-    [layers.primitives]: {color: vars.color.code.token.attrValue},
-  },
-})
-globalStyle(`${root} .token.attribute`, {
-  '@layer': {
-    [layers.primitives]: {color: vars.color.code.token.attribute},
-  },
-})
-globalStyle(`${root} .token.boolean`, {
-  '@layer': {
-    [layers.primitives]: {color: vars.color.code.token.boolean},
-  },
-})
-globalStyle(`${root} .token.builtin`, {
-  '@layer': {
-    [layers.primitives]: {color: vars.color.code.token.builtin},
-  },
-})
-globalStyle(`${root} .token.cdata`, {
-  '@layer': {
-    [layers.primitives]: {color: vars.color.code.token.cdata},
-  },
-})
-globalStyle(`${root} .token.char`, {
-  '@layer': {
-    [layers.primitives]: {color: vars.color.code.token.char},
-  },
-})
-globalStyle(`${root} .token.class`, {
-  '@layer': {
-    [layers.primitives]: {color: vars.color.code.token.class},
-  },
-})
-globalStyle(`${root} .token.class-name`, {
-  '@layer': {
-    [layers.primitives]: {color: vars.color.code.token.className},
-  },
-})
-globalStyle(`${root} .token.comment`, {
-  '@layer': {
-    [layers.primitives]: {color: vars.color.code.token.comment},
-  },
-})
-globalStyle(`${root} .token.constant`, {
-  '@layer': {
-    [layers.primitives]: {color: vars.color.code.token.constant},
-  },
-})
-globalStyle(`${root} .token.deleted`, {
-  '@layer': {
-    [layers.primitives]: {color: vars.color.code.token.deleted},
-  },
-})
-globalStyle(`${root} .token.doctype`, {
-  '@layer': {
-    [layers.primitives]: {color: vars.color.code.token.doctype},
-  },
-})
-globalStyle(`${root} .token.entity`, {
-  '@layer': {
-    [layers.primitives]: {color: vars.color.code.token.entity},
-  },
-})
-globalStyle(`${root} .token.function`, {
-  '@layer': {
-    [layers.primitives]: {color: vars.color.code.token.function},
-  },
-})
-globalStyle(`${root} .token.hexcode`, {
-  '@layer': {
-    [layers.primitives]: {color: vars.color.code.token.hexcode},
-  },
-})
-globalStyle(`${root} .token.id`, {
-  '@layer': {
-    [layers.primitives]: {color: vars.color.code.token.id},
-  },
-})
-globalStyle(`${root} .token.important`, {
-  '@layer': {
-    [layers.primitives]: {color: vars.color.code.token.important},
-  },
-})
-globalStyle(`${root} .token.inserted`, {
-  '@layer': {
-    [layers.primitives]: {color: vars.color.code.token.inserted},
-  },
-})
-globalStyle(`${root} .token.keyword`, {
-  '@layer': {
-    [layers.primitives]: {color: vars.color.code.token.keyword},
-  },
-})
-globalStyle(`${root} .token.number`, {
-  '@layer': {
-    [layers.primitives]: {color: vars.color.code.token.number},
-  },
-})
-globalStyle(`${root} .token.operator`, {
-  '@layer': {
-    [layers.primitives]: {color: vars.color.code.token.operator},
-  },
-})
-globalStyle(`${root} .token.prolog`, {
-  '@layer': {
-    [layers.primitives]: {color: vars.color.code.token.prolog},
-  },
-})
-globalStyle(`${root} .token.property`, {
-  '@layer': {
-    [layers.primitives]: {color: vars.color.code.token.property},
-  },
-})
-globalStyle(`${root} .token.pseudo-class`, {
-  '@layer': {
-    [layers.primitives]: {color: vars.color.code.token.pseudoClass},
-  },
-})
-globalStyle(`${root} .token.pseudo-element`, {
-  '@layer': {
-    [layers.primitives]: {color: vars.color.code.token.pseudoElement},
-  },
-})
-globalStyle(`${root} .token.punctuation`, {
-  '@layer': {
-    [layers.primitives]: {color: vars.color.code.token.punctuation},
-  },
-})
-
-globalStyle(`${root} .token.attr-value:not(.attr-equals).punctuation`, {
-  '@layer': {
-    [layers.primitives]: {color: 'inherit'},
-  },
-})
-
-globalStyle(`${root} .token.regex`, {
-  '@layer': {
-    [layers.primitives]: {color: vars.color.code.token.regex},
-  },
-})
-globalStyle(`${root} .token.selector`, {
-  '@layer': {
-    [layers.primitives]: {color: vars.color.code.token.selector},
-  },
-})
-globalStyle(`${root} .token.string`, {
-  '@layer': {
-    [layers.primitives]: {color: vars.color.code.token.string},
-  },
-})
-globalStyle(`${root} .token.symbol`, {
-  '@layer': {
-    [layers.primitives]: {color: vars.color.code.token.symbol},
-  },
-})
-globalStyle(`${root} .token.tag`, {
-  '@layer': {
-    [layers.primitives]: {color: vars.color.code.token.tag},
-  },
-})
-globalStyle(`${root} .token.unit`, {
-  '@layer': {
-    [layers.primitives]: {color: vars.color.code.token.unit},
-  },
-})
-globalStyle(`${root} .token.url`, {
-  '@layer': {
-    [layers.primitives]: {color: vars.color.code.token.url},
-  },
-})
-globalStyle(`${root} .token.variable`, {
-  '@layer': {
-    [layers.primitives]: {color: vars.color.code.token.variable},
-  },
-})
-
-export const scale: ResponsiveRuleOptions<FontCodeSize> = {
-  ..._fromEntries(
-    FONT_CODE_SIZE.map((s) => {
-      const v = vars.font.code.scale[s]
-
-      return [
-        s,
-        _responsiveStyle(layers.primitives, {
-          vars: {
-            [vars.font.fontSize]: v.fontSize,
-            [vars.font.lineHeight]: v.lineHeight,
-            [vars.font.letterSpacing]: v.letterSpacing,
-            [vars.font.iconSize]: v.iconSize,
-            [vars.font.ascenderHeight]: v.ascenderHeight,
-            [vars.font.descenderHeight]: v.descenderHeight,
-            [vars.font.customIconSize]: v.customIconSize,
-          },
-        }),
-      ]
-    }),
-  ),
-}

package/src/css/primitives/code/code.ts

@@ -1,19 +0,0 @@
-import {_composeClassNames} from '../../_composeClassNames'
-import {_responsiveClassName} from '../../_responsiveClassName'
-import {display} from '../../props/display/display'
-import {flex} from '../../props/flex/flex'
-import {font} from '../../props/font/font'
-import {root, scale} from './code.css'
-import type {CodeStyleProps} from './types'
-
-/** @public */
-export function code(props: CodeStyleProps): string | undefined {
-  return _composeClassNames(
-    props.className,
-    root,
-    _responsiveClassName(scale, props.size ?? 1),
-    display({display: 'block'}),
-    flex(props),
-    font(props),
-  )
-}

package/src/css/primitives/code/types.ts

@@ -1,11 +0,0 @@
-import type {FontCodeSize} from '@sanity/ui/theme'
-
-import type {FlexStyleProps} from '../../props/flex/types'
-import type {FontStyleProps} from '../../props/font/types'
-import type {ResponsiveProp} from '../../types'
-
-/** @public */
-export interface CodeStyleProps extends FlexStyleProps, Omit<FontStyleProps, 'align'> {
-  className?: string
-  size?: ResponsiveProp<FontCodeSize>
-}

package/src/css/primitives/container/container.css.ts

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

package/src/css/primitives/container/container.ts

@@ -1,17 +0,0 @@
-import {_composeClassNames} from '../../_composeClassNames'
-import {margin} from '../../props/margin/margin'
-import {maxWidth} from '../../props/maxWidth/maxWidth'
-import {width} from '../../props/width/width'
-import {root} from './container.css'
-import type {ContainerStyleProps} from './types'
-
-/** @public */
-export function container(props: ContainerStyleProps): string | undefined {
-  return _composeClassNames(
-    props.className,
-    root,
-    margin({marginX: 'auto'}),
-    maxWidth({maxWidth: props.width}),
-    width({width: 'fill'}),
-  )
-}

package/src/css/primitives/container/types.ts

@@ -1,9 +0,0 @@
-import type {ContainerWidth} from '@sanity/ui/theme'
-
-import type {ResponsiveProp} from '../../types'
-
-/** @public */
-export interface ContainerStyleProps {
-  className?: string
-  width?: ResponsiveProp<ContainerWidth>
-}

package/src/css/primitives/heading/heading.css.ts

@@ -1,86 +0,0 @@
-import {FONT_HEADING_SIZE, type FontHeadingSize} from '@sanity/ui/theme'
-import {globalStyle} 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'
-
-export const root: string = _style(layers.primitives, {
-  vars: {
-    [vars.font.family]: vars.font.heading.family,
-    [vars.font.featureSettings]: vars.font.heading.featureSettings,
-
-    [vars.font.weight.regular]: vars.font.heading.weight.regular,
-    [vars.font.weight.medium]: vars.font.heading.weight.medium,
-    [vars.font.weight.semibold]: vars.font.heading.weight.semibold,
-    [vars.font.weight.bold]: vars.font.heading.weight.bold,
-  },
-
-  color: vars.color.fg,
-})
-
-globalStyle(`${root} a`, {
-  '@layer': {
-    [layers.primitives]: {
-      color: vars.color.link.fg,
-      textDecoration: 'none',
-    },
-  },
-})
-
-globalStyle(`${root} a:hover`, {
-  '@layer': {
-    [layers.primitives]: {
-      color: vars.color.fg,
-    },
-  },
-})
-
-globalStyle(`${root} code`, {
-  '@layer': {
-    [layers.primitives]: {
-      fontFamily: vars.font.code.family,
-      color: vars.color.code.fg,
-      backgroundColor: vars.color.code.bg,
-      borderRadius: vars.radius[2],
-    },
-  },
-})
-
-globalStyle(`${root} svg`, {
-  '@layer': {
-    [layers.primitives]: {
-      color: vars.color.muted.fg,
-    },
-  },
-})
-
-export const muted: string = _style(layers.primitives, {
-  color: vars.color.muted.fg,
-})
-
-export const sizes: ResponsiveRuleOptions<FontHeadingSize> = {
-  ..._fromEntries(
-    FONT_HEADING_SIZE.map((s) => {
-      const v = vars.font.heading.scale[s]
-
-      return [
-        s,
-        _responsiveStyle(layers.primitives, {
-          vars: {
-            [vars.font.fontSize]: v.fontSize,
-            [vars.font.lineHeight]: v.lineHeight,
-            [vars.font.letterSpacing]: v.letterSpacing,
-            [vars.font.iconSize]: v.iconSize,
-            [vars.font.ascenderHeight]: v.ascenderHeight,
-            [vars.font.descenderHeight]: v.descenderHeight,
-            [vars.font.customIconSize]: v.customIconSize,
-          },
-        }),
-      ]
-    }),
-  ),
-}

package/src/css/primitives/heading/heading.ts

@@ -1,22 +0,0 @@
-import {_composeClassNames} from '../../_composeClassNames'
-import {_responsiveClassName} from '../../_responsiveClassName'
-import {display} from '../../props/display/display'
-import {flex} from '../../props/flex/flex'
-import {font} from '../../props/font/font'
-import {textAlign} from '../../props/textAlign/textAlign'
-import {muted, root, sizes} from './heading.css'
-import type {HeadingStyleProps} from './types'
-
-/** @public */
-export function heading(props: HeadingStyleProps): string | undefined {
-  return _composeClassNames(
-    props.className,
-    root,
-    props.muted && muted,
-    _responsiveClassName(sizes, props.size ?? 1),
-    display({display: 'block'}),
-    flex(props),
-    font(props),
-    textAlign({textAlign: props.align}),
-  )
-}

package/src/css/primitives/heading/types.ts

@@ -1,14 +0,0 @@
-import type {FontHeadingSize} from '@sanity/ui/theme'
-
-import type {FlexStyleProps} from '../../props/flex/types'
-import type {FontStyleProps} from '../../props/font/types'
-import type {TextAlignStyleProps} from '../../props/textAlign/types'
-import type {ResponsiveProp} from '../../types'
-
-/** @public */
-export interface HeadingStyleProps extends FontStyleProps, FlexStyleProps {
-  align?: TextAlignStyleProps['textAlign']
-  className?: string
-  muted?: boolean
-  size?: ResponsiveProp<FontHeadingSize>
-}

package/src/css/primitives/kbd/kbd.css.ts

@@ -1,16 +0,0 @@
-import {_style} from '../../_style.css'
-import {layers} from '../../layers.css'
-import {vars} from '../../vars.css'
-
-export const root: string = _style(layers.primitives, {
-  boxShadow: `inset 0 0 0 0.5px ${vars.color.border}`,
-  backgroundColor: vars.color.muted.bg,
-  font: 'inherit',
-  verticalAlign: 'top',
-
-  selectors: {
-    '&:not([hidden])': {
-      display: 'inline-block',
-    },
-  },
-})

package/src/css/primitives/kbd/kbd.ts

@@ -1,9 +0,0 @@
-import {_composeClassNames} from '../../_composeClassNames'
-import {radius} from '../../props/radius/radius'
-import {root} from './kbd.css'
-import type {KBDStyleProps} from './types'
-
-/** @public */
-export function kbd(props: KBDStyleProps): string | undefined {
-  return _composeClassNames(props.className, root, radius(props))
-}

package/src/css/primitives/kbd/types.ts

@@ -1,6 +0,0 @@
-import type {RadiusStyleProps} from '../../props/radius/types'
-
-/** @public */
-export interface KBDStyleProps extends RadiusStyleProps {
-  className?: string
-}

package/src/css/primitives/label/label.css.ts

@@ -1,87 +0,0 @@
-import {FONT_LABEL_SIZE, type FontLabelSize} from '@sanity/ui/theme'
-import {globalStyle} 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'
-
-export const root: string = _style(layers.primitives, {
-  vars: {
-    [vars.font.family]: vars.font.label.family,
-    [vars.font.featureSettings]: vars.font.label.featureSettings,
-
-    [vars.font.weight.regular]: vars.font.label.weight.regular,
-    [vars.font.weight.medium]: vars.font.label.weight.medium,
-    [vars.font.weight.semibold]: vars.font.label.weight.semibold,
-    [vars.font.weight.bold]: vars.font.label.weight.bold,
-  },
-
-  color: vars.color.fg,
-  textTransform: 'uppercase',
-})
-
-globalStyle(`${root} a`, {
-  '@layer': {
-    [layers.primitives]: {
-      color: vars.color.link.fg,
-      textDecoration: 'none',
-    },
-  },
-})
-
-globalStyle(`${root} a:hover`, {
-  '@layer': {
-    [layers.primitives]: {
-      color: vars.color.fg,
-    },
-  },
-})
-
-globalStyle(`${root} code`, {
-  '@layer': {
-    [layers.primitives]: {
-      fontFamily: vars.font.code.family,
-      color: vars.color.code.fg,
-      backgroundColor: vars.color.code.bg,
-      borderRadius: vars.radius[2],
-    },
-  },
-})
-
-globalStyle(`${root} svg`, {
-  '@layer': {
-    [layers.primitives]: {
-      color: vars.color.muted.fg,
-    },
-  },
-})
-
-export const muted: string = _style(layers.primitives, {
-  color: vars.color.muted.fg,
-})
-
-export const sizes: ResponsiveRuleOptions<FontLabelSize> = {
-  ..._fromEntries(
-    FONT_LABEL_SIZE.map((s) => {
-      const v = vars.font.label.scale[s]
-
-      return [
-        s,
-        _responsiveStyle(layers.primitives, {
-          vars: {
-            [vars.font.fontSize]: v.fontSize,
-            [vars.font.lineHeight]: v.lineHeight,
-            [vars.font.letterSpacing]: v.letterSpacing,
-            [vars.font.iconSize]: v.iconSize,
-            [vars.font.ascenderHeight]: v.ascenderHeight,
-            [vars.font.descenderHeight]: v.descenderHeight,
-            [vars.font.customIconSize]: v.customIconSize,
-          },
-        }),
-      ]
-    }),
-  ),
-}

package/src/css/primitives/label/label.ts

@@ -1,22 +0,0 @@
-import {_composeClassNames} from '../../_composeClassNames'
-import {_responsiveClassName} from '../../_responsiveClassName'
-import {display} from '../../props/display/display'
-import {flex} from '../../props/flex/flex'
-import {font} from '../../props/font/font'
-import {textAlign} from '../../props/textAlign/textAlign'
-import {muted, root, sizes} from './label.css'
-import type {LabelStyleProps} from './types'
-
-/** @public */
-export function label(props: LabelStyleProps): string | undefined {
-  return _composeClassNames(
-    props.className,
-    root,
-    props.muted && muted,
-    _responsiveClassName(sizes, props.size ?? 1),
-    display({display: 'block'}),
-    flex(props),
-    font(props),
-    textAlign({textAlign: props.align}),
-  )
-}

package/src/css/primitives/label/types.ts

@@ -1,14 +0,0 @@
-import type {FontLabelSize} from '@sanity/ui/theme'
-
-import type {FlexStyleProps} from '../../props/flex/types'
-import type {FontStyleProps} from '../../props/font/types'
-import type {TextAlignStyleProps} from '../../props/textAlign/types'
-import type {ResponsiveProp} from '../../types'
-
-/** @public */
-export interface LabelStyleProps extends FlexStyleProps, FontStyleProps {
-  align?: TextAlignStyleProps['textAlign']
-  className?: string
-  muted?: boolean
-  size?: ResponsiveProp<FontLabelSize>
-}

package/src/css/primitives/popover/popover.css.ts

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

package/src/css/primitives/popover/popover.ts

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