@sanity/ui 3.0.0-static.0 → 3.0.0-static.10

package/src/css/primitives/selectable/__style.ts

@@ -1,115 +0,0 @@
-import {getTheme_v2} from '@sanity/ui/theme'
-import {css} from '../../../core/lib/styled'
-import {ThemeProps} from '../../../core/styles'
-import {_cardColorStyle} from '../../../core/styles/card'
-import {SelectableTone} from '../../../core/types'
-
-/**
- * @internal
- * @deprecated
- */
-export interface SelectableStyleProps {
-  $tone: SelectableTone
-}
-
-export function selectableBaseStyle(): ReturnType<typeof css> {
-  return css`
-    background-color: inherit;
-    color: inherit;
-
-    &[data-as='button'] {
-      -webkit-font-smoothing: inherit;
-      appearance: none;
-      outline: none;
-      font: inherit;
-      text-align: inherit;
-      border: 0;
-      width: -moz-available;
-      width: -webkit-fill-available;
-      width: stretch;
-    }
-
-    /* &:is(a) */
-    &[data-as='a'] {
-      text-decoration: none;
-    }
-  `
-}
-
-export function selectableColorStyle(
-  props: SelectableStyleProps & ThemeProps,
-): ReturnType<typeof css> {
-  const {$tone} = props
-  const {color, style} = getTheme_v2(props.theme)
-  const tone = color.selectable[$tone]
-
-  return css`
-    ${_cardColorStyle(color, tone.enabled)}
-
-    background-color: var(--card-bg-color);
-    color: var(--card-fg-color);
-    outline: none;
-
-    /* &:is(button) */
-    &[data-as='button'] {
-      &:disabled {
-        ${_cardColorStyle(color, tone.disabled)}
-      }
-
-      &:not(:disabled) {
-        &[aria-pressed='true'] {
-          ${_cardColorStyle(color, tone.pressed)}
-        }
-
-        &[data-selected],
-        &[aria-selected='true'] > & {
-          ${_cardColorStyle(color, tone.selected)}
-        }
-
-        @media (hover: hover) {
-          &:not([data-selected]) {
-            &[data-hovered],
-            &:hover {
-              ${_cardColorStyle(color, tone.hovered)}
-            }
-
-            &:active {
-              ${_cardColorStyle(color, tone.pressed)}
-            }
-          }
-        }
-      }
-    }
-
-    /* &:is(a) */
-    &[data-as='a'] {
-      &[data-disabled] {
-        ${_cardColorStyle(color, tone.disabled)}
-      }
-
-      &:not([data-disabled]) {
-        &[data-pressed] {
-          ${_cardColorStyle(color, tone.pressed)}
-        }
-
-        &[data-selected] {
-          ${_cardColorStyle(color, tone.selected)}
-        }
-
-        @media (hover: hover) {
-          &:not([data-selected]) {
-            &[data-hovered],
-            &:hover {
-              ${_cardColorStyle(color, tone.hovered)}
-            }
-            &:active {
-              ${_cardColorStyle(color, tone.pressed)}
-            }
-          }
-        }
-      }
-    }
-
-    ${style?.card?.root}
-  `
-}

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

@@ -1,27 +0,0 @@
-import {Rules} from '../../types'
-
-export const selectableRules: Rules = {
-  selectable: {
-    'backgroundColor': 'inherit',
-    'color': 'inherit',
-
-    '@nest': {
-      '&[data-as="button"]': {
-        WebkitFontSmoothing: 'inherit',
-        appearance: 'none',
-        outline: 'none',
-        font: 'inherit',
-        textAlign: 'inherit',
-        border: 0,
-        // width: '-moz-available',
-        // width: '-webkit-fill-available',
-        width: 'stretch',
-      },
-
-      /* &:is(a) */
-      '&[data-as="a"]': {
-        textDecoration: 'none',
-      },
-    },
-  },
-}

package/src/css/primitives/selectable/selectable.ts

@@ -1,9 +0,0 @@
-import {composeClassNames} from '../../composeClassNames'
-import {radius} from '../../styles/radius'
-import {SelectableStyleProps} from './types'
-
-export function selectable(props: SelectableStyleProps): string {
-  const {tone = 'default'} = props
-
-  return composeClassNames('selectable', `selectable-tone-${tone}`, radius(props))
-}

package/src/css/primitives/selectable/types.ts

@@ -1,6 +0,0 @@
-import {SelectableTone} from '@sanity/ui'
-import {RadiusStyleProps} from '../../styles/radius'
-
-export interface SelectableStyleProps extends RadiusStyleProps {
-  tone?: SelectableTone
-}

package/src/css/rules.ts

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

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

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

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

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

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

package/src/css/styles/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 {
-  return composeClassNames(_resp(`flex`, props.flex))
-}

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

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

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

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

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

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

package/src/css/styles/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 {
-  return composeClassNames(_resp(`g`, props.gap), _resp(`gx`, props.gapX), _resp(`gy`, props.gapY))
-}

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

@@ -1,33 +0,0 @@
-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}`, {
-        gap: space === 0.5 ? 'calc(var(--space-1) / 2)' : vars.space[space],
-      }),
-    }
-  }, {}),
-
-  ...SPACE.reduce<Rules>((acc, space) => {
-    return {
-      ...acc,
-      ...responsiveRules(`gx-${space}`, {
-        columnGap: space === 0.5 ? 'calc(var(--space-1) / 2)' : vars.space[space],
-      }),
-    }
-  }, {}),
-
-  ...SPACE.reduce<Rules>((acc, space) => {
-    return {
-      ...acc,
-      ...responsiveRules(`gy-${space}`, {
-        rowGap: space === 0.5 ? 'calc(var(--space-1) / 2)' : vars.space[space],
-      }),
-    }
-  }, {}),
-}

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

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