@sanity/ui 2.9.0-corel.0 → 3.0.0-static.0

package/src/css/primitives/token/rules.ts

@@ -0,0 +1,45 @@
+import type {Rules} from '../../types'
+import {vars} from '../../vars'
+
+export const tokenRules: Rules = {
+  token: {
+    '@nest': {
+      '&.atrule': {color: vars.color.syntax.atrule},
+      '&.attr-name': {color: vars.color.syntax.attrName},
+      '&.attr-value': {color: vars.color.syntax.attrValue},
+      '&.attribute': {color: vars.color.syntax.attribute},
+      '&.boolean': {color: vars.color.syntax.boolean},
+      '&.builtin': {color: vars.color.syntax.builtin},
+      '&.cdata': {color: vars.color.syntax.cdata},
+      '&.char': {color: vars.color.syntax.char},
+      '&.class': {color: vars.color.syntax.class},
+      '&.class-name': {color: vars.color.syntax.className},
+      '&.comment': {color: vars.color.syntax.comment},
+      '&.constant': {color: vars.color.syntax.constant},
+      '&.deleted': {color: vars.color.syntax.deleted},
+      '&.doctype': {color: vars.color.syntax.doctype},
+      '&.entity': {color: vars.color.syntax.entity},
+      '&.function': {color: vars.color.syntax.function},
+      '&.hexcode': {color: vars.color.syntax.hexcode},
+      '&.id': {color: vars.color.syntax.id},
+      '&.important': {color: vars.color.syntax.important},
+      '&.inserted': {color: vars.color.syntax.inserted},
+      '&.keyword': {color: vars.color.syntax.keyword},
+      '&.number': {color: vars.color.syntax.number},
+      '&.operator': {color: vars.color.syntax.operator},
+      '&.prolog': {color: vars.color.syntax.prolog},
+      '&.property': {color: vars.color.syntax.property},
+      '&.pseudo-class': {color: vars.color.syntax.pseudoClass},
+      '&.pseudo-element': {color: vars.color.syntax.pseudoElement},
+      '&.punctuation': {color: vars.color.syntax.punctuation},
+      '&.regex': {color: vars.color.syntax.regex},
+      '&.selector': {color: vars.color.syntax.selector},
+      '&.string': {color: vars.color.syntax.string},
+      '&.symbol': {color: vars.color.syntax.symbol},
+      '&.tag': {color: vars.color.syntax.tag},
+      '&.unit': {color: vars.color.syntax.unit},
+      '&.url': {color: vars.color.syntax.url},
+      '&.variable': {color: vars.color.syntax.variable},
+    },
+  },
+}

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

@@ -0,0 +1 @@
+export * from './tooltip'

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

@@ -0,0 +1,17 @@
+import {Rules} from '../../types'
+
+export const tooltipRules: Rules = {
+  'tooltip': {
+    pointerEvents: 'none',
+  },
+
+  'tooltip-card': {
+    '@nest': {
+      '&[data-animate] > *': {
+        // opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
+        opacity: `var(--motion-content-opacity, 1)`,
+        willChange: 'opacity',
+      },
+    },
+  },
+}

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

@@ -0,0 +1,9 @@
+import {composeClassNames} from '../../composeClassNames'
+
+export function tooltip(): string {
+  return composeClassNames('tooltip')
+}
+
+export function tooltipCard(): string {
+  return composeClassNames('tooltip-card')
+}

package/src/css/responsiveRules.ts

@@ -0,0 +1,25 @@
+import {type Properties, type Rules} from './types'
+
+export function responsiveRules(className: string, props: Properties): Rules {
+  return {
+    [className]: props,
+    [`_1:${className}`]: {
+      '@media': {'screen and (min-width: 360px)': props},
+    },
+    [`_2:${className}`]: {
+      '@media': {'screen and (min-width: 600px)': props},
+    },
+    [`_3:${className}`]: {
+      '@media': {'screen and (min-width: 900px)': props},
+    },
+    [`_4:${className}`]: {
+      '@media': {'screen and (min-width: 1200px)': props},
+    },
+    [`_5:${className}`]: {
+      '@media': {'screen and (min-width: 1800px)': props},
+    },
+    [`_6:${className}`]: {
+      '@media': {'screen and (min-width: 2400px)': props},
+    },
+  }
+}

package/src/css/rules.ts

@@ -0,0 +1,121 @@
+import {breadcrumbsRules} from './components/breadcrumbs/rules'
+import {dialogRules} from './components/dialog/rules'
+import {avatarRules} from './primitives/avatar/rules'
+import {badgeRules} from './primitives/badge/rules'
+import {boxRules} from './primitives/box/rules'
+import {buttonRules} from './primitives/button/rules'
+import {cardRules} from './primitives/card/rules'
+import {checkboxRules} from './primitives/checkbox/rules'
+import {codeRules} from './primitives/code/rules'
+import {containerRules} from './primitives/container/rules'
+import {headingRules} from './primitives/heading/rules'
+import {kbdRules} from './primitives/kbd/rules'
+import {labelRules} from './primitives/label/rules'
+import {popoverRules} from './primitives/popover/rules'
+import {radioRules} from './primitives/radio/rules'
+import {selectRules} from './primitives/select/rules'
+import {selectableRules} from './primitives/selectable/rules'
+import {spinnerRules} from './primitives/spinner/rules'
+import {switchRules} from './primitives/switch/rules'
+import {textRules} from './primitives/text/rules'
+import {textAreaRules} from './primitives/textArea/rules'
+import {textInputRules} from './primitives/textInput/rules'
+import {tokenRules} from './primitives/token/rules'
+import {tooltipRules} from './primitives/tooltip/rules'
+import {borderRules} from './styles/border/rules'
+import {displayRules} from './styles/display/rules'
+import {flexRules} from './styles/flex/rules'
+import {flexItemRules} from './styles/flexItem/rules'
+import {fontRules} from './styles/font/rules'
+import {gapRules} from './styles/gap/rules'
+import {gridRules} from './styles/grid/rules'
+import {gridItemRules} from './styles/gridItem/rules'
+import {heightRules} from './styles/height/rules'
+import {
+  marginBottomRules,
+  marginLeftRules,
+  marginRightRules,
+  marginRules,
+  marginTopRules,
+  marginXRules,
+  marginYRules,
+} from './styles/margin/rules'
+import {maxWidthRules} from './styles/maxWidth/rules'
+import {overflowRules} from './styles/overflow/rules'
+import {
+  paddingBottomRules,
+  paddingLeftRules,
+  paddingRightRules,
+  paddingRules,
+  paddingTopRules,
+  paddingXRules,
+  paddingYRules,
+} from './styles/padding/rules'
+import {pointerEventsRules} from './styles/pointerEvents/rules'
+import {positionRules} from './styles/position/rules'
+import {radiusRules} from './styles/radius/rules'
+import {shadowRules} from './styles/shadow/rules'
+import {widthRules} from './styles/width/rules'
+import {type Rules} from './types'
+
+export const rules: Rules = {
+  // styless
+  ...displayRules,
+  ...flexRules,
+  ...flexItemRules,
+  ...gridItemRules,
+  ...borderRules,
+  ...paddingRules,
+  ...paddingXRules,
+  ...paddingYRules,
+  ...paddingTopRules,
+  ...paddingRightRules,
+  ...paddingBottomRules,
+  ...paddingLeftRules,
+  ...pointerEventsRules,
+  ...marginRules,
+  ...marginXRules,
+  ...marginYRules,
+  ...marginTopRules,
+  ...marginRightRules,
+  ...marginBottomRules,
+  ...marginLeftRules,
+  ...fontRules,
+  ...gapRules,
+  ...gridRules,
+  ...heightRules,
+  ...overflowRules,
+  ...positionRules,
+  ...radiusRules,
+  ...shadowRules,
+  ...widthRules,
+
+  // primitives
+  ...avatarRules,
+  ...badgeRules,
+  ...boxRules,
+  ...buttonRules,
+  ...cardRules,
+  ...checkboxRules,
+  ...codeRules,
+  ...containerRules,
+  ...headingRules,
+  ...kbdRules,
+  ...labelRules,
+  ...maxWidthRules,
+  ...popoverRules,
+  ...radioRules,
+  ...selectRules,
+  ...selectableRules,
+  ...spinnerRules,
+  ...switchRules,
+  ...textRules,
+  ...textAreaRules,
+  ...textInputRules,
+  ...tokenRules,
+  ...tooltipRules,
+
+  // components
+  ...breadcrumbsRules,
+  ...dialogRules,
+}

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,12 @@
+import {_resp} from '../../_resp'
+import {composeClassNames} from '../../composeClassNames'
+import {FontStyleProps} from './types'
+
+const prefixes = {
+  weight: 'font',
+}
+
+/** @public */
+export function font(props: FontStyleProps): string {
+  return composeClassNames('font', _resp(prefixes.weight, props.weight))
+}

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,125 @@
+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)',
+  },
+}
+
+// .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,6 @@
+import {FontWeight} from '@sanity/ui/theme'
+
+/** @public */
+export interface FontStyleProps {
+  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'