@sanity/ui 3.0.0-static.4 → 3.0.0-static.40

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.props, {
+    flexWrap: 'wrap',
+  }),
+  'wrap-reverse': _responsiveStyle(layers.props, {
+    flexWrap: 'wrap-reverse',
+  }),
+  'nowrap': _responsiveStyle(layers.props, {
+    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): string | undefined {
+  return _responsiveClassName(options, props.flexWrap)
+}

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,94 @@
+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

@@ -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): string | undefined {
+  return _composeClassNames(root, weights[props.weight ?? 'regular'])
+}

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

@@ -0,0 +1,6 @@
+import type {FontWeight} from '@sanity/ui/theme'
+
+/** @public */
+export interface FontStyleProps {
+  weight?: FontWeight
+}

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.props, {
+        gap: vars.space[index],
+      }),
+    ]),
+  ),
+}
+
+export const gapXOptions: ResponsiveRuleOptions<Space> = {
+  ..._fromEntries(
+    SPACE.map((index) => [
+      index,
+      _responsiveStyle(layers.props, {
+        columnGap: vars.space[index],
+      }),
+    ]),
+  ),
+}
+
+export const gapYOptions: ResponsiveRuleOptions<Space> = {
+  ..._fromEntries(
+    SPACE.map((index) => [
+      index,
+      _responsiveStyle(layers.props, {
+        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): string | undefined {
+  return _composeClassNames(
+    _responsiveClassName(gapOptions, props.gap),
+    _responsiveClassName(gapXOptions, props.gapX),
+    _responsiveClassName(gapYOptions, props.gapY),
+  )
+}

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

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

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 {GridAutoColumns} from './types'
+
+export const options: ResponsiveRuleOptions<GridAutoColumns> = {
+  auto: _responsiveStyle(layers.props, {
+    gridAutoColumns: 'auto',
+  }),
+  min: _responsiveStyle(layers.props, {
+    gridAutoColumns: 'min-content',
+  }),
+  max: _responsiveStyle(layers.props, {
+    gridAutoColumns: 'max-content',
+  }),
+  fr: _responsiveStyle(layers.props, {
+    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): string | undefined {
+  return _responsiveClassName(options, props.gridAutoColumns)
+}

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

@@ -0,0 +1,9 @@
+import type {ResponsiveProp} from '../../types'
+
+/** @public */
+export type GridAutoColumns = 'auto' | 'min' | 'max' | 'fr'
+
+/** @public */
+export interface GridAutoColumnsStyleProps {
+  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.props, {
+    gridAutoFlow: 'row',
+  }),
+  'column': _responsiveStyle(layers.props, {
+    gridAutoFlow: 'column-content',
+  }),
+  'row dense': _responsiveStyle(layers.props, {
+    gridAutoFlow: 'row dense',
+  }),
+  'column dense': _responsiveStyle(layers.props, {
+    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): string | undefined {
+  return _responsiveClassName(options, props.gridAutoFlow)
+}

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

@@ -0,0 +1,9 @@
+import type {ResponsiveProp} from '../../types'
+
+/** @public */
+export type GridAutoFlow = 'row' | 'column' | 'row dense' | 'column dense'
+
+/** @public */
+export interface GridAutoFlowStyleProps {
+  gridAutoFlow?: ResponsiveProp<GridAutoFlow>
+}

package/src/css/props/gridAutoRows/gridAutoRows.css.ts

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

package/src/css/props/gridAutoRows/gridAutoRows.ts

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

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

@@ -0,0 +1,9 @@
+import type {ResponsiveProp} from '../../types'
+
+/** @public */
+export type GridAutoRows = 'auto' | 'min' | 'max' | 'fr'
+
+/** @public */
+export interface GridAutoRowsStyleProps {
+  gridAutoRows?: ResponsiveProp<GridAutoRows>
+}

package/src/css/props/gridColumn/gridColumn.css.ts

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

package/src/css/props/gridColumn/gridColumn.ts

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

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

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

package/src/css/props/gridColumnEnd/gridColumnEnd.css.ts

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

package/src/css/props/gridColumnEnd/gridColumnEnd.ts

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

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

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

package/src/css/props/gridColumnStart/gridColumnStart.css.ts

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

package/src/css/props/gridColumnStart/gridColumnStart.ts

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

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

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

package/src/css/props/gridRow/gridRow.css.ts

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

package/src/css/props/gridRow/gridRow.ts

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

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

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