@sanity/ui 4.0.0-v4.1 → 4.0.1

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

@@ -1,18 +0,0 @@
-import type {FontTextSize} from '@sanity/ui/theme'
-
-import type {FlexStyleProps} from '../../props/flex/types'
-import type {FontStyleProps} from '../../props/font/types'
-import type {MaxWidthStyleProps} from '../../props/maxWidth/types'
-import type {TextAlignStyleProps} from '../../props/textAlign/types'
-import type {ResponsiveProp} from '../../types'
-
-/** @public */
-export type TextSize = number
-
-/** @public */
-export interface TextStyleProps extends FlexStyleProps, FontStyleProps, MaxWidthStyleProps {
-  align?: TextAlignStyleProps['textAlign']
-  className?: string
-  muted?: boolean
-  size?: ResponsiveProp<FontTextSize>
-}

package/src/css/primitives/textArea/textArea.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/textArea/textArea.ts

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

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

@@ -1,7 +0,0 @@
-import type {InputStyleProps} from '../_input/types'
-
-/** @public */
-
-export interface TextAreaStyleProps extends InputStyleProps {
-  className?: string
-}

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

@@ -1,43 +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 root: string = _style(layers.primitives, {})
-
-export const prefix: string = _style(layers.primitives, {
-  borderTop: `${vars.input.border.width} solid ${vars.color.border}`,
-  borderLeft: `${vars.input.border.width} solid ${vars.color.border}`,
-  borderBottom: `${vars.input.border.width} solid ${vars.color.border}`,
-  borderTopLeftRadius: 'inherit',
-  borderBottomLeftRadius: 'inherit',
-})
-
-globalStyle(`${prefix} > span`, {
-  [`@layer ${layers.primitives}`]: {
-    display: 'block',
-    margin: `calc(0 - ${vars.input.border.width})`,
-    marginRight: 0,
-  },
-})
-
-export const element: string = _style(layers.primitives, {
-  borderRadius: 'inherit',
-})
-
-export const suffix: string = _style(layers.primitives, {
-  borderTop: `${vars.input.border.width}solid ${vars.color.border}`,
-  borderRight: `${vars.input.border.width}solid ${vars.color.border}`,
-  borderBottom: `${vars.input.border.width}solid ${vars.color.border}`,
-  borderTopRightRadius: 'inherit',
-  borderBottomRightRadius: 'inherit',
-})
-
-globalStyle(`${suffix} > span`, {
-  [`@layer ${layers.primitives}`]: {
-    display: 'block',
-    margin: `calc(0 - ${vars.input.border.width})`,
-    marginLeft: 0,
-  },
-})

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

@@ -1,24 +0,0 @@
-import {_composeClassNames} from '../../_composeClassNames'
-import {_input} from '../_input/input'
-import {element, prefix, root, suffix} from './textInput.css'
-import type {TextInputStyleProps} from './types'
-
-/** @public */
-export function textInput(props: TextInputStyleProps): string | undefined {
-  return _composeClassNames(props.className, root, _input(props))
-}
-
-/** @public */
-export function textInputPrefix(): string | undefined {
-  return prefix
-}
-
-/** @public */
-export function textInputElement(): string | undefined {
-  return element
-}
-
-/** @public */
-export function textInputSuffix(): string | undefined {
-  return suffix
-}

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

@@ -1,7 +0,0 @@
-import type {InputStyleProps} from '../_input/types'
-
-/** @public */
-
-export interface TextInputStyleProps extends InputStyleProps {
-  className?: string
-}

package/src/css/primitives/tooltip/tooltip.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/tooltip/tooltip.ts

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

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

@@ -1,4 +0,0 @@
-/** @public */
-export interface TooltipStyleProps {
-  className?: string
-}

package/src/css/props/alignItems/alignItems.css.ts

@@ -1,22 +0,0 @@
-import {_responsiveStyle} from '../../_responsiveStyle.css'
-import {layers} from '../../layers.css'
-import type {ResponsiveRuleOptions} from '../../types'
-import type {AlignItems} from './types'
-
-export const options: ResponsiveRuleOptions<AlignItems> = {
-  'baseline': _responsiveStyle(layers.props, {
-    alignItems: 'baseline',
-  }),
-  'center': _responsiveStyle(layers.props, {
-    alignItems: 'center',
-  }),
-  'flex-end': _responsiveStyle(layers.props, {
-    alignItems: 'flex-end',
-  }),
-  'flex-start': _responsiveStyle(layers.props, {
-    alignItems: 'flex-start',
-  }),
-  'stretch': _responsiveStyle(layers.props, {
-    alignItems: 'stretch',
-  }),
-}

package/src/css/props/alignItems/alignItems.ts

@@ -1,8 +0,0 @@
-import {_responsiveClassName} from '../../_responsiveClassName'
-import {options} from './alignItems.css'
-import type {AlignItemsStyleProps} from './types'
-
-/** @public */
-export function alignItems(props: AlignItemsStyleProps): string | undefined {
-  return _responsiveClassName(options, props.alignItems)
-}

package/src/css/props/alignItems/types.ts

@@ -1,9 +0,0 @@
-import type {ResponsiveProp} from '../../types'
-
-/** @public */
-export type AlignItems = 'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch'
-
-/** @public */
-export interface AlignItemsStyleProps {
-  alignItems?: ResponsiveProp<AlignItems>
-}

package/src/css/props/border/border.css.ts

@@ -1,65 +0,0 @@
-import {_responsiveStyle} from '../../_responsiveStyle.css'
-import {layers} from '../../layers.css'
-import type {ResponsiveRuleOptions} from '../../types'
-import {vars} from '../../vars.css'
-import type {BorderStyle} from './types'
-
-export const borderOptions: ResponsiveRuleOptions<BorderStyle> = {
-  solid: _responsiveStyle(layers.props, {
-    border: `${vars.card.border.width} solid ${vars.color.border}`,
-  }),
-  muted: _responsiveStyle(layers.props, {
-    border: `${vars.card.border.width} solid ${vars.color.muted.border}`,
-  }),
-  none: _responsiveStyle(layers.props, {
-    border: 'none',
-  }),
-}
-
-export const borderTopOptions: ResponsiveRuleOptions<BorderStyle> = {
-  solid: _responsiveStyle(layers.props, {
-    borderTop: `${vars.card.border.width} solid ${vars.color.border}`,
-  }),
-  muted: _responsiveStyle(layers.props, {
-    borderTop: `${vars.card.border.width} solid ${vars.color.muted.border}`,
-  }),
-  none: _responsiveStyle(layers.props, {
-    borderTop: 'none',
-  }),
-}
-
-export const borderRightOptions: ResponsiveRuleOptions<BorderStyle> = {
-  solid: _responsiveStyle(layers.props, {
-    borderRight: `${vars.card.border.width} solid ${vars.color.border}`,
-  }),
-  muted: _responsiveStyle(layers.props, {
-    borderRight: `${vars.card.border.width} solid ${vars.color.muted.border}`,
-  }),
-  none: _responsiveStyle(layers.props, {
-    borderRight: 'none',
-  }),
-}
-
-export const borderBottomOptions: ResponsiveRuleOptions<BorderStyle> = {
-  solid: _responsiveStyle(layers.props, {
-    borderBottom: `${vars.card.border.width} solid ${vars.color.border}`,
-  }),
-  muted: _responsiveStyle(layers.props, {
-    borderBottom: `${vars.card.border.width} solid ${vars.color.muted.border}`,
-  }),
-  none: _responsiveStyle(layers.props, {
-    borderBottom: 'none',
-  }),
-}
-
-export const borderLeftOptions: ResponsiveRuleOptions<BorderStyle> = {
-  solid: _responsiveStyle(layers.props, {
-    borderLeft: `${vars.card.border.width} solid ${vars.color.border}`,
-  }),
-  muted: _responsiveStyle(layers.props, {
-    borderLeft: `${vars.card.border.width} solid ${vars.color.muted.border}`,
-  }),
-  none: _responsiveStyle(layers.props, {
-    borderLeft: 'none',
-  }),
-}

package/src/css/props/border/border.ts

@@ -1,21 +0,0 @@
-import {_composeClassNames} from '../../_composeClassNames'
-import {_responsiveClassName} from '../../_responsiveClassName'
-import {
-  borderBottomOptions,
-  borderLeftOptions,
-  borderOptions,
-  borderRightOptions,
-  borderTopOptions,
-} from './border.css'
-import type {BorderStyleProps} from './types'
-
-/** @public */
-export function border(props: BorderStyleProps): string | undefined {
-  return _composeClassNames(
-    _responsiveClassName(borderOptions, props.border, {valueWhenTrue: 'solid'}),
-    _responsiveClassName(borderTopOptions, props.borderTop, {valueWhenTrue: 'solid'}),
-    _responsiveClassName(borderRightOptions, props.borderRight, {valueWhenTrue: 'solid'}),
-    _responsiveClassName(borderBottomOptions, props.borderBottom, {valueWhenTrue: 'solid'}),
-    _responsiveClassName(borderLeftOptions, props.borderLeft, {valueWhenTrue: 'solid'}),
-  )
-}

package/src/css/props/border/types.ts

@@ -1,13 +0,0 @@
-import type {ResponsiveProp} from '../../types'
-
-/** @public */
-export type BorderStyle = 'solid' | 'muted' | 'none'
-
-/** @public */
-export interface BorderStyleProps {
-  border?: ResponsiveProp<BorderStyle | boolean>
-  borderTop?: ResponsiveProp<BorderStyle | boolean>
-  borderRight?: ResponsiveProp<BorderStyle | boolean>
-  borderBottom?: ResponsiveProp<BorderStyle | boolean>
-  borderLeft?: ResponsiveProp<BorderStyle | boolean>
-}

package/src/css/props/boxSizing/boxSizing.css.ts

@@ -1,12 +0,0 @@
-import {_style} from '../../_style.css'
-import {layers} from '../../layers.css'
-import type {BoxSizing} from './types'
-
-export const options: Record<BoxSizing, string> = {
-  border: _style(layers.props, {
-    boxSizing: 'border-box',
-  }),
-  content: _style(layers.props, {
-    boxSizing: 'content-box',
-  }),
-} as const

package/src/css/props/boxSizing/boxSizing.ts

@@ -1,7 +0,0 @@
-import {options} from './boxSizing.css'
-import type {BoxSizingStyleProps} from './types'
-
-/** @internal */
-export function boxSizing(props: BoxSizingStyleProps): string | undefined {
-  return props.boxSizing && options[props.boxSizing]
-}

package/src/css/props/boxSizing/types.ts

@@ -1,7 +0,0 @@
-/** @public */
-export type BoxSizing = 'content' | 'border'
-
-/** @public */
-export interface BoxSizingStyleProps {
-  boxSizing?: BoxSizing
-}

package/src/css/props/display/display.css.ts

@@ -1,56 +0,0 @@
-import {_responsiveStyle} from '../../_responsiveStyle.css'
-import {layers} from '../../layers.css'
-import type {ResponsiveRuleOptions} from '../../types'
-import type {Display} from './types'
-
-export const options: ResponsiveRuleOptions<Display> = {
-  'block': _responsiveStyle(layers.props, {
-    selectors: {
-      '&:not([hidden])': {
-        display: 'block',
-      },
-    },
-  }),
-  'flex': _responsiveStyle(layers.props, {
-    selectors: {
-      '&:not([hidden])': {
-        display: 'flex',
-      },
-    },
-  }),
-  'grid': _responsiveStyle(layers.props, {
-    selectors: {
-      '&:not([hidden])': {
-        display: 'grid',
-      },
-    },
-  }),
-  'inline-block': _responsiveStyle(layers.props, {
-    selectors: {
-      '&:not([hidden])': {
-        display: 'inline-block',
-      },
-    },
-  }),
-  'inline-flex': _responsiveStyle(layers.props, {
-    selectors: {
-      '&:not([hidden])': {
-        display: 'inline-flex',
-      },
-    },
-  }),
-  'inline-grid': _responsiveStyle(layers.props, {
-    selectors: {
-      '&:not([hidden])': {
-        display: 'inline-grid',
-      },
-    },
-  }),
-  'none': _responsiveStyle(layers.props, {
-    selectors: {
-      '&:not([hidden])': {
-        display: 'none',
-      },
-    },
-  }),
-}

package/src/css/props/display/display.ts

@@ -1,8 +0,0 @@
-import {_responsiveClassName} from '../../_responsiveClassName'
-import {options} from './display.css'
-import type {DisplayStyleProps} from './types'
-
-/** @public */
-export function display(props: DisplayStyleProps): string | undefined {
-  return _responsiveClassName(options, props.display)
-}

package/src/css/props/display/types.ts

@@ -1,16 +0,0 @@
-import type {ResponsiveProp} from '../../types'
-
-/** @public */
-export type Display =
-  | 'block'
-  | 'inline-block'
-  | 'flex'
-  | 'inline-flex'
-  | 'grid'
-  | 'inline-grid'
-  | 'none'
-
-/** @public */
-export interface DisplayStyleProps {
-  display?: ResponsiveProp<Display>
-}

package/src/css/props/flex/flex.css.ts

@@ -1,52 +0,0 @@
-import {_responsiveStyle} from '../../_responsiveStyle.css'
-import {layers} from '../../layers.css'
-import type {ResponsiveRuleOptions} from '../../types'
-import type {Flex} from './types'
-
-export const options: ResponsiveRuleOptions<Flex> = {
-  none: _responsiveStyle(layers.props, {
-    flex: 'none',
-  }),
-  1: _responsiveStyle(layers.props, {
-    flex: 1,
-  }),
-  2: _responsiveStyle(layers.props, {
-    flex: 2,
-  }),
-  3: _responsiveStyle(layers.props, {
-    flex: 3,
-  }),
-  4: _responsiveStyle(layers.props, {
-    flex: 4,
-  }),
-  5: _responsiveStyle(layers.props, {
-    flex: 5,
-  }),
-  6: _responsiveStyle(layers.props, {
-    flex: 6,
-  }),
-  7: _responsiveStyle(layers.props, {
-    flex: 7,
-  }),
-  8: _responsiveStyle(layers.props, {
-    flex: 8,
-  }),
-  9: _responsiveStyle(layers.props, {
-    flex: 9,
-  }),
-  10: _responsiveStyle(layers.props, {
-    flex: 10,
-  }),
-  11: _responsiveStyle(layers.props, {
-    flex: 11,
-  }),
-  12: _responsiveStyle(layers.props, {
-    flex: 12,
-  }),
-  auto: _responsiveStyle(layers.props, {
-    flex: 'auto',
-  }),
-  initial: _responsiveStyle(layers.props, {
-    flex: 'initial',
-  }),
-}

package/src/css/props/flex/flex.ts

@@ -1,8 +0,0 @@
-import {_responsiveClassName} from '../../_responsiveClassName'
-import {options} from './flex.css'
-import type {FlexStyleProps} from './types'
-
-/** @public */
-export function flex(props: FlexStyleProps): string | undefined {
-  return _responsiveClassName(options, props.flex)
-}

package/src/css/props/flex/types.ts

@@ -1,9 +0,0 @@
-import type {ResponsiveProp} from '../../types'
-
-/** @public */
-export type Flex = 'none' | 'auto' | 'initial' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
-
-/** @public */
-export interface FlexStyleProps {
-  flex?: ResponsiveProp<Flex>
-}

package/src/css/props/flexDirection/flexDirection.css.ts

@@ -1,19 +0,0 @@
-import {_responsiveStyle} from '../../_responsiveStyle.css'
-import {layers} from '../../layers.css'
-import type {ResponsiveRuleOptions} from '../../types'
-import type {FlexDirection} from './types'
-
-export const options: ResponsiveRuleOptions<FlexDirection> = {
-  'row': _responsiveStyle(layers.props, {
-    flexDirection: 'row',
-  }),
-  'row-reverse': _responsiveStyle(layers.props, {
-    flexDirection: 'row-reverse',
-  }),
-  'column': _responsiveStyle(layers.props, {
-    flexDirection: 'column',
-  }),
-  'column-reverse': _responsiveStyle(layers.props, {
-    flexDirection: 'column-reverse',
-  }),
-}

package/src/css/props/flexDirection/flexDirection.ts

@@ -1,8 +0,0 @@
-import {_responsiveClassName} from '../../_responsiveClassName'
-import {options} from './flexDirection.css'
-import type {FlexDirectionStyleProps} from './types'
-
-/** @public */
-export function flexDirection(props: FlexDirectionStyleProps): string | undefined {
-  return _responsiveClassName(options, props.flexDirection)
-}

package/src/css/props/flexDirection/types.ts

@@ -1,9 +0,0 @@
-import type {ResponsiveProp} from '../../types'
-
-/** @public */
-export type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse'
-
-/** @public */
-export interface FlexDirectionStyleProps {
-  flexDirection?: ResponsiveProp<FlexDirection>
-}

package/src/css/props/flexWrap/flexWrap.css.ts

@@ -1,16 +0,0 @@
-import {_responsiveStyle} from '../../_responsiveStyle.css'
-import {layers} from '../../layers.css'
-import type {ResponsiveRuleOptions} from '../../types'
-import type {FlexWrap} from './types'
-
-export const options: ResponsiveRuleOptions<FlexWrap> = {
-  'wrap': _responsiveStyle(layers.props, {
-    flexWrap: 'wrap',
-  }),
-  'wrap-reverse': _responsiveStyle(layers.props, {
-    flexWrap: 'wrap-reverse',
-  }),
-  'nowrap': _responsiveStyle(layers.props, {
-    flexWrap: 'nowrap',
-  }),
-}

package/src/css/props/flexWrap/flexWrap.ts

@@ -1,8 +0,0 @@
-import {_responsiveClassName} from '../../_responsiveClassName'
-import {options} from './flexWrap.css'
-import type {FlexWrapStyleProps} from './types'
-
-/** @public */
-export function flexWrap(props: FlexWrapStyleProps): string | undefined {
-  return _responsiveClassName(options, props.flexWrap)
-}

package/src/css/props/flexWrap/types.ts

@@ -1,9 +0,0 @@
-import type {ResponsiveProp} from '../../types'
-
-/** @public */
-export type FlexWrap = 'wrap' | 'wrap-reverse' | 'nowrap'
-
-/** @public */
-export interface FlexWrapStyleProps {
-  flexWrap?: ResponsiveProp<FlexWrap>
-}

package/src/css/props/font/font.css.ts

@@ -1,94 +0,0 @@
-import type {FontWeight} from '@sanity/ui/theme'
-import {globalStyle} from '@vanilla-extract/css'
-
-import {_style} from '../../_style.css'
-import {layers} from '../../layers.css'
-import {vars} from '../../vars.css'
-
-export const root: string = _style(layers.props, {
-  'fontFamily': vars.font.family,
-  'fontFeatureSettings': vars.font.featureSettings,
-  'fontSize': vars.font.fontSize,
-  'lineHeight': vars.font.lineHeight,
-  'letterSpacing': vars.font.letterSpacing,
-  'fontWeight': vars.font.fontWeight,
-  'transform': `translateY(${vars.font.descenderHeight})`,
-  'padding': '1px 0',
-  'margin': '0',
-
-  'vars': {
-    [vars.font.capHeight]:
-      `calc(${vars.font.lineHeight} - ${vars.font.ascenderHeight} - ${vars.font.descenderHeight})`,
-    [vars.font.iconOffset]: `calc((${vars.font.capHeight} - ${vars.font.iconSize}) / 2)`,
-    [vars.font.customIconOffset]:
-      `calc((${vars.font.capHeight} - ${vars.font.customIconSize}) / 2)`,
-  },
-
-  ':before': {
-    content: '""',
-    display: 'block',
-    height: 0,
-    marginTop: `calc((0px - ${vars.font.ascenderHeight} - ${vars.font.descenderHeight}) - 1px)`,
-  },
-
-  ':after': {
-    content: '""',
-    display: 'block',
-    height: 0,
-    marginBottom: '-1px',
-  },
-})
-
-globalStyle(`${root} svg`, {
-  '@layer': {
-    [layers.props]: {
-      // Certain popular CSS libraries changes the defaults for SVG display
-      // Make sure SVGs are rendered as inline elements
-      display: 'inline',
-    },
-  },
-})
-globalStyle(`${root} svg:not([data-sanity-icon])`, {
-  '@layer': {
-    [layers.props]: {
-      fontSize: vars.font.customIconSize,
-      margin: vars.font.customIconOffset,
-    },
-  },
-})
-
-globalStyle(`${root} [data-sanity-icon]`, {
-  '@layer': {
-    [layers.props]: {
-      fontSize: vars.font.iconSize,
-      margin: vars.font.iconOffset,
-      // vectorEffect: 'non-scaling-stroke',
-    },
-  },
-})
-
-export const weights: Record<FontWeight, string> = {
-  regular: _style(layers.props, {
-    vars: {
-      [vars.font.fontWeight]: vars.font.weight.regular,
-    },
-  }),
-
-  medium: _style(layers.props, {
-    vars: {
-      [vars.font.fontWeight]: vars.font.weight.medium,
-    },
-  }),
-
-  semibold: _style(layers.props, {
-    vars: {
-      [vars.font.fontWeight]: vars.font.weight.semibold,
-    },
-  }),
-
-  bold: _style(layers.props, {
-    vars: {
-      [vars.font.fontWeight]: vars.font.weight.bold,
-    },
-  }),
-}

package/src/css/props/font/font.ts

@@ -1,8 +0,0 @@
-import {_composeClassNames} from '../../_composeClassNames'
-import {root, weights} from './font.css'
-import type {FontStyleProps} from './types'
-
-/** @public */
-export function font(props: FontStyleProps): string | undefined {
-  return _composeClassNames(root, weights[props.weight ?? 'regular'])
-}