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

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

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

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

@@ -0,0 +1,2 @@
+export * from './alignItems'
+export * from './types'

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

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

@@ -0,0 +1,65 @@
+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.utils, {
+    border: `1px solid ${vars.color.border}`,
+  }),
+  muted: _responsiveStyle(layers.utils, {
+    border: `1px solid ${vars.color.muted.border}`,
+  }),
+  none: _responsiveStyle(layers.utils, {
+    border: 'none',
+  }),
+}
+
+export const borderTopOptions: ResponsiveRuleOptions<BorderStyle> = {
+  solid: _responsiveStyle(layers.utils, {
+    borderTop: `1px solid ${vars.color.border}`,
+  }),
+  muted: _responsiveStyle(layers.utils, {
+    borderTop: `1px solid ${vars.color.muted.border}`,
+  }),
+  none: _responsiveStyle(layers.utils, {
+    borderTop: 'none',
+  }),
+}
+
+export const borderRightOptions: ResponsiveRuleOptions<BorderStyle> = {
+  solid: _responsiveStyle(layers.utils, {
+    borderRight: `1px solid ${vars.color.border}`,
+  }),
+  muted: _responsiveStyle(layers.utils, {
+    borderRight: `1px solid ${vars.color.muted.border}`,
+  }),
+  none: _responsiveStyle(layers.utils, {
+    borderRight: 'none',
+  }),
+}
+
+export const borderBottomOptions: ResponsiveRuleOptions<BorderStyle> = {
+  solid: _responsiveStyle(layers.utils, {
+    borderBottom: `1px solid ${vars.color.border}`,
+  }),
+  muted: _responsiveStyle(layers.utils, {
+    borderBottom: `1px solid ${vars.color.muted.border}`,
+  }),
+  none: _responsiveStyle(layers.utils, {
+    borderBottom: 'none',
+  }),
+}
+
+export const borderLeftOptions: ResponsiveRuleOptions<BorderStyle> = {
+  solid: _responsiveStyle(layers.utils, {
+    borderLeft: `1px solid ${vars.color.border}`,
+  }),
+  muted: _responsiveStyle(layers.utils, {
+    borderLeft: `1px solid ${vars.color.muted.border}`,
+  }),
+  none: _responsiveStyle(layers.utils, {
+    borderLeft: 'none',
+  }),
+}

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

@@ -0,0 +1,36 @@
+// import {_resp} from '../../_resp'
+// import {_scopeClassNames} from '../../_scopeClassNames'
+// import type {BorderStyleProps} from './types'
+
+// /** @public */
+// export function border(props: BorderStyleProps): string | undefined {
+//   return _scopeClassNames(
+//     _resp('border', props.border),
+//     _resp('border-t', props.borderTop),
+//     _resp('border-r', props.borderRight),
+//     _resp('border-b', props.borderBottom),
+//     _resp('border-l', props.borderLeft),
+//   )
+// }
+
+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) {
+  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

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

@@ -0,0 +1,11 @@
+import {_style} from '../../_style.css'
+import {layers} from '../../layers.css'
+
+export const options = {
+  border: _style(layers.utils, {
+    boxSizing: 'border-box',
+  }),
+  content: _style(layers.utils, {
+    boxSizing: 'content-box',
+  }),
+} as const

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

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

package/src/css/{aspects → props}/boxSizing/types.ts

@@ -1,9 +1,7 @@
-import type {ResponsiveProp} from '../../types'
-
 /** @public */
 export type BoxSizing = 'content' | 'border'
 
 /** @public */
 export interface BoxSizingStyleProps {
-  boxSizing?: ResponsiveProp<BoxSizing>
+  boxSizing?: BoxSizing
 }

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

@@ -0,0 +1,56 @@
+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.utils, {
+    selectors: {
+      '&:not([hidden])': {
+        display: 'block',
+      },
+    },
+  }),
+  'flex': _responsiveStyle(layers.utils, {
+    selectors: {
+      '&:not([hidden])': {
+        display: 'flex',
+      },
+    },
+  }),
+  'grid': _responsiveStyle(layers.utils, {
+    selectors: {
+      '&:not([hidden])': {
+        display: 'grid',
+      },
+    },
+  }),
+  'inline-block': _responsiveStyle(layers.utils, {
+    selectors: {
+      '&:not([hidden])': {
+        display: 'inline-block',
+      },
+    },
+  }),
+  'inline-flex': _responsiveStyle(layers.utils, {
+    selectors: {
+      '&:not([hidden])': {
+        display: 'inline-flex',
+      },
+    },
+  }),
+  'inline-grid': _responsiveStyle(layers.utils, {
+    selectors: {
+      '&:not([hidden])': {
+        display: 'inline-grid',
+      },
+    },
+  }),
+  'none': _responsiveStyle(layers.utils, {
+    selectors: {
+      '&:not([hidden])': {
+        display: 'none',
+      },
+    },
+  }),
+}

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

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

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

@@ -0,0 +1,52 @@
+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.utils, {
+    flex: 'none',
+  }),
+  1: _responsiveStyle(layers.utils, {
+    flex: 1,
+  }),
+  2: _responsiveStyle(layers.utils, {
+    flex: 2,
+  }),
+  3: _responsiveStyle(layers.utils, {
+    flex: 3,
+  }),
+  4: _responsiveStyle(layers.utils, {
+    flex: 4,
+  }),
+  5: _responsiveStyle(layers.utils, {
+    flex: 5,
+  }),
+  6: _responsiveStyle(layers.utils, {
+    flex: 6,
+  }),
+  7: _responsiveStyle(layers.utils, {
+    flex: 7,
+  }),
+  8: _responsiveStyle(layers.utils, {
+    flex: 8,
+  }),
+  9: _responsiveStyle(layers.utils, {
+    flex: 9,
+  }),
+  10: _responsiveStyle(layers.utils, {
+    flex: 10,
+  }),
+  11: _responsiveStyle(layers.utils, {
+    flex: 11,
+  }),
+  12: _responsiveStyle(layers.utils, {
+    flex: 12,
+  }),
+  auto: _responsiveStyle(layers.utils, {
+    flex: 'auto',
+  }),
+  initial: _responsiveStyle(layers.utils, {
+    flex: 'initial',
+  }),
+}

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

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

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

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

@@ -0,0 +1,19 @@
+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.utils, {
+    flexDirection: 'row',
+  }),
+  'row-reverse': _responsiveStyle(layers.utils, {
+    flexDirection: 'row-reverse',
+  }),
+  'column': _responsiveStyle(layers.utils, {
+    flexDirection: 'column',
+  }),
+  'column-reverse': _responsiveStyle(layers.utils, {
+    flexDirection: 'column-reverse',
+  }),
+}

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

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

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

@@ -0,0 +1,2 @@
+export * from './flexDirection'
+export * from './types'

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

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

@@ -0,0 +1,16 @@
+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.utils, {
+    flexWrap: 'wrap',
+  }),
+  'wrap-reverse': _responsiveStyle(layers.utils, {
+    flexWrap: 'wrap-reverse',
+  }),
+  'nowrap': _responsiveStyle(layers.utils, {
+    flexWrap: 'nowrap',
+  }),
+}

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

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

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

@@ -0,0 +1,2 @@
+export * from './flexWrap'
+export * from './types'

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

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

@@ -0,0 +1,93 @@
+import {globalStyle} from '@vanilla-extract/css'
+
+import {_style} from '../../_style.css'
+import {layers} from '../../layers.css'
+import {vars} from '../../vars.css'
+
+export const root = _style(layers.utils, {
+  '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.utils]: {
+      // 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.utils]: {
+      fontSize: vars.font.customIconSize,
+      margin: vars.font.customIconOffset,
+    },
+  },
+})
+
+globalStyle(`${root} [data-sanity-icon]`, {
+  '@layer': {
+    [layers.utils]: {
+      fontSize: vars.font.iconSize,
+      margin: vars.font.iconOffset,
+      // vectorEffect: 'non-scaling-stroke',
+    },
+  },
+})
+
+export const weights = {
+  regular: _style(layers.utils, {
+    vars: {
+      [vars.font.fontWeight]: vars.font.weight.regular,
+    },
+  }),
+
+  medium: _style(layers.utils, {
+    vars: {
+      [vars.font.fontWeight]: vars.font.weight.medium,
+    },
+  }),
+
+  semibold: _style(layers.utils, {
+    vars: {
+      [vars.font.fontWeight]: vars.font.weight.semibold,
+    },
+  }),
+
+  bold: _style(layers.utils, {
+    vars: {
+      [vars.font.fontWeight]: vars.font.weight.bold,
+    },
+  }),
+}

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

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

package/src/css/props/gap/gap.css.ts

@@ -0,0 +1,40 @@
+import {SPACE, type Space} from '@sanity/ui/theme'
+
+import {_fromEntries} from '../../_fromEntries'
+import {_responsiveStyle} from '../../_responsiveStyle.css'
+import {layers} from '../../layers.css'
+import type {ResponsiveRuleOptions} from '../../types'
+import {vars} from '../../vars.css'
+
+export const gapOptions: ResponsiveRuleOptions<Space> = {
+  ..._fromEntries(
+    SPACE.map((index) => [
+      index,
+      _responsiveStyle(layers.utils, {
+        gap: vars.space[index],
+      }),
+    ]),
+  ),
+}
+
+export const gapXOptions: ResponsiveRuleOptions<Space> = {
+  ..._fromEntries(
+    SPACE.map((index) => [
+      index,
+      _responsiveStyle(layers.utils, {
+        columnGap: vars.space[index],
+      }),
+    ]),
+  ),
+}
+
+export const gapYOptions: ResponsiveRuleOptions<Space> = {
+  ..._fromEntries(
+    SPACE.map((index) => [
+      index,
+      _responsiveStyle(layers.utils, {
+        rowGap: vars.space[index],
+      }),
+    ]),
+  ),
+}

package/src/css/props/gap/gap.ts

@@ -0,0 +1,13 @@
+import {_composeClassNames} from '../../_composeClassNames'
+import {_responsiveClassName} from '../../_responsiveClassName'
+import {gapOptions, gapXOptions, gapYOptions} from './gap.css'
+import type {GapStyleProps} from './types'
+
+/** @public */
+export function gap(props: GapStyleProps) {
+  return _composeClassNames(
+    _responsiveClassName(gapOptions, props.gap),
+    _responsiveClassName(gapXOptions, props.gapX),
+    _responsiveClassName(gapYOptions, props.gapY),
+  )
+}

package/src/css/props/gridAutoColumns/gridAutoColumns.css.ts

@@ -0,0 +1,19 @@
+import {_responsiveStyle} from '../../_responsiveStyle.css'
+import {layers} from '../../layers.css'
+import type {ResponsiveRuleOptions} from '../../types'
+import type {GridAutoCols} from './types'
+
+export const options: ResponsiveRuleOptions<GridAutoCols> = {
+  auto: _responsiveStyle(layers.utils, {
+    gridAutoColumns: 'auto',
+  }),
+  min: _responsiveStyle(layers.utils, {
+    gridAutoColumns: 'min-content',
+  }),
+  max: _responsiveStyle(layers.utils, {
+    gridAutoColumns: 'max-content',
+  }),
+  fr: _responsiveStyle(layers.utils, {
+    gridAutoColumns: 'minmax(0, 1fr)',
+  }),
+}

package/src/css/props/gridAutoColumns/gridAutoColumns.ts

@@ -0,0 +1,8 @@
+import {_responsiveClassName} from '../../_responsiveClassName'
+import {options} from './gridAutoColumns.css'
+import type {GridAutoColumnsStyleProps} from './types'
+
+/** @public */
+export function gridAutoColumns(props: GridAutoColumnsStyleProps) {
+  return _responsiveClassName(options, props.gridAutoColumns ?? props.autoCols)
+}

package/src/css/props/gridAutoColumns/index.ts

@@ -0,0 +1,2 @@
+export * from './gridAutoColumns'
+export * from './types'

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

@@ -0,0 +1,19 @@
+import type {ResponsiveProp} from '../../types'
+
+/** @public */
+export type GridAutoColumns = 'auto' | 'min' | 'max' | 'fr'
+
+/**
+ * @public
+ * @deprecated Use `GridAutoColumns` instead
+ * */
+export type GridAutoCols = GridAutoColumns
+
+/** @public */
+export interface GridAutoColumnsStyleProps {
+  /**
+   * @deprecated Use `gridAutoColumns` instead
+   */
+  autoCols?: ResponsiveProp<GridAutoCols>
+  gridAutoColumns?: ResponsiveProp<GridAutoColumns>
+}

package/src/css/props/gridAutoFlow/gridAutoFlow.css.ts

@@ -0,0 +1,19 @@
+import {_responsiveStyle} from '../../_responsiveStyle.css'
+import {layers} from '../../layers.css'
+import type {ResponsiveRuleOptions} from '../../types'
+import type {GridAutoFlow} from './types'
+
+export const options: ResponsiveRuleOptions<GridAutoFlow> = {
+  'row': _responsiveStyle(layers.utils, {
+    gridAutoFlow: 'row',
+  }),
+  'column': _responsiveStyle(layers.utils, {
+    gridAutoFlow: 'column-content',
+  }),
+  'row dense': _responsiveStyle(layers.utils, {
+    gridAutoFlow: 'row dense',
+  }),
+  'column dense': _responsiveStyle(layers.utils, {
+    gridAutoFlow: 'column dense',
+  }),
+}

package/src/css/props/gridAutoFlow/gridAutoFlow.ts

@@ -0,0 +1,8 @@
+import {_responsiveClassName} from '../../_responsiveClassName'
+import {options} from './gridAutoFlow.css'
+import type {GridAutoFlowStyleProps} from './types'
+
+/** @public */
+export function gridAutoFlow(props: GridAutoFlowStyleProps) {
+  return _responsiveClassName(options, props.gridAutoFlow ?? props.autoFlow)
+}

package/src/css/props/gridAutoFlow/index.ts

@@ -0,0 +1,2 @@
+export * from './gridAutoFlow'
+export * from './types'