@sanity/ui 2.10.0-corel.0 → 3.0.0-static.1

package/src/css/styles/border/border.ts

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

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

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

package/src/css/styles/border/rules.ts

@@ -0,0 +1,24 @@
+import {responsiveRules} from '../../responsiveRules'
+import {Rules} from '../../types'
+
+export const borderRules: Rules = {
+  ...responsiveRules('border', {
+    border: '1px solid var(--card-border-color)',
+  }),
+
+  ...responsiveRules('border-t', {
+    borderTop: '1px solid var(--card-border-color)',
+  }),
+
+  ...responsiveRules('border-r', {
+    borderRight: '1px solid var(--card-border-color)',
+  }),
+
+  ...responsiveRules('border-b', {
+    borderBottom: '1px solid var(--card-border-color)',
+  }),
+
+  ...responsiveRules('border-l', {
+    borderLeft: '1px solid var(--card-border-color)',
+  }),
+}

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

@@ -0,0 +1,10 @@
+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/styles/display/rules.ts

@@ -0,0 +1,62 @@
+import {responsiveRules} from '../../responsiveRules'
+import {type Rules} from '../../types'
+
+export const displayRules: Rules = {
+  ...responsiveRules('block', {
+    '@nest': {
+      '&:not([hidden])': {
+        display: 'block',
+      },
+    },
+  }),
+
+  ...responsiveRules('inline-block', {
+    '@nest': {
+      '&:not([hidden])': {
+        display: 'inline-block',
+      },
+    },
+  }),
+
+  ...responsiveRules('flex', {
+    '@nest': {
+      '&:not([hidden])': {
+        display: 'flex',
+      },
+    },
+  }),
+
+  ...responsiveRules('inline-flex', {
+    '@nest': {
+      '&:not([hidden])': {
+        display: 'inline-flex',
+      },
+    },
+  }),
+
+  ...responsiveRules('grid', {
+    'gridTemplateRows': 'auto',
+    '@nest': {
+      '&:not([hidden])': {
+        display: 'grid',
+      },
+    },
+  }),
+
+  ...responsiveRules('grid-flex', {
+    'gridTemplateRows': 'auto',
+    '@nest': {
+      '&:not([hidden])': {
+        display: 'grid-flex',
+      },
+    },
+  }),
+
+  ...responsiveRules('none', {
+    '@nest': {
+      '&:not([hidden])': {
+        display: 'none',
+      },
+    },
+  }),
+}

package/src/css/styles/flex/flex.ts

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

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

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

package/src/css/styles/flex/rules.ts

@@ -0,0 +1,28 @@
+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'}),
+}

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

@@ -0,0 +1,35 @@
+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/styles/flexItem/flexItem.ts

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

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

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

package/src/css/styles/flexItem/rules.ts

@@ -0,0 +1,11 @@
+import {responsiveRules} from '../../responsiveRules'
+import {type Rules} from '../../types'
+
+export const flexItemRules: Rules = {
+  ...responsiveRules('flex-none', {flex: 'none'}),
+  ...responsiveRules('flex-1', {flex: 1}),
+  ...responsiveRules('flex-2', {flex: 2}),
+  ...responsiveRules('flex-3', {flex: 3}),
+  ...responsiveRules('flex-4', {flex: 4}),
+  ...responsiveRules('flex-5', {flex: 5}),
+}

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

@@ -0,0 +1,11 @@
+import {ResponsiveProp} from '../../types'
+
+/**
+ * @public
+ */
+export type FlexValue = number | 'none' | 'auto' | 'initial'
+
+/** @public */
+export interface FlexItemStyleProps {
+  flex?: ResponsiveProp<FlexValue>
+}

package/src/css/styles/font/font.ts

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

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

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

package/src/css/styles/font/rules.ts

@@ -0,0 +1,148 @@
+import {responsiveRules} from '../../responsiveRules'
+import {type Rules} from '../../types'
+
+export const fontRules: Rules = {
+  'font': {
+    'position': 'relative',
+    'fontFamily': 'var(--font-family)',
+    '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-cap-height':
+      'calc(var(--font-line-height) - var(--font-ascender-height) - var(--font-descender-height))',
+    '--font-icon-offset': 'calc((var(--font-cap-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
+
+  ...responsiveRules('text-align-initial', {
+    textAlign: 'initial',
+  }),
+
+  ...responsiveRules('text-align-left', {
+    textAlign: 'left',
+  }),
+
+  ...responsiveRules('text-align-center', {
+    textAlign: 'center',
+  }),
+
+  ...responsiveRules('text-align-right', {
+    textAlign: 'right',
+  }),
+
+  ...responsiveRules('text-align-justify', {
+    textAlign: 'justify',
+  }),
+}
+
+// .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/styles/font/types.ts

@@ -0,0 +1,12 @@
+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/styles/gap/gap.ts

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

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

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

package/src/css/styles/gap/rules.ts

@@ -0,0 +1,33 @@
+import {SPACE} from '@sanity/ui/theme'
+import {responsiveRules} from '../../responsiveRules'
+import {type Rules} from '../../types'
+import {vars} from '../../vars'
+
+export const gapRules: Rules = {
+  ...SPACE.reduce<Rules>((acc, space) => {
+    return {
+      ...acc,
+      ...responsiveRules(`g-${space}`.replace('.', '_'), {
+        gap: vars.space[space],
+      }),
+    }
+  }, {}),
+
+  ...SPACE.reduce<Rules>((acc, space) => {
+    return {
+      ...acc,
+      ...responsiveRules(`gx-${space}`.replace('.', '_'), {
+        columnGap: vars.space[space],
+      }),
+    }
+  }, {}),
+
+  ...SPACE.reduce<Rules>((acc, space) => {
+    return {
+      ...acc,
+      ...responsiveRules(`gy-${space}`.replace('.', '_'), {
+        rowGap: vars.space[space],
+      }),
+    }
+  }, {}),
+}

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

@@ -0,0 +1,9 @@
+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/styles/grid/grid.ts

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

package/src/css/styles/grid/index.ts

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

package/src/css/styles/grid/rules.ts

@@ -0,0 +1,146 @@
+import {responsiveRules} from '../../responsiveRules'
+import {type Rules} from '../../types'
+
+export const gridRules: Rules = {
+  // autoCols
+  ...responsiveRules('auto-cols-auto', {gridAutoColumns: 'auto'}),
+  ...responsiveRules('auto-cols-min', {gridAutoColumns: 'min'}),
+  ...responsiveRules('auto-cols-max', {gridAutoColumns: 'max'}),
+  ...responsiveRules('auto-cols-fr', {gridAutoColumns: 'fr'}),
+
+  // autoFlow
+  ...responsiveRules('auto-flow-row', {gridAutoFlow: 'row'}),
+  ...responsiveRules('auto-flow-column', {gridAutoFlow: 'column'}),
+  ...responsiveRules('auto-flow-row-dense', {gridAutoFlow: 'row dense'}),
+  ...responsiveRules('auto-flow-column-dense', {gridAutoFlow: 'column dense'}),
+
+  // autoRows
+  ...responsiveRules('auto-rows-auto', {gridAutoRows: 'auto'}),
+  ...responsiveRules('auto-rows-min', {gridAutoRows: 'min-content'}),
+  ...responsiveRules('auto-rows-max', {gridAutoRows: 'max-content'}),
+  ...responsiveRules('auto-rows-fr', {gridAutoRows: 'minmax(0, 1fr)'}),
+
+  // columns
+  ...responsiveRules('columns-1', {gridTemplateColumns: 'repeat(1, 1fr)'}),
+  ...responsiveRules('columns-2', {gridTemplateColumns: 'repeat(2, 1fr)'}),
+  ...responsiveRules('columns-3', {gridTemplateColumns: 'repeat(3, 1fr)'}),
+  ...responsiveRules('columns-4', {gridTemplateColumns: 'repeat(4, 1fr)'}),
+  ...responsiveRules('columns-5', {gridTemplateColumns: 'repeat(5, 1fr)'}),
+  ...responsiveRules('columns-6', {gridTemplateColumns: 'repeat(6, 1fr)'}),
+  ...responsiveRules('columns-7', {gridTemplateColumns: 'repeat(7, 1fr)'}),
+  ...responsiveRules('columns-8', {gridTemplateColumns: 'repeat(8, 1fr)'}),
+  ...responsiveRules('columns-9', {gridTemplateColumns: 'repeat(9, 1fr)'}),
+  ...responsiveRules('columns-10', {gridTemplateColumns: 'repeat(10, 1fr)'}),
+  ...responsiveRules('columns-12', {gridTemplateColumns: 'repeat(12, 1fr)'}),
+
+  // rows
+  ...responsiveRules('rows-1', {gridTemplateRows: 'repeat(1, 1fr)'}),
+  ...responsiveRules('rows-2', {gridTemplateRows: 'repeat(2, 1fr)'}),
+  ...responsiveRules('rows-3', {gridTemplateRows: 'repeat(3, 1fr)'}),
+  ...responsiveRules('rows-4', {gridTemplateRows: 'repeat(4, 1fr)'}),
+  ...responsiveRules('rows-5', {gridTemplateRows: 'repeat(5, 1fr)'}),
+  ...responsiveRules('rows-6', {gridTemplateRows: 'repeat(6, 1fr)'}),
+  ...responsiveRules('rows-7', {gridTemplateRows: 'repeat(7, 1fr)'}),
+  ...responsiveRules('rows-8', {gridTemplateRows: 'repeat(8, 1fr)'}),
+  ...responsiveRules('rows-9', {gridTemplateRows: 'repeat(9, 1fr)'}),
+  ...responsiveRules('rows-10', {gridTemplateRows: 'repeat(10, 1fr)'}),
+  ...responsiveRules('rows-12', {gridTemplateRows: 'repeat(12, 1fr)'}),
+}
+
+// import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
+// import {rem, _responsive} from '../helpers'
+// import {ThemeProps} from '../types'
+// import {ResponsiveGridStyleProps} from './types'
+
+// const GRID_AUTO_COLUMS = {
+//   auto: 'auto',
+//   min: 'min-content',
+//   max: 'max-content',
+//   fr: 'minmax(0, 1fr)',
+// }
+
+// const GRID_AUTO_ROWS = {
+//   auto: 'auto',
+//   min: 'min-content',
+//   max: 'max-content',
+//   fr: 'minmax(0, 1fr)',
+// }
+
+// export function responsiveGridStyle(): Array<
+//   CSSObject | ((props: ResponsiveGridStyleProps & ThemeProps) => CSSObject[])
+// > {
+//   return [
+//     responsiveGridAutoFlowStyle,
+//     responsiveGridAutoRowsStyle,
+//     responsiveGridAutoColsStyle,
+//     responsiveGridColumnsStyle,
+//     responsiveGridRowsStyle,
+//     responsiveGridGapStyle,
+//     responsiveGridGapXStyle,
+//     responsiveGridGapYStyle,
+//   ]
+// }
+
+// function responsiveGridAutoFlowStyle(props: ResponsiveGridStyleProps & ThemeProps) {
+//   const {media} = getTheme_v2(props.theme)
+
+//   return _responsive(media, props.$autoFlow, (autoFlow) => ({
+//     gridAutoFlow: autoFlow,
+//   }))
+// }
+
+// function responsiveGridAutoRowsStyle(props: ResponsiveGridStyleProps & ThemeProps) {
+//   const {media} = getTheme_v2(props.theme)
+
+//   return _responsive(media, props.$autoRows, (autoRows) => ({
+//     gridAutoRows: autoRows && GRID_AUTO_ROWS[autoRows],
+//   }))
+// }
+
+// function responsiveGridAutoColsStyle(props: ResponsiveGridStyleProps & ThemeProps) {
+//   const {media} = getTheme_v2(props.theme)
+
+//   return _responsive(media, props.$autoCols, (autoCols) => ({
+//     gridAutoColumns: autoCols && GRID_AUTO_COLUMS[autoCols],
+//   }))
+// }
+
+// function responsiveGridColumnsStyle(props: ResponsiveGridStyleProps & ThemeProps) {
+//   const {media} = getTheme_v2(props.theme)
+
+//   return _responsive(media, props.$columns, (columns) => ({
+//     gridTemplateColumns: columns && `repeat(${columns},minmax(0,1fr));`,
+//   }))
+// }
+
+// function responsiveGridRowsStyle(props: ResponsiveGridStyleProps & ThemeProps) {
+//   const {media} = getTheme_v2(props.theme)
+
+//   return _responsive(media, props.$rows, (rows) => ({
+//     gridTemplateRows: rows && `repeat(${rows},minmax(0,1fr));`,
+//   }))
+// }
+
+// function responsiveGridGapStyle(props: ResponsiveGridStyleProps & ThemeProps) {
+//   const {media, space} = getTheme_v2(props.theme)
+
+//   return _responsive(media, props.$gap, (gap) => ({
+//     gridGap: gap ? rem(space[gap]) : undefined,
+//   }))
+// }
+
+// function responsiveGridGapXStyle(props: ResponsiveGridStyleProps & ThemeProps) {
+//   const {media, space} = getTheme_v2(props.theme)
+
+//   return _responsive(media, props.$gapX, (gapX) => ({
+//     columnGap: gapX ? rem(space[gapX]) : undefined,
+//   }))
+// }
+
+// function responsiveGridGapYStyle(props: ResponsiveGridStyleProps & ThemeProps) {
+//   const {media, space} = getTheme_v2(props.theme)
+
+//   return _responsive(media, props.$gapY, (gapY) => ({
+//     rowGap: gapY ? rem(space[gapY]) : undefined,
+//   }))
+// }