@sanity/ui 3.0.0-static.3 → 3.0.0-static.30

package/src/css/_resp.ts

@@ -1,38 +0,0 @@
-// import {scopeClassName as _} from './scopeClassName'
-import {ResponsiveProp} from './types'
-
-function _(className: string) {
-  return className
-}
-
-export function _resp<T>(
-  prefix: string | undefined,
-  prop: ResponsiveProp<T> | undefined,
-): string | undefined {
-  if (prop === undefined || prop === false) {
-    return undefined
-  }
-
-  if (Array.isArray(prop)) {
-    return prop
-      .map((value, index) => {
-        if (value === undefined || (typeof prop === 'boolean' && prop === false)) return undefined
-
-        const className = (typeof value === 'boolean' ? [prefix] : [prefix, value])
-          .filter((s) => s === 0 || Boolean(s))
-          .join('-')
-          .replace(/\./g, '_')
-
-        return index === 0 ? _(className) : _(`${index}:${className}`)
-      })
-      .filter(Boolean)
-      .join(' ')
-  }
-
-  return _(
-    (typeof prop === 'boolean' ? [prefix] : [prefix, prop])
-      .filter((s) => s === 0 || Boolean(s))
-      .join('-')
-      .replace(/\./g, '_'),
-  )
-}

package/src/css/_responsiveRule.ts

@@ -1,38 +0,0 @@
-import type {Properties, StyleRules} from './types'
-
-/** @internal */
-export function _responsiveRule(rules: StyleRules, _name: string, properties: Properties): void {
-  const name = _name.replace(/\./g, '_')
-
-  rules[`.${name}`] = properties
-  rules[`.1\\:${name}`] = {
-    '@media': {
-      'screen and (min-width: 360px)': properties,
-    },
-  }
-  rules[`.2\\:${name}`] = {
-    '@media': {
-      'screen and (min-width: 600px)': properties,
-    },
-  }
-  rules[`.3\\:${name}`] = {
-    '@media': {
-      'screen and (min-width: 900px)': properties,
-    },
-  }
-  rules[`.4\\:${name}`] = {
-    '@media': {
-      'screen and (min-width: 1200px)': properties,
-    },
-  }
-  rules[`.5\\:${name}`] = {
-    '@media': {
-      'screen and (min-width: 1800px)': properties,
-    },
-  }
-  rules[`.6\\:${name}`] = {
-    '@media': {
-      'screen and (min-width: 2400px)': properties,
-    },
-  }
-}

package/src/css/aspects/border/border.style.ts

@@ -1,13 +0,0 @@
-import {_responsiveRule} from '../../_responsiveRule'
-import {Style, StyleRules} from '../../types'
-import {vars} from '../../vars'
-
-const util: StyleRules = {}
-
-_responsiveRule(util, 'border', {border: `1px solid ${vars.color.border}`})
-_responsiveRule(util, 'border-t', {borderTop: `1px solid ${vars.color.border}`})
-_responsiveRule(util, 'border-r', {borderRight: `1px solid ${vars.color.border}`})
-_responsiveRule(util, 'border-b', {borderBottom: `1px solid ${vars.color.border}`})
-_responsiveRule(util, 'border-l', {borderLeft: `1px solid ${vars.color.border}`})
-
-export const borderStyle: Style = {layers: {util}}

package/src/css/aspects/border/border.ts

@@ -1,14 +0,0 @@
-import {_resp} from '../../_resp'
-import {composeClassNames} from '../../composeClassNames'
-import {BorderStyleProps} from './types'
-
-/** @public */
-export function border(props: BorderStyleProps): string | undefined {
-  return composeClassNames(
-    _resp('border', props.border),
-    _resp('border-t', props.borderTop),
-    _resp('border-r', props.borderRight),
-    _resp('border-b', props.borderBottom),
-    _resp('border-l', props.borderLeft),
-  )
-}

package/src/css/aspects/border/index.ts

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

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

@@ -1,10 +0,0 @@
-import {ResponsiveProp} from '../../types'
-
-/** @public */
-export interface BorderStyleProps {
-  border?: ResponsiveProp<boolean>
-  borderTop?: ResponsiveProp<boolean>
-  borderRight?: ResponsiveProp<boolean>
-  borderBottom?: ResponsiveProp<boolean>
-  borderLeft?: ResponsiveProp<boolean>
-}

package/src/css/aspects/display/display.style.ts

@@ -1,34 +0,0 @@
-import {_responsiveRule} from '../../_responsiveRule'
-import {Style, StyleRules} from '../../types'
-
-const util: StyleRules = {}
-
-_responsiveRule(util, 'block', {
-  '@nest': {'&:not([hidden])': {display: 'block'}},
-})
-
-_responsiveRule(util, 'flex', {
-  '@nest': {'&:not([hidden])': {display: 'flex'}},
-})
-
-_responsiveRule(util, 'grid', {
-  '@nest': {'&:not([hidden])': {display: 'grid'}},
-})
-
-_responsiveRule(util, 'inline-block', {
-  '@nest': {'&:not([hidden])': {display: 'inline-block'}},
-})
-
-_responsiveRule(util, 'inline-flex', {
-  '@nest': {'&:not([hidden])': {display: 'inline-flex'}},
-})
-
-_responsiveRule(util, 'inline-grid', {
-  '@nest': {'&:not([hidden])': {display: 'inline-grid'}},
-})
-
-_responsiveRule(util, 'none', {
-  '@nest': {'&:not([hidden])': {display: 'none'}},
-})
-
-export const displayStyle: Style = {layers: {util}}

package/src/css/aspects/display/display.ts

@@ -1,7 +0,0 @@
-import {_resp} from '../../_resp'
-import {composeClassNames} from '../../composeClassNames'
-import {DisplayStyleProps} from './types'
-
-export function display(props: DisplayStyleProps): string | undefined {
-  return composeClassNames(_resp(undefined, props.display))
-}

package/src/css/aspects/display/index.ts

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

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

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

package/src/css/aspects/flex/flex.style.ts

@@ -1,30 +0,0 @@
-// import {responsiveRules} from '../../responsiveRules'
-// import {type Rules} from '../../types'
-
-// export const flexRules: Rules = {
-//   // direction
-//   // ...responsiveRules('row', {flexDirection: 'row'}),
-//   // ...responsiveRules('column', {flexDirection: 'column'}),
-
-//   // align
-//   ...responsiveRules('align-flex-start', {alignItems: 'flex-start'}),
-//   ...responsiveRules('align-flex-end', {alignItems: 'end'}),
-//   ...responsiveRules('align-center', {alignItems: 'center'}),
-//   ...responsiveRules('align-stretch', {alignItems: 'stretch'}),
-//   ...responsiveRules('align-baseline', {alignItems: 'baseline'}),
-
-//   // justify
-//   ...responsiveRules('justify-flex-start', {justifyContent: 'flex-start'}),
-//   ...responsiveRules('justify-flex-end', {justifyContent: 'flex-end'}),
-//   ...responsiveRules('justify-center', {justifyContent: 'center'}),
-//   ...responsiveRules('justify-between', {justifyContent: 'space-between'}),
-//   ...responsiveRules('justify-around', {justifyContent: 'space-around'}),
-//   ...responsiveRules('justify-evenly', {justifyContent: 'space-evenly'}),
-
-//   // wrap
-//   ...responsiveRules('wrap-nowrap', {flexWrap: 'nowrap'}),
-//   ...responsiveRules('wrap-wrap', {flexWrap: 'wrap'}),
-//   ...responsiveRules('wrap-reverse', {flexWrap: 'wrap-reverse'}),
-// }
-
-export {}

package/src/css/aspects/flex/flex.ts

@@ -1,13 +0,0 @@
-import {_resp} from '../../_resp'
-import {composeClassNames} from '../../composeClassNames'
-import {FlexStyleProps} from './types'
-
-/** @public */
-export function flex(props: FlexStyleProps): string | undefined {
-  return composeClassNames(
-    _resp('flex-align', props.align),
-    _resp('f', props.direction),
-    _resp('flex-justify', props.justify),
-    _resp('flex', props.wrap),
-  )
-}

package/src/css/aspects/flex/flexAlign.style.ts

@@ -1,12 +0,0 @@
-import {_responsiveRule} from '../../_responsiveRule'
-import type {Style, StyleRules} from '../../types'
-
-const util: StyleRules = {}
-
-_responsiveRule(util, 'flex-align-flex-start', {alignItems: 'flex-start'})
-_responsiveRule(util, 'flex-align-flex-end', {alignItems: 'flex-end'})
-_responsiveRule(util, 'flex-align-center', {alignItems: 'center'})
-_responsiveRule(util, 'flex-align-stretch', {alignItems: 'stretch'})
-_responsiveRule(util, 'flex-align-baseline', {alignItems: 'baseline'})
-
-export const flexAlignStyle: Style = {layers: {util}}

package/src/css/aspects/flex/flexDirection.style.ts

@@ -1,11 +0,0 @@
-import {_responsiveRule} from '../../_responsiveRule'
-import type {Style, StyleRules} from '../../types'
-
-const util: StyleRules = {}
-
-_responsiveRule(util, 'f-row', {flexDirection: 'row'})
-_responsiveRule(util, 'f-column', {flexDirection: 'column'})
-// _responsiveRule(util, 'f-row-reverse', {flexDirection: 'row-reverse'})
-// _responsiveRule(util, 'f-column-reverse', {flexDirection: 'column-reverse'})
-
-export const flexDirectionStyle: Style = {layers: {util}}

package/src/css/aspects/flex/flexJustify.style.ts

@@ -1,13 +0,0 @@
-import {_responsiveRule} from '../../_responsiveRule'
-import type {Style, StyleRules} from '../../types'
-
-const util: StyleRules = {}
-
-_responsiveRule(util, 'flex-justify-flex-start', {justifyContent: 'flex-start'})
-_responsiveRule(util, 'flex-justify-flex-end', {justifyContent: 'flex-end'})
-_responsiveRule(util, 'flex-justify-center', {justifyContent: 'center'})
-_responsiveRule(util, 'flex-justify-between', {justifyContent: 'space-between'})
-_responsiveRule(util, 'flex-justify-around', {justifyContent: 'space-around'})
-_responsiveRule(util, 'flex-justify-evenly', {justifyContent: 'space-evenly'})
-
-export const flexJustifyStyle: Style = {layers: {util}}

package/src/css/aspects/flex/flexWrap.style.ts

@@ -1,10 +0,0 @@
-import {_responsiveRule} from '../../_responsiveRule'
-import type {Style, StyleRules} from '../../types'
-
-const util: StyleRules = {}
-
-_responsiveRule(util, 'flex-nowrap', {flexWrap: 'nowrap'})
-_responsiveRule(util, 'flex-wrap', {flexWrap: 'wrap'})
-_responsiveRule(util, 'flex-wrap-reverse', {flexWrap: 'wrap-reverse'})
-
-export const flexWrapStyle: Style = {layers: {util}}

package/src/css/aspects/flex/index.ts

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

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

@@ -1,35 +0,0 @@
-import {ResponsiveProp} from '../../types'
-
-/**
- * @public
- */
-export type FlexAlign = 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'
-
-/**
- * @public
- */
-export type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse'
-
-/**
- * @public
- */
-export type FlexJustify =
-  | 'flex-start'
-  | 'flex-end'
-  | 'center'
-  | 'space-between'
-  | 'space-around'
-  | 'space-evenly'
-
-/**
- * @public
- */
-export type FlexWrap = 'wrap' | 'wrap-reverse' | 'nowrap'
-
-/** @public */
-export interface FlexStyleProps {
-  align?: ResponsiveProp<FlexAlign>
-  direction?: ResponsiveProp<FlexDirection>
-  justify?: ResponsiveProp<FlexJustify>
-  wrap?: ResponsiveProp<FlexWrap>
-}

package/src/css/aspects/flexItem/flex.style.ts

@@ -1,22 +0,0 @@
-import {_responsiveRule} from '../../_responsiveRule'
-import {Style, StyleRules} from '../../types'
-
-const util: StyleRules = {}
-
-_responsiveRule(util, 'f-none', {flex: 'none'})
-_responsiveRule(util, 'f-auto', {flex: 'auto'})
-_responsiveRule(util, 'f-initial', {flex: 'initial'})
-_responsiveRule(util, 'f-1', {flex: 1})
-_responsiveRule(util, 'f-2', {flex: 2})
-_responsiveRule(util, 'f-3', {flex: 3})
-_responsiveRule(util, 'f-4', {flex: 4})
-_responsiveRule(util, 'f-5', {flex: 5})
-_responsiveRule(util, 'f-6', {flex: 6})
-_responsiveRule(util, 'f-7', {flex: 7})
-_responsiveRule(util, 'f-8', {flex: 8})
-_responsiveRule(util, 'f-9', {flex: 9})
-_responsiveRule(util, 'f-10', {flex: 10})
-_responsiveRule(util, 'f-11', {flex: 11})
-_responsiveRule(util, 'f-12', {flex: 12})
-
-export const flexStyle: Style = {layers: {util}}

package/src/css/aspects/flexItem/flexItem.ts

@@ -1,8 +0,0 @@
-import {_resp} from '../../_resp'
-import {composeClassNames} from '../../composeClassNames'
-import {FlexItemStyleProps} from './types'
-
-/** @public */
-export function flexItem(props: FlexItemStyleProps): string | undefined {
-  return composeClassNames(_resp(`f`, props.flex))
-}

package/src/css/aspects/flexItem/index.ts

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

package/src/css/aspects/flexItem/types.ts

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

package/src/css/aspects/font/font.style.ts

@@ -1,151 +0,0 @@
-// import {responsiveRules} from '../../responsiveRules'
-import {_responsiveRule} from '../../_responsiveRule'
-import {Style, StyleRules} from '../../types'
-
-export const rules: StyleRules = {
-  '.font': {
-    // 'position': 'relative',
-    'fontFamily': 'var(--font-family)',
-    'fontFeatureSettings': 'var(--font-feature-settings)',
-    'fontSize': 'var(--font-size)',
-    'lineHeight': 'var(--font-line-height)',
-    'letterSpacing': 'var(--font-letter-spacing)',
-    'fontWeight': 'var(--font-weight)',
-    'transform': `translateY(var(--font-descender-height))`,
-    'padding': '1px 0',
-    'margin': '0',
-
-    '--font-icon-offset':
-      'calc(((var(--font-line-height) - var(--font-ascender-height) - var(--font-descender-height)) - var(--font-icon-size)) / 2)',
-    '--font-weight': 'var(--font-weight-regular)',
-
-    '@nest': {
-      '&:before': {
-        content: '""',
-        display: 'block',
-        height: 0,
-        marginTop: `calc((0px - var(--font-ascender-height) - var(--font-descender-height)) - 1px)`,
-      },
-
-      '&:after': {
-        content: '""',
-        display: 'block',
-        height: 0,
-        marginBottom: '-1px',
-      },
-
-      '& svg': {
-        // Certain popular CSS libraries changes the defaults for SVG display
-        // Make sure SVGs are rendered as inline elements
-        display: 'inline',
-      },
-
-      // todo
-      // '& svg:not([data-sanity-icon])': {
-      //   fontSize: 'calc(var(--custom-icon-size) / 16 * 1rem)',
-      //   margin: 'var(--custom-icon-offset)',
-      // },
-
-      '& [data-sanity-icon]': {
-        fontSize: 'var(--font-icon-size)',
-        margin: 'var(--font-icon-offset)',
-        vectorEffect: 'non-scaling-stroke',
-      },
-    },
-  },
-
-  '.font-regular': {
-    '--font-weight': 'var(--font-weight-regular)',
-  },
-
-  '.font-medium': {
-    '--font-weight': 'var(--font-weight-medium)',
-  },
-
-  '.font-semibold': {
-    '--font-weight': 'var(--font-weight-semibold)',
-  },
-
-  '.font-bold': {
-    '--font-weight': 'var(--font-weight-bold)',
-  },
-}
-
-// align
-
-_responsiveRule(rules, `text-align-initial`, {
-  textAlign: 'initial',
-})
-
-_responsiveRule(rules, `text-align-left`, {
-  textAlign: 'left',
-})
-
-_responsiveRule(rules, `text-align-center`, {
-  textAlign: 'center',
-})
-
-_responsiveRule(rules, `text-align-right`, {
-  textAlign: 'right',
-})
-
-_responsiveRule(rules, `text-align-justify`, {
-  textAlign: 'justify',
-})
-
-export const fontStyle: Style = {layers: {primitive: rules}}
-
-// .font {
-//   position: relative;
-//   font-family: var(--font-family);
-//   font-size: var(--font-size);
-//   line-height: var(--font-line-height);
-//   letter-spacing: var(--font-letter-spacing);
-//   font-weight: var(--font-weight);
-//   transform: translateY(var(--font-descender-height));
-//   padding: 1px 0;
-//   margin: 0;
-
-//   --font-negative-height: calc(var(--font-ascender-height) + var(--font-descender-height));
-//   --font-cap-height: calc(var(--font-line-height) - var(--font-negative-height));
-//   --font-icon-offset: calc((var(--font-cap-height) - var(--font-icon-size)) / 2);
-//   --font-custom-icon-size: calc((var(--font-size) * 1.125) / 2) * 2 + 1;
-//   --font-custom-icon-offset: calc((var(--font-cap-height) - var(--font-custom-icon-size)) / 2);
-
-//   &:before {
-//     content: '';
-//     display: block;
-//     height: 0;
-//     margin-top: calc(0px - var(--font-negative-height) - 1px);
-//   }
-
-//   &:after {
-//     content: '';
-//     display: block;
-//     height: 0;
-//     margin-bottom: -1px;
-//   }
-
-//   & > code,
-//   & > span {
-//     display: block;
-//   }
-
-//   &:not([hidden]) {
-//     display: block;
-//   }
-
-//   & svg:not([data-sanity-icon]) {
-//     /* todo */
-//     font-size: var(--font-custom-icon-size);
-//     /* font-size: calc(var(--font-custom-icon-size) / 16 * 1rem); */
-//     margin: var(--font-custom-icon-offset);
-//   }
-
-//   & [data-sanity-icon] {
-//     /* todo */
-//     font-size: var(--font-icon-size);
-//     /* font-size: calc(var(--font-icon-size) / 16 * 1rem); */
-//     margin: var(--font-icon-offset);
-//   }
-// }

package/src/css/aspects/font/font.ts

@@ -1,12 +0,0 @@
-import {_resp} from '../../_resp'
-import {composeClassNames} from '../../composeClassNames'
-import {FontStyleProps} from './types'
-
-/** @public */
-export function font(props: FontStyleProps): string | undefined {
-  return composeClassNames(
-    'font',
-    props.weight && `font-${props.weight}`,
-    _resp('text-align', props.align),
-  )
-}

package/src/css/aspects/font/index.ts

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

package/src/css/aspects/font/types.ts

@@ -1,12 +0,0 @@
-import {FontWeight} from '@sanity/ui/theme'
-
-/**
- * @public
- */
-export type TextAlign = 'left' | 'right' | 'center' | 'justify' | 'initial'
-
-/** @public */
-export interface FontStyleProps {
-  align?: TextAlign
-  weight?: FontWeight
-}

package/src/css/aspects/gap/gap.style.ts

@@ -1,21 +0,0 @@
-import {SPACE} from '@sanity/ui/theme'
-
-import {_responsiveRule} from '../../_responsiveRule'
-import {Style, StyleRules} from '../../types'
-import {vars} from '../../vars'
-
-const util: StyleRules = {}
-
-for (const space of SPACE) {
-  _responsiveRule(util, `g-${space}`, {gap: vars.space[space]})
-}
-
-for (const space of SPACE) {
-  _responsiveRule(util, `gx-${space}`, {columnGap: vars.space[space]})
-}
-
-for (const space of SPACE) {
-  _responsiveRule(util, `gy-${space}`, {rowGap: vars.space[space]})
-}
-
-export const gapStyle: Style = {layers: {util}}

package/src/css/aspects/gap/gap.ts

@@ -1,8 +0,0 @@
-import {_resp} from '../../_resp'
-import {composeClassNames} from '../../composeClassNames'
-import {GapStyleProps} from './types'
-
-/** @public */
-export function gap(props: GapStyleProps): string | undefined {
-  return composeClassNames(_resp(`g`, props.gap), _resp(`gx`, props.gapX), _resp(`gy`, props.gapY))
-}

package/src/css/aspects/gap/index.ts

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

package/src/css/aspects/gap/types.ts

@@ -1,10 +0,0 @@
-import {Space} from '@sanity/ui/theme'
-
-import {ResponsiveProp} from '../../types'
-
-/** @public */
-export interface GapStyleProps {
-  gap?: ResponsiveProp<Space>
-  gapX?: ResponsiveProp<Space>
-  gapY?: ResponsiveProp<Space>
-}

package/src/css/aspects/grid/grid.ts

@@ -1,13 +0,0 @@
-import {_resp} from '../../_resp'
-import {composeClassNames} from '../../composeClassNames'
-import {GridStyleProps} from './types'
-
-export function grid(props: GridStyleProps): string | undefined {
-  return composeClassNames(
-    _resp('auto-cols', props.autoCols),
-    _resp('auto-flow', props.autoFlow),
-    _resp('auto-rows', props.autoRows),
-    _resp('cols', props.columns),
-    _resp('rows', props.rows),
-  )
-}

package/src/css/aspects/grid/gridAutoColumns.style.ts

@@ -1,11 +0,0 @@
-import {_responsiveRule} from '../../_responsiveRule'
-import type {Style, StyleRules} from '../../types'
-
-const util: StyleRules = {}
-
-_responsiveRule(util, 'auto-cols-auto', {gridAutoColumns: 'auto'})
-_responsiveRule(util, 'auto-cols-min', {gridAutoColumns: 'min-content'})
-_responsiveRule(util, 'auto-cols-max', {gridAutoColumns: 'max-content'})
-_responsiveRule(util, 'auto-cols-fr', {gridAutoColumns: 'minmax(0, 1fr)'})
-
-export const gridAutoColumnsStyle: Style = {layers: {util}}

package/src/css/aspects/grid/gridAutoFlow.style.ts

@@ -1,11 +0,0 @@
-import {_responsiveRule} from '../../_responsiveRule'
-import type {Style, StyleRules} from '../../types'
-
-const util: StyleRules = {}
-
-_responsiveRule(util, 'auto-flow-row', {gridAutoFlow: 'row'})
-_responsiveRule(util, 'auto-flow-column', {gridAutoFlow: 'column'})
-_responsiveRule(util, 'auto-flow-row-dense', {gridAutoFlow: 'row dense'})
-_responsiveRule(util, 'auto-flow-column-dense', {gridAutoFlow: 'column dense'})
-
-export const gridAutoFlowStyle: Style = {layers: {util}}